#background-music { display:none; }
.music-button { position:relative; border:1px solid transparent; }
.music-button svg { width:18px; height:18px; }
.music-label { white-space:nowrap; font-size:12px; line-height:1.3; letter-spacing:.4px; }
.display-tools .music-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:106px; padding:0 10px; }
.music-button[data-state="playing"] { color:#bceaf5; background:rgba(87,163,191,.12); border-color:rgba(132,207,226,.22); }
.music-button .music-indicator { position:absolute; right:4px; bottom:4px; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:0; }
.music-button[data-state="playing"] .music-indicator { opacity:1; box-shadow:0 0 5px #9fdde5; }
.music-button .music-slash { display:none; }
.music-button[data-state="paused"] .music-slash { display:block; }
.music-button[data-state="blocked"],.music-button[data-state="error"] { color:#d7be87; }
.music-button:focus-visible { outline:2px solid #9ddae6; outline-offset:3px; }
@media (min-width:761px) { .guide-entry { margin-right:158px; } }
@media (max-width:760px) {
  .guide-entry { right:150px; }
  .guide-entry>span,.guide-entry-arrow { display:none; }
  .guide-entry>svg:first-child { display:block; }
}
@media (max-width:370px) {
  .display-tools { right:12px; }
  .display-tools .icon-button { width:27px; }
  .guide-entry { right:128px; }
  .brand-en { font-size:7.5px; letter-spacing:.1px; }
  .site-header { padding-inline:14px; }
  .wordmark { gap:6px; }
  .brand-mark { width:25px; height:25px; }
}
/* Keep the label visible below the icon when the header has less horizontal room. */
@media (max-width:1599px) {
  .display-tools .music-button { width:34px; padding:0; }
  .music-label { position:absolute; top:calc(100% + 2px); left:50%; transform:translateX(-50%); font-size:10px; letter-spacing:0; }
}
@media (max-width:760px) { .display-tools .music-button { width:30px; } }
@media (max-width:370px) { .display-tools .music-button { width:27px; } }