@charset "utf-8";
/* peterworth-v7 "classic" theme, trimmed for the static site (01 Spec Phase 4, docs/theme-map.md).
   Ported from the live theme's reset.css + style.css as edited 2026-09-22, plus new rules for the tabs, the
   genre chip row, the home links row, the contact form states and the tracklist time links. Image url()s below
   are rewritten to their hashed asset names by theme/assets.ts before this file's own hash is taken. */

/* ---- reset (styles/reset.css) ---- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
:focus {
  outline: 0;
}
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
[hidden] {
  display: none !important;
}

/* ---- Miscellaneous ---- */
body {
  font-family: Arial, "Helvetica", sans-serif;
  font-size: 11px;
  background: #000 url(/assets/bg.6f0471c3.jpg) no-repeat top center;
  color: #aaa;
}
a {
  color: #aaa;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.clear {
  clear: both;
}
.left {
  float: left !important;
}
.right {
  float: right !important;
}
#container {
  width: 1011px;
  margin: 0 auto;
}

/* ---- Header ---- */
#header {
  font-size: 16px;
}
.logo {
  margin-top: 26px;
}
.logo a {
  margin: 0 auto;
  width: 213px;
  height: 84px;
  background: url(/assets/logo.8ce3197b.png) no-repeat;
  display: block;
  text-indent: -99999px;
}
.nav_social {
  margin-top: 23px;
  margin-bottom: 20px;
}
.social_media {
  background: rgba(10, 8, 9, 0.6);
  float: right;
  padding: 14px 0 5px 5px;
  margin-top: -14px;
  position: relative;
  z-index: 9999;
}
.social_media a {
  display: block;
  width: 32px;
  height: 32px;
  background: url(/assets/social_icons.3909556c.png) no-repeat left top;
  float: left;
  margin-left: 5px;
}
.social_media a.sound {
  background-position: -38px top;
}
.social_media a.facebook {
  background-position: -76px top;
}
/* Each offset is its tile's first column in social_icons.png (the theme's -114px / -190px cut 1 px / 2 px off the
   X and RSS tiles; Mixcloud and Discogs were added after Feedburner in DJ 24, so Feedburner is no longer "right"). */
.social_media a.twitter {
  background-position: -113px top;
}
.social_media a.subscribe {
  background-position: -151px top;
}
.social_media a.rss {
  background-position: -188px top;
}
.social_media a.fire {
  background-position: -226px top;
}
.social_media a.mixcloud {
  background-position: -264px top;
}
.social_media a.discogs {
  background-position: -302px top;
}

/* ---- Navigation ---- */
/* No dark band behind the menu: only the current item has a background (Peter, DJ 34: "Non selected items in the nav
   do not need the opacity mask behind it"). */
#navigation {
  float: left;
}
#navigation li {
  float: left;
  margin-right: 11px;
}
#navigation a {
  font-weight: 700;
  padding: 5px 6px;
  display: block;
  text-decoration: none;
}
#navigation a:hover,
#navigation li.current-menu-item a {
  color: #fff;
}
#navigation li.current-menu-item a {
  background-color: #f00;
}

/* ---- Content ---- */
#content {
  margin-bottom: 30px;
}
.left_sidebar {
  float: left;
  width: 150px;
  margin-right: 27px;
}
.main_content {
  float: left;
  width: 650px;
  overflow: hidden;
}
.front_bottom {
  margin-top: 23px;
}
.front_bottom .download_musics {
  width: 100%;
}
.download_musics {
  float: left;
  width: 100%;
}

.music {
  overflow: hidden;
  height: 110px;
  margin-bottom: 20px;
  width: 315px;
}
.music_image {
  overflow: hidden;
  width: 110px !important;
  height: 100% !important;
  float: left;
}
.music_image > img {
  top: 37px !important;
  left: 35px !important;
}
.music_info {
  margin-left: 1px;
  height: 80px;
  float: left;
  background-color: #292929;
  width: 174px;
  padding: 15px;
  position: relative;
}
.music_info h2 a {
  color: #fff;
  font-weight: 700;
}
.music_info h2 a:hover {
  text-decoration: underline;
}
.music_info p,
.music_info span {
  display: block;
  margin-top: 7px;
}
.music_detail {
  bottom: 14px;
  position: absolute;
}
.music_detail a {
  color: #f00;
  font-family: Arial, "Helvetica", sans-serif;
  margin-right: 4px;
}
.music_detail a.download {
  margin-left: 6px;
}

/* ---- Widget ---- */
.dotted_line {
  width: 100%;
  background: url(/assets/dotted_line.72f9ef88.png) repeat-x;
  height: 1px;
  margin-bottom: 16px;
}
.widget {
  margin-bottom: 30px;
}
.widget .title {
  display: block;
  margin-bottom: 10px;
  color: #454444;
}
.widget li {
  margin-bottom: 4px;
}
.widget li a {
  text-decoration: underline;
  line-height: 16px;
  color: #454444;
}
.widget li a:hover {
  color: #aaa;
}

.post_content {
  font-size: 12px;
  text-align: justify;
  width: 100%;
  margin-bottom: 21px;
}
.post_content p {
  line-height: 17px;
  margin-bottom: 19px;
}
.post_content a {
  color: #f00;
}

/* ---- Arrows ---- */
.arrows {
  width: 44px;
  position: relative;
  left: 4px;
}
.arrows a {
  color: #000;
  background-color: #474747;
  padding-bottom: 1px;
  padding-left: 4px;
  padding-right: 4px;
}
.arrows a:hover {
  text-decoration: none;
  background-color: #f00;
  color: #fff;
}
.arrows a.no_hover {
  background-color: #474747;
  cursor: default;
  color: #000;
}

/* ---- Mixes ---- */
.mixes {
  width: 645px;
}
.album {
  margin-bottom: 26px;
}
.album_author,
.album_release_duration {
  display: block;
}
.album_image {
  float: left;
  width: 313px !important;
  height: 313px !important;
}
.album_image img {
  left: 136px !important;
  top: 136px !important;
}
.album_image img.attachment-full {
  border: 1px solid #212021;
  width: 313px;
  height: auto;
}
.album_info {
  float: right;
  width: 305px;
}
.album_title {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
}
.album_title,
.album_author,
.album_release_duration,
.album_description,
.album_others li a {
  line-height: 15px;
}
.album_release_duration {
  margin-bottom: 10px;
}
.album_tags {
  font-size: 10px;
  margin: 17px 0;
}
.album_tags a {
  padding: 2px 4px;
  background-color: #434343;
}
.album_tags a:hover {
  text-decoration: none;
  background-color: #f00;
  color: #fff;
}
.album_description {
  margin-bottom: 15px;
  text-align: left;
}
.album_others {
  margin-bottom: 20px;
}
.album_others li {
  margin-bottom: 4px;
}

/* The tracklist spans the mix column's full width (Peter, DJ 30; was 330px, floated left). */
.album_tracks {
  margin-bottom: 23px;
}
.album_tracks table {
  width: 100%;
  border: 1px solid #212021;
}
.album_tracks td,
.album_tracks th {
  border: 1px solid #212021;
  vertical-align: middle;
  line-height: 15px;
  padding: 3px;
}
.album_tracks .serial {
  width: 43px;
  text-align: center;
}
.album_tracks .info {
  padding-left: 13px;
}
.album_tracks th {
  text-align: left;
  padding-left: 13px;
  background-color: #292929;
  color: #fff;
}
table tr.odd {
  background-color: #080800;
}
.pw-seek {
  color: #f00;
  font-variant-numeric: tabular-nums;
}

/* ---- Contact ---- */
#contact-right {
  width: 100%;
  margin: 0 auto;
}
/* No light grey box (Peter, DJ 30): the form sits on the page, labels in the page's #aaa. */
#contact-form {
  padding: 10px 0;
  width: 90%;
  margin: 0 auto;
}
#contact-form .field {
  margin-bottom: 10px;
}
#contact-form .center {
  padding-right: 5px;
  text-align: right;
  vertical-align: top;
}
#contact-form label {
  margin-right: 5px;
  display: block;
  margin-bottom: 3px;
}
#contact-form input,
#contact-form textarea {
  margin-bottom: 10px;
}
/* Every field the same width, in the sidebar's dark grey with white text (Peter, DJ 30). */
#your_name,
#your_email,
#message {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background-color: #454444;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
}
#your_name:focus,
#your_email:focus,
#message:focus {
  outline: 1px solid #aaa;
  outline-offset: 0;
}
/* A field player.js (or the Worker) flagged: red outline, focused or not, until the value passes (DJ 32). */
#contact-form [aria-invalid="true"],
#contact-form [aria-invalid="true"]:focus {
  outline: 1px solid #f00;
  outline-offset: 0;
}
#message {
  resize: vertical;
}
/* Send Email: grey until Name and Message are filled and Email is a valid address (player.js adds .is-ready), then
   red. */
#contact-form #submit {
  border-radius: 0;
  background-color: #454444;
  border: medium none;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin-top: 10px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color 0.15s;
}
#contact-form #submit.is-ready {
  background-color: #f00;
}
#contact-form #submit:disabled {
  opacity: 0.6;
  cursor: default;
}
#contact-right h3 {
  color: #aaa;
  text-align: center;
  font-size: 20px;
}
.slideshow {
  margin-bottom: 25px;
}
.slideshow img {
  display: block;
  max-width: 100%;
  height: auto;
}
.pw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.pw-form-status {
  display: block;
  margin-top: 12px;
  color: #aaa;
}
.pw-form-status[data-state="error"] {
  color: #f00;
}
.pw-form-status[data-state="ok"] {
  color: #6fdc6f;
}
.cf-turnstile {
  margin-bottom: 10px;
}
.pw-field-error {
  display: block;
  margin: -6px 0 10px;
  color: #f00;
  font-size: 11px;
}

/* ---- Footer ---- */
#footer {
  background: url(/assets/dotted_line.72f9ef88.png) left top repeat-x;
  width: 100%;
  padding-top: 27px;
  padding-bottom: 40px;
  color: #454444;
}
#footer a {
  color: #454444;
}
#footer a:hover {
  color: #aaa;
}
.footer_logo {
  float: left;
}
.footer_links {
  float: left;
  width: 84.5%;
}
.footer_links ul {
  float: left;
  margin-left: 40px;
  margin-bottom: 16px;
}
.footer_links li {
  margin-bottom: 6px;
}
.footer_links .last {
  margin: 0;
  text-align: right;
}
.footer_note {
  clear: both;
  padding-top: 10px;
  font-size: 10px;
}

/* ---- Genre chip row (new) ---- */
.pw-genres {
  margin-bottom: 20px;
}
.pw-genres ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pw-chip {
  display: inline-block;
  padding: 3px 8px;
  background-color: #292929;
  color: #aaa;
  border-radius: 3px;
  font-size: 11px;
}
.pw-chip:hover {
  background-color: #f00;
  color: #fff;
  text-decoration: none;
}
.pw-chip[aria-current="page"] {
  background-color: #f00;
  color: #fff;
}

/* ---- Home links row (new) ---- */
.pw-home-links {
  margin-bottom: 20px;
}
.pw-home-links a {
  margin-right: 14px;
  color: #f00;
}
.pw-all-mixes {
  display: inline-block;
  margin-top: 10px;
  color: #f00;
}

/* ---- Tabs (new) ---- */
.pw-tabs {
  margin-bottom: 20px;
  clear: both;
}
.pw-tablist {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.pw-tab {
  background-color: #292929;
  color: #aaa;
  border: 0;
  padding: 6px 12px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.pw-tab:hover {
  color: #fff;
}
.pw-tab[aria-selected="true"] {
  background-color: #f00;
  color: #fff;
}
.pw-tabpanel {
  background-color: #191919;
  padding: 14px;
}
.pw-tabpanel p {
  margin-top: 10px;
  line-height: 15px;
}
.pw-embed {
  width: 100%;
  min-height: 180px;
  background-color: #292929;
}
.pw-embed-note {
  font-size: 10px;
}
.pw-deeplink {
  margin-top: 10px;
}

/* ---- Paragraphs of plain page text (home intro, 404, contact) ---- */
.pw-copy {
  line-height: 16px;
  margin-bottom: 15px;
}
.pw-copy:last-child {
  margin-bottom: 0;
}

/* ---- Records (Phase 5, new) ---- */
.pw-records-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 20px;
}
.pw-records-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #aaa;
}
.pw-records-filter select {
  background-color: #292929;
  color: #aaa;
  border: 0;
  padding: 5px 6px;
  font-family: inherit;
  font-size: 11px;
}
.pw-records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
/* A record card is the mix card (.music) with its dark panel under the cover instead of to the right (Peter, DJ 34:
   "style the cards like mixes only putting the dark bg under the art"): 1px of black between them, the artist in
   white bold like a mix title, the lines 7px apart; the panel fills the row, so every card in a row ends level. */
.pw-record-card {
  display: flex;
  flex-direction: column;
  color: #aaa;
}
.pw-record-card[hidden] {
  display: none;
}
.pw-record-card:hover {
  text-decoration: none;
}
.pw-record-card:hover .pw-record-artist {
  text-decoration: underline;
}
.pw-record-cover {
  display: block;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #191919;
  margin-bottom: 1px;
}
.pw-record-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pw-record-cover-empty {
  background-color: #292929;
}
.pw-record-meta {
  display: block;
  flex: 1;
  background-color: #292929;
  padding: 15px;
}
.pw-record-artist,
.pw-record-title,
.pw-record-sub {
  display: block;
  line-height: 14px;
}
.pw-record-artist {
  color: #fff;
  font-weight: 700;
}
.pw-record-title,
.pw-record-sub {
  margin-top: 7px;
}

/* Record page (Peter, DJ 37: "Split the cartwork and info 50/50, tracklist goes under 100%"): cover and info side by
 * side at every width, phones included; the tracklist and Played in span both columns below. */
.pw-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.pw-record-image {
  margin-bottom: 10px;
}
.pw-record-image img {
  width: 100%;
  height: auto;
  border: 1px solid #212021;
  display: block;
}
.pw-record-info {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pw-record-heading {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}
.pw-record-labels,
.pw-record-facts {
  margin-bottom: 8px;
  line-height: 15px;
}
.pw-record-labels a {
  color: #f00;
}
.pw-record-tags {
  margin-bottom: 12px;
}
.pw-tag {
  display: inline-block;
  padding: 2px 4px;
  background-color: #434343;
  font-size: 10px;
  margin: 0 4px 4px 0;
}
.pw-record-notes {
  margin-bottom: 15px;
  line-height: 16px;
}
.pw-record-forsale a,
.pw-record-discogs-credit a {
  color: #f00;
}
.pw-record-discogs-credit {
  font-size: 10px;
  margin-bottom: 10px;
}
.pw-record-tracklist,
.pw-record-played-in,
.pw-record-more,
.pw-label-songs {
  clear: both;
  margin-bottom: 20px;
}
.pw-record-tracklist,
.pw-record-played-in,
.pw-record-more {
  grid-column: 1 / -1;
}
.pw-record-tracklist table {
  width: 100%;
  border: 1px solid #212021;
}
.pw-record-tracklist td,
.pw-record-tracklist th {
  border: 1px solid #212021;
  vertical-align: middle;
  line-height: 15px;
  padding: 3px;
}
.pw-record-tracklist .serial {
  width: 43px;
  text-align: center;
}
.pw-record-tracklist .info {
  padding-left: 13px;
}
.pw-record-tracklist .pw-record-track-artist {
  padding-left: 13px;
}
.pw-record-tracklist .pw-record-track-duration {
  width: 60px;
  text-align: right;
  padding-right: 13px;
}
.pw-record-tracklist .pw-record-track-mixes {
  padding-left: 13px;
  /* Let a long mix title wrap instead of stretching the column (Peter DJ 37: "let the mix cell wrap"). */
  white-space: normal;
  word-break: break-word;
}
.pw-record-tracklist .pw-record-track-mixes a.pw-play-at {
  display: block;
}
.pw-record-tracklist .pw-record-track-mixes a.pw-play-at + a.pw-play-at {
  margin-top: 3px;
}
.pw-record-tracklist th {
  text-align: left;
  padding-left: 13px;
  background-color: #292929;
  color: #fff;
}
.pw-record-played-in h2,
.pw-record-more h2,
.pw-label-songs h2 {
  color: #fff;
  font-size: 12px;
  margin-bottom: 8px;
}
.pw-record-more {
  margin-top: 4px;
}
.pw-record-more .pw-records-grid {
  margin-bottom: 8px;
}
.pw-record-more-link {
  font-size: 10px;
}
.pw-record-played-in ul,
.pw-label-songs ul,
.pw-labels-list {
  line-height: 16px;
}
.pw-record-played-in li,
.pw-label-songs li,
.pw-labels-list li {
  margin-bottom: 6px;
}
.pw-record-play-at {
  color: #777;
  font-size: 10px;
}
.pw-labels-list {
  columns: 2;
}
.pw-label-count {
  color: #777;
  font-size: 10px;
}

/* The Collection breadcrumb (Peter, DJ 37: "Breadcrumb under the social icons"), record/labels-index/label pages. */
.pw-breadcrumb {
  margin-bottom: 12px;
  font-size: 10px;
  color: #777;
}
.pw-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.pw-breadcrumb li:not(:last-child)::after {
  /* A flex item drops the spaces inside `content`, so the gap is a margin ("Home / Collection", not "Home /Collection"). */
  content: "/";
  margin: 0 5px;
  color: #777;
}

/* `.pw-play-at` (tracklist mix column, "Played in"): red like the record page's other links, with a play mark,
 * since a tap starts the player (Peter, DJ 37: "have clicking it open the player"). */
a.pw-play-at {
  color: #f00;
}
a.pw-play-at::before {
  content: "\25B6";
  display: inline-block;
  margin-right: 4px;
  font-size: 8px;
  vertical-align: 1px;
}
a.pw-play-at:hover,
a.pw-play-at:focus-visible {
  color: #fff;
}

/* Mobile / tablet layout (kept from 2026-09-22) */
@media (max-width: 1023px) {
  body {
    font-size: 13px;
    background-size: 1011px auto;
  }
  #container {
    width: auto;
    padding: 0 16px;
  }
  .logo {
    margin-top: 16px;
  }
  .nav_social {
    margin: 16px 0;
  }
  #navigation {
    float: none;
  }
  #navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #navigation li {
    float: none;
    margin: 0 4px 4px;
  }
  .social_media {
    float: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    background: none;
  }
  .social_media a {
    float: none;
    margin: 0 4px;
  }
  #content {
    display: flex;
    flex-direction: column;
  }
  #content > .clear {
    display: none;
  }
  .main_content {
    order: -1;
    float: none;
    width: auto;
    overflow: visible;
  }
  .left_sidebar {
    display: none;
  }
  .main_content img,
  .main_content iframe,
  .main_content object,
  .main_content embed,
  .main_content video {
    max-width: 100%;
  }
  .main_content img {
    height: auto;
  }
  .main_content iframe {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .download_musics {
    float: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }
  .download_musics > .clear {
    display: none;
  }
  .music,
  .music.left,
  .music.right {
    float: none !important;
    width: auto;
    margin: 0;
    display: flex;
  }
  .music_image {
    flex: 0 0 110px;
  }
  .music_info {
    flex: 1;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 80px;
  }
  .music {
    height: auto;
    min-height: 110px;
  }
  .music_image {
    height: auto !important;
  }
  .music_detail {
    position: static;
    margin-top: 10px;
  }
  #footer {
    text-align: center;
  }
  .footer_logo {
    float: none;
    margin-bottom: 20px;
  }
  .footer_links {
    float: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 16px;
    text-align: left;
  }
  .footer_links ul {
    float: none;
    margin: 0;
  }
  .footer_links > .clear {
    display: none;
  }
  .footer_links .last {
    text-align: left;
  }
  .album_image,
  .album_image img.attachment-full {
    float: none;
    width: auto !important;
    max-width: 313px;
  }
  .album_info {
    float: none;
    width: auto;
    margin-top: 16px;
    position: relative;
    padding-right: 52px;
  }
  .album_info .arrows {
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
  }
  #your_name,
  #your_email,
  #message {
    width: 100% !important;
    max-width: none;
  }
  #contact-form {
    width: auto;
    padding: 10px 0;
  }
  .pw-record {
    column-gap: 12px;
  }
  .pw-labels-list {
    columns: 1;
  }
}

/* Mix player (kept from 2026-09-22) */
.music_image,
.album_image {
  position: relative;
}
.pw-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background:
    rgba(0, 0, 0, 0.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    no-repeat 55% 50% / 22px 22px;
  transition:
    background-color 0.15s,
    transform 0.15s;
}
.pw-play:hover,
.pw-play:focus-visible {
  background-color: #f00;
  transform: scale(1.06);
  outline: none;
}
.pw-play.is-playing {
  background-color: #f00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 5h4v14H7zM13 5h4v14h-4z'/%3E%3C/svg%3E");
  background-position: 50% 50%;
}
/* The mix page's play button sits in a dark square left of the title, not over the cover (Peter, DJ 30). */
.album_head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.album_play {
  position: relative;
  flex: none;
  width: 50px;
  height: 50px;
  background-color: #191919;
}
.album_head .album_release_duration {
  margin-bottom: 0;
}

.pw-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #111;
  border-top: 1px solid #333;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6);
  font-family: Arial, "Helvetica", sans-serif;
  color: #aaa;
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
body.pw-bar-open .pw-bar {
  transform: none;
}
body.pw-bar-open {
  padding-bottom: 84px;
}
.pw-bar-cover {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  overflow: hidden;
}
.pw-bar-cover img {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: cover;
}
.pw-bar-toggle {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background:
    #f00
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    no-repeat 55% 50% / 22px 22px;
}
.pw-bar.is-playing .pw-bar-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 5h4v14H7zM13 5h4v14h-4z'/%3E%3C/svg%3E");
  background-position: 50% 50%;
}
.pw-bar-main {
  flex: 1;
  min-width: 0;
}
.pw-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.pw-bar-title {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pw-bar-title:hover {
  text-decoration: underline;
}
.pw-bar-time {
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pw-bar-wave {
  height: 40px;
  cursor: pointer;
}
.pw-bar-close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: #777;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.pw-bar-close:hover {
  color: #fff;
}
@media (max-width: 600px) {
  .pw-bar {
    gap: 10px;
    padding-left: 12px;
    padding-right: 8px;
  }
  .pw-bar-cover {
    display: none;
  }
  .pw-bar-wave {
    height: 32px;
  }
  body.pw-bar-open {
    padding-bottom: 76px;
  }
}