/* ZVOOKO Calm UI — one monochrome system with a single violet accent. */
:root {
	--calm-bg: #0f0f11;
	--calm-accent: #f4f4f5;
	--calm-accent-rgb: 244,244,245;
	--calm-surface: #141416;
	--calm-surface-2: #19191c;
	--calm-surface-3: #202024;
	--calm-line: rgba(255,255,255,.08);
	--calm-line-strong: rgba(255,255,255,.14);
	--calm-text: #f4f4f5;
	--calm-muted: rgba(244,244,245,.54);
	--calm-radius: 18px;
	--calm-radius-sm: 12px;
	--calm-gap: 2rem;
	--accent: #d8d8da;
	--accent-fade: rgba(255,255,255,.12);
}

.dt {
	--gradient: linear-gradient(120deg,#303034,#171719);
	--ui-bg-inp: #202024;
	--ui-bg: #202024;
	--ui-bg-darker: #18181b;
	--ui-bg-darkest: #111113;
	--ui-accent: #f4f4f5;
	--ui-bdc-inp-focus: #f4f4f5;
}

/* Rhythm and hierarchy */
.home-hero,
.taste-section,
.moment-section,
.vibe-panel,
.smart-listen,
[data-home-block].sect {
	margin-top: 0 !important;
	margin-bottom: var(--calm-gap) !important;
}

.home-hero,
.taste-section,
.moment-section,
.vibe-panel,
.smart-card {
	border: 1px solid var(--calm-line) !important;
	border-radius: var(--calm-radius) !important;
	background: var(--calm-surface) !important;
	box-shadow: 0 10px 30px rgba(0,0,0,.14) !important;
	color: var(--calm-text);
}

.home-hero::before,
.home-hero::after,
.taste-section::before,
.moment-section::before,
.vibe-panel::before,
.smart-card::before,
.sidebar-live::before,
.vibe-mood::after,
.moment-choice::before {
	display: none !important;
}

.taste-section,
.moment-section,
.vibe-panel {padding: 1.5rem !important;}

.taste-section h2,
.moment-section h2,
.vibe-panel h2,
.smart-card h2 {
	color: var(--calm-text) !important;
	font-size: clamp(1.625rem,2.25vw,2rem) !important;
	font-weight: 750 !important;
	line-height: 1.08 !important;
	letter-spacing: -.035em !important;
}

.vibe-panel h2 em,
.moment-section h2 em {
	display: inline !important;
	color: inherit !important;
	background: none !important;
	-webkit-text-fill-color: currentColor !important;
}

.taste-section__eyebrow,
.vibe-panel__eyebrow,
.moment-kicker,
.smart-card__eyebrow,
.vibe-mix__eyebrow {
	color: var(--calm-muted) !important;
	font-size: .625rem !important;
	letter-spacing: .14em !important;
}

.taste-section__eyebrow i,
.vibe-panel__eyebrow span,
.moment-kicker i,
.smart-card__eyebrow i {
	background: var(--calm-accent) !important;
	box-shadow: none !important;
	animation: none !important;
}

.taste-kicker i,
.taste-dialog__brand i,
.smart-card__eyebrow > i,
.sidebar-live__status i,
.sidebar-live__bars i,
.social-share__wave b {
	background: var(--calm-accent) !important;
	box-shadow: none !important;
	animation: none !important;
}

.taste-section__header p,
.moment-section__header p,
.vibe-panel p,
.smart-card p {color: var(--calm-muted) !important;}

/* Hero remains visual, while its chrome becomes neutral. */
.home-hero {padding: 1.25rem !important;}
.home-hero .sect__right {
	border: 1px solid var(--calm-line) !important;
	border-radius: 15px !important;
	background: var(--calm-surface-2) !important;
	backdrop-filter: none !important;
}
.home-hero .collection-main:hover,
.home-hero .collection-item:hover .collection-item__img,
.home-hero .track-item:hover {transform: none !important;}

/* Recommendation feed */
.taste-rec-card,
.taste-feed-track,
.taste-track-skeleton,
.taste-feed-error {
	border: 1px solid var(--calm-line) !important;
	border-radius: var(--calm-radius-sm) !important;
	background: var(--calm-surface-2) !important;
	box-shadow: none !important;
}
.taste-rec-card:hover,
.taste-rec-card:focus-visible,
.taste-feed-track:hover {transform: none !important; border-color: var(--calm-line-strong) !important;}
.taste-rec-card > i,
.taste-track-source {
	border-color: rgba(var(--calm-accent-rgb),.24) !important;
	background: rgba(var(--calm-accent-rgb),.09) !important;
	color: var(--calm-text) !important;
}
.taste-edit,
.taste-secondary,
.taste-more,
.taste-feed-error button {
	border: 1px solid var(--calm-line-strong) !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: var(--calm-text) !important;
	box-shadow: none !important;
}
.taste-edit:hover,
.taste-secondary:hover,
.taste-more:hover {transform: none !important; background: rgba(255,255,255,.05) !important;}

/* Moment selector: one accent, no rainbow. */
.moment-section,
.moment-choice {--moment-accent: var(--calm-accent) !important; --choice-accent: var(--calm-accent) !important;}
.moment-choice,
.moment-feed,
.moment-track,
.moment-skeleton,
.moment-error {
	border: 1px solid var(--calm-line) !important;
	border-radius: var(--calm-radius-sm) !important;
	background: var(--calm-surface-2) !important;
	box-shadow: none !important;
}
.moment-choice {min-height: 88px !important;}
.moment-choice > span,
.moment-track::before {
	background: rgba(var(--calm-accent-rgb),.1) !important;
	color: var(--calm-text) !important;
}
.moment-choice.is-active {
	transform: none !important;
	border-color: rgba(var(--calm-accent-rgb),.52) !important;
	background: rgba(var(--calm-accent-rgb),.09) !important;
}
.moment-choice.is-active::after {background: var(--calm-accent) !important; box-shadow: none !important;}
.moment-open,
.moment-more,
.moment-error button {
	border: 1px solid var(--calm-line-strong) !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: var(--calm-text) !important;
}

/* Mixer: sliders are the feature, not the decoration. */
.vibe-panel {gap: 1.25rem !important;}
.vibe-eq {opacity: .45; filter: grayscale(1);}
.vibe-eq i {background: var(--calm-muted) !important; animation: none !important;}
.vibe-slider,
.vibe-mix,
.vibe-mix-track,
.vibe-mood,
.vibe-flow {
	border-color: var(--calm-line) !important;
	background: var(--calm-surface-2) !important;
	box-shadow: none !important;
}
.vibe-slider,
.vibe-mood {border-radius: var(--calm-radius-sm) !important;}
.vibe-mood {--mood-rgb: var(--calm-accent-rgb) !important;}
.vibe-mood:hover,
.vibe-mood:focus-visible {transform: none !important; border-color: var(--calm-line-strong) !important;}
.vibe-mood__icon {border-color: var(--calm-line) !important; background: rgba(var(--calm-accent-rgb),.09) !important;}
.vibe-mix button,
.vibe-flow__action {border-radius: 10px !important; box-shadow: none !important;}
.vibe-slider input::-webkit-slider-thumb {background: var(--calm-accent) !important; box-shadow: 0 0 0 4px rgba(var(--calm-accent-rgb),.13) !important;}
.vibe-slider input::-moz-range-thumb {background: var(--calm-accent) !important; box-shadow: 0 0 0 4px rgba(var(--calm-accent-rgb),.13) !important;}
.vibe-slider input::-webkit-slider-runnable-track {
	background: linear-gradient(90deg,var(--calm-accent) 0,var(--calm-accent) var(--vibe-value),rgba(255,255,255,.12) var(--vibe-value)) !important;
}
.vibe-slider input::-moz-range-progress {background: var(--calm-accent) !important;}
.vibe-slider output,
.vibe-mix-source {color: var(--calm-text) !important;}
.vibe-mix-source {background: rgba(255,255,255,.08) !important;}

/* Smart cards and a sidebar-native radio. The navigation itself is untouched. */
.smart-listen {gap: .75rem !important;}
.smart-card {min-height: 200px !important; padding: 1.25rem !important;}
.smart-card__action {border-radius: 10px !important; box-shadow: none !important;}
.sidebar-live {
	--radio-accent: var(--calm-accent) !important;
	gap: .75rem !important;
	margin-top: -1rem !important;
	padding: 1rem 0 .875rem !important;
	overflow: visible !important;
	border: 0 !important;
	border-top: 1px solid var(--calm-line) !important;
	border-bottom: 1px solid var(--calm-line) !important;
	border-radius: 0 !important;
	color: var(--calm-text) !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}
.sidebar-live:hover,
.sidebar-live:focus-visible {
	border-color: var(--calm-line) !important;
	box-shadow: none !important;
	transform: none !important;
}
.sidebar-radio::after {display: none !important;}
.sidebar-live__top {padding: 0 .125rem !important;}
.sidebar-live__status,
.sidebar-live__time {
	color: var(--calm-muted) !important;
	font-size: .5625rem !important;
}
.sidebar-live__status {gap: .4375rem !important; letter-spacing: .14em !important;}
.sidebar-live__status i {width: .3125rem !important; height: .3125rem !important;}
.sidebar-radio strong {
	padding: 0 .125rem !important;
	font-size: .9375rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -.018em !important;
}
.sidebar-radio__copy {
	margin-top: -.5rem !important;
	padding: 0 .125rem !important;
	color: var(--calm-muted) !important;
	font-size: .625rem !important;
	line-height: 1.4 !important;
}
.sidebar-radio__stations {
	display: grid !important;
	grid-template-columns: repeat(3,minmax(0,1fr)) !important;
	gap: .3125rem !important;
}
.sidebar-radio__stations button {
	min-width: 0 !important;
	min-height: 1.875rem !important;
	padding: .375rem .25rem !important;
	border: 1px solid transparent !important;
	border-radius: .5rem !important;
	color: var(--calm-muted) !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: .5625rem !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	transform: none !important;
}
.sidebar-radio__stations button:hover,
.sidebar-radio__stations button:focus-visible {
	border-color: var(--calm-line) !important;
	color: var(--calm-text) !important;
	background: var(--calm-surface-2) !important;
	transform: none !important;
}
.sidebar-radio__stations button.is-active {
	border-color: var(--calm-line-strong) !important;
	background: var(--calm-surface-2) !important;
	color: var(--calm-text) !important;
}
.sidebar-radio__now {
	padding: .6875rem .125rem 0 !important;
	border: 0 !important;
	border-top: 1px solid var(--calm-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
}
.sidebar-radio__now span,
.sidebar-radio__now small {color: var(--calm-muted) !important;}
.sidebar-radio__controls {gap: .375rem !important;}
.sidebar-radio__play,
.sidebar-radio__next,
.sidebar-radio__share {
	min-height: 2.25rem !important;
	border: 1px solid var(--calm-line) !important;
	border-radius: .625rem !important;
	color: var(--calm-text) !important;
	background: var(--calm-surface-2) !important;
	box-shadow: none !important;
	transform: none !important;
}
.sidebar-radio__play {
	flex: 1 1 auto !important;
	justify-content: flex-start !important;
	padding: .5625rem .75rem !important;
	font-size: .625rem !important;
	letter-spacing: .06em !important;
}
.sidebar-radio__next,
.sidebar-radio__share {flex: 0 0 2.25rem !important; width: 2.25rem !important; padding: .5625rem !important;}
.sidebar-radio__play:hover,
.sidebar-radio__play:focus-visible,
.sidebar-radio__next:hover:not(:disabled),
.sidebar-radio__next:focus-visible,
.sidebar-radio__share:hover,
.sidebar-radio__share:focus-visible {
	border-color: var(--calm-line-strong) !important;
	background: var(--calm-surface-3) !important;
	filter: none !important;
	transform: none !important;
}
.sidebar-radio .sidebar-live__bars {display: none !important;}
.sidebar-radio__status {
	min-height: 0 !important;
	margin-top: -.25rem !important;
	padding: 0 .125rem !important;
	color: var(--calm-muted) !important;
	font-size: .5rem !important;
	line-height: 1.35 !important;
}

.taste-edit:focus-visible,.taste-primary:focus-visible,.taste-secondary:focus-visible,
.taste-rec-card:focus-visible,.vibe-mood:focus-visible,.vibe-flow__action:focus-visible,
.smart-card__action:focus-visible,.sidebar-live:focus-visible,.taste-choice:focus-visible,
.moment-choice:focus-visible,.moment-open:focus-visible {
	outline-color: var(--calm-accent) !important;
}

/* Generic home sections */
[data-home-block].sect > .sect__header,
.sect__header {margin-bottom: 1rem;}
.sect__title {letter-spacing: -.025em;}
.genres-list a,
.seo-links,
.mood-seo-nav a {box-shadow: none !important;}

/* Quiet PJAX transition: content changes without a visual jump or heavy overlay. */
#wajax {
	opacity: 1;
	transition: opacity .16s ease;
}
body.is-ajax-loading #wajax {
	opacity: .46;
	pointer-events: none;
}
body.is-ajax-loading {cursor: progress;}
.ajax-route-status {
	position: fixed !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
#wajax h1[tabindex="-1"]:focus {outline: none !important;}

/* One track language everywhere: shortstory follows the Popular genres chart. */
.grid-items:has(.track-item) {gap: .125rem 1.875rem !important;}
.home-hero .sect__content:has(.track-item),
.taste-track-list,
.vibe-mix__tracks,
.moment-track-list {gap: .125rem 1.875rem !important;}

.track-item,
.track-item.taste-feed-track,
.track-item.vibe-mix-track,
.track-item.moment-track {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 2.75rem 3rem minmax(0,1fr) auto !important;
	align-items: center !important;
	gap: .75rem !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: .5rem .625rem !important;
	border: 0 !important;
	border-radius: .625rem !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	transition: background-color .2s ease,box-shadow .2s ease !important;
}
.track-item:hover,
.track-item:focus-within,
.track-item.taste-feed-track:hover,
.track-item.vibe-mix-track:hover,
.track-item.moment-track:hover {
	border: 0 !important;
	background: var(--calm-surface) !important;
	box-shadow: 0 .375rem 1.125rem rgba(0,0,0,.09) !important;
	transform: none !important;
}
.track-item.track-item--guest::before,
.track-item.moment-track::before {
	content: counter(n,decimal-leading-zero) !important;
	counter-increment: n !important;
	display: grid !important;
	place-items: center end !important;
	width: auto !important;
	height: auto !important;
	min-width: 2.75rem !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--calm-text) !important;
	background: transparent !important;
	font-size: .9375rem !important;
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums !important;
}
.track-item__fav {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	width: 2.75rem !important;
}
.track-item__fav a {
	width: 1.875rem !important;
	height: 1.875rem !important;
	border: 0 !important;
	color: var(--calm-muted) !important;
	background: transparent !important;
}
.track-item > [itemprop="byArtist"] {display: none !important;}
.track-item__img,
.track-item.taste-feed-track .track-item__img,
.track-item.vibe-mix-track .track-item__img,
.track-item.moment-track .track-item__img {
	width: 3rem !important;
	height: 3rem !important;
	min-width: 3rem !important;
	border-radius: .5625rem !important;
	background: var(--calm-surface-2) !important;
}
.track-item__btn-play {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	color: #fff !important;
	opacity: 0 !important;
	transition: opacity .2s ease !important;
}
.track-item__btn-play::before {
	display: grid !important;
	place-items: center !important;
	width: 1.75rem !important;
	height: 1.75rem !important;
	margin: auto !important;
	padding-left: .125rem !important;
	border-radius: 50% !important;
	color: #fff !important;
	background: rgba(0,0,0,.52) !important;
	font-size: .625rem !important;
	backdrop-filter: none !important;
}
.track-item:hover .track-item__btn-play,
.track-item:focus-within .track-item__btn-play,
.track-item.js-trc--is-current .track-item__btn-play {opacity: 1 !important;}
.track-item__desc {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
	line-height: 1.35 !important;
}
.track-item__title,
.track-item__subtitle {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.track-item__title,
.track-item.taste-feed-track .track-item__title,
.track-item.vibe-mix-track .track-item__title,
.track-item.moment-track .track-item__title {
	font-size: .875rem !important;
	font-weight: 650 !important;
}
.track-item__subtitle,
.track-item.taste-feed-track .track-item__subtitle,
.track-item.vibe-mix-track .track-item__subtitle,
.track-item.moment-track .track-item__subtitle {
	margin-top: .1875rem !important;
	color: var(--calm-muted) !important;
	font-size: .75rem !important;
	opacity: .72 !important;
}
.track-item__time {
	padding-left: .5rem !important;
	color: var(--calm-muted) !important;
	font-size: .75rem !important;
	font-variant-numeric: tabular-nums !important;
	opacity: .72 !important;
	transition: opacity .15s ease !important;
}
.track-meta-actions {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: .125rem !important;
	min-width: 0;
}
.track-download {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 1.75rem !important;
	width: 1.75rem !important;
	height: 1.75rem !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: var(--calm-muted) !important;
	background: transparent !important;
	font-size: .75rem !important;
	text-decoration: none !important;
	touch-action: manipulation;
	transition: color .15s ease,background-color .15s ease !important;
}
.track-download:hover,
.track-download:focus-visible {color: var(--calm-text) !important; background: var(--calm-surface-2) !important;}
.taste-track-source,
.vibe-mix-source {display: none !important;}
.track-item .track-ctrl {display: none !important;}
.track-item .track-item__btn-ctrl {
	position: absolute !important;
	right: .5rem !important;
	top: 50% !important;
	z-index: 2 !important;
	display: grid !important;
	place-items: center !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 50% !important;
	color: var(--calm-text) !important;
	background: var(--calm-surface-2) !important;
	box-shadow: 0 0 0 1px var(--calm-line) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	translate: 0 -50% !important;
	transition: opacity .15s ease !important;
}
.track-item:hover .track-item__time,
.track-item:focus-within .track-item__time {opacity: .72 !important;}
.track-item:hover .track-item__btn-ctrl,
.track-item:focus-within .track-item__btn-ctrl {
	opacity: 1 !important;
	pointer-events: auto !important;
}
.track-item.js-trc--is-playing {
	background: var(--accent-fade) !important;
	box-shadow: inset .1875rem 0 0 var(--calm-accent) !important;
}
.track-item.js-trc--is-playing .track-item__btn-play::before {
	content: "\f04c" !important;
	padding-left: 0 !important;
	background: var(--calm-accent) !important;
	color: var(--calm-surface) !important;
}

@media (hover: none) {
	.track-item .track-item__time {display: block !important;}
	.track-item .track-item__btn-ctrl,
	.track-item .track-item__fav {display: none !important; opacity: 0 !important; pointer-events: none !important;}
}

/* Light mode uses the same hierarchy, only the surfaces change. */
.lt {
	--calm-bg: #f7f7f8;
	--calm-accent: #18181c;
	--calm-accent-rgb: 24,24,28;
	--calm-surface: #ffffff;
	--calm-surface-2: #f6f6f8;
	--calm-surface-3: #eeeeF2;
	--calm-line: rgba(25,25,32,.09);
	--calm-line-strong: rgba(25,25,32,.16);
	--calm-text: #18181c;
	--calm-muted: rgba(24,24,28,.54);
	--accent: #29292d;
	--accent-fade: rgba(0,0,0,.08);
	--gradient: linear-gradient(120deg,#ededf0,#d9d9dd);
	--ui-accent: #18181c;
	--ui-bdc-inp-focus: #18181c;
}
.lt .home-hero,
.lt .taste-section,
.lt .moment-section,
.lt .vibe-panel,
.lt .smart-card {box-shadow: 0 8px 24px rgba(25,25,35,.055) !important;}
.lt .sidebar-live,
.lt .sidebar-live:hover,
.lt .sidebar-live:focus-visible {
	border-color: var(--calm-line) !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}
.lt .sidebar-radio__now {
	border-color: var(--calm-line) !important;
	background: transparent !important;
}
.lt .taste-rec-card,
.lt .taste-feed-track,
.lt .taste-track-skeleton,
.lt .moment-choice,
.lt .moment-feed,
.lt .moment-track,
.lt .moment-skeleton,
.lt .vibe-slider,
.lt .vibe-mix,
.lt .vibe-mix-track,
.lt .vibe-mood,
.lt .sidebar-radio__stations button {background: transparent !important; color: var(--calm-muted) !important;}
.lt .sidebar-radio__stations button:hover,
.lt .sidebar-radio__stations button:focus-visible,
.lt .sidebar-radio__stations button.is-active,
.lt .sidebar-radio__play,
.lt .sidebar-radio__next,
.lt .sidebar-radio__share {background: var(--calm-surface-2) !important; color: var(--calm-text) !important;}
.lt .taste-edit,
.lt .taste-secondary,
.lt .taste-more,
.lt .moment-open,
.lt .moment-more {color: var(--calm-text) !important;}
.lt .vibe-slider input::-webkit-slider-runnable-track {
	background: linear-gradient(90deg,var(--calm-accent) 0,var(--calm-accent) var(--vibe-value),rgba(0,0,0,.12) var(--vibe-value)) !important;
}
.lt .vibe-slider input::-moz-range-track {background: rgba(0,0,0,.12) !important;}
.lt .vibe-mix-source {background: rgba(0,0,0,.06) !important;}

.mobile-tabbar {display: none;}

/* Persistent Player 2.0: quiet monochrome controls and a useful queue. */
.plr__inner {
	border-top: 1px solid var(--calm-line) !important;
	background: var(--calm-surface) !important;
	backdrop-filter: none !important;
	box-shadow: 0 -.75rem 2.5rem rgba(0,0,0,.08) !important;
}
.plr__playlist-list {
	border: 1px solid var(--calm-line) !important;
	box-shadow: 0 1rem 3rem rgba(0,0,0,.16) !important;
}
.plr__playlist-list-title {height: 4rem !important; padding: 0 1rem !important; font-size: 1rem !important;}
.plr__playlist-actions {gap: .375rem !important;}
.plr__queue-auto {
	width: auto !important;
	height: 2rem !important;
	padding: 0 .75rem !important;
	border: 1px solid var(--calm-line) !important;
	border-radius: 999px !important;
	color: var(--calm-muted) !important;
	font-size: .6875rem !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
}
.plr__queue-auto.is-active {background: var(--calm-accent) !important; border-color: var(--calm-accent) !important; color: var(--calm-accent-text) !important;}
.plr__queue-close,
.plr__trc-remove {width: 2rem !important; height: 2rem !important; color: var(--calm-muted) !important;}
.plr__trc-remove {flex: 0 0 2rem !important; opacity: .52; transition: opacity .16s ease, background-color .16s ease; border-radius: 999px !important;}
.plr__trc-remove:hover,
.plr__trc-remove:focus-visible {opacity: 1; background: var(--calm-surface-2) !important;}
.plr__trc-remove:disabled {visibility: hidden;}
.plr__trc {padding: .75rem 1rem !important; gap: .75rem !important;}
.plr__trc-img {width: 2.75rem !important; border-radius: 10px !important;}
.plr__trc:hover,
.plr__trc.is-active {background: var(--calm-surface-2) !important;}
.plr__bar::before,
.plr__trc-img::before {background-color: var(--calm-accent) !important;}
.plr__prev,
.plr__next,
.plr__play,
.plr--is-repeated .plr__repeat,
.plr--is-shuffled .plr__shuffle {color: var(--calm-text) !important; border-color: var(--calm-text) !important;}

/* Home artists use the same round visual language as the full directory. */
[data-home-block="artists"] .grid-items {
	display: grid !important;
	grid-template-columns: repeat(6,minmax(0,1fr)) !important;
	gap: 1.5rem 1rem !important;
}
[data-home-block="artists"] .artist-item {min-width: 0 !important; padding-bottom: 1.75rem !important;}
[data-home-block="artists"] .album-item__img {overflow: visible !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important;}
[data-home-block="artists"] .album-item__img > img {border: 1px solid var(--calm-line) !important; border-radius: 50% !important; filter: grayscale(1); transition: filter .2s ease,transform .2s ease;}
[data-home-block="artists"] .artist-item:hover .album-item__img > img {filter: grayscale(.25); transform: scale(1.025);}
[data-home-block="artists"] .album-item__desc {position: absolute !important; top: 100% !important; bottom: auto !important; padding: .625rem .25rem 0 !important; color: var(--calm-text) !important; background: transparent !important; backdrop-filter: none !important; text-shadow: none !important; transform: none !important;}
[data-home-block="artists"] .album-item__title {overflow: hidden !important; font-size: .75rem !important; text-overflow: ellipsis !important; text-transform: none !important; white-space: nowrap !important;}

@media (min-width: 761px) and (max-width: 980px) {
	[data-home-block="artists"] .grid-items {grid-template-columns: repeat(5,minmax(0,1fr)) !important;}
}

/* Predictable mobile spacing; no full-bleed smart blocks. */
@media (max-width: 760px) {
	:root {--calm-gap: 1.5rem;}
	.grid-items:has(.track-item),
	.home-hero .sect__content:has(.track-item),
	.taste-track-list,
	.vibe-mix__tracks,
	.moment-track-list {grid-template-columns: minmax(0,1fr) !important; gap: .125rem !important;}
	.track-item,
	.track-item.taste-feed-track,
	.track-item.vibe-mix-track,
	.track-item.moment-track {
		grid-template-columns: 2.375rem 2.75rem minmax(0,1fr) auto !important;
		gap: .5625rem !important;
		padding: .4375rem .25rem !important;
	}
	.track-item.track-item--guest::before,
	.track-item.moment-track::before {min-width: 2.375rem !important; font-size: .8125rem !important;}
	.track-item__fav {width: 2.375rem !important;}
	.track-item__img,
	.track-item.taste-feed-track .track-item__img,
	.track-item.vibe-mix-track .track-item__img,
	.track-item.moment-track .track-item__img {width: 2.75rem !important; height: 2.75rem !important; min-width: 2.75rem !important;}
	.track-item__title,
	.track-item.taste-feed-track .track-item__title,
	.track-item.vibe-mix-track .track-item__title,
	.track-item.moment-track .track-item__title {font-size: .8125rem !important;}
	.home-hero,
	.taste-section,
	.moment-section,
	.vibe-panel,
	.smart-listen {
		margin-right: 0 !important;
		margin-left: 0 !important;
		border-radius: 16px !important;
	}
	.home-hero,
	.taste-section,
	.moment-section,
	.vibe-panel {padding: 1rem !important;}
	.smart-listen {padding: 0 !important;}
	.taste-section h2,
	.moment-section h2,
	.vibe-panel h2,
	.smart-card h2 {font-size: 1.5rem !important;}
	.moment-choices {gap: .5rem !important;}
	.vibe-panel {gap: 1rem !important;}
	.plr__inner {
		display: grid !important;
		grid-template-columns: minmax(0,1fr) auto !important;
		gap: .75rem !important;
		padding: .625rem .75rem !important;
		min-height: 4.25rem;
	}
	.plr__left {display: block !important; min-width: 0 !important; padding-left: 3.25rem !important;}
	.plr__img {display: block !important; width: 2.625rem !important; border-radius: 10px !important; box-shadow: none !important;}
	.plr__title {font-size: .8125rem !important; overflow: hidden; text-overflow: ellipsis;}
	.plr__subtitle {font-size: .75rem !important; overflow: hidden; text-overflow: ellipsis;}
	.plr__middle {width: auto !important; min-width: 0 !important;}
	.plr__top {padding: 0 !important; gap: .25rem !important;}
	.plr__ctrl {gap: .125rem !important;}
	.plr__shuffle,
	.plr__prev,
	.plr__repeat,
	.plr__vol {display: none !important;}
	.plr__playlist-holder {position: static !important; flex: 0 0 auto !important;}
	.plr__playlist {width: 2.5rem !important; height: 2.5rem !important; font-size: .75rem !important;}
	.plr__playlist span {display: none !important;}
	.plr__play,
	.plr__next {width: 2.5rem !important; height: 2.5rem !important;}
	.plr__bottom {height: .1875rem !important;}
	.plr__bar-progress {height: .1875rem !important; background: var(--calm-line) !important;}
	.plr__time {display: none !important;}
	.plr__playlist-list {height: calc(100dvh - 4.25rem) !important;}
	.plr__playlist-list-content {height: calc(100% - 4rem) !important;}
	.wrapper {padding-bottom: 5.25rem !important;}
}

@media (max-width: 520px) {
	:root {--calm-gap: 1.25rem;}
	.home-hero,
	.taste-section,
	.moment-section,
	.vibe-panel {padding: .875rem !important;}
	.moment-choice {min-height: 80px !important; padding: .75rem !important;}
	.smart-card {min-height: 180px !important; padding: 1rem !important;}
	.taste-track-list,
	.moment-track-list {gap: .5rem !important;}
	.track-item__desc {min-width: 0 !important;}
	.track-item__title,
	.track-item__subtitle {overflow: hidden !important; text-overflow: ellipsis !important;}
	.home-hero .track-item {column-gap: .5rem !important; flex-wrap: nowrap !important;}
	.home-hero .track-item__btn-ctrl {display: none !important;}
	.plr__queue-auto {padding: 0 .5625rem !important; font-size: .625rem !important;}
	.plr__trc {padding: .625rem .75rem !important;}
	.plr__trc-time {display: none !important;}
}

/* Mobile app shell: compact, monochrome and content-first. */
@media (max-width: 760px) {
	:root {--mobile-tabbar-height: 4rem;}
	body {background: var(--calm-bg) !important;}
	.header {
		display: grid !important;
		grid-template-columns: auto minmax(0,1fr) 2.5rem 2.5rem !important;
		align-items: center !important;
		gap: .5rem !important;
		padding: .75rem 1rem !important;
		background: var(--calm-bg) !important;
		border-bottom: 1px solid var(--calm-line) !important;
	}
	.header .header__logo {
		position: relative !important;
		inset: auto !important;
		translate: none !important;
		min-width: 0 !important;
		max-width: 7.25rem !important;
		padding-left: 2.5rem !important;
		font-size: 1rem !important;
		white-space: nowrap;
	}
	.header .header__logo::before {width: 2rem !important; height: 2rem !important; border-radius: 10px !important;}
	.header .header__logo span {display: none !important;}
	.header__search {order: 0 !important; min-width: 0 !important; width: 100% !important;}
	.header__search form {position: relative; min-width: 0 !important; width: 100% !important;}
	.search-block__input {
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		height: 2.625rem !important;
		padding: 0 2.5rem 0 .875rem !important;
		border: 1px solid var(--calm-line) !important;
		border-radius: 999px !important;
		background: var(--calm-surface-2) !important;
		font-size: .8125rem !important;
		box-shadow: none !important;
	}
	.search-block__btn {right: .125rem !important; width: 2.375rem !important; height: 2.375rem !important; color: var(--calm-muted) !important;}
	.header__theme-select {grid-column: 3 !important; width: 2.5rem !important; height: 2.5rem !important; color: var(--calm-text) !important;}
	.header__logged,
	.header__login,
	.header__install {display: none !important;}
	.header button.header__btn1.header__history {display: none !important;}
	.header__btn-menu {display: flex !important; grid-column: 4 !important; width: 2.5rem !important; height: 2.5rem !important; border-radius: 50% !important;}

	.cols__content {padding: 1.25rem 1rem 2rem !important;}
	.cols__content > .sect:not(.home-hero) {
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
	.sect__header {margin-bottom: .875rem !important;}
	.sect__title {font-size: 1.375rem !important; line-height: 1.18 !important;}
	.sect__title > span {margin-bottom: .1875rem !important; color: var(--calm-muted) !important; font-size: .6875rem !important; letter-spacing: .06em !important;}
	.sect__link.btn {min-height: 2rem !important; height: 2rem !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--calm-muted) !important; font-size: .75rem !important;}

	[data-home-block="artists"] .grid-items {
		display: grid !important;
		grid-template-columns: none !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 5.5rem !important;
		gap: .875rem !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		padding: .125rem 0 .5rem !important;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	[data-home-block="artists"] .grid-items::-webkit-scrollbar {display: none;}
	[data-home-block="artists"] .artist-item {width: 5.5rem !important; padding-bottom: 2.125rem !important; scroll-snap-align: start;}
	[data-home-block="artists"] .album-item__img {border-radius: 50% !important; overflow: visible !important; box-shadow: none !important;}
	[data-home-block="artists"] .album-item__img > img {border-radius: 50% !important; border: 1px solid var(--calm-line) !important;}
	[data-home-block="artists"] .album-item__desc {
		top: 100% !important;
		bottom: auto !important;
		padding: .5rem 0 0 !important;
		background: transparent !important;
		backdrop-filter: none !important;
		color: var(--calm-text) !important;
		text-shadow: none !important;
	}
	[data-home-block="artists"] .album-item__title {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: .75rem !important;
		font-weight: 600 !important;
		text-transform: none !important;
	}

	#sect-genres .genres-list {
		display: grid !important;
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
		gap: .625rem !important;
	}
	#sect-genres .genres-list li {min-width: 0 !important;}
	#sect-genres .genres-list a {
		position: relative;
		display: flex !important;
		align-items: flex-end !important;
		min-height: 6.5rem !important;
		padding: .875rem !important;
		overflow: hidden;
		border: 1px solid var(--calm-line) !important;
		border-radius: 14px !important;
		background: linear-gradient(145deg,var(--calm-surface-2),var(--calm-surface)) !important;
		color: var(--calm-text) !important;
		font-size: .875rem !important;
		font-weight: 700 !important;
		line-height: 1.15 !important;
	}
	#sect-genres .genres-list a::after {
		content: '';
		position: absolute;
		width: 5rem;
		height: 5rem;
		top: -.875rem;
		right: -1rem;
		border: .75rem solid var(--calm-line);
		border-radius: 50%;
		opacity: .55;
		transform: rotate(-18deg);
	}

	.mobile-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 995;
		display: grid;
		grid-template-columns: repeat(5,minmax(0,1fr));
		height: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom));
		padding: .375rem .25rem env(safe-area-inset-bottom);
		border-top: 1px solid var(--calm-line);
		background: var(--calm-bg);
		background: color-mix(in srgb,var(--calm-bg) 94%,transparent);
		backdrop-filter: blur(18px);
		transform: translateY(0);
		transition: transform .24s ease,opacity .2s ease !important;
		will-change: transform;
	}
	.mobile-tabbar__item {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .25rem;
		min-width: 0;
		padding: 0 .125rem !important;
		border: 0 !important;
		background: transparent !important;
		color: var(--calm-muted) !important;
		font-size: 1.0625rem !important;
		line-height: 1 !important;
	}
	.mobile-tabbar__item span {
		overflow: hidden;
		max-width: 100%;
		color: inherit;
		font-family: Inter,Arial,sans-serif;
		font-size: .625rem;
		font-weight: 500;
		line-height: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.mobile-tabbar__item.is-active,
	.mobile-tabbar__item[aria-current="page"] {color: var(--calm-text) !important;}
	.mobile-tabbar__item.is-active::after,
	.mobile-tabbar__item[aria-current="page"]::after {
		content: '';
		position: absolute;
		bottom: calc(.125rem + env(safe-area-inset-bottom));
		width: 1rem;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
	}
	.mobile-tabbar__item {position: relative;}
	.mobile-menu-is-opened .mobile-tabbar {visibility: hidden;}
	.plr {
		bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom)) !important;
		transform: translateY(0);
		transition: bottom .24s ease,transform .24s ease,opacity .2s ease !important;
		will-change: transform;
	}
	.plr.plr--not-loaded {
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translateY(calc(100% + .5rem)) !important;
	}
	.wrapper {padding-bottom: calc(9.5rem + env(safe-area-inset-bottom)) !important;}
	.scrolltop {bottom: calc(9rem + env(safe-area-inset-bottom)) !important;}
	body.mobile-player-empty .wrapper {padding-bottom: calc(var(--mobile-tabbar-height) + 1.25rem + env(safe-area-inset-bottom)) !important;}
	body.mobile-player-empty .scrolltop {bottom: calc(var(--mobile-tabbar-height) + 1rem + env(safe-area-inset-bottom)) !important;}
	body.mobile-nav-hidden .mobile-tabbar {
		opacity: 0;
		pointer-events: none;
		transform: translateY(100%);
	}
	body.mobile-nav-hidden .plr:not(.plr--not-loaded) {bottom: env(safe-area-inset-bottom) !important;}
	body.mobile-nav-hidden .wrapper {padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important;}
	body.mobile-nav-hidden .scrolltop {bottom: calc(5rem + env(safe-area-inset-bottom)) !important;}
	body.mobile-nav-hidden.mobile-player-empty .wrapper {padding-bottom: 1.5rem !important;}
	body.mobile-nav-hidden.mobile-player-empty .scrolltop {bottom: 1rem !important;}
}

@media (max-width: 380px) {
	.header {grid-template-columns: auto minmax(0,1fr) 2.25rem !important; padding-right: .75rem !important; padding-left: .75rem !important;}
	.header .header__logo {max-width: 6.25rem !important; padding-left: 2.25rem !important; font-size: .875rem !important;}
	.header .header__logo::before {width: 1.875rem !important; height: 1.875rem !important;}
	.header__theme-select {display: none !important;}
	.header__btn-menu {grid-column: 3 !important; width: 2.25rem !important; height: 2.25rem !important;}
	.mobile-tabbar__item span {font-size: .5625rem;}
}

@media (prefers-reduced-motion: reduce) {
	#wajax {transition: none !important;}
	.home-hero *,
	.taste-section *,
	.moment-section *,
	.vibe-panel *,
	.smart-listen * {animation: none !important; transition-duration: .01ms !important;}
}

/* 2026-09-19 catalog pass: one monochrome rhythm across search, tracks and directories. */
:root {
	--space-1: .5rem;
	--space-2: .75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
}

/* The header owns one search input; browser-native decorations must not create a second control. */
#quicksearch {position: relative; min-width: 0;}
#quicksearch #story {
	-webkit-appearance: none !important;
	appearance: none !important;
}
#quicksearch #story::-webkit-search-decoration,
#quicksearch #story::-webkit-search-cancel-button,
#quicksearch #story::-webkit-search-results-button,
#quicksearch #story::-webkit-search-results-decoration {display: none !important; -webkit-appearance: none !important;}

/* DLE's legacy dropdown duplicates the new unified search on some mobile browsers. */
#searchsuggestions {display: none !important; visibility: hidden !important; pointer-events: none !important;}

.smart-search {
	width: min(24rem,calc(100vw - 2rem)) !important;
	max-height: min(25rem,calc(100dvh - 8rem)) !important;
	padding: .5rem !important;
	border: 1px solid var(--calm-line) !important;
	border-radius: 1rem !important;
	background: color-mix(in srgb,var(--calm-surface) 97%,transparent) !important;
	box-shadow: 0 1rem 3rem rgba(0,0,0,.16) !important;
	backdrop-filter: blur(18px) !important;
}
.smart-search__item {
	grid-template-columns: 2.5rem minmax(0,1fr) !important;
	gap: .625rem !important;
	min-height: 3rem !important;
	padding: .25rem .375rem !important;
	border: 0 !important;
	border-radius: .75rem !important;
	color: var(--calm-text) !important;
	transform: none !important;
}
.smart-search__item:hover,
.smart-search__item.is-active {background: var(--calm-surface-2) !important; transform: none !important;}
.smart-search__media {width: 2.5rem !important; height: 2.5rem !important; border-radius: .625rem !important; background: var(--calm-surface-2) !important;}
.smart-search__copy strong {font-size: .75rem !important; font-weight: 650 !important;}
.smart-search__copy small {color: var(--calm-muted) !important; font-size: .5625rem !important;}
.smart-search__all {
	min-height: 2.5rem !important;
	margin-top: .375rem !important;
	border: 1px solid var(--calm-line) !important;
	border-radius: .75rem !important;
	color: var(--calm-text) !important;
	background: transparent !important;
}
.smart-search__note {color: var(--calm-muted) !important;}

/* Every real song uses the same flat numbered shortstory row. */
.grid-items:has(> .track-item),
.sect__content:has(> .track-item),
.taste-track-list,
.vibe-mix__tracks,
.moment-track-list {
	counter-reset: n !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.smart-search__results,
#searchsuggestions {counter-reset: n !important;}
.taste-section {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.track-item::before,
.track-item.track-item--guest::before,
.track-item.moment-track::before {
	content: counter(n) !important;
	counter-increment: n !important;
	display: grid !important;
	place-items: center end !important;
	min-width: 2.75rem !important;
	color: var(--calm-text) !important;
	background: transparent !important;
	font-size: .8125rem !important;
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums !important;
}
.track-item__fav {
	position: absolute !important;
	right: 2.875rem !important;
	top: 50% !important;
	z-index: 3 !important;
	width: 2rem !important;
	height: 2rem !important;
	translate: 0 -50% !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.track-item:hover .track-item__fav,
.track-item:focus-within .track-item__fav {display: none !important; opacity: 0 !important; pointer-events: none !important;}
.track-item .track-item__btn-ctrl,
.track-item .track-item__fav {display: none !important; opacity: 0 !important; pointer-events: none !important;}
.track-item:hover .track-item__time,
.track-item:focus-within .track-item__time {display: block !important; opacity: .72 !important;}
.track-item.js-trc--is-playing {background: var(--calm-surface-2) !important; box-shadow: inset .125rem 0 0 var(--calm-text) !important;}
.fs-result.track-item {width: 100%;}
.fs-result--catalog {
	gap: .75rem;
	padding: .625rem !important;
	border: 1px solid var(--calm-line) !important;
	border-radius: .875rem !important;
	background: var(--calm-surface) !important;
}
.fs-result--catalog .fs-result__img {width: 3rem !important; height: 3rem !important; margin: 0 !important; border-radius: .625rem !important;}
.fs-result--catalog .fs-result__meta {margin-top: .25rem !important;}
.fs-result--catalog .fs-result__category {color: var(--calm-muted); font-size: .625rem; text-transform: uppercase; letter-spacing: .06em;}
.message-info {
	border: 1px solid var(--calm-line) !important;
	color: var(--calm-text) !important;
	background: var(--calm-surface-2) !important;
	box-shadow: none !important;
}

/* Full search: one clean, numbered shortstory list. */
#wajax > .grid-items:has(.search-page) {
	display: grid !important;
	grid-template-columns: minmax(0,1fr) !important;
	gap: .125rem !important;
	max-width: 58rem;
	margin: 0 auto !important;
	padding: 1.5rem !important;
	border: 1px solid var(--calm-line) !important;
	border-radius: var(--calm-radius) !important;
	background: var(--calm-surface) !important;
	box-shadow: none !important;
	counter-reset: n !important;
}
#wajax > .grid-items:has(.search-page) > style {display: none !important;}
#fullsearch {margin: 0 0 1rem !important;}
.search-page {padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;}
.search-page__head {margin-bottom: 1rem;}
.search-page__head > span {display: block; margin-bottom: .375rem; color: var(--calm-muted); font-size: .625rem; font-weight: 700; letter-spacing: .14em;}
.search-page .serv__subtitle {margin: 0 !important; color: var(--calm-text) !important; font-size: clamp(1.75rem,3vw,2.5rem) !important; font-weight: 750 !important; letter-spacing: -.045em;}
.search-page__simple-form {display: grid !important; grid-template-columns: minmax(0,1fr) auto auto; gap: .5rem; margin-bottom: 1rem;}
.search-page__simple-form input[type="text"],
.search-page__simple-form input[type="search"] {width: 100% !important; min-width: 0 !important; height: 2.75rem !important; border: 1px solid var(--calm-line) !important; border-radius: .75rem !important; background: var(--calm-surface-2) !important; box-shadow: none !important;}
.search-page__simple-form input[type="button"] {height: 2.75rem !important; padding: 0 1rem !important; border: 1px solid var(--calm-line-strong) !important; border-radius: .75rem !important; color: var(--calm-text) !important; background: transparent !important;}
#wajax > .grid-items:has(.search-page) .message-info {margin: 0 !important; padding: .875rem 1rem !important; border-radius: .75rem !important; color: var(--calm-muted) !important; background: var(--calm-surface-2) !important;}
#wajax > .grid-items:has(.search-page) .message-info::before {display: none !important;}
#wajax > .grid-items:has(.search-page) .pagination {margin-top: 1.25rem !important; padding-top: 1.25rem !important; border-top: 1px solid var(--calm-line) !important;}
.sres {margin-bottom: .5rem; border: 1px solid var(--calm-line); border-radius: .75rem; font-size: .875rem;}
.sres__title {padding: .75rem;}
.sres__btn {padding: 0 1rem; border-radius: .75rem; font-size: .75rem; text-transform: uppercase;}

/* A touch must act immediately: no first tap spent on revealing hover controls. */
.track-item__desc,
.track-item__btn-play,
.track-chart__description,
.track-chart__play {touch-action: manipulation;}
@media (hover: none), (pointer: coarse) {
	.track-item:hover,
	.track-item:focus-within {background: transparent !important; box-shadow: none !important;}
	.track-item__btn-play {opacity: 1 !important;}
	.track-item__btn-play::before {background: rgba(0,0,0,.46) !important;}
	.track-chart__item:hover {background: transparent !important; box-shadow: none !important;}
	.track-chart__play {opacity: 1 !important;}
	[data-home-block="artists"] .artist-item:hover .album-item__img > img {filter: grayscale(1); transform: none;}
}
.message-info::before {border-color: var(--calm-line) !important; color: var(--calm-text) !important; background: transparent !important;}

/* A dedicated genres landing page with quiet information hierarchy. */
.genre-directory {
	margin-bottom: var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--calm-line);
	border-radius: var(--calm-radius);
	background: var(--calm-surface);
}
.genre-directory__intro > span,
.genre-directory__latest > span,
.artist-directory__head > div:first-child > span {
	display: block;
	margin-bottom: .5rem;
	color: var(--calm-muted);
	font-size: .625rem;
	font-weight: 750;
	letter-spacing: .12em;
}
.genre-directory__intro h2 {margin: 0; font-size: clamp(1.5rem,3vw,2.25rem); letter-spacing: -.04em;}
.genre-directory__intro p,
.artist-directory__head p {max-width: 42rem; margin: .625rem 0 0; color: var(--calm-muted); line-height: 1.55;}
.genre-directory__grid {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: .625rem;
	margin-top: 1.5rem;
}
.genre-directory__grid a {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 7rem;
	padding: 1rem;
	border: 1px solid var(--calm-line);
	border-radius: .875rem;
	color: var(--calm-text);
	background: var(--calm-surface-2);
	transition: border-color .16s ease,background-color .16s ease;
}
.genre-directory__grid a:hover {border-color: var(--calm-line-strong); background: var(--calm-surface-3);}
.genre-directory__grid strong {font-size: .875rem; line-height: 1.2;}
.genre-directory__grid small {margin-top: .375rem; color: var(--calm-muted); font-size: .6875rem;}
.genre-directory__latest {display: flex; align-items: baseline; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--calm-line);}
.genre-directory__latest > span {margin: 0;}

/* Artist directory: useful filtering, progressive reveal and compact portraits. */
.artist-directory {padding: var(--space-4) !important; border: 1px solid var(--calm-line) !important; border-radius: var(--calm-radius) !important; background: var(--calm-surface) !important;}
.artist-directory__head {display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;}
.artist-directory__head h1 {margin: 0; font-size: clamp(1.75rem,3vw,2.5rem); letter-spacing: -.045em;}
.artist-directory .artist-country-switch {min-width: 15rem;}
.artist-directory .select__input {height: 2.75rem; padding: 0 2.5rem 0 1rem; border: 1px solid var(--calm-line); border-radius: .75rem; color: var(--calm-text); background: var(--calm-surface-2); box-shadow: none;}
.artist-directory__search {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: min(28rem,100%);
	height: 3rem;
	margin-bottom: 1.5rem;
	padding: 0 1rem;
	border: 1px solid var(--calm-line);
	border-radius: .875rem;
	color: var(--calm-muted);
	background: var(--calm-surface-2);
}
.artist-directory__search input {min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; color: var(--calm-text); background: transparent; outline: 0;}
.artist-directory__grid,
#grid-items:has(> .artist-item) {grid-template-columns: repeat(6,minmax(0,1fr)) !important; gap: 1.5rem 1rem !important;}
.artist-directory__grid .artist-item,
#grid-items > .artist-item {padding-bottom: 1.75rem;}
.artist-directory__grid .artist-item[hidden] {display: none !important;}
.artist-directory__grid .album-item__img,
#grid-items > .artist-item .album-item__img {overflow: visible !important; border-radius: 50% !important; background: transparent !important;}
.artist-directory__grid .album-item__img > img,
#grid-items > .artist-item .album-item__img > img {border: 1px solid var(--calm-line); border-radius: 50% !important; filter: grayscale(1); transition: filter .2s ease,transform .2s ease;}
.artist-directory__grid .artist-item:hover .album-item__img > img,
#grid-items > .artist-item:hover .album-item__img > img {filter: grayscale(.25); transform: scale(1.025);}
.artist-directory__grid .album-item__desc,
#grid-items > .artist-item .album-item__desc {position: absolute !important; top: 100% !important; bottom: auto !important; padding: .625rem .25rem 0 !important; color: var(--calm-text) !important; background: transparent !important; backdrop-filter: none !important; text-shadow: none !important; transform: none !important;}
.artist-directory__grid .album-item__title,
#grid-items > .artist-item .album-item__title {overflow: hidden; font-size: .75rem !important; text-overflow: ellipsis; white-space: nowrap;}
.artist-directory__more {display: block; min-height: 2.75rem; margin: 1.5rem auto 0; padding: 0 1.25rem; border: 1px solid var(--calm-line-strong); border-radius: .75rem; color: var(--calm-text); background: transparent;}
.artist-directory__more:hover {background: var(--calm-surface-2);}
.artist-directory__empty {padding: 2rem; color: var(--calm-muted); text-align: center;}

/* Artist detail: no coloured rating bars or blurred poster wall. */
.page-artist .page__breadcrumbs {margin-bottom: 1rem; color: var(--calm-muted); font-size: .75rem;}
.page-artist .page__main {
	align-items: center;
	padding: 1.5rem !important;
	border: 1px solid var(--calm-line) !important;
	border-radius: var(--calm-radius) !important;
	color: var(--calm-text) !important;
	background: var(--calm-surface) !important;
	text-align: left !important;
	text-shadow: none !important;
}
.page-artist .page__main-bg {display: none !important;}
.page-artist .page__main-left {flex: 0 0 auto; width: auto !important;}
.page-artist .page__img {width: 10rem !important; margin: 0 !important; overflow: visible !important; border: 1px solid var(--calm-line); border-radius: 50% !important; box-shadow: none !important;}
.page-artist .page__img > img {border-radius: 50%; filter: grayscale(1);}
.page-artist .page__rating {left: 50%; right: auto; bottom: -.5rem; width: 6.5rem; translate: -50% 0; border: 1px solid var(--calm-line); border-radius: 999px !important; background: var(--calm-surface-2);}
.page-artist .page__rating a,
.page-artist .page__rating a + a {padding: .375rem !important; color: var(--calm-text) !important; background: transparent !important;}
.page-artist .page__rating a + a {border-left: 1px solid var(--calm-line);}
.page-artist .page__main h1 {margin: 0; color: var(--calm-muted) !important; font-size: .75rem !important; font-weight: 650 !important; text-transform: uppercase; letter-spacing: .08em;}
.page-artist .page__main h1 span {margin-top: .375rem; color: var(--calm-text) !important; font-size: clamp(1.75rem,4vw,2.75rem) !important; font-weight: 750 !important; text-transform: none; letter-spacing: -.045em;}
.page-artist .page__caption {max-width: 48rem; color: var(--calm-muted) !important; font-size: .8125rem !important; line-height: 1.6;}
.page-artist .page__ctrl {gap: .625rem !important; margin-top: 1rem !important;}
.page-artist .page__play,
.page-artist .artist-radio,
.page-artist .page__share {min-height: 2.75rem !important; height: 2.75rem !important; border: 1px solid var(--calm-line-strong) !important; border-radius: .75rem !important; color: var(--calm-text) !important; background: var(--calm-surface-2) !important; box-shadow: none !important;}
.page-artist .page__play {padding: 0 1.25rem !important;}
.page-artist .artist-radio {padding: 0 1rem !important;}
.page-artist .page__share {width: 2.75rem !important; padding: 0 !important;}

@media (max-width: 980px) {
	.genre-directory__grid {grid-template-columns: repeat(3,minmax(0,1fr));}
	.artist-directory__grid,
	#grid-items:has(> .artist-item) {grid-template-columns: repeat(5,minmax(0,1fr)) !important;}
}

@media (max-width: 760px) {
	.smart-search {
		position: fixed !important;
		top: 4.25rem !important;
		right: 1rem !important;
		left: 1rem !important;
		width: auto !important;
		max-height: min(20rem,calc(100dvh - 11rem)) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		z-index: 1200 !important;
	}
	#quicksearch #story {font-size: 1rem !important;}
	.cols__content > .sect,
	.cols__content > .descr {margin-bottom: 1.5rem !important;}
	#wajax > .grid-items:has(.search-page) {padding: 1rem .25rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;}
	.search-page__simple-form {display: none !important;}
	.search-page .serv__subtitle {margin-bottom: 0 !important;}
	.grid-items:has(> .track-item),
	.sect__content:has(> .track-item),
	.taste-track-list,
	.vibe-mix__tracks,
	.moment-track-list {padding: 0 !important; border-radius: 0 !important;}
	.track-item,
	.track-item.taste-feed-track,
	.track-item.vibe-mix-track,
	.track-item.moment-track {grid-template-columns: 2.375rem 2.75rem minmax(0,1fr) auto !important; gap: .5625rem !important; padding: .4375rem .25rem !important;}
	.home-hero .track-item {gap: .5625rem !important;}
	.track-item::before,
	.track-item.track-item--guest::before,
	.track-item.moment-track::before {min-width: 2.375rem !important; font-size: .8125rem !important;}
	.track-item__img,
	.track-item.taste-feed-track .track-item__img,
	.track-item.vibe-mix-track .track-item__img,
	.track-item.moment-track .track-item__img {width: 2.75rem !important; height: 2.75rem !important; min-width: 2.75rem !important;}
	.track-item .track-item__time {display: block !important; opacity: .72 !important;}
	.track-meta-actions {gap: 0 !important;}
	.track-download {flex-basis: 1.625rem !important; width: 1.625rem !important; height: 1.625rem !important; font-size: .6875rem !important;}
	.track-item .track-item__btn-ctrl,
	.track-item .track-item__fav {display: none !important; opacity: 0 !important; pointer-events: none !important;}
	.track-chart__item:hover {background: transparent !important; box-shadow: none !important;}
	.track-chart__play {opacity: 1 !important;}
	.genre-directory {margin-bottom: 1.5rem; padding: 1rem; border-radius: 1rem;}
	.genre-directory__grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin-top: 1rem;}
	.genre-directory__grid a {min-height: 6.25rem; padding: .875rem;}
	.genre-directory__latest {margin-top: 1rem; padding-top: 1rem;}
	.artist-directory {padding: 1rem !important; border-radius: 1rem !important;}
	.artist-directory__head {align-items: stretch; flex-direction: column;}
	.artist-directory .artist-country-switch {width: 100%; min-width: 0;}
	.artist-directory__search {width: 100%; margin-bottom: 1.25rem;}
	.artist-directory__grid,
	#grid-items:has(> .artist-item) {grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 1.25rem .75rem !important;}
	.page-artist .page__main {flex-direction: column !important; gap: 1.25rem !important; margin: 0 !important; padding: 1.25rem !important; text-align: center !important;}
	.page-artist .page__img {width: 8rem !important;}
	.page-artist .page__main-right {align-items: center; width: 100%;}
	.page-artist .page__caption {text-align: center;}
	.page-artist .page__ctrl {display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; width: 100%;}
	.page-artist .page__play {width: 100% !important;}
	.page-artist .artist-radio {grid-column: 1 / -1; grid-row: 2; width: 100%;}
}

@media (max-width: 380px) {
	.artist-directory__grid,
	#grid-items:has(> .artist-item) {grid-template-columns: repeat(2,minmax(0,1fr)) !important;}
}

/* Dedicated smart-service pages. */
.smart-service-page {
	width: 100%;
	margin-bottom: 1.75rem !important;
}
.smart-service-page__breadcrumbs {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1.25rem;
	color: var(--calm-muted);
	font-size: .75rem;
}
.smart-service-page__breadcrumbs a {color: var(--calm-text);}
.smart-service-page h1 {
	margin: 0 !important;
	color: var(--calm-text) !important;
	font-size: clamp(1.75rem,3vw,2.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -.035em !important;
}
.smart-service-page h1 em {font: inherit !important; color: inherit !important;}
.music-sections-page__grid {grid-template-columns: repeat(3,minmax(0,1fr));}

@media (max-width: 760px) {
	.smart-service-page {margin-bottom: 1.25rem !important;}
	.smart-service-page__breadcrumbs {margin-bottom: 1rem;}
	.smart-service-page h1 {font-size: 1.75rem !important;}
	.music-sections-page__grid {grid-template-columns: repeat(2,minmax(0,1fr));}
}

/* Monochrome genre cards: visual navigation shared by home and Sections. */
.home-genre-showcase {min-width: 0;}
.home-genre-showcase .sect__header {margin-bottom: 1rem !important;}
.genre-card-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(10.5rem,20vw,14rem);
	gap: .75rem;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 0 .5rem;
	scroll-padding-inline: .125rem;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.genre-card-rail::-webkit-scrollbar {display: none;}
.genre-card {
	position: relative;
	isolation: isolate;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	aspect-ratio: 1 / 1;
	padding: 1rem !important;
	overflow: hidden;
	border: 1px solid #d8d8d8 !important;
	border-radius: 1rem !important;
	background: #f4f4f2 !important;
	color: #0b0b0c !important;
	box-shadow: none !important;
	scroll-snap-align: start;
	text-decoration: none !important;
	transition: transform .2s ease,border-color .2s ease !important;
}
.genre-card::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: -30%;
	right: -25%;
	width: 80%;
	aspect-ratio: 1;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .1;
}
.genre-card--dark {
	border-color: #242426 !important;
	background: #0b0b0c !important;
	color: #fff !important;
}
.genre-card--lines {
	background-image: repeating-linear-gradient(135deg,transparent 0,transparent 1.125rem,rgba(0,0,0,.07) 1.125rem,rgba(0,0,0,.07) 1.1875rem) !important;
}
.genre-card--dark.genre-card--lines {background-image: repeating-linear-gradient(135deg,transparent 0,transparent 1.125rem,rgba(255,255,255,.08) 1.125rem,rgba(255,255,255,.08) 1.1875rem) !important;}
.genre-card:hover,
.genre-card:focus-visible {transform: translateY(-.1875rem); border-color: currentColor !important;}
.genre-card__icon {
	position: absolute;
	top: 1rem;
	left: 1rem;
	font-size: 1.125rem;
	line-height: 1;
}
.genre-card__mark {
	position: absolute;
	z-index: -1;
	right: -.75rem;
	bottom: -.75rem;
	font-size: clamp(5rem,9vw,8rem);
	line-height: 1;
	opacity: .1;
	transform: rotate(-8deg);
}
.genre-card strong {
	position: relative;
	z-index: 1;
	overflow: hidden;
	font-size: clamp(.9375rem,1.5vw,1.125rem) !important;
	font-weight: 750 !important;
	line-height: 1.08 !important;
	letter-spacing: -.025em;
	text-overflow: ellipsis;
}
.genre-card small {
	position: relative;
	z-index: 1;
	margin-top: .3125rem !important;
	color: inherit !important;
	font-size: .6875rem !important;
	line-height: 1.2;
	opacity: .58;
}
.genre-card-group {margin-top: 2.25rem;}
.genre-card-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
.genre-card-group__head h2 {
	margin: 0 !important;
	color: var(--calm-text) !important;
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	letter-spacing: -.03em;
}
.genre-card-group__head span {color: var(--calm-muted); font-size: .75rem;}
.genre-card-grid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: .75rem;
}
.genre-card-grid .genre-card {aspect-ratio: 1.65 / 1; min-height: 8.5rem;}
.genre-card-grid--compact {grid-template-columns: repeat(3,minmax(0,1fr));}

@media (max-width: 980px) {
	.genre-card-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
}

@media (max-width: 760px) {
	.home-genre-showcase .sect__header {margin-bottom: .75rem !important;}
	.genre-card-rail {
		grid-auto-columns: minmax(9.75rem,44vw);
		gap: .625rem;
		margin-right: -1rem;
		padding-right: 1rem;
	}
	.genre-card {padding: .875rem !important; border-radius: .875rem !important;}
	.genre-card__icon {top: .875rem; left: .875rem; font-size: 1rem;}
	.genre-card__mark {font-size: 5.5rem;}
	.genre-card strong {font-size: .9375rem !important;}
	.music-sections-page {padding: 1rem !important;}
	.genre-card-group {margin-top: 1.75rem;}
	.genre-card-group__head {margin-bottom: .75rem;}
	.genre-card-group__head h2 {font-size: 1.125rem !important;}
	.genre-card-grid {gap: .5rem;}
	.genre-card-grid .genre-card {aspect-ratio: 1.55 / 1; min-height: 6.75rem;}
	.genre-card-grid .genre-card__mark {font-size: 4.5rem;}
}

@media (max-width: 360px) {
	.genre-card-grid .genre-card {min-height: 6.25rem; padding: .75rem !important;}
	.genre-card-grid .genre-card__icon {top: .75rem; left: .75rem;}
	.genre-card-grid .genre-card small {display: none;}
}

@media (prefers-reduced-motion: reduce) {
	.genre-card {transition: none !important;}
	.genre-card:hover,
	.genre-card:focus-visible {transform: none;}
}

/* Home albums: the same swipeable visual rhythm as the genre showcase. */
.home-albums-showcase {min-width: 0;}
.home-albums-showcase .sect__header {margin-bottom: 1rem !important;}
.album-card-rail {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: clamp(10.5rem,20vw,14rem);
	gap: .75rem !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	padding: 0 0 .5rem !important;
	scroll-padding-inline: .125rem;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.album-card-rail::-webkit-scrollbar {display: none;}
.album-card-rail .album-item {
	position: relative;
	min-width: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--calm-line) !important;
	border-radius: 1rem !important;
	background: #0b0b0c !important;
	box-shadow: none !important;
	scroll-snap-align: start;
}
.album-card-rail .album-item__img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border-radius: inherit !important;
	background: #0b0b0c !important;
}
.album-card-rail .album-item__img::after {
	content: '';
	position: absolute;
	inset: 35% 0 0;
	background: linear-gradient(180deg,transparent,rgba(0,0,0,.88));
	pointer-events: none;
}
.album-card-rail .album-item__img > img {
	width: 100% !important;
	height: 100% !important;
	border-radius: inherit !important;
	filter: none;
	object-fit: cover !important;
	transition: transform .22s ease !important;
}
.album-card-rail .album-item:hover .album-item__img > img,
.album-card-rail .album-item:focus-visible .album-item__img > img {filter: none; transform: scale(1.025);}
.album-card-rail .album-item__desc,
.album-card-rail .album-item:hover .album-item__desc {
	z-index: 2;
	top: auto !important;
	bottom: 0 !important;
	padding: 2.5rem .875rem .875rem !important;
	background: transparent !important;
	color: #fff !important;
	text-shadow: none !important;
	transform: none !important;
}
.album-card-rail .album-item__title,
.album-card-rail .album-item__subtitle {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.album-card-rail .album-item__title {font-size: .875rem !important; font-weight: 750 !important; line-height: 1.2 !important; text-transform: none !important;}
.album-card-rail .album-item__subtitle {margin-top: .25rem; font-size: .6875rem !important; opacity: .68;}

@media (max-width: 760px) {
	.home-albums-showcase .sect__header {margin-bottom: .75rem !important;}
	.album-card-rail {
		grid-auto-columns: minmax(9.75rem,44vw);
		gap: .625rem !important;
		margin-right: -1rem;
		padding-right: 1rem !important;
	}
	.album-card-rail .album-item {border-radius: .875rem !important;}
	.album-card-rail .album-item__desc,
	.album-card-rail .album-item:hover .album-item__desc {padding: 2.25rem .75rem .75rem !important;}
}

@media (prefers-reduced-motion: reduce) {
	.album-card-rail .album-item__img > img {transition: none !important;}
	.album-card-rail .album-item:hover .album-item__img > img,
	.album-card-rail .album-item:focus-visible .album-item__img > img {transform: none;}
}

/* A quiet, useful Telegram entry point on the home page. */
.telegram-promo {
	margin: 0 0 var(--calm-gap) !important;
}
.telegram-promo__link {
	display: grid;
	grid-template-columns: 2.75rem minmax(0,1fr) auto;
	align-items: center;
	gap: .875rem;
	min-height: 4.75rem;
	padding: .75rem .875rem !important;
	border: 1px solid var(--calm-line) !important;
	border-radius: var(--calm-radius-sm) !important;
	background: var(--calm-surface) !important;
	color: var(--calm-text) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.telegram-promo__link:hover,
.telegram-promo__link:focus-visible {
	border-color: var(--calm-line-strong) !important;
	background: var(--calm-surface-2) !important;
	transform: translateY(-.0625rem);
}
.telegram-promo__link:focus-visible {outline: .125rem solid var(--calm-accent); outline-offset: .125rem;}
.telegram-promo__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--calm-line-strong);
	border-radius: 50%;
	background: var(--calm-surface-2);
	color: var(--calm-text);
	font-size: 1rem;
}
.telegram-promo__copy {
	display: grid;
	min-width: 0;
	line-height: 1.2;
}
.telegram-promo__copy small {
	margin-bottom: .1875rem;
	color: var(--calm-muted);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .14em;
}
.telegram-promo__copy strong {
	overflow: hidden;
	color: var(--calm-text);
	font-size: .9375rem;
	font-weight: 750;
	letter-spacing: -.015em;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.telegram-promo__copy > span {
	overflow: hidden;
	margin-top: .1875rem;
	color: var(--calm-muted);
	font-size: .6875rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.telegram-promo__action {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	min-height: 2.25rem;
	padding: 0 .75rem;
	border: 1px solid var(--calm-line-strong);
	border-radius: 999px;
	color: var(--calm-text);
	font-size: .6875rem;
	font-weight: 750;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.telegram-promo__action i {font-size: .625rem;}

@media (max-width: 760px) {
	.telegram-promo__link {
		grid-template-columns: 2.5rem minmax(0,1fr) auto;
		gap: .75rem;
		min-height: 4.5rem;
		padding: .6875rem .75rem !important;
		border-radius: .875rem !important;
	}
	.telegram-promo__icon {width: 2.5rem; height: 2.5rem;}
	.telegram-promo__copy > span {font-size: .625rem;}
	.telegram-promo__action {width: 2.25rem; min-height: 2.25rem; justify-content: center; padding: 0; font-size: 0;}
	.telegram-promo__action i {font-size: .6875rem;}
}

@media (max-width: 370px) {
	.telegram-promo__copy > span {display: none;}
}

@media (prefers-reduced-motion: reduce) {
	.telegram-promo__link {transition: none;}
	.telegram-promo__link:hover,
	.telegram-promo__link:focus-visible {transform: none;}
}

/* Desktop home rails: six compact cards and quiet previous/next controls. */
.home-rail-nav {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin-left: auto;
}
.home-rail-nav[hidden] {display: none !important;}
.home-rail-nav__button {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0 !important;
	border: 1px solid var(--calm-line) !important;
	border-radius: 50% !important;
	background: var(--calm-surface) !important;
	color: var(--calm-text) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color .16s ease,background-color .16s ease,opacity .16s ease;
}
.home-rail-nav__button:hover,
.home-rail-nav__button:focus-visible {
	border-color: var(--calm-line-strong) !important;
	background: var(--calm-surface-2) !important;
}
.home-rail-nav__button:focus-visible {outline: .125rem solid var(--calm-accent); outline-offset: .125rem;}
.home-rail-nav__button:disabled {cursor: default; opacity: .28;}
.home-rail-nav__button i {font-size: .6875rem; line-height: 1;}

@media (min-width: 761px) {
	.home-rail {cursor: grab;}
	.home-rail.is-dragging {
		cursor: grabbing;
		scroll-behavior: auto !important;
		scroll-snap-type: none !important;
		user-select: none;
	}
	.home-rail.is-page-turning,
	.home-rail.is-dragging {contain: paint; will-change: scroll-position;}
	.home-rail.is-page-turning > *,
	.home-rail.is-dragging > * {pointer-events: none;}
	.home-rail img {-webkit-user-drag: none; user-select: none;}

	[data-home-block="artists"] .sect__header,
	.home-genre-showcase .sect__header,
	.home-albums-showcase .sect__header,
	.home-playlists .sect__header {flex-wrap: nowrap !important;}

	[data-home-block="artists"] .grid-items,
	.home-playlists .grid-items {
		display: grid !important;
		grid-template-columns: none !important;
		grid-auto-flow: column !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-inline: contain;
	}
	[data-home-block="artists"] .grid-items::-webkit-scrollbar,
	.home-playlists .grid-items::-webkit-scrollbar {display: none;}

	[data-home-block="artists"] .grid-items {
		grid-auto-columns: calc((100% - 5rem) / 6) !important;
		gap: 1rem !important;
		padding: .125rem 0 .5rem !important;
	}
	[data-home-block="artists"] .artist-item {
		width: auto !important;
		min-width: 0 !important;
		scroll-snap-align: start;
	}

	.album-card-rail {
		grid-auto-columns: calc((100% - 3.75rem) / 6) !important;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		overscroll-behavior-inline: contain;
	}
	.album-card-rail .album-item {scroll-snap-align: start;}

	.genre-card-rail {
		grid-auto-columns: calc((100% - 2.25rem) / 4) !important;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		overscroll-behavior-inline: contain;
	}

	.home-playlists .grid-items {
		grid-auto-columns: calc((100% - 2.25rem) / 4) !important;
		gap: .75rem !important;
		padding: 0 0 .5rem !important;
	}
	.home-playlists .podcast-item {min-width: 0; scroll-snap-align: start;}
}

@media (min-width: 761px) and (max-width: 980px) {
	[data-home-block="artists"] .grid-items {grid-auto-columns: calc((100% - 4rem) / 5) !important;}
	.album-card-rail {grid-auto-columns: calc((100% - 3rem) / 5) !important;}
	.genre-card-rail,
	.home-playlists .grid-items {grid-auto-columns: calc((100% - 1.5rem) / 3) !important;}
}

@media (max-width: 760px) {
	.home-rail-nav {display: none !important;}
}

@media (prefers-reduced-motion: reduce) {
	[data-home-block="artists"] .grid-items,
	.album-card-rail,
	.genre-card-rail,
	.home-playlists .grid-items {scroll-behavior: auto !important;}
	.home-rail-nav__button {transition: none;}
}

@media (min-width: 761px) {
	.home-rail.is-page-turning {
		scroll-behavior: auto !important;
		scroll-snap-type: none !important;
	}
}
