.sound-gate {
  position: absolute; inset: 0; z-index: 40; overflow: hidden;
  display: grid; place-items: center; padding: 52px 25px 38px;
  color: var(--paper); background: var(--red);
  isolation: isolate;
}
.sound-gate[hidden] { display: none; }
.sound-gate::before {
  content: ""; position: absolute; inset: -12%; z-index: -3;
  background: repeating-conic-gradient(from 24deg at 50% 48%, #161515 0 9deg, transparent 9deg 18deg);
  opacity: .96; transform: rotate(-6deg) scale(1.25);
}
.sound-gate::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(#fff4df 1.2px, transparent 1.6px);
  background-size: 8px 8px; opacity: .19; mix-blend-mode: screen;
}
.sound-gate__burst {
  position: absolute; z-index: -2; width: 126%; height: 58%; left: -13%; top: 21%;
  background: var(--red); transform: rotate(-8deg) skewX(-12deg);
  border: 8px solid var(--paper); box-shadow: 0 14px 0 var(--ink);
}
.sound-gate__content { position: relative; width: min(100%, 375px); }
.sound-gate__eyebrow {
  display: inline-block; margin: 0 0 10px; padding: 6px 9px;
  color: var(--ink); background: var(--cyan); font: 900 9px Arial, sans-serif;
  letter-spacing: 1.1px; transform: rotate(-3deg);
}
.sound-gate__icon {
  position: absolute; width: 144px; height: 144px; right: -20px; top: 14px;
  filter: drop-shadow(9px 9px 0 #161515); transform: rotate(-8deg);
}
.sound-gate__icon .music-mark__rotor { animation: vinylSpin 8s linear infinite; }
.sound-gate__headline { position: relative; z-index: 1; width: 79%; transform: rotate(-2deg); }
.sound-gate__headline > span {
  display: inline-block; padding: 2px 7px; color: var(--paper); background: var(--ink);
  font-size: 13px; font-weight: 900;
}
.sound-gate__headline h1 {
  margin: 8px 0 11px; color: var(--paper); font-size: clamp(49px, 14vw, 70px);
  line-height: .86; letter-spacing: -5px; text-shadow: 6px 6px 0 var(--ink);
}
.sound-gate__headline h1 em { color: var(--cyan); font-style: normal; }
.sound-gate__headline p { width: max-content; max-width: 118%; padding: 7px 10px; color: var(--ink); background: var(--paper); font-size: 12px; font-weight: 900; }
.sound-gate__choices { position: relative; z-index: 2; display: grid; gap: 13px; margin-top: 42px; }
.sound-choice {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center;
  min-height: 76px; padding: 11px 55px 11px 20px; border: 4px solid var(--ink);
  color: var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink);
  text-align: left; cursor: pointer; transform: skewX(-7deg);
}
.sound-choice > * { transform: skewX(7deg); }
.sound-choice b { grid-row: 1; font-size: 22px; }
.sound-choice span { grid-row: 2; font: 800 9px Arial, sans-serif; letter-spacing: 1.5px; }
.sound-choice i {
  position: absolute; right: 14px; top: 50%; display: grid; place-items: center;
  width: 35px; height: 35px; background: var(--ink); color: var(--paper);
  font: 900 20px Arial, sans-serif; transform: translateY(-50%) skewX(7deg) rotate(-5deg);
}
.sound-choice--on { background: var(--cyan); }
.sound-choice--off { width: 88%; justify-self: end; min-height: 62px; background: var(--paper); }
.sound-choice:hover, .sound-choice:focus-visible { transform: translate(-3px,-3px) skewX(-7deg); box-shadow: 12px 12px 0 var(--ink); }
.sound-choice:active { transform: translate(5px,5px) skewX(-7deg); box-shadow: 2px 2px 0 var(--ink); }
.sound-gate__foot { position: absolute; bottom: 22px; margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .5px; }

.intro-controls { display: flex; align-items: center; gap: 6px; }
.intro-controls .music-toggle {
  width: 50px; height: 50px; min-height: 0; padding: 2px; border: 3px solid var(--paper);
  background: var(--red); box-shadow: 4px 4px 0 var(--ink); overflow: visible;
  transform: rotate(-6deg); transition: transform .09s ease;
}
.music-toggle:active { transform: rotate(-6deg) scale(.88); }
.music-toggle .music-mark { width: 100%; height: 100%; overflow: visible; }
.music-mark__rotor { transform-box: fill-box; transform-origin: center; }
.music-toggle.is-playing .music-mark__rotor { animation: vinylSpin 8s linear infinite; }
.music-mark__mute { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scaleX(.15); transition: opacity .08s, transform .12s cubic-bezier(.2,.9,.25,1.3); }
.music-toggle.is-muted .music-mark__mute { opacity: 1; transform: scaleX(1); }
@keyframes vinylSpin { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
@media (max-height: 650px) {
  .sound-gate { padding-top: 32px; }
  .sound-gate__icon { width: 112px; height: 112px; }
  .sound-gate__choices { margin-top: 25px; }
  .sound-choice { min-height: 65px; }
}