.colink-sound-control {
  position: fixed;
  z-index: 480;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #e4d8bb55;
  border-radius: 50%;
  color: #eadab9;
  background: #29352de8;
  box-shadow: 0 3px 18px #17221e1a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.colink-sound-control:hover { background: #36483d; border-color: #e9d3a288; }
.colink-sound-control:focus-visible { outline: 3px solid #c38e53; outline-offset: 4px; }
.colink-sound-control[data-state="off"],
.colink-sound-control[data-state="waiting"],
.colink-sound-control[data-state="paused"] { color: #c3c5b7; }
.colink-sound-control:disabled { opacity: .45; cursor: default; }
.colink-sound-control[data-sound-dialog="true"] { z-index: 1001; }
.colink-sound-wave { display: flex; align-items: center; justify-content: center; gap: 3px; width: 25px; height: 23px; }
.colink-sound-wave i { display: block; width: 2px; height: 7px; border-radius: 2px; background: currentColor; transform-origin: center; }
.colink-sound-wave i:nth-child(2), .colink-sound-wave i:nth-child(4) { height: 13px; }
.colink-sound-wave i:nth-child(3) { height: 19px; }
.colink-sound-control[data-state="off"] .colink-sound-wave { opacity: .65; }
.colink-sound-control[data-state="off"]::after { content: ""; position: absolute; width: 27px; height: 1px; transform: rotate(-42deg); background: currentColor; box-shadow: 0 1px 0 #29352d; }
.colink-sound-control[data-state="on"] .colink-sound-wave i { animation: colink-sound-breathe 1.6s ease-in-out infinite alternate; }
.colink-sound-control[data-state="on"] .colink-sound-wave i:nth-child(2) { animation-delay: -.55s; }
.colink-sound-control[data-state="on"] .colink-sound-wave i:nth-child(3) { animation-delay: -.95s; }
.colink-sound-control[data-state="on"] .colink-sound-wave i:nth-child(4) { animation-delay: -.25s; }
.colink-sound-control[data-state="on"] .colink-sound-wave i:nth-child(5) { animation-delay: -.75s; }
@keyframes colink-sound-breathe { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
.colink-sound-caption {
  position: fixed;
  z-index: 490;
  inset: auto;
  left: 50%;
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 74px));
  transform: translateX(-50%);
  width: max-content;
  margin: 0;
  max-width: min(540px, calc(100vw - 40px));
  padding: 13px 21px 15px;
  border: 1px solid #e4cf9c55;
  border-radius: 5px;
  color: #f6ead0;
  background: #29352df2;
  box-shadow: 0 8px 36px #14211920;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: .035em;
  text-align: center;
  pointer-events: none;
}
.colink-sound-caption[hidden] { display: none !important; }
.colink-sound-caption::backdrop { background: transparent; pointer-events: none; }
.colink-sound-caption-label { display: block; margin-bottom: 3px; color: #d8b978; font-size: 10px; letter-spacing: .17em; }
@media (max-width: 600px) {
  .colink-sound-control { left: max(12px, env(safe-area-inset-left)); bottom: max(13px, env(safe-area-inset-bottom)); }
  .colink-sound-caption { max-width: calc(100vw - 30px); width: max-content; padding: 11px 16px 13px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .colink-sound-control, .colink-sound-wave i { animation: none !important; transition: none; }
}
/* Project return links share the lower left corner, including the standalone
   怪有灵 pages and controls moved into a modal's top layer. */
body:has(.studio-return) .colink-sound-control {
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 70px));
}