/* Prototyp: jedna vizitka s reliéfem hřebene, video v pozadí, papírky za kartou
   ========================================================================== */

:root {
	--text: #eef1f6;
	--text-muted: #9aa5b5;
	--paper: #1b2331;
	--paper-2: #121823;
	--paper-line: rgba(255, 255, 255, 0.07);
	--slip: #e9e3d4;
	--slip-ink: #2b2f36;
	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* plné tahy bez kontrastu — stěny prolisu jsou na nich dobře vidět */
	--font-press: "Barlow", "Bahnschrift", "DIN Alternate", system-ui, sans-serif;
	--mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
	--noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Barlow (SIL OFL 1.1, media/fonts/OFL.txt) — DIN-like, tahy bez kontrastu, ideální pro prolis */
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("media/fonts/barlow-latin-ext-600.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("media/fonts/barlow-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("media/fonts/barlow-latin-ext-700.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("media/fonts/barlow-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --ink {
	syntax: "<color>";
	inherits: true;
	initial-value: #eef1f6;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
}

body {
	overflow: hidden;
	font-family: var(--font);
	color: var(--text);
	background: #0f120d;
	-webkit-font-smoothing: antialiased;
}

button {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Pozadí
   ========================================================================== */

.bg,
.veil,
#fog {
	position: fixed;
	inset: 0;
	pointer-events: none;
}

.bg-v {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.bg-v.is-on {
	opacity: 1;
}

.bg-tint {
	position: fixed;
	inset: 0;
	background: var(--tint, rgb(128, 128, 128));
	mix-blend-mode: soft-light;
	opacity: 0.6;
	pointer-events: none;
	transition: background-color 0.3s linear;
}

/* Vzpomínka: video v nepravidelném měkkém „mráčku“, pomalu se vznáší */
.peek {
	position: fixed;
	z-index: 5;
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.9s ease, transform 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	/* tvar masky skládá karta.js podle strany a rozměru okna */
	-webkit-mask: none 0 0 / 100% 100% no-repeat;
	mask: none 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

.peek.is-on {
	opacity: 1;
	transform: none;
}

@media (min-width: 980px) {
	.peek {
		animation: peek-drift 19s ease-in-out infinite alternate;
	}
}

@keyframes peek-drift {
	0% { translate: -7px 5px; }
	50% { translate: 6px -7px; }
	100% { translate: 8px 6px; }
}

/* mobil: prolne se celé pozadí pod závojem */
@media (max-width: 979.98px) {
	.peek {
		z-index: auto;
		transform: none;
	}
}

.peek video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ztmavení okrajů, ať karta drží pozornost */
.veil {
	background:
		radial-gradient(ellipse 70% 65% at 50% 52%, transparent 30%, rgba(5, 8, 12, 0.55) 100%),
		linear-gradient(180deg, rgba(5, 8, 12, 0.25), rgba(5, 8, 12, 0.1) 40%, rgba(5, 8, 12, 0.35));
}

#fog {
	z-index: 20;
	width: 100%;
	height: 100%;
}

/* Scéna a geometrie karty
   ========================================================================== */

.scene {
	position: relative;
	z-index: 10;
	display: grid;
	place-items: center;
	min-height: 100%;
	padding: 3rem 16px 5rem;
	/* přečnívající papírky nesmí na mobilu rozšířit stránku */
	overflow: clip;
}

.card {
	/* šířka karty řídí všechno; reliéf má pevný poměr stran zdroje (1792 × 640) */
	--cw: min(680px, calc(100vw - 32px));
	--rh: calc(var(--cw) / 2.8);
	position: relative;
	width: var(--cw);
	container-type: inline-size;
	font-size: clamp(11px, 2.45cqi, 15px);
	/* na mobilu papírky visí níž */
	margin-top: calc(var(--rh) * -0.15);
}

.card-tilt {
	position: relative;
	transform: perspective(1500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.35s ease-out;
	will-change: transform;
}

/* Tvar karty: nahoře silueta hřebene, pod ní obdélník; dole 3px zaoblení */
.face,
.card-shadow i {
	-webkit-mask-image: url("media/ridge.svg?v=2"), linear-gradient(#000, #000);
	mask-image: url("media/ridge.svg?v=2"), linear-gradient(#000, #000);
	-webkit-mask-size: 100% var(--rh), 100% calc(100% - var(--rh) + 1px);
	mask-size: 100% var(--rh), 100% calc(100% - var(--rh) + 1px);
	-webkit-mask-position: 0 0, 0 calc(var(--rh) - 1px);
	mask-position: 0 0, 0 calc(var(--rh) - 1px);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Stín leží pod kartou a uhýbá proti náklonu */
.card-shadow {
	position: absolute;
	inset: 0;
	filter: blur(22px);
	opacity: 0.75;
	transform: translate(var(--sx, 0px), calc(var(--sy, 0px) + 26px)) scale(0.97);
	transition: transform 0.35s ease-out;
	pointer-events: none;
}

.card-shadow i {
	position: absolute;
	inset: 0;
	background: #000;
	border-radius: 0 0 3px 3px;
}

.card-face {
	position: relative;
	z-index: 3;
	/* těsný stín hrany — kopíruje i siluetu hřebene */
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}

.face {
	position: relative;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(180deg, var(--paper) 0, var(--paper) var(--rh), var(--paper-2) 100%);
}

/* Textura papíru přes celou kartu */
.face::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--noise);
	mix-blend-mode: overlay;
	opacity: 0.2;
	pointer-events: none;
}

/* Lesk sledující kurzor */
.glare {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.07), transparent 60%);
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Reliéf hřebene
   ========================================================================== */

.ridge {
	position: relative;
	height: var(--rh);
}

.ridge-art {
	position: absolute;
	inset: 0;
	background: url("media/ridge.jpg?v=2") 0 0 / 100% 100% no-repeat;
}

/* Živé nasvícení (karta.js) — když WebGL nejede, zůstane pod ním statický ridge.jpg */
.ridge-gl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.ridge-gl.is-on {
	opacity: 1;
}

/* Nebe nad hřebenem: leží za lícem karty, takže slunce i měsíc zapadají za horu */
.sky {
	position: absolute;
	z-index: 2;
	left: -35%;
	top: calc(var(--rh) * -0.9);
	width: 170%;
	height: calc(var(--rh) * 1.9);
	pointer-events: none;
}

/* Opar v údolí pod hřebenem — dává reliéfu hloubku a splývá do plochy karty */
.ridge-art::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 55% 26% at 70% 80%, rgba(160, 176, 200, 0.07), transparent 70%),
		radial-gradient(ellipse 40% 22% at 18% 84%, rgba(160, 176, 200, 0.06), transparent 70%);
}

.ridge-stats {
	position: absolute;
	inset: 0;
	z-index: 4;
	margin: 0;
}

.stat {
	position: absolute;
	display: flex;
	align-items: baseline;
	gap: 0.3em;
	padding: 0.2em 0.3em;
	background: none;
	border: 0;
	cursor: default;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

/* Převýšení visí na kótě přímo pod vrcholem */
.stat-gain {
	left: 24.5%;
	top: 9.5%;
	flex-direction: column;
	align-items: center;
	gap: 0.15em;
	transform: translateX(-50%);
}

.stat-val {
	order: 1;
	display: flex;
	align-items: baseline;
	gap: 0.3em;
}

.stat-mark {
	order: 0;
	width: 0;
	height: calc(var(--rh) * 0.33);
	border-left: 1px dashed rgba(210, 222, 240, 0.32);
	box-shadow: 1px 0 0 rgba(0, 0, 0, 0.35);
}

.stat-mark::before {
	content: "";
	position: absolute;
	top: -0.45em;
	left: 50%;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: rgba(220, 230, 245, 0.55);
	box-shadow: 0 0 0 3px rgba(220, 230, 245, 0.08), 0 1px 1px rgba(0, 0, 0, 0.6);
	transform: translateX(-50%);
}

/* Kilometry leží podél klesajícího hřebene (sklon reliéfu ≈ 10°) */
.stat-km {
	left: 56%;
	top: 60%;
	transform: rotate(9.5deg);
	transform-origin: 0 50%;
}

.stat-num {
	font-size: 1.6em;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.stat-unit {
	font-size: 0.95em;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Vysvětlivka po najetí */
.stat-tip {
	position: absolute;
	top: calc(100% + 0.5em);
	left: 50%;
	padding: 0.45em 0.8em;
	font: 500 0.82em/1.2 var(--font);
	letter-spacing: 0.02em;
	color: var(--text);
	background: rgba(10, 14, 20, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.8);
	opacity: 0;
	transform: translate(-50%, -4px);
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}

.stat-km .stat-tip {
	/* vysvětlivka roste od pravého konce doleva, ať na mobilu nevyjede ze stránky */
	left: auto;
	right: 0;
	transform: translate(0, -4px);
}

.stat:hover .stat-tip,
.stat:focus-visible .stat-tip,
.stat.is-active .stat-tip {
	opacity: 1;
	transform: translate(-50%, 0);
}

.stat-km:hover .stat-tip,
.stat-km:focus-visible .stat-tip,
.stat-km.is-active .stat-tip {
	transform: translate(0, 0);
}

/* Tělo vizitky
   ========================================================================== */

.card-body {
	position: relative;
	z-index: 4;
	padding: 0.4em 2.4em 1.5em;
}

.who {
	margin-bottom: 1.5em;
}

.who {
	/* role se roztáhne přesně na šířku jména (karta.js), obě drží zleva */
	display: inline-block;
}

.who h1 {
	margin: 0;
	font-size: 2.55em;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.1;
}

.role {
	display: inline-block;
	margin: 0.4em 0 0;
	font-size: 0.86em;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.contact-list {
	display: grid;
	gap: 0.7em;
	margin: 0 0 1.6em;
	padding: 0;
	list-style: none;
}

.contact-list li {
	display: grid;
	grid-template-columns: 1.3em 4.6em 1fr;
	align-items: center;
	gap: 0.8em;
}

.c-icon {
	width: 1.15em;
	height: 1.15em;
	color: var(--text-muted);
}

.c-label {
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.c-value {
	font-size: 1.2em;
	font-weight: 600;
	letter-spacing: 0.02em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1em;
	border-top: 1px dashed var(--paper-line);
}

.socials {
	display: flex;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.socials a {
	display: grid;
	place-items: center;
	width: 2.2em;
	height: 2.2em;
	color: var(--text-muted);
	border-radius: 50%;
	transition: color 0.2s, background 0.2s;
}

.socials a:hover,
.socials a:focus-visible {
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
}

.socials svg {
	width: 1.15em;
	height: 1.15em;
}

.copyright {
	margin: 0;
	font-size: 0.75em;
	letter-spacing: 0.08em;
}

/* Tisk s prolisem (jako jerremi.com): výplň písmen má vlastní stínování —
   nahoře tmavší stěna prolisu, dole světlejší dno; kolem tmavá horní a světlá spodní hrana */
.who h1,
.role,
.c-label,
.c-value a,
.copyright,
.stat-num,
.stat-unit {
	--ink: #cfd7e3;
	font-family: var(--font-press);
	color: transparent;
	background-image: linear-gradient(180deg,
		color-mix(in srgb, var(--ink) 45%, #000) 0%,
		color-mix(in srgb, var(--ink) 80%, #000) 30%,
		var(--ink) 70%,
		color-mix(in srgb, var(--ink) 85%, #fff) 100%);
	background-size: 100% 1lh;
	-webkit-background-clip: text;
	background-clip: text;
	filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.12));
}

/* jméno je největší — prolis hlubší */
.who h1 {
	filter: drop-shadow(0 -1.5px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.13));
}

.role,
.c-label,
.copyright {
	--ink: var(--text-muted);
}

/* Čísla ve skále: světlejší „vytesaný“ prolis, ať jsou vidět, ale nekřičí */
.stat-num,
.stat-unit {
	--ink: #aab6c8;
	filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 0 rgba(200, 215, 235, 0.16));
	transition: --ink 0.2s;
}

.stat-unit {
	--ink: #8f9cb0;
}

.stat:hover .stat-num,
.stat.is-active .stat-num {
	--ink: #eef3fa;
}

.c-icon,
.socials svg {
	filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.06));
}

.c-value a:hover,
.c-value a:focus-visible {
	--ink: #fff;
}

/* Papírky založené za kartou
   ========================================================================== */

.slips {
	position: absolute;
	z-index: 1;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	/* všechny rozměry papírků jsou v em papírku */
	font-size: 0.78em;
}

.slips li {
	transform: rotate(var(--r, 0deg));
}

.slips li:nth-child(1) { --r: -2.5deg; }
.slips li:nth-child(2) { --r: 1.8deg; }
.slips li:nth-child(3) { --r: -1.2deg; }
.slips-r li:nth-child(1) { --r: 2deg; }
.slips-r li:nth-child(2) { --r: -1.5deg; }
.slips-r li:nth-child(3) { --r: 1deg; }

.slip {
	--hide: 3.3em; /* kolik papírku je schované pod kartou */
	position: relative;
	display: block;
	font: 600 1em/1 var(--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--slip-ink);
	white-space: nowrap;
	background:
		var(--noise),
		linear-gradient(180deg, #f1ece0, var(--slip));
	background-blend-mode: multiply, normal;
	background-size: 160px, auto;
	border: 0;
	border-radius: 1px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 14px -6px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	-webkit-tap-highlight-color: transparent;
}

/* stín karty padá na papírek tam, kde pod ni zajíždí */
.slip::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--shade-dir, 180deg), rgba(0, 0, 0, 0.55) var(--hide), rgba(0, 0, 0, 0) calc(var(--hide) + 0.8em));
	pointer-events: none;
}

/* zespodu */
.slips-b {
	top: calc(100% - 3.3em);
	left: 7%;
	right: 7%;
	justify-content: space-around;
	gap: 0.8em;
}

.slips-b .slip {
	padding: 4.4em 1.1em 0.85em;
}

/* zprava — jen v části s textem, nad ní je hřeben */
.slips-r {
	top: calc(var(--rh) + 2.6em);
	left: calc(100% - 4.3em);
	flex-direction: column;
	align-items: flex-start;
	gap: 1.6em;
}

.slips-r .slip {
	--hide: 4.3em;
	--shade-dir: 90deg;
	--pull-x: 0.7em;
	--pull-y: 0;
	padding: 0.85em 1.1em 0.85em 5.4em;
}

/* vysunutí při najetí / ťuknutí */
.slip:hover,
.slip:focus-visible,
.slip.is-active {
	transform: translate(var(--pull-x, 0), var(--pull-y, 0.7em));
}

/* Užší displeje: vedle karty není místo — všechny papírky čouhají zespodu,
   šikmo 40–50°, ať se vejdou vedle sebe */
@media (max-width: 980px) {
	/* karta sedí dole (odsazení shora dopočítá karta.js), nad horami je víc vidět video */
	.scene {
		align-items: start;
		padding-bottom: 0;
	}

	.slips-b,
	.slips-r {
		top: calc(100% - 2.4em);
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0;
	}

	/* šest bodů v pravidelném rozestupu 14 % šířky karty, první je kousek od kraje, aby
	   zastrčený konec nevykukoval vlevo zpod karty; vpravo nesmí vykukovat z obrazovky */
	.slips-b {
		left: 7%;
		right: auto;
		width: 28%;
	}

	.slips-r {
		left: 49%;
		width: 28%;
	}

	/* bod, kde papírek zajíždí pod kartu; vlastní pásek se od něj otáčí dolů doprava */
	.slips li {
		width: 0;
		transform-origin: 0 0;
	}

	/* zleva doprava mírně plošší, ať se sousední papírky k sobě nesbíhají */
	.slips-b li:nth-child(1) { --r: 36deg; }
	.slips-b li:nth-child(2) { --r: 33deg; }
	.slips-b li:nth-child(3) { --r: 34deg; }
	.slips-r li:nth-child(1) { --r: 31deg; }
	.slips-r li:nth-child(2) { --r: 32deg; }
	.slips-r li:nth-child(3) { --r: 29deg; }

	.slips-b .slip,
	.slips-r .slip {
		--hide: 2.2em;
		--shade-dir: 90deg;
		--pull-x: 0.7em;
		--pull-y: 0;
		width: max-content;
		padding: 0.8em 1em 0.8em 3.9em;
	}
}

@media (max-width: 480px) {
	.card-body {
		padding: 0.4em 1.4em 1.3em;
	}

	.contact-list li {
		grid-template-columns: 1.3em 1fr;
	}

	.c-label {
		display: none;
	}

	.stat-mark {
		height: calc(var(--rh) * 0.45);
	}

	/* na mobilu vysvětlivka vycentrovaná pod číslem, zalomená do dvou řádků */
	.stat-km .stat-tip {
		left: 50%;
		right: auto;
		width: max-content;
		max-width: 62cqi;
		white-space: normal;
		text-align: center;
		border-radius: 1em;
		transform: translate(-50%, -4px);
	}

	.stat-km:hover .stat-tip,
	.stat-km:focus-visible .stat-tip,
	.stat-km.is-active .stat-tip {
		transform: translate(-50%, 0);
	}

	.slips {
		font-size: 0.72em;
	}

	.slip {
		letter-spacing: 0.02em;
	}

	.sound-label {
		display: none;
	}
}

/* Ovládání videa
   ========================================================================== */

.video-controls {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 50;
	display: flex;
	gap: 0.5rem;
}

.video-controls button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	background: rgba(15, 20, 28, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font: 600 0.8rem var(--font);
	cursor: pointer;
	transition: border-color 0.2s, transform 0.2s;
}

.video-controls button:hover,
.video-controls button:focus-visible {
	border-color: rgba(255, 255, 255, 0.35);
	transform: translateY(-2px);
}

.video-controls svg {
	width: 1rem;
	height: 1rem;
}

.sound-toggle .icon-on,
.sound-toggle[aria-pressed="true"] .icon-off,
.pause-toggle .icon-play,
.pause-toggle[aria-pressed="true"] .icon-pause {
	display: none;
}

.sound-toggle[aria-pressed="true"] .icon-on,
.pause-toggle[aria-pressed="true"] .icon-play {
	display: block;
}

.pause-toggle {
	width: 2.25rem;
	padding: 0.5rem !important;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid rgba(220, 230, 245, 0.6);
	outline-offset: 2px;
}