.sound-scroll-btn {
	align-items: center;
	background: rgba(4, 5, 8, 0.72);
	border: 1px solid rgba(240, 237, 232, 0.2);
	border-radius: 9999px;
	color: rgba(240, 237, 232, 0.68);
	cursor: pointer;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	padding: 0;
	position: relative;
	transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
	width: 38px;
}

.sound-scroll-btn:hover,
.sound-scroll-btn:focus-visible {
	border-color: rgba(200, 255, 0, 0.4);
	color: var(--accent);
}

.sound-scroll-btn.is-playing {
	background: rgba(200, 255, 0, 0.12);
	border-color: rgba(200, 255, 0, 0.68);
	color: var(--accent);
}

.sound-scroll-btn__icon {
	fill: none;
	height: 21px;
	overflow: visible;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
	width: 21px;
}

.sound-icon__speaker {
	fill: currentColor;
	stroke: currentColor;
}

.sound-icon__waves,
.sound-icon__slash {
	transform-origin: center;
}

.sound-scroll-btn:not(.has-been-used) .sound-icon__waves {
	animation: sound-attention-waves 2.8s ease-in-out infinite;
}

.sound-scroll-btn:not(.has-been-used) .sound-icon__slash {
	animation: sound-attention-slash 2.8s ease-in-out infinite;
}

.sound-scroll-btn.has-been-used:not(.is-playing) .sound-icon__waves,
.sound-scroll-btn.has-been-used.is-playing .sound-icon__slash {
	display: none;
}

.sound-scroll-btn--dock {
	position: fixed;
	right: max(18px, env(safe-area-inset-right));
	top: min(calc(50% + 170px), calc(100% - 116px));
	transform: translateY(-50%);
	z-index: 120;
}

@keyframes sound-attention-waves {
	0%, 42%, 100% { opacity: 0; transform: scale(0.72); }
	52%, 88% { opacity: 1; transform: scale(1); }
}

@keyframes sound-attention-slash {
	0%, 42%, 100% { opacity: 1; transform: scale(1); }
	52%, 88% { opacity: 0; transform: scale(0.72); }
}

@media (max-width: 1180px) {
	.sound-scroll-btn--dock {
		right: max(18px, env(safe-area-inset-right));
		top: min(calc(50% + 160px), calc(100% - 112px));
		transform: translateY(-50%);
	}
}

@media (max-width: 600px) {
	.sound-scroll-btn--dock {
		right: max(17px, env(safe-area-inset-right));
		top: min(calc(50% + 150px), calc(100% - 112px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.sound-scroll-btn:not(.has-been-used) .sound-icon__waves,
	.sound-scroll-btn:not(.has-been-used) .sound-icon__slash {
		animation: none;
	}

	.sound-scroll-btn:not(.has-been-used) .sound-icon__slash {
		display: none;
	}
}