.site-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .24);
  color: #d7d5d0;
  background: rgba(255, 255, 255, .025);
  font: 700 9px/1 "DM Sans", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-sound-toggle span { color: #79a1ff; }
.site-social-links { display:flex; flex:none; align-items:center; gap:5px; }
.site-social-links a { display:grid; place-items:center; width:28px; height:28px; aspect-ratio:1; border-radius:2px; }
.site-social-links img { display:block; width:20px; height:20px; object-fit:contain; }
.site-social-links a:hover { background:#ffffff14; }
.site-social-links a:focus-visible { outline:2px solid #91baff; outline-offset:3px; }

/* A permanent console fader, outside the room artwork and the replaceable menu. */
.site-header:has(.site-fader) { column-gap:22px; }
.site-header:has(.site-fader) nav { gap:clamp(10px,1.15vw,22px); margin-left:auto; align-items:center; }
.site-fader {
  --fader-level:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  grid-template-rows:20px 28px;
  column-gap:12px;
  flex:0 0 244px;
  padding-left:20px;
  border-left:1px solid #ffffff24;
  color:#f5f7fc;
  font:500 14px/1.2 "DM Sans",sans-serif;
}
.site-fader__heading { grid-column:1; grid-row:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.site-fader__heading label { font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.site-fader output { color:#76a7ff; font:600 15px/1 ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
.site-fader__unit { margin-left:2px; font-size:11px; opacity:.65; }
.site-fader__rail { grid-column:1; grid-row:2; position:relative; min-width:0; }
.site-fader__rail::after { content:""; position:absolute; left:1px; right:1px; bottom:0; height:3px; background:repeating-linear-gradient(90deg,#70809b99 0 1px,transparent 1px 10%); pointer-events:none; }
.site-fader input { appearance:none; -webkit-appearance:none; display:block; width:100%; height:28px; margin:0; padding:0; background:transparent; cursor:ew-resize; }
.site-fader input::-webkit-slider-runnable-track { height:4px; border-radius:1px; background:linear-gradient(90deg,#397ff0 0 var(--fader-level),#2c3444 var(--fader-level) 100%); box-shadow:0 1px 0 #000,inset 0 1px 2px #0008; }
.site-fader input::-moz-range-track { height:4px; border-radius:1px; background:linear-gradient(90deg,#397ff0 0 var(--fader-level),#2c3444 var(--fader-level) 100%); box-shadow:0 1px 0 #000; }
.site-fader input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:13px; height:22px; margin-top:-9px; border:1px solid #c9d0dc; border-radius:2px; background:linear-gradient(180deg,#f6f8fb 0 38%,#a8b6ca 39% 44%,#377de3 45% 56%,#e3e8f0 57% 100%); box-shadow:0 2px 4px #000b; }
.site-fader input::-moz-range-thumb { width:11px; height:20px; border:1px solid #c9d0dc; border-radius:2px; background:linear-gradient(180deg,#f6f8fb 0 38%,#a8b6ca 39% 44%,#377de3 45% 56%,#e3e8f0 57% 100%); box-shadow:0 2px 4px #000b; }
.site-fader__mute { grid-column:2; grid-row:1 / 3; align-self:center; display:grid; place-items:center; width:38px; height:38px; padding:8px; border:1px solid #53637b; border-radius:3px; background:linear-gradient(#253044,#131b29); color:#a6c6ff; box-shadow:inset 0 1px 0 #ffffff16,0 2px 3px #0005; cursor:pointer; }
.site-fader__mute svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.site-fader__slash { display:none; }
.site-fader.is-muted .site-fader__waves { display:none; }
.site-fader.is-muted .site-fader__slash { display:block; }
.site-fader.is-muted output { color:#ef6269; }
.site-fader.is-muted .site-fader__mute { color:#ff959a; border-color:#a1444b; background:linear-gradient(#352127,#1e1117); }
.site-fader__mute:hover { border-color:#b4ceff; }
.site-fader input:focus-visible,.site-fader__mute:focus-visible { outline:2px solid #91baff; outline-offset:4px; }
@media(max-width:1450px) {
  :root:has(.site-fader) { --environment-header-height:128px; }
  .site-header:has(.site-fader) { height:128px; padding-bottom:56px; }
  .site-fader { position:absolute; left:22px; right:22px; bottom:4px; height:48px; padding:0; border-left:0; grid-template-columns:minmax(0,1fr) 44px; column-gap:20px; }
  .site-fader__mute { width:44px; height:44px; }
  .site-fader__heading label { font-size:14px; }
}
@media(max-width:1200px) {
  .site-header:has(.site-fader) .menu-toggle { display:block; border:1px solid #777; padding:9px 11px; color:#fff; background:transparent; font:700 10px/1 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
  .site-header:has(.site-fader) nav { display:none; position:absolute; top:var(--environment-header-height,128px); left:0; right:0; margin:0; flex-direction:column; align-items:stretch; gap:0; background:#08090b; }
  .site-header:has(.site-fader) nav.is-open { display:flex; }
  .site-header:has(.site-fader) nav a { padding:18px 24px; border-bottom:1px solid #222; }
  .site-header:has(.site-fader) .site-sound-toggle { min-height:50px; justify-content:space-between; padding:16px 24px; border:0; border-bottom:1px solid #222; }
}
@media(max-width:650px) {
  :root:has(.site-fader) { --environment-header-height:120px; }
  .site-header:has(.site-fader) { height:120px; }
  .site-fader { left:20px; right:20px; }
  .site-header:has(.site-fader) { column-gap:8px; padding-inline:16px; }
}
@media(max-width:420px) {
  .site-header .site-logo img { width:96px; }
  .site-social-links { gap:3px; }
  .site-social-links a { width:24px; height:24px; }
  .site-social-links img { width:18px; height:18px; }
  .site-header:has(.site-fader) .menu-toggle { padding:9px 8px; font-size:9px; }
}
@media(forced-colors:active) {
  .site-fader input { appearance:auto; }
  .site-fader__mute { border:1px solid ButtonText; }
}
.site-sound-toggle[aria-pressed="false"] span { color: #ef6b70; }
.site-sound-toggle:hover,
.site-sound-toggle:focus-visible {
  border-color: #fff;
  color: #fff;
  outline: none;
}

@media (max-width: 650px) {
  .site-sound-toggle {
    width: 100%;
    min-height: 50px;
    justify-content: space-between;
    padding: 16px 24px;
    border: 0;
    border-bottom: 1px solid #222;
    text-align: left;
  }
}