/*
 * Drumix Media Pages
 * Изолированный визуальный слой только для Каталога, Сегодня и Репертуара.
 * Бизнес-логика, общая навигационная разметка, тема и страницы с нотами
 * остаются в существующих владельцах.
 */

html.drumix-design[data-drumix-media-design] {
	--drumix-color-primary: #c94b1e;
	--drumix-color-primary-hover: #a83b12;
	--drumix-color-primary-soft: rgba(201, 75, 30, .11);
	--drumix-color-focus: #e86735;
	--drumix-color-on-primary: #fff;
	--drumix-color-background: #f4f1ed;
	--drumix-color-surface: #fff;
	--drumix-color-surface-soft: #ece8e2;
	--drumix-color-surface-raised: #fff;
	--drumix-color-border: rgba(35, 30, 26, .11);
	--drumix-color-text: #191716;
	--drumix-color-muted: #6c6762;
	--drumix-color-warm: #c94b1e;
	--drumix-color-warm-soft: rgba(201, 75, 30, .11);
	--drumix-shadow-card: 0 12px 38px rgba(45, 33, 24, .08);
	--drumix-shadow-raised: 0 24px 72px rgba(45, 33, 24, .16);
	--drumix-shadow-primary: 0 11px 28px rgba(201, 75, 30, .24);
	--drumix-media-page-width: 1320px;
	--drumix-nav-active: var(--drumix-color-primary-soft);
	color-scheme: light;
}

html.drumix-design[data-drumix-media-design].pb-public-dark {
	--drumix-color-primary: #f47a45;
	--drumix-color-primary-hover: #ff9369;
	--drumix-color-primary-soft: rgba(244, 122, 69, .15);
	--drumix-color-focus: #ffad8b;
	--drumix-color-on-primary: #1b0d07;
	--drumix-color-background: #0b0b0c;
	--drumix-color-surface: #171719;
	--drumix-color-surface-soft: #222225;
	--drumix-color-surface-raised: #29292c;
	--drumix-color-border: rgba(255, 255, 255, .12);
	--drumix-color-text: #f7f5f2;
	--drumix-color-muted: #aaa59f;
	--drumix-color-warm: #f47a45;
	--drumix-color-warm-soft: rgba(244, 122, 69, .15);
	--drumix-shadow-card: 0 16px 46px rgba(0, 0, 0, .24);
	--drumix-shadow-raised: 0 28px 80px rgba(0, 0, 0, .48);
	--drumix-shadow-primary: 0 12px 30px rgba(0, 0, 0, .34);
	color-scheme: dark;
}

body.drumix-media-page {
	--accent: var(--drumix-color-primary);
	--accent-strong: var(--drumix-color-primary-hover);
	--ink: var(--drumix-color-text);
	--sub: var(--drumix-color-muted);
	--line: var(--drumix-color-border);
	--bg: var(--drumix-color-background);
	--panel: var(--drumix-color-surface);
	--soft: var(--drumix-color-surface-soft);
	--soft-blue: var(--drumix-color-primary-soft);
	--warm: var(--drumix-color-warm);
	--rep-bg: var(--drumix-color-background);
	--rep-panel: var(--drumix-color-surface);
	--rep-ink: var(--drumix-color-text);
	--rep-sub: var(--drumix-color-muted);
	--rep-line: var(--drumix-color-border);
	--rep-blue: var(--drumix-color-primary);
	--rep-blue-soft: var(--drumix-color-primary-soft);
	--rep-shadow: var(--drumix-shadow-card);
	--drumix-nav-accent: var(--drumix-color-primary);
	--drumix-nav-ink: var(--drumix-color-muted);
	--drumix-nav-line: var(--drumix-color-border);
	--drumix-nav-panel: color-mix(in srgb, var(--drumix-color-surface) 97%, transparent);
	--drumix-nav-active: var(--drumix-color-primary-soft);
	overflow-x: hidden;
	background:
		radial-gradient(circle at 75% -10%, color-mix(in srgb, var(--drumix-color-primary) 8%, transparent), transparent 34rem),
		var(--drumix-color-background);
	color: var(--drumix-color-text);
	font-family: var(--drumix-font-sans);
}

body.drumix-media-page ::selection {
	background: color-mix(in srgb, var(--drumix-color-primary) 28%, transparent);
	color: var(--drumix-color-text);
}

body.drumix-media-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: color-mix(in srgb, var(--drumix-color-focus) 72%, transparent) !important;
}

body.drumix-media-page :where(
	.cat-find-btn,
	.cat-request-btn:not(.secondary),
	.cat-auth-submit,
	.cat-songreq-submit,
	.cat-suggest-submit,
	.rep-add,
	.rep-primary,
	.rep-card-action,
	.today-button-primary
) {
	border-color: var(--drumix-color-primary);
	background: var(--drumix-color-primary);
	color: var(--drumix-color-on-primary);
	box-shadow: var(--drumix-shadow-primary) !important;
}

body.drumix-media-page :where(
	.cat-find-btn,
	.cat-request-btn:not(.secondary),
	.cat-auth-submit,
	.cat-songreq-submit,
	.cat-suggest-submit,
	.rep-add,
	.rep-primary,
	.rep-card-action,
	.today-button-primary
):hover {
	border-color: var(--drumix-color-primary-hover);
	background: var(--drumix-color-primary-hover);
	color: var(--drumix-color-on-primary);
}

body.drumix-media-page :where(.cat-top, .today-top, .rep-top) {
	border-color: var(--drumix-color-border);
	background: color-mix(in srgb, var(--drumix-color-background) 82%, transparent);
	-webkit-backdrop-filter: saturate(150%) blur(22px);
	backdrop-filter: saturate(150%) blur(22px);
}

body.drumix-media-page :where(.cat-top-in, .today-top-in, .rep-top-in) {
	width: min(var(--drumix-media-page-width), calc(100% - 48px));
	max-width: var(--drumix-media-page-width);
	height: 76px;
	margin: 0 auto;
	padding: 0;
}

body.drumix-media-page :where(.cat-brand, .today-brand, .rep-brand) b {
	font-size: 17px;
	font-weight: var(--drumix-weight-strong);
	letter-spacing: -.015em;
}

body.drumix-media-page :where(.cat-brand, .today-brand, .rep-brand) span {
	margin-top: 3px;
	color: var(--drumix-color-muted);
	font-size: 12px;
}

body.drumix-media-page .pbPublicThemeToggle {
	border-color: var(--drumix-color-border);
	background: var(--drumix-color-surface);
	color: var(--drumix-color-text);
	box-shadow: 0 7px 22px rgba(38, 27, 20, .07);
}

html.pb-public-dark body.drumix-media-page .pbPublicThemeToggle {
	background: var(--drumix-color-surface-raised);
	box-shadow: none;
}

/* Общая навигация получает медиавариант только на трёх разрешённых страницах. */
@media (min-width: 1024px) {
	html.drumix-design[data-drumix-media-design] {
		--drumix-nav-width: 212px;
	}

	body.drumix-media-page.drumix-has-navigation:not(.pb-song-mode) {
		padding-left: var(--drumix-nav-width) !important;
	}

	body.drumix-media-page .drumix-nav-rail {
		width: var(--drumix-nav-width);
		padding: max(15px, env(safe-area-inset-top, 0px)) 12px max(15px, env(safe-area-inset-bottom, 0px));
		align-items: stretch;
		gap: 5px;
		border-color: var(--drumix-color-border);
		background: color-mix(in srgb, var(--drumix-color-surface) 96%, transparent);
		box-shadow: 12px 0 42px rgba(35, 27, 22, .035);
	}

	body.drumix-media-page .drumix-nav-logo {
		width: auto;
		height: 54px;
		flex-basis: 54px;
		margin: 0 4px 12px;
		padding: 8px 10px;
		justify-content: flex-start;
		border-radius: 14px;
		background: #fff;
	}

	body.drumix-media-page .drumix-nav-logo img {
		width: 158px;
		height: 38px;
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-item {
		width: auto;
		min-height: 48px;
		flex: 0 0 48px;
		padding: 8px 12px;
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		border-radius: 14px;
		text-align: left;
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-item span {
		max-width: none;
		font-size: 13px;
		line-height: 1.2;
		font-weight: 700;
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-icon {
		width: 22px;
		height: 22px;
		flex-basis: 22px;
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-item:hover {
		background: var(--drumix-color-surface-soft);
		color: var(--drumix-color-text);
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-item.is-active {
		background: var(--drumix-color-primary-soft);
		color: var(--drumix-color-primary);
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-item.is-active::before {
		left: -12px;
		top: 8px;
		bottom: 8px;
		width: 4px;
		border-radius: 0 4px 4px 0;
	}

	body.drumix-media-page :where(.cat-logo, .today-logo, .rep-logo) {
		display: none;
	}
}

/* Каталог */
body.drumix-media-catalog .cat-wrap {
	width: min(var(--drumix-media-page-width), calc(100% - 48px));
	max-width: var(--drumix-media-page-width);
	padding: 34px 0 104px;
}

body.drumix-media-catalog .cat-hero {
	min-height: 418px;
	margin-bottom: 34px;
	padding: 58px 58px;
	border: 0;
	border-radius: 32px;
	background:
		linear-gradient(112deg, color-mix(in srgb, var(--drumix-color-surface) 98%, var(--drumix-color-primary) 2%) 0 58%, transparent 74%),
		var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-catalog .cat-hero::before {
	width: 560px;
	height: 560px;
	top: -390px;
	right: 31%;
	background: radial-gradient(circle, color-mix(in srgb, var(--drumix-color-primary) 16%, transparent), transparent 70%);
}

body.drumix-media-catalog .cat-hero-copy {
	max-width: 55%;
}

body.drumix-media-catalog .cat-hero-photo {
	inset: 22px 22px 22px auto;
	width: 41%;
	border-radius: 25px;
	box-shadow: 0 18px 46px rgba(24, 18, 15, .18);
}

body.drumix-media-catalog .cat-hero-photo::after {
	background: linear-gradient(90deg, rgba(17, 13, 11, .08), transparent 42%);
}

body.drumix-media-catalog .cat-eyebrow,
body.drumix-media-catalog .cat-item-drum-label {
	color: var(--drumix-color-primary);
}

body.drumix-media-catalog .cat-eyebrow::before {
	background: var(--drumix-color-primary);
	box-shadow: 0 0 0 6px var(--drumix-color-primary-soft);
}

body.drumix-media-catalog .cat-hero h1 {
	max-width: 660px;
	font-size: clamp(42px, 4.5vw, 64px);
	line-height: .99;
	letter-spacing: -.055em;
}

body.drumix-media-catalog .cat-hero-lead {
	max-width: 610px;
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.55;
}

body.drumix-media-catalog .cat-find-btn {
	min-height: 52px;
	padding: 0 24px;
	border-radius: 14px;
	font-size: 15px;
}

body.drumix-media-catalog .cat-spirit-note {
	max-width: var(--drumix-media-page-width);
	margin: -8px 6px 38px;
	padding: 0;
	font-size: 14px;
}

body.drumix-media-catalog .cat-spirit-mark {
	background: var(--drumix-color-primary-soft);
	color: var(--drumix-color-primary);
}

body.drumix-media-catalog .cat-spirit-link {
	color: var(--drumix-color-primary);
}

body.drumix-media-catalog .cat-popular {
	margin-bottom: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.drumix-media-catalog .cat-popular-head {
	margin-bottom: 15px;
}

body.drumix-media-catalog .cat-popular-head h2 {
	font-size: 28px;
}

body.drumix-media-catalog .cat-popular-head p {
	font-size: 14px;
}

body.drumix-media-catalog .cat-popular-tabs {
	margin-bottom: 17px;
}

body.drumix-media-catalog .cat-popular-tab {
	min-height: 44px;
	padding: 0 16px;
	border-color: transparent;
	background: var(--drumix-color-surface-soft);
	color: var(--drumix-color-muted);
	font-size: 12px;
}

body.drumix-media-catalog .cat-popular-tab.on {
	border-color: var(--drumix-color-primary);
	background: var(--drumix-color-primary);
	color: var(--drumix-color-on-primary);
}

body.drumix-media-catalog .cat-popular-list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	grid-template-columns: none;
	gap: 12px;
	padding: 3px 2px 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--drumix-color-border) transparent;
}

body.drumix-media-catalog .cat-popular-item {
	min-height: 94px;
	padding: 14px;
	grid-template-columns: 62px minmax(0, 1fr);
	align-items: center;
	gap: 13px;
	scroll-snap-align: start;
	border: 0;
	border-radius: 20px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-catalog .cat-popular-rank {
	width: 62px;
	height: 62px;
	border-radius: 17px;
	background:
		linear-gradient(145deg, color-mix(in srgb, var(--drumix-color-primary) 82%, #2b160d), var(--drumix-color-primary));
	color: var(--drumix-color-on-primary);
	font-size: 23px;
}

body.drumix-media-catalog .cat-popular-title {
	font-size: 15px;
}

body.drumix-media-catalog .cat-popular-author {
	font-size: 12px;
}

body.drumix-media-catalog .cat-popular-stats {
	color: var(--drumix-color-primary);
	font-size: 11px;
}

body.drumix-media-catalog .cat-directory-head {
	margin-bottom: 18px;
}

body.drumix-media-catalog .cat-directory-head h2 {
	font-size: clamp(30px, 3vw, 40px);
	letter-spacing: -.035em;
}

body.drumix-media-catalog .cat-directory-head p {
	font-size: 15px;
}

body.drumix-media-catalog .cat-findbar {
	top: 76px;
	margin: 0 -12px;
	padding: 12px;
	border: 1px solid color-mix(in srgb, var(--drumix-color-border) 65%, transparent);
	border-radius: 20px;
	background: color-mix(in srgb, var(--drumix-color-background) 88%, transparent);
}

body.drumix-media-catalog .cat-search input {
	height: 58px;
	border: 0;
	border-radius: 16px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-catalog .cat-view-toggle {
	background: var(--drumix-color-surface-soft);
}

body.drumix-media-catalog .cat-view-btn.on {
	background: var(--drumix-color-primary);
	color: var(--drumix-color-on-primary);
	box-shadow: none;
}

body.drumix-media-catalog .cat-level select,
body.drumix-media-catalog .cat-alphabet-block {
	border-color: transparent;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-catalog .cat-letter-btn {
	border-color: transparent;
	background: var(--drumix-color-surface-soft);
}

body.drumix-media-catalog .cat-letter-btn:hover {
	border-color: var(--drumix-color-primary);
	color: var(--drumix-color-primary);
}

body.drumix-media-catalog .cat-letter-btn.on {
	border-color: var(--drumix-color-primary);
	background: var(--drumix-color-primary);
	color: var(--drumix-color-on-primary);
}

body.drumix-media-catalog .cat-letter-mark {
	background: var(--drumix-color-primary-soft);
	color: var(--drumix-color-primary);
}

body.drumix-media-catalog .cat-group-hd {
	font-size: 17px;
}

body.drumix-media-catalog .cat-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

body.drumix-media-catalog .cat-item {
	min-height: 158px;
	padding: 16px;
	border: 0;
	border-radius: 22px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
	transition: transform var(--drumix-motion-fast) var(--drumix-motion-ease), box-shadow var(--drumix-motion-normal) var(--drumix-motion-ease);
}

body.drumix-media-catalog .cat-item:hover {
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-raised);
	transform: translateY(-3px);
}

body.drumix-media-catalog .cat-item-link {
	grid-template-columns: 112px minmax(0, 1fr) auto;
	gap: 16px;
}

body.drumix-media-catalog .cat-cover {
	width: 96px;
	height: 96px;
	border-radius: 21px;
	font-size: 34px;
	box-shadow: 0 13px 28px rgba(35, 24, 18, .2);
}

body.drumix-media-catalog .cat-cover.tone-0 {
	background: linear-gradient(145deg, #7c2e14, #d75a27);
}

body.drumix-media-catalog .cat-cover.tone-1 {
	background: linear-gradient(145deg, #242126, #8d4930);
}

body.drumix-media-catalog .cat-cover.tone-2 {
	background: linear-gradient(145deg, #8d3c24, #e27b45);
}

body.drumix-media-catalog .cat-cover.tone-3 {
	background: linear-gradient(145deg, #443027, #b65328);
}

body.drumix-media-catalog .cat-fav {
	left: 82px;
	top: 82px;
	border-color: var(--drumix-color-border);
	background: var(--drumix-color-surface-raised);
}

body.drumix-media-catalog .cat-item-title {
	font-size: 19px;
	line-height: 1.2;
	font-weight: 780;
}

body.drumix-media-catalog .cat-item-sub {
	margin-top: 4px;
	font-size: 13px;
}

body.drumix-media-catalog .cat-item-drum-note {
	margin-top: 10px;
	font-size: 12px;
}

body.drumix-media-catalog .cat-item-action {
	min-width: 112px;
	color: var(--drumix-color-primary);
	font-size: 12px;
}

body.drumix-media-catalog .cat-item-state {
	background: var(--drumix-color-primary-soft);
	color: var(--drumix-color-primary);
}

body.drumix-media-catalog .cat-request-card,
body.drumix-media-catalog .cat-seo {
	border: 0;
	border-radius: 24px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-catalog .cat-seo-card {
	background: var(--drumix-color-surface-soft);
}

/* Мой репертуар */
body.drumix-media-repertoire .rep-page {
	width: min(var(--drumix-media-page-width), calc(100% - 48px));
	max-width: var(--drumix-media-page-width);
	padding: 50px 0 108px;
}

body.drumix-media-repertoire .rep-heading {
	align-items: center;
	margin-bottom: 34px;
}

body.drumix-media-repertoire .rep-heading h1 {
	font-size: clamp(42px, 5vw, 64px);
	letter-spacing: -.055em;
}

body.drumix-media-repertoire .rep-kicker {
	color: var(--drumix-color-primary);
}

body.drumix-media-repertoire .rep-heading p:last-child {
	max-width: 720px;
	font-size: 17px;
}

body.drumix-media-repertoire .rep-add {
	min-height: 52px;
	padding: 0 21px;
	border-radius: 14px;
}

body.drumix-media-repertoire .rep-overview {
	margin-bottom: 22px;
	padding: 30px 32px;
	border: 0;
	border-radius: 26px;
	background:
		linear-gradient(120deg, var(--drumix-color-surface), color-mix(in srgb, var(--drumix-color-primary) 12%, var(--drumix-color-surface)));
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-repertoire .rep-overview h2 {
	font-size: 31px;
}

body.drumix-media-repertoire .rep-tools {
	top: 88px;
	margin-bottom: 18px;
	padding: 14px;
	border-color: var(--drumix-color-border);
	border-radius: 22px;
	background: color-mix(in srgb, var(--drumix-color-background) 86%, transparent);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-repertoire .rep-search {
	height: 56px;
	border: 0;
	border-radius: 16px;
	background: var(--drumix-color-surface);
	box-shadow: 0 6px 24px rgba(35, 27, 22, .05);
}

body.drumix-media-repertoire .rep-filter {
	min-height: 44px;
	padding: 9px 15px;
	border-color: transparent;
	background: var(--drumix-color-surface-soft);
	color: var(--drumix-color-muted);
}

body.drumix-media-repertoire .rep-filter:hover,
body.drumix-media-repertoire .rep-filter.active {
	border-color: var(--drumix-color-primary);
	background: var(--drumix-color-primary);
	color: var(--drumix-color-on-primary);
}

body.drumix-media-repertoire .rep-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

body.drumix-media-repertoire .rep-card {
	border: 0;
	border-radius: 24px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-repertoire .rep-card:hover {
	box-shadow: var(--drumix-shadow-raised);
	transform: translateY(-3px);
}

body.drumix-media-repertoire .rep-card-main {
	padding: 22px;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 18px;
}

body.drumix-media-repertoire .rep-cover {
	width: 96px;
	height: 96px;
	border-radius: 22px;
	background: linear-gradient(145deg, #4b2b20, var(--drumix-color-primary));
	color: var(--drumix-color-on-primary);
	font-size: 34px;
	box-shadow: 0 13px 28px rgba(35, 24, 18, .2);
}

body.drumix-media-repertoire .rep-song-title {
	font-size: 22px;
}

body.drumix-media-repertoire .rep-status {
	background: var(--drumix-color-primary-soft);
	color: var(--drumix-color-primary);
}

body.drumix-media-repertoire .rep-card[data-status="ready"] .rep-status {
	background: var(--drumix-color-success-soft);
	color: var(--drumix-color-success);
}

body.drumix-media-repertoire .rep-card[data-status="review"] .rep-status {
	background: var(--drumix-color-warning-soft);
	color: var(--drumix-color-warning);
}

body.drumix-media-repertoire .rep-card-action {
	min-height: 46px;
	padding: 10px 17px;
	border-radius: 13px;
}

body.drumix-media-repertoire :where(.rep-card-link, .rep-card-expand, .rep-results-head button) {
	color: var(--drumix-color-primary);
}

body.drumix-media-repertoire .rep-parts {
	background: var(--drumix-color-surface-soft);
}

body.drumix-media-repertoire :where(.rep-loading, .rep-auth, .rep-error, .rep-empty, .rep-no-results) {
	border: 0;
	border-radius: 26px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

/* Сегодня */
body.drumix-media-today .today-page {
	width: min(var(--drumix-media-page-width), calc(100% - 48px));
	max-width: var(--drumix-media-page-width);
	padding: 44px 0 110px;
}

body.drumix-media-today .today-heading {
	align-items: center;
	margin-bottom: 27px;
}

body.drumix-media-today .today-kicker,
body.drumix-media-today .today-section-label,
body.drumix-media-today .today-card-label {
	color: var(--drumix-color-primary);
}

body.drumix-media-today .today-heading h1 {
	max-width: 900px;
	font-size: clamp(42px, 5vw, 64px);
	line-height: 1;
	letter-spacing: -.055em;
}

body.drumix-media-today .today-lead {
	max-width: 680px;
	margin-top: 12px;
	font-size: 17px;
}

body.drumix-media-today .today-refresh {
	min-height: 46px;
	padding: 0 16px;
	border-color: var(--drumix-color-border);
	border-radius: 14px;
	background: var(--drumix-color-surface);
	color: var(--drumix-color-text);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-today .today-refresh > .drumix-beatline-icon {
	color: var(--drumix-color-primary);
}

body.drumix-media-today .today-primary-card {
	min-height: 390px;
	padding: 42px;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: 46px;
	border: 0;
	border-radius: 32px;
	background:
		radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--drumix-color-primary) 24%, transparent), transparent 28rem),
		linear-gradient(132deg, #211612, #352017 70%, #1d1512);
	color: #fff;
	box-shadow: 0 24px 76px rgba(41, 24, 16, .26);
}

body.drumix-media-today .today-primary-card h2 {
	font-size: clamp(40px, 4.2vw, 58px);
	letter-spacing: -.055em;
}

body.drumix-media-today .today-primary-reason,
body.drumix-media-today .today-primary-author,
body.drumix-media-today .today-primary-explanation,
body.drumix-media-today .today-primary-meta,
body.drumix-media-today .today-progress-top {
	color: rgba(255, 255, 255, .72);
}

body.drumix-media-today .today-primary-target {
	font-size: 17px;
}

body.drumix-media-today .today-primary-meta span {
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

body.drumix-media-today .today-primary-progress {
	border-color: rgba(255, 255, 255, .12);
}

body.drumix-media-today .today-progress-track {
	background: rgba(255, 255, 255, .13);
}

body.drumix-media-today .today-progress-track span {
	background: linear-gradient(90deg, var(--drumix-color-primary), #ffb18f);
}

body.drumix-media-today .today-primary-card .today-button-primary {
	border-color: #c94b1e;
	background: #c94b1e;
	color: #fff;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .2) !important;
}

body.drumix-media-today .today-primary-card .today-button-primary:hover {
	border-color: #a83b12;
	background: #a83b12;
	color: #fff;
}

body.drumix-media-today .today-primary-card .today-button-secondary {
	border-color: rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

body.drumix-media-today .today-primary-art {
	width: 250px;
	border-color: rgba(255, 255, 255, .13);
	border-radius: 28px;
	background:
		linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035)),
		color-mix(in srgb, var(--drumix-color-primary) 24%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.drumix-media-today .today-art-mark {
	color: #ff9b70;
}

body.drumix-media-today .today-goal {
	margin-top: 18px;
	padding: 25px 27px;
	border: 0;
	border-radius: 24px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-today .today-goal-track span {
	background: linear-gradient(90deg, var(--drumix-color-primary), color-mix(in srgb, var(--drumix-color-primary) 45%, var(--drumix-color-success)));
}

body.drumix-media-today .today-secondary,
body.drumix-media-today .today-suggestions {
	margin-top: 42px;
}

body.drumix-media-today .today-section-head h2 {
	font-size: 30px;
}

body.drumix-media-today .today-secondary-grid {
	gap: 16px;
}

body.drumix-media-today .today-secondary-card {
	min-height: 264px;
	padding: 22px;
	border: 0;
	border-radius: 22px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-today .today-secondary-icon,
body.drumix-media-today .today-suggestion-art,
body.drumix-media-today .today-quick-links a > span {
	background: var(--drumix-color-primary-soft);
	color: var(--drumix-color-primary);
}

body.drumix-media-today .today-secondary-card .today-button-secondary {
	border-color: var(--drumix-color-border);
	background: var(--drumix-color-surface-soft);
	color: var(--drumix-color-text);
}

body.drumix-media-today .today-suggestion-card {
	min-height: 82px;
	border: 0;
	border-radius: 20px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-today .today-suggestion-card button {
	background: var(--drumix-color-primary);
	color: var(--drumix-color-on-primary);
}

body.drumix-media-today .today-plan-controls {
	margin-top: 38px;
	border-color: var(--drumix-color-border);
}

body.drumix-media-today .today-button-quiet,
body.drumix-media-today .today-section-head > a {
	color: var(--drumix-color-primary);
}

body.drumix-media-today .today-quick-links a {
	border: 0;
	border-radius: 20px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-today :where(.today-auth, .today-loading, .today-empty, .today-error) {
	border: 0;
	border-radius: 28px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-today .today-auth-form-wrap {
	border-color: var(--drumix-color-border);
	background: var(--drumix-color-surface-soft);
}

body.drumix-media-today .today-auth-tabs button.active {
	background: var(--drumix-color-surface-raised);
}

/* Тёмная тема: отдельная композиция поверхностей, а не инверсия. */
html.pb-public-dark body.drumix-media-catalog .cat-hero {
	background:
		linear-gradient(112deg, #191719 0 58%, transparent 74%),
		var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

html.pb-public-dark body.drumix-media-catalog .cat-popular-item,
html.pb-public-dark body.drumix-media-catalog .cat-item,
html.pb-public-dark body.drumix-media-catalog .cat-request-card,
html.pb-public-dark body.drumix-media-catalog .cat-seo,
html.pb-public-dark body.drumix-media-catalog .cat-level select,
html.pb-public-dark body.drumix-media-catalog .cat-alphabet-block {
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

html.pb-public-dark body.drumix-media-catalog .cat-view-btn.on,
html.pb-public-dark body.drumix-media-catalog .cat-letter-btn.on,
html.pb-public-dark body.drumix-media-catalog .cat-popular-tab.on {
	border-color: var(--drumix-color-primary);
	background: var(--drumix-color-primary);
	color: var(--drumix-color-on-primary);
}

html.pb-public-dark body.drumix-media-catalog .cat-findbar {
	background: rgba(11, 11, 12, .88);
}

html.pb-public-dark body.drumix-media-catalog .cat-item-state {
	background: var(--drumix-color-primary-soft);
	color: var(--drumix-color-primary);
}

html.pb-public-dark body.drumix-media-repertoire .rep-overview {
	background:
		linear-gradient(120deg, var(--drumix-color-surface), color-mix(in srgb, var(--drumix-color-primary) 12%, var(--drumix-color-surface)));
}

html.pb-public-dark body.drumix-media-repertoire .rep-tools {
	background: rgba(11, 11, 12, .87);
}

html.pb-public-dark body.drumix-media-repertoire .rep-card,
html.pb-public-dark body.drumix-media-repertoire .rep-search {
	background: var(--drumix-color-surface);
}

html.pb-public-dark body.drumix-media-today .today-primary-card {
	background:
		radial-gradient(circle at 82% 16%, rgba(244, 122, 69, .24), transparent 28rem),
		linear-gradient(132deg, #1b1110, #2a1813 68%, #151112);
}

/* Tablet и mobile */
@media (max-width: 1180px) and (min-width: 1024px) {
	html.drumix-design[data-drumix-media-design] {
		--drumix-nav-width: 184px;
	}

	body.drumix-media-page .drumix-nav-logo img {
		width: 140px;
	}

	body.drumix-media-catalog .cat-item-link {
		grid-template-columns: 96px minmax(0, 1fr);
	}

	body.drumix-media-catalog .cat-cover {
		width: 82px;
		height: 82px;
	}

	body.drumix-media-catalog .cat-item-action {
		grid-column: 2;
		justify-content: flex-start;
	}

	body.drumix-media-catalog .cat-fav {
		left: 68px;
		top: 68px;
	}

	body.drumix-media-repertoire .rep-card-main {
		grid-template-columns: 86px minmax(0, 1fr);
	}

	body.drumix-media-repertoire .rep-cover {
		width: 80px;
		height: 80px;
	}
}

@media (max-width: 1023px) {
	html.drumix-design[data-drumix-media-design] {
		--drumix-nav-mobile-height: 70px;
	}

	body.drumix-media-page :where(.cat-top-in, .today-top-in, .rep-top-in) {
		width: 100%;
		height: 66px;
		padding-right: max(14px, env(safe-area-inset-right, 0px));
		padding-left: max(14px, env(safe-area-inset-left, 0px));
	}

	body.drumix-media-page .drumix-nav-mobile {
		height: calc(var(--drumix-nav-mobile-height) + env(safe-area-inset-bottom, 0px));
		padding-top: 6px;
		border-color: var(--drumix-color-border);
		background: color-mix(in srgb, var(--drumix-color-surface) 94%, transparent);
		box-shadow: 0 -12px 36px rgba(30, 22, 18, .08);
	}

	body.drumix-media-page .drumix-nav-mobile .drumix-nav-item {
		min-height: 54px;
		border-radius: 13px;
		color: var(--drumix-color-muted);
	}

	body.drumix-media-page .drumix-nav-mobile .drumix-nav-item.is-active {
		background: var(--drumix-color-primary-soft);
		color: var(--drumix-color-primary);
	}

	body.drumix-media-page .pbPublicThemeToggle {
		width: 44px;
		height: 44px;
	}

	body.drumix-media-catalog .cat-wrap,
	body.drumix-media-repertoire .rep-page,
	body.drumix-media-today .today-page {
		width: 100%;
		padding-right: max(16px, env(safe-area-inset-right, 0px));
		padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
		padding-left: max(16px, env(safe-area-inset-left, 0px));
	}

	body.drumix-media-catalog .cat-wrap {
		padding-top: 18px;
	}

	body.drumix-media-catalog .cat-hero {
		min-height: 0;
		padding: 24px 22px 152px;
		margin-bottom: 22px;
		border-radius: 24px;
	}

	body.drumix-media-catalog .cat-hero-copy {
		max-width: none;
	}

	body.drumix-media-catalog .cat-hero h1 {
		font-size: clamp(32px, 9vw, 42px);
	}

	body.drumix-media-catalog .cat-hero-lead {
		font-size: 15px;
	}

	body.drumix-media-catalog .cat-hero-photo {
		inset: auto 14px 14px;
		width: auto;
		height: 122px;
		border-radius: 18px;
	}

	body.drumix-media-catalog .cat-find-btn {
		width: 100%;
	}

	body.drumix-media-catalog .cat-spirit-note {
		margin: 0 2px 28px;
		font-size: 13px;
	}

	body.drumix-media-catalog .cat-popular {
		margin-bottom: 31px;
	}

	body.drumix-media-catalog .cat-popular-head h2 {
		font-size: 25px;
	}

	body.drumix-media-catalog .cat-popular-list {
		grid-auto-columns: minmax(238px, 84vw);
		margin-right: -16px;
		padding-right: 16px;
	}

	body.drumix-media-catalog .cat-directory-head h2 {
		font-size: 29px;
	}

	body.drumix-media-catalog .cat-findbar {
		top: 66px;
		margin: 0 -16px;
		padding: 9px 16px;
		border-width: 1px 0;
		border-radius: 0;
	}

	body.drumix-media-catalog .cat-search input {
		height: 50px;
	}

	body.drumix-media-catalog .cat-filter-row {
		gap: 9px;
	}

	body.drumix-media-catalog .cat-view-toggle {
		min-width: 0;
	}

	body.drumix-media-catalog .cat-alphabet-block {
		box-shadow: none;
	}

	body.drumix-media-catalog .cat-list {
		grid-template-columns: 1fr;
	}

	body.drumix-media-catalog .cat-item {
		min-height: 0;
		padding: 14px;
		border-radius: 20px;
	}

	body.drumix-media-catalog .cat-item-link {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 13px;
	}

	body.drumix-media-catalog .cat-cover {
		width: 78px;
		height: 78px;
		border-radius: 19px;
		font-size: 28px;
	}

	body.drumix-media-catalog .cat-fav {
		left: 61px;
		top: 61px;
	}

	body.drumix-media-catalog .cat-item-title {
		font-size: 17px;
	}

	body.drumix-media-catalog .cat-item-action {
		grid-column: 2;
		justify-content: flex-start;
	}

	body.drumix-media-catalog .cat-request-card {
		align-items: stretch;
		flex-direction: column;
	}

	body.drumix-media-catalog .cat-request-actions {
		width: 100%;
	}

	body.drumix-media-catalog .cat-request-btn {
		flex: 1 1 0;
		min-height: 44px;
	}

	body.drumix-media-catalog .cat-seo-grid {
		grid-template-columns: 1fr;
	}

	body.drumix-media-repertoire .rep-page {
		padding-top: 27px;
	}

	body.drumix-media-repertoire .rep-heading {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: 24px;
	}

	body.drumix-media-repertoire .rep-heading h1 {
		font-size: clamp(36px, 10vw, 48px);
	}

	body.drumix-media-repertoire .rep-heading p:last-child {
		font-size: 15px;
	}

	body.drumix-media-repertoire .rep-add {
		width: 100%;
	}

	body.drumix-media-repertoire .rep-overview {
		padding: 23px;
		align-items: flex-start;
		flex-direction: column;
	}

	body.drumix-media-repertoire .rep-overview h2 {
		font-size: 26px;
	}

	body.drumix-media-repertoire .rep-overview > p {
		max-width: none;
		text-align: left;
	}

	body.drumix-media-repertoire .rep-tools {
		top: 75px;
		margin-right: -16px;
		margin-left: -16px;
		padding: 10px 16px;
		border-width: 1px 0;
		border-radius: 0;
	}

	body.drumix-media-repertoire .rep-grid {
		grid-template-columns: 1fr;
	}

	body.drumix-media-repertoire .rep-card {
		border-radius: 21px;
	}

	body.drumix-media-repertoire .rep-card-main {
		padding: 18px;
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 14px;
	}

	body.drumix-media-repertoire .rep-cover {
		width: 78px;
		height: 78px;
		border-radius: 19px;
		font-size: 28px;
	}

	body.drumix-media-repertoire .rep-card-top {
		align-items: flex-start;
		flex-direction: column;
	}

	body.drumix-media-repertoire .rep-song-title {
		font-size: 20px;
	}

	body.drumix-media-repertoire .rep-card-actions {
		display: grid;
		grid-template-columns: 1fr auto;
	}

	body.drumix-media-repertoire .rep-card-action {
		width: 100%;
	}

	body.drumix-media-repertoire .rep-card-expand {
		margin-left: 0;
	}

	body.drumix-media-today .today-page {
		padding-top: 26px;
	}

	body.drumix-media-today .today-heading {
		align-items: flex-start;
		margin-bottom: 20px;
	}

	body.drumix-media-today .today-heading h1 {
		max-width: 310px;
		font-size: clamp(34px, 9.4vw, 42px);
	}

	body.drumix-media-today .today-lead {
		max-width: 310px;
		font-size: 14px;
	}

	body.drumix-media-today .today-refresh {
		width: 44px;
		min-width: 44px;
		height: 44px;
		padding: 0;
	}

	body.drumix-media-today .today-primary-card {
		min-height: 0;
		padding: 27px 22px 23px;
		grid-template-columns: 1fr;
		gap: 22px;
		border-radius: 25px;
	}

	body.drumix-media-today .today-primary-card h2 {
		font-size: clamp(34px, 10.5vw, 45px);
	}

	body.drumix-media-today .today-primary-art {
		display: none;
	}

	body.drumix-media-today .today-primary-actions {
		grid-template-columns: 1fr;
	}

	body.drumix-media-today .today-primary-actions .today-button {
		min-height: 50px;
	}

	body.drumix-media-today .today-goal {
		padding: 21px 18px;
	}

	body.drumix-media-today .today-secondary,
	body.drumix-media-today .today-suggestions {
		margin-top: 32px;
	}

	body.drumix-media-today .today-section-head h2 {
		font-size: 25px;
	}

	body.drumix-media-today .today-secondary-card,
	body.drumix-media-today .today-suggestion-card,
	body.drumix-media-today .today-quick-links a {
		border-radius: 19px;
	}

	body.drumix-media-today .today-auth {
		border-radius: 24px;
	}
}

@media (max-width: 430px) {
	body.drumix-media-catalog .cat-filter-row {
		align-items: stretch;
		flex-direction: column;
	}

	body.drumix-media-catalog .cat-view-toggle,
	body.drumix-media-catalog .cat-level {
		width: 100%;
		flex-basis: auto;
	}

	body.drumix-media-catalog .cat-level > span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	body.drumix-media-repertoire .rep-card-main {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	body.drumix-media-repertoire .rep-cover {
		width: 66px;
		height: 66px;
	}

	body.drumix-media-repertoire .rep-card-actions {
		grid-template-columns: 1fr;
	}

	body.drumix-media-repertoire .rep-card-link,
	body.drumix-media-repertoire .rep-card-expand {
		width: 100%;
		justify-content: flex-start;
	}
}

@media (max-width: 1023px) and (orientation: landscape) and (max-height: 540px) {
	body.drumix-media-catalog .cat-hero {
		padding: 20px calc(42% + 30px) 20px 22px;
	}

	body.drumix-media-catalog .cat-hero-photo {
		inset: 12px 12px 12px auto;
		width: 40%;
		height: auto;
	}

	body.drumix-media-catalog .cat-hero h1 {
		font-size: 30px;
	}

	body.drumix-media-catalog .cat-hero-lead {
		font-size: 13px;
	}

	body.drumix-media-today .today-heading h1 {
		max-width: none;
		font-size: 32px;
	}

	body.drumix-media-today .today-primary-card {
		padding: 22px;
		grid-template-columns: minmax(0, 1fr) 150px;
	}

	body.drumix-media-today .today-primary-art {
		display: flex;
		width: 145px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.drumix-media-page *,
	body.drumix-media-page *::before,
	body.drumix-media-page *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/*
 * Photo-reference refinement · 2026-07-28
 *
 * The reference is used only as a visual shell. Existing page structure,
 * data, controls and event hooks stay unchanged; controls that do not exist
 * in the product are deliberately not recreated as decoration.
 */
html.drumix-design[data-drumix-media-design] {
	--drumix-color-primary: #ff5a00;
	--drumix-color-primary-hover: #e95000;
	--drumix-color-primary-soft: rgba(255, 90, 0, .09);
	--drumix-color-focus: #ff6a16;
	--drumix-color-on-primary: #fff;
	--drumix-color-background: #fbfbfb;
	--drumix-color-surface: #fff;
	--drumix-color-surface-soft: #f5f5f5;
	--drumix-color-surface-raised: #fff;
	--drumix-color-border: #e6e6e6;
	--drumix-color-text: #111;
	--drumix-color-muted: #6f7074;
	--drumix-color-warm: #ff5a00;
	--drumix-color-warm-soft: rgba(255, 90, 0, .09);
	--drumix-shadow-card: 0 3px 14px rgba(17, 17, 17, .045);
	--drumix-shadow-raised: 0 8px 24px rgba(17, 17, 17, .08);
	--drumix-shadow-primary: 0 6px 16px rgba(255, 90, 0, .18);
	--drumix-media-page-width: 1080px;
}

html.drumix-design[data-drumix-media-design].pb-public-dark {
	--drumix-color-primary: #ff6500;
	--drumix-color-primary-hover: #ff7a1a;
	--drumix-color-primary-soft: rgba(255, 101, 0, .14);
	--drumix-color-focus: #ff8a38;
	--drumix-color-on-primary: #fff;
	--drumix-color-background: #08090a;
	--drumix-color-surface: #111214;
	--drumix-color-surface-soft: #18191b;
	--drumix-color-surface-raised: #1c1d1f;
	--drumix-color-border: rgba(255, 255, 255, .11);
	--drumix-color-text: #f5f5f5;
	--drumix-color-muted: #a5a5a8;
	--drumix-color-warm: #ff6500;
	--drumix-color-warm-soft: rgba(255, 101, 0, .14);
	--drumix-shadow-card: none;
	--drumix-shadow-raised: 0 8px 24px rgba(0, 0, 0, .28);
	--drumix-shadow-primary: 0 6px 18px rgba(0, 0, 0, .28);
}

body.drumix-media-page {
	background: var(--drumix-color-background);
}

body.drumix-media-page :where(
	.cat-find-btn,
	.cat-request-btn:not(.secondary),
	.cat-auth-submit,
	.cat-songreq-submit,
	.cat-suggest-submit,
	.rep-add,
	.rep-primary,
	.rep-card-action,
	.today-button-primary
) {
	box-shadow: var(--drumix-shadow-primary) !important;
}

body.drumix-media-page :where(.cat-top, .today-top, .rep-top) {
	border-color: var(--drumix-color-border);
	background: color-mix(in srgb, var(--drumix-color-background) 96%, transparent);
	-webkit-backdrop-filter: saturate(130%) blur(16px);
	backdrop-filter: saturate(130%) blur(16px);
}

body.drumix-media-page :where(.cat-top-in, .today-top-in, .rep-top-in) {
	width: min(var(--drumix-media-page-width), calc(100% - 32px));
	height: 68px;
}

body.drumix-media-page :where(.cat-brand, .today-brand, .rep-brand) b {
	font-size: 16px;
}

body.drumix-media-page .pbPublicThemeToggle {
	min-height: 40px;
	padding: 8px 13px;
	border-radius: 11px;
	box-shadow: none;
}

.drumix-media-premium {
	display: none;
}

@media (min-width: 1024px) {
	html.drumix-design[data-drumix-media-design] {
		--drumix-nav-width: 206px;
	}

	body.drumix-media-page .drumix-nav-rail {
		padding: max(13px, env(safe-area-inset-top, 0px)) 10px max(13px, env(safe-area-inset-bottom, 0px));
		padding-bottom: max(176px, calc(162px + env(safe-area-inset-bottom, 0px)));
		gap: 3px;
		background: color-mix(in srgb, var(--drumix-color-surface) 98%, transparent);
		box-shadow: none;
	}

	body.drumix-media-page .drumix-nav-logo {
		height: 58px;
		flex-basis: 58px;
		margin: 0 5px 13px;
		padding: 8px 9px;
		border-radius: 10px;
	}

	body.drumix-media-page .drumix-nav-logo img {
		width: 150px;
		height: 38px;
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-item {
		min-height: 42px;
		flex-basis: 42px;
		padding: 7px 10px;
		gap: 10px;
		border-radius: 9px;
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-item span {
		font-size: 12px;
		font-weight: 680;
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-icon {
		width: 20px;
		height: 20px;
		flex-basis: 20px;
	}

	body.drumix-media-page .drumix-nav-rail .drumix-nav-item.is-active::before {
		left: -10px;
		top: 7px;
		bottom: 7px;
		width: 3px;
	}

	body.drumix-media-page .drumix-media-premium {
		position: fixed;
		z-index: 1002;
		left: 11px;
		bottom: max(13px, env(safe-area-inset-bottom, 0px));
		width: calc(var(--drumix-nav-width) - 22px);
		min-height: 146px;
		padding: 14px;
		display: flex;
		flex-direction: column;
		border: 1px solid color-mix(in srgb, var(--drumix-color-primary) 38%, var(--drumix-color-border));
		border-radius: 11px;
		background:
			linear-gradient(145deg, color-mix(in srgb, var(--drumix-color-primary) 10%, var(--drumix-color-surface)), var(--drumix-color-surface));
		color: var(--drumix-color-text);
		box-shadow: var(--drumix-shadow-card);
	}

	body.drumix-media-page .drumix-media-premium-title {
		display: flex;
		align-items: center;
		gap: 7px;
		color: var(--drumix-color-primary);
		font-size: 13px;
	}

	body.drumix-media-page .drumix-media-premium-title > span {
		font-size: 18px;
		line-height: 1;
	}

	body.drumix-media-page .drumix-media-premium p {
		margin: 11px 0 13px;
		color: var(--drumix-color-muted);
		font-size: 10px;
		line-height: 1.45;
	}

	body.drumix-media-page .drumix-media-premium-coming {
		min-height: 34px;
		margin-top: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		background: var(--drumix-color-primary);
		color: #fff;
		font-size: 11px;
		font-weight: 780;
	}
}

/* Catalog keeps its current information architecture and adopts only the shell. */
body.drumix-media-catalog .cat-wrap {
	width: min(var(--drumix-media-page-width), calc(100% - 32px));
	padding: 24px 0 88px;
}

body.drumix-media-catalog .cat-hero {
	min-height: 308px;
	margin-bottom: 25px;
	padding: 36px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 16px;
	background: var(--drumix-color-surface);
	box-shadow: var(--drumix-shadow-card);
}

body.drumix-media-catalog .cat-hero::before {
	display: none;
}

body.drumix-media-catalog .cat-hero-copy {
	max-width: 57%;
}

body.drumix-media-catalog .cat-hero-photo {
	inset: 14px 14px 14px auto;
	width: 40%;
	border-radius: 12px;
	box-shadow: none;
}

body.drumix-media-catalog .cat-hero h1 {
	max-width: 560px;
	font-size: clamp(38px, 4vw, 50px);
	line-height: 1.02;
	letter-spacing: -.045em;
}

body.drumix-media-catalog .cat-hero-lead {
	margin-top: 15px;
	font-size: 15px;
	line-height: 1.45;
}

body.drumix-media-catalog .cat-find-btn {
	min-height: 44px;
	padding: 0 19px;
	border-radius: 10px;
	font-size: 14px;
}

body.drumix-media-catalog .cat-spirit-note {
	margin: -3px 4px 28px;
	font-size: 13px;
}

body.drumix-media-catalog .cat-popular {
	margin-bottom: 32px;
}

body.drumix-media-catalog .cat-popular-head h2 {
	font-size: 23px;
}

body.drumix-media-catalog .cat-popular-tab {
	border-radius: 9px;
}

body.drumix-media-catalog .cat-popular-item {
	min-height: 78px;
	padding: 10px;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 11px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 11px;
	box-shadow: none;
}

body.drumix-media-catalog .cat-popular-rank {
	width: 54px;
	height: 54px;
	border-radius: 9px;
}

body.drumix-media-catalog .cat-directory-head h2 {
	font-size: clamp(28px, 3vw, 35px);
}

body.drumix-media-catalog .cat-findbar {
	top: 68px;
	margin: 0;
	padding: 10px;
	border-color: var(--drumix-color-border);
	border-radius: 12px;
	background: color-mix(in srgb, var(--drumix-color-background) 96%, transparent);
}

body.drumix-media-catalog .cat-search input {
	height: 46px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 10px;
	box-shadow: none;
}

body.drumix-media-catalog .cat-level select,
body.drumix-media-catalog .cat-alphabet-block {
	border: 1px solid var(--drumix-color-border);
	border-radius: 10px;
	box-shadow: none;
}

body.drumix-media-catalog .cat-list {
	gap: 10px;
}

body.drumix-media-catalog .cat-item {
	min-height: 128px;
	padding: 12px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 12px;
	box-shadow: none;
}

body.drumix-media-catalog .cat-item:hover {
	border-color: color-mix(in srgb, var(--drumix-color-primary) 42%, var(--drumix-color-border));
	box-shadow: var(--drumix-shadow-raised);
	transform: translateY(-1px);
}

body.drumix-media-catalog .cat-item-link {
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: 13px;
}

body.drumix-media-catalog .cat-cover {
	width: 76px;
	height: 76px;
	border-radius: 10px;
	font-size: 27px;
	box-shadow: none;
}

body.drumix-media-catalog .cat-fav {
	left: 62px;
	top: 62px;
}

body.drumix-media-catalog .cat-item-title {
	font-size: 16px;
}

body.drumix-media-catalog .cat-item-action {
	min-width: 98px;
}

body.drumix-media-catalog .cat-request-card,
body.drumix-media-catalog .cat-seo {
	border: 1px solid var(--drumix-color-border);
	border-radius: 12px;
	box-shadow: none;
}

@media (min-width: 1024px) {
	body.drumix-media-catalog #catBody {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: start;
		gap: 11px;
	}

	body.drumix-media-catalog #catBody > .cat-letter-section {
		min-width: 0;
		margin-bottom: 0;
	}

	body.drumix-media-catalog #catBody .cat-letter-hd {
		min-height: 32px;
		margin: 0 1px 7px;
		gap: 7px;
	}

	body.drumix-media-catalog #catBody .cat-letter-mark {
		min-width: 30px;
		height: 30px;
		padding: 0 7px;
		border-radius: 7px;
		font-size: 13px;
	}

	body.drumix-media-catalog #catBody .cat-letter-note {
		overflow: hidden;
		font-size: 10px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.drumix-media-catalog #catBody .cat-group {
		margin-bottom: 0;
	}

	body.drumix-media-catalog #catBody .cat-group-hd {
		min-height: 28px;
		padding: 0 2px 7px;
		font-size: 12px;
	}

	body.drumix-media-catalog #catBody .cat-group-count {
		font-size: 9px;
	}

	body.drumix-media-catalog #catBody .cat-list {
		grid-template-columns: 1fr;
	}

	body.drumix-media-catalog #catBody .cat-item {
		height: 100%;
		min-height: 292px;
		padding: 8px;
	}

	body.drumix-media-catalog #catBody .cat-item-link {
		height: 100%;
		grid-template-columns: 1fr;
		grid-template-rows: 142px minmax(0, 1fr) auto;
		align-items: start;
		gap: 9px;
	}

	body.drumix-media-catalog #catBody .cat-cover {
		width: 100%;
		height: 142px;
		border-radius: 9px;
		font-size: 35px;
	}

	body.drumix-media-catalog #catBody .cat-item-main {
		width: 100%;
	}

	body.drumix-media-catalog #catBody .cat-item-title {
		font-size: 15px;
		white-space: normal;
	}

	body.drumix-media-catalog #catBody .cat-item-drum-note {
		margin-top: 6px;
		font-size: 10px;
		-webkit-line-clamp: 3;
	}

	body.drumix-media-catalog #catBody .cat-item-action {
		width: 100%;
		min-width: 0;
		min-height: 36px;
		padding: 7px 9px;
		justify-content: space-between;
		border: 1px solid var(--drumix-color-border);
		border-radius: 8px;
		background: var(--drumix-color-surface-soft);
	}

	body.drumix-media-catalog #catBody .cat-fav {
		left: auto;
		top: 16px;
		right: 16px;
	}

	body.drumix-media-catalog #catBody :where(.cat-empty, .cat-loading) {
		grid-column: 1 / -1;
	}
}

/* Repertoire: the same controls, arranged as the compact media list. */
body.drumix-media-repertoire .rep-page {
	width: min(var(--drumix-media-page-width), calc(100% - 32px));
	padding: 29px 0 88px;
}

body.drumix-media-repertoire .rep-heading {
	align-items: flex-end;
	margin-bottom: 20px;
}

body.drumix-media-repertoire .rep-heading h1 {
	font-size: clamp(34px, 3.5vw, 42px);
	letter-spacing: -.04em;
}

body.drumix-media-repertoire .rep-heading p:last-child {
	margin-top: 7px;
	font-size: 14px;
}

body.drumix-media-repertoire .rep-add {
	min-height: 44px;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 13px;
}

body.drumix-media-repertoire .rep-overview {
	min-height: 92px;
	margin-bottom: 12px;
	padding: 18px 20px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 11px;
	background: var(--drumix-color-surface);
	box-shadow: none;
}

body.drumix-media-repertoire .rep-overview h2 {
	font-size: 24px;
}

body.drumix-media-repertoire .rep-overview > p {
	font-size: 13px;
}

body.drumix-media-repertoire .rep-tools {
	top: 76px;
	margin-bottom: 10px;
	padding: 9px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--drumix-color-background) 96%, transparent);
	box-shadow: none;
}

body.drumix-media-repertoire .rep-search {
	height: 44px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 9px;
	box-shadow: none;
}

body.drumix-media-repertoire .rep-search input {
	font-size: 14px;
}

body.drumix-media-repertoire .rep-filters {
	gap: 5px;
	margin-top: 8px;
}

body.drumix-media-repertoire .rep-filter {
	min-height: 38px;
	padding: 7px 11px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 8px;
	background: var(--drumix-color-surface);
	font-size: 12px;
}

body.drumix-media-repertoire .rep-results-head {
	margin-bottom: 7px;
}

body.drumix-media-repertoire .rep-grid {
	grid-template-columns: 1fr;
	gap: 6px;
}

body.drumix-media-repertoire .rep-card {
	border: 1px solid var(--drumix-color-border);
	border-radius: 10px;
	box-shadow: none;
}

body.drumix-media-repertoire .rep-card:hover {
	border-color: color-mix(in srgb, var(--drumix-color-primary) 36%, var(--drumix-color-border));
	box-shadow: var(--drumix-shadow-raised);
	transform: none;
}

body.drumix-media-repertoire .rep-card-main {
	padding: 8px 10px;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

body.drumix-media-repertoire .rep-cover {
	width: 64px;
	height: 64px;
	border-radius: 9px;
	font-size: 23px;
	box-shadow: none;
}

body.drumix-media-repertoire .rep-song-title {
	margin-top: 0;
	font-size: 16px;
}

body.drumix-media-repertoire .rep-artist {
	font-size: 12px;
}

body.drumix-media-repertoire .rep-status {
	max-width: 132px;
	padding: 5px 8px;
	border-radius: 6px;
	font-size: 10px;
}

body.drumix-media-repertoire .rep-card-meta {
	margin-top: 7px;
	gap: 4px 10px;
	font-size: 10px;
}

body.drumix-media-repertoire .rep-card-actions {
	grid-column: 3;
	margin-top: 0;
	flex-wrap: nowrap;
	gap: 4px;
}

body.drumix-media-repertoire .rep-card-action,
body.drumix-media-repertoire .rep-card-link,
body.drumix-media-repertoire .rep-card-expand {
	min-height: 40px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 11px;
	white-space: nowrap;
}

body.drumix-media-repertoire .rep-card-expand {
	margin-left: 0;
}

body.drumix-media-repertoire .rep-parts {
	padding: 6px 86px 13px;
}

body.drumix-media-repertoire :where(.rep-loading, .rep-auth, .rep-error, .rep-empty, .rep-no-results) {
	border: 1px solid var(--drumix-color-border);
	border-radius: 12px;
	box-shadow: none;
}

/* Today: existing recommendation and goal form a compact desktop pair. */
body.drumix-media-today .today-page {
	width: min(var(--drumix-media-page-width), calc(100% - 32px));
	padding: 27px 0 88px;
}

body.drumix-media-today .today-heading {
	margin-bottom: 17px;
}

body.drumix-media-today .today-heading h1 {
	max-width: 780px;
	font-size: clamp(36px, 3.8vw, 48px);
	line-height: 1.04;
	letter-spacing: -.045em;
}

body.drumix-media-today .today-lead {
	margin-top: 7px;
	font-size: 14px;
}

body.drumix-media-today .today-refresh {
	min-height: 42px;
	padding: 0 13px;
	border-radius: 10px;
	box-shadow: none;
}

body.drumix-media-today .today-content {
	display: grid;
	grid-template-columns: minmax(0, 2.35fr) minmax(236px, .85fr);
	align-items: stretch;
	gap: 12px;
}

body.drumix-media-today .today-primary-wrap {
	min-width: 0;
	grid-column: 1;
	grid-row: 1;
}

body.drumix-media-today .today-primary-card {
	height: 100%;
	min-height: 306px;
	padding: 22px;
	grid-template-columns: minmax(0, 1fr) 158px;
	gap: 18px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 12px;
	background: var(--drumix-color-surface);
	color: var(--drumix-color-text);
	box-shadow: none;
}

body.drumix-media-today .today-primary-card h2 {
	font-size: clamp(30px, 3vw, 36px);
	letter-spacing: -.045em;
}

body.drumix-media-today .today-primary-reason,
body.drumix-media-today .today-primary-author,
body.drumix-media-today .today-primary-explanation,
body.drumix-media-today .today-primary-meta,
body.drumix-media-today .today-progress-top {
	color: var(--drumix-color-muted);
}

body.drumix-media-today .today-primary-target {
	color: var(--drumix-color-text);
	font-size: 14px;
}

body.drumix-media-today .today-primary-explanation {
	font-size: 12px;
}

body.drumix-media-today .today-primary-meta {
	gap: 5px;
}

body.drumix-media-today .today-primary-meta span {
	padding: 5px 8px;
	border-color: var(--drumix-color-border);
	background: var(--drumix-color-surface-soft);
	color: var(--drumix-color-text);
	font-size: 10px;
}

body.drumix-media-today .today-primary-progress {
	border-color: var(--drumix-color-border);
}

body.drumix-media-today .today-progress-track {
	background: var(--drumix-color-surface-soft);
}

body.drumix-media-today .today-progress-track span {
	background: var(--drumix-color-primary);
}

body.drumix-media-today .today-primary-card .today-button-primary {
	border-color: var(--drumix-color-primary);
	background: var(--drumix-color-primary);
	color: #fff;
	box-shadow: var(--drumix-shadow-primary) !important;
}

body.drumix-media-today .today-primary-card .today-button-primary:hover {
	border-color: var(--drumix-color-primary-hover);
	background: var(--drumix-color-primary-hover);
}

body.drumix-media-today .today-primary-card .today-button-secondary {
	border-color: var(--drumix-color-border);
	background: var(--drumix-color-surface-soft);
	color: var(--drumix-color-text);
}

body.drumix-media-today .today-primary-actions {
	gap: 7px;
}

body.drumix-media-today .today-primary-actions .today-button {
	min-height: 42px;
	padding: 9px 13px;
	border-radius: 8px;
	font-size: 12px;
}

body.drumix-media-today .today-primary-art {
	width: 158px;
	min-height: 100%;
	border-color: var(--drumix-color-border);
	border-radius: 10px;
	background:
		linear-gradient(150deg, color-mix(in srgb, var(--drumix-color-primary) 14%, var(--drumix-color-surface)), var(--drumix-color-surface-soft));
	box-shadow: none;
}

body.drumix-media-today .today-art-mark {
	color: var(--drumix-color-primary);
}

body.drumix-media-today .today-art-copy b {
	color: var(--drumix-color-text);
}

body.drumix-media-today .today-art-copy span {
	color: var(--drumix-color-muted);
}

body.drumix-media-today .today-goal {
	min-width: 0;
	min-height: 306px;
	margin-top: 0;
	padding: 18px;
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--drumix-color-border);
	border-radius: 12px;
	box-shadow: none;
}

body.drumix-media-today .today-goal-main {
	align-items: flex-start;
	flex-direction: column;
	gap: 9px;
}

body.drumix-media-today .today-goal-main h2 {
	font-size: 20px;
}

body.drumix-media-today .today-goal-main > b {
	color: var(--drumix-color-primary);
	font-size: 21px;
}

body.drumix-media-today .today-goal-track {
	margin-top: 13px;
}

body.drumix-media-today .today-goal-footer {
	margin-top: auto;
	align-items: stretch;
	flex-direction: column;
	gap: 10px;
}

body.drumix-media-today .today-goal-footer > p {
	font-size: 11px;
	line-height: 1.4;
}

body.drumix-media-today .today-goal-settings {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 7px;
}

body.drumix-media-today .today-goal-settings label:first-child {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
}

body.drumix-media-today .today-goal-settings select {
	width: 100%;
	min-width: 0;
}

body.drumix-media-today .today-goal-switch {
	justify-self: start;
}

body.drumix-media-today .today-goal-settings :where(select, button) {
	min-height: 40px;
	border-radius: 8px;
}

body.drumix-media-today .today-secondary,
body.drumix-media-today .today-suggestions,
body.drumix-media-today .today-plan-controls {
	min-width: 0;
	grid-column: 1 / -1;
}

body.drumix-media-today .today-secondary,
body.drumix-media-today .today-suggestions {
	margin-top: 20px;
}

body.drumix-media-today .today-section-head h2 {
	font-size: 22px;
}

body.drumix-media-today .today-secondary-grid {
	gap: 8px;
}

body.drumix-media-today .today-secondary-card {
	min-height: 196px;
	padding: 15px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 10px;
	box-shadow: none;
}

body.drumix-media-today .today-secondary-card h3 {
	font-size: 16px;
}

body.drumix-media-today .today-secondary-card .today-button-secondary {
	min-height: 40px;
	border-radius: 8px;
	font-size: 12px;
}

body.drumix-media-today .today-suggestion-grid {
	gap: 7px;
}

body.drumix-media-today .today-suggestion-card {
	min-height: 70px;
	border: 1px solid var(--drumix-color-border);
	border-radius: 10px;
	box-shadow: none;
}

body.drumix-media-today .today-plan-controls {
	margin-top: 24px;
}

body.drumix-media-today .today-quick-links a {
	border: 1px solid var(--drumix-color-border);
	border-radius: 10px;
	box-shadow: none;
}

html.pb-public-dark body.drumix-media-catalog .cat-hero,
html.pb-public-dark body.drumix-media-repertoire .rep-overview,
html.pb-public-dark body.drumix-media-today .today-primary-card {
	background: var(--drumix-color-surface);
}

html.pb-public-dark body.drumix-media-today .today-primary-reason,
html.pb-public-dark body.drumix-media-today .today-primary-author,
html.pb-public-dark body.drumix-media-today .today-primary-explanation,
html.pb-public-dark body.drumix-media-today .today-primary-meta,
html.pb-public-dark body.drumix-media-today .today-progress-top {
	color: var(--drumix-color-muted);
}

@media (max-width: 1180px) and (min-width: 1024px) {
	html.drumix-design[data-drumix-media-design] {
		--drumix-nav-width: 188px;
		--drumix-media-page-width: 920px;
	}

	body.drumix-media-page .drumix-nav-logo img {
		width: 136px;
	}

	body.drumix-media-repertoire .rep-card-main {
		grid-template-columns: 58px minmax(0, 1fr) auto;
		gap: 9px;
	}

	body.drumix-media-repertoire .rep-cover {
		width: 58px;
		height: 58px;
	}

	body.drumix-media-repertoire .rep-card-action,
	body.drumix-media-repertoire .rep-card-link,
	body.drumix-media-repertoire .rep-card-expand {
		padding-right: 8px;
		padding-left: 8px;
		font-size: 10px;
	}

	body.drumix-media-today .today-content {
		grid-template-columns: minmax(0, 2fr) minmax(220px, .8fr);
	}

	body.drumix-media-today .today-primary-card {
		grid-template-columns: minmax(0, 1fr) 132px;
	}

	body.drumix-media-today .today-primary-art {
		width: 132px;
	}
}

@media (max-width: 1023px) {
	body.drumix-media-page :where(.cat-top-in, .today-top-in, .rep-top-in) {
		height: 64px;
	}

	body.drumix-media-page .drumix-nav-mobile {
		background: color-mix(in srgb, var(--drumix-color-surface) 98%, transparent);
		box-shadow: 0 -5px 18px rgba(0, 0, 0, .07);
	}

	body.drumix-media-catalog .cat-wrap,
	body.drumix-media-repertoire .rep-page,
	body.drumix-media-today .today-page {
		padding-right: max(14px, env(safe-area-inset-right, 0px));
		padding-left: max(14px, env(safe-area-inset-left, 0px));
	}

	body.drumix-media-catalog .cat-hero {
		padding: 24px 22px 148px;
		border-radius: 14px;
	}

	body.drumix-media-catalog .cat-hero-photo {
		border-radius: 10px;
	}

	body.drumix-media-catalog .cat-findbar {
		top: 64px;
		margin-right: -14px;
		margin-left: -14px;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	body.drumix-media-catalog .cat-item {
		border-radius: 10px;
	}

	body.drumix-media-repertoire .rep-page {
		padding-top: 22px;
	}

	body.drumix-media-repertoire .rep-heading h1 {
		font-size: clamp(34px, 7vw, 42px);
	}

	body.drumix-media-repertoire .rep-tools {
		top: 72px;
		margin-right: -14px;
		margin-left: -14px;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	body.drumix-media-repertoire .rep-card-main {
		grid-template-columns: 62px minmax(0, 1fr);
	}

	body.drumix-media-repertoire .rep-cover {
		width: 62px;
		height: 62px;
	}

	body.drumix-media-repertoire .rep-card-actions {
		grid-column: 1 / -1;
		justify-content: flex-end;
	}

	body.drumix-media-repertoire .rep-parts {
		padding: 6px 16px 13px;
	}

	body.drumix-media-today .today-page {
		padding-top: 22px;
	}

	body.drumix-media-today .today-content {
		grid-template-columns: 1fr;
	}

	body.drumix-media-today .today-primary-wrap,
	body.drumix-media-today .today-goal {
		grid-column: 1;
		grid-row: auto;
	}

	body.drumix-media-today .today-primary-card {
		min-height: 0;
		padding: 22px;
		border-radius: 12px;
	}

	body.drumix-media-today .today-goal {
		min-height: 0;
		padding: 17px;
	}

	body.drumix-media-today .today-goal-main {
		align-items: center;
		flex-direction: row;
	}
}

@media (max-width: 680px) {
	body.drumix-media-catalog .cat-hero h1 {
		font-size: 34px;
	}

	body.drumix-media-catalog .cat-item-link {
		grid-template-columns: 78px minmax(0, 1fr);
	}

	body.drumix-media-repertoire .rep-heading {
		display: block;
	}

	body.drumix-media-repertoire .rep-heading h1 {
		font-size: 35px;
	}

	body.drumix-media-repertoire .rep-add {
		width: 100%;
		margin-top: 14px;
	}

	body.drumix-media-repertoire .rep-overview {
		padding: 16px;
	}

	body.drumix-media-repertoire .rep-overview h2 {
		font-size: 21px;
	}

	body.drumix-media-repertoire .rep-card-main {
		padding: 10px;
		grid-template-columns: 58px minmax(0, 1fr);
	}

	body.drumix-media-repertoire .rep-cover {
		width: 58px;
		height: 58px;
	}

	body.drumix-media-repertoire .rep-card-top {
		align-items: flex-start;
		flex-direction: row;
	}

	body.drumix-media-repertoire .rep-song-title {
		font-size: 15px;
	}

	body.drumix-media-repertoire .rep-status {
		max-width: 108px;
		white-space: normal;
	}

	body.drumix-media-repertoire .rep-card-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: stretch;
	}

	body.drumix-media-repertoire .rep-card-action {
		width: 100%;
	}

	body.drumix-media-repertoire .rep-card-expand {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	body.drumix-media-today .today-heading h1 {
		max-width: 300px;
		font-size: 35px;
	}

	body.drumix-media-today .today-primary-card {
		padding: 20px;
		grid-template-columns: 1fr;
	}

	body.drumix-media-today .today-primary-card h2 {
		font-size: 32px;
	}

	body.drumix-media-today .today-primary-art {
		display: none;
	}

	body.drumix-media-today .today-primary-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	body.drumix-media-today .today-primary-actions .today-button {
		min-height: 46px;
	}

	body.drumix-media-today .today-secondary,
	body.drumix-media-today .today-suggestions {
		margin-top: 16px;
	}

	body.drumix-media-today .today-secondary-card {
		min-height: 0;
	}
}

/* Song artwork · local optimized assets, attached only to existing cards. */
html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="grace-kelly"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="grace-kelly"], .rep-card[data-slug="preview-song-5"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":grace-kelly"] {
	--drumix-song-cover: url("../images/song-covers/grace-kelly.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="green-day-boulevard-of-broken-dreams"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="green-day-boulevard-of-broken-dreams"], .rep-card[data-slug="preview-song-3"], .rep-card[data-slug="preview-song-9"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":green-day-boulevard-of-broken-dreams"] {
	--drumix-song-cover: url("../images/song-covers/boulevard-of-broken-dreams.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="stairway-to-heaven"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="stairway-to-heaven"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":stairway-to-heaven"] {
	--drumix-song-cover: url("../images/song-covers/stairway-to-heaven.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="tina-turner-the-best"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="tina-turner-the-best"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":tina-turner-the-best"] {
	--drumix-song-cover: url("../images/song-covers/the-best.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="ya-podnimayu-ruki"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="ya-podnimayu-ruki"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":ya-podnimayu-ruki"] {
	--drumix-song-cover: url("../images/song-covers/ya-podnimayu-ruki.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="polkovniku-nikto-ne-pishet"], .rep-card[data-slug="preview-song-0"], .rep-card[data-slug="preview-song-6"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":polkovniku-nikto-ne-pishet"] {
	--drumix-song-cover: url("../images/song-covers/polkovniku-nikto-ne-pishet.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="bicycle-race"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="bicycle-race"], .rep-card[data-slug="preview-song-1"], .rep-card[data-slug="preview-song-7"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":bicycle-race"] {
	--drumix-song-cover: url("../images/song-covers/bicycle-race.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog :where([data-cat-song="the-final-countdown"], [data-cat-song="the-final-countdown-new-revision"], [data-cat-song="the-final-countdown-europe-kopiya"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="the-final-countdown"], .rep-card[data-slug="the-final-countdown-new-revision"], .rep-card[data-slug="the-final-countdown-europe-kopiya"], .rep-card[data-slug="preview-song-2"], .rep-card[data-slug="preview-song-8"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today :where([data-today-item-key$=":the-final-countdown"], [data-today-item-key$=":the-final-countdown-new-revision"], [data-today-item-key$=":the-final-countdown-europe-kopiya"]) {
	--drumix-song-cover: url("../images/song-covers/the-final-countdown.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="maneskin-supermodel"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="maneskin-supermodel"], .rep-card[data-slug="preview-song-4"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today :where([data-today-item-key$=":maneskin-supermodel"], [data-today-item-key$=":supermodel"]) {
	--drumix-song-cover: url("../images/song-covers/supermodel.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog :where([data-cat-song="nothing-else-matters"], [data-cat-song="nothing-else-matters-chernovik"], [data-cat-song="metallica-nothing-else-matters"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="nothing-else-matters"], .rep-card[data-slug="nothing-else-matters-chernovik"], .rep-card[data-slug="metallica-nothing-else-matters"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today :where([data-today-item-key$=":nothing-else-matters"], [data-today-item-key$=":nothing-else-matters-chernovik"], [data-today-item-key$=":metallica-nothing-else-matters"]) {
	--drumix-song-cover: url("../images/song-covers/nothing-else-matters.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog :where([data-cat-song="pachka-sigaret"], [data-cat-song="pachka-sigaret-chernovik"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="pachka-sigaret"], .rep-card[data-slug="pachka-sigaret-chernovik"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today :where([data-today-item-key$=":pachka-sigaret"], [data-today-item-key$=":pachka-sigaret-chernovik"]) {
	--drumix-song-cover: url("../images/song-covers/pachka-sigaret.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog :where([data-cat-song="smells-like-teen-spirit-3"], [data-cat-song="smells-like-teen-spirit-kopiya"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="smells-like-teen-spirit-3"], .rep-card[data-slug="smells-like-teen-spirit-kopiya"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today :where([data-today-item-key$=":smells-like-teen-spirit-3"], [data-today-item-key$=":smells-like-teen-spirit-kopiya"]) {
	--drumix-song-cover: url("../images/song-covers/smells-like-teen-spirit.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog :where([data-cat-song="back-in-black"], [data-cat-song="back-in-black-chernovik"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="back-in-black"], .rep-card[data-slug="back-in-black-chernovik"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today :where([data-today-item-key$=":back-in-black"], [data-today-item-key$=":back-in-black-chernovik"]) {
	--drumix-song-cover: url("../images/song-covers/back-in-black.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="pmml"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="pmml"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":pmml"] {
	--drumix-song-cover: url("../images/song-covers/pmml.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog :where([data-cat-song="basta-devochka-v-cvetakh-chernovik"], [data-cat-song="devochka-v-cvetah"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="basta-devochka-v-cvetakh-chernovik"], .rep-card[data-slug="devochka-v-cvetah"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today :where([data-today-item-key$=":basta-devochka-v-cvetakh-chernovik"], [data-today-item-key$=":devochka-v-cvetah"]) {
	--drumix-song-cover: url("../images/song-covers/devochka-v-cvetah.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="samyy-luchshiy-den"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="samyy-luchshiy-den"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":samyy-luchshiy-den"] {
	--drumix-song-cover: url("../images/song-covers/samyy-luchshiy-den.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="enter-sandman"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="enter-sandman"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":enter-sandman"] {
	--drumix-song-cover: url("../images/song-covers/enter-sandman.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="deep-purple-smoke-on-the-water"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="deep-purple-smoke-on-the-water"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":deep-purple-smoke-on-the-water"] {
	--drumix-song-cover: url("../images/song-covers/deep-purple-smoke-on-the-water.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="blur-song-2"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="blur-song-2"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":blur-song-2"] {
	--drumix-song-cover: url("../images/song-covers/blur-song-2.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="letyaschey-pohodkoy"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="letyaschey-pohodkoy"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":letyaschey-pohodkoy"] {
	--drumix-song-cover: url("../images/song-covers/letyaschey-pohodkoy.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="moya-igra-basta"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="moya-igra-basta"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":moya-igra-basta"] {
	--drumix-song-cover: url("../images/song-covers/moya-igra-basta.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="eto-vse-ddt"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="eto-vse-ddt"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":eto-vse-ddt"] {
	--drumix-song-cover: url("../images/song-covers/eto-vse-ddt.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="imany-you-will-never-know-chernovik"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="imany-you-will-never-know-chernovik"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":imany-you-will-never-know-chernovik"] {
	--drumix-song-cover: url("../images/song-covers/imany-you-will-never-know.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="bon-jovi-it-s-my-life"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="bon-jovi-it-s-my-life"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":bon-jovi-it-s-my-life"] {
	--drumix-song-cover: url("../images/song-covers/bon-jovi-it-s-my-life.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="sula-fray-proschay-chernovik"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="sula-fray-proschay-chernovik"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":sula-fray-proschay-chernovik"] {
	--drumix-song-cover: url("../images/song-covers/sula-fray-proschay.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="unchain-my-heart-v2"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="unchain-my-heart-v2"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":unchain-my-heart-v2"] {
	--drumix-song-cover: url("../images/song-covers/unchain-my-heart.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="sansara"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="sansara"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":sansara"] {
	--drumix-song-cover: url("../images/song-covers/sansara.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="nirvana-come-as-you-are"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="nirvana-come-as-you-are"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":nirvana-come-as-you-are"] {
	--drumix-song-cover: url("../images/song-covers/nirvana-come-as-you-are.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog :where([data-cat-song="lesnik"], [data-cat-song="lesnik-2"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire :where(.rep-card[data-slug="lesnik"], .rep-card[data-slug="lesnik-2"]),
html.drumix-design[data-drumix-media-design] body.drumix-media-today :where([data-today-item-key$=":lesnik"], [data-today-item-key$=":lesnik-2"]) {
	--drumix-song-cover: url("../images/song-covers/lesnik.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="numb"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="numb"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":numb"] {
	--drumix-song-cover: url("../images/song-covers/numb.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="toxicity"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="toxicity"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":toxicity"] {
	--drumix-song-cover: url("../images/song-covers/toxicity.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="seven-nation-army"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="seven-nation-army"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":seven-nation-army"] {
	--drumix-song-cover: url("../images/song-covers/seven-nation-army.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song="t-n-t"],
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug="t-n-t"],
html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key$=":t-n-t"] {
	--drumix-song-cover: url("../images/song-covers/t-n-t.webp");
	--drumix-song-cover-label: transparent;
	--drumix-song-cover-icon-opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-catalog [data-cat-song] :where(.cat-cover, .cat-popular-rank),
html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-card[data-slug] .rep-cover {
	background-image: var(--drumix-song-cover);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--drumix-song-cover-label);
	text-shadow: none;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key] :where(.today-secondary-icon, .today-suggestion-art) {
	background-image: var(--drumix-song-cover);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--drumix-song-cover-label);
}

html.drumix-design[data-drumix-media-design] body.drumix-media-repertoire .rep-cover.has-song-cover {
	color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-shadow: none;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-today :where(.today-primary-art, .today-secondary-icon, .today-suggestion-art).has-song-cover {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-today :where(.today-primary-art, .today-secondary-icon, .today-suggestion-art).has-song-cover > svg {
	opacity: 0;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key] .today-primary-art {
	background-image:
		linear-gradient(180deg, rgba(5, 7, 10, .04) 38%, rgba(5, 7, 10, .88) 100%),
		var(--drumix-song-cover);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key] :where(.today-art-mark.drumix-beatline-icon, .today-secondary-icon .drumix-beatline-icon, .today-suggestion-art .drumix-beatline-icon) {
	opacity: var(--drumix-song-cover-icon-opacity);
}

html.drumix-design[data-drumix-media-design] body.drumix-media-today [data-today-item-key] .today-primary-art :where(.today-art-copy b, .today-art-copy span) {
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .72);
}