/* layout.css */
/* Page layout pieces used by the Elementor templates: section labels, the library section,
   archive heads, plain text pages and the 404 page. Components have their own files. */

/* Small uppercase label with a short gold rule, as on the approved site ("BROWSE SOUNDS"). */
html body .sso-section-label .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--e-global-color-ssomuted);
}
html body .sso-section-label .elementor-heading-title::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--e-global-color-primary);
	opacity: .8;
}

html body #library { scroll-margin-top: calc(var(--sso-header-h) + 16px); }

/* Archive and category heads. */
html body .sso-archive-head .elementor-heading-title { margin: 0; }
html body .sso-archive-desc { color: var(--e-global-color-ssomuted); max-width: 62ch; }
html body .sso-archive-desc p:last-child { margin-bottom: 0; }

/* A quiet line under lists inviting requests. */
html body .sso-invite {
	color: var(--e-global-color-ssomuted);
	font-size: 15px;
	text-align: center;
}
html body .sso-invite a { color: var(--e-global-color-primary); }

/* Plain text pages (privacy, cookies, terms, about). */
html body .sso-prose { max-width: 68ch; } /* a comfortable reading line */
html body .sso-prose h2 { margin-top: 2.2em; font-size: 26px; }
html body .sso-prose h3 { margin-top: 1.6em; }
html body .sso-prose ul, html body .sso-prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
html body .sso-prose li { margin-bottom: .4em; }
html body .sso-prose table { width: 100%; border-collapse: collapse; margin: 1em 0 1.6em; font-size: 15px; }
html body .sso-prose th, html body .sso-prose td { border-bottom: 1px solid var(--e-global-color-ssoline); padding: 10px 8px; text-align: left; vertical-align: top; }
html body .sso-prose th { color: var(--e-global-color-text); font-weight: 600; }
html body .sso-owner-note {
	border: 1px dashed var(--e-global-color-ssogolddim);
	border-radius: var(--sso-radius-s);
	padding: 14px 16px;
	color: var(--e-global-color-accent);
	background: rgba(233, 200, 126, .05);
}

/* 404: one centred column (title, text, search, button). */
html body .sso-404 { text-align: center; }
html body .sso-404 .elementor-heading-title { margin-bottom: 0; }
html body .sso-404 .elementor-widget-shortcode,
html body .sso-404 .elementor-widget-text-editor { width: 100%; max-width: 560px; margin-inline: auto; }
html body .sso-404 .sso-search__row { justify-content: center; }
html body .sso-404 .sso-search { text-align: left; }

/* Text page helpers used in the page content. */
html body .sso-lede { font-size: 1.125em; color: var(--e-global-color-text); }
html body .sso-updated { color: var(--e-global-color-ssomuted); font-size: 14px; }

/* prompt.css */
/* The small personal touches: the optional name card (#sso-prompt), the greeting line
   ([data-sso-welcome]), short messages (#sso-toast), the screen reader announcer and the header's
   Sleep Mode pill button. Solid panels, thin borders, one quiet gold accent. */

/* ---------- name card: a small card above the player, never a pop-up over the page ---------- */

html body #sso-prompt {
	position: fixed;
	right: 24px;
	bottom: calc(var(--sso-player-offset, env(safe-area-inset-bottom, 0px)) + 20px); /* player.css sets the offset */
	z-index: 80;
	width: min(360px, calc(100vw - 32px));
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity .45s ease, transform .6s var(--sso-ease, cubic-bezier(.22, .9, .36, 1));
}
html body #sso-prompt.is-above-keyboard { bottom: calc(var(--sso-kb, 0px) + 12px); }
html body #sso-prompt[hidden] { display: none; }
html body #sso-prompt.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
/* Out of the way while the phone player's sheet or the sleep timer menu is open (welcome.js also waits
   for both to close before showing it). */
html.sso-sheet-open body #sso-prompt,
html.sso-player-menu-open body #sso-prompt { visibility: hidden; }

html body #sso-prompt .sso-prompt__card {
	position: relative;
	margin: 0;
	padding: 18px 18px 16px;
	border: 1px solid var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
	border-radius: var(--sso-radius, 16px);
	background: var(--e-global-color-secondary, #0D142E);
	box-shadow: 0 30px 70px -26px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .04);
	color: var(--e-global-color-text, #EEF1F8);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* A thin line of gold light along the top edge. */
html body #sso-prompt .sso-prompt__card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 22px;
	right: 22px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(233, 200, 126, .55), transparent);
	pointer-events: none;
}

html body #sso-prompt .sso-prompt__label {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #E9C87E);
}
html body #sso-prompt .sso-prompt__label[hidden] { display: none; }

html body #sso-prompt .sso-prompt__title {
	margin: 0 0 4px;
	padding: 0;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--e-global-color-text, #EEF1F8);
}

html body #sso-prompt .sso-prompt__help {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--e-global-color-ssomuted, #9AA4BB);
}

/* One line: the field, then Save and Skip (they move under the field only when it would get too narrow). */
html body #sso-prompt .sso-prompt__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

html body #sso-prompt .sso-prompt__input {
	display: block;
	flex: 1 1 9rem;
	width: auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--e-global-color-ssofield, rgba(255, 255, 255, .38));
	border-radius: var(--sso-radius-s, 10px);
	background: var(--e-global-color-ssobg2, #0A1128);
	box-shadow: none;
	color: var(--e-global-color-text, #EEF1F8);
	font-family: inherit;
	font-size: 16px; /* 16px stops phones zooming in on focus */
	line-height: 1.2;
	transition: border-color .2s ease;
}
html body #sso-prompt .sso-prompt__input:focus { border-color: var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35)); }

html body #sso-prompt .sso-prompt__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
}

/* A quiet outline button: the card is optional, so nothing on it should be the brightest thing on screen. */
html body #sso-prompt .sso-prompt__save {
	min-width: 64px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--e-global-color-primary, #E9C87E);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .15s ease;
}
@media (hover: hover) {
	html body #sso-prompt .sso-prompt__save:hover {
		border-color: var(--e-global-color-primary, #E9C87E);
		background: rgba(233, 200, 126, .08);
		color: var(--e-global-color-accent, #F4DFAE);
	}
}
html body #sso-prompt .sso-prompt__save:active { transform: scale(.98); background: rgba(233, 200, 126, .08); }

html body #sso-prompt .sso-prompt__skip {
	min-width: 0;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
	html body #sso-prompt .sso-prompt__skip:hover {
		color: var(--e-global-color-text, #EEF1F8);
		background: var(--e-global-color-ssopanel2, #111936);
		border-color: var(--e-global-color-ssoline, rgba(255, 255, 255, .08));
	}
}
html body #sso-prompt .sso-prompt__skip:active { background: var(--e-global-color-ssopanel2, #111936); }

/* After Save: a single friendly line, then the card steps aside. */
html body #sso-prompt .sso-prompt__done {
	display: none;
	margin: 0;
	padding: 4px 0;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 19px;
	line-height: 1.35;
	color: var(--e-global-color-text, #EEF1F8);
}
html body #sso-prompt .sso-prompt__done:focus { outline: none; }
html body #sso-prompt .is-done .sso-prompt__body { display: none; }
html body #sso-prompt .is-done .sso-prompt__done { display: block; animation: sso-soft-in .5s ease backwards; }

@media (max-width: 600px) {
	html body #sso-prompt {
		left: 12px;
		right: 12px;
		width: auto;
		bottom: calc(var(--sso-player-offset, env(safe-area-inset-bottom, 0px)) + 12px);
	}
	html body #sso-prompt .sso-prompt__card { padding: 16px 16px 14px; }
	html body #sso-prompt .sso-prompt__title { font-size: 17px; }
	html body #sso-prompt .sso-prompt__help { margin-bottom: 10px; font-size: 12.5px; line-height: 1.45; }
}

/* ---------- greeting line ---------- */

@keyframes sso-soft-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
html body [data-sso-welcome] .sso-welcome__text.is-new { animation: sso-soft-in 1.2s ease backwards; }

/* A quiet text button; the padding gives it a full-size touch area without moving the line. */
html body [data-sso-welcome] button.sso-welcome__change:not(.elementor-button) {
	display: inline-block;
	margin: -13px -8px -13px 2px;
	padding: 13px 8px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1.4;
	opacity: .8;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: opacity .2s ease;
}
@media (hover: hover) {
	html body [data-sso-welcome] button.sso-welcome__change:not(.elementor-button):hover { opacity: 1; }
}

/* ---------- toast ---------- */

html body #sso-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--sso-player-offset, env(safe-area-inset-bottom, 0px)) + 16px);
	z-index: 70;
	width: max-content; /* left: 50% alone would cap it at half the screen */
	max-width: min(460px, calc(100vw - 32px));
	padding: 12px 20px;
	border: 1px solid var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
	border-radius: 12px;
	background: var(--e-global-color-secondary, #0D142E);
	box-shadow: 0 18px 50px -16px rgba(0, 0, 0, .8);
	color: var(--e-global-color-text, #EEF1F8);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	text-align: center;
	overflow-wrap: anywhere; /* long links break instead of running off the screen */
	opacity: 0;
	transform: translate(-50%, 10px);
	pointer-events: none;
	transition: opacity .3s ease, transform .45s var(--sso-ease, cubic-bezier(.22, .9, .36, 1)), bottom .45s var(--sso-ease, cubic-bezier(.22, .9, .36, 1));
}
html body #sso-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
html body #sso-toast:empty { padding: 0; border: 0; }
/* Above the name card while it is showing (welcome.js measures it). On wide screens the card sits
   off to the right, clear of the centred message. */
@media (max-width: 1240px) {
	html.sso-prompt-open:not(.sso-sheet-open) body #sso-toast { bottom: calc(var(--sso-prompt-top, 0px) + 12px); }
}

/* ---------- screen reader only ---------- */

html body #sso-announcer,
html body .sso-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- header "Sleep Mode" pill (a round moon button on phones) ---------- */

html body .sso-pill-btn:not(.elementor-button),
html body .sso-pill-btn:not(.elementor-button):is(:focus, :active) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 18px 0 16px;
	border: 1px solid var(--e-global-color-ssoline, rgba(255, 255, 255, .08));
	border-radius: 999px;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--e-global-color-text, #EEF1F8);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .15s ease;
}
html body .sso-pill-btn svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--e-global-color-primary, #E9C87E);
}
@media (hover: hover) {
	html body .sso-pill-btn:not(.elementor-button):hover {
		border-color: var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
		background-color: var(--e-global-color-ssopanel2, #111936);
		color: var(--e-global-color-text, #EEF1F8);
	}
}
html body .sso-pill-btn:not(.elementor-button):active { transform: scale(.96); }

@media (max-width: 860px) {
	html body .sso-pill-btn:not(.elementor-button),
	html body .sso-pill-btn:not(.elementor-button):is(:focus, :active) {
		width: 44px;
		height: 44px;
		padding: 0;
	}
	html body .sso-pill-btn svg { width: 18px; height: 18px; }
	html body .sso-pill-btn span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body #sso-prompt,
	html body #sso-toast { transition: opacity .2s linear; transform: none; }
	html body #sso-toast { transform: translateX(-50%); }
	html body #sso-toast.is-visible { transform: translateX(-50%); }
	html body [data-sso-welcome] .sso-welcome__text.is-new,
	html body #sso-prompt .is-done .sso-prompt__done { animation: none; }
}

/* player.css */
/* Player (SSO Core, player.js). Desktop: a slim bar at the bottom. Up to 959px: a floating compact bar
   that opens into a bottom sheet. Colours come from the Elementor kit, so extra dark follows on its own.
   Rules start from #sso-player so they beat the kit's element styles and the theme's button reset.
   Hooks for other parts: --sso-player-h (bar height), --sso-player-offset (0, or the bar height while it
   is shown: lift other fixed bottom UI by it), --sso-consent-h (set by a consent tool to lift the bar). */

:root { --sso-player-h: 88px; }

html body.sso-has-player {
	--sso-player-offset: calc(var(--sso-player-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: var(--sso-player-offset);
}

html.sso-sheet-open,
html.sso-sheet-open body { overflow: hidden; }

html body #sso-player {
	--p-bg2: var(--e-global-color-ssobg2, #0A1128);
	--p-panel: var(--e-global-color-secondary, #0D142E);
	--p-panel2: var(--e-global-color-ssopanel2, #111936);
	--p-text: var(--e-global-color-text, #EEF1F8);
	--p-muted: var(--e-global-color-ssomuted, #9AA4BB);
	--p-faint: var(--e-global-color-ssofaint, #7D8699);
	--p-gold: var(--e-global-color-primary, #E9C87E);
	--p-gold2: var(--e-global-color-accent, #F4DFAE);
	--p-golddim: var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
	--p-line: var(--e-global-color-ssoline, rgba(255, 255, 255, .08));
	--p-line2: var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
	--p-heart: var(--e-global-color-ssoheart, #E5566B);
	--p-ease: var(--sso-ease, cubic-bezier(.22, .9, .36, 1));
	position: relative;
	z-index: 60;
	color: var(--p-text);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.4;
}
html body #sso-player[hidden] { display: none; }

/* ---------- Buttons ---------- */

html body #sso-player .sso-pbtn {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--p-muted);
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .4s ease, transform .15s ease;
}
/* The theme's button reset animates every property, visibility included, so a button in the opening sheet
   would stay hidden for a moment and could not take focus. Every player button names what moves. */
html body #sso-player :is(.sso-player__handle, .sso-player__open) { transition: background-color .2s ease, opacity .2s ease; }
html body #sso-player .sso-pbtn svg { width: 19px; height: 19px; }
@media (hover: hover) {
	html body #sso-player .sso-pbtn:hover { color: var(--p-text); background: var(--p-panel2); }
}
html body #sso-player .sso-pbtn:active { transform: scale(.94); }
html body #sso-player .sso-pbtn[aria-pressed="true"] { color: var(--p-gold); }

/* A small dot under switched-on toggles, so the state never relies on colour alone. */
html body #sso-player :is(.sso-pbtn--shuffle, .sso-pbtn--repeat)[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	width: 3px;
	height: 3px;
	margin-left: -1.5px;
	border-radius: 50%;
	background: currentColor;
}

/* Play: a large round button with a thin gold edge. */
html body #sso-player .sso-pbtn--play {
	width: 50px;
	height: 50px;
	border: 1.5px solid var(--p-gold);
	color: var(--p-gold);
	background: radial-gradient(circle at 50% 30%, rgba(233, 200, 126, .18), rgba(233, 200, 126, .03) 70%);
	box-shadow: 0 6px 22px -12px rgba(233, 200, 126, .5);
}
html body #sso-player .sso-pbtn--play svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	transition: opacity .25s ease, transform .3s var(--p-ease);
}
html body #sso-player .sso-pbtn--play .sso-i--play { margin-left: -9px; }
html body #sso-player .sso-pbtn--play[data-state="paused"] .sso-i--pause,
html body #sso-player .sso-pbtn--play:not([data-state="paused"]) .sso-i--play { opacity: 0; transform: scale(.6); }
html body #sso-player .sso-pbtn--play::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1.5px solid transparent;
	border-top-color: var(--p-gold2);
	border-radius: 50%;
	opacity: 0;
	transition: opacity .3s ease;
}
html body #sso-player .sso-pbtn--play[data-state="loading"]::after {
	opacity: .85;
	animation: sso-player-spin 1.1s linear infinite;
}
html body #sso-player.is-playing .sso-pbtn--play {
	box-shadow: 0 0 0 6px rgba(233, 200, 126, .06), 0 10px 30px -12px rgba(233, 200, 126, .55);
}
@media (hover: hover) {
	html body #sso-player .sso-pbtn--play:hover {
		color: var(--p-gold2);
		border-color: var(--p-gold2);
		background: radial-gradient(circle at 50% 30%, rgba(233, 200, 126, .26), rgba(233, 200, 126, .06) 70%);
	}
}
@keyframes sso-player-spin { to { transform: rotate(360deg); } }

/* ---------- Desktop bar ---------- */

html body #sso-player .sso-player__mini,
html body #sso-player .sso-player__scrim,
html body #sso-player .sso-player__grab { display: none; }

html body #sso-player .sso-player__panel {
	position: fixed;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: var(--sso-consent-h, 0px);
	display: grid;
	grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.4fr) max-content;
	align-items: center;
	column-gap: 28px;
	box-sizing: border-box;
	height: calc(var(--sso-player-h) + env(safe-area-inset-bottom, 0px));
	margin: 0;
	padding: 0 max(24px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(24px, env(safe-area-inset-left, 0px));
	border-top: 1px solid var(--p-line);
	background-color: rgba(10, 17, 40, .92);
	background-color: color-mix(in srgb, var(--p-bg2) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 -24px 48px -30px rgba(0, 0, 0, .75);
	transition: transform .8s var(--p-ease);
}
/* A whisper of gold along the top edge. */
html body #sso-player .sso-player__panel::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 8%, var(--p-golddim) 50%, transparent 92%);
	opacity: .6;
	pointer-events: none;
}

html body #sso-player .sso-player__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
html body #sso-player :is(.sso-player__art, .sso-player__thumb) {
	display: block;
	flex: none;
	width: 52px;
	height: 52px;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: var(--sso-radius-s, 10px);
	object-fit: cover;
	background: var(--p-panel2);
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7), 0 0 0 1px var(--p-line);
	filter: brightness(var(--sso-dim-media, 1));
	-webkit-user-drag: none;
	user-select: none;
}
html body #sso-player .sso-player__titles {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
html body #sso-player .sso-player__title {
	margin: 0;
	overflow: hidden;
	color: var(--p-text);
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}
html body #sso-player .sso-player__cat {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	overflow: hidden;
	color: var(--p-muted);
	font-size: 12.5px;
	line-height: 1.3;
	white-space: nowrap;
}
html body #sso-player .sso-player__cat::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sso-cat, var(--p-gold));
}
html body #sso-player .sso-player__cat:empty { display: none; }

html body #sso-player .sso-player__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
html body #sso-player .sso-player__transport {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
html body #sso-player .sso-player__progress {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
html body #sso-player .sso-player__time {
	flex: none;
	min-width: 38px;
	color: var(--p-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: right;
	white-space: nowrap;
}
html body #sso-player .sso-player__time--end { text-align: left; }
/* A repeating sound: "Playing for 1:12:05" on the left, the same space kept on the right so the bar stays centred. */
@media (min-width: 960px) {
	html body #sso-player.is-looping .sso-player__progress {
		display: grid;
		grid-template-columns: minmax(max-content, 1fr) minmax(0, 3.2fr) minmax(0, 1fr);
		column-gap: 12px;
	}
}

/* Seek bar: a soft gold line; the thumb appears on hover, focus and drag. */
html body #sso-player .sso-seek {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	height: 24px;
	border-radius: 8px;
	cursor: pointer;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}
html body #sso-player :is(.sso-seek__track, .sso-player__line) {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(255, 255, 255, .1);
}
html body #sso-player .sso-seek__track {
	width: 100%;
	height: 4px;
	transition: height .2s ease;
}
html body #sso-player .sso-fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(233, 200, 126, .4), var(--p-gold));
	opacity: 0;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .26s linear, opacity .9s ease;
}
html body #sso-player .sso-fill.is-active { opacity: 1; }
html body #sso-player :is(.sso-fill, .sso-seek__knob).is-instant { transition: none; }
html body #sso-player .sso-seek.is-dragging .sso-fill { transition: opacity .9s ease; }
html body #sso-player .sso-seek__knob {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0;
	pointer-events: none;
	transition: transform .26s linear;
}
html body #sso-player .sso-seek__thumb {
	position: absolute;
	top: -6px;
	left: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--p-gold2);
	box-shadow: 0 0 0 4px rgba(233, 200, 126, .16), 0 2px 6px rgba(0, 0, 0, .5);
	opacity: 0;
	transform: scale(.5);
	transition: opacity .2s ease, transform .2s ease;
}
html body #sso-player .sso-seek__tip {
	position: absolute;
	left: 0;
	bottom: 14px;
	padding: 4px 8px;
	border: 1px solid var(--p-line2);
	border-radius: 8px;
	background: var(--p-panel2);
	color: var(--p-text);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .15s ease;
}
html body #sso-player .sso-seek.is-dragging .sso-seek__tip { opacity: 1; }
html body #sso-player .sso-seek:focus-visible .sso-seek__thumb,
html body #sso-player .sso-seek.is-dragging .sso-seek__thumb { opacity: 1; transform: none; }
html body #sso-player .sso-seek.is-dragging .sso-seek__knob,
html body #sso-player .sso-seek.is-wrapping .sso-seek__knob { transition: none; }
html body #sso-player .sso-seek.is-wrapping .sso-seek__thumb { opacity: 0; }
@media (hover: hover) {
	html body #sso-player .sso-seek:hover .sso-seek__track { height: 5px; }
	html body #sso-player .sso-seek:hover:not(.is-wrapping) .sso-seek__thumb { opacity: 1; transform: none; }
}

html body #sso-player .sso-player__side {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	min-width: max-content;
}
html body #sso-player .sso-player__volume {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-right: 6px;
}
html body #sso-player .sso-pbtn--mute .sso-i--mute,
html body #sso-player .sso-pbtn--mute[data-muted="true"] .sso-i--vol { display: none; }
html body #sso-player .sso-pbtn--mute[data-muted="true"] .sso-i--mute { display: block; }

html body #sso-player .sso-player__vol {
	--fill: 80%;
	-webkit-appearance: none;
	appearance: none;
	width: 92px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}
html body #sso-player .sso-player__vol::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(to right, var(--p-muted) 0 var(--fill), rgba(255, 255, 255, .12) var(--fill) 100%);
}
html body #sso-player .sso-player__vol::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: var(--p-text);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
html body #sso-player .sso-player__vol::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
html body #sso-player .sso-player__vol::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--p-muted); }
html body #sso-player .sso-player__vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--p-text); }
@media (hover: hover) {
	html body #sso-player .sso-player__vol:hover::-webkit-slider-runnable-track {
		background: linear-gradient(to right, var(--p-gold) 0 var(--fill), rgba(255, 255, 255, .14) var(--fill) 100%);
	}
	html body #sso-player .sso-player__vol:hover::-moz-range-progress { background: var(--p-gold); }
}
html body #sso-player.is-muted .sso-player__vol { opacity: .45; }
html body #sso-player .sso-player__novol {
	display: none;
	max-width: 96px;
	padding-right: 4px;
	color: var(--p-muted);
	font-size: 12px;
	line-height: 1.3;
}
html body #sso-player.no-volume .sso-player__vol { display: none; }
html body #sso-player.no-volume .sso-player__novol { display: block; }

html body #sso-player .sso-player__timer {
	gap: 8px;
	width: auto;
	min-width: 126px;
	margin: 0 4px;
	padding: 0 15px 0 13px;
	border: 1px solid var(--p-line2);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
html body #sso-player .sso-player__timer svg { width: 17px; height: 17px; }
html body #sso-player .sso-player__timer.is-armed {
	border-color: var(--p-golddim);
	background: rgba(233, 200, 126, .06);
	color: var(--p-gold);
}
html body #sso-player .sso-pbtn--fav .sso-i--heart-fill,
html body #sso-player .sso-pbtn--fav[aria-pressed="true"] .sso-i--heart { display: none; }
html body #sso-player .sso-pbtn--fav[aria-pressed="true"] .sso-i--heart-fill { display: block; }
html body #sso-player .sso-pbtn--fav[aria-pressed="true"] { color: var(--p-heart); }

/* ---------- Sleep timer menu ---------- */

html body #sso-player .sso-timer-pop {
	position: fixed;
	z-index: 4;
	box-sizing: border-box;
	min-width: 228px;
	padding: 6px;
	border: 1px solid var(--p-line2);
	border-radius: 16px;
	background: var(--p-panel);
	box-shadow: 0 28px 60px -16px rgba(0, 0, 0, .85);
	animation: sso-player-pop .2s var(--p-ease);
}
html body #sso-player .sso-timer-pop[hidden] { display: none; }
@keyframes sso-player-pop { from { opacity: 0; transform: translateY(6px); } }
html body #sso-player .sso-timer-pop__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 10px 12px 8px;
	color: var(--p-faint);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
}
html body #sso-player .sso-timer-pop__head span + span {
	color: var(--p-gold);
	font-size: 12px;
	letter-spacing: .02em;
	text-transform: none;
}
html body #sso-player .sso-timer-pop__menu button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--p-text);
	font-size: 15px;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) {
	html body #sso-player .sso-timer-pop__menu button:hover { background: var(--p-panel2); }
}
html body #sso-player .sso-timer-pop__menu button:focus-visible { outline-offset: -2px; background: var(--p-panel2); }
html body #sso-player .sso-timer-pop__menu button[aria-checked="true"] { color: var(--p-gold); }
html body #sso-player .sso-timer-pop__menu .sso-i--check { width: 16px; height: 16px; opacity: 0; }
html body #sso-player .sso-timer-pop__menu button[aria-checked="true"] .sso-i--check { opacity: 1; }

/* ---------- Entrance (the first time a sound loads) ---------- */

@media (min-width: 960px) {
	html body #sso-player.is-entering .sso-player__panel { transform: translateY(105%); }
}

/* ---------- Bar widths ----------
   Up to 1559px the controls on the right keep their natural width and the title and centre share the rest.
   From 1560px there is room for all three columns with the buttons centred on the page. */

@media (min-width: 1560px) {
	html body #sso-player .sso-player__panel { grid-template-columns: minmax(0, 1fr) minmax(340px, 600px) minmax(max-content, 1fr); }
}

@media (min-width: 960px) and (max-width: 1179px) {
	html body #sso-player .sso-player__panel {
		grid-template-columns: minmax(150px, 1fr) minmax(270px, 1.4fr) max-content;
		column-gap: 18px;
	}
	html body #sso-player .sso-player__vol { width: 72px; }
	html body #sso-player .sso-player__novol { max-width: 76px; }
	html body #sso-player .sso-player__timer:not(.is-armed) { min-width: 0; padding: 0 13px; }
	html body #sso-player .sso-player__timer:not(.is-armed) span { display: none; }
	html body #sso-player .sso-player__timer.is-armed { min-width: 122px; }
	html body #sso-player.is-looping .sso-player__progress { grid-template-columns: max-content minmax(0, 1fr); }
	html body #sso-player.is-looping .sso-player__time--end { display: none; }
}

/* Touch screens wide enough for the bar (a tablet held sideways): taller seek and volume targets. */
@media (min-width: 960px) and (pointer: coarse) {
	:root { --sso-player-h: 100px; }
	html body #sso-player .sso-seek { height: 40px; }
	html body #sso-player .sso-player__vol { height: 44px; }
}

/* ---------- Phones and small tablets: compact bar and sheet ---------- */

@media (max-width: 959px) {
	:root { --sso-player-h: 80px; }

	html body #sso-player .sso-player__mini {
		position: fixed;
		z-index: 1;
		left: max(8px, env(safe-area-inset-left, 0px));
		right: max(8px, env(safe-area-inset-right, 0px));
		bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--sso-consent-h, 0px));
		display: flex;
		align-items: center;
		gap: 6px;
		box-sizing: border-box;
		max-width: 560px;
		height: 64px;
		margin: 0 auto;
		padding: 0 8px 0 10px;
		overflow: hidden;
		border: 1px solid var(--p-line2);
		border-radius: 16px;
		background-color: rgba(13, 20, 46, .95);
		background-color: color-mix(in srgb, var(--p-panel) 95%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .85);
		cursor: pointer;
		transition: transform .7s var(--p-ease), opacity .5s ease;
	}
	html body #sso-player.is-entering .sso-player__mini { opacity: 0; transform: translateY(calc(100% + 24px)); }
	html body #sso-player .sso-player__open {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		gap: 12px;
		min-width: 0;
		height: 52px;          /* leaves room inside the bar for the focus ring */
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: inherit;
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	html body #sso-player .sso-player__thumb { width: 44px; height: 44px; border-radius: 9px; }
	html body #sso-player .sso-player__mini .sso-player__title { font-size: 15.5px; }
	html body #sso-player .sso-player__mini .sso-player__cat { font-size: 12px; }
	html body #sso-player .sso-pbtn--mini { width: 46px; height: 46px; }
	html body #sso-player .sso-pbtn--mini svg { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
	html body #sso-player .sso-pbtn--mini .sso-i--play { margin-left: -8px; }
	html body #sso-player .sso-player__line {
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 0;
		height: 2px;
		background: rgba(255, 255, 255, .07);
	}
	html body #sso-player .sso-player__open:active { opacity: .8; }

	html body #sso-player .sso-player__scrim {
		position: fixed;
		inset: 0;
		z-index: 2;
		display: block;
		background: rgba(2, 4, 12, .66);
		opacity: 0;
		visibility: hidden;
		transition: opacity .45s ease, visibility 0s linear .45s;
	}
	html body #sso-player.is-open .sso-player__scrim { opacity: 1; visibility: visible; transition: opacity .45s ease; }

	html body #sso-player .sso-player__panel {
		top: auto;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: auto;
		max-width: 560px;
		height: auto;
		max-height: calc(100vh - 12px);
		max-height: calc(100dvh - 12px);
		margin: 0 auto;
		padding: 0 22px calc(22px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 1px solid var(--p-line2);
		border-bottom: 0;
		border-radius: 26px 26px 0 0;
		background: var(--p-bg2);
		background: radial-gradient(130% 55% at 50% 0%, color-mix(in srgb, var(--sso-cat, #E9C87E) 11%, transparent), transparent 72%), var(--p-bg2);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .85);
		visibility: hidden;
		transform: translateY(105%);
		transition: transform .5s var(--p-ease), visibility 0s linear .5s;
	}
	html body #sso-player .sso-player__panel::before { display: none; }
	html body #sso-player.is-open .sso-player__panel {
		visibility: visible;
		transform: none;
		transition: transform .5s var(--p-ease);
	}
	html body #sso-player .sso-player__panel.is-dragging { transition: none; }
	html body #sso-player .sso-player__panel:focus { outline: none; }   /* the dialog itself holds focus only as a fallback */

	html body #sso-player .sso-player__grab {
		display: flex;
		flex: none;
		justify-content: center;
		width: 100%;
		touch-action: none;
	}
	html body #sso-player .sso-player__handle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: transparent;
		cursor: pointer;
	}
	html body #sso-player .sso-player__handle span {
		width: 40px;
		height: 5px;
		border-radius: 3px;
		background: rgba(255, 255, 255, .24);
		transition: background-color .2s ease;
	}
	html body #sso-player .sso-player__handle:active span { background: rgba(255, 255, 255, .45); }
	html body #sso-player .sso-player__handle:focus-visible { outline-offset: -4px; }

	html body #sso-player .sso-player__meta {
		flex-direction: column;
		flex: none;
		gap: 0;
		width: 100%;
		text-align: center;
		touch-action: none;
	}
	html body #sso-player .sso-player__art {
		width: min(300px, 68vw, 34vh);
		width: min(300px, 68vw, 34dvh);
		height: auto;
		aspect-ratio: 1;
		margin: 4px 0 22px;
		border-radius: 20px;
		box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px var(--p-line);
	}
	html body #sso-player .sso-player__panel .sso-player__titles { align-items: center; width: 100%; gap: 6px; }
	html body #sso-player .sso-player__panel .sso-player__title {
		display: -webkit-box;
		font-size: 25px;
		line-height: 1.2;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	html body #sso-player .sso-player__panel .sso-player__cat { font-size: 13.5px; }

	html body #sso-player .sso-player__main { flex: none; gap: 12px; width: 100%; margin-top: 20px; }
	html body #sso-player .sso-player__progress {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "bar bar" "pos dur";
		gap: 0;
	}
	html body #sso-player .sso-seek { grid-area: bar; height: 44px; }
	html body #sso-player .sso-seek__track { height: 5px; }
	html body #sso-player .sso-seek__thumb { opacity: 1; transform: scale(.8); }
	html body #sso-player .sso-player__time { grid-area: pos; min-width: 0; text-align: left; font-size: 12.5px; }
	html body #sso-player .sso-player__time--end { grid-area: dur; text-align: right; }
	html body #sso-player .sso-player__transport { justify-content: space-between; gap: 4px; padding: 0 2px; }
	html body #sso-player .sso-player__transport .sso-pbtn { width: 50px; height: 50px; }
	html body #sso-player .sso-player__transport .sso-pbtn svg { width: 22px; height: 22px; }
	html body #sso-player .sso-pbtn--big { width: 76px; height: 76px; }
	html body #sso-player .sso-player__transport .sso-pbtn--big { width: 76px; height: 76px; }
	html body #sso-player .sso-player__transport .sso-pbtn--big svg { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
	html body #sso-player .sso-player__transport .sso-pbtn--big .sso-i--play { margin-left: -12px; }

	html body #sso-player .sso-player__side {
		flex: none;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		min-width: 0;
		margin-top: 18px;
		padding-top: 14px;
		border-top: 1px solid var(--p-line);
	}
	html body #sso-player .sso-player__timer { margin: 0; }
	html body #sso-player .sso-player__volume { gap: 8px; width: 100%; margin: 4px 0 0; }
	html body #sso-player .sso-player__vol { flex: 1 1 auto; width: auto; height: 44px; }
	html body #sso-player .sso-player__novol { max-width: none; font-size: 13px; }
}

@media (max-width: 959px) and (max-height: 640px) {
	html body #sso-player .sso-player__art { width: min(200px, 30vh); margin-bottom: 14px; }
	html body #sso-player .sso-player__main { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	html body #sso-player :is(.sso-fill, .sso-seek__knob, .sso-player__panel, .sso-player__mini) { transition: none; }
}

@media print {
	html body #sso-player { display: none; }
	html body.sso-has-player { padding-bottom: 0; }
}

/* sleep.css */
/* Sleep Mode (sleepmode.js): an almost black night scene with the sound, one large play button,
   the timer and a clear exit. Everything here is still: nothing loops, pulses or moves back and
   forth. State: html[data-sso-sleepmode="on|deep"]. The page underneath is switched off once the
   overlay has faded in (html[data-sso-sleepmode-settled]), so its animations stop for the night.
   The colours are fixed night tones, the same in both brightness settings; text keeps at least
   4.5:1 contrast, even the faint wake hint. */

/* ---------- page underneath ---------- */

html[data-sso-sleepmode],
html[data-sso-sleepmode] body {
	overflow: hidden;
	overscroll-behavior: none;
}
html[data-sso-sleepmode] { background: #000; }
html[data-sso-sleepmode-settled] body { background: #000; }

html[data-sso-sleepmode-settled] body > :not(#sso-shell, #sso-sleep, #sso-announcer):not(:has(#sso-sleep)) {
	display: none !important;
}
html[data-sso-sleepmode-settled] body #sso-shell > :not(#sso-sleep, #sso-announcer) {
	visibility: hidden !important;
}
/* Messages never show over Sleep Mode. */
html[data-sso-sleepmode] body #sso-toast { visibility: hidden; }

/* ---------- overlay ---------- */

html body #sso-sleep {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
	overflow: hidden;
	overscroll-behavior: contain;
	isolation: isolate;
	background:
		radial-gradient(70% 52% at 50% 30%, rgba(26, 38, 80, .42), rgba(10, 15, 34, .18) 55%, transparent 78%),
		linear-gradient(180deg, #03050d 0%, #02030a 62%, #010208 100%);
	color: #c9d0de;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
	opacity: 0;
	transition: opacity 1.2s ease;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}
html body #sso-sleep[hidden] { display: none; }
html body #sso-sleep.is-in { opacity: 1; }
html body #sso-sleep:focus { outline: none; }

/* Ultra-dark: a black layer settles over everything except the wake hint. */
html body #sso-sleep::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease;
}
html[data-sso-sleepmode="deep"] body #sso-sleep::after {
	opacity: 1;
	transition: opacity 2.5s ease;
}

/* ---------- night sky: a few faint fixed stars, a horizon and the moon's light on the water ---------- */

html body #sso-sleep .sso-sleep__sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
html body #sso-sleep .sso-sleep__sky::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	border-radius: 50%;
	box-shadow:
		5.4vw 11.7vh 0 0 rgba(222, 230, 255, .45),
		31.2vw 4.3vh 0 0 rgba(222, 230, 255, .46),
		50.2vw 11.9vh 0 0 rgba(222, 230, 255, .24),
		61.9vw 4.7vh 0 .5px rgba(222, 230, 255, .26),
		69.2vw 7.3vh 0 0 rgba(222, 230, 255, .47),
		84.6vw 10.4vh 0 0 rgba(222, 230, 255, .24),
		98.5vw 6vh 0 0 rgba(222, 230, 255, .22),
		2vw 18.5vh 0 0 rgba(222, 230, 255, .14),
		24.1vw 24.4vh 0 0 rgba(222, 230, 255, .48),
		74.1vw 23.2vh 0 0 rgba(222, 230, 255, .39),
		80.2vw 20.3vh 0 .5px rgba(222, 230, 255, .48),
		95.8vw 23vh 0 0 rgba(222, 230, 255, .21),
		3.3vw 27.6vh 0 0 rgba(222, 230, 255, .28),
		18.4vw 32.8vh 0 0 rgba(222, 230, 255, .39),
		29.9vw 35vh 0 0 rgba(222, 230, 255, .41),
		69vw 29.3vh 0 .5px rgba(222, 230, 255, .15),
		85.5vw 28.4vh 0 0 rgba(222, 230, 255, .54),
		93.3vw 30.6vh 0 0 rgba(222, 230, 255, .44),
		8.5vw 41.1vh 0 0 rgba(222, 230, 255, .19),
		27.7vw 46.3vh 0 0 rgba(222, 230, 255, .36),
		75.1vw 48.6vh 0 .5px rgba(222, 230, 255, .53),
		83.9vw 48.3vh 0 0 rgba(222, 230, 255, .36),
		92.8vw 46.9vh 0 0 rgba(222, 230, 255, .5),
		16.2vw 55.7vh 0 0 rgba(222, 230, 255, .35),
		80.6vw 52.7vh 0 0 rgba(222, 230, 255, .32),
		93.2vw 57.8vh 0 .5px rgba(222, 230, 255, .29),
		2vw 66.2vh 0 0 rgba(222, 230, 255, .17),
		72.6vw 68.5vh 0 0 rgba(222, 230, 255, .31),
		81.6vw 65.3vh 0 .5px rgba(222, 230, 255, .16),
		92.9vw 73.5vh 0 0 rgba(222, 230, 255, .33);
}
html body #sso-sleep .sso-sleep__sky::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 4.5% 13% at 50% 91%, rgba(233, 200, 126, .075), transparent 72%),
		linear-gradient(180deg, transparent 79.8%, rgba(140, 160, 215, .05) 80.6%, transparent 82.4%),
		linear-gradient(180deg, transparent 80.4%, rgba(12, 19, 42, .55) 100%);
}

/* ---------- content ---------- */

html body #sso-sleep .sso-sleep__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 560px;
}

/* Each part settles in once, a little after the last (one direction only). */
@keyframes sso-sleep-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
html body #sso-sleep.is-in .sso-sleep__inner > * {
	animation: sso-sleep-rise 1.2s var(--sso-ease, cubic-bezier(.22, .9, .36, 1)) backwards;
}
html body #sso-sleep.is-in .sso-sleep__inner > :nth-child(1) { animation-delay: .1s; animation-duration: 1.6s; }
html body #sso-sleep.is-in .sso-sleep__inner > :nth-child(2) { animation-delay: .3s; }
html body #sso-sleep.is-in .sso-sleep__inner > :nth-child(3) { animation-delay: .4s; }
html body #sso-sleep.is-in .sso-sleep__inner > :nth-child(4) { animation-delay: .5s; }
html body #sso-sleep.is-in .sso-sleep__inner > :nth-child(5) { animation-delay: .6s; }
html body #sso-sleep.is-in .sso-sleep__inner > :nth-child(6) { animation-delay: .7s; }

html body #sso-sleep .sso-sleep__moonwrap {
	position: relative;
	width: 76px;
	height: 76px;
	margin: 0 0 22px;
}
html body #sso-sleep .sso-sleep__moonwrap::before {
	content: "";
	position: absolute;
	inset: -110px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 223, 174, .11) 0%, rgba(244, 223, 174, .035) 38%, transparent 66%);
	pointer-events: none;
}
html body #sso-sleep .sso-sleep__moon {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 0 16px rgba(244, 223, 174, .28));
}

html body #sso-sleep .sso-sleep__label {
	margin: 0 0 12px;
	padding: 0;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #b8a273;
}

html body #sso-sleep .sso-sleep__sound {
	min-height: 1.2em;
	max-width: 18em;
	margin: 0 0 34px;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(27px, 7vw, 36px);
	font-weight: 500;
	line-height: 1.2;
	color: #e3e7f0;
	text-wrap: balance;
	transition: opacity .35s ease;
}
html body #sso-sleep .sso-sleep__sound.is-changing { opacity: 0; }

html body #sso-sleep .sso-sleep__play {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	padding: 0;
	border: 1px solid rgba(233, 200, 126, .42);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 32%, rgba(233, 200, 126, .12), rgba(233, 200, 126, .025) 72%);
	box-shadow: 0 0 0 10px rgba(233, 200, 126, .022), 0 22px 60px -24px rgba(233, 200, 126, .3);
	color: #e6cc92;
	cursor: pointer;
	transition: border-color .3s ease, background-color .3s ease, transform .2s var(--sso-ease, ease), opacity .3s ease;
}
html body #sso-sleep .sso-sleep__play[hidden] { display: none; }
html body #sso-sleep .sso-sleep__play svg { width: 32px; height: 32px; }
html body #sso-sleep .sso-sleep__i-play { margin-left: 4px; } /* optical centre of the triangle */
html body #sso-sleep .sso-sleep__i-pause,
html body #sso-sleep .sso-sleep__play[data-playing="true"] .sso-sleep__i-play { display: none; }
html body #sso-sleep .sso-sleep__play[data-playing="true"] .sso-sleep__i-pause { display: block; }
html body #sso-sleep .sso-sleep__play.is-loading { opacity: .6; }
@media (hover: hover) {
	html body #sso-sleep .sso-sleep__play:hover {
		border-color: rgba(233, 200, 126, .7);
		background-color: rgba(233, 200, 126, .05);
	}
}
html body #sso-sleep .sso-sleep__play:active { transform: scale(.96); }

html body #sso-sleep .sso-sleep__timer {
	min-height: 1.5em;
	margin: 22px 0 0;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	color: #949db1;
}
html body #sso-sleep .sso-sleep__timer:empty { min-height: 0; margin-top: 0; }
html body #sso-sleep .sso-sleep__timer:empty + .sso-sleep__exit { margin-top: 36px; }

html body #sso-sleep .sso-sleep__exit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin-top: 26px;
	padding: 0 30px;
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 999px;
	background: rgba(255, 255, 255, .03);
	color: #d3d9e6;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .15s ease;
}
@media (hover: hover) {
	html body #sso-sleep .sso-sleep__exit:hover {
		color: #fff;
		border-color: rgba(255, 255, 255, .42);
		background: rgba(255, 255, 255, .06);
	}
}
html body #sso-sleep .sso-sleep__exit:active { transform: scale(.97); }

/* ---------- ultra-dark: the veil takes every tap until the screen is awake again ---------- */

html body #sso-sleep .sso-sleep__veil {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	pointer-events: none;
}
html[data-sso-sleepmode="deep"] body #sso-sleep .sso-sleep__veil,
html body #sso-sleep.is-waking .sso-sleep__veil {
	pointer-events: auto;
	touch-action: none;
}
html[data-sso-sleepmode="deep"] body #sso-sleep .sso-sleep__veil { cursor: none; }

html body #sso-sleep .sso-sleep__wake {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: .1em;
	color: #737c8f;
	opacity: 0;
	transition: opacity .25s ease;
}
html[data-sso-sleepmode="deep"] body #sso-sleep .sso-sleep__wake {
	opacity: 1;
	transition: opacity 1.5s ease 2.2s;
}
html body #sso-sleep .sso-sleep__wake-key { display: none; }
@media (hover: hover) and (pointer: fine) {
	html body #sso-sleep .sso-sleep__wake-touch { display: none; }
	html body #sso-sleep .sso-sleep__wake-key { display: inline; }
}

/* ---------- phones and short screens ---------- */

@media (max-width: 600px) {
	html body #sso-sleep .sso-sleep__moonwrap { width: 64px; height: 64px; margin-bottom: 18px; }
	html body #sso-sleep .sso-sleep__sound { margin-bottom: 30px; }
	html body #sso-sleep .sso-sleep__play { width: 88px; height: 88px; }
}
@media (max-height: 560px) {
	html body #sso-sleep .sso-sleep__moonwrap { width: 48px; height: 48px; margin-bottom: 12px; }
	html body #sso-sleep .sso-sleep__sound { margin-bottom: 18px; }
	html body #sso-sleep .sso-sleep__play { width: 72px; height: 72px; }
	html body #sso-sleep .sso-sleep__timer { margin-top: 12px; }
	html body #sso-sleep .sso-sleep__exit { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	html body #sso-sleep,
	html body #sso-sleep::after,
	html body #sso-sleep .sso-sleep__wake { transition: none; }
	html body #sso-sleep.is-in .sso-sleep__inner > * { animation: none; }
}

/* cards.css */
/* Sound cards: one markup for PHP ([sso_card], [sso_library], [sso_related]) and the browser
   (search results, favourites). Photographic, quiet, rounded, with a thin edge.
   Selectors start with "html body" to beat the kit; buttons carry an attribute as well so they
   also beat the theme's neutral button reset in every state. */

/* ---------- Grid ---------- */

/* Grids size themselves from the space they are given, not the screen, so the same cards fit a
   full-width library, a narrow column (404 page) or a phone. */
html body :is(.sso-library, .sso-search__results, .sso-favs, .sso-related) { container: sso-grid / inline-size; }

html body .sso-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
@container sso-grid (max-width: 319px) {
	html body .sso-grid { grid-template-columns: minmax(0, 1fr); }
}
@container sso-grid (min-width: 560px) {
	html body .sso-grid { gap: 18px; }
}
@container sso-grid (min-width: 680px) {
	html body .sso-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@container sso-grid (min-width: 960px) {
	html body .sso-grid:not(.sso-grid--3) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
	html body .sso-grid--3 { gap: 24px; }
}
html body .sso-grid[hidden] { display: none; }

/* Inside an Elementor Loop Grid every wrapper stretches, so cards in a row share one height. */
html body .e-loop-item:has(.sso-card) :is(.e-con, .e-con-inner, .elementor-widget-shortcode, .elementor-widget-container, .elementor-shortcode):has(.sso-card) {
	width: 100%;
	height: 100%;
}

/* On phones Elementor lets its columns wrap, and then sizes each widget from the width of its
   content before stretching it. These lists take their width from the column, so they have no
   content width of their own: the widget was measured at zero width and came out the wrong height
   (Similar sounds ran under the line below it, and the last row of the Loop Grid ran under the
   "Missing a sound" line). The widget fills the column instead. */
html body .elementor-widget:has(> .elementor-shortcode > :is(.sso-library, .sso-favs, .sso-related)),
html body .elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > :is(.sso-library, .sso-favs, .sso-related)),
html body .elementor-widget-loop-grid:has(.sso-card) {
	width: 100%;
}

/* ---------- Card ---------- */

/* The picture row always keeps its full 5:4 height, so every card shows its category line and the
   play button sits in the same place. A taller neighbour (a two-line title) makes the whole row
   taller instead of squeezing the picture; if a slot is ever too short, only the spare space at the
   foot of the card is lost. */
html body .sso-card {
	container: sso-card / inline-size;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: max-content 1fr;
	height: 100%;
	overflow: hidden;
	text-align: left;
	color: var(--e-global-color-text, #EEF1F8);
	background-color: var(--e-global-color-secondary, #0D142E);
	border: 1px solid var(--e-global-color-ssoline, rgba(255, 255, 255, .08));
	border-radius: var(--sso-radius, 16px);
	transition: transform .45s var(--sso-ease, ease), border-color .4s ease, box-shadow .5s ease, opacity .3s ease;
	-webkit-tap-highlight-color: transparent;
}

/* clip-path rather than overflow: hidden, which would let the box shrink below its 5:4 height. */
html body .sso-card__media {
	grid-area: 1 / 1;
	position: relative;
	aspect-ratio: 5 / 4;
	clip-path: inset(0);
	background-color: var(--e-global-color-ssobg2, #0A1128);
}
html body .sso-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	filter: brightness(var(--sso-dim-media, 1));
	transform: scale(1.001);
	transition: opacity .7s ease, transform 1.2s var(--sso-ease, ease), filter .6s ease;
}
html body .sso-card__img.is-pending { opacity: 0; }

/* A light veil at the top for the heart and badges, and a soft fall into the panel at the bottom. */
html body .sso-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(5, 8, 20, .34) 0%, rgba(5, 8, 20, 0) 30%),
		linear-gradient(0deg, var(--e-global-color-secondary, #0D142E) 0%, rgba(13, 20, 46, 0) 46%);
	background:
		linear-gradient(180deg, rgba(5, 8, 20, .34) 0%, rgba(5, 8, 20, 0) 30%),
		linear-gradient(0deg, var(--e-global-color-secondary, #0D142E) 0%, color-mix(in srgb, var(--e-global-color-secondary, #0D142E) 0%, transparent) 46%);
}

html body .sso-card__body {
	grid-area: 2 / 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 4px 18px 20px;
}

html body .sso-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--e-global-color-ssomuted, #9AA4BB);
}
html body .sso-card__dot {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background-color: var(--sso-cat, var(--e-global-color-ssomuted));
	box-shadow: 0 0 10px color-mix(in srgb, var(--sso-cat, #9AA4BB) 55%, transparent);
}

html body .sso-card__title {
	margin: 2px 0 0;
	padding: 0;
	font-family: var(--e-global-typography-primary-font-family, "Playfair Display"), Georgia, "Times New Roman", serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: .005em;
	color: var(--e-global-color-text, #EEF1F8);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
html body .sso-card .sso-card__link,
html body .sso-card .sso-card__link:is(:hover, :focus, :active, :visited) {
	color: inherit;
	text-decoration: none;
}
/* The whole card, picture included, opens the sound page; the buttons sit above this layer.
   Nothing between the link and the card may be positioned, or the layer shrinks to that box. */
html body .sso-card .sso-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
html body .sso-card .sso-card__link[href]:focus-visible { outline: none; }
html body .sso-card:has(.sso-card__link:focus-visible) {
	outline: 2px solid var(--e-global-color-primary, #E9C87E);
	outline-offset: 3px;
}

html body .sso-card__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ---------- Badges and the "Playing" label (shared with the sound page) ---------- */

html body .sso-card__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 60px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}
html body .sso-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--e-global-color-text, #EEF1F8);
	background-color: rgba(5, 8, 20, .66);
	border: 1px solid rgba(255, 255, 255, .14);
}
html body .sso-badge[hidden] { display: none; }
html body .sso-badge--new::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--e-global-color-primary, #E9C87E);
}
html body .sso-badge--most {
	color: var(--e-global-color-accent, #F4DFAE);
	border-color: var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
}
html body .sso-badge .sso-i {
	width: 11px;
	height: 11px;
	fill: currentColor;
	color: var(--e-global-color-primary, #E9C87E);
}

html body .sso-now {
	position: absolute;
	left: 12px;
	bottom: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 9px;
	border-radius: 999px;
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--e-global-color-accent, #F4DFAE);
	background-color: rgba(5, 8, 20, .7);
	border: 1px solid var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .6s ease, transform .6s var(--sso-ease, ease);
	pointer-events: none;
}
html body .sso-now__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--e-global-color-primary, #E9C87E);
	box-shadow: 0 0 8px var(--e-global-color-primary, #E9C87E);
}
html body .is-playing > .sso-card__media .sso-now,
html body .is-playing > .sso-sound-hero__media .sso-now {
	opacity: 1;
	transform: none;
}

/* ---------- Play and heart buttons ---------- */

html body .sso-card .sso-card__play[data-sso-play] {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: end;
	position: relative;
	z-index: 2;
	width: 50px;
	height: 50px;
	margin: 0 12px 10px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--e-global-color-text, #EEF1F8);
	background-color: rgba(5, 8, 20, .62);
	border: 1px solid rgba(255, 255, 255, .22);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8);
	transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .2s ease, box-shadow .4s ease;
}
html body :is(.sso-card, .sso-sound-hero) .sso-i { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
html body :is(.sso-card, .sso-sound-hero) .sso-i--heart { fill: none; stroke: currentColor; stroke-width: 2; }
html body .sso-card__play .sso-i { width: 18px; height: 18px; }
html body .sso-card__play .sso-i--play { margin-left: 3px; }
html body .sso-card__play .sso-i--pause,
html body .is-playing > .sso-card__play .sso-i--play { display: none; }
html body .is-playing > .sso-card__play .sso-i--pause { display: block; }
html body .is-loading > .sso-card__play .sso-i { opacity: .55; }

html body .sso-card.is-playing .sso-card__play[data-sso-play] {
	color: var(--e-global-color-ssoink, #241A05);
	background-color: var(--e-global-color-primary, #E9C87E);
	background-image: linear-gradient(180deg, var(--e-global-color-accent, #F4DFAE), var(--e-global-color-primary, #E9C87E));
	border-color: transparent;
	box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 55%, transparent);
}
html body .sso-card .sso-card__play[data-sso-play]:active { transform: scale(.93); }

html body .sso-card .sso-card__fav[data-sso-fav] {
	grid-area: 1 / 1;
	align-self: start;
	justify-self: end;
	position: relative;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin: 6px 6px 0 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: rgba(255, 255, 255, .9);
	background-color: rgba(5, 8, 20, .42);
	transition: color .3s ease, background-color .3s ease, transform .2s ease;
}
html body .sso-card__fav .sso-i { width: 19px; height: 19px; }
html body .sso-card__fav .sso-i--heart-fill,
html body .sso-card__fav[aria-pressed="true"] .sso-i--heart { display: none; }
html body .sso-card__fav[aria-pressed="true"] .sso-i--heart-fill { display: block; }
html body .sso-card .sso-card__fav[data-sso-fav][aria-pressed="true"] { color: var(--e-global-color-ssoheart, #E5566B); }
html body .sso-card .sso-card__fav[data-sso-fav]:active { transform: scale(.9); }

/* One soft bloom when a sound becomes a favourite (runs once, one direction). */
@keyframes sso-heart-in {
	from { transform: scale(.55); opacity: .4; }
	to { transform: scale(1); opacity: 1; }
}
html body .is-new-fav .sso-i--heart-fill { animation: sso-heart-in .45s var(--sso-ease, ease) backwards; }

/* ---------- Now playing: a gold edge, no constant motion ---------- */

html body .sso-card.is-current { border-color: var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35)); }
html body .sso-card.is-playing {
	border-color: color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 70%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 22%, transparent),
		0 22px 50px -26px color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 50%, transparent);
}

/* ---------- Hover (pointer devices) and press (touch) ---------- */

@media (hover: hover) {
	html body .sso-card:hover {
		transform: translateY(-4px);
		border-color: var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
		box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .85);
	}
	html body .sso-card.is-playing:hover {
		border-color: color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 80%, transparent);
	}
	html body .sso-card:hover .sso-card__img { transform: scale(1.045); }
	html body .sso-card:hover .sso-card__play[data-sso-play] {
		color: var(--e-global-color-primary, #E9C87E);
		border-color: var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
		background-color: rgba(5, 8, 20, .78);
	}
	html body .sso-card.is-playing:hover .sso-card__play[data-sso-play] { color: var(--e-global-color-ssoink, #241A05); }
	html body .sso-card .sso-card__play[data-sso-play]:hover { transform: scale(1.06); }
	html body .sso-card .sso-card__fav[data-sso-fav]:hover { background-color: rgba(5, 8, 20, .7); }
	html body .sso-card .sso-card__fav[data-sso-fav][aria-pressed="false"]:hover { color: #FFFFFF; }
}
/* is-pressed is set by library.js for touch, where :active is late or missing on some phones. */
html body .sso-card:has(.sso-card__link:active),
html body .sso-card.is-pressed {
	transform: scale(.985);
	transition-duration: .15s;
}

/* ---------- Arriving and leaving (search results, favourites) ---------- */

@keyframes sso-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}
html body .sso-card.is-entering {
	animation: sso-rise .55s var(--sso-ease, ease) backwards;
	animation-delay: calc(var(--sso-i, 0) * 45ms);
}
html body .sso-card.is-leaving {
	opacity: 0;
	transform: scale(.96);
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	html body .sso-card.is-entering { animation: none; }
}

/* ---------- Narrow cards (two columns on a phone, or a dense Loop Grid) ---------- */

@container sso-card (max-width: 210px) {
	html body .sso-card__body { padding: 2px 12px 15px; gap: 4px; }
	html body .sso-card__title { font-size: 17px; }
	html body .sso-card__desc { font-size: 13px; line-height: 1.45; }
	html body .sso-card__chip { font-size: 9.5px; letter-spacing: .13em; gap: 6px; }
	html body .sso-card__dot { width: 6px; height: 6px; }
	html body .sso-card__badges { top: 9px; left: 9px; right: 50px; gap: 4px; }
	html body .sso-badge { padding: 4px 8px; font-size: 9px; letter-spacing: .1em; gap: 5px; }
	html body .sso-card .sso-now { left: 9px; bottom: 11px; font-size: 9.5px; padding: 4px 9px 4px 7px; gap: 6px; }
	html body .sso-card .sso-card__play[data-sso-play] { width: 44px; height: 44px; margin: 0 8px 8px 0; }
	html body .sso-card__play .sso-i { width: 16px; height: 16px; }
	html body .sso-card .sso-card__fav[data-sso-fav] { margin: 2px 2px 0 0; background-color: transparent; }
	html body .sso-card__fav .sso-i { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
}

/* Three similar sounds sit in one side-scrolling row on phones, with the next card peeking in.
   Set by the screen width, not the space given, so the row never changes shape while Elementor is
   still measuring the column it sits in. */
@media (max-width: 767px) {
	html body .sso-grid--3 {
		display: flex;
		gap: 12px;
		margin: 0 -16px; /* runs to the screen edges, so the next card peeks in from the side */
		padding: 6px 16px 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 16px;
		scrollbar-width: none;
	}
	html body .sso-grid--3::-webkit-scrollbar { display: none; }
	html body .sso-grid--3 > .sso-card { flex: 0 0 min(74%, 340px); scroll-snap-align: start; }
}

/* library.css */
/* The library around the cards: category navigation, instant search with "Surprise me", the
   friendly no-results panel, Recently played and the quiet "Continue with ..." line. */

/* ---------- Shared ---------- */

html body .sso-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

html body :is(.sso-cats, .sso-search, .sso-recent, [data-sso-continue]) .sso-i {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: currentColor;
}

html body :is(.sso-search__results, .sso-search__count, .sso-search__clear, .sso-noresults, .sso-recent, [data-sso-continue])[hidden],
html body .sso-search-hidden {
	display: none !important;
}

/* This module's own section labels ("Recently played", "Similar sounds"), matching the Elementor
   labels in layout.css. Elementor puts the same class on a heading widget's wrapper, so only the
   h2 printed here is styled. */
html body h2.sso-section-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--e-global-color-ssomuted, #9AA4BB);
}
html body h2.sso-section-label::before {
	content: "";
	width: 22px;
	height: 2px;
	flex: none;
	border-radius: 2px;
	background-color: var(--e-global-color-primary, #E9C87E);
	opacity: .8;
}

html body .sso-library__empty {
	margin: 0;
	padding: 40px 24px;
	text-align: center;
	color: var(--e-global-color-ssomuted, #9AA4BB);
}

/* ---------- Category navigation ---------- */

html body .sso-cats {
	position: relative;
	background-color: rgba(13, 20, 46, .92);
	background-color: color-mix(in srgb, var(--e-global-color-secondary, #0D142E) 92%, transparent);
	border: 1px solid var(--e-global-color-ssoline, rgba(255, 255, 255, .08));
	border-radius: 20px;
	box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .8);
}
html body .sso-cats__scroller {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: inherit;
	-webkit-overflow-scrolling: touch;
}
html body .sso-cats__scroller::-webkit-scrollbar { display: none; }

/* Soft fades at an edge only while more categories hide that way (set by library.js). */
html body .sso-cats.is-more-right .sso-cats__scroller {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
html body .sso-cats.is-more-left .sso-cats__scroller {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 56px);
	mask-image: linear-gradient(90deg, transparent, #000 56px);
}
html body .sso-cats.is-more-left.is-more-right .sso-cats__scroller {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

html body .sso-cats__list {
	display: flex;
	gap: 4px;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 10px 12px;
	list-style: none;
}
html body .sso-cats__li {
	flex: 1 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
html body .sso-cats .sso-cats__item,
html body .sso-cats .sso-cats__item:is(:hover, :focus, :active, :visited) {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 78px;
	min-height: 66px;
	padding: 10px 12px 12px;
	border-radius: 13px;
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	transition: color .25s ease, background-color .25s ease;
}
html body .sso-cats .sso-cats__icon {
	width: 22px;
	height: 22px;
	color: var(--sso-cat, currentColor);
	opacity: .85;
	transition: opacity .25s ease, transform .35s var(--sso-ease, ease);
}
html body .sso-cats .sso-cats__item[aria-current] {
	color: var(--e-global-color-text, #EEF1F8);
	background-color: rgba(255, 255, 255, .035);
}
html body .sso-cats .sso-cats__item[aria-current] .sso-cats__icon { opacity: 1; }
html body .sso-cats .sso-cats__item[aria-current]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 26px;
	height: 2px;
	margin-left: -13px;
	border-radius: 2px;
	background-color: var(--e-global-color-primary, #E9C87E);
}
@media (hover: hover) {
	html body .sso-cats .sso-cats__item:hover { color: var(--e-global-color-text, #EEF1F8); background-color: rgba(255, 255, 255, .03); }
	html body .sso-cats .sso-cats__item:hover .sso-cats__icon { opacity: 1; transform: translateY(-1px); }
}
html body .sso-cats .sso-cats__item:active { background-color: rgba(255, 255, 255, .06); }

@media (max-width: 767px) {
	html body .sso-cats { border-radius: 16px; }
	html body .sso-cats__list { padding: 6px 8px; gap: 2px; }
	html body .sso-cats .sso-cats__item,
	html body .sso-cats .sso-cats__item:is(:hover, :focus, :active, :visited) { min-width: 72px; min-height: 62px; font-size: 12.5px; gap: 7px; padding: 9px 10px 11px; }
	html body .sso-cats .sso-cats__icon { width: 20px; height: 20px; }
}

/* ---------- Search ---------- */

html body .sso-search { width: 100%; }
html body .sso-search__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
html body .sso-search__bar {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 320px;
	max-width: 560px;
	margin: 0;
}
html body .sso-search__icon {
	position: absolute;
	left: 19px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	pointer-events: none;
	fill: none;
	stroke: currentColor;
	transition: color .25s ease;
}
html body .sso-search .sso-search__input[type="search"] {
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 50px 0 50px;
	border-radius: 999px;
	border: 1px solid var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
	background-color: var(--e-global-color-secondary, #0D142E);
	color: var(--e-global-color-text, #EEF1F8);
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .25s ease, background-color .25s ease;
}
html body .sso-search .sso-search__input[type="search"]::-webkit-search-cancel-button,
html body .sso-search .sso-search__input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
html body .sso-search .sso-search__input[type="search"]::placeholder { color: var(--e-global-color-ssofaint, #7D8699); opacity: 1; }
@media (hover: hover) {
	html body .sso-search .sso-search__input[type="search"]:hover { border-color: rgba(255, 255, 255, .22); }
}
html body .sso-search .sso-search__input[type="search"]:focus {
	border-color: var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
	background-color: var(--e-global-color-ssopanel2, #111936);
}
html body .sso-search__bar:focus-within .sso-search__icon { color: var(--e-global-color-primary, #E9C87E); }

html body .sso-search .sso-search__clear[type] {
	position: absolute;
	right: 4px;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	transition: color .2s ease, background-color .2s ease;
}
html body .sso-search .sso-search__clear .sso-i { width: 16px; height: 16px; fill: none; stroke: currentColor; }
@media (hover: hover) {
	html body .sso-search .sso-search__clear[type]:hover { color: var(--e-global-color-text, #EEF1F8); background-color: rgba(255, 255, 255, .05); }
}

html body .sso-search .sso-surprise[data-sso-play] {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 22px 0 18px;
	border-radius: 999px;
	border: 1px solid var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
	color: var(--e-global-color-primary, #E9C87E);
	background-color: transparent;
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease, opacity .5s ease;
}
/* "Surprise me" needs the scripts. Its space is kept until they start, so nothing moves when it appears. */
html:not(.sso-js) body .sso-search .sso-surprise[data-sso-play] { visibility: hidden; opacity: 0; }
html body .sso-search .sso-surprise .sso-i { width: 20px; height: 20px; fill: none; stroke: currentColor; }
@media (hover: hover) {
	html body .sso-search .sso-surprise[data-sso-play]:hover {
		color: var(--e-global-color-accent, #F4DFAE);
		border-color: color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 60%, transparent);
		background-color: rgba(233, 200, 126, .07);
	}
}
html body .sso-search .sso-surprise[data-sso-play]:active { transform: scale(.97); }

/* On phones the search takes the full width and "Surprise me" sits under it at the same width. */
@media (max-width: 559px) {
	html body .sso-search__row { gap: 10px; }
	html body .sso-search__bar { flex-basis: 100%; max-width: none; }
	html body .sso-search .sso-surprise[data-sso-play] { flex: 1 1 100%; justify-content: center; height: 48px; }
}

/* Results take the library's place while there is a query. search.js moves them next to the
   library, where they become an item of Elementor's column: the full width keeps the column from
   measuring them at zero width on phones (a size container has no content width of its own). */
html body .sso-search__results {
	width: 100%;
	margin-top: 26px;
	animation: sso-fade-in .35s ease backwards;
}
@keyframes sso-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
html body .sso-search__count {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	overflow-wrap: anywhere;
}

html body .sso-noresults {
	padding: 44px 24px 46px;
	text-align: center;
	background-color: var(--e-global-color-secondary, #0D142E);
	background-image: radial-gradient(120% 90% at 50% 0%, rgba(233, 200, 126, .06), transparent 60%);
	border: 1px solid var(--e-global-color-ssoline, rgba(255, 255, 255, .08));
	border-radius: var(--sso-radius, 16px);
	animation: sso-rise .5s var(--sso-ease, ease) backwards;
}
html body .sso-noresults__title {
	margin: 0 0 10px;
	font-family: var(--e-global-typography-primary-font-family, "Playfair Display"), Georgia, serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--e-global-color-text, #EEF1F8);
	text-wrap: balance;
}
html body .sso-noresults__text {
	max-width: 440px;
	margin: 0 auto 22px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	overflow-wrap: anywhere;
}
html body .sso-noresults__term { color: var(--e-global-color-text, #EEF1F8); }
html body .sso-noresults .sso-noresults__link,
html body .sso-noresults .sso-noresults__link:is(:hover, :focus, :visited) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	border: 1px solid var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
	color: var(--e-global-color-primary, #E9C87E);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover: hover) {
	html body .sso-noresults .sso-noresults__link:hover {
		color: var(--e-global-color-accent, #F4DFAE);
		border-color: color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 60%, transparent);
		background-color: rgba(233, 200, 126, .07);
	}
}

/* ---------- Recently played ---------- */

html body .sso-recent__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}
/* The negative margin lines the word up with the content edge; the padding keeps a 44px target. */
html body .sso-recent .sso-recent__clear[type] {
	margin-left: auto;
	margin-right: -12px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	transition: color .2s ease, background-color .2s ease;
}
@media (hover: hover) {
	html body .sso-recent .sso-recent__clear[type]:hover { color: var(--e-global-color-text, #EEF1F8); background-color: rgba(255, 255, 255, .04); }
}

html body .sso-recent__row { position: relative; }
html body .sso-recent__scroller {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
html body .sso-recent__scroller::-webkit-scrollbar { display: none; }
html body .sso-recent__row.is-more-right .sso-recent__scroller {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent);
}
html body .sso-recent__row.is-more-left .sso-recent__scroller {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 64px);
	mask-image: linear-gradient(90deg, transparent, #000 64px);
}
html body .sso-recent__row.is-more-left.is-more-right .sso-recent__scroller {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}
html body .sso-recent__list {
	display: flex;
	gap: 10px;
	width: max-content;
	margin: 0;
	padding: 3px 2px 6px;
	list-style: none;
}
html body .sso-recent__item { margin: 0; padding: 0; list-style: none; scroll-snap-align: start; }
html body .sso-recent .sso-recent__chip[data-sso-play] {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 62px;
	padding: 8px 16px 8px 8px;
	border-radius: 14px;
	border: 1px solid var(--e-global-color-ssoline, rgba(255, 255, 255, .08));
	background-color: var(--e-global-color-secondary, #0D142E);
	color: var(--e-global-color-text, #EEF1F8);
	text-align: left;
	white-space: nowrap;
	transition: border-color .3s ease, background-color .3s ease, transform .2s ease;
}
html body .sso-recent__img {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 10px;
	object-fit: cover;
	filter: brightness(var(--sso-dim-media, 1));
	transition: opacity .6s ease, filter .6s ease;
}
html body .sso-recent__img.is-pending { opacity: 0; }
html body .sso-recent__text { display: flex; flex-direction: column; gap: 1px; }
html body .sso-recent__name {
	font-family: var(--e-global-typography-primary-font-family, "Playfair Display"), Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
}
html body .sso-recent__cat { font-size: 12px; line-height: 1.3; color: var(--e-global-color-ssomuted, #9AA4BB); }
html body .sso-recent .sso-recent__glyph {
	width: 13px;
	height: 13px;
	margin-left: 6px;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	transition: color .25s ease;
}
html body .sso-recent .sso-recent__chip.is-playing[data-sso-play] {
	border-color: color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 60%, transparent);
}
html body .sso-recent .sso-recent__chip.is-playing .sso-recent__glyph { color: var(--e-global-color-primary, #E9C87E); }
@media (hover: hover) {
	html body .sso-recent .sso-recent__chip[data-sso-play]:hover {
		border-color: var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
		background-color: var(--e-global-color-ssopanel2, #111936);
	}
	html body .sso-recent .sso-recent__chip[data-sso-play]:hover .sso-recent__glyph { color: var(--e-global-color-primary, #E9C87E); }
}
html body .sso-recent .sso-recent__chip[data-sso-play]:active { transform: scale(.97); }

/* Arrows only for mouse users, and only while the row hides chips that way. */
html body .sso-recent .sso-recent__arrow[type] {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 38px;
	height: 38px;
	margin-top: -22px;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
	background-color: var(--e-global-color-ssopanel2, #111936);
	color: var(--e-global-color-ssomuted, #9AA4BB);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8);
	transition: color .2s ease, border-color .2s ease;
}
html body .sso-recent .sso-recent__arrow .sso-i { width: 15px; height: 15px; fill: none; stroke: currentColor; }
html body .sso-recent .sso-recent__arrow--prev[type] { left: -12px; }
html body .sso-recent .sso-recent__arrow--prev .sso-i { transform: rotate(90deg); }
html body .sso-recent .sso-recent__arrow--next[type] { right: -12px; }
html body .sso-recent .sso-recent__arrow--next .sso-i { transform: rotate(-90deg); }
@media (hover: hover) {
	html body .sso-recent__row.is-more-left .sso-recent__arrow--prev[type],
	html body .sso-recent__row.is-more-right .sso-recent__arrow--next[type] { display: inline-flex; }
	html body .sso-recent .sso-recent__arrow[type]:hover { color: var(--e-global-color-text, #EEF1F8); border-color: var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35)); }
}

/* ---------- Continue with ... ---------- */

html body [data-sso-continue] .sso-continue[data-sso-play] {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 44px;
	padding: 4px 16px 4px 4px;
	border-radius: 999px;
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	animation: sso-rise .6s var(--sso-ease, ease) backwards;
	transition: color .25s ease, background-color .25s ease;
}
html body [data-sso-continue] .sso-continue strong { font-weight: 600; color: var(--e-global-color-text, #EEF1F8); }
html body [data-sso-continue] .sso-continue__mark {
	width: 34px;
	height: 34px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
	color: var(--e-global-color-primary, #E9C87E);
	transition: background-color .25s ease, border-color .25s ease;
}
html body [data-sso-continue] .sso-continue__mark .sso-i { width: 13px; height: 13px; margin-left: 2px; }
@media (hover: hover) {
	html body [data-sso-continue] .sso-continue[data-sso-play]:hover { color: var(--e-global-color-text, #EEF1F8); background-color: rgba(255, 255, 255, .04); }
	html body [data-sso-continue] .sso-continue[data-sso-play]:hover .sso-continue__mark { border-color: color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 60%, transparent); background-color: rgba(233, 200, 126, .08); }
}
html body [data-sso-continue] .sso-continue[data-sso-play]:active { background-color: rgba(255, 255, 255, .06); }

/* pages.css */
/* Sound page parts ([sso_breadcrumbs], [sso_sound_hero], [sso_related]), the Favourites page and
   the reserved advertising space. */

/* ---------- Breadcrumbs ---------- */

/* Each link is a full 44px tall; the negative top margin keeps the words where they were. */
html body .sso-crumbs { margin: -6px 0 20px; }
html body .sso-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--e-global-color-ssomuted, #9AA4BB);
}
html body .sso-crumbs__item { display: inline-flex; align-items: center; margin: 0; padding: 0; }
/* A small chevron drawn in CSS, so screen readers hear only the names. */
html body .sso-crumbs__item + .sso-crumbs__item::before {
	content: "";
	width: 6px;
	height: 6px;
	margin: 0 12px 0 9px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .55;
}
/* Small links, full-size touch targets: each link box is 44px tall and at least 44px wide, with
   the word centred, so the look stays quiet. */
html body .sso-crumbs a,
html body .sso-crumbs a:is(:hover, :focus, :visited) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--e-global-color-ssomuted, #9AA4BB);
	text-decoration: none;
	transition: color .2s ease;
}
@media (hover: hover) {
	html body .sso-crumbs a:hover { color: var(--e-global-color-text, #EEF1F8); }
}
html body .sso-crumbs [aria-current="page"] { color: var(--e-global-color-text, #EEF1F8); }

/* ---------- Sound page hero ---------- */

html body .sso-sound-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: center;
}
@media (min-width: 700px) {
	html body .sso-sound-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
	}
}
@media (min-width: 1000px) {
	html body .sso-sound-hero {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 56px;
	}
}

html body .sso-sound-hero__media {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: calc(var(--sso-radius, 16px) + 4px);
	border: 1px solid var(--e-global-color-ssoline, rgba(255, 255, 255, .08));
	background-color: var(--e-global-color-ssobg2, #0A1128);
	box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9);
	transition: border-color .6s ease, box-shadow .8s ease;
}
html body .sso-sound-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	filter: brightness(var(--sso-dim-media, 1));
	transition: filter .6s ease;
}
html body .sso-sound-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(5, 8, 20, .5) 0%, rgba(5, 8, 20, 0) 34%);
}
html body .sso-sound-hero__badges {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	gap: 6px;
}
html body .sso-sound-hero .sso-now { left: 16px; bottom: 16px; }
html body .sso-sound-hero.is-playing .sso-sound-hero__media {
	border-color: color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 60%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 18%, transparent),
		0 50px 90px -50px color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 40%, transparent);
}

html body .sso-sound-hero__body { min-width: 0; }

/* A 36px pill inside a 44px touch target: the outer 4px is a clear border (the background stops
   inside it, the thin edge is an inset shadow), and the negative margin keeps the pill in place. */
html body .sso-sound-hero .sso-chip,
html body .sso-sound-hero .sso-chip:is(:hover, :focus, :visited) {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: -4px;
	padding: 0 15px 0 12px;
	border-radius: 999px;
	border: 4px solid transparent;
	background-color: rgba(255, 255, 255, .03);
	background-clip: padding-box;
	box-shadow: inset 0 0 0 1px var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
	color: var(--e-global-color-text, #EEF1F8);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: box-shadow .25s ease, background-color .25s ease;
}
html body .sso-sound-hero .sso-chip__icon { width: 16px; height: 16px; color: var(--sso-cat, currentColor); }
@media (hover: hover) {
	html body .sso-sound-hero .sso-chip:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); background-color: rgba(255, 255, 255, .06); }
}

html body .sso-sound-hero__title {
	margin: 18px 0 12px;
	padding: 0;
	font-family: var(--e-global-typography-primary-font-family, "Playfair Display"), Georgia, "Times New Roman", serif;
	font-size: clamp(36px, 4.6vw, 56px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.005em;
	color: var(--e-global-color-text, #EEF1F8);
	overflow-wrap: break-word;
}
html body .sso-sound-hero__lead {
	margin: 0;
	max-width: 30em;
	font-size: 18px;
	line-height: 1.6;
	color: var(--e-global-color-ssomuted, #9AA4BB);
}

html body .sso-sound-hero__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 30px 0 0;
}

/* The large play button: the kit's gold, a little larger, with a calm glow while playing. */
html body .sso-sound-hero .sso-play-big[data-sso-play] {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 62px;
	padding: 0 32px 0 10px;
	border-radius: 999px;
	color: var(--e-global-color-ssoink, #241A05);
	background-color: var(--e-global-color-primary, #E9C87E);
	background-image: linear-gradient(180deg, var(--e-global-color-accent, #F4DFAE), var(--e-global-color-primary, #E9C87E));
	box-shadow: 0 10px 34px -6px rgba(233, 200, 126, .32);
	box-shadow: 0 10px 34px -6px color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 40%, transparent);
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: none;
	transition: transform .25s var(--sso-ease, ease), box-shadow .3s ease, filter .3s ease;
}
html body .sso-play-big__icon {
	width: 44px;
	height: 44px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(36, 26, 5, .1);
}
html body .sso-sound-hero .sso-play-big__icon .sso-i { width: 18px; height: 18px; }
html body .sso-play-big__icon .sso-i--play { margin-left: 3px; }
html body .sso-play-big__icon .sso-i--pause,
html body .sso-play-big__pause,
html body .sso-sound-hero.is-playing .sso-play-big__icon .sso-i--play,
html body .sso-sound-hero.is-playing .sso-play-big__play { display: none; }
html body .sso-sound-hero.is-playing .sso-play-big__icon .sso-i--pause { display: block; }
html body .sso-sound-hero.is-playing .sso-play-big__pause { display: inline; }
html body .sso-sound-hero.is-loading .sso-play-big__icon .sso-i { opacity: .55; }
@media (hover: hover) {
	html body .sso-sound-hero .sso-play-big[data-sso-play]:hover {
		transform: translateY(-2px);
		box-shadow: 0 16px 44px -8px color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 50%, transparent);
	}
}
html body .sso-sound-hero .sso-play-big[data-sso-play]:active { transform: scale(.97); }

html body .sso-sound-hero .sso-round-btn[type] {
	width: 52px;
	height: 52px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--e-global-color-ssoline2, rgba(255, 255, 255, .14));
	color: var(--e-global-color-ssomuted, #9AA4BB);
	background-color: transparent;
	transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .2s ease;
}
html body .sso-sound-hero .sso-round-btn .sso-i { width: 20px; height: 20px; }
html body .sso-sound-hero .sso-round-btn .sso-i--heart-fill,
html body .sso-sound-hero .sso-round-btn[aria-pressed="true"] .sso-i--heart { display: none; }
html body .sso-sound-hero .sso-round-btn[aria-pressed="true"] .sso-i--heart-fill { display: block; }
html body .sso-sound-hero .sso-round-btn--fav[aria-pressed="true"] {
	color: var(--e-global-color-ssoheart, #E5566B);
	border-color: rgba(229, 86, 107, .4);
}
@media (hover: hover) {
	html body .sso-sound-hero .sso-round-btn[type]:hover {
		color: var(--e-global-color-text, #EEF1F8);
		border-color: rgba(255, 255, 255, .26);
		background-color: var(--e-global-color-ssopanel2, #111936);
	}
	html body .sso-sound-hero .sso-round-btn--fav[aria-pressed="true"]:hover { color: var(--e-global-color-ssoheart, #E5566B); }
}
html body .sso-sound-hero .sso-round-btn[type]:active { transform: scale(.94); }


@media (max-width: 999px) {
	html body .sso-sound-hero__lead { font-size: 17px; }
	html body .sso-sound-hero__actions { margin-top: 24px; }
}
@media (max-width: 699px) {
	html body .sso-sound-hero .sso-play-big[data-sso-play] { flex: 1 1 auto; justify-content: center; padding-left: 10px; padding-right: 26px; height: 58px; }
}

/* ---------- Similar sounds ---------- */

html body .sso-related { margin-top: 8px; }
html body .sso-related .sso-section-label { margin-bottom: 20px; }

/* ---------- Favourites page ---------- */

html body .sso-favs { position: relative; }
html body .sso-favs:focus { outline: none; }
html body .sso-favs__empty {
	max-width: 560px;
	margin: 8px auto 0;
	padding: 52px 28px 50px;
	text-align: center;
	background-color: var(--e-global-color-secondary, #0D142E);
	background-image: radial-gradient(110% 80% at 50% 0%, rgba(229, 86, 107, .07), transparent 62%);
	border: 1px solid var(--e-global-color-ssoline, rgba(255, 255, 255, .08));
	border-radius: calc(var(--sso-radius, 16px) + 4px);
	animation: sso-rise .55s var(--sso-ease, ease) backwards;
}
html body .sso-favs__empty[hidden] { display: none; }
html body .sso-favs__icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(229, 86, 107, .3);
	color: var(--e-global-color-ssoheart, #E5566B);
}
html body .sso-favs__icon .sso-i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
html body .sso-favs__title {
	margin: 0 0 10px;
	font-family: var(--e-global-typography-primary-font-family, "Playfair Display"), Georgia, serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--e-global-color-text, #EEF1F8);
}
html body .sso-favs__text {
	max-width: 400px;
	margin: 0 auto 24px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--e-global-color-ssomuted, #9AA4BB);
}
/* The line under the title only appears when the list could not load; keep the same space without it. */
html body .sso-favs__text[hidden] + .sso-favs__link { margin-top: 14px; }
html body .sso-favs .sso-favs__link,
html body .sso-favs .sso-favs__link:is(:hover, :focus, :visited) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border-radius: 999px;
	border: 1px solid var(--e-global-color-ssogolddim, rgba(233, 200, 126, .35));
	color: var(--e-global-color-primary, #E9C87E);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover: hover) {
	html body .sso-favs .sso-favs__link:hover {
		color: var(--e-global-color-accent, #F4DFAE);
		background-color: rgba(233, 200, 126, .07);
		border-color: color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 60%, transparent);
	}
}

/* ---------- Advertising space (only printed when ads are switched on) ---------- */

html body .sso-ad {
	max-width: 970px;
	margin: 56px auto;
	text-align: center;
}
html body .sso-ad__label {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--e-global-color-ssofaint, #7D8699);
}
html body .sso-ad__space {
	min-height: var(--sso-ad-h, 280px);
	overflow: hidden;
}
@media (max-width: 767px) {
	html body .sso-ad { margin: 44px auto; }
	html body .sso-ad__space { min-height: min(var(--sso-ad-h, 280px), 280px); }
}

/* ---------- Full screen (fullview.js) ---------- */

/* The corner button, as on video players: corners pointing out to go full screen, in to come
   back. It is glassy and calm at rest, and on hover the corners spread (or close) a little. */
html body .sso-sound-hero__media .sso-fullview[type] {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	width: 44px;
	height: 44px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	background: rgba(5, 8, 20, .5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .8);
	cursor: pointer;
	transition: transform .2s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .5s ease;
}
html body .sso-fullview svg { width: 22px; height: 22px; overflow: visible; }
html body .sso-fullview path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .25s var(--sso-ease, ease);
}
html body .sso-fullview__leave,
html body .is-full .sso-fullview__enter { display: none; }
html body .is-full .sso-fullview__leave { display: block; }
@media (hover: hover) {
	html body .sso-sound-hero__media .sso-fullview[type]:hover {
		transform: scale(1.08);
		background: rgba(5, 8, 20, .72);
		border-color: color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 70%, transparent);
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--e-global-color-primary, #E9C87E) 18%, transparent), 0 10px 26px -10px rgba(0, 0, 0, .9);
	}
	html body .sso-fullview:hover .sso-fullview__enter .sso-fullview__c1,
	html body .sso-fullview:hover .sso-fullview__leave .sso-fullview__c3 { transform: translate(-1.6px, -1.6px); }
	html body .sso-fullview:hover .sso-fullview__enter .sso-fullview__c2,
	html body .sso-fullview:hover .sso-fullview__leave .sso-fullview__c4 { transform: translate(1.6px, -1.6px); }
	html body .sso-fullview:hover .sso-fullview__enter .sso-fullview__c3,
	html body .sso-fullview:hover .sso-fullview__leave .sso-fullview__c1 { transform: translate(1.6px, 1.6px); }
	html body .sso-fullview:hover .sso-fullview__enter .sso-fullview__c4,
	html body .sso-fullview:hover .sso-fullview__leave .sso-fullview__c2 { transform: translate(-1.6px, 1.6px); }
}
html body .sso-sound-hero__media .sso-fullview[type]:active { transform: scale(.92); }

/* In full screen: the picture fills the screen; a play button sits at the bottom left. */
html body .sso-sound-hero__media .sso-fullview-play[type] { display: none; }
html body .sso-sound-hero__media.is-full {
	border: 0;
	border-radius: 0;
	background-color: #000;
	box-shadow: none;
}
html body .sso-sound-hero__media.is-full::after { background: linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%); }
html body .sso-sound-hero__media.is-full .sso-sound-hero__badges,
html body .sso-sound-hero__media.is-full .sso-now { display: none; }
html body .sso-sound-hero__media.is-full .sso-fullview[type] { right: 22px; bottom: 22px; width: 52px; height: 52px; }
html body .sso-sound-hero__media.is-full .sso-fullview-play[type] {
	position: absolute;
	left: 22px;
	bottom: 22px;
	z-index: 3;
	width: 52px;
	height: 52px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--e-global-color-accent, #F4DFAE), var(--e-global-color-primary, #E9C87E));
	color: var(--e-global-color-ssoink, #241A05);
	box-shadow: 0 10px 28px -10px rgba(233, 200, 126, .7);
	cursor: pointer;
	transition: transform .2s ease, opacity .5s ease;
}
html body .sso-fullview-play .sso-i { width: 20px; height: 20px; }
html body .sso-fullview-play .sso-i--play { margin-left: 3px; }
html body .sso-fullview-play .sso-i--pause,
html body .sso-sound-hero.is-playing .sso-fullview-play .sso-i--play { display: none; }
html body .sso-sound-hero.is-playing .sso-fullview-play .sso-i--pause { display: block; }
@media (hover: hover) {
	html body .sso-sound-hero__media.is-full .sso-fullview-play[type]:hover { transform: scale(1.08); }
}
html body .sso-sound-hero__media.is-full .sso-fullview-play[type]:active { transform: scale(.92); }

/* After a few still seconds the buttons and the pointer step out of the way. */
html body .sso-sound-hero__media.is-full.is-idle { cursor: none; }
html body .sso-sound-hero__media.is-full.is-idle .sso-fullview[type],
html body .sso-sound-hero__media.is-full.is-idle .sso-fullview-play[type] { opacity: 0; pointer-events: none; }
html body .sso-sound-hero__media.is-full.is-idle::after { opacity: 0; transition: opacity .8s ease; }

/* Where the browser cannot go full screen (iPhone), the picture fills the window instead. */
html body .sso-sound-hero__media.is-fullview {
	position: fixed;
	inset: 0;
	z-index: 90;
	width: auto;
	height: auto;
	aspect-ratio: auto;
}
html.sso-fullview-open,
html.sso-fullview-open body { overflow: hidden; }
html body .sso-sound-hero__media.is-fullview .sso-fullview[type] { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
html body .sso-sound-hero__media.is-fullview .sso-fullview-play[type] { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
html body .sso-sound-hero__media::backdrop { background-color: #000; }

/* waves.css */
/* Moving pictures (waves.js): while a noise plays, its picture moves with the sound. */
html body .sso-waves {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.1s ease, filter .6s ease, transform 1.2s var(--sso-ease, ease);
}
html body .sso-live > .sso-waves { opacity: 1; }

/* A noise picture shows at once and leaves at once: at those moments it is exactly the still
   picture (the bend grows in after it appears and settles before it goes), so nothing doubles. */
html body .sso-live--art > .sso-waves { transition: filter .6s ease, transform 1.2s var(--sso-ease, ease); }

/* A living photo: the same picture with gentle motion, faded in once it is actually playing. */
html body .sso-living {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.1s ease, filter .6s ease, transform 1.2s var(--sso-ease, ease);
}
html body .sso-living-on > .sso-living { opacity: 1; }

/* Lightning glow (waves.js): laid over the picture, lightening it ("screen"), its strength set
   every frame from the sound's position so the flash and the thunder stay together. */
html body .sso-flash {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: 0;
	will-change: opacity;
	transition: filter .6s ease, transform 1.2s var(--sso-ease, ease);
}

/* Card pictures zoom slightly on hover (cards.css); the moving picture zooms with them. */
html body .sso-card__media > .sso-waves,
html body .sso-card__media > .sso-living,
html body .sso-card__media > .sso-flash { transform: scale(1.001); }
@media (hover: hover) {
	html body .sso-card:hover .sso-card__media > .sso-waves,
	html body .sso-card:hover .sso-card__media > .sso-living,
	html body .sso-card:hover .sso-card__media > .sso-flash { transform: scale(1.045); }
}

/* Extra dark: the moving pictures dim like every other picture on the site. */
html[data-brightness="extra"] body .sso-waves,
html[data-brightness="extra"] body .sso-living,
html[data-brightness="extra"] body .sso-flash { filter: brightness(var(--sso-dim-media, .68)); }

@media (prefers-reduced-motion: reduce) {
	html body .sso-waves,
	html body .sso-living,
	html body .sso-flash { display: none; }
}