audio,
video {
  display: none !important;
}

#song-nav {
  display: flex;
  width: 100%;
}
#song-nav h3,
#song-nav h4,
#song-nav > div {
  margin-right: auto;
}
#song-nav > div {
  align-self: flex-end;
}

.song-row {
  width: 100%;
  background-color: var(--nav-foot-bg);
  padding: 0.5em;
  font-size: 0.85em;
}
.song-row::-moz-selection, .song-row ::-moz-selection {
  color: var(--select-bg);
  background-color: var(--select-text);
}
.song-row::selection, .song-row ::selection {
  color: var(--select-bg);
  background-color: var(--select-text);
}
.song-row img {
  border: none;
}
.song-row hr {
  color: var(--detail-text);
}

.song-details span {
  display: flex;
  text-align: right;
}
.song-details span::before {
  left: calc(var(--indent) / 2);
  width: 75px;
  margin-right: auto;
  text-align: left;
}
.song-details .song-name {
  font-family: "Josefin Slab", Slab, Jinmei, "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 1.25em;
}
.song-details .song-name::before {
  content: "Title: ";
}
.song-details .artist-name::before {
  content: "Artist: ";
}
.song-details .playlist-category {
  font-family: "Heliotrope Caps", "Bellefair", Jinmei, serif;
  text-transform: capitalize;
  background-color: var(--nav-foot-hover);
  display: block;
  text-align: center;
}

#nowPlaying {
  overflow-anchor: none;
}
#nowPlaying button {
  color: var(--nav-color);
  fill: var(--nav-color);
  width: 2.5rem;
  height: 2.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: var(--nav-foot-bg);
  transition-duration: 0.3s;
  transition-property: background-color;
  box-shadow: none;
  border-radius: 25%;
  border-color: transparent;
}
#nowPlaying button svg {
  display: inline;
  transform: scale(0.7, 0.7);
}
#nowPlaying button:hover {
  background-color: var(--nav-foot-hover);
}
#nowPlaying button:focus, #nowPlaying button:active {
  color: var(--nav-foot-bg);
  fill: var(--nav-foot-bg);
  text-decoration: none;
  text-shadow: -1px -1px var(--nav-color), 1px -1px var(--nav-color), -1px 1px var(--nav-color), 1px 1px var(--nav-color), 0 -1px var(--nav-color), 0 1px var(--nav-color), -1px 0 var(--nav-color), 1px 0 var(--nav-color);
}
#nowPlaying label {
  font-style: italic;
  font-size: 0.9em;
  color: var(--nav-color);
  display: block;
  margin: 0 auto;
}
#nowPlaying .song-row {
  font-size: 1.1rem;
}
#nowPlaying .song-details {
  margin-bottom: 1rem;
}
#nowPlaying:has(#hideCommentary:checked) #Annotations p {
  display: none;
}
#nowPlaying[data-track="0"] #prev {
  opacity: 0;
}
#nowPlaying[data-final=true] #next {
  opacity: 0;
}

progress {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  accent-color: var(--aside-color) !important;
}
progress[value] {
  display: block;
  width: 100%;
  height: 2em;
  border: 0.25rem solid currentColor;
  border-bottom: 0.125rem solid currentColor;
  outline: none;
}
progress[value], progress[value]::-webkit-progress-bar {
  color: var(--main-color);
  background-color: var(--main-color);
}
progress[value]::-moz-progress-bar, progress[value]::-webkit-progress-value,
progress[value] span {
  background-image: var(--body-bg-image);
  min-height: 2em;
  display: block;
  height: 100%;
}
progress[value] span {
  position: relative;
  z-index: 12;
}
progress::-webkit-progress-value {
  background-image: var(--body-bg-image);
  background-color: var(--aside-color);
}

#video-controls button {
  padding: 0;
  margin: 0 1em;
}
#video-controls nav {
  margin: 0.5em 0 0;
  display: flex;
  justify-content: space-around;
}
#video-controls nav > span {
  color: var(--nav-hover-color);
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 7.5%;
}
#video-controls nav label {
  font-family: "Kiwi", "Kiwi Maru", "Courier New", Courier, monospace;
  display: inline;
  margin: 0;
  max-width: 35%;
}
#video-controls nav input {
  accent-color: var(--link-color);
  margin: 0;
  padding: 0;
}
#video-controls table {
  table-layout: fixed;
  border: 0.25rem solid transparent;
  overflow: hidden;
  margin-bottom: 1rem;
  font-size: 0;
  width: 100%;
  background-color: var(--main-color);
}
#video-controls table,
#video-controls table tr,
#video-controls table th,
#video-controls table td {
  height: 0.7525rem;
  border-top: none;
  padding: 0;
  margin: 0;
}
#video-controls table tr,
#video-controls table th,
#video-controls table td {
  background-color: transparent;
  border: none;
}
#video-controls table td {
  border-right: 1px solid;
  border-color: var(--link-color);
  transition-duration: 0.3s;
  transition-property: transform, background-color, color;
}
#video-controls table td:hover {
  transform: scale(1, 1.5);
  cursor: pointer;
}
#video-controls table .active,
#video-controls table .inactive {
  opacity: 0.75;
}
#video-controls table .inactive {
  background-color: var(--aside-color);
}
#video-controls table .inactive:hover {
  background-color: var(--between);
}
#video-controls table .active {
  background-color: var(--nav-hover-color);
}
#video-controls table .active:hover {
  background-color: var(--nav-color);
}
#video-controls time {
  color: var(--nav-color);
  font-size: 0.8em;
  font-feature-settings: "tnum";
}

#lyrics {
  position: relative;
  text-wrap: balance;
  background-color: var(--aside-summary-hover);
  padding: 0.25rem;
  text-align: center;
  font-family: Heliotrope, "Heliotrope 4", Concourse, "Concourse 4", Fangsong, sans-serif;
}
#lyrics p {
  position: relative;
}
#lyrics p + p {
  margin-top: 0;
}
#lyrics p:has(+ p) {
  margin-bottom: 0;
}
#lyrics p:has(v[echo]) {
  position: absolute;
  bottom: -0.5rem;
  right: 10%;
  opacity: 0.67;
}
#lyrics p:has(v[echo]):first-child:has(+ p) {
  position: relative;
  top: -0.5rem;
  left: -0.5rem;
  margin-right: 10%;
  margin-bottom: 1rem;
}
#lyrics p:has(v[echo]):first-child + p {
  position: absolute;
  right: 10%;
  bottom: -0.5rem;
}
#lyrics p:has(v[echo]):only-child {
  position: static;
  opacity: 1;
}
#lyrics p:has(+ p v[echo]) {
  position: relative;
  top: -0.5rem;
  left: -0.5rem;
  margin-right: 10%;
  margin-bottom: 1rem;
}
#lyrics em,
#lyrics i,
#lyrics strong,
#lyrics b {
  color: var(--main-color);
}

#nyaaa {
  position: relative;
  height: 18rem;
  max-height: calc(70vh - 2em);
  margin: 1rem 0;
}

#Annotations {
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: left;
  padding: 0 0.5rem;
  max-height: min(70vh - 3em, 18rem);
  overflow-y: auto;
}
#Annotations p {
  margin: 0.5em 0;
  text-indent: 2ch;
}
#Annotations > :first-child {
  margin-top: 0;
}
#Annotations > :last-child {
  margin-bottom: 0;
}
#Annotations em,
#Annotations i,
#Annotations strong,
#Annotations b {
  color: var(--detail-text);
}

#Annotations p,
#lyrics p {
  min-height: 1.25em;
  white-space-collapse: preserve-breaks;
}

#music-list {
  background-color: var(--detail-box);
  position: fixed;
  opacity: 0.65;
  bottom: 0;
  left: max(10%, 1em);
  max-width: calc(100vw - max(10%, 1em) * 2);
  width: calc(350px + 4rem);
  margin: 0;
  padding: 0.75rem 0.75rem 0 1.1rem;
  transition-property: opacity;
  transition-duration: 0.3s;
  z-index: 99;
}
#music-list[open] {
  padding-bottom: 1rem;
}
#music-list:hover, #music-list:focus, #music-list[open] {
  opacity: 1;
}
#music-list summary {
  list-style: none;
  margin-bottom: 0.75em;
}
#music-list ol {
  padding: 0;
  margin: 0;
  max-height: 40vh;
  overflow-y: auto;
  scrollbar-color: transparent transparent;
}
#music-list ol li {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
#music-list ol li::before {
  display: block;
  content: attr(counter) ". ";
  width: 1rem;
  text-align: right;
  margin-right: 0.5rem;
}
#music-list ol li span {
  width: 100%;
  padding: 0;
  margin: 0;
}
#music-list ol li span, #music-list ol li span::before {
  position: static;
}
#music-list ol li .playlist-category {
  max-width: calc(100% - 1.5rem);
}
#music-list ol li hr {
  height: 1px;
  width: 100%;
}
#music-list ol li::-moz-selection, #music-list ol li ::-moz-selection {
  color: var(--select-bg);
  background-color: var(--select-text);
}
#music-list ol li::selection, #music-list ol li ::selection {
  color: var(--select-bg);
  background-color: var(--select-text);
}
#music-list ol .song-row {
  margin: 0.5em 0;
}
#music-list ol .song-row:has(.nowPlaying) {
  outline: 0.25em solid var(--nav-color);
  margin: 0.75em 0;
}
#music-list h4 {
  margin: 0;
}

#furtherReading {
  margin: 1em auto;
  padding: 0.5em;
  border: 0.5em solid var(--aside-color);
  background-color: var(--between);
}
#furtherReading:has(ol:empty) {
  display: none;
}
#furtherReading h4 {
  margin-top: 0;
  font-style: italic;
}
#furtherReading ol {
  margin: 0;
}
#furtherReading ol li {
  font-size: 1.125em;
}

#commentDrop {
  margin-top: 0.5em;
}
#commentDrop label {
  width: 90%;
  text-wrap: nowrap;
}
#commentDrop label:focus-within {
  font-weight: bold;
}
#commentDrop label input {
  min-width: 50%;
  margin-left: 0.5ch;
  padding: 0.1em 0.33em;
  width: auto;
}
#commentDrop textarea,
#commentDrop #send {
  width: 100%;
}
#commentDrop div.txtarea-bg::before, #commentDrop div.txtarea-bg::after {
  width: 100%;
}
#commentDrop div.txtarea-bg::after {
  background-image: url("/images/emotes/VentiFlute.png");
}
#commentDrop #send {
  padding: 0.1em;
  margin-top: 0;
}

.tippy-box[data-theme~=definition] {
  font-size: 0.65em;
}

@media only screen and (max-width: 900px) {
  #music-list {
    position: static;
    opacity: 1;
    width: 100%;
    max-width: 100%;
    margin: 1em 0;
  }
}
@media only screen and (max-width: 750px) {
  #furtherReading {
    width: -moz-max-content;
    width: max-content;
  }
  #song-nav h3 {
    margin-bottom: 0;
  }
  #song-nav > div {
    text-align: center;
    margin-right: 0;
  }
  #song-nav button {
    font-size: 0.85rem;
  }
  #video-controls {
    display: flex;
    flex-wrap: wrap;
  }
  #video-controls progress {
    order: 1;
    border-bottom: 0.25rem solid;
  }
  #video-controls nav {
    order: 2;
    width: 100%;
    margin: 1rem 0;
  }
  #video-controls table {
    order: 3;
    font-size: 1rem;
    background-color: var(--nav-foot-hover);
  }
  #video-controls table,
  #video-controls table thead,
  #video-controls table tbody,
  #video-controls table tr,
  #video-controls table th,
  #video-controls table td {
    width: 100%;
    height: auto;
    display: block;
    border-right: none;
    border-left: none;
  }
  #video-controls table #comment-regions {
    max-height: max(9em, 20vh);
    overflow-y: auto;
    scrollbar-color: currentColor transparent;
    scrollbar-gutter: stable both-edges;
  }
  #video-controls table #comment-regions td {
    white-space-collapse: preserve-breaks;
  }
  #video-controls table tr.mobileOnly {
    display: block !important;
  }
  #video-controls table tr:has(#showAnnotations:checked) + #comment-regions {
    display: none;
  }
  #video-controls table th,
  #video-controls table td {
    padding: 0.25em 0.5em;
  }
  #video-controls table th {
    background-color: var(--nav-foot-hover);
    opacity: 1;
  }
  #video-controls table td {
    border-right: none;
    border-bottom: 1px solid var(--link-color);
    text-align: left;
    transition-duration: 0.15s;
  }
  #video-controls table td::before {
    opacity: 0.8;
    float: right;
    margin-left: 2ch;
    content: attr(ts);
  }
  #video-controls table td:last-child, #video-controls table td:nth-last-child(2) {
    border-bottom: none;
  }
  #video-controls table td:empty, #video-controls table td[id^=gap] {
    display: none;
  }
  #video-controls table td[width] {
    min-width: 100%;
  }
  #video-controls table td,
  #video-controls table td i,
  #video-controls table td b,
  #video-controls table td s,
  #video-controls table td u {
    color: var(--main-color);
  }
  #video-controls table td:hover {
    transform: none;
  }
  #video-controls table td br {
    margin-bottom: 0.5em;
  }
  #video-controls table .inactive,
  #video-controls table .active {
    opacity: 1;
  }
  #video-controls table .active,
  #video-controls table .active i,
  #video-controls table .active b,
  #video-controls table .active s,
  #video-controls table .active u {
    color: var(--nav-foot-bg);
  }
  #video-controls input {
    padding: 0;
    margin: 0;
    accent-color: var(--link-color);
  }
  .tippy-box[data-theme~=definition] {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  #lyrics {
    min-height: 5.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #video-controls button {
    margin: 0;
  }
  #video-controls [id^=vol],
  #video-controls span {
    font-size: 0.85rem;
  }
}/*# sourceMappingURL=musicbox.css.map */