/* One compact sound control; status is available on focus and to screen readers. */
.sound-toggle,
body[data-reading="true"] .sound-toggle{
  position:fixed;left:var(--edge,24px);bottom:max(20px,env(safe-area-inset-bottom));
  z-index:85;display:grid;place-items:center;width:44px;height:44px;min-height:44px;
  padding:0;gap:0;border:1px solid rgb(255 246 232 / .2);border-radius:50%;
  background:rgb(16 19 28 / .68);color:#fff6e8;box-shadow:0 2px 10px #0000000d;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  cursor:pointer;touch-action:manipulation;transition:background .2s,border-color .2s,transform .2s;
}
.sound-toggle .sound-icon{display:grid;place-items:center;width:22px;height:22px;position:relative;}
.sound-toggle .sound-icon svg{display:block;width:21px;height:21px;overflow:visible;}
.sound-toggle .sound-waves{opacity:0;}
.sound-toggle .sound-off{opacity:.8;}
.sound-toggle[data-playing="true"] .sound-waves{opacity:1;}
.sound-toggle[data-playing="true"] .sound-off{opacity:0;}
.sound-toggle .sound-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.sound-toggle::after{
  content:attr(data-hint);position:absolute;left:calc(100% + 10px);top:50%;
  transform:translate(-3px,-50%);padding:7px 10px;border-radius:6px;
  background:#15181feF;color:#fff6e8;font:11px/1.3 Arial,sans-serif;
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;
}
.sound-toggle[data-state="loading"],.sound-toggle[data-state="buffering"],
.sound-toggle[data-state="blocked"],.sound-toggle[data-state="error"]{
  background:rgb(16 19 28 / .68);color:#fff6e8;border-color:rgb(255 246 232 / .2);
}
.sound-toggle[data-state="loading"] .sound-icon svg,
.sound-toggle[data-state="buffering"] .sound-icon svg{opacity:.35;}
.sound-toggle[data-state="loading"] .sound-icon::after,
.sound-toggle[data-state="buffering"] .sound-icon::after{
  content:"";position:absolute;inset:-5px;border:1px solid transparent;
  border-top-color:currentColor;border-right-color:rgb(255 246 232 / .25);
  border-radius:50%;animation:music-loading 1.2s linear infinite;
}
.sound-toggle[data-state="error"]::before{
  content:"";position:absolute;right:7px;top:7px;width:4px;height:4px;
  background:#e9ae83;border-radius:50%;
}
.sound-toggle:focus-visible{outline:2px solid #e4a38c;outline-offset:4px;}
.sound-toggle:focus-visible::after{opacity:1;transform:translate(0,-50%);}
body[data-work-open="true"] .sound-toggle{visibility:hidden;pointer-events:none;}
@media(hover:hover) and (pointer:fine){
  .sound-toggle:hover{background:#242832;border-color:rgb(255 246 232 / .5);}
  .sound-toggle:hover::after{opacity:1;transform:translate(0,-50%);}
}
@media(max-width:760px){
  .sound-toggle,body[data-reading="true"] .sound-toggle{
    left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));
    width:42px;height:42px;min-height:42px;
  }
  .sound-toggle::after{display:none;}
}
@keyframes music-loading{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .sound-toggle,.sound-toggle::after{transition:none;}
  .sound-toggle .sound-icon::after{animation:none!important;}
}