/* An invitation to listen, kept available throughout the visit. */
.sound-control{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;min-width:100px;padding:10px 12px;font:12px/1.2 var(--sans);letter-spacing:.025em;color:var(--light);border:1px solid #e0e7cb24;border-radius:2px;background:#161d13c9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap;touch-action:manipulation;transition:border-color .25s,color .25s}
.sound-control[hidden]{display:none}
.sound-control:hover{color:var(--acid);border-color:#e0e7cb60}
.sound-control--main{position:fixed;z-index:30;right:calc(var(--pad) + env(safe-area-inset-right,0px));top:calc(19px + env(safe-area-inset-top,0px))}
.sound-control svg{width:16px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.sound-control .sound-wave{opacity:.45}
.sound-control[data-state="playing"] .sound-wave{opacity:1}
.sound-control .sound-pause{display:none}
.sound-control[data-state="playing"] .sound-speaker{display:none}
.sound-control[data-state="playing"] .sound-pause{display:block}
body[data-mode="writing"] .masthead nav{margin-right:116px}
.dialog-top{gap:12px}
.dialog-top>span:first-child{margin-right:auto}
.dialog-top .sound-control{min-width:90px;margin-left:auto;background:transparent;color:var(--ink);border-color:#30372830;backdrop-filter:none;-webkit-backdrop-filter:none}
.dialog-top .sound-control:hover{border-color:#30372880}
@media(max-width:650px){
 .sound-control--main{right:calc(18px + env(safe-area-inset-right,0px));top:calc(17px + env(safe-area-inset-top,0px))}
 .sound-control{min-width:96px;padding-inline:10px}
 body[data-mode="writing"] .masthead nav{margin-right:103px}
 .dialog-top{gap:8px}
 .dialog-top .sound-control{min-width:84px;padding-inline:8px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.sound-control{transition:none}}