/* DC-Lab — workstation soundscape toggle (glass pill, bottom-left, mirrors .totop) */
.snd-toggle{
  position:fixed;left:clamp(14px,2.2vw,28px);bottom:clamp(14px,2.2vw,28px);z-index:60;
  display:inline-flex;align-items:center;gap:.55em;
  padding:.62em .95em .62em .82em;border-radius:999px;cursor:pointer;
  color:#cdd8e6;font-family:var(--ff-display,inherit);font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(8,12,20,.6);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);
  transition:color .3s,border-color .3s,box-shadow .3s,transform .3s,background .3s}
.snd-toggle:hover{transform:translateY(-2px);color:#fff;
  border-color:rgba(127,227,218,.4);
  box-shadow:0 16px 40px -16px rgba(0,0,0,.85),0 0 0 1px rgba(127,227,218,.18)}
.snd-toggle:focus-visible{outline:2px solid rgba(127,227,218,.7);outline-offset:3px}
.snd-toggle.is-on{color:#fff;border-color:rgba(127,227,218,.5);
  background:rgba(10,26,28,.62);
  box-shadow:0 16px 44px -16px rgba(18,181,168,.5),inset 0 1px 0 rgba(255,255,255,.1)}

/* equalizer glyph */
.snd-eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.snd-eq i{width:2.5px;height:4px;border-radius:2px;background:currentColor;opacity:.7;
  transform-origin:bottom}
.snd-toggle.is-on .snd-eq i{background:var(--teal,#12b5a8);opacity:1;
  animation:snd-bar 1s ease-in-out infinite}
.snd-toggle.is-on .snd-eq i:nth-child(1){animation-delay:0s}
.snd-toggle.is-on .snd-eq i:nth-child(2){animation-delay:.18s}
.snd-toggle.is-on .snd-eq i:nth-child(3){animation-delay:.36s}
.snd-toggle.is-on .snd-eq i:nth-child(4){animation-delay:.12s}
@keyframes snd-bar{0%,100%{height:4px}50%{height:14px}}

/* muted look: flat low bars */
.snd-toggle:not(.is-on) .snd-eq i:nth-child(1){height:7px}
.snd-toggle:not(.is-on) .snd-eq i:nth-child(2){height:11px}
.snd-toggle:not(.is-on) .snd-eq i:nth-child(3){height:5px}
.snd-toggle:not(.is-on) .snd-eq i:nth-child(4){height:9px}

/* armed (had sound on last visit, waiting for a gesture to resume) — gentle pulse */
.snd-toggle.is-armed:not(.is-on){border-color:rgba(127,227,218,.32)}
.snd-toggle.is-armed:not(.is-on) .snd-eq i{animation:snd-arm 1.6s ease-in-out infinite}
@keyframes snd-arm{0%,100%{opacity:.5}50%{opacity:1}}

@media (max-width:560px){
  .snd-toggle{padding:.6em;gap:0}
  .snd-txt{display:none}
}
@media (prefers-reduced-motion:reduce){
  .snd-toggle,.snd-eq i{animation:none!important;transition:none}
}