/* Musiveo combined stylesheet: musiveo-block-visibility, musiveo-theme-extended, musiveo-theme-extended-fx, musiveo-custom, musiveo-refinements, musiveo-collection-tracks */
/* musiveo-block-visibility */
/**
 * Per-block visibility, device rules.
 * ----------------------------------------------------------------------------
 * Loaded on the front end AND in the editor canvas, from one file, on purpose.
 * A second copy for the editor would be a second set of breakpoints, and the
 * editor would stop predicting what the front end does the first time either
 * number was edited.
 *
 * WHAT IS HERE AND WHAT IS NOT
 *
 * Only DEVICE rules are here. Audience rules -- visitors, logged-in users, roles
 * -- are applied on the server and a block the viewer may not have is not in the
 * response at all. It needs no CSS, and giving it some would be a way of writing a
 * client-side audience rule, which is the thing the server check exists to avoid.
 *
 * THE CLASSES NAME WHAT TO HIDE, NOT WHAT TO SHOW
 *
 * `musiveo-viz-desktop-off` means "not on desktops". A block visible on phones and
 * tablets therefore carries `musiveo-viz-desktop-off` and nothing else, and a block
 * visible nowhere carries all three.
 *
 * The alternative -- a class naming the device to SHOW on -- would need a separate
 * class for each combination somebody could tick: phones only, tablets only,
 * desktops only, phones and tablets, phones and desktops, tablets and desktops.
 * Six rules, six names, and a seventh combination that has no rule at all and
 * silently shows the block everywhere. Writing the rule in the negative makes every
 * combination fall out of the three rules below with nothing left over, including
 * the empty one. A rule that cannot be forgotten is worth more than a rule that is
 * convenient.
 *
 * BREAKPOINTS
 *
 * 782px and 1024px. 782px is the theme's own phone breakpoint, used by the header,
 * the sidenav and the loop rules; going live with a different number would put the
 * first block to disappear at a width the rest of the page still treats as a
 * desktop. There is no 783px rule: the tablet band starts at 783px so that every
 * pixel of width falls into exactly one of the three bands, with no gap and no
 * overlap. A gap would be a width where a "phone only" block and a "desktop only"
 * block are both hidden and the reader is left with a hole.
 *
 * `!important` is used deliberately and only here. The class sits on the block's
 * own root element, and a block that sets `display: grid` or `flex` on itself --
 * which is most of the useful ones -- outranks a plain class selector. Without it
 * the rule silently does nothing on exactly the blocks somebody most wants to
 * hide. This is a visibility decision the editor made on purpose, so it is allowed
 * to beat a declaration the block did not know it was competing with.
 */

/* --- Phones: up to and including 782px. --- */
@media (max-width: 782px) {
	.musiveo-viz-mobile-off {
		display: none !important;
	}
}

/* --- Tablets: 783px to 1023px. --- */
@media (min-width: 783px) and (max-width: 1023px) {
	.musiveo-viz-tablet-off {
		display: none !important;
	}
}

/* --- Desktops: 1024px and up. --- */
@media (min-width: 1024px) {
	.musiveo-viz-desktop-off {
		display: none !important;
	}
}

/**
 * The editor badge.
 *
 * A block hidden on the screen being previewed needs to say so, or the editor
 * deletes content that is merely invisible at this width. The marker is drawn
 * rather than hidden, and it is never interactive, so it cannot be mistaken for
 * part of the block.
 */
.musiveo-viz-editor-marker {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	z-index: 30;
	padding: 2px 8px;
	border-radius: 0 0 6px 0;
	background: #b58aff;
	color: #101018;
	font: 600 11px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: .02em;
	pointer-events: none;
}
/* musiveo-theme-extended */
/* Musiveo Theme Extended — frontend. Scoped to [data-mte-*] + html.mte-enabled. */
html[data-mte-accent] { color-scheme: dark; }
/* Musicon and the site's custom-theme-musiveo.css declare their own
   --body-bg-color / --color-grey-* on <body>, which shadows anything set on
   <html>. head_vars() and the runtime both re-declare the whole map on <body>
   as !important, so the values below resolve to the selected background. The
   !important here is for the theme's own high-specificity dark rules
   (`.dark .site-sidebar { background: var(--color-grey-700) }` and friends),
   which are 0,2,0 and would otherwise outrank these 0,1,1 rules. */
html.mte-enabled body { background-color: var(--mte-bg, #000) !important; color: var(--text-color, #F2F3F4); }

/* Chrome surfaces use the selected background, exactly.
   These used to read --mte-surface / --mte-header-bg, which are lighter/darker
   steps of the same ramp. On Charcoal that meant the sidebar painted #141414
   instead of #101010, and .mobile-menu -- a full-screen panel -- made the whole
   page look like the wrong colour. Fidelity to the picked swatch wins over a
   decorative lift; separation now comes from borders and the wallpaper layer. */
html.mte-enabled .site-header { background-color: var(--mte-bg) !important; }
html.mte-enabled .site-header .search-form { background-color: var(--mte-surface-2) !important; }
html.mte-enabled .site-sidebar { background-color: var(--mte-bg) !important; }
html.mte-enabled .site-footer { background-color: var(--mte-bg) !important; }
html.mte-enabled .navigation { background-color: var(--mte-bg) !important; }
html.mte-enabled .plyr-playlist { --player-glass-bg:color-mix(in srgb,var(--mte-bg,#000) 78%,transparent); background-color:transparent !important; }
html.mte-enabled .plyr-playlist .plyr { --plyr-color-main:var(--musiveo-accent,#fff); }
html.mte-enabled .plyr-playlist > .plyr:not(.plyr-fullscreen) { background-color:transparent !important; }
html.mte-enabled .plyr-playlist .plyr-fullscreen { background-color:var(--mte-bg) !important; }
html.mte-enabled .mobile-menu { background-color: var(--musiveo-dark-bg) !important; color: var(--text-color); }

/* Prompt field in the music generator keeps its native look. */
html.mte-enabled .musiveo-form-group input[type="text"],
html.mte-enabled .musiveo-form-group textarea,
html.mte-enabled .musiveo-form-group input[type="text"]:focus,
html.mte-enabled .musiveo-form-group textarea:focus {
  background-color: #181818 !important;
  -webkit-box-shadow: 0 0 0 1000px #181818 inset !important;
  box-shadow: 0 0 0 1000px #181818 inset !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  border-color: #181818;
}
/* ---------- Companion plugins (var-driven; their files are untouched) ---------- */
html.mte-enabled .mshub-dashboard { background-color: var(--mshub-background); color: var(--mshub-text); }
html.mte-enabled .mshub-card { background: var(--mshub-card-bg); border-color: var(--mshub-border); }
html.mte-enabled .aie-container { background: var(--aie-bg-secondary); color: var(--aie-text-primary); }
html.mte-enabled .musiveo-container.musiveo-theme-dark,
html.mte-enabled .musiveo-theme-dark { background-color: transparent; color: var(--musiveo-dark-text); }
.dark .wp-block-column,
.dark .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    margin: auto;
    padding: 0.3rem;
    border-radius: 9px;
    background-color: var(--musiveo-dark-bg);
    box-shadow: none;
    z-index: 1;
}
html.mte-enabled .site-footer {
    background-color: transparent;
}

/* ---------- Brand gradients (purple -> ice blue signature) ---------- */
html[data-mte-gradient="1"] .btn-play-normal,
html[data-mte-gradient="1"] .nav li.btn-link a {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%);
  border-color: transparent; color: #fff; }
html[data-mte-gradient="1"] [data-mte-switcher] .mte-trigger__dot {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%); }
html[data-mte-gradient="1"] #mte-progress {
  /* Weighted stops: the body of the bar stays purple and the ice blue only
     arrives at the leading tip. A plain 0%/100% two-stop ramp paints the whole
     range across the bar's own width, so even a short bar read as "all light
     blue". */
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 58%, var(--color-primary-2) 100%);
  box-shadow: 0 0 6px -1px var(--color-primary); }
html[data-mte-gradient="1"] [data-mte-menu] .mte-accent.is-active span {
  box-shadow: 0 0 0 2px #0e0e10, 0 0 16px var(--color-primary); }

/* ---------- Page transitions (coexist with theme page-progress) ----------
   Musicon ships its own .page-progress that animates on the same pjax events.
   Two bars at two heights and two timings read as one broken/doubled bar, so
   the theme's is suppressed and this plugin owns exactly one bar. The theme
   file is untouched. */
html.mte-enabled .page-progress { display: none; }

#mte-progress { position: fixed; top: 0; left: 0; z-index: 200000; width: 0; height: 2px;
  /* Rounded leading edge + a bright head so it reads as a smooth comet rather
     than a square slab. The head is a pseudo-element so the rounding is not
     stretched by the animating width. */
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.25) 0%, var(--color-primary, #8E50F8) 100%);
  opacity: 0; transition: width .32s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
  will-change: width, opacity; pointer-events: none; overflow: hidden;
  -webkit-transform: translateZ(0); transform: translateZ(0); }
#mte-progress::after { content: ""; position: absolute; right: 0; top: 0; height: 100%; width: 24px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 100%); }
html.mte-navigating #mte-progress { opacity: 1; }
/* Never taller than 2px of glow: the previous 8/10px shadow read as a second,
   thicker bar sitting under the first one. */
html.mte-enabled #mte-progress { box-shadow: 0 0 5px -1px var(--color-primary, #8E50F8); }

html.mte-motion body main { animation: mtewx-enter .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mtewx-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.mte-motion.mte-navigating body main { opacity: .25; transition: opacity .25s ease; }

/* ---------- Switcher trigger ---------- */
[data-mte-switcher] { font-family: inherit; display: inline-flex; max-width: 100%; padding: 5px; }
[data-mte-switcher] .mte-trigger { display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  /* No fill: a hardcoded #111318 chip fought the selected background (Charcoal
     is #101010, Pure Black is #000000), so the trigger now sits directly on
     whatever the visitor picked. The border alone keeps the affordance. */
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.14);
  transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
[data-mte-switcher] .mte-trigger:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
[data-mte-switcher] .mte-trigger:focus-visible { outline: 2px solid var(--color-primary, #E8EAED); outline-offset: 2px; }
[data-mte-switcher] .mte-trigger__dot { width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--color-primary, #E8EAED); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
[data-mte-switcher] .mte-trigger__name { opacity: .65; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mte-switcher--icon .mte-trigger { padding: 9px; }

/* ---------- Popup (portaled to <body>, viewport-centered like mt overlay) ---------- */
[data-mte-menu].mte-overlay { position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto;
  background: rgba(0,0,0,.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-mte-menu].mte-overlay[hidden] { display: none !important; pointer-events: none !important; }
[data-mte-menu] .mte-dialog { display: flex; flex-direction: column; width: 720px; max-width: 100%;
  max-height: calc(100vh - 48px); overflow: hidden; color: #fff;
  /* The selected background, exactly. --mte-surface/--mte-surface-2 are lighter
     steps of the ramp, so the panel showed a different colour than the swatch
     the visitor had picked (Pure Black rendered as #08080A). Reading --mte-bg
     means the popup is the same colour as the page it sits on, and with
     wallpaper = none the two are indistinguishable by design.
     Deliberately NOT transitioned: a background-color transition whose value
     comes from a custom property on <html> does not re-resolve when that
     property changes, so it pinned the dialog to the first background ever
     painted. Verified in-browser. */
  background-color: var(--mte-bg, #0e0e10);
  border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.65); }
html.mte-motion [data-mte-menu]:not([hidden]) .mte-dialog { animation: mtewx-pop .28s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mtewx-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
[data-mte-menu] .mte-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
[data-mte-menu] .mte-dialog__eyebrow { display: block; margin-bottom: 5px; color: rgba(255,255,255,.55);
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
[data-mte-menu] .mte-dialog__header strong { display: block; font-size: 19px; line-height: 1.2; }
[data-mte-menu] .mte-dialog__sub { display: block; margin-top: 4px; color: rgba(255,255,255,.55); font-size: 12px; }
[data-mte-menu] .mte-dialog__close { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08);
  color: inherit; cursor: pointer; font-size: 24px; line-height: 1; }
[data-mte-menu] .mte-dialog__close:hover { background: rgba(255,255,255,.16); }
[data-mte-menu] .mte-dialog__body { overflow: auto; padding: 16px 18px 20px; -webkit-overflow-scrolling: touch; }
[data-mte-menu] .mte-section-title { margin: 6px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6); }
[data-mte-menu] .mte-section-title:not(:first-child) { margin-top: 18px; }
[data-mte-menu] .mte-section-hint { margin: 0 0 10px; color: rgba(255,255,255,.4); font-size: 11.5px; }
/* Accent swatches */
[data-mte-menu] .mte-accents { display: flex; flex-wrap: wrap; gap: 10px; }
[data-mte-menu] .mte-accent { position: relative; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 2px solid transparent; background: transparent; cursor: pointer; }
[data-mte-menu] .mte-accent span { display: block; width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); transition: transform .15s ease; }
[data-mte-menu] .mte-accent:hover span { transform: scale(1.1); }
[data-mte-menu] .mte-accent:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
[data-mte-menu] .mte-accent.is-active { border-color: #fff; }
[data-mte-menu] .mte-accent.is-active span { box-shadow: 0 0 0 2px #0e0e10, 0 0 14px rgba(255,255,255,.25); }
[data-mte-menu] .mte-accent--custom { border-style: dashed; border-color: rgba(255,255,255,.35); overflow: hidden; }
[data-mte-menu] .mte-accent--custom input[type="color"] { position: absolute; inset: -8px; width: 200%; height: 200%;
  padding: 0; border: 0; background: none; cursor: pointer; }
[data-mte-menu] .mte-accent--custom span { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 20px; font-weight: 300; color: #fff; pointer-events: none; border: 0; }

/* Contrast notice: shown only when the guard actually lifted the accent.
   Carries the two swatches so "which colour changed" is answerable at a glance
   without opening anything. */
[data-mte-menu] .mte-contrast { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.72);
  font-size: 11.5px; line-height: 1.45; }
[data-mte-menu] .mte-contrast[hidden] { display: none; }
[data-mte-menu] .mte-contrast__chip { flex: none; width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.28); }
[data-mte-menu] .mte-contrast__arrow { flex: none; opacity: .5; }
[data-mte-menu] .mte-contrast__text { flex: 1 1 140px; min-width: 0; }

/* ---------- Custom accent: solid or two-stop gradient ---------- */
[data-mte-menu] .mte-custom { display: none; margin: 12px 0 0; padding: 12px; gap: 12px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); }
[data-mte-menu] .mte-custom.is-open { display: flex; flex-wrap: wrap; align-items: center; }
[data-mte-menu] .mte-custom__mode { display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; }
[data-mte-menu] .mte-custom__mode-track { position: relative; display: block; width: 38px; height: 20px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); }
[data-mte-menu] .mte-custom__mode-track i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #6b7078; box-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), background .22s ease; }
[data-mte-menu] .mte-custom__mode.is-on .mte-custom__mode-track { border-color: var(--color-primary, #E8EAED); }
[data-mte-menu] .mte-custom__mode.is-on .mte-custom__mode-track i { transform: translateX(18px); background: #fff; }
[data-mte-menu] .mte-custom__mode:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
[data-mte-menu] .mte-custom__stops { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; }
[data-mte-menu] .mte-custom__stop { position: relative; display: inline-flex; align-items: center; gap: 7px;
  flex: none; padding: 0; font-size: 11.5px; color: rgba(255,255,255,.55); cursor: pointer; }
[data-mte-menu] .mte-custom__stop input[type="color"] { width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: 8px; background: none; cursor: pointer; overflow: hidden; }
[data-mte-menu] .mte-custom__stop input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
[data-mte-menu] .mte-custom__stop input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(255,255,255,.22); border-radius: 8px; }
[data-mte-menu] .mte-custom__stop input[type="color"]::-moz-color-swatch {
  border: 1px solid rgba(255,255,255,.22); border-radius: 8px; }
/* Hex field: the path that works on browsers with no native colour picker. */
[data-mte-menu] .mte-custom__hex { box-sizing: border-box; width: 74px; padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(0,0,0,.3);
  color: #fff; font: inherit; font-size: 11.5px; letter-spacing: .02em;
  text-transform: uppercase; -webkit-appearance: none; appearance: none; }
[data-mte-menu] .mte-custom__hex:focus { outline: none; border-color: var(--color-primary, #E8EAED); }
[data-mte-menu] .mte-custom__hex::selection { background: var(--color-primary, #E8EAED); color: #000; }

/* ---------- In-page colour picker ----------
   The native <input type="color"> stays as the value holder, but its own popup
   is suppressed and this replaces it: several browsers (iOS Safari, some
   Android WebViews) accept the element and then never show anything, which is
   what made the custom colour control look dead. Pure CSS gradients, so there
   is no canvas, no image request and no extra paint cost.

   Deliberately NOT scoped to [data-mte-menu]. The popover is portalled to
   <body> on first use, because the overlay's backdrop-filter makes it the
   containing block for position:fixed children and the popover then lands
   outside the popup. Once it is on <body> a menu-scoped selector stops matching
   and it renders as an unstyled full-width box, so these are global and the
   .mte-picker- names keep them out of everyone else's way. */
.mte-picker { position: fixed; z-index: 999999; width: 196px; padding: 10px;
  box-sizing: border-box; font: inherit; color: #fff;
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(12,12,14,.985);
  box-shadow: 0 18px 44px rgba(0,0,0,.6); }
.mte-picker[hidden] { display: none; }
.mte-picker__sv { position: relative; height: 124px; border-radius: 8px;
  cursor: crosshair; touch-action: none; overflow: hidden;
  background-image:
    linear-gradient(to top, #000, rgba(0,0,0,0)),
    linear-gradient(to right, #fff, hsl(var(--mte-h, 260), 100%, 50%)); }
.mte-picker__hue { position: relative; height: 12px; margin-top: 10px;
  border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.mte-picker__dot { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: transparent; border: 2px solid #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.6); }
.mte-picker__sv .mte-picker__dot {
  left: calc(var(--mte-s, 0) * 100%); top: calc((1 - var(--mte-v, 1)) * 100%); }
.mte-picker__hue .mte-picker__dot { left: calc(var(--mte-h, 0) / 360 * 100%); top: 50%; }
.mte-picker__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.mte-picker__chip { flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.2); background: var(--mte-pick, #8E50F8); }
/* The picker's own hex field lives on <body> too, so it needs the base hex
   styling as well as the flex behaviour -- the [data-mte-menu] scoped rule no
   longer reaches it. */
.mte-picker .mte-custom__hex { flex: 1 1 auto; width: auto; min-width: 0; box-sizing: border-box;
  padding: 4px 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 11.5px;
  letter-spacing: .02em; text-transform: uppercase; -webkit-appearance: none; appearance: none; }
.mte-picker .mte-custom__hex:focus { outline: none; border-color: var(--color-primary, #E8EAED); }
.mte-picker .mte-custom__hex::selection { background: var(--color-primary, #E8EAED); color: #000; }
/* Hide the second stop entirely in solid mode so the row never looks broken. */
[data-mte-menu] .mte-custom__stop.is-off { display: none; }
[data-mte-menu] .mte-custom__preview { flex: 1 1 40px; min-width: 40px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18); }
[data-mte-menu] .mte-grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
[data-mte-menu] .mte-grid--wall { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
[data-mte-menu] .mte-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px;
  padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.04); color: inherit; font: inherit; text-align: left; }
[data-mte-menu] .mte-card:hover { background: rgba(255,255,255,.09); }
[data-mte-menu] .mte-card:focus-visible { outline: 2px solid var(--color-primary, #E8EAED); outline-offset: 1px; }
[data-mte-menu] .mte-card.is-active { border-color: var(--color-primary, #E8EAED); background: rgba(255,255,255,.08); }
[data-mte-menu] .mte-card__preview { position: relative; flex: none; width: 52px; height: 38px; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.15); }
[data-mte-menu] .mte-card__preview--wall { width: 44px; }
[data-mte-menu] .mte-live-badge { position: absolute; top: 3px; right: 3px; padding: 1px 5px; border-radius: 4px;
  background: rgba(0,0,0,.65); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
[data-mte-menu] .mte-card__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 2px; }
[data-mte-menu] .mte-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; }
[data-mte-menu] .mte-card__text small { color: rgba(255,255,255,.55); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-mte-menu] .mte-card__check { flex: none; color: var(--color-primary, #E8EAED); font-size: 16px; font-weight: 800; opacity: 0; }
[data-mte-menu] .mte-card.is-active .mte-card__check { opacity: 1; }
/* Motion toggle: labeled pill switch */
[data-mte-menu] .mte-motion-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); }
[data-mte-menu] .mte-motion-row strong { display: block; font-size: 13.5px; }
[data-mte-menu] .mte-motion-row small { color: rgba(255,255,255,.55); font-size: 11.5px; }
/* Live-wallpapers switch.
   Musicon sets `*, *::before, *::after { box-sizing: border-box }`, so the
   declared width/height include padding and border. The old geometry was
   internally inconsistent: 22px - 3px*2 - 1px*2 left a 14px content box for a
   16px knob, and 52px left 44px for a 46px travel, so the knob was shaved on
   both axes and read as "someone overrode the CSS".

   Sizing is now explicit and the track is built to fit the 18px knob with
   room around it:
     content  = 58 - 2*2 = 54 wide, 26 - 2*2 = 22 tall
     travel   = 54 - 18  = 36px  (knob lands flush against the right padding)
   box-sizing is pinned rather than inherited, so the geometry is correct
   whatever the theme sets. Geometry properties carry !important so a button
   reset (Musicon ships a bare `button { border-radius: 0 }`) cannot reshape
   or resize this control. */
[data-mte-menu] .mte-toggle { display: inline-block !important; flex: none !important;
  box-sizing: border-box !important; width: 58px !important; min-width: 58px !important;
  height: 26px !important; min-height: 26px !important; padding: 2px !important;
  border: 0 !important; border-radius: 999px !important; cursor: pointer;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important; -webkit-appearance: none;
  appearance: none; }
[data-mte-menu] .mte-toggle__knob { display: block !important; box-sizing: border-box !important;
  width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important;
  border-radius: 50% !important; background: #6b7078; box-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), background .22s ease, box-shadow .22s ease; }
[data-mte-menu] .mte-toggle.is-on { background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--color-primary, #E8EAED) !important; }
[data-mte-menu] .mte-toggle.is-on .mte-toggle__knob { transform: translateX(36px) !important; background: #fff;
  box-shadow: 0 0 8px var(--color-primary, #E8EAED); }
[data-mte-menu] .mte-motion-state { flex: none; min-width: 26px; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; color: rgba(255,255,255,.4); }
[data-mte-menu] .mte-toggle.is-on + .mte-motion-state { color: #fff; }
/* Live row: status glow dot + locked live options when calm. */
[data-mte-menu] .mte-live-row { padding: 14px 16px; border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
[data-mte-menu] .mte-live-ico { flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: #4a4e55; transition: background .25s ease, box-shadow .25s ease; }
[data-mte-menu] .mte-live-row.is-on .mte-live-ico { background: var(--color-primary, #E8EAED);
  box-shadow: 0 0 10px var(--color-primary, #E8EAED);
  animation: mtewx-live-pulse 2.2s ease-in-out infinite; }
@keyframes mtewx-live-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .6; } }
[data-mte-menu] .mte-card--wall.is-disabled { opacity: .35; filter: grayscale(.7); }
[data-mte-menu] .mte-card--wall:disabled { cursor: not-allowed; }
[data-mte-menu] .mte-card--wall:disabled:hover { background: rgba(255,255,255,.04); }
[data-mte-menu] .mte-dialog__note { margin: 14px 2px 0; color: rgba(255,255,255,.5); font-size: 11.5px; }
[data-mte-menu] .mte-motion-note { margin: 12px 2px 0; padding: 9px 12px; border-radius: 9px;
  background: rgba(245,165,36,.1); border: 1px solid rgba(245,165,36,.35);
  color: #f5cf8a; font-size: 12px; }
[data-mte-menu] .mte-motion-note[hidden] { display: none; }

/* ---------- Switcher trigger: neutral button, color shown in the dot ---------- */
[data-mte-switcher] .mte-trigger { border: 1px solid rgba(255,255,255,.14); box-shadow: none; }
[data-mte-switcher] .mte-trigger__dot { width: 20px; height: 20px;
  background: linear-gradient(135deg, var(--color-primary, #8E50F8), var(--color-primary-2, #3AC4F7)); }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  [data-mte-menu].mte-overlay { padding: 12px; }
  [data-mte-menu] .mte-dialog { max-height: calc(100vh - 24px); border-radius: 15px; }
  [data-mte-menu] .mte-dialog__header { padding: 16px 16px 12px; }
  [data-mte-menu] .mte-dialog__body { padding: 12px 12px 16px; }
  [data-mte-menu] .mte-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  [data-mte-switcher] .mte-trigger__name { display: none; }
}

/* ---------- Reduced motion (only when the admin enables respect AND the user never chose) ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-mte-respect="1"][data-mte-explicit="0"].mte-motion body main { animation: none; }
  html[data-mte-respect="1"][data-mte-explicit="0"].mte-motion [data-mte-menu]:not([hidden]) .mte-dialog { animation: none; }
}
/* musiveo-theme-extended-fx */
/* Musiveo Theme Extended — live wallpaper engine. Printed INLINE in <head>
   (see head_vars) so the rules always match the running PHP, immune to
   optimizer/CDN stylesheet staleness. Bases use --mte-bg to blend with the
   selected background. */
/* ---------- Wallpaper layer (behind content, above body bg) ---------- */
#mte-wallpaper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  pointer-events: none; overflow: hidden; background: var(--mte-bg, #000);
  transition: opacity .3s ease, bottom .35s ease, transform .38s cubic-bezier(.22,.61,.36,1);
  transform-origin: 50% 45%; contain: strict; }
/* Room for the player bar while media plays (JS measures .plyr-playlist). */
#mte-wallpaper { bottom: var(--mte-player-h, 0px); }
/* Page-travel choreography: the background breathes out on send and
   settles back in on arrival. Loop-safe: entering is removed after it runs. */
html.mte-leaving #mte-wallpaper { opacity: 0; transform: scale(.965); }
html.mte-entering #mte-wallpaper { animation: mtewx-arrive .6s cubic-bezier(.22,.61,.36,1); }
@keyframes mtewx-arrive { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
#mte-wallpaper[hidden] { display: none !important; }
#mte-wallpaper.mte-fading { opacity: 0; }
/* Layer is hidden until a wallpaper is chosen (dataset set in <head>). */
#mte-wallpaper { display: none; }
html[data-mte-wallpaper]:not([data-mte-wallpaper="none"]) #mte-wallpaper { display: block; }
.mte-wallpaper__static { position: absolute; inset: 0; }
.mte-wallpaper__specks { position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(2px 2px at 54% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 71% 42%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 74%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 44% 88%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(2px 2px at 93% 28%, rgba(255,255,255,.75), transparent 60%);
  background-size: 640px 640px; }
html.mte-motion .mte-wallpaper__specks { animation: mtewx-speck 5s ease-in-out infinite alternate; }
@keyframes mtewx-speck { from { opacity: .55; } to { opacity: 1; } }
.mte-wallpaper__grain { position: absolute; inset: 0; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }
.mte-wallpaper__vignette { position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.62) 100%); }

/* ---------- Pure-CSS live FX (no JavaScript required to animate) ---------- */
.mte-fx { display: none; position: absolute; inset: 0; overflow: hidden; }
html[data-mte-wallpaper="starfield"] .fx-stars,
html[data-mte-wallpaper="city"] .fx-stars,
html[data-mte-wallpaper="synthwave"] .fx-stars,
html[data-mte-wallpaper="beam"] .fx-stars,
html[data-mte-wallpaper="fireworks"] .fx-stars,
html[data-mte-wallpaper="fireworks"] .fx-fireworks { display: block; }
html[data-mte-wallpaper="starfield"] .fx-meteors,
html[data-mte-wallpaper="city"] .fx-meteors { display: block; }
html[data-mte-wallpaper="fireflies"] .fx-flies { display: block; }
html[data-mte-wallpaper="beam"] .fx-beam { display: block; }
html[data-mte-wallpaper="petals"] .fx-petals { display: block; }
html[data-mte-wallpaper="embers"] .fx-embers { display: block; }
html[data-mte-wallpaper="synthwave"] .fx-synth { display: block; }
/* Page rules say no live here: static base only. */
html[data-mte-live="0"] .mte-fx { display: none !important; }

/* Star maps: static shadow lists (see :root vars below). Drift tile is
   seamless: shadows span 0..2560px and ::after repeats them at -2560px. */
:root { --mte-s1: 2347px 1743px #FFF , 906px 1118px #FFF , 747px 1441px #FFF , 554px 1594px #FFF , 485px 537px #FFF , 1106px 67px #FFF , 1322px 541px #FFF , 1667px 1256px #FFF , 1735px 1229px #FFF , 1233px 1254px #FFF , 274px 1928px #FFF , 170px 1325px #FFF , 1547px 1342px #FFF , 1370px 1752px #FFF , 1683px 1564px #FFF , 1669px 928px #FFF , 91px 1183px #FFF , 226px 956px #FFF , 110px 1423px #FFF , 2283px 217px #FFF , 1890px 1200px #FFF , 134px 1734px #FFF , 1008px 759px #FFF , 2358px 1411px #FFF , 1812px 1480px #FFF , 828px 1880px #FFF , 1997px 1583px #FFF , 1658px 1906px #FFF , 2061px 1383px #FFF , 2444px 1242px #FFF , 474px 681px #FFF , 356px 815px #FFF , 1579px 1936px #FFF , 2556px 1850px #FFF , 466px 346px #FFF , 1497px 1933px #FFF; --mte-s2: 273px 1851px #FFF , 2406px 1119px #FFF , 967px 1764px #FFF , 1349px 302px #FFF , 1028px 527px #FFF , 1466px 1201px #FFF , 1024px 143px #FFF , 820px 450px #FFF , 1262px 467px #FFF , 732px 1880px #FFF , 1018px 158px #FFF , 360px 584px #FFF , 1302px 1631px #FFF , 349px 128px #FFF , 1966px 966px #FFF , 298px 950px #FFF , 1982px 388px #FFF , 1367px 386px #FFF , 142px 82px #FFF , 1126px 519px #FFF , 2488px 968px #FFF , 2525px 921px #FFF; --mte-s3: 760px 1959px #FFF , 1345px 1120px #FFF , 1186px 86px #FFF , 2144px 1012px #FFF , 1571px 517px #FFF , 1825px 334px #FFF , 726px 1746px #FFF , 2533px 1646px #FFF , 789px 1707px #FFF , 232px 504px #FFF , 1762px 390px #FFF , 551px 1845px #FFF; }
.fx-stars i { position: absolute; top: 0; left: 0; border-radius: 50%; }
.fx-stars .s1 { width: 1px; height: 1px; box-shadow: var(--mte-s1); }
.fx-stars .s2 { width: 2px; height: 2px; box-shadow: var(--mte-s2); }
.fx-stars .s3 { width: 2px; height: 2px; box-shadow: var(--mte-s3); }
.fx-stars .s1::after, .fx-stars .s2::after, .fx-stars .s3::after {
  content: ""; position: absolute; top: 0; left: -2560px; border-radius: 50%;
  box-shadow: inherit; }
.fx-stars .s1::after { width: 1px; height: 1px; }
.fx-stars .s2::after, .fx-stars .s3::after { width: 2px; height: 2px; }
.fx-stars .s1 { animation: mtewx-drift 60s linear infinite, mtewx-twinkle 3.4s ease-in-out infinite alternate; }
.fx-stars .s2 { animation: mtewx-drift 110s linear infinite, mtewx-twinkle 4.8s ease-in-out infinite alternate-reverse; }
.fx-stars .s3 { animation: mtewx-drift 160s linear infinite, mtewx-twinkle 6.5s ease-in-out infinite alternate; }
@keyframes mtewx-drift { from { transform: translateX(0); } to { transform: translateX(2560px); } }
@keyframes mtewx-twinkle { from { opacity: .3; } to { opacity: 1; } }

/* Meteors: gradient streaks falling diagonally. */
.fx-meteors i { position: absolute; top: -15%; width: 2px; height: 150px; border-radius: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,0));
  transform: rotate(32deg); opacity: 0; }
html[data-mte-wallpaper="starfield"] .fx-meteors .m1 { left: 72%; animation: mtewx-meteor 9s linear infinite; animation-delay: 1.5s; }
html[data-mte-wallpaper="starfield"] .fx-meteors .m2 { left: 34%; animation: mtewx-meteor 14s linear infinite; animation-delay: 6s; }
html[data-mte-wallpaper="starfield"] .fx-meteors i:nth-child(n+3) { display: none; }
html[data-mte-wallpaper="city"] .fx-meteors .m1 { left: 68%; animation: mtewx-meteor 12s linear infinite; animation-delay: 2s; }
html[data-mte-wallpaper="city"] .fx-meteors .m2 { left: 30%; animation: mtewx-meteor 18s linear infinite; animation-delay: 8s; }
html[data-mte-wallpaper="city"] .fx-meteors i:nth-child(n+3) { display: none; }
@keyframes mtewx-meteor {
  0% { opacity: 0; transform: rotate(32deg) translate3d(0, 0, 0); }
  5% { opacity: 1; }
  13% { opacity: 0; transform: rotate(32deg) translate3d(-30vw, 46vh, 0); }
  100% { opacity: 0; transform: rotate(32deg) translate3d(-30vw, 46vh, 0); }
}

/* Fireflies: slow drifting glowing dust. */
.fx-flies i { position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 14px 3px currentColor;
  animation: mtewx-fly ease-in-out infinite alternate; }
.fx-flies .f1 { left: 12%; top: 64%; color: #ffe08a; --dx: 60px; --dy: -90px; animation-duration: 8s; }
.fx-flies .f2 { left: 28%; top: 38%; color: var(--color-primary); --dx: -70px; --dy: 60px; animation-duration: 10s; }
.fx-flies .f3 { left: 46%; top: 72%; color: #38BDF8; --dx: 80px; --dy: -50px; animation-duration: 7s; }
.fx-flies .f4 { left: 63%; top: 30%; color: #34D399; --dx: -50px; --dy: 80px; animation-duration: 9s; }
.fx-flies .f5 { left: 78%; top: 58%; color: #ffe08a; --dx: -80px; --dy: -70px; animation-duration: 11s; }
.fx-flies .f6 { left: 88%; top: 24%; color: #8B5CF6; --dx: -60px; --dy: 90px; animation-duration: 8s; }
@keyframes mtewx-fly {
  0% { transform: translate(0, 0); opacity: .15; }
  50% { opacity: 1; }
  100% { transform: translate(var(--dx, 40px), var(--dy, -60px)); opacity: .25; }
}

/* Beam: slow sweeping light bar. */
.fx-beam i { position: absolute; top: -40%; height: 180%; transform: rotate(18deg); }
.fx-beam .b1 { left: 0; width: 26vw; opacity: .12;
  background: linear-gradient(90deg, transparent, var(--color-primary) 50%, transparent);
  animation: mtewx-beam 13s linear infinite; }
.fx-beam .b2 { left: 0; width: 8vw; opacity: .1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55) 50%, transparent);
  animation: mtewx-beam 13s linear infinite; animation-delay: -6.5s; }
@keyframes mtewx-beam { from { transform: rotate(18deg) translateX(-45vw); } to { transform: rotate(18deg) translateX(135vw); } }

/* Synthwave: retro sun + scrolling neon grid, pure CSS. */
.fx-synth .sun { position: absolute; left: 50%; bottom: 38%; width: min(30vmin, 260px); height: min(30vmin, 260px);
  transform: translateX(-50%); border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, #ffd319 0%, #ff2975 55%, #8c1eff 100%);
  box-shadow: 0 0 60px 10px rgba(255,41,117,.25);
  animation: mtewx-sun 7s ease-in-out infinite alternate; }
.fx-synth .sun::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 12px, #05030c 12px 15px);
  -webkit-mask-image: linear-gradient(180deg, transparent 42%, #000 42%);
  mask-image: linear-gradient(180deg, transparent 42%, #000 42%); }
@keyframes mtewx-sun { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.04); } }
.fx-synth .floor { position: absolute; left: -25%; right: -25%; top: 62%; bottom: -30%;
  transform: perspective(320px) rotateX(58deg); transform-origin: 50% 0;
  background: repeating-linear-gradient(90deg, rgba(255,45,120,.4) 0 2px, transparent 2px 90px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 92%); }
.fx-synth .floor b { position: absolute; left: 0; right: 0; top: -112px; bottom: -112px; display: block;
  background: repeating-linear-gradient(0deg, rgba(34,211,238,.45) 0 2px, transparent 2px 56px);
  animation: mtewx-gridmove 1.1s linear infinite; }
@keyframes mtewx-gridmove { from { transform: translateY(0); } to { transform: translateY(56px); } }
.fx-synth .floor::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,45,120,.9); box-shadow: 0 0 18px rgba(255,45,120,.8); }

/* Petals: soft accent-tinted drift (blossom fall, minimal). */
.fx-petals i { position: absolute; top: -8%; border-radius: 62% 38% 60% 40%;
  background: radial-gradient(ellipse at 35% 30%, rgba(255,255,255,.9), var(--color-primary) 58%, transparent 76%);
  opacity: 0; animation: mtewx-petal linear infinite; }
.fx-petals .p1 { left: 6%; width: 12px; height: 15px; animation-duration: 14s; animation-delay: -2s; }
.fx-petals .p2 { left: 16%; width: 10px; height: 13px; background: radial-gradient(ellipse at 35% 30%, #fff, #f9a8d4 60%, transparent 78%); animation-duration: 17s; animation-delay: -9s; }
.fx-petals .p3 { left: 27%; width: 15px; height: 18px; animation-duration: 12s; animation-delay: -6s; }
.fx-petals .p4 { left: 38%; width: 11px; height: 14px; animation-duration: 19s; animation-delay: -12s; }
.fx-petals .p5 { left: 49%; width: 13px; height: 16px; background: radial-gradient(ellipse at 35% 30%, #fff, #f9a8d4 60%, transparent 78%); animation-duration: 15s; animation-delay: -4s; }
.fx-petals .p6 { left: 60%; width: 10px; height: 12px; animation-duration: 18s; animation-delay: -14s; }
.fx-petals .p7 { left: 71%; width: 14px; height: 17px; animation-duration: 13s; animation-delay: -8s; }
@keyframes mtewx-petal {
  0% { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .85; }
  50% { transform: translate3d(4vw, 48vh, 0) rotate(200deg); }
  92% { opacity: .7; }
  100% { transform: translate3d(-3vw, 108vh, 0) rotate(380deg); opacity: 0; }
}

/* Embers: glowing sparks rising (fireworks, calmed down). */
.fx-embers i { position: absolute; bottom: -4%; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 10px 2px currentColor; opacity: 0;
  animation: mtewx-ember linear infinite; }
.fx-embers .e1 { left: 8%; color: var(--color-primary); --ex: 24px; animation-duration: 9s; animation-delay: -2s; }
.fx-embers .e2 { left: 18%; color: #ffb347; --ex: -20px; animation-duration: 11s; animation-delay: -6s; }
.fx-embers .e3 { left: 27%; color: #fff; --ex: 30px; animation-duration: 8s; animation-delay: -4s; }
.fx-embers .e4 { left: 36%; color: var(--color-primary); --ex: -26px; animation-duration: 12s; animation-delay: -9s; }
.fx-embers .e5 { left: 46%; color: #ffb347; --ex: 18px; animation-duration: 10s; animation-delay: -3s; }
.fx-embers .e6 { left: 55%; color: #fff; --ex: -32px; animation-duration: 7s; animation-delay: -5s; }
.fx-embers .e7 { left: 64%; color: var(--color-primary); --ex: 28px; animation-duration: 13s; animation-delay: -8s; }
.fx-embers .e8 { left: 72%; color: #ffb347; --ex: -18px; animation-duration: 9s; animation-delay: -1s; }
.fx-embers .e9 { left: 80%; color: #fff; --ex: 22px; animation-duration: 11s; animation-delay: -7s; }
.fx-embers .e10 { left: 88%; color: var(--color-primary); --ex: -28px; animation-duration: 8s; animation-delay: -5s; }
.fx-embers .e11 { left: 94%; color: #ffb347; --ex: 16px; animation-duration: 12s; animation-delay: -10s; }
.fx-embers .e12 { left: 41%; color: #fff; --ex: -22px; animation-duration: 10s; animation-delay: -6s; }
@keyframes mtewx-ember {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: .8; }
  100% { transform: translate(var(--ex, 20px), -104vh); opacity: 0; }
}

/* Fireworks: single canvas, capped bursts (see JS). */
.fx-fireworks { display: none; }
.fx-fireworks canvas, canvas.mte-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }


/* Low-end devices: drop the heaviest extras automatically. */
html[data-mte-perf="low"] .mte-wallpaper__grain,
html[data-mte-perf="low"] .fx-meteors .m4,
html[data-mte-perf="low"] .fx-flies .f5,
html[data-mte-perf="low"] .fx-flies .f6,
html[data-mte-perf="low"] .fx-embers .e11,
html[data-mte-perf="low"] .fx-embers .e12 { display: none; }

/* While media plays, every live wallpaper gets faster; glow follows volume. */
html[data-mte-playing="1"] .fx-meteors i { animation-duration: 2.8s !important; }
html[data-mte-playing="1"] .fx-flies i { animation-duration: 5s !important; }
html[data-mte-playing="1"] .fx-beam i { animation-duration: 8s !important; }
html[data-mte-playing="1"] .fx-synth .floor { animation-duration: .55s !important; }
html[data-mte-playing="1"] .fx-petals i { animation-duration: 9s !important; }
html[data-mte-playing="1"] .fx-embers i { animation-duration: 6s !important; }
html[data-mte-playing="1"] .fx-stars .s1 { animation-duration: 30s, 1.6s !important; }
html[data-mte-playing="1"] .fx-stars .s2 { animation-duration: 55s, 2.2s !important; }
html[data-mte-playing="1"] .fx-stars .s3 { animation-duration: 80s, 3s !important; }
html[data-mte-playing="1"] .fx-flies i { box-shadow: 0 0 calc(16px * var(--mte-vol, 1)) calc(4px * var(--mte-vol, 1)) currentColor; }
html[data-mte-playing="1"] .fx-embers i { box-shadow: 0 0 calc(14px * var(--mte-vol, 1)) calc(4px * var(--mte-vol, 1)) currentColor; }

/* City Nights: flat moonlit skyline. Tints derive from --mte-bg so any
   background blends in. Back row is one clipped silhouette; front row is
   five flat towers with lit windows; the moon breathes slowly. */
html[data-mte-wallpaper="city"] .fx-city { display: block; }
.fx-city .back { position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: #23252c;
  clip-path: polygon(0 100%, 0 58%, 5% 58%, 5% 40%, 11% 40%, 11% 52%, 17% 52%, 17% 30%, 23% 30%, 23% 48%, 30% 48%, 30% 36%, 36% 36%, 36% 55%, 43% 55%, 43% 42%, 50% 42%, 50% 58%, 57% 58%, 57% 34%, 63% 34%, 63% 50%, 70% 50%, 70% 40%, 76% 40%, 76% 56%, 83% 56%, 83% 44%, 89% 44%, 89% 58%, 95% 58%, 95% 48%, 100% 48%, 100% 100%); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .fx-city .back { background: color-mix(in srgb, var(--mte-bg, #000) 86%, #ffffff); }
}
.fx-city .b1, .fx-city .b2, .fx-city .b3, .fx-city .b4, .fx-city .b5 {
  position: absolute; bottom: 0; background: #101216; }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .fx-city .b1, .fx-city .b2, .fx-city .b3, .fx-city .b4, .fx-city .b5 {
    background: color-mix(in srgb, var(--mte-bg, #000) 92%, #ffffff); }
}
.fx-city .b1 { left: 4%; width: 15%; height: 30%; }
.fx-city .b2 { left: 23%; width: 19%; height: 39%; }
.fx-city .b3 { left: 46%; width: 13%; height: 24%; background: #0b0c10; }
.fx-city .b4 { left: 63%; width: 17%; height: 33%; }
.fx-city .b5 { left: 84%; width: 12%; height: 27%; background: #0b0c10; }
.fx-city .b1::before, .fx-city .b2::before, .fx-city .b4::before {
  content: ""; position: absolute; inset: 12% 12% 10%;
  background-image: radial-gradient(circle, rgba(255,203,130,.55) 1px, transparent 1.7px);
  background-size: 13px 17px; opacity: .5; }
.fx-city .moon { position: absolute; right: 11%; top: 9%; width: min(18vmin, 120px); height: min(18vmin, 120px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffffff 0%, #e3e7ee 55%, #b7bdc9 100%);
  box-shadow: 0 0 70px 24px rgba(220,228,244,.14);
  animation: mtewx-moon 18s ease-in-out infinite alternate; }
@keyframes mtewx-moon { from { opacity: .7; } to { opacity: 1; } }

/* Static bases blend with the selected background. */
html[data-mte-wallpaper="midnight"] .mte-wallpaper__static {
  background:
    radial-gradient(90% 55% at 50% -10%, rgba(255,255,255,.06) 0%, transparent 60%),
    linear-gradient(180deg, var(--mte-bg, #000) 0%, var(--mte-bg, #000) 70%); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  html[data-mte-wallpaper="midnight"] .mte-wallpaper__static {
    background:
      radial-gradient(55% 40% at 50% 108%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 70%),
      radial-gradient(90% 55% at 50% -10%, rgba(255,255,255,.06) 0%, transparent 60%),
      linear-gradient(180deg, var(--mte-bg, #000) 0%, var(--mte-bg, #000) 70%); }
}
html[data-mte-wallpaper="orb"] .mte-wallpaper__static {
  background:
    radial-gradient(42% 30% at 50% 16%, rgba(255,255,255,.05) 0%, transparent 70%),
    linear-gradient(180deg, var(--mte-bg, #000) 0%, var(--mte-bg, #000) 70%); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  html[data-mte-wallpaper="orb"] .mte-wallpaper__static {
    background:
      radial-gradient(46% 34% at 50% 18%, color-mix(in srgb, var(--color-primary) 13%, transparent) 0%, transparent 70%),
      radial-gradient(42% 30% at 50% 16%, rgba(255,255,255,.05) 0%, transparent 70%),
      linear-gradient(180deg, var(--mte-bg, #000) 0%, var(--mte-bg, #000) 70%); }
}
html[data-mte-wallpaper="matte"] .mte-wallpaper__static {
  background: var(--mte-bg, #000); }
html[data-mte-wallpaper="matte"] .mte-wallpaper__grain { opacity: .13; }
html[data-mte-wallpaper="nebula_static"] .mte-wallpaper__static {
  background:
    radial-gradient(45% 38% at 22% 24%, rgba(139,92,246,.4) 0%, transparent 70%),
    radial-gradient(38% 32% at 78% 68%, rgba(56,189,248,.26) 0%, transparent 70%),
    radial-gradient(30% 26% at 62% 30%, rgba(217,70,239,.18) 0%, transparent 70%),
    radial-gradient(55% 40% at 50% 105%, rgba(139,92,246,.14) 0%, transparent 70%),
    linear-gradient(165deg, var(--mte-bg-2, #0a0a0b), var(--mte-bg, #000) 75%); }
html[data-mte-wallpaper="starfield"] .mte-wallpaper__static,
html[data-mte-wallpaper="city"] .mte-wallpaper__static,
html[data-mte-wallpaper="fireflies"] .mte-wallpaper__static,
html[data-mte-wallpaper="fireworks"] .mte-wallpaper__static,
html[data-mte-wallpaper="beam"] .mte-wallpaper__static,
html[data-mte-wallpaper="petals"] .mte-wallpaper__static,
html[data-mte-wallpaper="embers"] .mte-wallpaper__static,
html[data-mte-wallpaper="synthwave"] .mte-wallpaper__static {
  background: var(--mte-bg, #000); }
/* Room for the player bar: the layer ends above it while media plays. */
#mte-wallpaper { bottom: var(--mte-player-h, 0px); }
/* Lift page chrome above the fixed layer only when a wallpaper is active.
   Header/sidebar/player/mobile-menu already stack above it; content and
   footer need the explicit lift. */
html[data-mte-wallpaper]:not([data-mte-wallpaper="none"]) .site-content { position: relative; z-index: 1; }
html[data-mte-wallpaper]:not([data-mte-wallpaper="none"]) .site-footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  html[data-mte-respect="1"][data-mte-explicit="0"].mte-motion .mte-wallpaper__specks { animation: none; }
  html[data-mte-respect="1"][data-mte-explicit="0"].mte-leaving #mte-wallpaper { opacity: 1; transform: none; }
  html[data-mte-respect="1"][data-mte-explicit="0"].mte-entering #mte-wallpaper { animation: none; }
  html[data-mte-respect="1"][data-mte-explicit="0"] .mte-fx i, html[data-mte-respect="1"][data-mte-explicit="0"] .mte-fx .sun,
  html[data-mte-respect="1"][data-mte-explicit="0"] .mte-fx .floor { animation: none !important; }
}

/* Suspend CSS and pseudo-element motion with the owned engine lifecycle. */
html[data-mte-paused="1"] #mte-wallpaper,
html[data-mte-paused="1"] #mte-wallpaper *,
html[data-mte-paused="1"] #mte-wallpaper *::before,
html[data-mte-paused="1"] #mte-wallpaper *::after { animation-play-state: paused !important; }
html[data-mte-perf="low"] .fx-stars .s3,
html[data-mte-perf="low"] .fx-meteors .m2 { display: none; }
/* musiveo-custom */
/* =========================================================================
   MUSIVEO custom theme overrides (Code Snippets copy lives in WP admin;
   this file is the version-controlled source - sync them after edits)
   Order: tokens -> components (slider, user, player, loops, header, ...) ->
   layout/base -> animations -> responsive overrides (media queries LAST so
   they win ties when active, per standard CSS architecture).
   Rules marked SAFARI: / COMPAT: are cross-browser fixes - keep them.
   Sections:
     01. DESIGN TOKENS & VARIABLES (loops-block / plays-block / theme)  [2 rules]
     02. LOOP SLIDER (loops-block slider grid)  [3 rules]
     03. USER / PROFILE (plays-block user, headers, menus)  [13 rules]
     04. AUDIO/VIDEO PLAYER (plays-block plyr, playlist, embeds)  [36 rules]
     05. LOOP ITEMS & CARDS (loops-block)  [74 rules]
     06. LOOP CHROME: rows, overlays, hero, nav, dots, filters (loops-block)  [14 rules]
     07. HEADER / NAV / SIDEBAR (Musiveo theme)  [61 rules]
     08. THEME UTILITIES & NOTICES  [5 rules]
     09. CONTENT BLOCKS & MISC PLUGINS (galleries, covers, accordion, lightbox, social login)  [27 rules]
     10. FORMS / AUTH / COMMENTS / UPLOAD / MODALS  [44 rules]
     11. LAYOUT & CONTAINERS (theme)  [22 rules]
     12. BASE / TYPOGRAPHY / ELEMENTS  [24 rules]
     ANIM. Animations (@keyframes)  [1 rules]
     RWD. Responsive & environment overrides (@media/@supports)  [38 blocks]
   ========================================================================= */

/* =========================================================================
   01 · DESIGN TOKENS & VARIABLES (loops-block / plays-block / theme)  (2)
   ========================================================================= */

:root {
    --loop-cols: 4;
    --loop-xs-cols: 1;
    --loop-rows: 1;
    --loop-columns: max( var(--loop-cols) - 5, var(--loop-xs-cols) );
    --loop-grid-gap: 0.8rem;
    --loop-row-gap: 0.8rem;
    --loop-max-width: 100%;
    --loop-min-width: 0;
    --loop-line: 1;
    --loop-line-height: 1.3;
    --loop-ratio: 1;
    --loop-radius: 4px;
    --loop-center-width: 70%;
	--color-border: rgb(16 16 16 / 33%);
	--mobile-menu-icon-height: 2rem;
	--side-menu-item-grid-gap: 0.5rem;
	--side-menu-gap: 1.25rem;
}

:root {
    --plyr-mini-player-height: 8rem;
    --column-gap: 3px;
    --plyr-control-padding: 1rem;
}

/* =========================================================================
   02 · LOOP SLIDER (loops-block slider grid)  (3)
   ========================================================================= */

.block-loop-slider, [data-plugin=slider] {
    grid-area: auto;
}

[data-plugin="slider"], .block-loop-slider {
    display: grid;
    overflow-x: auto;
    border-radius: var(--loop-radius);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: none;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory; /* COMPAT: standard prop was missing, only -ms- was set */
    grid-auto-flow: column;
    --loop--cols: calc((var(--loop-max-width) - (var(--loop-columns) - -0.5) * var(--loop-grid-gap)) / var(--loop-columns));
    grid-auto-columns: var(--loop--cols);
    /* SAFARI: was `repeat(var(--loop-rows), max-content)` + `grid-template-columns: inherit !important`.
       max-content rows size against the tallest track and `inherit` can pull an ancestor
       grid template in. minmax(0, auto) with no inherited template fixes the blowout. */
    grid-template-rows: repeat(var(--loop-rows, 1), minmax(0, auto));
    align-items: start;
    min-height: 0;
    box-sizing: border-box;
    font-size: 0; /* SAFARI: collapses stray whitespace text nodes that render as gaps/glyphs */
}

/* restore text sizing inside real slider children (items set their own size via the theme) */
.block-loop-slider > *,
[data-plugin="slider"] > * {
    font-size: var(--loop-font-size, 0.9375rem);
    min-width: 0;
    min-height: 0;
}

/* =========================================================================
   03 · USER / PROFILE (plays-block user, headers, menus)  (13)
   ========================================================================= */

.wp-block-loop-user.block-loop-row .entry-title {
    justify-content: flex-start;
    display: flex;
}

.byline .avatar + .author-name:before, .byline .svg-icon + .author:before {
    content: '';
    display: -webkit-box;
    width: 1rem;
    float: inline-start;
}

.header-user .entry-meta {
	margin-top: 1rem;
    margin-bottom: 0;
    border-radius: 1rem;
    width: fit-content;
    padding: 1rem;
    display: inline-flex;
    max-width: 92vw;
    flex-direction: row;
    flex-wrap: wrap;
}
.header-user .post-thumbnail {
    width: 10rem !important;
    border-radius: 100% !important;
    padding: 0;
}
.user-links li a {
    display: inline-block;
    padding: 0.6rem;
    line-height: 0;
    border-radius: 1rem;
    margin: 3px;
}

.fa-fw {
    text-align: center;
    width: 0.5em;
    margin-left: 0.5em;
}

.wp-block-loop-user .entry-header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    grid-gap: 0;
    align-self: center;
}

.wp-block-loop-user .entry-title {
    font-size: 1rem;
    font-weight: 500;
}

.wp-block-loop-user .entry-title a, .block-loop-item .byline .author {
    --loop-line: 1;
    display: inline;
	font-size: 16px;
    word-break: keep-all;
}

.user-followers {
	display: flex;
	font-size: 13px;
}

.menu-profile-menu-container {
    filter: drop-shadow(2px 4px 6px black);
    background-color: #000000cc;
    padding: 5px 0px 5px 0px;
}

.user-navigation {
	margin-bottom: 1.5rem;
	box-shadow: 0 0.5px 0 var(--color-border);
	font-weight: 400;
	width: auto;
	padding: 0 var(--x-gap);
    background-color: rgb(0 0 0 / 85%);
    mix-blend-mode: luminosity;
}

.wp-block-loop-user .post-thumbnail {
    width: 102px;
    margin: 10% 10% 0 10%;
    border-radius: 50%;
    align-self: center;
    height: auto !important;
}

.wp-block-loop-user.block-loop-row .post-thumbnail {
    margin: 0;
    min-width: 0;
    width: 3rem !important;
    height: 3rem;
}

/* =========================================================================
   04 · AUDIO/VIDEO PLAYER (plays-block plyr, playlist, embeds)  (36)
   ========================================================================= */

.plyr--pip-supported [data-plyr=pip] {
    display: inline-flex;
}

.plyr [data-plyr=captions] {
    display: none;
}

.plyr--fullscreen-enabled [data-plyr=fullscreen] {
    display: flex;
}

.plyr-playlist .plyr__controls {
    color: inherit;
    background: inherit;
    text-align: inherit;
    margin: 0px;
}

#playlist-modal .block-loop-items {
    --loop-columns: 2;
}

#playlist-modal form {
    flex: 1;
    display: flex;
    align-items: center;
    background: #000;
    padding: 1rem;
	border-radius: 1rem;
}

#playlist-modal .entry-title {
    font-size: 14px !important;
    display: inline-flex;
}

.plyr-theme-3 .plyr__cover {
        --plyr-cover-size: 2.75rem;
}

.dark .plyr-playlist .plyr-list, .dark .site-sidebar
 {
    background-color: var(--color-grey-700);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.plyr-item .plyr-item-cover {
    border-radius: 0.4rem;
    background-size: cover;
    background-position: 50% 50%;
    background-color: rgba(110, 120, 130, 0.1);
    flex: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: inline-flex;
    justify-content: center;
}

.plyr-item .btn-play {
    width: 24px;
    height: 24px;
    font-size: 10px;
    display: none;
    margin: 6px;
    color: #ffffff !important;
    background: #1212129e !important;
    border: none;
    align-self: center;
	border-radius: 0 !important;
}

.plyr-playlist .plyr__video-wrapper video {
    border: 0;
    left: 0;
    position: absolute;
    top: 0;
    /* COMPAT: removed invalid `justify-self: anchor-center` (no effect on absolutely-positioned video) */
}

.plyr:fullscreen {
    background: #000;
    border-radius: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    width: 100% !important;
}

.plyr--fullscreen-fallback {
    background: #000;
    border-radius: 0!important;
    bottom: 0;
    display: block;
    height: 100vh;
    height: 100dvh;
    left: 0;
    margin: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 10000000;
}

.plyr-playlist {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    color: currentColor;
    background-color: inherit;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    min-height: var(--plyr-height);
    box-shadow: none;
	margin-bottom: var(--mobile-menu-height);	
}

.plyr__menu__container {
	animation: 0.2s ease 0s 1 normal none running plyr-popup;
	background: #0d0e0f;
	border-radius: 4px;
	bottom: 100%;
	box-shadow: var(--plyr-menu-shadow,0 1px 2px rgba(0,0,0,0.15));
	color: var(--plyr-menu-color,#4a5464);
	font-size: var(--plyr-font-size-base,15px);
	margin-bottom: 10px;
	position: absolute;
	right: -3px;
	text-align: left;
	white-space: nowrap;
	z-index: 3;
	min-width: fit-content;
}

.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
	background: #00b3ff;
	background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
	color: #fff;
	color: var(--color-primary) !important;
}

.plyr__control {
    line-height: 1;
    font-size: 14px;
    padding: var(--plyr-padding);
    transition: all .3s cubic-bezier(0, 0, 0, 1.69);
}

.plyr__controls .btn-like {
    padding: var(--plyr-padding);
	background: #000000 !important;
    justify-items: center;
    padding: 0.75rem;
}

.plyr button {
    font: inherit;
    line-height: inherit;
    width: auto;
    background: #00000014 !important;
}

.waveform .btn-play {
	color: #aaa;
	display: none;
}

.play-notification-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid #0000004d;
    margin: 2px;
    background: #6d6d6d14;
    border-radius: 9px;
}

.plyr-playlist [data-plyr="download"], .plyr-playlist [data-plyr="purchase"] {
    display: inline-flex;
    align-items: center;
    max-width: 200px;
    word-break: break-all;
    line-height: 1;
    max-height: 50px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plyr-playlist .plyr:not(.plyr-fullscreen) .plyr__video-wrapper, .plyr-playlist:not(.plyr-theme-video) .plyr__ads {
    position: absolute;
    top: auto;
    bottom: calc(100% + 0rem);
    left: auto;
    right: 0.4rem;
    height: auto;
    width: calc(var(--plyr-aspect-ratio) * var(--plyr-mini-player-height));
    background-color: #000;
    box-shadow: 0 12px 16px 1px rgb(0 0 0), 0 4px 22px 3px rgb(0 0 0 / 75%), 0 6px 7px -4px rgb(0 0 0 / 81%);
}

.plyr-playlist .plyr:not(.plyr-fullscreen) .plyr__video-wrapper {
	max-height: 15rem;
    width: 22%;
    height: AUTO;
	min-height: 100%;
    border-radius: 1rem;
}

.plyr-list .close {
    background: transparent;
    color: inherit;
    line-height: 1;
    font-weight: 400;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    height: auto;
    padding: 0.5rem;
    margin: 2px;
}

.plyr-list-wrap {
    background-color: inherit;
    position: relative;
    z-index: 20000;
}

.plyr__tooltip {
    background: var(--tooltip-color);
    color: #fff;
}

.plyr-playlist .plyr__volume input {
    --plyr-range-track-height: 4px;
    position: absolute;
    transform: rotate(-90deg) translateX(-10px);
    transform-origin: left top;
    width: 8rem;
    height: 2rem;
    color: #333;
    background-color: #000000e6;
    padding: 0 1rem;
    border-radius: 6px;
    top: 0;
    margin: 0;
    left: calc(50% - 1rem);
    box-shadow: var(--plyr-menu-shadow, -1px 0 2px #00000026);
    opacity: 0;
    transition: all .2s;
    pointer-events: none;
}

.plyr-playlist.fixed-bottom .plyr__volume input {
    --plyr-range-track-height: 4px;
    position: absolute;
    transform: rotate(-90deg) translateX(-10px);
    transform-origin: left top;
    width: 8rem;
    height: 2rem;
    color: #333;
    background-color: #000000e6;
    padding: 0 1rem;
    border-radius: 6px;
    top: 0;
    margin: 0;
    left: calc(50% - 1rem);
    box-shadow: var(--plyr-menu-shadow, -1px 0 2px #00000026);
    opacity: 0;
    transition: all 0.2s;
    pointer-events: none;
}

.plyr-live:after, .plyr-live:before {
    display: inline-block;
    content: '';
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 1rem;
	box-shadow: 0px 0px 1px 1px #0000001a;
	animation: pulse-animation 2s infinite;
}

.play-embed-cat a {
    font-size: 11px;
    background-color: #ffffff;
    color: #000000;
    padding: 2px 8px;
    border-radius: 1rem;
}

.play-notification-item a {
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 1;
    word-break: break-word;
    line-height: 1;
    line-break: auto;
}

.play-embed-list img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
    max-width: 32px;
    display: flex;
    object-fit: none;
}

.play-embed-body .plyr, .play-embed-body .plyr-playlist {
    min-height: 0;
    display: flex;
    justify-content: flex-end;
}

.plyr-fullscreen .plyr__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000057 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* =========================================================================
   05 · LOOP ITEMS & CARDS (loops-block)  (74)
   ========================================================================= */

button.btn-like {
    font-size: 1em;
    place-content: center;
	margin-right: 2px;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--entry-meta-grid-gap, 1rem);
    margin-bottom: var(--y-gap);
    justify-content: flex-start;
    align-content: flex-start;
}

.block-loop-item .count, .comment-toolbar .count, .entry-meta .count {
    color: var(--text-secondary-color, #888);
    padding-inline-start: 0.5rem;
    -webkit-padding-start: 0.5rem;
    font-size: 0.75rem;
	align-content: center;
}

.icon-play {
    line-height: 1;
    background: #070707;
    border-radius: 100%;
    color: #888888;
    padding: 0.85em 0.95em;
}

.icon-plus {
    border: none;
    padding: 0.75rem 0.375rem;
    background-color: transparent !important;
    color: currentColor;
    position: relative;
}

.block-loop-item .btn-play {
    width: 36px;
    height: 36px;
    background: #090909;
    color: #fff !important;
    border-radius: 0.5rem !important;
}

.has-loop-posts.block-loop-index .icon-play {
    display: none;
    position: relative;
    padding: 0.8rem;
    display: flex;
	border-radius: 0.5rem;
	top: 50%;
    transform: translateY(0%);
    line-height: 0;
}

span.btn-play-now.icon-play:hover
 {
    background: #262626;
    color: #fff;
}

span.btn-play-now.icon-play.active.is-current {
    background: #212121;
    color: #fff;
}

.btn-play-normal {
    width: auto !important;
    height: auto !important;
    padding: 0.53125rem 1.25rem !important;
    border: 0 !important;
    gap: 0.3rem;
    display: inline-flex;
    border-radius: var(--button-radius, 0.5rem);
    background-color: var(--color-primary);
    color: #fff;
}

.block-loop-row .entry-info {
    display: flex;
}

.block-loop-row .entry-header {
    flex: 1;
    /* overflow: hidden; */
    display: flex;
    flex-wrap: wrap;
    padding: 0px 5px 5px 5px;
    align-items: center;
    grid-gap: 0;
    content-visibility: auto;
}

.block-loop-row .entry-footer {
    display: flex;
    padding-left: 0;
    padding-right: 0;
    width: inherit;
    flex-direction: row;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
	flex-flow: row;
}

.entry-header-container > .post-thumbnail {
    position: relative;
    padding: 0;
    width: var(--header-image-size);
    flex-shrink: 0;
    margin: 0;
    border-radius: 6px;
    align-self: flex-start;
    background-color: #000;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity .4s, transform .35s;
    transition-delay: .65s;
    background-size: cover;
    align-self: center;
}

.entry-header-container > .entry-header .entry-title {
    clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%);
    transform: translate3d(0, 0, 0);
    transition: clip-path cubic-bezier(0.075,.82,.165,1) 1s;
    transition-delay: 0.35s;
    display: flex;
    align-items: center;
}

.block-loop-item {
    position: relative;
    padding: 0;
    max-width: 100%;
    border-radius: var(--loop-radius);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    scroll-snap-align: start;
    order: 10;
    height: auto;
    min-width: 0;
    min-height: 0;
    align-self: start; /* SAFARI: was `height:fit-content` + `max-height:-webkit-fill-available` + `align-self:baseline`, which blows grid rows up on iOS */
	box-shadow: 1px 1px 1px 1px #0c0c0c57;
	z-index: 1;
}

.block-loop-item .entry-avatar {
    width: 36px;
    flex-shrink: 0;
    margin: 0.3rem;
}

.block-loop-item .post-thumbnail {
  background-color: unset;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  /* Uniform rows: height derives from width via aspect-ratio, so all cards in a
     row match. Supported Safari 15+, all Firefox/Chrome; older browsers fall
     back to natural image height (uneven, but no gap). */
  aspect-ratio: var(--loop-ratio, 1);
  align-self: start;
  max-height: 30vh;
  /* SAFARI: removed `width:fit-content` + `min-width:-webkit-fill-available` (forced viewport-wide thumbs) */
}

.block-loop-item .post-thumbnail:after {
    /* Spacer disabled: the aspect-ratio padding hack only works when the media is
       `position:absolute` (theme default). Your media below is `position:relative`
       (see next rule), so this spacer rendered as a second, empty thumbnail-height
       box = the gap. `display:none` removes it in all browsers incl. Safari/Firefox. */
    display: none;
    content: none;
}

.entry-content>* {
    word-wrap: break-word;
    margin-bottom: 1px;
}

.entry-header-inner .byline {
    width: 100%;
    justify-content: inherit;
    background: #070707;
    max-width: fit-content;
    padding-inline: 0.4rem;
    border-radius: 0.5rem;
    display: flex;
    color: #cfcfcf;
}

.entry-header-container .post-thumbnail img, .entry-header-container .post-thumbnail .avatar {
    border-radius: inherit;
    position: relative;
    width: 100%;
    height: auto;
    max-height: 25vh;
    max-width: 25vh;
    object-fit: contain;
    place-self: center;
    border-radius: 1rem;
}

.block-loop-item .post-thumbnail .avatar {
    box-shadow: 0px 0px 8px 0px #8111ce2e;
    border-radius: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
}

.post-thumbnail video {
	min-inline-size: fit-content;
}

.block-loop-item .post-thumbnail .avatar, .block-loop-item .post-thumbnail img, .block-loop-item .post-thumbnail video {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    /* No max-height cap here: the container's aspect-ratio sets one uniform height
       and `object-fit: cover` crops into it. A cap would reopen a gap in taller boxes. */
    object-fit: cover;
    border-radius: 0.5rem;
	vertical-align: bottom;
}

/* Hero keeps its own sizing: opt out of the uniform-ratio treatment above. */
.block-loop-hero .post-thumbnail {
    aspect-ratio: auto;
}
.block-loop-hero .post-thumbnail .avatar,
.block-loop-hero .post-thumbnail img,
.block-loop-hero .post-thumbnail video {
    max-height: 10rem;
}

.entry-header-inner .entry-artist, .entry-header-inner .byline {
    width: 100%;
    justify-content: inherit;
    margin: 2px 0 !important;
}

.album-tracks .post-thumbnail {
    border-radius: 2px;
    width: 3rem;
    height: 3rem;
    min-width: 50px;
}

.entry-header-container .post-thumbnail:after {
    padding-top: 100%;
    min-height: auto;
    content: "";
    width: 100%;
    display: inline;
}

.block-loop-item .entry-meta {
    /* COMPAT: removed invalid `display: flow` (ignored everywhere); theme `display: flex` applies */
    flex-wrap: wrap;
    grid-gap: 0;
    margin: 0;
    color: var(--text-secondary-color, #888);
    font-size: 12px; /* COMPAT: was non-standard `font: -webkit-small-control` (Firefox ignored it) */
}

.block-loop-item .entry-meta>span {
    margin: 0;
    vertical-align: baseline; /* COMPAT: was invalid `-webkit-baseline-middle` */
}

.header-station > .entry-header .entry-artist, .header-station > .entry-header .entry-title {
    font-size: var(--header-title-size);
    line-height: 1;
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 300;
    align-self: auto;
}

.block-loop-item-link {
    padding: 0.75rem 1rem;
    background-color: #4d4d4d1f;
    border-radius: var(--btn-radius,.5rem);
}

.album-tracks .block-loop-items {
    column-count: auto;
    font-size: 11px; /* COMPAT: was non-standard `font: -webkit-mini-control` (Firefox ignored it) */
    align-items: center;
	grid-gap: 0.4rem;
}

.is-album .has-loop-posts .entry-header-inner, .is-playlist .has-loop-posts .entry-header-inner {
    display: flex;
    align-items: center;
    grid-gap: 1rem;
    flex-direction: row;
    align-content: center;
}

.is-buffering [data-play-id].active .entry-header-container .btn-play:after, .is-buffering [data-play-id].active>.post-thumbnail .btn-play:after, .is-buffering [data-plyr=play]:after, .plyr-initing:after {
    width: 2.5rem;
    height: 2.5rem;
    border-bottom-width: medium;
}

.block-loop-item .entry-action .btn-play {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    position: absolute;
    border-radius: 0.5rem;
    mix-blend-mode: luminosity;
    opacity: 0.5;
    min-height: 4rem;
    min-width: 4rem;
	background: #000;
	color: #fff !important;
}

.btn-play {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    position: relative;
    outline: 0;
    vertical-align: middle;
    background-color: #fff;
    color: #333 !important;
    cursor: pointer;
    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1), transform .4s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    outline: 0 !important;
}

.btn-play:hover {
	background-position: right center;
}

.dark .btn-play:hover {
	background-position: right center;
}

.block-loop-item .btn-follow {
    height: 1.25rem;
    padding: 0 0.5rem;
    font-size: 12px !important;
    vertical-align: text-bottom;
    align-self: auto;
	border: 1px solid #303030;
}

.block-loop-item .author, .block-loop-item .entry-artist, .block-loop-item .entry-meta, .block-loop-item .entry-title {
    display:-webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: var(--loop-line);
    word-break: break-word;
    line-height: var(--loop-line-height);
    line-break: auto;
	margin: 1px;
	padding: 0;
    font-size: 18px;
}

.block-loop-index.block-loop-row .block-loop-item:before {
    content: counter(li);
    counter-increment: li;
    min-width: 2rem;
    max-width: 1rem;
    font-weight: normal;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    opacity: 0.5;
    text-align: center;
    font-size: 0.9em;
    white-space: nowrap;
}

.block-loop-row .block-loop-item {
    display: flex;
    grid-gap: var(--loop-row-gap);
    padding: 5px;
    margin: 0;
    min-height: 100px;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    min-width: fit-content;
}

.plugin-slider, .wp-block-loop {
	position: relative;
	--grid-gap: 1.5rem;
	--row-gap: 0.4rem;
	--grid-rows: 1;
	--grid-columns: 2;
	--loop-line: 2;
	--loop-line-height: 1.2;
	--loop-ratio: 1;
	--loop-radius: 0.5rem;
	--loop-max-width: 100%;
}

.wp-block-loop-slider {
    max-width: 100% !important;
    padding: 0 3px 0 3px;
}

.header-station > .entry-meta .btn-play {
    width: auto;
    padding: 0 1.5rem !important;
    display: inline-flex;
    border-radius: var(--button-radius, 0.5rem);
    border: none;
	background-color: #0d0d0d;
    color: #ffffff !important;
}

.btn-comment {
    display: inline-flex;
    align-items: center;
    padding: 1em;
    min-width: 2rem;
    line-height: 1;
    color: inherit;
    background-color: #0d0d0d !important;
    border: none;
    outline: 0;
    color: #fff;
    box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 9%);
    background-size: 300% 100%;
    border-radius: 1rem;
    max-height: 40px;
}

.btn-download, .btn-purchase, .btn-comment, button.btn-like, button.btn-more {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem;
    font-size: inherit;
    line-height: 1;
    color: inherit;
    background-color: transparent;
    border: none;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #181818;
}

.block-loop-item .entry-action {
    background-color: hsl(0deg 0% 0% / 52%);
	width: 101%;
}

.album-tracks .btn-download, .album-tracks .btn-like, .album-tracks .play-count, .block-loop-inline .waveform, .block-loop-nav {
    display: flex;
    margin-right: 5px;
    line-height: 0;
    align-items: stretch;
    align-content: center;
    flex-wrap: wrap;
    min-width: fit-content;
}

.block-loop-hover .entry-title {
    text-align: inherit;
}

.block-loop-item .entry-header-inner .btn-purchase, .block-loop-item .add_to_cart_inline {
    margin: 8px 0;
    width: fit-content;
}

[data-plyr="purchase"], .btn-purchase, a.btn-purchase, a.added_to_cart, button.btn-purchase {
    border: 1px solid rgba(150, 150, 150, 0.2);
    border-radius: 1rem;
    padding: 0.5em 1em;
    line-height: 1;
    font-size: 12px;
    font-weight: 500;
    margin-inline-start: auto;
    max-width: 100px;
    text-align: center;
}

.progress-bar, .block-loop-hover .block-loop-item:hover, .block-loop-hover .block-loop-item.active {
    background: linear-gradient(331deg, rgb(0 0 0 / 0%) 20%, rgb(116 21 191 / 2%) 47%, rgb(61 163 111 / 3%) 100%);
    z-index: 10001;
}

.btn-follow.active {
    background-color: currentColor;
	background: #121212 !important;
}

.btn-follow.active .following {
    display: inline;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.album-tracks .block-loop-item.active {
    background-color: var(--tracks-item-hover-color, rgb(150 155 160 / 9%));
}

.btn-moreless {
    position: absolute;
    bottom: 0;
	    top: 29px;
	right: 1px;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background-color: #000;
    color: inherit;
    line-height: 1.5;
    font-size: 14px;
	margin: 2px 0px;
}

.btn-play-wrap {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
    margin-left: 1rem;
}

.album-tracks .entry-header {
    flex-wrap: inherit;
    padding: 0;
}

.block-loop-item .entry-header {
    padding: var(--loop-header-gap, 0.4rem) 5px;
    margin: 0;
    flex: 1;
    display: flex;
    grid-gap: var(--loop-header-gap, 0rem);
    align-items: stretch;
    width: fit-content;
    max-width: 90vw;
	flex-wrap: wrap;
}

.btn-download {
    border-radius: 1rem;
    padding: 10px;
    margin: 2px;
}

.has-loop-posts .block-loop-item.active {
    background-color: rgb(13 13 13);
}

.has-loop-posts .block-loop-item:hover {
    background-color: rgb(13 13 13);
}

.entry-header-inner {
    flex: 1;
    z-index: 1;
    width: 100%;
    font-size: var(--loop-font-size);
    min-width: 10rem;
    display: flex;
    align-items: baseline;
    flex-direction: column;
	gap: 0 !important;
}

.entry-header-inner~.btn-more {
    margin: 0rem 0.2rem;
    opacity: 0.5;
    background: transparent !important;
}

.block-loop-row .post-thumbnail {
    width: 3rem !important;
    min-width: var(--loop-min-width) !important;
}

.entry-badge .play-duration {
    background-color: #000;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    padding: 1px 4px;
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    min-width: max-content;
}

.dropdown-menu-notificaitons .block-loop-items {
    margin-bottom: 0;
    display: inline-block;
    min-width: -webkit-fill-available; /* COMPAT: fallback for old Safari before standard `stretch` */
    min-width: stretch;
}

.btn-play-normal span {
    display: none;
}

.file-upload .post-thumbnail img {
    position: absolute;
    width: min-content;
    min-width: auto;
    max-width: 240px;
    object-fit: cover;
    border-radius: inherit;
}

.btn-follow:not(.active) {
    background-color: transparent;
    min-width: 4rem !important;
}

[data-plyr="like"] .icon--pressed, .btn-like.active svg {
    stroke: #ffffff;
    fill: #afafaf;
}

.plyr-initing:after, .is-buffering [data-plyr="play"]:after, .is-buffering [data-play-id].active > .post-thumbnail .btn-play:after, .is-buffering [data-play-id].active .entry-header-container .btn-play:after {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    border: 2px solid;
    border-left-color: transparent;
    border-radius: 100%;
    box-sizing: border-box;
    opacity: 0.5;
    -webkit-animation: loading 1s linear infinite;
    animation: loading 1s linear infinite;
    max-width: 40px;
    max-height: 40px;
}

/* =========================================================================
   06 · LOOP CHROME: rows, overlays, hero, nav, dots, filters (loops-block)  (14)
   ========================================================================= */

.site-header .search-form .dropdown-menu {
    width: 100%;
    left: 0;
    top: 100% !important;
    transform: none !important;
    min-width: 240px;
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    background: #000000;
    border-radius: 10px;
    position: absolute;
    visibility: initial;
    border: 1px solid;
    border-color: #101010;
}

.dropdown-menu.show {
    display: block;
    content-visibility: auto;
}

.site-header .search-form .dropdown-menu a {
    display: flex;
    grid-gap: 0.5rem;
    padding: 0.5rem 1rem;
    word-break: break-word;
    background: #050505;
    border: 1px #0e0e0e;
    border-top-style: double;
    border-radius: 5px;
}

.block-loop-nav span {
    flex: auto;
    align-self: flex-end;
}

.block-loop-heading {
    width: 1%;
    flex: 1;
    padding-top: 1em;
    padding: 10px 0px 10px 5px;
}

.block-loop-subtitle {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary-color,#888);
    line-height: 1.6;
    text-transform: none;
    display: block;
    width: 100%;
    padding: 0px 0px 10px 5px;
}

.block-loop-dot button {
	width: 1rem !important;
	height: 1rem !important;
	padding: 0 !important;
	border-radius: 2rem;
	border: none;
	background-color: transparent !important;
	color: inherit;
}

.block-loop-nav button {
    width: 2rem;
    height: 2rem;
    padding: 10px;
	top: 0.5rem;
    margin: 0px 15px 0px 15px !important;
    border-radius: 100%;
    display: inline-flex;
    border: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1) !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.block-loop-nav {
    opacity: 0;
    transition: opacity 0.2s;
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 5;
    height: 0;
    width: calc(100% + -1.5rem);
    left: 1.25rem;
    right: 1.25rem;
    top: var(--top, 50%);
}

.block-loop-nav{
	flex-wrap: nowrap;
}

[data-plugin="moreless"], .moreless-content, .moreless {
    word-break: break-word;
    position: relative;
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: var(--more-line, 2);
    max-height: calc(var(--more-line, 2) * 30px);
}

[data-plugin="moreless"] p, .moreless p {
    margin-bottom: 1.5em;
    margin-top: 0;
    line-height: 1.5;
    font-size: 14px;
    max-width: 100vw;
    border-radius: 0.5rem;
}

.site-header .search-form .dropdown-menu img, .site-header .search-form .dropdown-menu .avatar {
    width: 2.5rem;
    height: 2.5rem;
}

/* =========================================================================
   07 · HEADER / NAV / SIDEBAR (Musiveo theme)  (61)
   ========================================================================= */

.nav li.hide-text > a {
    padding-left: 0;
    padding-right: 0;
    min-width: 30px;
    text-align: center;
    justify-content: center;
    padding: 1rem;
}

.site-sidebar .nav > li:not(.menu-header) > a {
    padding: 0.5rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: var(--nav-item-radius, 0.5rem);
    font-size: 0.85rem;
    color: #ffffff;
}

.menu-item img._before, .rtl .menu-item img._after {
    margin-right: .3em;
    filter: brightness(10);
}

.site-sidebar .site-sidebar-header:not(:empty), .site-sidebar .site-sidebar-footer:not(:empty) {
    font-size: .875rem;
    margin: 0;
    padding-left: 1rem;
    padding-top: 0.5rem;
}

html body i.icon-nav, html body i.icon-nav:before, html body i.icon-nav:after {
    background-color: var(--controls-arrow-colour);
    /* Was a 0.5px hairline, which browsers draw unevenly (some lines faint, some missing); a 2px rounded line is crisp everywhere. */
    height: 2px;
    border-radius: 2px;
    background: #fff!important;
}

i.icon-search {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    cursor: pointer;
    max-width: 1.5em;
}

.station-copyright::before {
    content: "©";
    margin-right: 5px;
}

.menu-toggle {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0.3rem;
    margin: 0;
    cursor: pointer;
}

.site-header {
    font-size: .875rem;
    left: 0;
    right: 0;
    top: var(--adminbar-height);
    z-index: 1000;
    position: fixed;
    background-color: #fff;
    box-shadow: none;
}

.site-header .search-form input {
    border: 0;
    outline: 0 !important;
    box-shadow: none !important;
    color: inherit;
    /* COMPAT: removed invalid `display: masonry` (ignored by every browser) */
    flex: 1;
    width: 1%;
    height: 1.5rem;
    padding: 0 0.5rem;
    background-color: transparent !important;
    min-width: 100%;
}

.site-logo svg, .site-logo img {
    width: auto;
    height: var(--site-logo-height, 1.8rem);
}

.navigation {
	position: sticky;
    top: calc(var(--adminbar-height) + var(--navbar-height));
    z-index: 800;
    backdrop-filter: blur(10px) saturate(100%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgb(0 0 0 / 89%);
    text-align: center;
    padding: 0.4em 0.4em;
    mix-blend-mode: normal;
}

.navigation .nav {
    grid-gap: 0;
	overflow: auto;
}

.navigation .nav > li > a {
    padding: 3px 0.5rem 3px 0.5rem;
	margin: 4px 4px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 0.5rem;
	border: 1px solid #2c2c2c;
    font-size: initial;
}

.navigation .nav > li.active > a, .navigation .nav > li.current_page_item > a {
    background: #101010;
}

.navigation .nav > li > a:hover {
    border-bottom-color: var(--color-border);
    background: #101010;
}

.nav .current-menu-item > a {
    font-weight: 600;
    background: #1e1d1d2e;
}

.mobile-menu .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--mobile-menu-font-size);
    min-height: var(--mobile-menu-height);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding-bottom: 0.5rem;
}

.menu-cart .cart-quantity, .nav .count {
    position: relative;
    top: -10px;
    margin: 0 -8px;
    display: inline-block;
    padding: 0;
    font-size: 11px;
    text-align: center;
    height: 18px;
    min-width: 18px;
    line-height: 18px;
    color: #fff;
    border-radius: 18px;
    background-color: #292929;
}

.site-sidebar .nav .svg-icon {
    stroke-width: 2.75px;
}

.dark .site-sidebar .menu-item:not(.btn-link) svg {
    color: inherit;
    opacity: 1;
}

.mobile-menu li.current_page_item > a, .mobile-menu li.current-menu-item > a {
    color: #fff;
}

.header-station .tag a {
    border: none;
    padding: 0;
    margin: 0;
    margin-inline-end: 0.5rem;
    -webkit-margin-end: 0.5rem;
    background-color: transparent;
    min-width: min-content !important;
}

.header-station .station-content, .header-station .tag a, .entry-info {
    color: var(--text-secondary-color);
    background: #040404;
    width: fit-content;
    padding: 0.1rem;
    border-radius: 0.5rem;
    margin: 3px;
	min-width: 193px;
}

.header-station, .header-user {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--header-x-gap);
    grid-row-gap: var(--header-y-gap);
    padding: var(--x-gap);
    padding-bottom: 1.5rem;
    width: 100% !important;
    max-width: 100vw !important;
	padding: 1rem 2rem !important;
}

.site-sidebar .primary-menu {
    padding: 0;
}

.site-sidebar .nav {
    flex-direction: column;
    padding: 0 1rem 8rem 1rem;
}

.site-sidebar .nav>li:not(.menu-header)>a {
	margin: 0.3rem 0;
	padding: 0;
	border-radius: var(--nav-item-radius, 0.5rem);
	display: flex;
    min-height: 3rem;
}

.site-sidebar .menu-header {
    padding: 0 0.5rem;
    opacity: 0.5;
    font-size: small;
}

.primary-menu-has-icon .site-sidebar .menu-header {
    padding: 0 0.5rem 0 0.5rem;
    box-shadow: 0px 0px 0px 3px #02020254;
}

.site-sidebar .site-sidebar-header:not(:empty), .site-sidebar .site-sidebar-footer:not(:empty) {
    font-size: .875rem;
    margin: 0;
	padding-left: 1rem;
}

.dark .mobile-menu, .dark .plyr-playlist .plyr {
    color: #fff;
    background-color: var(--color-grey-700);
    box-shadow: 0px -1px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 2000;
}

.mobile-menu, .dark .plyr-playlist .plyr {
    z-index: 2000;
}

.mobile-menu {
    position: fixed;
    bottom: 0;
	padding: 0;
    background-color: inherit;
    z-index: 100020;
    width: 100vw;
    height: var(--mobile-menu-height);
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: transform 0.2s;
    -webkit-overflow-scrolling: touch;
    border-top: 0;
    background-clip: padding-box;
  	border-top: 1px solid;
    border-color: #1c1c1cc2;
    min-height: max-content;
}

.menu-item i._mi {
    width: auto;
    height: auto;
    margin-top: 2.75px;
    font-size: 1rem;
    padding-left: 0.4em;
    line-height: 1.9;
    color: #fff;
	font-weight: 600;
}

.nav li>a {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    position: relative;
    transition: color cubic-bezier(0.4, 0, 1, 1) 0.2s;
    color: inherit;
}

.header-station > .entry-header .entry-artist, .site-sidebar .nav li.current-menu-item > a, .site-sidebar .menu-item:not(.btn-link) svg {
    color: #999999;
}

.header-station > .entry-header .entry-artist:hover, .site-sidebar .nav li.current-menu-item > a, .site-sidebar .menu-item:not(.btn-link) svg {
    color: #fff;
	font-weight: 800;
}

#search-state:checked ~ .site-header .search-form {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    color: #333;
    margin: 0;
    border-radius: 0;
    padding: 0 0.5rem;
    max-width: initial;
    margin-left: 0px !important;
}

.nav .current-menu-item>a, .nav a:hover {
    border-radius: 0.5rem;
}

.nav a:hover {
    animation: gradientShift 3s cubic-bezier(0.22, 0.61, 0.36, 1) infinite !important;
    background-size: 200% 100% !important;
}

#menu-state:checked ~ .site-sidebar .nav a span {
    z-index: 30000;
}

.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #121212;
    border: 1px solid #121212;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.site-sidebar {
    --icon-width: 0rem;
    background-color: #fff;
    border-right: none;
    width: var(--side-width);
    padding-top: 1rem;
    flex-shrink: 0;
    position: fixed;
    z-index: 990;
    left: 0;
    top: calc(var(--adminbar-height) + var(--navbar-height));
    bottom: 0;
    overflow-y: auto;
	scrollbar-width: thin;
    -ms-overflow-style: none;
    transition: transform 0.2s;
    -webkit-overflow-scrolling: touch;
	 padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
}

.site-sidebar .nav > li > a:hover {
    background-color: #1e1d1d2e;
    font-weight: 600;
}

.site-header {
    z-index: 20004;
    padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);	
}

.site-header, .site-header .search-form, .site-sidebar, .plyr-playlist {
    z-index: 20003;
	max-width: 100vw;	
}

.dark .site-header, .dark .site-header .search-form, .dark .site-sidebar, .dark .plyr-playlist {
	background: var(--color-grey-700);
	z-index: 99999 !important;
	backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
}

#icon-nav, #icon-search {
    line-height: 0;
    padding: 0.5rem;
    margin: 0;
    text-align: center;
    color: inherit;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
	border: none;
}

.search-form {
    max-width: 33%;
    margin-left: 25%;
	border: 1px solid #101010;
}

.site-header .search-form {
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border-radius: var(--input-border-radius, 1.5rem);
    max-width: 33vw;
    margin-left: 27vw;
    margin-right: auto;
}

.dark .ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #000 !important;
    border: 1px solid #000;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #000 !important;
    border: 1px solid #000;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#icon-nav {
    font-size: 25px;
}

.menu-item ._svg {
    width: 14px;
	margin-left: 0.3em;
    height: 14px;
}

.menu-item img._before, .rtl .menu-item img._after {
    margin-right: .3em;
	min-width: 16px;
    min-height: 16px;
}

#icon-nav {
    font-size: 25px;
    display: none;
}

.nav a:hover {
    animation: none;
    background-size: auto;
    color: #fff;
}

.is-touch .site-header li.current-menu-ancestor>.sub-menu, html:not(.is-touch) .site-header li:hover>.sub-menu {
    z-index: 9999999;
}

.site-header .sub-menu a {
    padding: 0.75rem;
}

/* Show sub-menu item text on mobile (theme hides it) */
.site-header .menu-avatar .sub-menu a > span {
    display: inline !important;
}

/* =========================================================================
   08 · THEME UTILITIES & NOTICES  (5)
   ========================================================================= */

.has-white-color {
    color: #000000;
    background: transparent;
}

.upgrade-button {
    border-radius: 0.8em;
    background: conic-gradient(from 0deg, #14ff721a, #d800ff24, #7a00ff29, #14ff7d17) border-box;
    border: 1px solid transparent;
}

.success::before {
    content: url(https://musiveo.com/wp-content/uploads/2024/04/animation-confetti-4.gif);
    mix-blend-mode: exclusion;
}

.error, .required, #login-form .message #login_error {
    color: #ff2c4f;
    padding: 1rem;
    border-radius: 0.5em;
}

.success {
    color: #55ff00;
    background: #141414;
    border-radius: 0.5em;
    padding: 1rem;
    display: grid;
}

/* =========================================================================
   09 · CONTENT BLOCKS & MISC PLUGINS (galleries, covers, accordion, lightbox, social login)  (27)
   ========================================================================= */

.wp-container-core-group-is-layout-94bc23d7 {
    padding-left: 0.5rem;
    padding-right: 0.75rem;
}

.wp-container-core-group-is-layout-94bc23d7:hover {
	box-shadow: 0 5px 15px rgb(37 37 37 / 40%);
}

.wp-block-themeisle-blocks-accordion {
    margin: 20px auto;
    --title-color: initial;
    --title-background: initial;
    --content-background: initial;
    --border-width: 1px;
    --border-style: solid;
    --border-color: rgb(16 16 16);
    --box-shadow: none;
    --padding: 18px 24px 18px 24px;
    --padding-tablet: var(--padding);
    --padding-mobile: var(--padding-tablet);
}

.wp-block-themeisle-blocks-accordion.is-style-default>.wp-block-themeisle-blocks-accordion-item>.wp-block-themeisle-blocks-accordion-item__title {
    border-top: var(--border-width) var(--border-style) var(--border-color);
}

.wp-block-themeisle-blocks-accordion-item__title {
    position: relative;
    z-index: 2;
    color: var(--title-color);
    background: var(--title-background);
    padding: 0.3rem;
    list-style: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: grid;
    grid-template-columns: auto min-content;
    align-items: center;
    padding-left: 0.3em;
    padding-right: 0.8em;
}

.wp-block-themeisle-blocks-accordion:not(.has-open-icon)>.wp-block-themeisle-blocks-accordion-item[open]>.wp-block-themeisle-blocks-accordion-item__title::after {
    transform: rotate(225deg) translate(0%, -45%);
}

.wp-block-themeisle-blocks-accordion:not(.has-icon)>.wp-block-themeisle-blocks-accordion-item:not([open])>.wp-block-themeisle-blocks-accordion-item__title::after, .wp-block-themeisle-blocks-accordion:not(.has-open-icon)>.wp-block-themeisle-blocks-accordion-item[open]>.wp-block-themeisle-blocks-accordion-item__title::after {
    content: "";
    justify-self: end;
    align-self: center;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    width: 8px;
    height: 8px;
}

div.nsl-container .nsl-button-default {
    color: #fff;
    display: flex;
    border-radius: 1rem !important;
    background: #1e1e1e !important;
}

.wp-block-buttons>.wp-block-button.has-custom-width {
    max-width: fit-content;
}

figure.wp-block-gallery.has-nested-images {
    align-items: flex-start;
    max-width: -webkit-fill-available;
	max-width: fit-content;
}

.wp-block-image .aligncenter {
    margin-left: auto;
    margin-right: auto;
    border-radius: 9px;
}

.wp-block-buttons.is-content-justification-center.is-vertical {
    align-items: center;
    place-self: center;
}

.wp-block-buttons>.wp-block-button {
    display: inline-block;
    margin: 3px;
}

.wp-block-button__link {
    font-size: .875rem;
    padding: 0.5rem;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
    transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out, opacity .3s ease-in-out, transform .3s ease-in-out;
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
	padding: 0.75rem;
}

.wp-block-gallery.wp-block-gallery-1 {
    display: inline-flex;
}

.wp-block-image .is-style-rounded img, .wp-block-image.is-style-circle-mask img, .wp-block-image.is-style-rounded img {
    border-radius: 50px;
}

.dark .wp-block-themeisle-blocks-advanced-heading {
    --padding: 0px;
    --padding-tablet: var(--padding);
    --padding-mobile: var(--padding-tablet);
    --margin: 0px 0px 25px 0px;
    --margin-tablet: var(--margin);
    --margin-mobile: var(--margin-tablet);
    --text-align: left;
    --text-align-tablet: var(--text-align);
    --text-align-mobile: var(--text-align-tablet);
    padding: var(--padding);
    margin: var(--margin);
    text-align: var(--text-align);
    padding-left: 9px;
    padding-top: 9px;
    border-radius: 9px;
    font-size: medium;
}

#nsl-custom-login-form-1 .nsl-container-embedded-login-layout-below {
    clear: both;
    padding: 1rem !important;
    background: #141414;
    border-radius: 1rem;
}

.wp-block-pullquote blockquote, blockquote {
    padding: 2rem 4rem !important;
    color: #8740e5;
    background-color: #191919;
    border-radius: 1rem;
    border-width: 0;
    position: relative;
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.025);
    margin-bottom: 3rem !important;
    font-style: italic;
}

blockquote:after {
    position: absolute;
    bottom: -1rem;
    left: 2rem;
    content: "";
    display: inline-block;
    border-width: 1rem 0 0 2rem;
    border-style: solid;
    border-color: #191919 transparent transparent;
}

.wp-lightbox-overlay .scrim {
    background-color: #000 !important;
    height: 100%;
    opacity: .9;
    position: absolute;
    width: 100%;
    z-index: 2000000;
}

.wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) {
    background: none;
    border: none;
    fill: #fff !important;
}

.html5-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: -webkit-fill-available;
    overflow: hidden;
    z-index: 0;
    outline: 0;
    font-family: "YouTube Noto", Roboto, Arial, Helvetica, sans-serif;
    color: #eee;
    text-align: left;
    direction: ltr;
    font-size: 11px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    touch-action: manipulation;
}

.html5-video-player .video-click-tracking, .html5-video-player .video-stream {
    display: block;
    width: 100% !important;
    height: fit-content !important;
    height: -webkit-fill-available;
    position: absolute;
}

#wp-block-themeisle-blocks-accordion-b7ac62c7 {
    --title-color: #fff !important;
    --content-background: #101010 !important;
    --border-color: #101010 !important;
}

.wp-block-themeisle-blocks-accordion:not(.is-style-default) .wp-block-themeisle-blocks-accordion-item__title {
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--content-background);
}

.share-list a {
    width: 3.5rem;
    height: 3.5rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #efefef;
    border-radius: 100%;
    margin: 4px;
    transition: background-color 0.2s;
}

/* =========================================================================
   10 · FORMS / AUTH / COMMENTS / UPLOAD / MODALS  (44)
   ========================================================================= */

.login form {
    margin-top: 20px;
    margin-left: 0;
    padding: 26px 24px 34px;
    min-inline-size: auto;
    font-weight: 400;
    overflow: hidden;
    background: rgb(22 22 22);
    border: 1px solid rgba(20, 20, 20, 1);
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
    color: #fff;
}

.form-pwd {
    position: relative;
    place-self: center;
}

.form-pwd .btn-lostpassword {
    margin-inline-start: 40px;
    -webkit-margin-start: 40px;
}

.button.btn-toggle-pwd {
    background: #000 !important;
    padding: 0.5rem;
    margin: -2.5rem 0.1rem;
    border-radius: 10px !important;
}

.login:not(.clc-both-logo) h1 a {
    background-image: url(https://musiveo.com/core/uploads/2023/05/android-launchericon-512-512.png);
    background-size: 70px;
    width: 70px;
    height: 70px;
    margin-top: -38px;
}

.login .ml-form-container #backtoblog, .login .ml-form-container #nav {
    position: absolute;
    left: 0;
    right: 0;
    margin-right: auto !important;
    bottom: 13px;
    max-width: 100%;
    text-align: center;
}

.modal-header, .modal-body, .modal-footer {
    padding: 1rem;
}

div.wpforms-container-full .wpforms-form input[type=checkbox], div.wpforms-container-full .wpforms-form input[type=radio] {
    border: 1px solid #ccc;
    width: 14px;
    height: 14px;
    margin: 0 10px 0 3px;
    display: inline-block;
    vertical-align: baseline;
    background-color: currentcolor;
}

form label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    place-content: center;
}

#login-form {
    font-size: .9375rem;
    max-width: 46rem;
    padding: 1em 1em 4em 1em;
    margin: -3em auto;
    border-radius: 1rem;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    text-align: -webkit-center;
}

#login-form .input {
    width: 100%;
    background: #333333;
}

.input, button.btn-toggle-pwd, input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], select, textarea {
    padding: 0;
    height: 28px;
    border-radius: 5px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    max-width: 87vw;
	margin: 3px;
    padding: 0;
    height: 37px;
    border-radius: 5px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    max-width: 400px;
    margin: 3px;
    background: #111111 !important;
    padding-left: 5px;
    border: 1px solid;
    border-color: #3e3e3e;
    display: flex;
}

.post-navigation .post-title, .entry-title, .not-found .page-title, .error-404 .page-title, .comments-title, .user-title, .user-description, .comment-author, .comment-content, blockquote {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
    word-wrap: break-word;
    font-size: x-large;
}

.theme-color i, .nav li.btn-link a, .btn-primary a {
    color: #000 !important;
    border-radius: 1em;
    display: inline-flex;
    border: 2px solid transparent !important;
    background: #fff !important;
}



/* Defaults stay at zero specificity: components own their foreground/background pair. */
:where(.button, button, input[type=button], input[type=submit], input[type=reset]) {
	color: #7d7d7d;
	display: inline-flex;
	cursor: pointer;
	text-align: center;
	padding: 0.53125rem 1.25rem;
	border-radius: var(--button-radius);
	height: auto;
}

:where(.button, .input, button, input, select, textarea) {
	position: relative;
	align-items: center;
	font-weight: 500;
	border: 1px solid rgb(24 24 24 / 25%);
	background-color: inherit;
	border-radius: var(--input-radius, 0.25rem);
	font-size: .875rem;
	padding: 0.5rem 0.75rem;
	height: 2.5rem;
	line-height: 1.5;
	outline: 0;
	transition: border .3s ease-in-out;
}

.dark button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
    cursor: pointer;
    min-width: 37px;
    min-height: 37px;	
    border-radius: 1rem;
	place-content: center;
}

.text-primary, .text-primary:hover, .site-logo, .button-primary, .button-primary, input.button-primary, button.button-primary:hover, input.button-primary:hover, .btn-follow, .btn-like.active, .album-track.active .icon-play, .user-navigation a span, input[type="checkbox"]:checked, input[type="radio"]:checked {
    color: #d1d1d1;
}

button.button-xs, a.button-xs, .button-xs a {
    height: auto;
    font-size: 19px;
    vertical-align: text-bottom;
    margin-left: 2px;
    margin-right: 2px;
    background: #ebebeb !important;
    color: #000000 !important;
    font-variant: all-small-caps;
}

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	padding: 0.375rem 1rem;
	margin-top: 15px;
	border-radius: 3px;
	font-size: .875rem;
	color: #222!important;
	background-color: transparent!important;
	-webkit-user-select: none;
	user-select: none;
	outline: 0;
	cursor: pointer;
}

form#your-profile {
    display: flex;
}

.file-upload .progress, .modal .progress {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 9px;
    left: 0;
    top: 0;
    display: flex;
}

:where(button[type="submit"]) {
    min-width: 10rem;
    justify-content: center;
	background: conic-gradient(from 258deg, #7c06de, #6545b4, #a129ff, #7810d7) border-box;
    margin: 10px;
    padding: 12px 12px;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    box-shadow: 0 0 20px #0a0a0a;
    border-radius: 10px;
    display: block;
    color: #ffffff;
	height:auto;
    border: 1px solid #9202b5;
}

:where(button[type="submit"]:hover) {
    background-position: right center;
    color: #000000;
    text-decoration: none;
    background: #fff;
}

.btn-follow, .button-primary {
    border-color: currentColor;
    color: #000000 !important;
    background-color: #fff !important;
    font-size: medium;
}

.btn-follow, .button-primary:hover {
    border-color: currentColor;
    color: #000000 !important;
    background-color: #ffffff !important;
    font-size: medium;
}

.comment-respond .avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin: 0!important;
    max-width: fit-content;
}

.dragdrop-upload, .online-upload {
    padding: 5rem 2rem;
    flex-basis: 100%;
    text-align: center;
    font-variant-caps: titling-caps;
    font-size: 15px;
    border-radius: 1rem;
    border: none;
    box-shadow: 2px 2px 2px hsl(0deg 0% 0% / 0.38);
    margin: 1px;
}

.dark .upload-start {
    background-color: #0e0e0e;
}

.upload-start {
    border: 1px solid rgb(10 10 10 / 20%);
    border-radius: 9px;
}

.modal .close {
    background-color: transparent;
    color: inherit;
    border: none;
    display: inline-block;
    padding: 0 0.5rem;
    margin: -0.25rem -0.5rem;
    font-size: 1.5rem;
    font-weight: normal;
    opacity: 0.5;
    line-height: 0;
    align-self: flex-start;
}

.comments-area {
	margin-bottom: calc(var(--y-gap) * 2);
    padding: 0.75em;
    background: #050505;
    border-top: 1px solid #1c1c1c;
    border-radius: 1rem;
    width: 92vw;
}

.comment-respond textarea {
    height: 3.5rem;
    background: #000000 !important;
    border-radius: 0.5rem;
    border: 1px solid #505050;
    color: #fff;
}

.modal-content .comment-respond {
    padding: 0rem;
}

.comment-content p {
    color: inherit !important;
    font-size: medium;
}

.bypostauthor > .comment-body .comment-author b a {
    background-color: #1e1e1e;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 10px;
    display: inline-block;
}

.comment-metadata {
    display: flex;
    flex: 1;
    margin: 0 4px;
    flex-direction: row;
    align-items: center;
}

.modal-content {
    position: relative;
    width: 100%;
    pointer-events: auto;
    color: #222;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: var(--modal-radius, 0.5rem);
    outline: 0;
    overflow-y: auto;
    max-height: 95vh;
}

#upload-modal .modal-dialog {
    max-width: 960px;
    border-radius: 0.5rem;
}

.file-uploading, .file-uploaded {
    display: none;
    padding: 1rem;
    color: #03ff0d;
}

a.btn-delete-account {
    background: #a91c1c;
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    justify-content: flex-end;
    width: fit-content;
    align-items: baseline;
    justify-self: right;
}

.file-upload-wrap {
    display: flex;
    margin-bottom: 1em;
    align-items: center;
}

/* =========================================================================
   11 · LAYOUT & CONTAINERS (theme)  (22)
   ========================================================================= */

.container, .container-wrap .wp-block-cover__inner-container, .container-wrap .wp-block-group__inner-container, .navigation, .page-header, .page-content, .archive-header, .archive-content, .archive-footer, .site-main > .comments-area, .site-main > .entry > .entry-header-container, .site-main > .entry > .entry-header, .site-main > .entry > .entry-summary, .site-main > .entry > .entry-footer, .site-main > .entry > .post-thumbnail, .site-main > .entry > .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    width: calc(100% - var(--x-gap)* 1);
    max-width: var(--content-width);
	max-height: min-content;
    margin-left: auto;
    margin-right: auto;
    contain: layout !important;
	padding: 0 0.4rem;
}

.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
        flex-grow: 0;
        margin: 3px;
        width: 100vw;
        z-index: auto;
}

.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
}

.wp-block-group {
    box-sizing: border-box;
    border-radius: 1rem;
    margin: 0.33rem 0 0 0.33rem;
}

.archive-content{
    width: 100vw;
}

.wp-block-columns.tw-gutter-no>.wp-block-column {
    margin: 0 !important;
    width: 100vw;
}

.single-post .entry-content, .archive-content p {
    font-size: var(--font-article-size);
    padding: 1rem;
}

.site-content {
    margin-top: var(--content-margin-top);
    min-height: calc(100vh - var(--navbar-height) - var(--adminbar-height) - var(--open-player-height) - var(--mobile-menu-height));
    min-height: calc(100dvh - var(--navbar-height) - var(--adminbar-height) - var(--open-player-height) - var(--mobile-menu-height));
    max-width: max-content;
    min-width: -webkit-fill-available;
    min-width: -moz-available;
	}

.page-navigation .nav {
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 5px;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.single-post, .archive.category, .archive.tag {
    --content-width: 50rem;
    padding: 1rem;
}

.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    border-radius: 9px;
	border: 1px solid rgb(0 0 0 / 13%);
}

.form .flex-row p {
    flex: 1;
    padding: 5px;
}

.archive-content-column>.entry {
	width: 100%;
    padding: 25px;
    background: #121212;
    border-radius: 1rem;
    width: calc(23.33% - 5px);
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    }

.archive-content-column > h3 {
    border-bottom: 0.5px solid var(--color-border);
    padding-bottom: var(--y-gap);
    padding-left: 1rem;
}

.wp-block-column {
	flex-grow: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	margin: auto;
    padding: 0.3rem;
	border-radius: 9px;
	background-color: #ffffff;
	box-shadow: none;
	z-index:1;
}

.dark .wp-block-column {
	flex-grow: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	margin: auto;
    padding: 0.3rem;
	border-radius: 9px;
	background-color: var(--color-grey-700);
	box-shadow: none;
	z-index:1;	
}

.wp-block-column.is-vertically-aligned-bottom, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-top {
	width: 100%;
	padding: 0.3rem;
}

.wp-block-columns:where(.has-background) {
	padding: 0;
}

:where(.wp-block-columns.is-layout-flex) {
    gap: 0.1em;
}

.site-footer ul {
    list-style: none;
    margin: 0 0 1.5rem 0;
    padding: 0;
    line-height: 2;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin: 20px;
    align-content: space-between;
}

:where(.wp-block-group.has-background) {
    padding: 0.3em;
}

.flex-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 1rem;
        justify-content: space-evenly;
    flex-wrap: wrap;
}

/* =========================================================================
   12 · BASE / TYPOGRAPHY / ELEMENTS  (24)
   ========================================================================= */

body {
	--body-bg-color: #000;
	--color-grey-500: #101010;
	--color-grey-600: #080808;
	--color-grey-700: #000000e0;
	--color-grey-800: #191919;
	--color-grey-900: #000;
	--side-width: 15rem;
	--side-icon-height: 15px;
	--side-nav-hover-background: #111;
	--content-width: 100%;
	--x-gap: 0;
	--border-radius: 0.5rem;
	--button-radius: 0.5rem;
	--header-title-size: 1.75rem;
	--header-image-size: 15rem;
	--header-x-gap: 2rem;
	--header-y-gap: 1.5rem;
	--dropdown-menu-radius: var(--border-radius);
	--side-folded-width: 4.35rem;
    position: absolute;
    width: 100%;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  min-height: calc(100% + env(safe-area-inset-top));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #000;	
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}

a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    vertical-align: middle;
}

p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: var(--font-weight-heading);
    line-height: 1.1;
    padding-left: inherit;
}

h3, .h3 {
    font-size: 1rem;
}

p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    font-size: initial;
}

a:hover {
    color: #fff;
    text-decoration: none;
    background-color: transparent;
}

svg {
    overflow: hidden;
    vertical-align: middle;
    stroke-linejoin: round;
}

figure {
    margin: 0 0 2rem 0;
    max-width: 360px;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
    border-radius: inherit;
    border-radius: 9px;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark .dark-white .wp-block-cover__inner-container, .dark .dropdown-menu .dropdown-item {
    color: inherit;
    font-weight: 400;
    margin: 7px;
}

.dark h1, .dark h2, .dark h4 {
    color: inherit;
    font-weight: 400;
	padding-left: 9px;
}

.dark, .dark body {
    --text-color: #ffffff;
    --text-secondary-color: #dbdbdb;
    --body-bg-color: #000;
    --tooltip-color: var(--color-grey-900);
    --sub-menu-color: var(--color-grey-800);
	height: auto;
}

h2, .h2 {
    font-size: 1.2rem;
    padding: 1rem;
}

mark, ins {
	background-color: #fff9c0;
	color: #7415bf;
	text-decoration: none;
}

.verified {
    --icon-width: 0.85em;
    --icon-height: 0.85em;
    width: 0.85em;
    height: 0.85em;
    flex-shrink: 0;
    background: transparent;
    color: var(--musiveo-accent, #fff);
    position: relative;
    margin-inline-start: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.private {
    background-color: #ff00a5;
    color: rgba(255, 255, 255, 1);
    display: inline-block;
    border-radius: 0.2em;
    padding: 0 0.2em;
    font-style: normal;
    font-size: .75em;
    vertical-align: 0.125em;
    font-weight: 500;
}

.avatar {
    display: block;
    position: relative;
    border-radius: 50%;
    flex-shrink: 0;
    border-radius: 100% !important;
    max-width: -webkit-fill-available;
    padding: 1px;
    margin: 0;
    background-color: #000000 !important;
    color: #fff;
    border: 1px solid #1b1b1b;
}

a[href*='http']:not([href*='musiveo.com']):not([href*='youtube.com']):not([href*='spotify.com']):not([href*='soundcloud.com']):after {
    content: url(https://musiveo.com/wp-content/uploads/2025/03/external-link-12px-6dc7b4.svg);
    filter: invert(1);
}

a[target='_blank'] {
    align-items: center;
    display: -webkit-inline-box; /* COMPAT: old-Safari fallback must come FIRST */
    display: flex;
	vertical-align: baseline;
}

.dark #search-state:checked ~ .site-header .search-form, .dark .entry-footer .user-bio, .dark .modal-content, .dark .dropdown-menu, .dark .wp-block-code, .dark .wp-block-table.is-style-stripes tbody tr:nth-child(odd), .dark .nav-links .prev:before, .dark .nav-links .next:before, .dark .nav-links .nav-previous:before, .dark .nav-links .nav-next:before, .dark .button:not(.button-primary) {
    color: #fff;
}

.is--repeat svg, .is--shuffle svg {
    fill: var(--musiveo-accent, #1dacd7);
}

.is--repeat-once svg.icon-repeat-once {
    display: block;
    fill: var(--musiveo-accent, #5cff61) !important;
}

svg.svg-inline--fa:not(:host), svg.svg-inline--fa:not(:root) {
    overflow: visible;
    box-sizing: initial;
    padding-right: 4px;
}

/* =========================================================================
   ANIM · ANIMATIONS  (1)
   ========================================================================= */

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

/* =========================================================================
   RWD · RESPONSIVE & ENVIRONMENT OVERRIDES - keep LAST  (38)
   ========================================================================= */

@media (max-width: 768px) {
    .plyr-theme-3 {
    --plyr-mini-player-height: 6rem;    }
}

@media (min-width: 1580px) {
    .wp-block-loop:not(.has-loop-posts) .block-loop-items {
        --loop-columns: inherit;
    }
}

@media (max-width: 782px) {
.site-content {
	width: 100vw;
	}
}

@media (max-width: 781px) {
    #menu-state:checked~.site-sidebar {
        top: 0;
        z-index: 999999 !important;
        transform: none !important;
        width: 200px;
    }
}

@media (min-width: 782px) {
    .site-sidebar .site-brand {
        display: none;
    }
}

@media (max-width: 781px) {
    .site-brand {
        display: none;
    }
}

@media (max-width: 576px) {
    .entry-content>.wp-block-loop-slider {
        width: 94% !important;
        --loop-max-width: 85%;
    }
}

@media (max-width: 576px) {
    .entry-content > .wp-block-loop-slider:not(.block-loop-center) .block-loop-items {
        padding: 0 var(--x-gap, var(--wp--style--root--padding-left, 1rem));
        margin: 0 calc(var(--x-gap, var(--wp--style--root--padding-left, 1rem)) * -1);
        scroll-snap-type: none;
        --loop-max-width: 100%;
    }
}

@media (min-width: 320px) {
    .wp-block-loop {
        --loop-columns: max(min(var(--loop-cols), 5) - 3, 1);
    }
}

@media (min-width: 480px) {
    .wp-block-loop {
        --loop-columns: max(min(var(--loop-cols), 5) - 3, 2);
    }
}

@media (min-width: 920px) {
    .wp-block-loop {
        --loop-columns: max(min(var(--loop-cols), 5) - 3, 3);
    }
}

@media (min-width: 1220px) {
    .wp-block-loop {
        --loop-columns: max(min(var(--loop-cols), 5) - 3, 4);
    }
}

@media (max-width: 599px) {
    .with-mobile-menu {
        --mobile-menu-height: 4rem;
    }
}

@media (max-width: 767px) {
    :root {
        --plyr-cover-size: 2rem;
        --plyr-control-spacing: 0.75rem;
        --plyr-control-padding: 0.5rem;
    }
}

@media (max-width: 781px){
.icon-plus {
    display: none !important;
	}
}

@media (max-width: 781px){
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 100%!important;
	z-index: 10;
	}
}

@media (min-width: 600px) {
    .archive-content-column {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 782px) {
    .archive-content-column>.entry {
	width: 100%;
    padding: 25px;
    min-width: 25vw;
   }
}

@media (max-width: 600px) {
	.plyr-playlist:not(.plyr-full-player) .btn-like {
		display: block;
	}
}

@media (max-width: 600px) {
    .plyr-playlist:not(.plyr-full-player) .btn-like, .plyr-playlist:not(.plyr-full-player) .add_to_cart_inline, .plyr-playlist:not(.plyr-full-player) [data-plyr=next], .plyr-playlist:not(.plyr-full-player) [data-plyr=prev], .plyr-playlist:not(.plyr-full-player) [data-plyr=repeat], .plyr-playlist:not(.plyr-full-player) [data-plyr=shuffle] {
        display: none; /* COMPAT: was invalid `display: flex-start` (ignored everywhere, so controls showed); intent is to hide these mini-player controls */
    }
}

@media (min-width: 992px) {
    .dark .site-header .search-form {
        margin-left: 27vw !important;
        margin-right: 6vw;
    }
}

@media (min-width: 600px) {
    .dark .site-header .search-form {
		height: auto;
        margin-left: 0;
    }
}

@media (max-width: 599px){ .dark .site-header .search-form {
        height: auto;
	}
}

@media (max-width: 599px) {
    .site-header .search-form {
        flex: inherit;
        margin: 0 .5rem;
        background-color: #000000a1 !important;
        padding: 0;
        margin: 0;
        margin-left: auto !important;
        max-width: 100% !important;
        border: none;
    }
}

@media (max-width: 576px) {
    .block-loop-row .block-loop-items {
        --loop-columns: 1 !important;
    }
}

@media (max-width: 576px) {
    .block-loop-row:not(.has-loop-posts):not(.block-loop-xs):not(.block-loop-inline) .block-loop-item:not(.block-loop-inline) .entry-footer {
        flex: auto;
        width: auto;
        display: flex;
    }
}

@media (max-width: 576px) {
	.wp-block-loop {
		--loop-radius: 6px;
		padding: 0;
	}
}

@media (max-width: 599px) {
.plyr-playlist .plyr:not(.plyr-fullscreen) .plyr__video-wrapper {
	max-height: 15rem;
    width: 8rem;
	border-radius: 1rem;
    bottom: calc(100% + 1rem);
    }
}

@media (max-width: 782px){
	[data-plugin="slider"], .block-loop-slider {
    display: grid;
    overflow-x: auto;
    border-radius: var(--loop-radius);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: none;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    grid-auto-flow: column;
    --loop--cols: calc((var(--loop-max-width) - (var(--loop-columns) - -7.5) * var(--loop-grid-gap)) / var(--loop-columns)) !important;
    grid-auto-columns: var(--loop--cols);
    grid-template-rows: repeat(var(--loop-rows, 1), minmax(0, auto));
    align-items: start;
    min-height: 0;
    box-sizing: border-box;
    font-size: 0; /* SAFARI: collapses stray whitespace text nodes that render as gaps/glyphs */
	}
}

@media (min-width: 782px){
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
    flex-grow: 0;
    margin: 3px;
    width: 100vw;
    }
}

@media (min-width: 992px){
.scrolled .header-station {
    position: sticky;
    z-index: 99999;
    top: calc(var(--adminbar-height) + var(--navbar-height));
    padding: 1rem var(--x-gap);
    grid-gap: 1rem;
    --header-image-size: 3.5rem;
    --header-title-size: 1rem;
    margin-bottom: 3rem;
    box-shadow: var(--box-shadow);
    width: 100%;
	align-items: center;
    min-height: 100px;
    max-height: 100px;
    align-content: center;
        backdrop-filter: blur(10px) saturate(180%);
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        background-color: rgb(0 0 0 / 88%);
    }
}

@media (max-width: 599px) {
    .entry-header-inner {
        width: auto;
        min-inline-size: auto;
        min-width: 64%;
    }
}

@media (min-width: 782px) {
    #menu-state:checked ~ .site-sidebar .nav > li > a {
        text-align: center;
        justify-content: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        max-height: 40px;
        background: #111;
        width: 40px;
        align-self: center; /* COMPAT: was invalid `anchor-center` */
    }
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 750px;
        margin: 1.75rem auto;
    }
}

@media (max-width: 599px) {
    .header-user .entry-title {
        justify-content: center;
        justify-self: center;
    }
}

@supports (-webkit-touch-callout: none) {
    /* SAFARI (iOS only): `height:-webkit-fill-available` here previously forced EVERY
       image/avatar to viewport height = the giant slider cards on iPhone/iPad. */
    img,
    .post-thumbnail img,
    .avatar {
        height: auto;
        object-fit: cover;
        display: block;
    }
    .post-thumbnail img,
    .block-loop-item .post-thumbnail img {
        width: 100%;
    }
}

@media (min-width: 480px) {
    .plyr--video .plyr__controls {
        padding: 10px;
        padding: var(--plyr-control-spacing, 10px);
        padding-top: 35px;
        padding-top: calc(var(--plyr-control-spacing, 10px) * 0.5);
    }
}

/* Make the entire profile row the toggle button on mobile */
@media (max-width: 781px) {
    .site-header .menu-item-has-children:before {
        width: 100% !important;
    }
}

/* NEW */
.video-duration {
    display: none;
}
embed, iframe, object {
    max-width: 100%;
    border: none;
}
.video-js .vjs-tech, .video-js.vjs-fill:not(.vjs-audio-only-mode) {
    height: 89%;
    width: 100%;
    max-width: 100%;	
}
iframe[data-opt-src]:not([data-opt-lazy-loaded]) {
	background-color: #000 !important;
	background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22-webkit-transform-origin%3A50%25%2050%25%3B-webkit-animation%3Aspin%201.5s%20linear%20infinite%3B-webkit-backface-visibility%3Ahidden%3Banimation%3Aspin%201.5s%20linear%20infinite%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cdefs%3E%3Cstyle%3E%3C%21%5BCDATA%5B%40-webkit-keyframes%20spin%7Bfrom%7B-webkit-transform%3Arotate%280deg%29%7Dto%7B-webkit-transform%3Arotate%28-359deg%29%7D%7D%40keyframes%20spin%7Bfrom%7Btransform%3Arotate%280deg%29%7Dto%7Btransform%3Arotate%28-359deg%29%7D%7D%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22outer%22%3E%3Cpath%20d%3D%22M20%200a3.994%203.994%200%20110%207.988A3.994%203.994%200%200120%200z%22%2F%3E%3Cpath%20d%3D%22M5.858%205.858a3.994%203.994%200%20115.648%205.648%203.994%203.994%200%2001-5.648-5.648z%22%20fill%3D%22%23d2d2d2%22%2F%3E%3Cpath%20d%3D%22M20%2032.012A3.994%203.994%200%201120%2040a3.994%203.994%200%20010-7.988z%22%20fill%3D%22%23828282%22%2F%3E%3Cpath%20d%3D%22M28.494%2028.494a3.994%203.994%200%20115.648%205.648%203.994%203.994%200%2001-5.648-5.648z%22%20fill%3D%22%23656565%22%2F%3E%3Cpath%20d%3D%22M3.994%2016.006a3.994%203.994%200%20110%207.988%203.994%203.994%200%20010-7.988z%22%20fill%3D%22%23bbb%22%2F%3E%3Cpath%20d%3D%22M5.858%2028.494a3.994%203.994%200%20115.648%205.648%203.994%203.994%200%2001-5.648-5.648z%22%20fill%3D%22%23a4a4a4%22%2F%3E%3Cpath%20d%3D%22M36.006%2016.006a3.994%203.994%200%20110%207.988%203.994%203.994%200%20010-7.988z%22%20fill%3D%22%234a4a4a%22%2F%3E%3Cpath%20d%3D%22M28.494%205.858a3.994%203.994%200%20115.648%205.648%203.994%203.994%200%2001-5.648-5.648z%22%20fill%3D%22%23323232%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
pre, code, kbd, samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    padding: 2px;
}
.subscriber-highlight {
    vertical-align: super;
    background-color: #8484844a;
    border-radius: 5px;
    color: #fff;
    font-size: 10px;
    padding: 0px 8px;
    text-decoration: none;
    white-space: nowrap;
    padding: 3px;
}
.notice-wrap {
    position: fixed;
    top: 75px;
    right: 50px;
    z-index: 10009;
    opacity: 1;
}
.notice-item {
	background: #000;
	color: #8523bf;
}
.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    color: #fff;
    list-style: none;
    background-color: #7415bf;
    border: 1px solid #7415bf;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    border-radius: 10px;
}
input#rememberme {
    color: #3b3b3b;
}
p.ticss-c08010d7.o-typing-delay-1s.o-typing-faster.has-white-color.has-text-color.has-background.has-link-color.has-small-font-size.wp-elements-abfd946333ec6ec1ea727149825c4325 {
    border-radius: 1rem;
}
.wp-block-group.has-background.has-small-font-size.tw-stretched-link.is-content-justification-center.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-94bc23d7.wp-block-group-is-layout-flex {
    background: #080808 !important;
    padding: 8px;
	color: #d4d4d4;
}
.swiper-pagination-bullet {
    background: #c3c3c3;
}
.buttons-home {
    mix-blend-mode: luminosity;
	align-items: center;
	filter: contrast(0.75);
  	border: 1px inset #00000021;
    border-radius: 1rem;
    width: fit-content;
    padding: 0.5rem;
    display: inline-flex;
    margin: 0 !important;
    background-color: #00000052;
}
@media (min-width: 120px) {
}
/* musiveo-refinements */
 

/*
 * Kill the blanket rule. Same specificity as the frozen one (two attribute selectors and
 * the same :not() list), and later in the cascade, so `content: none` wins.
 */
a[href*='http']:not([href*='musiveo.com']):not([href*='youtube.com']):not([href*='spotify.com']):not([href*='soundcloud.com']):after {
	content: none !important;
}

/*
 * Put the icon back, and ONLY on a station or track title whose href is a platform
 * link -- which is exactly what the frozen rule was reaching for.
 *
 * `.entry-title` is the theme's own title class, printed by the loop templates. The
 * `station-stream-icons` plugin puts an <svg> inside the title anchor for tracks whose
 * parent is a station, album or playlist, so `a:has(> svg)` identifies those titles and
 * no others. A title link with no icon child is an ordinary internal link and correctly
 * gets nothing.
 *
 * The three hosts are written out rather than filtered out, because the decision is now
 * "is this a platform link", not "is this anything else".
 */
.entry-title a[href*='youtube.com']:not(.musiveo-station-source):after,
.entry-title a[href*='spotify.com']:not(.musiveo-station-source):after,
.entry-title a[href*='soundcloud.com']:not(.musiveo-station-source):after {
	content: url(https://musiveo.com/wp-content/uploads/2025/03/external-link-12px-6dc7b4.svg) !important;
	filter: invert(1);
}

/*
 * The icon is a decorative affordance, so it must never be announced as part of the
 * link's name. The SVG carries no text, but the generated content is read by some screen
 * readers, so it is explicitly silenced on the links that do get it.
 */
.entry-title a[href*='youtube.com']:not(.musiveo-station-source):after,
.entry-title a[href*='spotify.com']:not(.musiveo-station-source):after,
.entry-title a[href*='soundcloud.com']:not(.musiveo-station-source):after {
	/* The icon is decorative; the link's own text is the accessible name. */
	speak: never;
}

 

/*
 * The starting value, and the correction once JS measures it.
 *
 * DECLARED ON :root, NOT ON #header. THIS MATTERS MORE THAN IT LOOKS.
 *
 * A custom property is inherited DOWN the tree only. The four consumers are all SIBLINGS
 * of the header:
 *
 *     .site-sidebar { top: calc(... + var(--navbar-height)) }    custom.css:1692
 *     .navigation   { top: calc(... + var(--navbar-height)) }    custom.css:1434
 *     .site-content { min-height: calc(100vh - var(--navbar-height) - ...) }
 *
 * They are siblings because header.php emits #menu-state, header#header, aside.site-sidebar,
 * .backdrop and div#content all as direct children of <body> -- which is precisely what
 * the frozen stylesheet's sibling combinators require, and what makes the layout work at
 * all. Declaring or publishing the value on #header therefore reached nothing: the sidebar
 * kept reading the 4rem fallback from :root and the overlap stayed.
 *
 * :root is documentElement, which is the ancestor of all of them. site.js writes the
 * measured value there, so one number serves every consumer and there is no second place
 * to keep in sync.
 */
:root {
	/*
	 * 75px, the height the header really has at every width (logo with its breathing space above and below). It was 4rem (64px): the
	 * first paint put the page content 64px down and site.js moved it to 75px a moment later, an 11px jump that PageSpeed counts as
	 * layout shift (0.04-0.06). Starting at the real value means the measurement finds nothing to correct. site.js still measures.
	 */
	--navbar-height: 75px;
}

/*
 * The header is the element being measured. It needs NO variable of its own -- declaring
 * one there was the bug. `inherit` is not written either: on a custom property it means
 * "take the parent's computed value", which would be the same 4rem :root already gives it,
 * so it would be a declaration that does nothing and reads as though it does something.
 *
 * box-sizing stays, because it makes the measured box the same box the sidebar is offset
 * by. Without it the value includes padding and the overlap reappears on wrapped rows.
 */
#header {
	box-sizing: border-box;
}

/*
 * The sidebar and anything else that must clear the header reads the same variable the
 * frozen sheet already uses, so nothing else has to change. This restates it only to make
 * the dependency explicit and to win on source order where a sheet loaded later sets it.
 */
.site-sidebar,
.navigation,
.site-content {
	/* No declaration needed: they already read --navbar-height. This is documentation. */
}

/*
 * A 20px GAP UNDER THE HEADER, NOT A 20px MARGIN.
 *
 * The request was `.site-content { margin-top: 20px }`. That number cannot be used
 * literally: `.site-header` is `position: fixed` and 76px tall, and the content's
 * `margin-top` is what clears it -- `--content-margin-top` is `var(--navbar-height)`.
 * Setting it to 20px would start the content 56px BEHIND the header, so every page
 * would open with its first heading hidden underneath it.
 *
 * What was asked for is the space you can SEE, and that is set here instead: the
 * margin still clears the header, and the padding is cut to exactly 20px. Measured
 * before and after, the gap under the header is 20px and nothing is hidden.
 */
.site-content {
	padding-top: 20px !important;
}

/*
 * A page with no footer should not keep the strip the footer's own padding
 * would have occupied. `hide-footer` is added by the page meta -- the Hide
 * Footer checkbox, or the older Footer -> None choice -- so only those pages
 * lose the bottom padding; a page with a real footer keeps its spacing.
 */
.hide-footer .site-content {
	padding-bottom: 0;
}

/*
 * On mobile the sidebar is the off-canvas drawer. It must still start below the header,
 * and the frozen sheet already gives it the same top -- so nothing to override. What it
 * does NOT have is a height that accounts for the header, and `bottom: 0` means the
 * sidebar runs to the bottom of the viewport, under the header's space. Giving it an
 * explicit height keeps its scrolling area inside the visible region.
 */
@media (max-width: 782px) {
	.site-sidebar {
		/* Never let the drawer's scroll area extend behind the header. */
		max-height: calc(100vh - var(--adminbar-height) - var(--navbar-height));
		max-height: calc(100dvh - var(--adminbar-height) - var(--navbar-height));
		max-height: calc(100dvh - var(--adminbar-height) - var(--navbar-height));
	}
}

 

.swpm-button-wrapper input[type="image"] {
	width: auto !important;
	height: auto !important;
	padding-left: 30%;
}

.vle-feed .vle-item .entry-header .entry-meta > * {
	flex-shrink: 0 !important;
	max-width: 185px;
	flex-basis: min-content;
}

.ays_image_window .ays_image_main:not(.ays-pb-show-scrollbar),
.ays_minimal_window .ays_minimal_main:not(.ays-pb-show-scrollbar),
div[class*="ays-pb-modal_"].ays-pb-modal:not(.ays-pb-show-scrollbar),
div[class*="ays-pb-modal_"].ays_cmd_window:not(.ays-pb-show-scrollbar),
div[class*="ays-pb-modal_"].ays_lil_window:not(.ays-pb-show-scrollbar),
div[class*="ays-pb-modal_"].ays_ubuntu_window:not(.ays-pb-show-scrollbar),
div[class*="ays-pb-modal_"].ays_window:not(.ays-pb-show-scrollbar),
div[class*="ays-pb-modal_"].ays_winxp_window:not(.ays-pb-show-scrollbar) {
	scrollbar-width: auto;
}

.mte-trigger__label {
	display: none;
}

/* ---------------------------------------------------------------------------
   The notification bell's panel
   ---------------------------------------------------------------------------
   THE PANEL NEEDS A WAY TO OPEN THAT DOES NOT DEPEND ON JAVASCRIPT.

   The one rule in the custom CSS that opens this panel is

       .dropdown-menu.show { display: block; }

   and there is no :hover or :focus-within rule for it in any stylesheet on this
   site. So a mouse visitor could only ever open the bell with a click handler --
   which means: nothing at all without JavaScript, and nothing at all if the script
   fails to load. And on a header, hover is what people expect.

   Two rules fix that, and both are pure CSS, so they work with the script absent:

       #dropdown-notification:hover .dropdown-menu  -- a mouse can open it
       #dropdown-notification:focus-within ...      -- a keyboard can open it

   The panel is nested INSIDE #dropdown-notification now, so a descendant selector
   reaches it. While it was a sibling of the <li> these could not have worked at
   any specificity -- which is why they are here rather than in custom.css: they
   depend on markup this theme owns.

   .show is still respected, because that is what the script toggles on a touch
   screen where there is no hover and no focus. Specificity is one class against
   two here, so a rule in custom.css with !important would still win; there is
   none. */
/* The list item is the hover target, so it must not be a layout the browser
   collapses. It already is, via the nav rules; this only guarantees it. */
#dropdown-notification {
	position: relative;
}
/* ---------------------------------------------------------------------------
   The notification panel, its rows, and the drawer.
   ---------------------------------------------------------------------------
   ALL OF THIS IS IN THIS FILE BECAUSE THE MARKUP IS OURS AND THE GLASS IS FROZEN.

   The frozen custom.css has exactly one rule that opens the bell panel:
   `.dropdown-menu.show { display: block; }`. There is no :hover rule, no
   :focus-within rule and no styling rule for anything inside it, so every visual
   decision about the panel, its rows and the footer bar belongs here. That is the
   whole reason this block exists.

   THE PANEL IS A FLEX COLUMN OF THREE ROWS: the list, then a footer that does not
   scroll. The list is the only part that scrolls, so the "view all" control cannot
   scroll away -- which is the reason it is a sibling of the list and not a child. */

#dropdown-notification .dropdown-menu.dropdown-menu-notificaitons {
	display: none;
	width: 340px;
	max-width: calc(100vw - 2rem);

	/*
	 * ANCHORED TO ITS RIGHT EDGE, OR IT LEAVES THE SCREEN.
	 *
	 * This rule had `width: 340px` and NEITHER `left` NOR `right`. The bell is the last
	 * item in the header nav, inset by the header's padding, so that combination is a
	 * guaranteed overflow on every page:
	 *
	 * The panel is position:absolute (it is a .dropdown-menu inside a position:relative
	 * <li>). Per CSS 2.1 section 10.3.7, when all three of left, width and right are auto
	 * for an absolutely positioned box, `left` takes the static position and `right` is
	 * solved from left + width. So the box is laid out at the bell's LEFT edge and then
	 * simply extends 340px to the right from there -- past the window edge by nearly the
	 * full panel width. Measured by reading the declaration out of this file rather than
	 * by eyeballing the screenshot.
	 *
	 * `right: 0` puts the panel's RIGHT edge on the bell's right edge, so it grows
	 * leftwards into the empty page and cannot exceed the viewport at any width. No media
	 * query, no JavaScript measurement, nothing to keep in sync.
	 *
	 * `left: auto` is required, not cosmetic. With left, right and width all set to
	 * non-auto values the box is over-constrained and, in LTR, LEFT wins -- so a stale
	 * left:0 inherited from a lower-priority rule would silently defeat the right:0 and
	 * put the bug straight back.
	 */
	left: auto;
	right: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: #0d0d0f;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
	color: #f2f2f4;
	overflow: hidden;
	flex-direction: column;
	max-height: min(520px, 70vh);
}

/*
 * The dropdown is shown ONLY via the .show class managed by JavaScript.
 * We do NOT use :hover or :focus-within because they keep the dropdown open
 * when the mouse merely passes over the bell, and they fight with the
 * JavaScript's .show class toggle. The JavaScript handles:
 * - Click on bell to toggle
 * - Click outside to close
 * - Escape key to close
 * - Focus management for accessibility
 */
#dropdown-notification .dropdown-menu.dropdown-menu-notificaitons.show {
	display: flex;
}

/* The scrolling list. */
#dropdown-notification .dropdown-notification-list {
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
	padding: 6px;
}

#dropdown-notification .dropdown-notification-list::-webkit-scrollbar {
	width: 6px;
}

#dropdown-notification .dropdown-notification-list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 3px;
}

#dropdown-notification .block-loop-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ONE ROW: avatar on the left, the text column on the right. */
#dropdown-notification .play-notification-item {
	margin: 0 0 2px;
	border-radius: 10px;
}

#dropdown-notification .play-notification-item:last-child {
	margin-bottom: 0;
}

#dropdown-notification .play-notification-item > .notification-row,
#dropdown-notification .play-notification-item > span.notification-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	border-radius: 10px;
	color: #e8e8ec;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

#dropdown-notification .play-notification-item > a.notification-row:hover,
#dropdown-notification .play-notification-item > a.notification-row:focus-visible {
	background: #1b1b20;
	color: #fff;
}

#dropdown-notification .notification-avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: block;
	overflow: hidden;
	border-radius: 50%;
	background: #22222a;
}

#dropdown-notification .notification-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

#dropdown-notification .notification-avatar-empty {
	border: 1px dashed rgba(255, 255, 255, 0.2);
}

#dropdown-notification .notification-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

/* WHO -- bold, first, and the only line that is not allowed to shrink to nothing. */
#dropdown-notification .notification-name {
	font-weight: 700;
	font-size: 13px;
	line-height: 1.3;
	color: #fff;
}

/* WHAT THEY DID -- muted, under the name. */
#dropdown-notification .notification-action {
	font-size: 12px;
	line-height: 1.3;
	color: #9a9aa6;
}

/* THE ITEM -- two lines at most. A panel 340px wide cannot carry a six-line title. */
#dropdown-notification .notification-title {
	font-size: 13px;
	color: #dcdce2;
	margin: 0;
}

/* WHEN -- relative, and the dimmest line in the row. */
#dropdown-notification .notification-time {
	font-size: 11px;
	line-height: 1.3;
	color: #6f6f7c;
}

#dropdown-notification .notification-empty {
	margin: 0;
	padding: 22px 12px;
	text-align: center;
	color: #9a9aa6;
	font-size: 13px;
}

/* THE FOOTER BAR. A sibling of the scrolling list, so it cannot scroll away. */
#dropdown-notification .view-all-notifications {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: #0a0a0c;
}

#dropdown-notification .view-all-notifications-link {
	display: block;
	padding: 13px 16px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #e8e8ec;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#dropdown-notification .view-all-notifications-link:hover,
#dropdown-notification .view-all-notifications-link:focus-visible {
	background: #17171c;
	color: #fff;
}

/* ---------------------------------------------------------------------------
   THE DRAWER
   ---------------------------------------------------------------------------
   `hidden` is what closes it, so it is also what must be removed to open it. The
   display rule below does not fight that: [hidden] wins by specificity, and the
   script removes the attribute rather than adding a class, so a drawer with no
   script at all is simply never open. */

.musiveo-notifications-slidein[hidden] {
	display: none;
}

.musiveo-notifications-slidein {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: flex-end;
	font-size: 14px;
}

.musiveo-notifications-backdrop {
	background: rgba(0, 0, 0, 0.6);
	animation: musiveo-notifications-fade 0.18s ease;
}

.musiveo-notifications-panel {
	height: 100%;
	background: #0d0d0f;
	animation: musiveo-notifications-slide 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes musiveo-notifications-slide {
	from { transform: translateX(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes musiveo-notifications-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.musiveo-notifications-panel,
	.musiveo-notifications-backdrop {
		animation: none;
	}
}

.musiveo-notifications-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.musiveo-notifications-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.musiveo-notifications-close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	color: #e8e8ec;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.musiveo-notifications-close:hover,
.musiveo-notifications-close:focus-visible {
	background: #1b1b20;
}

.musiveo-notifications-body {
	padding: 8px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.musiveo-notifications-foot {
	flex: 0 0 auto;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: #0a0a0c;
}

.musiveo-notifications-foot .view-all-notifications-link {
	display: block;
	padding: 15px 16px;
	text-align: center;
	font-weight: 600;
	color: #e8e8ec;
	text-decoration: none;
}

.musiveo-notifications-foot .view-all-notifications-link:hover,
.musiveo-notifications-foot .view-all-notifications-link:focus-visible {
	background: #17171c;
	color: #fff;
}

/* The drawer reuses the dropdown's row styling, so both surfaces look the same.
   The list is MOVED into the drawer by the script, which is why the rules below are
   written for the drawer rather than for a second copy of the rows. */
.musiveo-notifications-slidein .play-notification-item > .notification-row,
.musiveo-notifications-slidein .play-notification-item > span.notification-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px 10px;
	border-radius: 10px;
	color: #e8e8ec;
	text-decoration: none;
}

.musiveo-notifications-slidein .play-notification-item > a.notification-row:hover,
.musiveo-notifications-slidein .play-notification-item > a.notification-row:focus-visible {
	background: #1b1b20;
}

.musiveo-notifications-slidein .notification-avatar,
.musiveo-notifications-slidein .notification-avatar img {
	width: 40px;
	height: 40px;
}

.musiveo-notifications-slidein .notification-name { font-weight: 700; font-size: 13px; color: #fff; }
.musiveo-notifications-slidein .notification-action { font-size: 12px; color: #9a9aa6; }
.musiveo-notifications-slidein .notification-title { font-size: 13px; color: #dcdce2; margin: 0; }
.musiveo-notifications-slidein .notification-time { font-size: 11px; color: #6f6f7c; }
 

 
.header-container {
	overflow: visible;
	flex-wrap: nowrap;
	height: 75px;
}
 

:root {
	--z-base: 1;
	--z-raised: 10;
	--z-sticky: 100;
	--z-header: 200;
	--z-dropdown: 300;
	--z-overlay: 390;
	--z-mobile-menu: 400;
	--z-sidebar-backdrop: 440;
	--z-sidebar: 450;
	--z-modal: 500;
	--z-toast: 600;
}

 

body,
.mobile-menu,
.wp-block-columns.tw-gutter-no > .wp-block-column,
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] {
	width: 100%;
}

/*
   `.site-content` and `.archive-content` NEED `auto`, NOT `100%`. They are not standalone.

   Measured 2026-10-02 at a 985px viewport, the front page:

       body          position absolute, width 985px
       #content      margin-left 208px,  width 985px   ->  spans 208..1193
       viewport                                     985

   The sidebar is `position: fixed` at 208px, so it does NOT push anything. What pushes
   the content is a `margin-left: 208px` on `.site-content` itself -- and then a width that
   is still the FULL viewport. Block layout would have got this right on its own: a
   block-level box with `width: auto` is sized as containing-block-minus-margins, so the
   margin alone leaves exactly 777px. Pinning a width takes that away and the content runs
   off the right-hand edge by precisely the sidebar width.

   **This is the "content goes offscreen on the right" report.** It is not a margin problem
   and not a scrollbar problem; the element is simply wider than the space it was given.
   And it only appears when the sidebar is IN VIEW -- below the breakpoint the sidebar is
   off-canvas and the margin is 0, which is why it looks fine at a narrow width.

   The first version of this override set `width: 100%`, which is 985px too, and so did
   nothing. Measuring the computed box rather than the stylesheet is the only reason that
   was caught -- the rule was present, specific and loading last, and still wrong.
 */
.site-content,
.archive-content {
	width: auto;

	 
	max-width: none;
}

/*
   `max-width` versions of the same mistake. `max-width: 100vw` lets a box grow to the
   scrollbar width too, and `!important` on the header pair means it wins against anything
   later unless this also carries it.
 */
.site-header,
.site-header .search-form,
.site-sidebar,
.plyr-playlist {
	max-width: 100%;
}

 
.plyr-playlist {
	max-height: var( --plyr-bar-max-height, 40vh );
}

.plyr-playlist .plyr__video-wrapper {
	max-height: var( --plyr-video-max-height, 26vh );
}

 
.plyr-playlist {
	height: var( --plyr-height );
}

.plyr-playlist .plyr__video-wrapper {
	width: calc( var( --plyr-aspect-ratio ) * var( --plyr-mini-player-height ) );
	height: var( --plyr-mini-player-height );
}

/*
 * The seek bar is the control a visitor reaches for, and MEASURED on an idle load
 * `.plyr-control-prog` was `height: 0px` -- a real element with no box, which is part of why the
 * strip can read as empty before anything has loaded. A FLOOR, not a height: the library owns this
 * height once media is attached, and this only stops the pre-load state from having none at all.
 */
.plyr-playlist .plyr__progress__container,
.plyr-playlist .plyr-control-prog {
	min-height: 16px;
}

.plyr-playlist .plyr__video-wrapper video,
.plyr-playlist .plyr__video-wrapper iframe {
	max-height: 100%;
	object-fit: contain;
}

.header-station,
.header-user {
	max-width: 100% !important;
}

/*
   A `100vw` inside `min()` is the same unit and needs the same treatment. Left alone it
   makes a fixed drawer one scrollbar wider than the screen it is supposed to sit in, so
   its right edge hangs off the right-hand side.
 */
.slider-panel,
.mobile-menu {
	width: 100%;
}

/*
   BELOW 480px there is no room for a scrollbar-hider, and none is needed once the units
   above are correct. What is still worth capping is the loop grid, whose minimum column
   width is a fixed px and which therefore cannot shrink below it on a narrow phone.
   `minmax(0, 1fr)` is the load-bearing part: the default `1fr` is `minmax(auto, 1fr)`,
   and `auto` refuses to go below the content's minimum, which is how a grid refuses to
   shrink and pushes the page sideways.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   2. THE SEARCH BAR WAS PAINTING OVER THE NOTIFICATION PANEL

   The header is a flex row: brand, then the search form, then the account controls, and
   the notification `ul` sits AFTER the search form in the DOM. So on a row with no gap
   allowance the two boxes touch, the panel loses, and the panel is the thing that is cut
   off -- which is what "the search bar is overlapping the notification bell dropdown"
   describes.

   Two separate problems, and only fixing the paint order fixes neither:

     1. STACKING. Both are non-positioned or low-z siblings in the same stacking context,
        so "who wins" is decided by DOM order. `--z-dropdown` on the panel does nothing
        while the search form is in the same context and paints later.

     2. GEOMETRY. Even correctly stacked, the panel is 340px wide anchored to the bell.
        If the search form overlaps it, the panel is still partly unclickable, because
        the topmost box eats the click.

   So: raise the panel's stacking context explicitly, and make the search form not span
   the gap.
   --------------------------------------------------------------------------- */



/*
   The panel itself has to leave the parent's stacking context to beat a sibling that is
   later in the DOM. `isolation: isolate` would CONTAIN it (wrong direction), so this is
   an explicit raise plus its own context, which is what lets the shadow and the rounded
   corner sit above the search form's background.
 */
.dropdown-menu.dropdown-menu-notificaitons,
.dropdown-menu.dropdown-menu-account {
	z-index: var(--z-dropdown);
}

/*
   THE SEARCH FORM MUST NOT SIT ON TOP OF THE PANEL. `position: relative` with NO z-index
   puts it in the same stacking context but EARLIER, so the panel's explicit --z-dropdown
   wins. Without `position` it is `static` and cannot be reordered at all.
 */
.site-header .search-form {
	position: relative;
	z-index: var(--z-base);
}

/*
   `#111` ON BOTH DROPDOWNS, as asked.

   The notification panel was `#0d0d0f` and the account panel had no background of its
   own, so it inherited whatever was behind it -- which is how a dropdown ends up
   transparent over the page and unreadable. `#111` on both, so they match, and so a
   dropdown is never see-through.
 */
.dropdown-menu.dropdown-menu-notificaitons,
.dropdown-menu.dropdown-menu-account,
.site-header .search-form .dropdown-menu {
	background: #111111;
}

/*
   THE SEARCH DROPDOWN WAS SHOWING A HORIZONTAL SCROLLBAR.

   Its items carry an avatar, a title and a meta line, and the title does not wrap, so
   the row is wider than the box and the container scrolls sideways. `overflow-x: hidden`
   removes the scrollbar and clips the overflow, which is correct here because the text is
   already ellipsised a few lines below -- the part that overflows is decoration.

   `overflow-y: auto` is set explicitly rather than left as `auto`, because when one axis
   is set to a non-visible value the other computes to `auto` anyway, and saying so makes
   the pairing obvious to the next reader.
 */
.site-header .search-form .dropdown-menu {
	overflow-x: hidden;
	overflow-y: auto;
}

/*
   A THIN, DARK SCROLLBAR -- SCOPED TO THIS ONE DROPDOWN.

   Asked for, and deliberately NOT a `*` rule: a global scrollbar restyle changes every
   scrollable box on the site, including the notification list and any carousel, and each
   one then has to be re-checked. Two selectors, both inside the search dropdown, is the
   narrowest thing that does what was asked.
 */
.site-header .search-form .dropdown-menu {
	scrollbar-width: thin;
	scrollbar-color: #3a3a3a #111111;
}

.site-header .search-form .dropdown-menu::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.site-header .search-form .dropdown-menu::-webkit-scrollbar-track {
	background: #111111;
}

.site-header .search-form .dropdown-menu::-webkit-scrollbar-thumb {
	background: #3a3a3a;
	border-radius: 3px;
}

.site-header .search-form .dropdown-menu::-webkit-scrollbar-thumb:hover {
	background: #4d4d4d;
}

/*
   AND THE TEXT THAT WAS MAKING IT WIDE. The row is a flex line; without
   `min-width: 0` on the shrinking child the title's intrinsic width wins and pushes the
   row out. This is the same `minmax(0,1fr)` rule as the grid above, in its flex form.
 */
.site-header .search-form .dropdown-menu span.author {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

   custom.css already declares the palette on `body`:

       --body-bg-color: #000   --color-grey-500: #101010
       --color-grey-600: #080808   --color-grey-700: #000000e0

   So the theme intends black. The block wrappers did not follow it: WordPress's own
   column/group defaults are transparent over whatever is behind them, and on a black page
   a transparent wrapper over a lighter parent reads as a grey panel, and over the content
   area reads as a hole. Both look like "the blocks are not styled".

   These are set EXPLICITLY rather than left transparent so the value is visible and
   greppable. A block that inherits its background is a block whose appearance depends on
   its parent's background, and that is exactly the arrangement that produced the report.
   --------------------------------------------------------------------------- */

/* Dark surfaces retain the current cascade below. */

 
.wp-block-column {
	flex-grow: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	margin: auto;
	padding: 0.3rem;
	border-radius: 9px;
	background-color: var(--musiveo-dark-bg);
	box-shadow: none;
}

/*
   The rest of the block wrappers, for the same reason. `border-radius` and the padding
   are matched to the column rule above so a page mixing columns and groups does not show
   two different card shapes.
 */
.wp-block-group,
.wp-block-columns,
.wp-block-cover,
.wp-block-table,
.wp-block-separator,
.entry-content > .wp-block-image,
.entry-content > figure,
.entry-content > .alignwide,
.entry-content > .alignfull {
	background-color: var(--musiveo-dark-bg);
	border-radius: 9px;
}

/*
   Code, quotes and preformatted text. A `pre` left at the UA default is white in every
   browser, and it is the single most obvious light rectangle on a dark page.
 */
pre,
code,
kbd,
samp,
.wp-block-code,
.wp-block-preformatted,
.wp-block-quote {
	background-color: #111111;
	color: #eaeaea;
}

/*
   Forms. An unstyled input is white; a dark site needs a dark input, and it needs one
   that is visibly a field rather than a hole, hence the border.
 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	background-color: #080808;
	color: #eaeaea;
	border: 1px solid #2a2a2a;
}

/*
   `border-radius: 9px` on a full-bleed element puts rounded notches in the corners of
   the page where it meets the viewport edge. alignfull/alignwide are meant to run to the
   edge, so they must NOT be rounded -- that is the one place the rule above is wrong.
 */
.entry-content > .alignfull,
.entry-content > .alignwide {
	border-radius: 0;
}

 

@media (max-width: 782px) {

	/* The collapsed state: a round icon button, nothing else. */
	.site-header .search-form {
		width: 2.75rem;
		height: 2.75rem;
		min-width: 2.75rem;
		padding: 0;
		margin: 0 0 0 auto;
		border-radius: 50%;
		overflow: hidden;
		justify-content: center;
	}

	/*
	   The field is not merely transparent, it is out of the layout, so the round button
	   collapses to the icon instead of staying 2.75rem wide with an invisible input in it.
	 */
	.site-header .search-form input {
		display: none;
	}

	/* The icon has to BE the button, not a glyph in a corner. */
	.site-header .search-form .search-toggle,
	.site-header .search-form label[for="search-state"] {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		min-height: 2.75rem;
		cursor: pointer;
		color: #eaeaea;
	}

	/* THE EXPANDED STATE. Width returns, the bar is BLACK, not #fff. */
	#search-state:checked ~ .site-header .search-form {
		position: absolute;
		z-index: var(--z-dropdown);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		min-height: 100%;
		margin: 0;
		padding: 0 0.5rem;
		border-radius: 0;
		background-color: #000000;
		color: #eaeaea;
		align-items: center;
		gap: 0.5rem;
	}

	#search-state:checked ~ .site-header .search-form input {
		display: block;
		flex: 1 1 auto;
		width: 1%;
		min-width: 0;
		height: 2.25rem;
		padding: 0 0.75rem;
		background: transparent;
		color: #eaeaea;
	}

	/*
	   THE X. The rotation already happens in style.css; this adds the hit area, the
	   colour and a real target size. `position: static` is deliberate -- it must NOT be
	   absolute, or it leaves the flow and the input takes the full width underneath it.
	 */
	#search-state:checked ~ .site-header .search-form .search-toggle,
	#search-state:checked ~ .site-header .search-form label[for="search-state"] {
		position: static;
		flex: 0 0 2.75rem;
		width: 2.75rem;
		min-width: 2.75rem;
		color: #eaeaea;
	}

	/* The middle bar is collapsed by style.css, so these two strokes become the cross. */
	#search-state:checked ~ .site-header .search-form i.icon-search::before,
	#search-state:checked ~ .site-header .search-form i.icon-search::after {
		background-color: #eaeaea;
	}
}
 


 

.dropdown-backdrop {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: transparent;
}

 
body.dropdown-open {
	/* Intentionally no `overflow`. See the note above. */
	overscroll-behavior: contain;
}

#dropdown-more {
	top: 0;
	left: 0;
}

 
.musiveo-confirm {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 10, 12, 0.86);
	/* Never inherit the page's transform, which would make `fixed` behave
	   like `absolute` and anchor the dialog to the wrong ancestor (10.18). */
	transform: none;
}

.musiveo-confirm__box {
	width: 100%;
	max-width: 420px;
	background: #24242a;
	color: #f2f2f4;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 14px;
	padding: 22px 22px 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.musiveo-confirm__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
}

.musiveo-confirm__body {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: #b4b4bd;
}

/* Cancel first in the DOM and in the row order, so the safe action is the
   default under Tab and the leftmost target. */
.musiveo-confirm__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.musiveo-confirm__cancel,
.musiveo-confirm__delete {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 9px;
	cursor: pointer;
	border: 1px solid transparent;
}

.musiveo-confirm__cancel {
	background: #33333c;
	border-color: rgba(255, 255, 255, 0.16);
	color: #f2f2f4;
}

.musiveo-confirm__cancel:hover {
	background: #3d3d47;
}

/* THE RED ONE. High contrast on its own background so it reads as
   destructive and not merely as another button. */
.musiveo-confirm__delete {
	background: #d63b3b;
	border-color: #e55252;
	color: #ffffff;
}

.musiveo-confirm__delete:hover {
	background: #b93030;
}

/* A visible focus ring is not optional here: the dialog is keyboard-first,
   and removing the default outline makes the dialog unusable without a
   mouse while looking identical to one that is fine. */
.musiveo-confirm__cancel:focus-visible,
.musiveo-confirm__delete:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.musiveo-confirm__box {
		animation: musiveo-confirm-in 140ms ease-out;
	}
}

@keyframes musiveo-confirm-in {
	from { opacity: 0; transform: translateY(8px) scale(0.99); }
	to   { opacity: 1; transform: none; }
}
 
 
@media (min-width: 783px) {

	/* CLOSED: the ICON is the control, so the form is only as wide as the icon. */
	.site-header .search-form {
		flex: 0 0 auto;
		margin-left: auto !important;
		background-color: transparent;
		border-radius: 999px;
		padding: 0;
	}

	/*
	 * THE FIELD IS COLLAPSED, NOT HIDDEN. `display: none` and `visibility: hidden`
	 * both remove it from the tab order, so the form becomes a button that cannot be
	 * reached by keyboard at all. A 1px box with `opacity: 0` is still focusable, and
	 * the `:focus-within` rule below can then reveal it for anyone tabbing.
	 */
	.site-header .search-form .search-field {
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}

	/* THE ICON GETS A HIT AREA. It measured 37px wide and was the only visible thing. */
	#icon-search {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 999px;
		cursor: pointer;
		color: #b4b4bd;
		transition: color .15s ease, background-color .15s ease;
	}

	#icon-search:hover,
	#icon-search:focus-visible {
		color: #f2f2f4;
		background-color: #24242a;
	}

	/*
	 * KEYBOARD REACHES THE FIELD WITHOUT SIGHTING IT: tabbing to the collapsed input
	 * brings the whole form back, so the search is never mouse-only.
	 */
	.site-header .search-form:focus-within {
		width: min(22rem, 40vw);
		background-color: #24242a;
		border: 1px solid rgba(255, 255, 255, 0.14);
	}

	.site-header .search-form:focus-within .search-field {
		position: static;
		width: 100%;
		height: 2.25rem;
		padding: 0 2.75rem 0 1rem;
		margin: 0;
		opacity: 1;
		pointer-events: auto;
		background-color: transparent;
		color: #f2f2f4;
	}

	 
	#search-state:checked ~ .site-header .search-form {
		position: static;
		inset: auto;
		flex: 0 0 auto;
		width: min(22rem, 40vw);
		height: 2.5rem;
		margin: 0 0 0 auto !important;
		padding: 0;
		max-width: none;
		background-color: #24242a;
		color: #f2f2f4;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 999px;
	}

	#search-state:checked ~ .site-header .search-form .search-field {
		position: static;
		width: 100%;
		height: 100%;
		padding: 0 2.75rem 0 1rem;
		margin: 0;
		border: 0;
		opacity: 1;
		pointer-events: auto;
		background-color: transparent;
		color: #f2f2f4;
	}

	/* THE SUBMIT BUTTON SITS INSIDE THE FIELD, AT ITS RIGHT END. */
	#search-state:checked ~ .site-header .search-form .search-submit {
		position: absolute;
		right: 0.5rem;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		color: #b4b4bd;
	}

	#search-state:checked ~ .site-header .search-form .search-submit:hover {
		color: #f2f2f4;
	}

	/* AND THE ICON TURNS INTO THE CLOSE AFFORDANCE, because it is the same control. */
	#search-state:checked ~ .site-header #icon-search {
		color: #f2f2f4;
	}
}
 

.header-container {
  container-type: inline-size;
  container-name: headerbar;
}

@media (min-width: 783px) {


   
  .site-header .search-form {
    flex: 0 1 auto;
    width: auto;
    min-width: 18rem;
    max-width: 30rem;
    margin: 0 0 0 auto !important;
    padding: 0 0.35rem 0 1rem;
    height: 2.75rem;
    background-color: #24242a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.375rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    box-sizing: border-box;
  }

  .site-header .search-form .search-field {
    position: static;
    inset: auto;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
    background-color: transparent;
    color: #f2f2f4;
    font-size: 0.9375rem;
  }

  .site-header .search-form .search-field::placeholder {
    color: #8a8a95;
  }

  /* The icon is the submit control, at the field's right end. */
  .site-header .search-form .search-submit,
  .site-header .search-form #icon-search,
  .site-header .search-form label[for="search-state"] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    color: #b4b4bd;
    border-radius: 50%;
    transition: color .15s ease, background-color .15s ease;
  }

  .site-header .search-form .search-submit:hover,
  .site-header .search-form #icon-search:hover,
  .site-header .search-form .search-field:focus-visible ~ .search-submit {
    color: #f2f2f4;
    background-color: rgba(255, 255, 255, 0.07);
  }

  /*
   * COLLAPSE TO THE ICON ONLY WHEN THE ROW GENUINELY CANNOT HOLD THE BAR.
   *
   * 40rem = 640px of header row. Measured minimum the row needs: brand 115 +
   * navbar 127 + account 58 + the bar's own 15rem minimum (240) = 540px, so 640
   * leaves headroom and collapses before anything can collide.
   */
  @container headerbar (max-width: 40rem) {

    .site-header .search-form {
      flex: 0 0 auto;
      width: 2.75rem;
      min-width: 2.75rem;
      max-width: 2.75rem;
      height: 2.75rem;
      padding: 0;
      margin: 0 0 0 0.5rem !important;
      background-color: transparent;
      border-color: transparent;
      border-radius: 50%;
      justify-content: center;
    }

    /* 1px and focusable, not display:none -- a display:none input is not tabbable. */
    .site-header .search-form .search-field {
      position: absolute;
      inset: auto;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: 0;
      opacity: 0;
      pointer-events: none;
    }

    .site-header .search-form .search-submit,
    .site-header .search-form #icon-search,
    .site-header .search-form label[for="search-state"] {
      width: 2.75rem;
      height: 2.75rem;
    }

    /* Tabbing to the collapsed field brings the bar back: search is never mouse-only. */
    .site-header .search-form:focus-within {
      flex: 0 1 auto;
      width: auto;
      min-width: 18rem;
      max-width: 30rem;
      height: 2.75rem;
      padding: 0 0.35rem 0 1rem;
      background-color: #24242a;
      border-color: rgba(255, 255, 255, 0.14);
      border-radius: 1.375rem;
    }

    .site-header .search-form:focus-within .search-field {
      position: static;
      inset: auto;
      width: auto;
      height: 2.25rem;
      padding: 0;
      opacity: 1;
      pointer-events: auto;
    }
  }
}

 
@supports not (container-type: inline-size) {
  @media (min-width: 783px) {
    @media (max-width: 1100px) {
      .site-header .search-form .search-field {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }
      .site-header .search-form {
        width: 2.75rem;
        min-width: 2.75rem;
        max-width: 2.75rem;
        padding: 0;
        background-color: transparent;
        border-color: transparent;
        border-radius: 50%;
      }
    }
  }
}

 



/* =============================================================================
   3. THE NOTIFICATIONS DRAWER: DARK, FULL HEIGHT, IN THE RIGHT LAYER.

   NOT VERIFIED IN A BROWSER. Measured logged OUT, where the drawer is not rendered
   at all -- the markup is conditional on a signed-in reader -- so the geometry here
   is reasoned from the stylesheet. What was measurable, and is a measurement: the
   z-index scale above, and the player at 99999.

   FULL HEIGHT. `height: 100%` resolves against the panel's parent, and that parent
   is a drawer whose own height is content-driven; the pair works only while nothing
   between them is content-sized. `100dvh` is the viewport unit that accounts for a
   mobile browser's collapsing toolbar and needs no parent to resolve against.

   THE BACKGROUND IS SET ON BOTH. A panel that declares a background and still reads
   as having none is what a transparent ancestor looks like: the drawer element
   itself carried none, so the panel sat on the page rather than on a surface.
   ============================================================================= */

.musiveo-notifications-slidein {
  align-items: stretch;
  background-color: rgba(8, 8, 10, 0.92);
  overflow: hidden;
}

.musiveo-notifications-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  background-color: #0d0d0f;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.55);
  color: #f2f2f4;
}

.musiveo-notifications-panel * {
  min-width: 0;
}

/* =============================================================================
   4. THE MOBILE MENU.

   Measured at 1000px it is `display: none`, which is CORRECT there -- a mobile
   drawer should be hidden on a desktop, so that measurement proves nothing about a
   phone and nothing is claimed about the open state. What is fixed is the layer it
   opens in (2000 -> var(--z-mobile-menu)) and its height, which was inheriting
   `--mobile-menu-height` from custom.css L1596 and can be shorter than the screen
   it is meant to cover.
   ============================================================================= */

.mobile-menu {
  z-index: var(--z-mobile-menu, 400);
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

 

@media (max-width: 782px) {

  /* `min-width: 0` IS THE LOAD-BEARING DECLARATION HERE. */
  body:has(#search-state:checked) .site-header .search-form,
  #search-state:checked ~ .site-header .search-form {
    position: absolute;
    z-index: var(--z-dropdown, 300);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    margin: 0;
    padding: 0 0.75rem;
    border-radius: 0;
    background-color: #000000;
    color: #eaeaea;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    overflow: hidden;
  }

  /* THE FIELD TAKES THE ROW. WITHOUT THIS IT IS THE 24px SLIVER MEASURED ABOVE. */
  body:has(#search-state:checked) .site-header .search-form .search-field,
  #search-state:checked ~ .site-header .search-form .search-field {
    display: block;
    position: static;
    inset: auto;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 2.25rem;
    padding: 0 0.5rem;
    margin: 0;
    border: 0;
    opacity: 1;
    pointer-events: auto;
    background-color: transparent;
    color: #f2f2f4;
    font-size: 1rem;
  }

  /* THE X IS THE CLOSE AFFORDANCE, AT THE RIGHT END, NOT CENTRED. */
  body:has(#search-state:checked) .site-header .search-form .search-toggle,
  body:has(#search-state:checked) .site-header .search-form label[for="search-state"],
  #search-state:checked ~ .site-header .search-form .search-toggle,
  #search-state:checked ~ .site-header .search-form label[for="search-state"] {
    position: static;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    color: #eaeaea;
    border-radius: 50%;
  }

  body:has(#search-state:checked) .site-header .search-form i.icon-search::before,
  body:has(#search-state:checked) .site-header .search-form i.icon-search::after {
    background-color: #eaeaea;
  }

  /* THE SUBMIT BUTTON IS NOT ALSO IN THE ROW, or the X is not the last thing in it. */
  body:has(#search-state:checked) .site-header .search-form .search-submit {
    display: none;
  }
}

 

@media (max-width: 782px) {

  .header-container > .search-form.header-search,
  .header-container > form.search-form {
    order: 0;
     
    max-width: fit-content;
  }
}

 

.block-loop-filter .block-loop-filter-select {
  background: #000000 !important;
  background-color: #000000 !important;
  border: 1px solid #2e2e34 !important;
  border-radius: 6px !important;
  height: 2.375rem !important;
  padding: 0 2.125rem 0 0.875rem !important;
  font-size: 0.875rem !important;

  /*
   * THE CHEVRON GOES IN `background`, NOT `background-image`, FOR THE SAME REASON.
   *
   * The frozen rule sets the SHORTHAND `background`, and a shorthand resets every
   * longhand it names -- including `background-image`. So a `background-image` here would
   * be wiped by it and the arrow would silently vanish, which is what happened on the
   * first attempt (`background-image` measured `none` while `background-color` measured
   * #111). Writing the shorthand with `!important` puts the arrow and the colour in the
   * same declaration, so they cannot be split apart again.
   */
  background-image:
    linear-gradient(45deg, transparent 50%, #8a8a95 50%),
    linear-gradient(135deg, #8a8a95 50%, transparent 50%) !important;
  background-position:
    calc(100% - 1.0625rem) calc(50% - 1px),
    calc(100% - 0.75rem) calc(50% - 1px) !important;
  background-size: 5px 5px, 5px 5px !important;
}

.block-loop-filter .block-loop-filter-select:hover {
  border-color: #3d3d46 !important;
}

.block-loop-filter .block-loop-filter-select:focus,
.block-loop-filter .block-loop-filter-select:focus-visible {
  outline: none !important;
  border-color: #6d6d7a !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

/*
 * THE WIDTHS, ON A DESCENDANT SELECTOR SO THEY BEAT THE FROZEN `max-width: 400px`
 * WITHOUT `!important`. 0,2,0 against 0,1,0.
 */
.block-loop-filter-taxonomy .block-loop-filter-select {
  width: 13.5rem !important;
}

.block-loop-filter-order .block-loop-filter-select {
  width: 9.25rem !important;
}

/*
 * AND THE LIST STYLE, WHICH IS THE SAME CONTROL AS LINKS. The frozen `select` rule cannot
 * reach an `<a>`, so none of the `!important` above applies and this stays clean.
 */
.block-loop-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.block-loop-filter-list li {
  margin: 0;
}

.block-loop-filter-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  background-color: #000000;
  border: 1px solid #2e2e34;
  border-radius: 6px;
  color: #cfcfd6;
  font-size: 0.8125rem;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}

.block-loop-filter-list a:hover,
.block-loop-filter-list a:focus-visible {
  border-color: #3d3d46;
  color: #f2f2f4;
}

.block-loop-filter-list .is-active a,
.block-loop-filter-list a[aria-current="true"] {
  border-color: #6d6d7a;
  background-color: #111114;
  color: #ffffff;
}

.block-loop-filter-count {
  color: #7a7a86;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/*
 * A SLIDER OF VIDEOS IS FOUR LANDSCAPE CARDS FILLING THE ROW, WITH THE FIFTH SCROLLING.
 *
 * `flex: 1 1 auto` rather than the `0 0 <width>px` the JavaScript sets, so the four visible
 * cards SHARE the container exactly and there is no leftover strip on the right. The inline
 * width from `measure()` is still what makes the fifth and sixth cards overflow, which is the
 * scroll -- so the two are not in conflict: the visible cards fill, the rest scroll.
 *
 * `!important` because the inline style set by `measure()` is `flex: 0 0 146px`, and an inline
 * declaration beats any author rule that does not say `!important`.
 *
 * BELOW THE BREAKPOINT THIS IS NOT APPLIED AT ALL, because one full-width slide is the whole
 * requirement there and the rule above gives exactly that.
 */
 
@media (max-width: 782px) {

}

 

/*
 * THE LAYER, NAMED ONCE. EXTENDS THE SCALE IN SECTION 2.
 *
 *     content        1
 *     header       200   --z-header
 *     dropdown     300   --z-dropdown
 *     mobile menu  400   --z-mobile-menu
 *     modal        500   --z-modal   (notifications drawer)
 *     sidebar      450   --z-sidebar        <- NEW, between the mobile menu and the drawer
 *     player     99999   frozen
 *
 * **THE SIDEBAR MEASURED AT 99999, WHICH IS THE PLAYER'S NUMBER.** It is a drawer; nothing should
 * be able to put the player bar under it. That is the "stays in between the header, player and
 * mobile menu" requirement stated as a position in a scale rather than as a comparison.
 */


/*
 * THE CLOSED STATE CARRIES `!important`, BECAUSE THE FIRST VERSION OF THIS RULE LEFT A VEIL.
 *
 * Measured straight after it shipped:
 *
 *     closed    opacity 0     visibility hidden    pointer-events none
 *     open      opacity 1     visibility visible   pointer-events auto
 *     reclosed  opacity 1     visibility visible   pointer-events none    <- STILL A VEIL
 *
 * A backdrop that cannot be clicked but is still painted is worse than no backdrop: the page goes
 * dark and tapping the sidebar does nothing. The frozen sheet's own `.backdrop` rule sets `opacity`
 * without `!important`, and something in it keeps the element visible after the state class goes.
 *
 * **SO BOTH STATES ARE STATED AND BOTH CARRY `!important`,** and the open state is expressed with
 * `:not()` on the closed selector rather than as a separate override -- so whichever the cascade
 * prefers, the two cannot both apply.
 */
.backdrop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  /* THE MISSING DECLARATION. Without a height the element is a line, not a surface. */
  height: 100dvh !important;
  min-height: 100dvh !important;

  z-index: var(--z-sidebar-backdrop, 440) !important;
  background-color: rgba(0, 0, 0, 0.62) !important;

  /*
   * NO `opacity` ON THIS ELEMENT AT ALL.
   *
   * Two measurements, same code, different outcome, both with the open selector matching:
   *
   *     transition: opacity .22s ease, visibility .22s ease
   *         8 samples over 2.4s      "0/hidden/auto"      opacity never moved
   *
   *     transition: opacity .22s ease          (visibility out of the list)
   *         open                     "0/visible/auto"    visibility moved, opacity still 0
   *
   * `visibility` responded and `opacity` did not, in the SAME rule, which is not a cascade
   * question -- it is an interpolation that never advances. **`opacity` is left out.**
   *
   * The dim is carried by `background-color` instead, switched by the same two rules, and the
   * fade is given up deliberately: a drawer that cannot be dismissed is worth less than a drawer
   * that fades in. `visibility` is discrete, has no interpolation to stall, and takes the element
   * out of the accessibility tree and the tab order while it is closed -- which is the whole reason
   * it is here.
   */
  background-color: transparent !important;
  visibility: hidden !important;
  pointer-events: none !important;

  /*
   * OPACITY ONLY. `visibility` IS NOT IN THE TRANSITION LIST, AND THAT IS THE FIX.
   *
   * Measured with both in the list, checkbox checked, `#menu-state:checked ~ div.backdrop`
   * matching, and `pointer-events` reading `auto` from the OPEN rule:
   *
   *     8 samples over 2.4s:  "0/hidden/auto"  every one
   *
   * So the open rule was applying -- `pointer-events: auto` proves it -- while `opacity` and
   * `visibility` stayed at the closed values. `visibility` is a **discrete** property: it flips at
   * the END of its transition, and an element that is `hidden` is not rendered, so a running
   * transition on it has no frame to advance on. **The two properties were transitioned together
   * and the discrete one stalled the pair.**
   *
   * `opacity` alone gives the same fade, and `visibility` is switched instantly by the open rule,
   * which is what a drawer wants anyway: it should be in the accessibility tree the moment it is
   * asked for, not 220ms later.
   */
}

/*
 * OPEN, AND ONLY WHEN THE TOGGLE IS CHECKED.
 *
 * `pointer-events: auto` is load-bearing: a backdrop that fades in but keeps `pointer-events: none`
 * is a shade you can click straight through, so tapping beside the drawer does nothing and the
 * drawer looks broken. The backdrop is also the tap-to-close target, so it has to be clickable.
 */
/*
 * THE OPEN STATE, IN THREE SELECTORS, BECAUSE THE DOM OFFERS THREE WAYS TO ASK.
 *
 * `body:has(#menu-state:checked)` is the one that matters and it is (1,2,0) -- above the closed
 * rule's (0,1,0) with room to spare. The two sibling forms are kept because they are what the
 * theme's own rules use for `.site-sidebar` and they cost nothing.
 *
 * `:has()` MEASURED SUPPORTED HERE: CSS.supports('selector(:has(*))') -> true.
 */
body:has(#menu-state:checked) .backdrop,
#menu-state:checked ~ .backdrop,
#menu-state:checked ~ div.backdrop {
  background-color: rgba(0, 0, 0, 0.62) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

 
/*
 * `z-index` CARRIES `!important` HERE AND IT IS MEASURED, NOT ASSUMED.
 *
 * The rule it has to beat computes to `z-index: 99999` -- the PLAYER's number -- and a plain
 * declaration lost to it. So the sidebar stayed at 99999 while `--z-sidebar` sat unused at 450.
 *
 * That is the opposite of the inert `!important` in section 9: this one is verified by reading the
 * computed value back, and it changes. **A `!important` is a claim; read the computed value and
 * either it is true or it is decoration.**
 */
.site-sidebar,
#aside.site-sidebar {
  z-index: var(--z-sidebar, 450) !important;
  top: var(--navbar-height, 75px) !important;
  bottom: 0 !important;
}

/*
 * AND ON A PHONE IT IS A FULL-HEIGHT DRAWER WITH NOTHING ABOVE IT BUT THE HEADER.
 *
 * `100dvh` rather than `100%`: a percentage resolves against the parent, and this element is a
 * direct child of `<body>`, so `height: 100%` is a percentage of the body -- which is content-sized
 * and can be shorter than the screen. `100dvh` also accounts for a mobile browser's collapsing
 * toolbar, which `100vh` does not.
 */
@media (max-width: 782px) {

  .site-sidebar,
  #aside.site-sidebar {
    z-index: var(--z-sidebar, 450) !important;
    top: var(--navbar-height, 56px) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* THE DRAWER TAKES THE SAME LAYER AS THE SIDEBAR, AS ASKED. */
.musiveo-notifications-slidein {
  z-index: var(--z-modal, 500);
}

 

.block-loop-filter .block-loop-filter-select {
  height: 2.125rem !important;
  padding: 0 1.75rem 0 0.625rem !important;
  font-size: 0.8125rem !important;
  border-radius: 5px !important;
}

/*
 * SMALLER AGAIN. 9.5rem and 7.5rem: a filter is a label and a value, not a sentence, and the
 * widest REAL term on this site (`Alternative Rap`, 15 characters) fits in 9.5rem at 13px.
 */
.block-loop-filter-taxonomy .block-loop-filter-select {
  width: 9.5rem !important;
}

.block-loop-filter-order .block-loop-filter-select {
  width: 7.5rem !important;
}

/* The chevron moves in with the padding. */
.block-loop-filter .block-loop-filter-select {
  background-position:
    calc(100% - 0.9375rem) calc(50% - 1px),
    calc(100% - 0.6875rem) calc(50% - 1px) !important;
}

/* AND THE ROW ITSELF CLOSES UP AROUND THEM. */
.block-loop-filter {
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.block-loop-filter-list a {
  padding: 0.3125rem 0.5rem;
  font-size: 0.75rem;
}

.block-loop-filter-list .block-loop-filter-count {
  font-size: 0.6875rem;
}

 

@media (max-width: 600px) {

  /* FAULT TWO: THE VARIABLE, DECLARED. 3rem is the theme's own intended value. */
  :root {
    --mobile-menu-height: 3rem !important;
  }

  /*
   * AND THE REVEAL, IN THE PLACE THAT IS ACTUALLY IN THE DOM.
   *
   * `body:has(#menu-state:checked)` rather than `#menu-state:checked ~ ...`, because the checkbox is
   * a child of `<body>` and the menu is a descendant of the header. Measured support for `:has()`
   * on this site: `CSS.supports('selector(:has(*))')` -> true.
   *
   * `display: flex` on the panel with `flex-direction: column` because the panel holds TWO menus --
   * `.nav.mobile-nav` and `.nav.mobile-account` (mobile.php L57 and L73) -- and they stack as a
   * drawer rather than side by side. `justify-content: center` puts the pair in the middle of the
   * panel rather than pinned to its top edge.
   */
  body:has(#menu-state:checked) .mobile-menu {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }
}

/* THE PANEL IS A FULL-HEIGHT DRAWER, NOT A 3rem STRIP, SO IT DOES NOT USE THE VARIABLE. */
@media (max-width: 600px) {

  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100dvh !important;
    min-height: 100dvh;
    max-height: 100dvh;
    z-index: var(--z-mobile-menu, 400) !important;
    background-color: #0d0d0f;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* The nav inside it is a list of links, not a 3rem-tall row. */
  .mobile-menu .nav,
  .mobile-menu .nav li > a {
    min-height: 0;
  }

  .mobile-menu .nav li > a {
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
  }

  .mobile-menu a > svg {
    height: 1.5rem;
    width: 1.5rem;
  }
}

 

 
.site-sidebar,
#aside.site-sidebar {
   
  top: var( --navbar-height, 75px ) !important;
  bottom: calc( var( --open-player-height, 0rem ) + var( --mobile-menu-height, 0rem ) ) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

 
.site-sidebar,
#aside.site-sidebar {
  z-index: 100030 !important;
}

.musiveo-notifications-slidein {
  z-index: 100040 !important;
}

/*
 * AND ON A PHONE THE BARS ARE AT THE BOTTOM, SO THE DRAWER IS `100dvh` MINUS THEM RATHER THAN A
 * PERCENTAGE. `height: auto` with a top and a bottom is what actually does this, and it is stated
 * once above rather than per breakpoint: the same `calc()` is right on every screen because both
 * variables collapse to `0rem` when their bar is closed.
 */
@media (max-width: 782px) {

  /* A DRAWER ON A PHONE COVERS THE HEADER. `top: 0` BELONGS HERE AND ONLY HERE. */
  .site-sidebar,
  #aside.site-sidebar {
    top: 0 !important;
    bottom: calc( var( --open-player-height, 0rem ) + var( --mobile-menu-height, 0rem ) ) !important;
    width: min( 300px, 86vw );
    z-index: 100030 !important;
  }

  /*
   * THE PANEL, AND ONLY THE PANEL.
   *
   * The wrapper keeps `inset: 0` and keeps `justify-content: flex-end`; the panel is the drawer and
   * is the element that stops at the bars. `height: auto` with a `top` and a `bottom` is what makes
   * it fill, and `100dvh` is not used because it cannot know about the two bars.
   */
  .musiveo-notifications-panel {
    top: 0 !important;
    bottom: calc( var( --open-player-height, 0rem ) + var( --mobile-menu-height, 0rem ) ) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: min( 420px, 100vw );
  }
}

 
@media (max-width: 600px) {

  .mobile-menu {
    bottom: 0 !important;
    z-index: 100025 !important;
  }
}

 

/* ONE DECLARING ELEMENT AND ONE WIDTH RANGE: the panel measures the same on both sides. */
.musiveo-notifications-panel {
  top: auto !important;
  bottom: auto !important;
  height: calc( 100dvh - var( --open-player-height, 0rem ) - var( --mobile-menu-height, 0rem ) ) !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: flex-start;
}

/* THE SEAM, ON A DESKTOP, WHERE THE HEADER IS VISIBLE BESIDE THE DRAWER. */
@media (min-width: 783px) {

  .site-sidebar,
  #aside.site-sidebar {
    top: calc( var( --navbar-height, 75px ) + 0.25rem ) !important;
  }
}

/* AND THE PLAYER'S REAL HEIGHT, ONLY WHILE IT IS OPEN. */
@media (max-width: 782px) {

  html.open-player {
    --open-player-height: 3.75rem !important;
  }
}

 

@media (max-width: 782px) {

  /*
   * THE CORRECT DECLARING ELEMENT. `body`, because that is where the theme puts it -- not
   * `html`, which is where the previous pass put it and where it was silently overridden.
   */
  .open-player body {
    --open-player-height: 3.75rem !important;
  }
}

@media (max-width: 600px) {

  /*
   * THE BAR, RESTORED. A persistent 3rem strip at the bottom of the viewport, in the space the
   * player already leaves for it, above the player in z-order so it can be pressed.
   */
  .mobile-menu,
  #mobile-menu {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    height: var( --mobile-menu-height, 3rem ) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    overflow: visible !important;
    background: var(--musiveo-dark-bg) !important;
    border-top: 1px solid #2e2e34 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100025 !important;
  }

  /* ITS LINKS ARE A ROW OF TAPS, NOT A VERTICAL LIST INSIDE A BAR. */
  .mobile-menu ul,
  #mobile-menu ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .mobile-menu a,
  #mobile-menu a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.75rem !important;
    height: 2.5rem !important;
    padding: 0 0.5rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
    background: transparent !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 6px !important;
  }
}

 

/* 19.1 THE WRAPPER. A DEFINITE HEIGHT, NOT AN INSET. */
.musiveo-notifications-slidein {
  height: 100dvh !important;
  min-height: 100dvh !important;
}

@media (max-width: 600px) {

  /* 19.3 A BAR TALL ENOUGH FOR AN ICON OVER A LABEL, AND THE VARIABLE BESIDE IT. */
  :root {
    --mobile-menu-height: 3.5rem !important;
  }

  .mobile-menu {
    --mobile-menu-icon-width: 1.5rem;
    --mobile-menu-icon-height: 1.5rem;
    --mobile-menu-font-size: 0.6875rem;

    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 0.25rem 0.375rem !important;
    height: var( --mobile-menu-height, 3.5rem ) !important;
  }

  .mobile-menu .nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    min-height: 0 !important;
    font-size: var( --mobile-menu-font-size, 0.6875rem ) !important;
  }

  /* The nav list takes the room; the account list keeps its own width at the far end. */
  .mobile-menu .mobile-nav {
    flex: 1 1 auto !important;
  }

  .mobile-menu .mobile-account {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }

  .mobile-menu .nav li {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-menu .mobile-account li {
    flex: 0 0 auto !important;
  }

  /* THIS DECLARATION IS THE SCREENSHOT: icon above label, not beside it. */
  .mobile-menu .nav li > a {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.1875rem !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0.25rem 0.25rem !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: var( --mobile-menu-font-size, 0.6875rem ) !important;
  }

  /* THE ICON. `color: inherit` off the link, and the stroke takes it -- these are stroke icons
     (10.99), so nothing here sets `fill`. */
  .mobile-menu .nav li > a > svg,
  .mobile-menu .nav a > svg,
  .mobile-menu .nav li > a > span:first-child > svg {
    display: block !important;
    width: var( --mobile-menu-icon-width, 1.5rem ) !important;
    height: var( --mobile-menu-icon-height, 1.5rem ) !important;
    color: inherit !important;
    flex: 0 0 auto !important;
  }

  /* `Icons::menu_items()` wraps the label in a span so the gap between icon and text can be set
     here rather than by a margin on the label. */
  .mobile-menu .nav li > a > span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* THE CURRENT ITEM, in the theme's own colour, so "where am I" still reads. */
  .mobile-menu li.current_page_item > a,
  .mobile-menu li.current-menu-item > a,
  .mobile-menu li.current_page_item > a > span,
  .mobile-menu li.current-menu-item > a > span {
    color: var( --color-primary, #ffffff ) !important;
  }

  /* A submenu indicator has nowhere to go in a two-line item and draws a caret beside the label. */
  .mobile-menu .menu-item-has-children > a::after {
    display: none !important;
  }
}

 

 

@media (min-width: 783px) {

  /* 21.1 NO OVERLAY ON A DESKTOP. THE SIDEBAR IS A COLUMN, NOT A MODAL DRAWER. */
  .backdrop,
  div.backdrop,
  #menu-state:checked ~ div.backdrop,
  body:has(#menu-state:checked) .backdrop {
    display: none !important;
  }
}

/* 21.2 ORDER IS DECLARED ONCE PER WIDTH, IN THE BLOCKS FURTHER DOWN: the desktop row
 * zeroes every child and the phone row numbers them. The intermediate passes that
 * restated those values here were all overridden by a later, identical declaration. */

@media (max-width: 782px) {

  /* 21.3 THE LOGO IS PART OF THE ROW ON A PHONE TOO. */
  .header-container > .site-brand {
    display: flex !important;
  }
}

/* 20.3 THE BELL IS A BUTTON, SO IT LOOKS LIKE THE ANCHOR IT WAS. */
#dropdown-notification > button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
}

#dropdown-notification > button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

 

@media (min-width: 783px) {

  /* 22.1 THE ACCOUNT MENUS LAST, SO THEY SIT AGAINST THE RIGHT EDGE. */
  .header-container > .account-menu-container,
  .header-container > .menu-before-login,
  .header-container > .menu-after-login,
  .header-container > .account-menu {
    order: 10 !important;
  }
}

/* 22.1 THE SPACERS SHOW NOTHING ON A PHONE: declared with the phone order below. */

@media (max-width: 600px) {

  /* 22.2 ICON ON TOP, LABEL UNDERNEATH -- declared, not inherited from the generator's markup. */
  .mobile-menu .nav li > a > svg,
  .mobile-menu .nav a > svg,
  .mobile-menu .nav li > a > span:first-child > svg {
    order: 1 !important;
  }

  .mobile-menu .nav li > a > span {
    order: 2 !important;
  }
}

/* 22.3 ICONS ON THE HEADER NAV. THE SIDEBAR HAS ITS OWN SCALE, DECLARED BELOW. */
.site-header .navbar-menu .nav li > a > svg,
.site-header .navbar-menu .nav a > svg,
.site-header .site-navbar .nav li > a > svg,
.site-header .site-navbar a > svg {
  width: 3.25rem !important;
  height: 3.25rem !important;
  max-width: 3.25rem !important;
  color: inherit !important;
  flex: 0 0 auto !important;
  display: block !important;
}

/* AND THE LABEL BESIDE IT, WHICH IS HOW THE SIDEBAR AND HEADER NAV ARE BUILT. */
.site-header .navbar-menu .nav li > a,
.site-header .site-navbar .nav li > a,
.site-sidebar .nav li > a,
#aside .nav li > a {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* THE LABEL IS ITS OWN BOX SO THE GAP HAS SOMETHING TO MEASURE. */
.site-header .navbar-menu .nav li > a > span,
.site-header .site-navbar .nav li > a > span,
.site-sidebar .nav li > a > span,
#aside .nav li > a > span {
  display: inline-block !important;
}

 

@media (min-width: 783px) {

   
  .header-container > .menu-toggle,
  .header-container > .site-brand,
  .header-container > .search-form,
  .header-container > .site-navbar,
  .header-container > .nav-notifications,
  .header-container > .account-menu-container,
  .header-container > .menu-before-login,
  .header-container > .menu-after-login,
  .header-container > .account-menu,
  .header-container > .flex {
    order: 0 !important;
  }

  /* The drawer is a child of the row; it is fixed, and it must never sort into the header. */
  .header-container > .musiveo-notifications-backdrop,
  .header-container > .musiveo-notifications-panel {
    order: 100 !important;
  }
}

@media (max-width: 782px) {

  /*
   * ONE GENUINE DIFFERENCE ON A PHONE: `header-nav` before the search.
   *
   * EVERY child of the row gets a value here, including the two the logged-out page does not have.
   */
  .header-container > .menu-toggle {
    order: 1 !important;
  }

  .header-container > .site-brand {
    order: 2 !important;
  }

  .header-container > .site-navbar {
    order: 3 !important;
  }

  .header-container > .search-form {
    order: 4 !important;
    margin-left: auto !important;
  }

  .header-container > .nav-notifications {
    order: 5 !important;
  }

  .header-container > .account-menu-container,
  .header-container > .menu-before-login,
  .header-container > .menu-after-login,
  .header-container > .account-menu {
    order: 6 !important;
  }

  .header-container > .flex {
    display: none !important;
  }

  .header-container > .musiveo-notifications-backdrop,
  .header-container > .musiveo-notifications-panel {
    order: 100 !important;
  }
}

 

 
.site-sidebar .nav li > a > svg,
.site-sidebar .nav a > svg,
#aside .nav li > a > svg,
#aside .nav a > svg,
.site-sidebar .menu-profile-menu-container a > svg,
#aside .menu-profile-menu-container a > svg {
  width: 1.1rem !important;
  height: 1.1rem !important;
  max-width: 1.1rem !important;
  color: inherit !important;
  flex: 0 0 auto !important;
  display: block !important;
}

/* THE HEADER NAV AND THE ACCOUNT MENUS, AT HEADER SCALE. */
.site-header .nav li > a > svg,
.site-header .nav a > svg,
.site-header .navbar-menu .nav li > a > svg,
.site-header .navbar-menu .nav a > svg,
.site-header .site-navbar .nav li > a > svg,
.site-header .site-navbar .nav a > svg,
.site-header .account-menu-container .nav li > a > svg,
.site-header .account-menu-container .nav a > svg,
.header-container .account-menu-container svg,
.header-container .menu-after-login svg,
.header-container .menu-before-login svg,
#header-nav .nav li > a > svg,
#header-nav .nav a > svg {
  color: inherit !important;
  flex: 0 0 auto !important;
  display: block !important;
}

/* THE ACCOUNT MENUS ARE A ROW, NOT A STACK, AND MUST NOT BE WIDER THAN THE HEADER. */
.header-container .account-menu-container,
.header-container .menu-after-login,
.header-container .menu-before-login {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 22rem !important;
}

.header-container .account-menu-container .nav,
.header-container .menu-after-login .nav,
.header-container .menu-before-login .nav {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* A SUBMENU IS A POPOVER, NOT A HEADER ROW. */
.site-header .account-menu-container .sub-menu,
.site-header .menu-after-login .sub-menu,
.header-container .menu-profile-menu-container {
  position: absolute !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(14rem, calc(100vw - 24px)) !important;
  box-sizing: border-box;
  left: auto !important;
  right: auto !important;
  inset-inline-end: 0 !important;
  transform: none !important;
}

 

@media (min-width: 783px) {

  /*
   * THE SIDEBAR STARTS BELOW THE HEADER *WHEREVER THE HEADER IS*, which depends on the admin bar.
   *
   * A phone keeps `top: 0` from section 21 -- a drawer there covers the header by design.
   */
  .site-sidebar,
  #aside.site-sidebar {
    top: calc( var( --adminbar-height, 0px ) + var( --navbar-height, 75px ) + 0.25rem ) !important;
  }
}

/* 25.1 ICON SIZES, ONE PER CONTAINER. */
.site-sidebar .nav li > a > svg,
.site-sidebar .nav a > svg,
#aside .nav li > a > svg,
#aside .nav a > svg,
.site-sidebar .menu-profile-menu-container a > svg,
#aside .menu-profile-menu-container a > svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  max-width: 1.5rem !important;
}

.site-header .nav li > a > svg,
.site-header .nav a > svg,
.site-header .navbar-menu .nav li > a > svg,
.site-header .navbar-menu .nav a > svg,
.site-header .site-navbar .nav li > a > svg,
.site-header .site-navbar .nav a > svg,
.site-header .account-menu-container .nav li > a > svg,
.site-header .account-menu-container .nav a > svg,
.header-container .account-menu-container svg,
.header-container .menu-after-login svg,
.header-container .menu-before-login svg,
#header-nav .nav li > a > svg,
#header-nav .nav a > svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: 1.25rem !important;
}

 

@media (min-width: 601px) {

  /*
   * The mobile bar is a PHONE component. Above the breakpoint nothing may reveal it -- and the
   * selector named here is one this stylesheet did not write and cannot make harmless by editing its
   * own copy, because it lives in a sheet that is not ours.
   */
  .mobile-menu,
  #mobile-menu,
  .menu-state:checked ~ .mobile-menu,
  #menu-state:checked ~ .mobile-menu,
  body:has(#menu-state:checked) .mobile-menu,
  body:has(#menu-state:checked) #mobile-menu {
    display: none !important;
  }
}

 

:root {
  --musiveo-surface-black: #000000;
  --musiveo-surface-grey: #101010;
  --musiveo-surface-border: #2e2e34;
}

/* EVERY MENU PANEL AND FLYOUT, WHATEVER IT IS CALLED AND WHEREVER IT LIVES. */
.sub-menu,
ul.sub-menu,
.menu-profile-menu-container,
.dropdown-menu,
.dropdown-menu-notificaitons,
.dropdown-menu-account,
.dropdown-menu-notificaitons .dropdown-notification-list,
.site-header .sub-menu,
.site-header .dropdown-menu,
#aside .sub-menu,
#aside .dropdown-menu {
  /*
   * THE COLOUR IS WRITTEN AS A LONGHAND, NOT AS `background`.
   *
   * `background` is the SHORTHAND, and a shorthand resets every longhand it names -- so
   * `background: #101010` silently sets `background-image: none` as well. A rule that
   * later needed a gradient or an icon on that surface would then be defeated by this
   * one, and the symptom reads as "my CSS is being ignored" rather than as a shorthand
   * doing exactly what it says. The two longhands are on separate lines for that reason.
   */
  background-color: #101010 !important;
  border: 1px solid #2e2e34 !important;
  color: #f2f2f4 !important;
}

 
ul.menu-profile-menu-container,
.dropdown-menu-account,
.dropdown-menu-notificaitons {
  display: none;
}

ul.menu-profile-menu-container.show,
.dropdown-menu-account.show,
.dropdown-menu-notificaitons.show {
  display: block;
}


/* AND EVERY NESTED LEVEL, which would otherwise show the page through the gap. */
.sub-menu .sub-menu,
.sub-menu ul,
.dropdown-menu .dropdown-menu {
  background: #101010 !important;
  background-color: #101010 !important;
  border-color: #2e2e34 !important;
}

/*
 * NO BLUE, ANYWHERE A SURFACE IS PAINTED.
 *
 * The blue is `--color-primary` reaching a background. The value stays as an ACCENT -- it is what a
 * selected menu item is tinted with -- and is explicitly not permitted as a surface.
 */
.sub-menu a:hover,
.sub-menu a:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
  background: #161616 !important;
  background-color: #161616 !important;
  color: #ffffff !important;
}

/* 27.x THE ICON PICKER'S PREVIEW BOX. */
.musiveo-menu-icon .musiveo-menu-icon-preview {
  display: inline-block;
  min-width: 1.5rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  color: #ffffff;
}
.musiveo-menu-icon .musiveo-menu-icon-preview svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  color: #ffffff;
} 
.site-header .nav .svg-icon,
.site-header .nav .menu-has-icon > a > .svg-icon,
.site-header .nav a > svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

 
.entry-header-container.header-station > .post-thumbnail {
	order: 1;
}

.entry-header-container.header-station > .entry-header {
	order: 2;
}
 
.author.vcard:has(> .user-verified) {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	vertical-align: middle;
}

/* The author line of a single post: the avatar sits beside the name for every author (only a verified author used to get the flex row, so an
   unverified author's avatar stacked above the name and touched the date). Loop cards have their own rules further down. */
.entry-header > .byline .author.vcard {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	vertical-align: middle;
}
.entry-header > .posted-on { margin-inline-end: 0.5rem; }


/* Profile tabs keep their own horizontal scroll region. */
.user-navigation[data-section-scroll] { display: flex; min-width: 0; max-width: 100%; background: transparent !important; border: 0 !important; overflow: visible; }
.user-navigation .profile-section-scroll { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow-x: auto !important; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-padding-inline: 1rem; -webkit-overflow-scrolling: touch; border: 1px solid #ffffff24 !important; border-radius: 999px !important; }
.user-navigation .profile-section-scroll > .nav, .user-navigation > ul.profile-section-scroll { display: flex !important; flex-wrap: nowrap; width: max-content; min-width: 100%; white-space: nowrap; background: transparent !important; border: 0 !important; }
.user-navigation .profile-section-scroll .menu-item { flex: 0 0 auto; border: 0; }
.user-navigation .profile-section-scroll a { white-space: nowrap; border-radius: 999px; padding: .65rem 1rem; }
.user-navigation .profile-section-scroll::-webkit-scrollbar { height: 4px; }
.user-navigation .profile-section-scroll::-webkit-scrollbar-track { background: transparent; }
.user-navigation .profile-section-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.user-navigation .profile-section-scroll.is-scrolling { scrollbar-color: #777 transparent !important; }
.user-navigation .profile-section-scroll.is-scrolling::-webkit-scrollbar-thumb { background: #777; }
.user-navigation .profile-section-scroll.is-dragging, .user-navigation .profile-section-scroll.is-dragging * { cursor: grabbing; user-select: none; }
ul.menu-profile-menu-container:not(.show), .dropdown-menu-account:not(.show), .dropdown-menu-notificaitons:not(.show) { display: none !important; }
ul.menu-profile-menu-container.show, .dropdown-menu-account.show, .dropdown-menu-notificaitons.show { display: block !important; }
/* Notification lists share compact rows and remain inside the viewport. */
.dropdown-menu-notificaitons .block-loop-items,
.musiveo-notifications-body .block-loop-items { display: block !important; margin: 0; padding: 0; list-style: none; }
.dropdown-menu-notificaitons .play-notification-item,
.musiveo-notifications-body .play-notification-item { display: flex !important; flex-wrap: wrap; width: 100% !important; padding: .65rem; margin: 0; border-bottom: 1px solid #303038; border-radius: 0; background: transparent; }
.play-notification-item.is-unread { background: #30303026 !important; }
.play-notification-item .notification-row { display: flex; gap: .7rem; width: 100%; min-width: 0; color: inherit; }
.play-notification-item .notification-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.play-notification-item .notification-avatar img { width: 40px; height: 40px; object-fit: cover; }
.play-notification-item .notification-body { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.play-notification-item .notification-title { white-space: normal; overflow-wrap: anywhere; }
.play-notification-item .notification-action, .play-notification-item .notification-time { color: #aaaab5; font-size: .78rem; }
.play-notification-item .notification-read { margin: .3rem 0 0 3.2rem; padding: .4rem .6rem; color: var(--musiveo-accent, #b58aff); background: transparent; border: 1px solid #313131; border-radius: .4rem; cursor: pointer; }
.musiveo-notifications-slidein:not([hidden]) { position: fixed !important; inset: 0 !important; height: 100dvh !important; width: 100% !important; z-index: var(--z-notifications, 1400); display: flex !important; justify-content: flex-end; align-items: stretch; padding: 0 !important; }
.musiveo-notifications-slidein[hidden] { display: none !important; }
.musiveo-notifications-backdrop { position: absolute; inset: 0; background: #0009; }
.musiveo-notifications-slidein .musiveo-notifications-panel { position: relative !important; inset: auto !important; width: min(30rem, 100%) !important; height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; background: #17171d; border-left: 1px solid #383840; transform: none !important; }
.musiveo-notifications-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.musiveo-notifications-head, .musiveo-notifications-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; background: #1d1d25; }
.musiveo-notifications-head h2 { margin: 0; font-size: 1.15rem; }
.musiveo-notifications-close { width: 44px; height: 44px; color: #fff; }
.musiveo-notifications-foot { flex-wrap: wrap; font-size: .85rem; }
.musiveo-notifications-foot button { padding: .6rem; color: #fff; border: 1px solid #45454f; border-radius: .4rem; background: transparent; }
.notification-empty { padding: 1rem; color: #aaaab5; }
/* The clamp belongs to the preview; the action remains visible. */
.user-bio[data-description-ready], .station-content[data-description-ready] { height: auto !important; max-height: none !important; overflow: visible !important; }
.user-bio[data-description-ready] button.description-more { position: static; height: auto; min-height: 32px; color: var(--musiveo-accent, #b58aff); }
/* Decorative header overlays must allow links to receive pointer input. */
.account-menu .menu-avatar::before { pointer-events: none; }

/* Shared controls remain legible inside compact cards. */
.btn-follow { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 6.25rem !important; width: auto !important; min-height: 40px; padding: .55rem .9rem !important; border: 1px solid #ffffff30 !important; border-radius: 999px !important; background: #ffffff0d !important; color: inherit; font-size: .85rem !important; line-height: 1.2 !important; white-space: nowrap !important; word-break: normal !important; writing-mode: horizontal-tb; }
.btn-follow > .follow, .btn-follow.active > .following { display: inline !important; }
.btn-follow > .following, .btn-follow.active > .follow { display: none !important; }
.btn-follow.active { border-color: #b58aff80 !important; background: #b58aff18 !important; }
.btn-follow:focus-visible { outline: 2px solid #b58aff; outline-offset: 3px; }
button.btn-like { font-size: large; }
button.btn-like.active svg, button.btn-like.liked svg, [data-plyr="like"].plyr__control--pressed .icon--pressed { fill: #ef476f !important; stroke: #ef476f !important; }
.action-confetti { position:fixed; z-index:1500; pointer-events:none; width:0; height:0; }
.action-confetti i { position:absolute; width:5px; height:8px; border-radius:2px; background:var(--burst-color); animation:actionBurst 750ms ease-out forwards; }
@keyframes actionBurst { from { transform:translate(0,0) rotate(0); opacity:1; } to { transform:translate(var(--burst-x),var(--burst-y)) rotate(180deg); opacity:0; } }
::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-track { background-color:#000; }
::-webkit-scrollbar-thumb { background:#232323; border-radius:10px 0 0 10px; }
::-webkit-scrollbar-thumb:hover { background:#272727; }
.site-sidebar::-webkit-scrollbar { width:5px; height:0; }
:root { scrollbar-color:rgb(22,22,22) rgb(0,0,0) !important; scrollbar-width:thin !important; }
.entry-header.user-header.header-user { display:flex !important; align-items:flex-start; gap:1.5rem; padding:2rem !important; margin:1.5rem 0 !important; border:1px solid #ffffff16; border-radius:1.25rem; min-width:0; }
.user-header .entry-avatar { flex:0 0 96px; width:96px; height:96px; padding:0; }
.user-header .entry-avatar a, .user-header .entry-avatar img { width:100%; height:100%; }
.user-header .entry-header-inner { min-width:0 !important; width:auto !important; flex:1 1 0; align-items:flex-start !important; }
.user-header .entry-title { margin:0 0 .6rem !important; line-height:1.15; overflow-wrap:anywhere; }
.user-header .entry-meta { display:flex !important; flex-wrap:wrap !important; align-items:center; justify-content:flex-start !important; gap:.75rem !important; width:100%; padding:0 !important; margin:1rem 0 0 !important; }
.user-header .user-platforms { display:flex; flex-wrap:wrap; gap:.5rem; min-width:0; max-width:100%; margin:0 !important; }
.user-header .user-platforms-primary { display:flex !important; flex-wrap:wrap !important; align-items:center; gap:.35rem !important; min-width:0 !important; max-width:100%; }
.user-header .user-platform-link { display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; padding:8px !important; margin:0 !important; border:1px solid #ffffff20; border-radius:50%; background:#ffffff08; }
.user-header .user-platform-link svg { width:22px !important; height:22px !important; }
#dropdown-notification .dropdown-menu-notificaitons.show { display:flex !important; flex-direction:column; width:min(340px,calc(100vw - 2rem)); max-height:min(480px,calc(100dvh - 6rem)); padding:0 !important; overflow:hidden !important; border:1px solid #ffffff24; border-radius:.9rem; }
#dropdown-notification-list { min-height:0; overflow-y:auto; flex:1 1 auto; max-height:none !important; }
#dropdown-notification .view-all-notifications { flex:0 0 auto; display:block !important; position:static !important; padding:.7rem 1rem !important; border-top:1px solid #ffffff20; background:#18181e; }
#dropdown-notification .view-all-notifications a { display:block; text-align:center; color:inherit; }
#dropdown-notification .play-notification-item { padding:.55rem .7rem !important; }
#dropdown-notification .notification-avatar, #dropdown-notification .notification-avatar img { width:32px; height:32px; flex-basis:32px; }
#dropdown-notification .notification-name { font-size:.85rem; font-weight:600; }
#dropdown-notification .notification-title { font-size:.8rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#dropdown-notification .notification-read { margin-left:2.7rem; font-size:.75rem; padding:.2rem .45rem; }
.notifications.block-loop-items { display:block !important; max-width:48rem; margin:0 auto; }
.notifications.block-loop-items .play-notification-item { padding:1rem; margin:0; }
@media(max-width:782px) {
 .site-header .header-container { gap:8px !important; padding-inline:12px !important; min-width:0; }
 .header-container > .site-brand { flex:1 1 auto !important; min-width:0; height:auto; }
 .header-container > .site-brand img { max-width:100%; height:auto; }
 .header-container > .search-form { flex:0 0 40px !important; min-width:40px; width:40px; margin-left:0 !important; }
 .header-container > .nav-notifications { flex:0 0 40px !important; min-width:40px; width:40px; }
 .header-container > .account-menu-container { flex:0 0 44px !important; min-width:44px !important; width:44px; }
 .account-menu .menu-avatar { flex:0 0 44px !important; width:44px !important; min-width:44px; }
 .account-menu .menu-avatar > a { padding:0 !important; width:44px !important; min-width:0; }
 .account-menu .menu-avatar img { max-width:36px; max-height:36px; }
 .account-menu .menu-avatar > .sub-menu { position:fixed !important; top:76px !important; right:12px !important; left:auto !important; width:min(280px,calc(100vw - 24px)); max-height:calc(100dvh - 100px); overflow:auto; }
 .entry-header.user-header.header-user { padding:1.25rem !important; gap:1rem; flex-direction:column; margin:1rem 0 !important; }
 .user-header .entry-avatar { flex-basis:72px; width:72px; height:72px; }
 .user-header .entry-title { font-size:clamp(1.25rem,5.4vw,1.75rem) !important; }
 .user-header .entry-header-inner { width:100% !important; }
 .user-header .user-platforms { flex:1 0 100%; }
 #dropdown-notification .dropdown-menu-notificaitons { position:fixed !important; top:76px !important; right:12px !important; left:auto !important; transform:none !important; }
}
@media(prefers-reduced-motion:reduce) { .btn-comment, .btn-download, .btn-purchase, button.btn-like, button.btn-like svg, .action-confetti i { animation:none !important; } }

.user-header.has-profile-background { position:relative; isolation:isolate; overflow:hidden; background:#17171d; }
.user-header .profile-background-image { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; }
.user-header.has-profile-background::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#08080bed,#08080ba8); pointer-events:none; }
.user-header.has-profile-background .user-display-name-link { color:#fff; }

/*
 * THE BACKDROP'S EDIT BUTTON.
 *
 * The profile picture has always linked to its own row in the editor; this is the
 * same promise for the other picture on the header. It is deliberately small and
 * quiet -- a header is a description of a person, not a toolbar -- so it is a disc
 * that gains its label on hover and on keyboard focus, and it sits inside the
 * header's own padding rather than floating over the artwork at the far edge.
 *
 * It is placed before the avatar in the markup so that in a header WITHOUT the
 * button the two pictures stay adjacent; the absolute positioning then takes it to
 * the corner on the headers that do have it.
 */
.user-header { position:relative; }
.user-header .profile-background-edit {
	position:absolute;
	top:1rem;
	right:1rem;
	z-index:2;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	padding:0;
	border:1px solid #ffffff2e;
	border-radius:50%;
	background:#0d0d12b3;
	color:#e7e7ee;
	text-decoration:none;
	backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
	transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.user-header .profile-background-edit:hover,
.user-header .profile-background-edit:focus-visible {
	background:#b58aff2e;
	border-color:#b58aff80;
	color:#fff;
	outline:none;
}
.user-header .profile-background-edit:focus-visible { box-shadow:0 0 0 2px #b58aff; }
.user-header .profile-background-edit svg { width:18px; height:18px; }

/* Visually hidden until focused, so the accessible name is still announced. */
.user-header .profile-background-edit .screen-reader-text {
	position:absolute !important;
	width:1px; height:1px;
	margin:-1px; padding:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}
.user-header .profile-background-edit:focus-visible .screen-reader-text {
	position:static !important;
	width:auto; height:auto;
	margin:0; padding:0 0 0 .5rem;
	overflow:visible; clip:auto; clip-path:none;
	font-size:.8rem;
	white-space:nowrap;
}
@media(max-width:600px) { .user-header .profile-background-edit { top:.75rem; right:.75rem; width:34px; height:34px; } }
.form-profile { max-width:60rem; margin-inline:auto; }
.form-profile .form-section { background:#ffffff03; }
.form-profile .form-section legend { padding-inline:.5rem; font-size:1rem; font-weight:600; }
.form-profile .form-row { min-width:0; margin:0 0 1rem; }
.form-profile label { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; font-size:.9rem; }
.form-profile .form-control:not([type=checkbox]):not([type=radio]) { width:100%; max-width:100%; min-height:44px; padding:.75rem .9rem !important; border:1px solid #ffffff24 !important; border-radius:.65rem !important; background:#0b0b10 !important; color:#f5f5f7 !important; font:inherit; box-shadow:none; }
.form-profile .form-control:focus-visible { border-color:#b58aff !important; outline:2px solid #b58aff40; outline-offset:2px; }
.form-profile .form-hint { display:block; color:#a3a3af; font-size:.8rem; line-height:1.5; margin-top:.45rem; }
.form-profile button[type=submit] { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.8rem 1.3rem !important; border-radius:.75rem !important; background:#f5f5f7 !important; color:#14141a !important; font-weight:600; border:0; }
.form-profile .form-control::file-selector-button { padding:.45rem .65rem; margin-right:.65rem; border:1px solid #ffffff24; border-radius:.4rem; background:#252530; color:#fff; cursor:pointer; }
.profile-background-preview { aspect-ratio:3/1; max-height:200px; border:1px dashed #ffffff28; border-radius:.75rem; overflow:hidden; background:#17171d; margin-bottom:1rem; }
.profile-background-preview img { width:100%; height:100%; object-fit:cover; }
@media(max-width:600px) { .form-profile .form-grid { grid-template-columns:minmax(0,1fr) !important; } .form-profile .form-section { padding:1rem !important; } .form-profile button[type=submit] { width:100%; } }

.notifications-profile-toolbar { display:flex; justify-content:flex-end; max-width:48rem; margin:0 auto 1rem; }
.notifications-profile .play-notification-item .notification-name { font-weight:600; }
.notifications-profile .notification-body { flex:1; }
#musiveo-playlist-dialog .musiveo-playlist-row { display:flex; align-items:center; gap:.8rem; border:0 !important; border-bottom:1px solid #ffffff12 !important; border-radius:0; background:transparent !important; box-shadow:none !important; padding:.75rem .2rem; }
#musiveo-playlist-dialog .musiveo-playlist-row__thumbnail { flex:0 0 52px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:.5rem; overflow:hidden; background:#ffffff0a; font-size:1.5rem; border:0 !important; box-shadow:none !important; }
#musiveo-playlist-dialog .musiveo-playlist-row__thumbnail img { width:100%; height:100%; object-fit:cover; }
#musiveo-playlist-dialog .musiveo-playlist-row__link { flex:1 1 auto; min-width:0; padding:0 !important; border:0 !important; box-shadow:none !important; background:none !important; }
#musiveo-playlist-dialog .musiveo-playlist-row__link::after { display:none !important; }
#musiveo-playlist-dialog a:hover { border-color:transparent !important; box-shadow:none !important; }
#musiveo-playlist-dialog a:focus-visible { outline:2px solid #b58aff; outline-offset:3px; }
.musiveo-playlist-row__toggle.is-confirmed { animation:playlistConfirm 400ms ease-out; }
@keyframes playlistConfirm { 50% { transform:scale(1.18); background:#b58aff40; } }
.related-content { margin-top:2.5rem; }
.related-content h2 { font-size:1.3rem; margin-bottom:1rem; }
.related-content-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
@media(prefers-reduced-motion:reduce) { .musiveo-playlist-row__toggle.is-confirmed { animation:none; } }

/* Keep the identity row and navigation aligned at narrow widths. */
.user-header .entry-avatar { --profile-avatar-size:96px; width:var(--profile-avatar-size) !important; height:var(--profile-avatar-size) !important; min-width:var(--profile-avatar-size); aspect-ratio:1; align-self:flex-start; border-radius:50%; overflow:hidden; }
.user-header .entry-avatar a, .user-header .entry-avatar img { display:block !important; width:var(--profile-avatar-size) !important; height:var(--profile-avatar-size) !important; max-width:none !important; aspect-ratio:1; object-fit:cover; border-radius:50%; padding:0 !important; }
.user-navigation .profile-section-scroll > .nav { align-items:center !important; margin-block:0 !important; padding-block:0 !important; }
.user-navigation .profile-section-scroll .menu-item { display:flex; align-items:center; }
@media(max-width:782px) {
 .entry-header.user-header.header-user { display:grid !important; grid-template-columns:72px minmax(0,1fr); align-items:center; }
 .user-header .entry-avatar { --profile-avatar-size:72px; grid-column:1; grid-row:1; }
 .user-header .entry-header-inner { display:contents !important; }
 .user-header .entry-header-inner > * { grid-column:1 / -1; min-width:0; }
 .user-header .entry-header-inner > .user-display-name { grid-column:2; grid-row:1; align-self:center; margin:0 !important; }
}

button.btn-follow { color:var(--color-text, #f4f4f5) !important; }
button.btn-follow.active { background:#ffffff16 !important; color:#fff !important; }

.user-header .user-bio.entry-summary { margin:0 !important; padding:0 !important; min-height:0; }
@media(max-width:782px) { .user-header .entry-header-inner > .user-display-name { justify-self:start !important; } .user-header .entry-meta { margin-top:0 !important; } }

/*
 * The loop stylesheet sizes a card's follow button down to a 1.25rem inline
 * control (`.block-loop-item .btn-follow`), which is more specific than the
 * shared `.btn-follow` rule and therefore wins on a person card. The button
 * ended up shorter than the bell beside it and looked clipped, so the compact
 * card gets the same 40px control as everywhere else.
 */
.block-loop-short-item button.btn-follow { min-width:100px !important; min-height:40px !important; height:auto !important; padding:.55rem 1rem !important; font-size:14px !important; line-height:1.2 !important; }

/* Profile heading actions and neutral notification surfaces. */
.user-header .profile-heading-row { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem 1rem; min-width:0; max-width:100%; }
.user-header .profile-heading-row .user-display-name { margin:0 !important; min-width:0; }
.user-header .profile-primary-actions { display:flex; align-items:center; flex:0 0 auto; gap:.5rem; }
.user-header .profile-primary-actions .btn-play, .user-header .profile-primary-actions .btn-more { min-width:40px; min-height:40px; margin:0 !important; }
.user-header .profile-primary-actions .user-platforms-more { display:flex; align-items:center; margin:0 !important; }
#dropdown-notification .dropdown-menu-notificaitons, #dropdown-notification-list, .musiveo-notifications-slidein .musiveo-notifications-panel { background:#101010 !important; }
#dropdown-notification .view-all-notifications, .musiveo-notifications-head, .musiveo-notifications-foot { background:#101010 !important; }
#dropdown-notification .play-notification-item, .musiveo-notifications-body .play-notification-item { background:transparent !important; border-color:#ffffff14 !important; }
#dropdown-notification .play-notification-item:hover, .musiveo-notifications-body .play-notification-item:hover { background:#2c2c2c !important; }
#dropdown-notification .play-notification-item.unread, .musiveo-notifications-body .play-notification-item.unread { background:#303030 !important; }
@media(max-width:782px) {
 .user-header .entry-header-inner > .profile-heading-row { display:contents; }
 .user-header .profile-heading-row > .user-display-name { grid-column:2; grid-row:1; justify-self:start; align-self:center; display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; padding-inline-end:2.75rem; }
 .user-header .profile-primary-actions { grid-column:1 / -1; justify-self:start; }
}

/* Saving feedback stays above the player and below the site header. */
.profile-toast { position:fixed !important; top:calc(var(--navbar-height, 64px) + 1rem) !important; right:1rem !important; bottom:auto !important; left:auto !important; z-index:1600 !important; width:min(24rem,calc(100vw - 2rem)); max-width:calc(100vw - 2rem); transform:translateY(-8px); }
.profile-toast.show { transform:translateY(0) !important; }
.form-profile button[aria-busy=true] > svg { display:none !important; }
.form-profile .btn-spinner:not([hidden]) { display:inline-flex !important; align-items:center; }
.form-profile .btn-spinner[hidden] { display:none !important; }
.form-profile .btn-spinner svg { animation:profile-save-spin .85s linear infinite; }
@keyframes profile-save-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .form-profile .btn-spinner svg { animation:none; } }

/* Accessible image selection and preview controls. */
.form-profile .profile-image-dropzone { display:flex !important; align-items:center; justify-content:center; gap:.65rem; min-height:88px; width:100%; padding:1rem !important; border:1px dashed #ffffff42 !important; border-radius:.8rem !important; background:#ffffff04 !important; color:inherit !important; cursor:pointer; text-align:center; line-height:1.5; }
.form-profile .profile-image-dropzone:hover, .form-profile .profile-image-dropzone.is-dragover { background:#ffffff0c !important; border-color:#ffffff80 !important; }
.form-profile .profile-image-dropzone:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.form-profile .profile-image-file { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
.profile-background-preview-wrap { position:relative; }
.form-profile .profile-image-remove { position:absolute; top:.5rem; right:.5rem; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid #ffffff40; border-radius:50%; background:#171717e8; color:#fff; font-size:1.4rem; cursor:pointer; }
.form-profile .profile-image-remove[hidden] { display:none; }
.form-profile .form-avatar-controls { flex:1; min-width:0; }

/* Playlist counts belong to the title column, not the membership control. */
#musiveo-playlist-dialog .musiveo-playlist-row__details { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.25rem; }
#musiveo-playlist-dialog .musiveo-playlist-row__link { display:block; text-decoration:none !important; outline:none; }
#musiveo-playlist-dialog .musiveo-playlist-row__link:hover, #musiveo-playlist-dialog .musiveo-playlist-row__thumbnail:hover { border:0 !important; outline:none !important; box-shadow:none !important; }
#musiveo-playlist-dialog .musiveo-playlist-row__count { font-size:.8rem; color:#a5a5a5; font-weight:400; }
#musiveo-playlist-dialog .musiveo-playlist-row__toggle { flex:0 0 44px; width:44px; height:44px; min-width:44px; padding:0 !important; border:1px solid #ffffff30 !important; border-radius:50%; background:#ffffff08; transition:background .15s,transform .15s; }
#musiveo-playlist-dialog .musiveo-playlist-row__toggle:hover { background:#ffffff18; transform:scale(1.05); }
#musiveo-playlist-dialog .musiveo-playlist-row__toggle[aria-pressed=true] { background:#ffffff20; }
.musiveo-playlist-dialog__loading { display:flex; align-items:center; justify-content:center; gap:.75rem; min-height:120px; }
.playlist-loading-spinner { width:22px; height:22px; border:2px solid #ffffff30; border-top-color:#fff; border-radius:50%; animation:profile-save-spin .8s linear infinite; }
@media(prefers-reduced-motion:reduce) { .playlist-loading-spinner { animation:none; } #musiveo-playlist-dialog .musiveo-playlist-row__toggle { transition:none; transform:none; } }

/* The station header does NOT have a scrolled variant. It was one row of artwork,
 * title and controls at 88px once the page scrolled, and the static-metadata rules
 * below re-state the unscrolled geometry on `.scrolled` explicitly, so anything keyed
 * to `.scrolled` here wins the cascade and re-flows the header under the reader.
 * Only the values that survive a scroll transition belong in this file. */

/* Keep profile actions beside the name when the available row can hold them. */
.user-header .profile-heading-row > .user-display-name { flex:0 1 auto; width:auto !important; max-width:100%; overflow-wrap:anywhere; }
.user-header .profile-primary-actions { flex:0 1 auto; flex-wrap:wrap; max-width:100%; }
.user-header .profile-primary-actions .btn-follow { flex:0 0 auto; width:auto !important; min-height:40px; white-space:nowrap; margin:0 !important; }
.header-container > .account-menu-container { margin-inline-start:16px; }
.header-container .account-menu .menu-avatar::before { content:none !important; display:none !important; }
@media(min-width:600px) and (max-width:782px) {
 .user-header .entry-header-inner > .profile-heading-row { display:flex; grid-column:2; grid-row:1; align-self:center; }
 .user-header .profile-heading-row > .user-display-name { flex:0 1 auto; }
}

/* Header controls keep their geometry during focus and narrow layouts. */
.site-header #dropdown-notification::after, .site-header #dropdown-notification::before { content:none !important; display:none !important; }
.site-header .search-form :is(.search-submit,#icon-search,.search-toggle) { flex:0 0 40px !important; width:40px !important; min-width:40px !important; max-width:40px !important; height:40px !important; min-height:40px !important; padding:0 !important; aspect-ratio:1; border-radius:50% !important; }
@media(min-width:783px) {
 .site-header .search-form, .site-header .search-form:focus-within { flex:0 1 320px !important; width:min(320px,30vw) !important; min-width:0 !important; max-width:320px !important; height:44px !important; }
 .site-header .search-form .search-field, .site-header .search-form:focus-within .search-field { position:static !important; width:100% !important; min-width:0; height:40px !important; padding:0 !important; opacity:1 !important; pointer-events:auto !important; }
}
.form-profile .form-row-submit { display:flex; justify-content:flex-end; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid #ffffff16; }
.form-profile .form-row-submit button[type=submit] { min-width:170px; min-height:48px; padding:.75rem 1.25rem !important; border:1px solid #ffffff28 !important; border-radius:12px !important; background:#e9e9ee !important; color:#161619 !important; font-size:15px !important; font-weight:650; line-height:1.3; letter-spacing:0 !important; text-transform:none !important; box-shadow:0 2px 6px #0003; transition:background .15s,box-shadow .15s; }
.form-profile .form-row-submit button:hover { background:#c596ff !important; box-shadow:0 3px 10px #0005; outline:none; }
.form-profile .form-row-submit button:focus-visible { outline:2px solid #b8b8c4; outline-offset:4px; }
.form-profile .form-row-submit button:disabled { opacity:.7; cursor:wait; }
.form-profile .form-row-submit button svg { width:18px !important; height:18px !important; flex:0 0 18px; }
.user-follower-count { display:block; margin-top:.35rem; color:#a9a9b2; font-size:13px !important; font-weight:400; line-height:1.5; letter-spacing:0; }
.block-loop-item .entry-header, .block-loop-item .entry-header-inner { min-width:0 !important; }
/* Profile station grids size cards to the available content width, up to the saved column count. */
.user-page .wp-block-loop-station.block-loop-grid {
 --profile-card-min:15rem;
}
.user-page .wp-block-loop-station.block-loop-grid.block-loop-row {
 --profile-card-min:26rem;
}
.user-page .wp-block-loop-station.block-loop-grid > .block-loop-items {
 grid-template-columns:repeat(auto-fill,minmax(min(100%,max(var(--profile-card-min),calc((100% - (var(--loop-cols) - 1) * var(--loop-grid-gap)) / var(--loop-cols)))),1fr));
}
.user-collection-grid .block-loop-item { display:flex; align-items:stretch; }
.user-collection-grid .post-thumbnail { width:100% !important; margin:0 0 10px !important; aspect-ratio:1; }
.user-collection-grid .post-thumbnail-inner { display:block; width:100%; height:100%; }
.user-collection-grid .post-thumbnail img { width:100%; height:100%; object-fit:cover; }
.user-collection-grid .entry-header, .user-collection-grid .entry-header-inner { display:flex !important; flex-direction:column; align-items:stretch; min-width:0; gap:4px; padding:0; }
.user-collection-grid .entry-title { margin:0; font-size:15px; line-height:1.4; }
.user-collection-grid .entry-title > a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.user-collection-grid .entry-meta { margin:0; }
@media(max-width:782px) { .wp-block-loop.block-loop-grid.user-collection-grid > .block-loop-items { grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr)) !important; } }
.site-sidebar .nav li > a > svg, .site-sidebar .nav a > svg, #aside .nav li > a > svg, #aside .nav a > svg, .site-sidebar .menu-profile-menu-container a > svg, #aside .menu-profile-menu-container a > svg { width:1.25rem !important; height:1.25rem !important; max-width:1.25rem !important; }

.wp-block-loop.user-collection-grid figure.post-thumbnail { height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:1 !important; }

/* Keep metadata backgrounds bounded by their contents. */
.block-loop-row .block-loop-item .entry-meta,
.block-loop-row .block-loop-item .byline { width:fit-content !important; align-self:flex-start; }
#dropdown-more { position:fixed; z-index:var(--z-dropdown) !important; max-width:calc(100vw - 16px); overscroll-behavior:contain; border-radius:12px; }
.user-display-name-link:focus:not(:focus-visible),
.block-loop-item a:focus:not(:focus-visible) { outline:none; }
.user-display-name-link:focus-visible,
.block-loop-item a:focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:4px; }
@media (max-width:782px) {
 .site-header .header-container { position:relative; flex-wrap:nowrap !important; align-items:center !important; }
 .header-container > .account-menu-container { margin-inline-start:8px; }
 .header-container > .site-navbar:empty { display:none; }
 body:has(#search-state:checked) .site-header .header-container > .search-form,
 #search-state:checked ~ .site-header .header-container > .search-form {
  top:50%; bottom:auto; left:12px; right:12px; transform:translateY(-50%) !important; overflow:visible;
  width:calc(100% - 24px) !important; min-width:0 !important;
  height:48px !important; min-height:48px; border-radius:12px;
  box-shadow:0 8px 24px #0008;
 }
}

/* Right-hand header cluster (soundwave, upload, bell, avatar): one 40px slot each with an even 4px gap; the bell sits next to the avatar. */
@media (min-width:783px) {
 html body .header-container > .site-navbar .nav, html body .header-container > .nav-notifications, html body .header-container .account-menu { padding-inline:0 !important; gap:4px !important; }
 html body .header-container > .site-navbar, html body .header-container > .nav-notifications { margin-inline-end:4px !important; }
 html body .header-container > .account-menu-container { margin-inline-start:0 !important; }
 html body .header-container > .nav-notifications > li { display:flex; align-items:center; justify-content:center; width:40px; height:40px; }
 html body .header-container > .nav-notifications > li > button { width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
 html body .header-container .account-menu > .menu-avatar { width:40px; }
 html body .header-container .account-menu > .menu-avatar > a { width:40px !important; height:40px !important; padding:0 !important; justify-content:center; align-items:center; }
 html body .header-container .account-menu > .menu-avatar > a::after { display:none !important; }
}

/* The header avatar stands alone at every width: the display name is hidden (the link keeps its "Account menu" label). */
.site-header .menu-avatar > a > .user-display-name { display:none !important; }
body.dropdown-open > .dropdown-backdrop { position:fixed; z-index:calc(var(--z-dropdown) - 1) !important; }
@media (max-width:782px) {
 .header-container .account-menu:has(> .menu-avatar) > li:not(.menu-avatar) { display:none !important; }
 .header-container .account-menu > .menu-avatar { flex:0 0 44px; width:44px; }
 .header-container .account-menu > .menu-avatar > a { width:44px !important; height:44px !important; padding:0 !important; justify-content:center; }
}

/* Compact profile and collection menu controls. */
.user-platforms-dropdown button.dropdown-item {width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:.65rem .8rem;cursor:pointer}
.playlist-row-more {position:relative;flex-shrink:0}
.playlist-row-more summary {display:flex;align-items:center;justify-content:center;list-style:none;width:34px;height:34px;border-radius:50%;background:#29292d;color:#eee;cursor:pointer;font-size:22px}
.playlist-row-more summary::-webkit-details-marker {display:none}
.playlist-row-more__menu {position:absolute;right:0;bottom:100%;z-index:2;width:150px;padding:5px;border-radius:10px;background:#252529;box-shadow:0 8px 28px #0008}
.playlist-row-more__menu a,.playlist-row-more__menu button {display:block;width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:8px;border-radius:6px;text-decoration:none;font:inherit;cursor:pointer}
.playlist-row-more__menu a:hover,.playlist-row-more__menu button:hover {background:#38383d}

/* Compact social controls and search results. */
button.btn-follow { background:#fff !important; color:#292929 !important; border-color:#fff !important; }
button.btn-follow.active { background:transparent !important; color:var(--color-text,#f4f4f5) !important; border-color:#ffffff40 !important; }
.musiveo-unfollow-dialog { box-sizing:border-box; width:min(420px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid #ffffff24; border-radius:18px; background:#242424; color:#f4f4f5; box-shadow:0 24px 80px #0009; }
.musiveo-unfollow-dialog::backdrop { background:#0009; }
.musiveo-unfollow-dialog h3 { margin:0 0 12px; font-size:1.2rem; }
.musiveo-unfollow-dialog p { margin:0 0 22px; color:#c8c8cc; line-height:1.5; }
.musiveo-unfollow-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.musiveo-unfollow-actions button { padding:10px 16px; border:1px solid #ffffff30; border-radius:999px; color:#fff; background:transparent; }
.musiveo-unfollow-actions [data-unfollow-confirm] { background:#fff !important; color:#292929 !important; border-color:#fff !important; }
.musiveo-share-dialog__network { display:inline-flex; align-items:center; gap:8px; }
.musiveo-share-dialog__network svg { width:20px; height:20px; flex:0 0 20px; }
.musiveo-search-results .page-header { padding:16px 0; margin-bottom:12px; }
.musiveo-search-results .page-title { font-size:clamp(1.2rem,3vw,1.75rem); margin:0 0 14px; overflow-wrap:anywhere; }
.musiveo-search-results .page-header .search-form { display:flex; gap:8px; max-width:620px; }
.musiveo-search-results .page-header .search-field { min-width:0; flex:1; padding:10px 14px; border-radius:12px; }
.musiveo-search-results .post-list { display:grid; gap:12px; }
.musiveo-search-results .post-list > article { display:grid; grid-template-columns:88px minmax(0,1fr); column-gap:14px; padding:12px; margin:0 !important; border:1px solid #ffffff18; border-radius:14px; background:#ffffff04; }
.musiveo-search-results .post-list > article > .post-thumbnail { grid-column:1; grid-row:1 / span 3; width:88px; height:88px; margin:0; overflow:hidden; border-radius:10px; }
.musiveo-search-results .post-list .post-thumbnail img { width:100%; height:100%; object-fit:cover; }
.musiveo-search-results .post-list > article > .entry-header,.musiveo-search-results .post-list > article > .entry-summary,.musiveo-search-results .post-list > article > .entry-footer { grid-column:2; min-width:0; padding:0; margin:0; }
.musiveo-search-results .post-list .entry-title { font-size:1rem; margin:0 0 4px; line-height:1.3; overflow-wrap:anywhere; }
.musiveo-search-results .post-list .entry-summary { font-size:.85rem; opacity:.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.musiveo-search-results .post-list .entry-summary p { margin:4px 0; }
.musiveo-search-results .post-list .entry-footer,.musiveo-search-results .post-list .entry-meta { font-size:.75rem; }
@media(max-width:480px) { .musiveo-search-results .post-list > article { grid-template-columns:64px minmax(0,1fr); gap:10px; padding:10px; } .musiveo-search-results .post-list > article > .post-thumbnail { width:64px; height:64px; } }

.musiveo-search-results .post-list { grid-template-columns:minmax(0,1fr) !important; }
.musiveo-search-results .post-list > article { align-items:start; }
.musiveo-search-results .post-list > article > .entry-header { display:block !important; text-align:left !important; min-height:0 !important; }
.musiveo-search-results .post-list .entry-header .posted-on,.musiveo-search-results .post-list .entry-header .byline { display:inline-flex; align-items:center; margin:0 10px 0 0 !important; gap:6px; font-size:.75rem; opacity:.75; }
.musiveo-search-results .post-list .byline .author { display:inline-flex; align-items:center; gap:6px; }
.musiveo-search-results .post-list .byline img.avatar { display:inline-block; width:18px !important; height:18px !important; border-radius:50%; margin:0 !important; }
.musiveo-search-results .post-list > article:not(:has(> .post-thumbnail)) { grid-template-columns:minmax(0,1fr); }
.musiveo-search-results .post-list > article:not(:has(> .post-thumbnail)) > .entry-header,.musiveo-search-results .post-list > article:not(:has(> .post-thumbnail)) > .entry-summary,.musiveo-search-results .post-list > article:not(:has(> .post-thumbnail)) > .entry-footer { grid-column:1; }

.musiveo-search-results .page-header { padding:16px 0 !important; margin:0 0 12px !important; }
.musiveo-search-results .page-header .search-form { width:100%; margin:0; }
.musiveo-search-results .post-list .entry-title { padding:0 !important; min-height:0 !important; height:auto !important; margin:0 0 5px !important; font-size:1rem !important; line-height:1.3 !important; }
.musiveo-search-results .post-list > article > .entry-summary { padding:0 !important; margin:3px 0 0 !important; line-height:1.4 !important; }
.musiveo-search-results .entry-summary p { padding:0 !important; margin:0 !important; }

.musiveo-results-search { width:100%; max-width:960px; margin:0; }
.musiveo-results-search-row { display:flex; align-items:stretch; gap:8px; }
.musiveo-results-search-row input[type=search] { flex:1; min-width:0; width:auto; height:44px; padding:10px 14px; font-size:1rem; }
.musiveo-results-search-row button { flex:0 0 auto; padding:10px 18px; border:0; border-radius:12px; background:#fff; color:#292929; font-weight:600; }
.musiveo-search-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.musiveo-search-filters label { display:flex; flex-direction:column; gap:5px; min-width:0; font-size:.8rem; }
.musiveo-search-filters select { width:100%; min-width:0; min-height:40px; font-size:.85rem; }
.musiveo-search-filter-note { margin:10px 0 0 !important; padding:0 !important; font-size:.75rem; opacity:.75; line-height:1.5; }
.musiveo-search-filter-note a { margin-left:8px; text-decoration:underline; }
@media(max-width:640px) { .musiveo-search-filters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .musiveo-results-search-row button { padding:10px 14px; } }

.musiveo-results-search .musiveo-results-search-row input[type=search] { width:0 !important; min-width:0 !important; flex:1 1 0 !important; margin:0 !important; }
.musiveo-results-search .musiveo-results-search-row button[type=submit] { width:auto !important; min-width:0 !important; flex:0 0 auto !important; height:44px; margin:0 !important; padding:10px 16px !important; background:#fff !important; background-image:none !important; color:#292929 !important; border-radius:12px !important; font-size:.85rem !important; }
.musiveo-results-search .musiveo-search-filters label,.musiveo-results-search .musiveo-search-filters select { margin:0 !important; }

@media(max-width:960px) { .plyr-playlist .plyr__volume input { display:none; } .plyr-playlist .plyr__volume:focus-within input { display:block; position:absolute; right:12px; bottom:calc(100% + 12px); width:110px; padding:10px; background:#242428; border-radius:12px; } }
.plyr-playlist .plyr-control-info, .plyr-playlist .plyr-control-info-content { min-width:0; }
.plyr-playlist .plyr__content { min-width:0; overflow:hidden; }
.plyr-playlist .plyr-control-info .btn-like { flex:0 0 auto; }

.wp-block-loop .block-loop-hero .entry-header { box-sizing:border-box; flex-direction:row !important; width:100% !important; max-width:none !important; }
.wp-block-loop .block-loop-hero .entry-header-inner { width:auto !important; max-width:none !important; }
.hero-artwork-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#ffffff80; background:radial-gradient(ellipse at 25% 20%,#514665,#1b1b24 70%); }
/*
 * THE SIDEBAR PAGE, IN THE NAVIGATION COLUMN.
 *
 * `page_sidebar` renders here now, beside the sidebar's top and bottom pages,
 * between the menu and the spacer that pushes the bottom page down. It is given
 * the same inset as its two siblings so the three read as one column rather than
 * as a page that happened to be dropped in.
 *
 * `:empty` matters: an assigned page whose content is only a spacer still produces
 * the element, and without this it would draw a gap in the column.
 */
.site-sidebar .site-sidebar-page:not(:empty) {
  margin: 1rem var(--side-menu-gap, 1rem);
  font-size: 0.875rem;
}
.site-sidebar .site-sidebar-page a {
  color: inherit;
}

.hero-artwork-placeholder svg { width:72px; height:72px; }

.plyr-playlist .plyr-control-info-content { display:flex; align-items:center; flex:1; min-width:0; overflow:hidden; }
.plyr-playlist .plyr-control-info-content > .plyr__content { flex:1 1 0; width:auto !important; min-width:0; }
.plyr-playlist .plyr-control-info-content > .btn-like { flex:0 0 var(--player-control-size); margin-left:8px; }
.plyr-playlist .plyr__title { display:block; max-width:100%; overflow:hidden; white-space:nowrap; }
/* Fullscreen geometry belongs to the fullscreen root, not the docked preview. */
.plyr-playlist .plyr-fullscreen, .plyr-playlist .plyr:fullscreen { width:100vw !important; height:100dvh !important; max-width:none !important; max-height:none !important; }
.plyr-playlist .plyr-fullscreen .plyr__video-wrapper { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; aspect-ratio:auto !important; padding:0 !important; transform:none !important; }
.plyr-playlist .plyr-fullscreen .plyr__video-wrapper :is(video,iframe) { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:contain; }
.plyr-playlist .plyr-fullscreen .plyr__controls { background:#18181b80 !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid #ffffff18; transition:opacity .2s ease; }
.plyr-playlist .plyr-fullscreen.plyr--playing.plyr--hide-controls:not(:has(.plyr__controls :focus-visible)) .plyr__controls { opacity:0 !important; pointer-events:none; }
.plyr-playlist .plyr-fullscreen:has(.plyr__controls :focus-visible) .plyr__controls { opacity:1; pointer-events:auto; }

.wp-block-loop .block-loop-hero .entry-header { flex-direction:column !important; min-height:118px; }
.wp-block-loop .block-loop-hero .entry-header-inner { flex:none; width:100% !important; }

.plyr-playlist.player .plyr .plyr__controls .plyr-control-ctrl .plyr__volume { display:flex !important; }

.wp-block-loop .block-loop-hero .entry-header-inner { align-items:stretch !important; }
.wp-block-loop .block-loop-hero .entry-title { width:100% !important; max-width:none !important; }

/* Queue controls operate on the current session order. */
.plyr-item .plyr-queue-order { display:flex; align-items:center; flex:0 0 auto; gap:2px; }
.plyr-queue-order button { display:flex; align-items:center; justify-content:center; width:30px; height:34px; padding:0; border:0; border-radius:8px; background:transparent; color:#c7c7ce; font-size:17px; }
.plyr-queue-order button:hover { background:#ffffff12; color:#fff; }
.plyr-queue-order button:focus-visible { outline:2px solid var(--color-primary,#b58aff); outline-offset:1px; }
.plyr-queue-drag { cursor:grab; touch-action:none; }
.plyr-item.is-reordering { background:#ffffff14; outline:1px solid #ffffff40; }
.plyr-item.is-reordering .plyr-queue-drag { cursor:grabbing; }
@media(max-width:480px) { .plyr-item .plyr-queue-order { gap:0; } .plyr-queue-order button { width:28px; } }

/* Shared surface values also support the expanded playback view. */
:root { --surface-glass-bg:rgb(0 0 0 / 30%); --surface-glass-blur:10px; --surface-glass-border:1px solid rgba(23,23,23,.24); --surface-glass-shadow:0 0 50px 15px rgba(0,0,0,.5); }
html body #header.site-header { background:transparent !important; border-bottom-color:transparent; box-shadow:none !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
html body.scrolled #header.site-header { background:rgba(0,0,0,.85) !important; }
html body .site-sidebar, html body #aside.site-sidebar { background:#000 !important; border:1px solid #141414; }
html body .plyr-playlist.player.fixed-bottom, html body .plyr-playlist.player.fixed-bottom > .plyr:not(.plyr-fullscreen) { background:transparent !important; }
html body .plyr-playlist.player.fixed-bottom > .plyr:not(.plyr-fullscreen) > .plyr__controls { background:var(--surface-glass-bg) !important; backdrop-filter:blur(var(--surface-glass-blur)); -webkit-backdrop-filter:blur(var(--surface-glass-blur)); border:var(--surface-glass-border); border-radius:1rem; box-shadow:var(--surface-glass-shadow); box-sizing:border-box; }
@media(min-width:783px) { html body .plyr-playlist.player.fixed-bottom { margin:0 .5rem !important; width:auto !important; left:0 !important; right:0 !important; } }
@media(max-width:782px) { html body .header-container > .site-brand { max-width:100px !important; } html body .plyr-playlist.player.fixed-bottom { margin-inline:0 !important; } }
#dropdown-more { overflow-x:hidden !important; }
#dropdown-more > li, #dropdown-more .dropdown-item { min-width:0; max-width:100%; box-sizing:border-box; }
#dropdown-more .dropdown-item { display:flex; align-items:center; gap:10px; white-space:normal; overflow-wrap:anywhere; }
#dropdown-more .dropdown-item::before { content:''; display:block; width:18px; height:18px; flex:0 0 18px; background:currentColor; mask:var(--action-icon) center / contain no-repeat; -webkit-mask:var(--action-icon) center / contain no-repeat; }
#dropdown-more .btn-play-now { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E"); }
#dropdown-more .btn-next-play { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4v16l11-8z M18 4h3v16h-3z'/%3E%3C/svg%3E"); }
#dropdown-more .btn-queue { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 11.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m0-4A.5.5 0 0 1 .5 7H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m0-4A.5.5 0 0 1 .5 3H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5'/%3E%3Cpath d='M12 5a.5.5 0 0 1 .5.5v2h2a.5.5 0 0 1 0 1h-2v2a.5.5 0 0 1-1 0v-2h-2a.5.5 0 0 1 0-1h2v-2A.5.5 0 0 1 12 5'/%3E%3C/svg%3E"); }
#dropdown-more .btn-playlist { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v2H3z M3 9h18v2H3z M3 14h9v2H3z M16 13v9l7-4.5z'/%3E%3C/svg%3E"); }
#dropdown-more .btn-share { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 2l7 6-7 6v-4C8 10 5 13 3 20 3 11 7 6 15 6z'/%3E%3C/svg%3E"); }
#dropdown-more .btn-edit { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17l12-12 4 4L7 21H3z M16 4l2-2 4 4-2 2z'/%3E%3C/svg%3E"); }
#dropdown-more .btn-remove { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6h14l-1 16H6z M3 3h7V1h4v2h7v2H3z'/%3E%3C/svg%3E"); }

/* Text moves inside its clipping area without duplicating links or moving controls. */
.plyr-playlist:not(.plyr-theme-video) :is(.plyr__title,.plyr__author) { container-type:inline-size; width:100%; max-width:100%; overflow:hidden !important; transform:none !important; animation:none !important; }
.plyr-playlist .plyr-marquee-track { display:inline-block; width:max-content; max-width:none; white-space:nowrap; vertical-align:top; transform:none; }
@supports(width:1cqw) {
 .plyr-playlist:not(.plyr-theme-video) .plyr-marquee-track { animation:player-text-intro 8s linear 1; }
 .plyr-playlist:not(.plyr-theme-video) :is(.plyr__title,.plyr__author):is(:hover,:focus-within) .plyr-marquee-track { animation:player-text-hover 8s linear infinite; }
}
@keyframes player-text-intro { 0%,15%,100% { transform:translateX(0); } 70%,85% { transform:translateX(min(0px,calc(100cqw - 100%))); } }
@keyframes player-text-hover { 0%,15%,100% { transform:translateX(0); } 70%,85% { transform:translateX(min(0px,calc(100cqw - 100%))); } }
@media(prefers-reduced-motion:reduce) { .plyr-playlist:not(.plyr-theme-video) .plyr-marquee-track, .plyr-playlist:not(.plyr-theme-video) :is(.plyr__title,.plyr__author):is(:hover,:focus-within) .plyr-marquee-track { animation:none !important; transform:none !important; } }
.plyr-playlist .plyr__cover:focus-visible { outline:2px solid var(--color-primary,#b58aff); outline-offset:2px; }



/* Keep source settings available in the compact transport. */
.plyr-playlist .plyr .plyr__controls .plyr-control-ctrl .plyr__menu { display:block !important; flex:0 0 auto; }

/* Expanded presentation uses the existing media and transport. */
.plyr-playlist .now-playing-close { display:none; }
body > #plyr-playlist.now-playing { position:fixed !important; inset:0 !important; width:100% !important; height:100dvh !important; max-height:none !important; margin:0 !important; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow:hidden !important; background:#111 !important; isolation:isolate; border:0; border-radius:0; }
#plyr-playlist.now-playing::before { content:''; position:absolute; inset:-60px; background-image:var(--now-playing-art); background-size:cover; background-position:center; filter:blur(44px) saturate(1.3); opacity:.5; pointer-events:none; z-index:-2; }
#plyr-playlist.now-playing::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#1115,#111e); pointer-events:none; z-index:-1; }
#plyr-playlist.now-playing > .plyr { display:flex !important; align-items:center; justify-content:center; position:relative; width:100% !important; height:100% !important; min-height:0; max-height:none; background:transparent !important; overflow:visible !important; }
#plyr-playlist.now-playing .plyr__controls { position:relative !important; inset:auto !important; display:flex !important; flex-direction:column !important; align-items:stretch; gap:24px; width:min(560px,calc(100% - 40px)) !important; max-height:calc(100dvh - 112px); overflow:visible; padding:24px !important; box-sizing:border-box; background:var(--surface-glass-bg) !important; backdrop-filter:blur(var(--surface-glass-blur)); -webkit-backdrop-filter:blur(var(--surface-glass-blur)); border:var(--surface-glass-border); box-shadow:var(--surface-glass-shadow); border-radius:24px; transform:none !important; opacity:1 !important; }
#plyr-playlist.now-playing .plyr-control-info { order:0 !important; display:flex !important; flex-direction:column; align-items:center; gap:22px; width:100% !important; flex:none !important; min-width:0; }
#plyr-playlist.now-playing .plyr__cover { display:block !important; width:clamp(140px,29vh,300px) !important; height:clamp(140px,29vh,300px) !important; min-width:0 !important; flex:none !important; margin:0 !important; border-radius:18px; background-size:cover; background-position:center; box-shadow:0 16px 40px #0006; }
#plyr-playlist.now-playing .plyr-control-info-content { width:100% !important; min-width:0; }
#plyr-playlist.now-playing .plyr__title { font-size:clamp(18px,2.2vw,26px); line-height:1.5; }
#plyr-playlist.now-playing .plyr__author { font-size:14px; opacity:.75; }
#plyr-playlist.now-playing .plyr-control-btns { order:1 !important; width:100% !important; flex:none !important; justify-content:center; gap:10px; }
#plyr-playlist.now-playing .plyr-control-prog { position:relative !important; inset:auto !important; width:100% !important; }
#plyr-playlist.now-playing .plyr-control-ctrl { order:2 !important; width:100% !important; flex:none !important; justify-content:center; flex-wrap:wrap; gap:8px; }
#plyr-playlist.now-playing .plyr-control-btns [data-plyr=play] { width:var(--player-control-size) !important; height:var(--player-control-size) !important; border-radius:50%; background:#fff !important; color:#18181b !important; }
#plyr-playlist.now-playing .now-playing-close { display:flex; align-items:center; gap:10px; top:max(16px,env(safe-area-inset-top)); left:max(20px,env(safe-area-inset-left)); border:0; background:transparent; color:#fff; padding:8px; z-index:4; font-size:14px; }
#plyr-playlist.now-playing .now-playing-close > span:first-child { font-size:28px; line-height:24px; }
#plyr-playlist.now-playing .plyr__video-wrapper { top:70px !important; bottom:auto !important; right:20px !important; left:auto !important; width:min(22vw,220px) !important; height:auto !important; aspect-ratio:16/9 !important; padding:0 !important; border-radius:12px; overflow:hidden; z-index:3; }
#plyr-playlist.now-playing .plyr__video-wrapper :is(video,iframe) { width:100% !important; height:100% !important; object-fit:contain; }
#plyr-playlist.now-playing .plyr-list { position:fixed !important; top:70px !important; bottom:20px !important; right:20px !important; left:auto !important; width:min(480px,calc(100vw - 40px)) !important; height:auto !important; max-height:calc(100dvh - 90px) !important; background:#202024f5 !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:5; }
@media(max-width:600px) { #plyr-playlist.now-playing .plyr__controls { gap:18px; padding:20px !important; } #plyr-playlist.now-playing .plyr-control-ctrl { gap:4px; } #plyr-playlist.now-playing .plyr__video-wrapper { width:120px !important; top:64px !important; right:14px !important; } }
@media(max-height:600px) { #plyr-playlist.now-playing .plyr__controls { gap:10px; padding:14px !important; } #plyr-playlist.now-playing .plyr__cover { width:100px !important; height:100px !important; } #plyr-playlist.now-playing .plyr-control-info { gap:8px; } }
@media(prefers-reduced-motion:no-preference) { #plyr-playlist.now-playing .plyr__controls { animation:now-playing-enter .25s ease-out; } @keyframes now-playing-enter { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } } }

#plyr-playlist.now-playing .plyr__video-wrapper { min-height:0 !important; max-height:none !important; }
body:has(> #plyr-playlist.now-playing) > :not(#plyr-playlist) { pointer-events:none; }

html:has(#plyr-playlist.now-playing), body:has(> #plyr-playlist.now-playing) { overflow:hidden !important; }
body:has(> #plyr-playlist.now-playing) :is(#header,#aside,#mobile-menu,.site-sidebar,.slidein-sidebar) { visibility:hidden !important; }
#plyr-playlist.now-playing .plyr-control-btns [data-plyr] { display:inline-flex !important; }
#plyr-playlist.now-playing .plyr-control-info-content > .btn-like { display:inline-flex !important; }
@media(max-height:480px) { #plyr-playlist.now-playing .plyr__controls { flex-direction:row !important; flex-wrap:wrap; width:min(720px,calc(100% - 40px)) !important; gap:10px; } #plyr-playlist.now-playing .plyr-control-info { flex-direction:row; width:100% !important; } #plyr-playlist.now-playing .plyr__cover { width:80px !important; height:80px !important; } #plyr-playlist.now-playing .plyr__video-wrapper { width:110px !important; top:18px !important; } }

/* Square icon controls share sizing across player presentations. */
#plyr-playlist { --player-control-size:44px; }
#plyr-playlist .plyr__controls :is(.plyr-control-btns > button,.plyr-control-ctrl > button,.plyr__volume > button,.plyr-control-ctrl > .plyr__menu > button,.plyr-control-info > button,.plyr-control-info-content > .btn-like,.player-more > summary) { width:var(--player-control-size) !important; min-width:var(--player-control-size) !important; max-width:var(--player-control-size) !important; height:var(--player-control-size) !important; min-height:var(--player-control-size) !important; padding:10px !important; box-sizing:border-box; flex-shrink:0; align-items:center; justify-content:center; border:1px solid #ffffff14 !important; border-radius:12px !important; background:#0b0b0b61 !important; transition:background-color .15s,border-color .15s,color .15s; }
#plyr-playlist .plyr__controls :is(.plyr-control-btns > button,.plyr-control-ctrl > button,.plyr__volume > button,.plyr-control-ctrl > .plyr__menu > button,.plyr-control-info > button,.plyr-control-info-content > .btn-like,.player-more > summary):focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media(hover:hover) and (pointer:fine) { #plyr-playlist .plyr__controls :is(.plyr-control-btns > button,.plyr-control-ctrl > button,.plyr__volume > button,.plyr-control-ctrl > .plyr__menu > button,.plyr-control-info > button,.plyr-control-info-content > .btn-like,.player-more > summary):where(:hover) { background:#ffffff16 !important; border-color:#ffffff30 !important; } }
#plyr-playlist .plyr__controls .plyr-control-btns > button[data-plyr="play"] { background:#fff !important; color:#171717 !important; border-color:transparent !important; border-radius:50% !important; }
@media(prefers-reduced-motion:reduce) { #plyr-playlist .plyr__controls :is(.plyr-control-btns > button,.plyr-control-ctrl > button,.plyr__volume > button,.plyr-control-ctrl > .plyr__menu > button,.plyr-control-info > button,.plyr-control-info-content > .btn-like,.player-more > summary) { transition:none; } }

@media(min-width:1101px) { #plyr-playlist:not(.now-playing) .plyr-control-btns, #plyr-playlist:not(.now-playing) .plyr-control-ctrl { column-gap:6px; } }

/* Consistent transport symbols and compact rows. */
#plyr-playlist .plyr__controls :is([data-plyr="shuffle"],[data-plyr="repeat"]) { --player-symbol-size:18px; }
#plyr-playlist .plyr__controls button > svg, #plyr-playlist .plyr__controls a.plyr__control > svg { width:var(--player-symbol-size,22px) !important; height:var(--player-symbol-size,22px) !important; min-width:var(--player-symbol-size,22px); max-width:var(--player-symbol-size,22px); flex:0 0 var(--player-symbol-size,22px); }
#plyr-playlist.now-playing .now-playing-close { position:absolute; top:auto !important; left:50% !important; bottom:max(16px,env(safe-area-inset-bottom)) !important; transform:translateX(-50%); z-index:2002; padding:10px 20px; border-radius:999px; border:1px solid #ffffff26; background:#ffffff0c; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); gap:8px; min-height:44px; }
#plyr-playlist.now-playing .now-playing-close svg { width:22px; height:22px; }
#plyr-playlist.now-playing .plyr__time { display:flex !important; align-items:center; height:28px; line-height:28px; margin-block:0; padding-block:0; flex:0 0 auto; font-size:11px; white-space:nowrap; }
#plyr-playlist.now-playing .plyr-control-prog { min-height:28px !important; height:auto !important; display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; align-items:end; gap:8px; }
#plyr-playlist.now-playing .plyr__progress__container { position:relative !important; inset:auto !important; flex:1 1 auto; min-width:0; }
#plyr-playlist .plyr__waveform { display:none !important; }
#plyr-playlist.now-playing .plyr__waveform { display:block !important; position:relative; grid-area:1/1; width:100%; height:32px; margin:16px 0 0; }
#plyr-playlist.now-playing .plyr__progress { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:28px; align-items:center; }
#plyr-playlist.now-playing .plyr__progress:has(.plyr__waveform) { height:auto; grid-template-rows:auto 28px; row-gap:2px; }
#plyr-playlist.now-playing .plyr__progress > :is(input[type="range"],.plyr__progress__buffer) { grid-column:1; grid-row:-2/-1; align-self:center; margin-block:0!important; }
#plyr-playlist.now-playing .plyr__progress > input[type="range"] { height:28px!important; min-height:0!important; padding-block:0!important; }
#plyr-playlist.now-playing .plyr__progress__buffer { position:relative!important; inset:auto!important; }
#plyr-playlist.now-playing .waveform-container, #plyr-playlist.now-playing .waveform_wrap { width:100%; height:32px!important; min-height:0!important; margin:0!important; padding:0!important; }
#plyr-playlist.now-playing .waveform_wrap > svg { display:block; height:32px!important; }
/* Track, transport/timeline and utility rows retain available controls. */
:root { --player-glass-bg:color-mix(in srgb,var(--musiveo-dark-bg,#000) 78%,transparent); }
@supports not (color: color-mix(in srgb,red,blue)) { :root { --player-glass-bg:rgba(0,0,0,.78); } }
html body .plyr-playlist.player.fixed-bottom > .plyr:not(.plyr-fullscreen) > .plyr__controls { background:var(--player-glass-bg) !important; }
.plyr-playlist .plyr-fullscreen .plyr__controls { background:var(--player-glass-bg) !important; backdrop-filter:blur(var(--surface-glass-blur)); -webkit-backdrop-filter:blur(var(--surface-glass-blur)); border:var(--surface-glass-border); border-radius:1rem; box-shadow:var(--surface-glass-shadow); }
#plyr-playlist .plyr-fullscreen [data-now-playing], #plyr-playlist .plyr-fullscreen [data-plyr="video"] { display:none !important; }
#plyr-playlist .plyr__time { display:block !important; flex:0 0 auto; font-size:11px; white-space:nowrap; }
#plyr-playlist [data-now-playing]:focus-visible .plyr__tooltip { opacity:1; transform:translate(-50%,0); }
@media(hover:hover) and (pointer:fine) { #plyr-playlist [data-now-playing]:hover .plyr__tooltip { opacity:1; transform:translate(-50%,0); } }
@media(max-width:782px) {
 :root { --plyr-height:196px; }
 #plyr-playlist.player.fixed-bottom:not(.now-playing) { height:196px !important; }
 #plyr-playlist:not(.now-playing) > .plyr > .plyr__controls { display:grid !important; grid-template-columns:minmax(0,1fr); grid-template-rows:40px 64px 64px; gap:6px; padding:8px 12px !important; height:196px !important; box-sizing:border-box; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-info { display:flex !important; grid-area:1/1; width:100% !important; min-width:0; align-self:center; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-info-content { min-width:0; flex:1; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-info-content > .btn-like { display:inline-flex !important; flex:0 0 var(--player-control-size); }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-btns { grid-area:2/1; position:relative; width:100% !important; margin:0; height:64px; display:flex !important; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-btns > button, #plyr-playlist:not(.now-playing) .plyr .plyr-control-ctrl > button, #plyr-playlist:not(.now-playing) .plyr .plyr-control-ctrl > .plyr__menu > button { box-sizing:border-box; min-width:var(--player-control-size) !important; min-height:var(--player-control-size) !important; height:var(--player-control-size) !important; padding:3px !important; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-btns > button { display:inline-flex !important; height:var(--player-control-size) !important; padding:7px !important; justify-content:center; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-btns > [data-plyr="play"] { border-radius:50%; background:#fff !important; color:#171717 !important; width:var(--player-control-size) !important; flex-basis:var(--player-control-size); }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-btns > .plyr-control-prog { position:relative !important; inset:auto !important; order:1; width:100% !important; min-height:24px !important; display:flex !important; align-items:center; gap:8px; }
 #plyr-playlist:not(.now-playing) .plyr .plyr__progress__container { position:relative !important; inset:auto !important; flex:1 1 auto; width:auto !important; min-width:0; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-ctrl { grid-area:3/1; width:100%; height:64px; display:flex !important; justify-content:center; align-content:center; align-items:center; flex-wrap:wrap; gap:0; min-width:0; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-ctrl > :is(button,.plyr__menu,.player-more) { flex:0 0 28px !important; width:28px !important; margin:0 !important; height:32px; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-ctrl > .plyr__volume { display:flex !important; flex:0 0 84px !important; width:84px !important; margin:0 !important; height:32px; gap:4px; }
 #plyr-playlist:not(.now-playing) .plyr .plyr__volume input { display:block !important; position:relative !important; inset:auto !important; transform:none !important; opacity:1 !important; height:16px !important; width:52px !important; min-width:0; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-ctrl :is(.btn-save,.btn-comment,.btn-share,.btn-collapse) { display:inline-flex !important; }
 #plyr-playlist:not(.now-playing) .plyr__cover { width:40px !important; height:40px !important; flex:0 0 40px; }
 #plyr-playlist.now-playing .plyr__controls { max-height:calc(100dvh - 144px); }
}



#plyr-playlist .player-more { position:relative; display:block; flex:0 0 auto; }
#plyr-playlist .player-more > summary { position:relative; display:flex; align-items:center; justify-content:center; width:var(--player-control-size); height:var(--player-control-size); padding:4px; box-sizing:border-box; list-style:none; cursor:pointer; border-radius:8px; }
#plyr-playlist .player-more > summary::-webkit-details-marker { display:none; }
#plyr-playlist .player-more > summary > svg { width:22px; height:22px; fill:currentColor; }
#plyr-playlist .player-more > summary:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
#plyr-playlist .player-more > summary:focus-visible .plyr__tooltip { opacity:1; transform:translate(-50%,0); }
@media(hover:hover) and (pointer:fine) { #plyr-playlist .player-more > summary:hover .plyr__tooltip { opacity:1; transform:translate(-50%,0); } }
#plyr-playlist .player-more-panel { position:absolute; bottom:calc(100% + 8px); right:0; width:210px; max-width:calc(100vw - 24px); max-height:min(300px,calc(100dvh - 80px)); overflow:auto; padding:6px; box-sizing:border-box; background:#202024f5; border:1px solid #ffffff18; border-radius:12px; box-shadow:0 12px 36px #0008; z-index:2003; }
#plyr-playlist .player-more-panel > :is(button,a) { display:flex !important; align-items:center; gap:10px; width:100% !important; max-width:none !important; min-height:40px !important; height:auto !important; padding:8px 10px !important; margin:0 !important; border-radius:6px; text-align:left; }
#plyr-playlist .player-more-panel .plyr__tooltip { display:none; }
#plyr-playlist .player-more-label { font-size:12px; line-height:1.4; white-space:normal; }
@media(max-width:782px) { #plyr-playlist .player-more > summary { width:28px; } }

/* Three visible rows: track, timeline, then playback and utilities together. */
#plyr-playlist.player-closed { display:none !important; }
#plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen):not(.plyr--spotify) .plyr__video-wrapper { width:min(240px,calc(100vw - 32px)) !important; height:auto !important; aspect-ratio:16/9 !important; min-height:0 !important; max-height:none !important; padding:0 !important; }
#plyr-playlist:not(.now-playing) .plyr.plyr--spotify:not(.plyr-fullscreen) .plyr__video-wrapper { width:min(352px,calc(100vw - 32px)) !important; height:152px !important; aspect-ratio:auto !important; min-height:0 !important; max-height:none !important; padding:0 !important; }
#plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr__video-wrapper :is(video,iframe) { position:absolute; inset:0; width:100% !important; height:100% !important; max-height:none !important; }
@media(max-width:782px) {
 :root { --plyr-height:128px; }
 #plyr-playlist.player.fixed-bottom:not(.now-playing) { height:128px !important; }
 #plyr-playlist:not(.now-playing) > .plyr > .plyr__controls { display:flex !important; flex-wrap:wrap; justify-content:center; align-content:center; gap:6px 0; padding:8px !important; height:128px !important; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-info { order:0; flex:0 0 100%; height:40px; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-btns { display:contents !important; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-btns > .plyr-control-prog { order:1 !important; flex:0 0 100%; height:24px !important; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-btns > button { order:2; width:var(--player-control-size) !important; flex:0 0 var(--player-control-size); padding:3px !important; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-ctrl { order:2; flex:0 0 auto; width:auto; height:36px; flex-wrap:nowrap; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-ctrl > .plyr__volume { position:relative; flex:0 0 28px !important; width:28px !important; }
 #plyr-playlist:not(.now-playing) .plyr .plyr__volume input, #plyr-playlist.now-playing .plyr__volume input { position:absolute !important; left:0 !important; right:auto !important; top:auto !important; bottom:calc(100% + 8px) !important; width:90px !important; height:32px !important; padding:8px; border-radius:8px; background:#252529; transform:none !important; opacity:0 !important; visibility:hidden; pointer-events:none; }
 #plyr-playlist:not(.now-playing) .plyr .plyr__volume.volume-open input, #plyr-playlist.now-playing .plyr .plyr__volume.volume-open input { opacity:1 !important; visibility:visible; pointer-events:auto; }
}

/* Keep optional video presentation inside the existing menu. */
#plyr-playlist .player-pip-replaced, #plyr-playlist [data-player-pip][hidden] { display:none !important; }

#plyr-playlist .player-pip-status { position:absolute; right:12px; bottom:calc(100% + 12px); width:max-content; max-width:min(340px,calc(100vw - 24px)); padding:12px 16px; border:1px solid #444; border-radius:10px; background:#232323; color:#fff; font-size:13px; line-height:1.5; box-shadow:0 8px 30px #0008; z-index:5; }
#plyr-playlist .player-pip-status[hidden] { display:none !important; }

/* Compact recommendation rows use native scrolling. */

.station-video-preview:focus-visible { outline:3px solid #fff; outline-offset:-5px; }
.station-video-stage.station-video-active .station-video-preview { display:none; }
.station-video-stage > .plyr__video-wrapper { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:0 !important; max-height:none !important; padding:0 !important; aspect-ratio:16/9; transform:none !important; background:#080808; }
.station-video-stage .plyr__video-wrapper :is(video,iframe,.plyr__video-embed) { position:absolute; inset:0; width:100% !important; height:100% !important; max-height:none !important; object-fit:contain; }
.station-video-stage .plyr__video-embed > div { padding:0 !important; height:100%; }
.station-video-stage .plyr__captions { position:absolute; z-index:3; }
#plyr-playlist.station-video-mounted [data-plyr="video"] { display:none !important; }
#primary > article > .entry-header-container.header-station { position:sticky !important; top:var(--navbar-height,72px) !important; z-index:100020 !important; }
html.admin-bar #primary > article > .entry-header-container.header-station { top:calc(var(--navbar-height,72px) + 32px) !important; }
@media(max-width:782px) { html.admin-bar #primary > article > .entry-header-container.header-station { top:calc(var(--navbar-height,56px) + 46px) !important; } }
/* Three full-width rows keep six primary controls comfortably spaced. */
@media(max-width:1100px) {
 :root { --plyr-height:148px; }
 #plyr-playlist.player.fixed-bottom:not(.now-playing) { height:148px !important; }
 #plyr-playlist:not(.now-playing) > .plyr:not(.plyr-fullscreen) > .plyr__controls { display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:40px 24px 44px; gap:8px 0; padding:12px !important; height:148px !important; width:100% !important; box-sizing:border-box; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-info { grid-column:1/-1; grid-row:1; width:100% !important; height:40px !important; margin:0 !important; min-width:0; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) :is(.plyr-control-btns,.plyr-control-ctrl) { display:contents !important; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-prog { grid-row:2; grid-column:1/-1; display:flex !important; align-items:center; position:relative !important; height:24px !important; width:100% !important; margin:0 !important; gap:8px; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) :is(.plyr-control-btns > button,.plyr-control-ctrl > button,.plyr__volume,.player-more) { grid-row:3; justify-self:center; align-self:center; width:var(--player-control-size) !important; min-width:var(--player-control-size) !important; height:var(--player-control-size) !important; min-height:var(--player-control-size) !important; padding:8px !important; margin:0 !important; box-sizing:border-box; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) [data-plyr="prev"] { grid-column:1; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-btns > [data-plyr="play"] { grid-column:2; border-radius:50%; background:#fff !important; color:#171717 !important; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) [data-plyr="next"] { grid-column:3; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > .plyr__volume { grid-column:4; position:relative; display:flex !important; align-items:center; justify-content:center; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) [data-now-playing] { grid-column:5; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > .player-more { grid-column:6; position:relative; padding:0 !important; }
 #plyr-playlist .player-more > summary { width:var(--player-control-size) !important; height:var(--player-control-size) !important; padding:10px !important; }
 #plyr-playlist .plyr-control-ctrl > .plyr__volume input { position:absolute !important; left:50% !important; bottom:calc(100% + 16px) !important; transform:translateX(-50%); width:110px !important; height:24px !important; background:#222; padding:12px; border-radius:10px; opacity:0 !important; visibility:hidden; pointer-events:none; }
 #plyr-playlist .plyr-control-ctrl > .plyr__volume.volume-open input { opacity:1 !important; visibility:visible; pointer-events:auto; }
 #plyr-playlist .player-more-panel > .plyr__menu { display:block !important; width:100%; }
 #plyr-playlist .player-more-panel > .plyr__menu > button { width:100% !important; display:flex !important; align-items:center; gap:10px; padding:8px 10px; min-height:40px; }
}

#primary > article > .entry-header-container.header-station { top:calc(var(--navbar-height,64px) + var(--adminbar-height,0px)) !important; }
@media(max-width:1100px) {
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > .plyr__volume > button { width:44px !important; height:44px !important; padding:10px !important; min-width:44px !important; }
}

.station-video-stage + .entry-header-container.header-station > .post-thumbnail { display:none !important; }
.station-video-stage + .entry-header-container.header-station { display:block !important; min-height:0 !important; }

.station-video-stage + .header-station { padding:1rem !important; }
.station-video-stage + .header-station > .entry-header { padding:0 !important; margin:0 !important; }
@media(max-width:782px) {
  .station-video-stage + .header-station .entry-title { font-size:1.35rem; line-height:1.3; margin:.4rem 0 .75rem; }
}

/* Playback surfaces share neutral colors and consistent targets. */
#plyr-playlist .player-more-panel { background:rgba(20,20,22,.98); border-color:#ffffff18; }
#plyr-playlist .player-more-panel::-webkit-scrollbar { display:none; width:0; height:0; }
#plyr-playlist .player-more-panel > :is(button,a), #plyr-playlist .player-more-panel > .plyr__menu > button { justify-content:flex-start !important; text-align:left !important; color:inherit; background:transparent; }
#plyr-playlist .player-more-panel > :is(button,a):hover { background:#ffffff10 !important; }
#plyr-playlist .player-more-label { flex:1; text-align:left; }
#plyr-playlist .plyr__control > svg, #plyr-playlist .player-more summary > svg { width:22px !important; height:22px !important; min-width:22px; flex-shrink:0; }
#plyr-playlist .player-more-panel > :is([data-plyr="shuffle"],[data-plyr="repeat"])::after { content:"Off"; font-size:11px; line-height:1.5; border-radius:5px; padding:2px 6px; color:#aaa; background:#ffffff08; margin-left:auto; }
#plyr-playlist .player-more-panel > :is(.is--shuffle,.is--repeat)::after { content:"On"; color:#fff; background:#ffffff25; }
#plyr-playlist .player-more-panel > .is--repeat-once::after { content:"One"; }
#plyr-playlist .plyr .plyr__volume { position:relative; overflow:visible; }
#plyr-playlist .plyr .plyr__volume::before { content:""; position:absolute; left:-8px; right:-8px; bottom:100%; height:170px; pointer-events:none; }
#plyr-playlist .plyr .plyr__volume:is(:hover,:focus-within,.volume-open)::before { pointer-events:auto; }
#plyr-playlist .plyr .plyr__volume input[type="range"] { position:absolute !important; top:auto !important; bottom:calc(100% + 8px) !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; writing-mode:vertical-lr; direction:rtl; appearance:auto !important; -webkit-appearance:auto !important; height:156px !important; padding:12px 14px !important; box-sizing:border-box; background:#202022 !important; border:1px solid #ffffff20; border-radius:14px; accent-color:#eee; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; z-index:4; }
#plyr-playlist .plyr .plyr__volume:is(:hover,:focus-within,.volume-open) input[type="range"] { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
@media(max-width:1100px) {
 #plyr-playlist:not(.now-playing) > .plyr:not(.plyr-fullscreen) > .plyr__controls { grid-template-columns:repeat(7,minmax(0,1fr)); }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > [data-plyr="fullscreen"] { grid-row:3; grid-column:6; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > .player-more { grid-column:7; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-info { display:flex !important; gap:8px; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-info .plyr-control-info-content { min-width:0; flex:1; }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-info > [data-plyr="list"] { width:var(--player-control-size) !important; height:var(--player-control-size) !important; padding:7px !important; flex:0 0 var(--player-control-size); }
 #plyr-playlist:not(.now-playing) .plyr .plyr-control-info > .btn-like { flex:0 0 var(--player-control-size); width:var(--player-control-size) !important; }
}
@media(max-width:380px) {
 #plyr-playlist { --player-control-size:40px; }
 #plyr-playlist:not(.now-playing) > .plyr:not(.plyr-fullscreen) > .plyr__controls { padding:12px 6px !important; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) :is(.plyr-control-btns > button,.plyr-control-ctrl > button,.plyr__volume,.player-more), #plyr-playlist .player-more > summary, #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > .plyr__volume > button { width:var(--player-control-size) !important; min-width:var(--player-control-size) !important; height:var(--player-control-size) !important; padding:8px !important; }
}
.station-video-stage { max-height:calc(100svh - var(--navbar-height,76px) - var(--plyr-height,82px) - 32px); min-height:160px; }
.station-video-surface,.station-video-controls { display:none; }
.station-video-active .station-video-surface { display:block; position:absolute; inset:0 0 48px; width:100%; height:calc(100% - 48px); border:0; background:transparent; cursor:pointer; z-index:4; }
.station-video-active .station-video-controls { display:flex; position:absolute; bottom:0; left:0; right:0; height:48px; align-items:center; gap:10px; padding:0 8px; background:linear-gradient(transparent,#000b); color:#fff; z-index:5; }
.station-video-controls button { width:40px; height:40px; flex:none; display:grid; place-items:center; padding:9px; border:0; border-radius:50%; background:transparent; color:inherit; }
.station-video-controls button:hover { background:#ffffff20; }
.station-video-controls svg { width:22px; height:22px; fill:currentColor; }
.station-video-controls [data-stage-seek] { flex:1; width:0; min-width:0; accent-color:#eee; }
.station-video-controls span { font-size:12px; font-variant-numeric:tabular-nums; }
.stage-pause-icon { display:none; }
[aria-pressed="true"] .stage-play-icon { display:none; }
[aria-pressed="true"] .stage-pause-icon { display:block; }
.station-video-controls button:focus-visible,.station-video-surface:focus-visible { outline:2px solid white; outline-offset:-3px; }
.station-lower-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; align-items:start; }
.station-discussion-column,.station-recommendations { min-width:0; }
.station-discussion { padding:1rem; border-radius:12px; background:#1c1c1e; margin-bottom:1rem; }
.station-discussion > summary { cursor:pointer; list-style:none; display:grid; gap:.75rem; }
.station-discussion > summary::-webkit-details-marker { display:none; }
.station-discussion > summary strong span { color:#aaa; margin-left:.5rem; }
.station-comment-preview { display:flex; gap:.75rem; font-size:.875rem; }
.station-comment-preview img { width:32px; height:32px; border-radius:50%; flex:none; }
.station-comment-preview > span { min-width:0; }
.station-comment-preview b { display:block; font-size:.75rem; margin-bottom:.25rem; }
.station-comment-preview > span > span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.station-comments-toggle { font-size:.8rem; color:#ccc; }
.station-discussion[open] .station-comment-preview,.station-discussion[open] .station-comments-toggle { display:none; }
.station-discussion #comments,.station-discussion #respond { scroll-margin-top:calc(var(--navbar-height,76px) + 120px); }
@container station-content (min-width:1040px) {
 article:has(> .station-video-stage) .station-lower-layout { grid-template-columns:minmax(0,1fr) minmax(280px,25%); gap:1.5rem; }
 article:has(> .station-video-stage) .station-recommendations .related-content-row { margin-top:0; margin-bottom:1.5rem; }
 article:has(> .station-video-stage) .station-recommendations .related-content-controls { display:none; }
 article:has(> .station-video-stage) .station-recommendations .related-content-grid { display:flex !important; flex-direction:column; overflow:visible; gap:.8rem; }
 article:has(> .station-video-stage) .station-recommendations .related-content-grid .block-loop-item { display:flex !important; flex-direction:column; gap:0; }
 article:has(> .station-video-stage) .station-recommendations .block-loop-item > .post-thumbnail { grid-row:1/4; margin:0; }
 article:has(> .station-video-stage) .station-recommendations .block-loop-item > .entry-header { margin:0; min-width:0; }
 article:has(> .station-video-stage) .station-recommendations .block-loop-item .entry-title { font-size:.85rem; line-height:1.4; margin:0; }
}

#plyr-playlist .player-more-panel > :is(button,a),#plyr-playlist .player-more-panel > .plyr__menu > button { border:0 !important; }
#plyr-playlist .player-more-panel > :is(.is--shuffle,.is--repeat) svg { color:#eee !important; }
#plyr-playlist .player-more-panel > button:disabled { color:#777 !important; }

.station-discussion :is(#comments,#respond,.comment-respond,#commentform,.comment-form,.comment-list) { width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box; }
.station-discussion #comments { padding:1rem 0; margin:0; }
.station-discussion #respond { padding:1rem 0 !important; margin:0 !important; }
.station-discussion .comment-form { text-align:left; margin:0; }
.station-discussion textarea { width:100%; max-width:100%; box-sizing:border-box; }
.station-discussion .comment-body { overflow-wrap:anywhere; }

/* Embedded providers retain their browsing context during presentation changes. */
#plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr__video-wrapper.station-video-pinned { position:absolute !important;  right:auto !important; bottom:auto !important; width:auto; height:auto; min-height:0 !important; max-height:none !important; max-width:none !important; padding:0 !important; transform:none !important; aspect-ratio:16/9 !important; pointer-events:none; overflow:hidden; display:block !important; opacity:1 !important; visibility:visible !important; }

.station-video-pinned .station-video-controls { display:flex; position:absolute; bottom:0; left:0; right:0; height:48px; align-items:center; gap:10px; padding:0 8px; background:linear-gradient(transparent,#000b); color:#fff; z-index:5; pointer-events:auto; }
.station-video-pinned .station-video-controls button { pointer-events:auto; }

/* Discussion adapts to the content area and retains the original thread. */
.station-content-area { container-type:inline-size; container-name:station-content; }

.station-discussion #respond { display:block !important; }
.station-discussion :is(.must-log-in,.logged-in-as,.comment-notes,.comment-form-cookies-consent) { display:block !important; }
.station-discussion #reply-title { margin:0 0 12px; font-size:1.05rem; }

/* Static station metadata and compact, consistent discussion surfaces. */
#primary > article > .entry-header-container.header-station,
html.admin-bar #primary > article > .entry-header-container.header-station { position:relative !important; top:auto !important; z-index:auto !important; box-shadow:none !important; }
/* Station metadata is static: these values are declared UNSCROLLED, so the header
 * subtree measures the same before and after `.scrolled` is set. Keying them to
 * `.scrolled` is what made the meta row re-wrap and the terms row re-flow on every
 * scroll pass, because a `.scrolled` copy of a rule wins over the unscrolled one it
 * was meant to match. */
#primary > article > .header-station .entry-meta { display:flex !important; flex-wrap:wrap !important; margin:0 !important; }
#primary > article > .header-station .station-terms { display:flex !important; }
.station-discussion { --discussion-surface:#1c1c1e; background:var(--discussion-surface) !important; }
.station-discussion :is(#comments,#respond,.comment-form,.comment-body,.comment-content,.must-log-in,.logged-in-as) { background:transparent !important; box-shadow:none !important; border:0; }
.station-discussion #respond { padding:16px 0 !important; border-radius:0 !important; }
.station-discussion .comment-form { display:grid !important; gap:12px; }
.station-discussion .comment-form p { margin:0 !important; }
.station-discussion label { display:block; margin:0 0 6px; font-size:.8rem; color:#ccc; }
.station-discussion :is(textarea,input:not([type=checkbox]):not([type=submit]),select) { border:1px solid #505053 !important; border-radius:10px !important; background:var(--discussion-surface) !important; color:#f4f4f5 !important; padding:10px 12px !important; min-height:44px; width:100%; box-sizing:border-box; font:inherit; }
.station-discussion textarea { min-height:88px; resize:vertical; line-height:1.5; }
.station-discussion :is(textarea,input,select):focus-visible { outline:2px solid #c7c7cb; outline-offset:2px; }
.station-discussion :is(.form-submit input,.comment-report button) { width:auto !important; min-height:40px; padding:8px 18px !important; border:0 !important; border-radius:999px !important; color:#222 !important; background:#f0f0f2 !important; font-weight:600; cursor:pointer; }
.station-discussion :is(.comment-notes,.logged-in-as,.must-log-in) { font-size:.82rem; line-height:1.6; margin:0 0 12px !important; }
.station-discussion .comment-list { padding-left:0; list-style:none; margin:0; }
.station-discussion .comment-body { padding:16px 0; border-bottom:1px solid #ffffff15; }
.station-discussion .avatar { width:36px; height:36px; object-fit:cover; border-radius:50%; }
.station-discussion .comment-metadata { font-size:.75rem; color:#aaa; margin:4px 0 8px; }
.station-discussion .comment-list .children { margin-left:16px; padding-left:12px; border-left:1px solid #ffffff20; list-style:none; }
.comment-tools { display:flex; flex-wrap:wrap; align-items:start; gap:12px; margin-top:10px; font-size:.75rem; }
.comment-tools :is(a,summary) { color:#c8c8cc; cursor:pointer; }
.comment-report { max-width:100%; }
.comment-report-form { display:grid; gap:8px; max-width:320px; margin:12px 0; }
.comment-report-form p { font-size:.75rem; color:#aaa; }
.comment-reported { color:#b2c5b9; }
.shorts-pagination { display:flex; gap:8px; justify-content:center; margin:24px 0; }
.shorts-pagination > * { padding:8px 12px; border-radius:8px; background:#1c1c1e; }
button.btn-like { border-radius:999px !important; flex-shrink:0 !important; min-height:36px; height:auto; }
#plyr-playlist .plyr-control-info .btn-like { width:36px !important; min-width:36px !important; max-width:36px !important; height:36px !important; min-height:36px !important; padding:8px !important; flex:0 0 36px !important; aspect-ratio:1; }

#primary > article > .header-station .entry-title { font-size:clamp(1.5rem,3vw,2.25rem) !important; font-weight:600 !important; letter-spacing:-.01em; line-height:1.2 !important; margin:.4rem 0 .75rem !important; padding:0 !important; }
#primary > article > .header-station > .entry-header { display:block !important; }
#primary > article > .header-station :is(.entry-artist,.entry-uploader) { white-space:normal !important; overflow:visible !important; font-size:.875rem !important; line-height:1.5 !important; }
#primary > article > .header-station { --header-image-size:12rem; --header-title-size:2rem; }
#primary .station-video-stage { position:relative !important; top:auto !important; }


.station-discussion { font-family:inherit; }
.station-discussion .comment-author { font-size:.875rem; font-weight:600; }
.station-discussion .comment-content { font-size:.875rem; line-height:1.6; }
.station-discussion .comment-form-cookies-consent input { margin-right:6px; }
.station-discussion .comment-form-cookies-consent label { display:inline; }
@media(min-width:600px) {
 .station-discussion .comment-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .station-discussion .comment-form > * { grid-column:1/-1; }
 .station-discussion .comment-form .comment-form-author { grid-column:1; }
 .station-discussion .comment-form .comment-form-email { grid-column:2; }
}

/* Inline discussion composer and flexible station actions. */
#primary > article > .header-station .station-title-actions { display:flex !important; align-items:center; flex-wrap:wrap; gap:12px 20px; min-width:0; width:100%; }
#primary > article > .header-station .station-title-actions > .entry-title { flex:1 1 260px; width:auto !important; min-width:0; margin:0 !important; overflow-wrap:anywhere; }
#primary > article > .header-station .station-title-actions > .entry-meta { display:flex !important; flex:0 1 auto; flex-wrap:wrap !important; align-items:center; gap:10px; margin:0 !important; padding:0 !important; width:auto !important; }
#primary > article > .header-station .entry-meta > :is(.btn-more,.btn-download,.btn-like) { display:inline-flex !important; flex:none; align-items:center; justify-content:center; gap:.4rem; box-sizing:border-box; min-width:40px; height:40px; padding:0 .7rem; border:1px solid #ffffff1f; border-radius:999px !important; color:#eee; line-height:1; transition:background-color .15s ease,border-color .15s ease; }
#primary > article > .header-station .entry-meta > .btn-more { width:40px; padding:0; }
#primary > article > .header-station .entry-meta > :is(.btn-more,.btn-download,.btn-like):is(:hover,:focus-visible) { border-color:#ffffff40; background:#ffffff14 !important; }
#primary .station-terms-genre { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:12px 0; font-size:.78rem; }
#primary .station-terms-genre a { display:inline-flex; align-items:center; padding:5px 11px; border:1px solid #ffffff18; border-radius:999px; background:#252527; color:#ccc; text-decoration:none; line-height:1.4; }
#primary .station-terms-genre a:hover,#primary .station-terms-genre a:focus-visible { background:#333336; color:#fff; border-color:#ffffff35; }
#plyr-playlist .plyr__volume .plyr__tooltip { display:none !important; }
.station-discussion #commentform { display:block !important; }
.station-discussion #reply-title:empty { display:none; }
.station-discussion #reply-title { font-size:.8rem; }
.station-discussion #commentform .comment-form-comment { position:relative; }
.station-discussion #commentform #comment { display:block; min-height:72px; padding:12px 58px 12px 14px !important; border:1px solid #414144 !important; background:var(--discussion-surface,#1c1c1e) !important; border-radius:14px !important; box-shadow:none !important; outline:0 !important; resize:vertical; color:#eee; }
.station-discussion #commentform #comment:hover { border-color:#57575b !important; }
.station-discussion #commentform #comment:focus { border-color:#727277 !important; box-shadow:0 0 0 2px #ffffff0b !important; outline:0 !important; }
.station-discussion #commentform .form-submit { position:absolute; top:14px; right:10px; }
.station-discussion #commentform button.comment-send { display:inline-flex; align-items:center; justify-content:center; width:40px !important; height:40px; min-height:40px; padding:9px !important; border:0 !important; border-radius:50% !important; background:#343437 !important; color:#eee !important; box-shadow:none !important; cursor:pointer; }
.station-discussion #commentform button.comment-send:hover { background:#45454a !important; }
.station-discussion #commentform button.comment-send:focus-visible { outline:2px solid #85858c; outline-offset:2px; }
.station-discussion .comment-send svg { width:21px; height:21px; }

.station-discussion #reply-title:has(#cancel-comment-reply-link[style*="none"]) { display:none; }

.station-discussion #commentform { padding:0 !important; margin:0 !important; }
.station-discussion #commentform .comment-form-comment { width:100% !important; float:none !important; }
.station-discussion #commentform .form-submit { bottom:auto !important; float:none !important; }
.station-discussion #commentform button.comment-send { min-width:40px !important; max-width:40px !important; flex:none; }
/*
 * THE BLOG COMMENT COMPOSER.
 *
 * `comments.php` builds the same three-part composer the station discussion uses --
 * a growing textarea, a `0 / 1000` counter and an icon submit -- but every rule
 * that laid those three out was scoped to `.station-discussion`. The blog form
 * fell through to `style.css`, where `.comment-form` is `display: flex` with
 * `flex-wrap: wrap`. The textarea took the first line and the counter, the emoji
 * picker and the submit button wrapped onto lines of their own BELOW it, outside
 * the bordered field, with the button at whatever size the theme's button rules
 * gave it.
 *
 * So this is the same treatment the station composer already has, written against
 * the blog form and scoped away from `.station-discussion` so the two cannot
 * disagree.
 *
 * The layout is one positioned box rather than a flow. `.comment-form-comment` is
 * the positioning context, the textarea reserves room on the right for the send
 * button and along the bottom for the emoji picker and the counter, and each of
 * those three is placed inside the reserved room. That is what keeps them inside
 * the field when the textarea grows, which a flow layout cannot do.
 */
.comments-area #commentform.musiveo-comment-form {
  display: block !important;
  /* The emoji grid is a popover that opens upward. The base rule clips the form,
     which would cut the panel off at the top of the textarea. */
  overflow: visible !important;
  margin: 0 0 8px !important;
  /* The positioning context for the send button, and it has to be the FORM.
     `comment_form()` prints `.form-submit` as a SIBLING of `.comment-form-comment`,
     not inside it, so anchoring the button to the comment paragraph leaves it
     anchored to the nearest positioned ancestor instead -- which is nowhere, and
     it ends up at the bottom of the form, outside the field, at the size the theme's
     own button rules gave it. That is the fault this whole block exists to fix, so it
     is worth naming: the context is the form, not the field. */
  position: relative !important;
}
.comments-area #commentform .comment-form-comment {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}
.comments-area #commentform #comment,
.comments-area #commentform textarea[name="comment"] {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  min-height: 84px;
  /* Right: the send button. Bottom: the emoji picker and the counter. */
  padding: 14px 58px 38px 14px !important;
  border: 1px solid #414144 !important;
  border-radius: 14px !important;
  background: #000 !important;
  box-shadow: none !important;
  color: #eee !important;
  font: inherit;
  font-size: .95rem;
  line-height: 1.55;
  outline: 0 !important;
  /* The script grows this. A drag handle would let the reserved space and the
     absolutely placed controls come apart. */
  resize: none;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.comments-area #commentform #comment:hover { border-color: #57575b !important; }
.comments-area #commentform #comment:focus {
  border-color: #727277 !important;
  box-shadow: 0 0 0 2px #ffffff0b !important;
}

/* The send button: inside the field, top right, circular, fixed size. */
.comments-area #commentform .form-submit {
  position: absolute !important;
  top: 13px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  line-height: 1 !important;
}
.comments-area #commentform button.comment-send {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2f2f33 !important;
  color: #eee !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.comments-area #commentform button.comment-send:hover { background: #3d3d42 !important; }
.comments-area #commentform button.comment-send:focus-visible { outline: 2px solid #85858c; outline-offset: 2px; }
.comments-area #commentform button.comment-send svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  flex: none;
  visibility: visible !important;
}

/* The counter, inside the field, bottom right, on the reserved strip. */
.comments-area #commentform .comment-character-count {
  position: absolute !important;
  right: 14px !important;
  bottom: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #7d7d84 !important;
  font-size: .72rem !important;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The emoji picker, inside the field, bottom left. */
.comments-area #commentform .comment-emoji-picker {
  position: absolute !important;
  left: 10px !important;
  bottom: 7px !important;
  z-index: 3;
  margin: 0 !important;
  padding: 0 !important;
}
.comments-area #commentform .comment-emoji-picker > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #9a9aa1;
  cursor: pointer;
  list-style: none;
  transition: color .15s ease, background .15s ease;
}
.comments-area #commentform .comment-emoji-picker > summary::-webkit-details-marker { display: none; }
.comments-area #commentform .comment-emoji-picker > summary:hover { color: #ddd; background: #ffffff0f; }
.comments-area #commentform .comment-emoji-picker > summary svg { width: 19px; height: 19px; }
.comments-area #commentform .comment-emoji-grid {
  position: absolute;
  bottom: 32px;
  left: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  width: max-content;
  max-width: 250px;
  padding: 8px;
  border: 1px solid #2e2e32;
  border-radius: 12px;
  background: #131316;
  box-shadow: 0 12px 32px #00000099;
}
/* Opened near the top of the viewport, the panel flips below the trigger so it
   never runs off the top of the screen. The script sets the class. */
.comments-area #commentform .comment-emoji-picker.opens-below .comment-emoji-grid { bottom: auto; top: 32px; }
.comments-area #commentform .comment-emoji-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.comments-area #commentform .comment-emoji-grid button:hover { background: #ffffff14; }

.comments-area #commentform .comment-submit-status {
  margin: 8px 0 0 !important;
  color: #b4b4ba;
  font-size: .8rem;
}
.comments-area #commentform .comment-submit-status:empty { display: none; }
.comments-area #commentform .comment-send[disabled] { opacity: .5; cursor: wait; }
.comments-area #commentform .comment-send[aria-busy="true"] svg { animation: musiveoCommentSending 1s linear infinite; }
@keyframes musiveoCommentSending { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .comments-area #commentform .comment-send[aria-busy="true"] svg { animation: none; } }

/* The reply heading the form carries when replying to a comment. */
.comments-area #reply-title { font-size: .9rem; }
.comments-area #cancel-comment-reply-link { font-size: .8rem; }

/*
 * THE FIELD'S LABEL STAYS VISUALLY HIDDEN.
 *
 * `comments.php` labels the textarea with `class="screen-reader-text"`, which is
 * how it is announced and how it is meant to look -- invisible, with the
 * placeholder doing the visible work. `style.css` then says
 *
 *     .comment-form-comment label { position:absolute; top:0; ...; z-index:2 }
 *
 * a floating label that sits over the top of the field. That selector is (0,1,1)
 * and `.screen-reader-text` is (0,1,0), so the theme rule wins on specificity and
 * the label comes back, sitting on top of the placeholder. The base sheet hides it
 * again only for `.is-logged-in + .comment-form`, which is one particular sibling
 * arrangement, so any other shape of the markup shows the label.
 *
 * Restated here with the same technique used for the station form further up this
 * file, so the label cannot be given an opinion by specificity again.
 */
.comments-area #commentform .comment-form-comment label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#dropdown-more .dropdown-item { width:100%; margin-inline:0 !important; }

.station-discussion #commentform .screen-reader-text { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important; }
.station-discussion #commentform .comment-send svg { display:block !important; width:21px !important; height:21px !important; flex:none; visibility:visible !important; }

/* Station playback, inline composer and compact queue boundaries. */
.station-video-preview { background:#000 !important; }
.station-video-preview .station-preview-play { color:#fff !important; background:#0009 !important; padding:0 !important; }
.station-video-preview .station-preview-play svg { display:block !important; width:30px !important; height:30px !important; fill:currentColor !important; opacity:1 !important; visibility:visible !important; }
#primary article:has(> .station-video-stage) > .header-station .entry-meta > .btn-play { display:none !important; }
.btn-download,.btn-purchase,.btn-comment,button.btn-like,button.btn-more,#primary > article > .header-station .entry-meta > .btn-more { background:transparent !important; }
/* The wipe behind `.btn` is painted by a pseudo-element at `z-index: -2`, which a
 * transparent background cannot cover -- so the download anchor read as a solid white
 * plate while the like button, a plain `button.btn-like`, stayed transparent. The
 * icon actions carry no label to wipe, so the pseudo-elements are dropped and the
 * `#222` the base `.btn` hands the anchor is given back to the surrounding text. */
.btn-download::before,.btn-download::after,
.btn-purchase::before,.btn-purchase::after,
.btn-comment::before,.btn-comment::after,
button.btn-like::before,button.btn-like::after,
button.btn-more::before,button.btn-more::after { content:none !important; }
a.btn-download,a.btn-purchase,a.btn-comment { color:inherit !important; }
.related-content { margin-top:0 !important; }
.station-discussion > summary { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.station-discussion[open] .station-discussion-chevron { transform:rotate(180deg); }
.station-discussion #commentform { position:relative; }
.station-discussion #commentform .comment-form-comment { margin:0 !important; padding:0 !important; }
.station-discussion #commentform #comment { background:#000 !important; padding:14px 62px 14px 14px !important; margin:0 !important; min-height:76px; }
.station-discussion #commentform .form-submit { position:absolute !important; inset:18px 12px auto auto !important; margin:0 !important; padding:0 !important; transform:none !important; width:40px !important; height:40px !important; line-height:1 !important; }
.station-discussion #commentform button.comment-send { background:#000 !important; margin:0 !important; transform:none !important; }
.station-discussion .comment-submit-status:empty { display:none; }
.station-discussion .comment-submit-status { margin-top:8px !important; color:#bbb; font-size:.8rem; }
.station-discussion .comment-send[disabled] { opacity:.5; cursor:wait; }
.station-discussion .comment-send[aria-busy=true] svg { animation:commentSending 1s linear infinite; }
@keyframes commentSending { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .station-discussion .comment-send[aria-busy=true] svg { animation:none; } }
.station-theatre-toggle { display:none; }
@media(min-width:1100px) {
 #primary article:has(> .station-video-stage):not(.station-theatre) { display:grid; grid-template-columns:minmax(0,1fr) clamp(240px,25%,360px); gap:0 24px; align-items:start; }
 #primary article:has(> .station-video-stage):not(.station-theatre) > :is(.station-video-stage,.header-station,.entry-content,.entry-footer) { grid-column:1; min-width:0; }
 #primary article:has(> .station-video-stage):not(.station-theatre) > .station-lower-layout { display:contents; }
 #primary article:has(> .station-video-stage):not(.station-theatre) .station-discussion-column { grid-column:1; min-width:0; }
 #primary article:has(> .station-video-stage):not(.station-theatre) .station-recommendations { grid-column:2; grid-row:1 / span 6; min-width:0; }
 #primary article:not(.station-theatre) .station-recommendations .related-content-row { margin-top:0; }
 #primary article:has(> .station-video-stage):not(.station-theatre) .station-recommendations .related-content-grid { display:flex !important; flex-direction:column; overflow:visible; gap:12px; }
 #primary article:has(> .station-video-stage):not(.station-theatre) .station-recommendations .block-loop-item { display:flex !important; flex-direction:column; gap:0; width:100% !important; }
 #primary article:has(> .station-video-stage):not(.station-theatre) .station-recommendations .related-content-controls { display:none; }
 .station-theatre-toggle { position:absolute; z-index:8; top:12px; right:12px; display:inline-flex; align-items:center; gap:8px; border:1px solid #ffffff30; border-radius:8px; color:#eee; background:#000b; padding:8px 10px; cursor:pointer; }
 .station-theatre-toggle svg { width:20px; height:20px; }
 .station-theatre-toggle[aria-pressed=true] { border-color:#aaa; }
}
@media(max-width:1100px) {
 #plyr-playlist:not(.now-playing) .plyr-list { position:fixed !important; top:calc(var(--navbar-height,76px) + var(--adminbar-height,0px) + 8px) !important; bottom:calc(var(--plyr-height,148px) + var(--mobile-menu-height,0px) + 12px) !important; left:8px !important; right:8px !important; width:auto !important; height:auto !important; max-height:none !important; margin:0 !important; box-sizing:border-box; overflow:auto; }
}

[data-waveform-view] { min-height:80px; width:100%; min-width:0; margin-block:16px; }
[data-waveform-view] .waveform_wrap { width:100%; min-width:0; }
[data-waveform-view] svg { display:block; max-width:100%; }

/* Glass belongs to the controls; the root must not contain fixed queue panels. */
#plyr-playlist:not(.now-playing) { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* Follow-up station surface and control refinements. */
.station-discussion { --discussion-surface:#000; background:#000 !important; }
.station-discussion .comment-content { font-size:1rem; line-height:1.65; }
#primary > article > .header-station { padding:1rem !important; background:var(--body-bg-color); margin-bottom:1.5rem !important; }
html body.scrolled #header.site-header { border-bottom-color:rgba(255,255,255,.06); }
.site-header .search-form .dropdown-menu a { display:flex; gap:.5rem; padding:.5rem 1rem; word-break:break-word; background:#151515; border:1px #090909; border-top-style:double; border-radius:5px; margin:0; }
#plyr-playlist .player-more-panel > :is(button,a),#plyr-playlist .player-more-panel > .plyr__menu > button { border:1px solid #101010 !important; color:#eee !important; background:transparent !important; border-radius:8px !important; }
#plyr-playlist .player-more-panel { background:rgb(21 21 21); color:#f5f5f5; border-color:#2a2a2a; scrollbar-width:none; overflow-x:hidden; overscroll-behavior:contain; }
.plyr__controls .btn-like { background:transparent !important; justify-items:center; border:none; }
.entry-header-inner .byline { width:100%; justify-content:inherit; background:none; max-width:fit-content; padding-inline:.4rem; border-radius:.5rem; display:flex; color:#cfcfcf; }
.site-content:has(.station-video-stage) { margin-top:0 !important; padding-top:calc(var(--navbar-height,76px) + var(--adminbar-height,0px)) !important; }
.station-video-controls .station-theatre-toggle { position:static; top:auto; right:auto; display:grid; width:40px; height:40px; padding:9px; border:0; border-radius:50%; background:transparent; }
@media(max-width:1099px) { .station-video-controls .station-theatre-toggle { display:none; } }
.station-video-controls { transition:opacity .2s ease; }
:is(.station-video-stage,.station-video-pinned).stage-is-playing:not(:hover):not(:focus-within) .station-video-controls { opacity:0; pointer-events:none; }
:is(.station-video-stage,.station-video-pinned):is(:hover,:focus-within) .station-video-controls { opacity:1; pointer-events:auto; }
@media(hover:none) { :is(.station-video-stage,.station-video-pinned).stage-is-playing .station-video-controls:focus-within { opacity:1; pointer-events:auto; } }


/* Compact audio presentation with authoritative playback progress. */
#primary > article > .musiveo-waveform { margin-block:4px 12px !important; min-height:80px; }
#primary > article:has(> .musiveo-waveform) > .header-station { padding-block:1rem .5rem !important; margin-bottom:0 !important; min-height:0 !important; }
#primary > article:has(> .musiveo-waveform) > .entry-content:empty { display:none; }
.musiveo-waveform .waveform_wrap { padding:0; border-radius:12px; background:linear-gradient(180deg,#12121288,#0000); }
.musiveo-waveform .waveform-bar { opacity:.26; }
.musiveo-waveform .waveform-bar-progress { opacity:.6; transition:opacity .2s; }
.musiveo-waveform.waveform-is-playing .waveform-bar-progress { opacity:1; }
.musiveo-waveform svg { cursor:pointer; touch-action:pan-y; }
.musiveo-waveform svg:focus-visible { outline:2px solid #777; outline-offset:3px; border-radius:8px; }

/* Native inline comment menus stay in document flow on narrow screens. */
.station-discussion .comment-edit-link { display:none !important; }
.station-discussion .comment-tools { display:block; margin:4px 0 0; padding:0; border:0; }
.comment-more > summary { display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-left:auto; padding:0; border:0; border-radius:50%; color:#aaa; background:transparent; cursor:pointer; list-style:none; }
.comment-more > summary::-webkit-details-marker { display:none; }
.comment-more > summary svg { width:20px; height:20px; fill:currentColor; }
.comment-more > summary:hover { color:#fff; background:#ffffff0a; }
.comment-more-panel { width:min(320px,100%); margin-left:auto; padding:12px; border:1px solid #262626; border-radius:12px; background:#151515; box-sizing:border-box; }
.comment-more-panel :is(a,summary) { display:block; padding:8px 10px; color:#ddd; cursor:pointer; }
.comment-more-panel form { display:block !important; padding:8px; margin:0; }
.comment-more-panel textarea,.comment-more-panel select { width:100%; box-sizing:border-box; background:#0b0b0b !important; color:#eee; border:1px solid #333 !important; border-radius:8px; padding:10px; }
.comment-more-panel button { color:#eee; background:#242424; border:1px solid #333; border-radius:8px; padding:8px 12px; }
.comment-more-panel label { display:block; font-size:.8rem; margin-bottom:6px; }
.comment-more-panel p { font-size:.8rem; color:#aaa; margin:8px 0; }
.musiveo-waveform svg { width:100% !important; height:72px !important; max-height:72px !important; aspect-ratio:auto !important; }
.musiveo-waveform .waveform_wrap { height:auto !important; min-height:0 !important; }
.station-discussion { box-sizing:border-box; min-width:0; }
#primary > article:has(> .musiveo-waveform) > .entry-content { margin-block:0 !important; padding-block:0 !important; }
#primary > article:has(> .musiveo-waveform) > .entry-footer { margin-block:0 !important; padding-block:0 !important; }
#primary > article:has(> .musiveo-waveform) > .station-lower-layout { margin-top:12px; }

/* Page and loop waveforms share a transparent seek surface. */
[data-waveform-view], [data-waveform-view] .waveform_wrap, [data-waveform-view] svg {
 background:transparent !important; border:0 !important; box-shadow:none !important;
}
[data-waveform-view] .waveform-time { display:none !important; }
[data-waveform-view] svg:focus:not(:focus-visible) { outline:none !important; }
[data-waveform-view] svg:focus-visible { outline:1px solid #666 !important; outline-offset:2px; }

/* Keep the intermediate-width dock compact without changing mobile order. */
@media (min-width:783px) and (max-width:1100px) {
 :root { --plyr-height:100px; }
 #plyr-playlist.player.fixed-bottom:not(.now-playing) { height:100px !important; }
 #plyr-playlist:not(.now-playing) > .plyr:not(.plyr-fullscreen) > .plyr__controls { grid-template-columns:40px minmax(140px,1fr) repeat(10,var(--player-control-size)); grid-template-rows:44px 24px; gap:8px 6px; height:100px !important; padding:12px !important; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) :is(.plyr-control-info,.plyr-control-info-content) { display:contents !important; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) :is(.plyr-control-btns > button,.plyr-control-ctrl > button,.plyr__volume,.player-more,.plyr-control-info > [data-plyr="list"],.plyr-control-info-content > .btn-like,.plyr__cover,.plyr__content) { grid-row:1; align-self:center; justify-self:center; margin:0 !important; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) :is(.plyr-control-btns > button,.plyr-control-ctrl > button,.plyr__volume,.player-more,.plyr-control-info > [data-plyr="list"],.plyr-control-info-content > .btn-like) { width:var(--player-control-size) !important; min-width:var(--player-control-size) !important; height:var(--player-control-size) !important; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr__cover { grid-column:1; width:40px !important; height:40px !important; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr__content { grid-column:2; width:100% !important; min-width:0; padding:0; justify-self:stretch; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .btn-like { grid-column:3; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) [data-plyr="prev"] { grid-column:4; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-btns > [data-plyr="play"] { grid-column:5; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) [data-plyr="next"] { grid-column:6; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) [data-now-playing] { grid-column:8; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > [data-plyr="fullscreen"] { grid-column:9; grid-row:1; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-info > [data-plyr="list"] { grid-column:11; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > .player-more { grid-column:12; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-prog { grid-row:2; }

 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > .plyr__volume { grid-column:7; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-info > [data-plyr="video"] { grid-column:10; grid-row:1; align-self:center; justify-self:center; }
}
/* A custom vertical track avoids the native wide range-control surface. */
#plyr-playlist .plyr .plyr__volume input[type="range"] { appearance:none !important; -webkit-appearance:none !important; padding:12px 18px !important; width:44px !important; min-width:44px !important; max-width:44px !important; background:#151515 !important; border-color:#292929; outline:none; }
#plyr-playlist .plyr .plyr__volume input[type="range"]::-webkit-slider-runnable-track { width:4px; height:100%; border:0; border-radius:4px; background:linear-gradient(to top,#eee 0 var(--value,60%),#484848 var(--value,60%) 100%); }
#plyr-playlist .plyr .plyr__volume input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:16px; height:16px; margin-left:-6px; border:0; border-radius:50%; background:#eee; box-shadow:0 1px 4px #0008; }
#plyr-playlist .plyr .plyr__volume input[type="range"]::-moz-range-track { width:4px; height:100%; border:0; border-radius:4px; background:#484848; }
#plyr-playlist .plyr .plyr__volume input[type="range"]::-moz-range-progress { width:4px; border-radius:4px; background:#eee; }
#plyr-playlist .plyr .plyr__volume input[type="range"]::-moz-range-thumb { width:16px; height:16px; border:0; border-radius:50%; background:#eee; }
#plyr-playlist .plyr .plyr__volume input[type="range"]:focus-visible { outline:2px solid #888; outline-offset:2px; }

/* Stack station identity visually and let wrapped text size its row. */
#primary > article > .header-station > .entry-header,
.scrolled #primary > article > .header-station > .entry-header { display:flex !important; flex-direction:column; align-items:stretch; height:auto !important; min-height:0 !important; gap:6px; }
#primary > article > .header-station > .entry-header > * { order:3; flex-shrink:0; }
#primary > article > .header-station > .entry-header > .station-title-actions { order:0; height:auto !important; min-height:0; }
#primary > article > .header-station > .entry-header > .entry-artist { order:1; margin:0 !important; }
#primary > article > .header-station > .entry-header > .entry-uploader { order:2; margin:0 !important; }
#primary > article > .header-station .station-title-actions > .entry-title { height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible; }

/* Keep editing in place with the same growing input surface as the composer. */
.comment-inline-editor[hidden], .comment-display-text[hidden] { display:none !important; }
.station-discussion .comment-inline-editor { width:100%; margin:0; }
.comment-input-shell { position:relative; width:100%; }
.station-discussion .comment-inline-editor textarea,
.station-discussion #commentform #comment { background:#000 !important; }
.station-discussion .comment-inline-editor textarea:focus,
.station-discussion #commentform #comment:focus { border-color:#777 !important; outline:none !important; box-shadow:none !important; }
.comment-edit-actions { display:flex; justify-content:flex-end; gap:.65rem; margin-top:.5rem; }
.station-discussion .comment-edit-actions button { padding:.5rem .85rem; border-radius:1.5rem; }
.station-discussion .comment-edit-actions button[type=submit] { background:#fff !important; color:#000 !important; border:1px solid #fff !important; }
.comment-action-notice { font-size:.85rem; color:#aaa; }
.station-discussion .comment-character-count { position:absolute; right:14px; bottom:9px; display:block; margin:0 !important; padding:0 !important; color:#aaa; font-size:12px; line-height:16px; pointer-events:none; }
.station-discussion #commentform .comment-character-count { right:62px; }
.station-discussion #commentform .form-submit { inset:14px 12px auto auto !important; }
.comment-reaction { display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; padding:.35rem .5rem; background:transparent; color:inherit; border:0; border-radius:2rem; }
.comment-reaction svg { width:1.1rem; height:1.1rem; }
.comment-reaction[aria-pressed=true] svg { fill:currentColor; }

/* Long text and thread batches expand inline without affecting playback. */
.comment-display-text.comment-text-preview:not(.comment-text-expanded) { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.comment-text-toggle, .station-discussion .comment-load-more { background:transparent; color:#ddd; border:0; padding:.35rem 0; font-size:.85rem; font-weight:600; cursor:pointer; }
.comment-text-toggle { display:block; }
.comment-display-text[hidden] + .comment-text-toggle { display:none; }
.comment-load-row { list-style:none; padding:.5rem 0; }
.comment-load-status { display:block; color:#aaa; font-size:.8rem; }

/* Keep discussion actions together without moving interactive elements. */
.station-discussion .comment-body { display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:.65rem; position:relative; }
.station-discussion .comment-content { display:contents; }
.station-discussion .comment-body > .comment-meta,
.station-discussion .comment-body > .comment-awaiting-moderation,
.station-discussion :is(.comment-display-text,.comment-text-toggle,.comment-inline-editor,.comment-action-notice) { grid-column:1/-1; min-width:0; }
.station-discussion .comment-display-text { font-size:1rem; line-height:1.65; }
.station-discussion .comment-reaction { grid-column:1; align-self:center; margin:0; min-height:36px; }
.station-discussion .comment-body > .reply { grid-column:2; align-self:center; margin:0; padding:0; }
.station-discussion .comment-body > .reply a { display:inline-flex; align-items:center; min-height:36px; }
.station-discussion .comment-reaction[aria-pressed=true] svg { color:#ef4444; fill:#ef4444; }
.station-discussion .comment-author .fn { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.station-discussion .comment-relative-date { font-size:.8rem; font-weight:400; color:#aaa; }
.station-discussion .comment-meta :is(.comment-metadata,.says) { display:none; }
#plyr-playlist .station-video-pinned { transition:none !important; }
.station-discussion .comment-tools { grid-column:1/-1; }
.station-discussion .comment-content::before, .station-discussion .comment-content::after { content:none; display:none; }

/* Compact threaded discussion with independent action menus. */
.station-discussion .comment-list { color:#eee; }
.station-discussion .comment-list li.comment { position:relative; margin:0; padding:0; list-style:none; }
.station-discussion .comment-body { margin:0; padding:16px 32px 8px 52px; gap:0 12px; border:0 !important; }
.station-discussion .comment-meta { margin:0 0 3px; padding:0; min-height:18px; }
.station-discussion .comment-author { font-size:13px; line-height:18px; }
.station-discussion .comment-author .avatar { position:absolute; left:-52px; top:0; width:36px; height:36px; margin:0; }
.station-discussion .comment-display-text { font-size:14px; line-height:20px; margin:0 0 6px; }
.station-discussion .comment-display-text p { margin:0 0 4px; }
.station-discussion .comment-relative-date { font-size:12px; }
.station-discussion .comment-reaction-group { display:inline-flex; align-items:center; grid-column:1; gap:10px; min-height:32px; }
.station-discussion .comment-reaction { position:static; min-height:32px; padding:4px 0; gap:8px; font-size:12px; }
.station-discussion .comment-reaction svg { width:18px; height:18px; }
.station-discussion .comment-body > .reply a { min-height:32px; font-size:12px; font-weight:600; padding:4px; }
.station-discussion .comment-tools { position:absolute; inset:14px 0 auto auto; width:32px; margin:0; z-index:3; }
.station-discussion .comment-more > summary { width:28px; height:28px; }
.station-discussion .comment-more-panel { position:absolute; top:30px; right:0; width:min(280px,calc(100vw - 60px)); max-height:60vh; overflow:auto; z-index:4; }
.station-discussion .comment-thread { margin:0 0 12px 52px; padding:0; border:0; }
.station-discussion .comment-thread > summary { display:flex; align-items:center; gap:8px; width:fit-content; list-style:none; cursor:pointer; padding:6px 0; color:#eee; font-size:14px; font-weight:600; }
.station-discussion .comment-thread > summary::-webkit-details-marker { display:none; }
.station-discussion .comment-thread > summary svg { width:20px; height:20px; }
.station-discussion .comment-thread[open] > summary svg { transform:rotate(180deg); }
.station-discussion .comment-thread > .children { margin:0; padding:0; border:0; }
.station-discussion .comment-thread::before { content:""; position:absolute; left:17px; top:56px; bottom:12px; width:20px; border-left:1px solid #383838; border-bottom:1px solid #383838; border-radius:0 0 0 18px; pointer-events:none; }
.station-discussion .children .comment-body { padding-left:36px; }
.station-discussion .children .comment-author .avatar { left:-36px; width:24px; height:24px; }
.station-discussion .children .comment-thread { margin-left:36px; }
.station-discussion .children .comment-thread::before { left:11px; top:44px; }
.comment-creator-name { display:inline-flex; align-items:center; gap:4px; padding:0 6px; border-radius:12px; background:#ddd; color:#111; }
.comment-creator-name a { color:inherit; }
.comment-creator-heart { position:relative; display:inline-flex; width:22px; height:22px; }
.station-discussion .comment-creator-heart img.avatar { position:static; width:20px; height:20px; margin:0; }
.comment-creator-heart > span { position:absolute; bottom:-4px; right:-4px; color:#ff2d55; font-size:16px; line-height:1; -webkit-text-stroke:1px #fff; }
@media(max-width:480px) { .station-discussion .comment-body { padding-right:28px; } .station-discussion .children .comment-body { padding-left:30px; } .station-discussion .children .comment-thread { margin-left:12px; } }

.station-discussion .comment-relative-date { background:none !important; padding:0 !important; border:0 !important; border-radius:0; box-shadow:none; }
.station-discussion .comment-reaction { height:32px !important; min-height:32px !important; }
.station-discussion .comment-reaction[aria-pressed=true] svg { color:inherit; fill:currentColor; }
.station-discussion .comment-thread > summary img.avatar { position:static; width:20px; height:20px; margin:0; }
.station-discussion .comment-list .comment-body .comment-display-text p { padding:0; margin:0 0 4px; }

.bypostauthor > .comment-body .comment-author b a:not(.comment-relative-date),
.bypostauthor > .comment-body .comment-author .comment-creator-name {
 background-color: #ffffff;
 color: #000000;
 font-size: 12px;
 padding: 4px 8px;
 border-radius: 10px;
 display: inline-block;
}

/* Keep identity badges beside names, independent of heading font size. */
.user-name-badges{display:inline-flex;align-items:center;gap:.3rem;vertical-align:middle;font-size:1rem;white-space:nowrap;}
.entry-uploader>.verified-badge,.comment-author b>.verified-badge{margin-inline-start:.3rem;vertical-align:middle;}

/* Count pills expand safely while the notification bell keeps a compact cap. */
.menu-cart .cart-quantity, .nav .count {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: auto !important; min-width: 20px !important; height: 20px !important;
    box-sizing: border-box; flex: 0 0 auto; padding: 0 5px !important;
    border-radius: 999px !important; background: #d9273a !important; color: #fff !important;
    font-size: 11px !important; font-weight: 700; line-height: 20px !important;
    font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0;
    vertical-align: middle;
}
.menu-cart .cart-quantity:empty, .nav .count:empty { display: none !important; }
.musiveo-notifications-toolbar {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: .65rem 1rem; background: #101010; border-bottom: 1px solid #333;
}
.musiveo-notifications-toolbar > button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
    padding: .45rem .75rem !important; border: 1px solid #444 !important;
    border-radius: .6rem; background: transparent !important; color: #eee !important;
    font: inherit; font-size: .85rem; white-space: nowrap; cursor: pointer;
}
.musiveo-notifications-toolbar > button:hover:not(:disabled) { background: #ffffff0a !important; }
.musiveo-notifications-toolbar > button:focus-visible { outline: 2px solid #eee; outline-offset: 3px; }
.musiveo-notifications-toolbar > button:disabled { opacity: .5; cursor: default; }
#musiveo-notification-status { margin: 0; font-size: .8rem; color: #ccc; }
#musiveo-notification-status:empty { display: none; }

.form-row .field-status {
 position: absolute;
 top: 2.35em;
 right: 0.75rem;
 margin-left: 0;
 max-width: calc(100% - 1.5rem);
 background: #000000;
 border-radius: 20px;
 padding: 0.125rem 0.375rem;
 z-index: 2;
}

/* Per-page presentation and notification surfaces. */
:root { --musiveo-dark-bg: var(--musiveo-ui-surface, #151515); }
body.musiveo-page-player-disabled #plyr-playlist { display: none !important; }
#dropdown-notification .dropdown-notification-list { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; padding: 1px; }
.musiveo-notifications-slidein .play-notification-item > a.notification-row:hover,
.musiveo-notifications-slidein .play-notification-item > a.notification-row:focus-visible { background: #303030; color: #fff; }
.notifications.block-loop-items .play-notification-item { display: flex !important; flex-wrap: wrap; width: 100% !important; padding: .75rem; border-bottom: 1px solid #ffffff18; background: transparent; margin: 0 0 4px 0; border-radius: 1rem; }

#dropdown-notification .play-notification-item.is-unread, .musiveo-notifications-body .play-notification-item.is-unread, .play-notification-item.is-unread { background: #30303026 !important; }

/* Keep utility surfaces consistent with the surrounding dark controls. */
.menu-cart .cart-quantity, .nav .count { background:#101010 !important; }
.user-navigation .profile-section-scroll .menu-item > a {
 display:inline-flex !important; align-items:center; justify-content:center;
 min-height:44px; line-height:1.25; margin:0 !important; box-sizing:border-box;
 background:#070707; border-radius:.75rem;
}
.block-loop-filter .block-loop-filter-select {
 background:#070707 !important; background-color:#070707 !important;
 border:1px solid #121212 !important; border-radius:6px !important;
 height:2.375rem !important; padding:0 2.125rem 0 .875rem !important;
 color:#eaeaea !important; font-size:.875rem !important; line-height:1 !important;
 font-weight:500 !important; appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
 background-image:linear-gradient(45deg,transparent 50%,#8a8a95 50%),linear-gradient(135deg,#8a8a95 50%,transparent 50%) !important;
 background-position:calc(100% - 1.0625rem) calc(50% - 1px),calc(100% - .75rem) calc(50% - 1px) !important;
 background-size:5px 5px,5px 5px !important; background-repeat:no-repeat !important;
}

/* Collection metadata fits below names and wraps before neighboring controls. */
.collection-summary { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.4rem; min-width:0; max-width:100%; color:#aaa; font-size:.8rem; line-height:1.5; }
.entry-header-inner > .collection-summary { display:flex; margin-top:.3rem; }
.header-station .collection-summary { margin-top:.25rem; font-size:.9rem; }
.collection-track-count,.collection-total-duration { white-space:nowrap; }
.collection-duration-label { color:#929292; }
.station-lower-layout--recommendations-only { grid-template-columns:minmax(0,1fr) !important; }
.station-lower-layout--recommendations-only > .station-recommendations { width:100%; }
.station-lower-layout--recommendations-only .related-content-controls { display:flex; }
.station-lower-layout--recommendations-only .related-content-grid {
 display:grid !important; grid-template-columns:none !important; grid-auto-flow:column;
 grid-auto-columns:calc((100% - 3 * var(--related-gap,1rem)) / 4);
 overflow-x:auto; overflow-y:hidden; gap:var(--related-gap,1rem);
}
.station-lower-layout--recommendations-only .related-content-grid .block-loop-item { display:block !important; }
.station-lower-layout--recommendations-only .related-content-grid .block-loop-item > .post-thumbnail { width:100%; margin:0 0 .65rem; aspect-ratio:1; }
.station-lower-layout--recommendations-only .related-content-grid .block-loop-item > .entry-header { margin:0; }
@media(max-width:1100px) { .station-lower-layout--recommendations-only .related-content-grid { grid-auto-columns:calc((100% - 2 * var(--related-gap,1rem)) / 3); } }
@media(max-width:800px) { .station-lower-layout--recommendations-only .related-content-grid { grid-auto-columns:calc((100% - var(--related-gap,.75rem)) / 2); } }
@media(max-width:480px) { .station-lower-layout--recommendations-only .related-content-grid { grid-auto-columns:78%; } }

/* Explicit positions survive style containment used for lazy-rendered rows. */
.station-content.block-loop-index > .block-loop-items > .block-loop-tracks-item[data-track-number]::before {
 content:attr(data-track-number); counter-increment:none;
}

/* Keep inline media below header overlays and bound to its static stage. */
#plyr-playlist.station-video-mounted:not(.now-playing):not(:has(.plyr-fullscreen)) { z-index:99990 !important; }
/* The provider shares document scrolling; only the dock controls remain fixed. */
html body #plyr-playlist.player.fixed-bottom.station-video-mounted:has(.station-video-pinned):not(.now-playing):not(:has(.plyr-fullscreen)) { position:absolute !important; }
html body #plyr-playlist.station-video-mounted:has(.station-video-pinned):not(.now-playing) > .plyr:not(.plyr-fullscreen) > .plyr__controls { position:fixed !important; top:auto !important; bottom:var(--station-dock-bottom,0px) !important; left:0 !important; right:0 !important; margin-inline:.5rem; width:auto !important; }
html body #plyr-playlist.station-video-mounted:has(.station-video-pinned):not(.now-playing) > .plyr-list-wrap { position:fixed; bottom:var(--station-dock-bottom,0px); left:0; right:0; }
body:has(.station-video-stage:hover) .station-video-pinned .station-video-controls,
body:has(.station-video-stage:focus-within) .station-video-pinned .station-video-controls { opacity:1 !important; pointer-events:auto !important; }

@media (max-width:782px) {
 body:has(#search-state:checked) .site-header .search-form .dropdown-menu {
  left:0; right:0; top:calc(100% + 6px); width:100%; min-width:0;
  max-height:calc(100svh - var(--navbar-height,76px) - var(--plyr-height,82px) - 32px);
  overflow-y:auto; overflow-x:hidden;
 }
}

@media (max-width:782px) {
 body:has(#search-state:checked) .site-header .header-container > :not(.search-form) { visibility:hidden; }
}

/* Keep the profile scroller understated while preserving pointer scrolling. */
.user-navigation .profile-section-scroll { background:transparent !important; border:1px solid #070707 !important; scrollbar-color:transparent transparent !important; }
button.btn-like:hover { animation-name:none !important; }

/* Station identity and recommendation cards retain their own layout. */
#primary > article > .header-station > .entry-header > .entry-uploader { display:flex !important; flex-wrap:wrap; align-items:center; gap:.65rem; }
.header-station .station-member { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.3rem; min-width:0; }
.header-station .station-member > a { font-size:1rem; font-weight:600; overflow-wrap:anywhere; }
.header-station .entry-uploader .btn-follow { flex:none; min-height:36px; padding:.4rem .9rem; white-space:nowrap; border:0 !important; box-shadow:none; }
#primary > article > .header-station .entry-title { position:static !important; height:auto !important; white-space:normal !important; overflow-wrap:anywhere; line-height:1.3; }
#primary > article > .entry-content { clear:both; min-width:0; }
#primary > article .station-recommendations .related-content-grid .block-loop-item { display:flex !important; flex-direction:column; gap:0; min-width:0; }
#primary > article .station-recommendations .related-content-grid .block-loop-item > .post-thumbnail { flex:none; width:100% !important; aspect-ratio:16/9 !important; height:auto !important; margin:0 0 .65rem !important; }
#primary > article .station-recommendations .related-content-grid .post-thumbnail-inner { display:block; width:100%; height:100%; aspect-ratio:16/9; }
#primary > article .station-recommendations .related-content-grid .post-thumbnail img { width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; }
#primary > article .station-recommendations .related-content-grid .entry-header { width:100%; min-width:0; margin:0; }

#primary > article > .header-station { height:auto !important; max-height:none !important; min-height:0 !important; }

/* Waveform cards keep playback and metadata above the seek surface. */
.wp-block-loop .block-loop-waveform-item { display:grid !important; grid-template-columns:64px minmax(0,1fr); gap:.75rem; width:100% !important; min-width:0; }
.wp-block-loop .block-loop-waveform-item > .post-thumbnail { width:64px !important; height:64px !important; margin:0 !important; aspect-ratio:1; }
.wp-block-loop .block-loop-waveform-item .entry-action { opacity:1 !important; visibility:visible !important; }
.wp-block-loop .block-loop-waveform-item > .entry-header { width:100%; display:flex !important; flex-wrap:wrap; align-items:center; gap:.5rem; min-width:0; margin:0; }
.wp-block-loop .block-loop-waveform-item .entry-header-inner { flex:1 1 12rem; min-width:0; }
.wp-block-loop .block-loop-waveform-item .entry-footer { display:flex !important; align-items:center; gap:.4rem; flex:none; width:auto; }
.wp-block-loop .block-loop-waveform-item .entry-footer :is(.btn-download,.btn-like,.btn-more,.play-count) { display:inline-flex !important; flex:none; }
.wp-block-loop .block-loop-waveform-item > .musiveo-waveform { grid-column:1/-1; margin:0 !important; }

/* Singular playback keeps a circular target independently of generic buttons. */
#primary > article > .header-station .btn-play { width:3.5rem; height:3.5rem; min-width:3.5rem; min-height:3.5rem; flex:none; border-radius:100% !important; display:inline-flex; align-items:center; justify-content:center; padding:0 !important; background-color:var(--musiveo-accent); color:#000 !important; }
.site-navbar { order:4 !important; display:flex; justify-content:flex-end; }
.site-header .navbar-menu .nav li > a > span, .site-header .site-navbar .nav li > a > span, .site-sidebar .nav li > a > span, #aside .nav li > a > span { display:inline-block; margin:0 !important; line-height:1.2 !important; }
:is(.site-header, .site-sidebar, #aside, #mobile-menu) .nav li.hide-text .theme-switch span, :is(.site-header, .site-sidebar, #aside, #mobile-menu) .nav li.hide-text .theme-color span, :is(.site-header, .site-sidebar, #aside, #mobile-menu) .nav li.hide-text > a > span, .nav li.hide-text > a > span { display:none !important; }

.site-header .menu-before-login .nav > li > a {
  position:relative; width:max-content; min-width:44px; max-width:100%; min-height:40px;
  box-sizing:border-box; padding:.375rem !important; justify-content:center; gap:.25rem;
  white-space:normal; overflow-wrap:anywhere; text-align:center; line-height:1.2;
}

@media (max-width: 782px) {
  .header-container > .menu-before-login { flex:0 1 auto !important; width:auto !important; min-width:0 !important; max-width:min(50vw,22rem) !important; margin-inline-start:0; }
  .site-header .menu-before-login .nav { min-width:0; max-width:100%; }
  .site-header .menu-before-login .nav > li { flex:0 1 auto; min-width:0; max-width:100%; }
  .site-header .menu-before-login .nav > li:not(.hide-text) > a > span {
    position:static; width:auto; height:auto; margin:0 !important; padding:0;
    overflow:visible; clip:auto; white-space:normal; min-width:0;
  }
  .site-header .menu-before-login .nav > li > a > svg { flex-shrink:0; }
}

/* Generic fields inherit their container limit; specialized forms retain their sizing. */
.input, button.btn-toggle-pwd, input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"], select, textarea { max-width:inherit; }
#search-state:checked ~ .site-header .search-form input { padding:0 1rem !important; opacity:1; display:block; transform:translate3d(0,0%,0); }

/* Expanded navigation keeps the whole icon and label inside its link. */
#menu-state:not(:checked) ~ .site-sidebar .nav > li > a,
#menu-state.hide-sidenav:checked ~ .site-sidebar .nav > li > a {
  width:100%; min-width:0; max-height:none; min-height:44px;
  margin:0; padding:.625rem .75rem; box-sizing:border-box;
  align-self:stretch; background:transparent; text-align:start;
}
#menu-state:not(:checked) ~ .site-sidebar .nav > li:not(.hide-text) > a,
#menu-state.hide-sidenav:checked ~ .site-sidebar .nav > li:not(.hide-text) > a {
  justify-content:flex-start;
}
.site-sidebar .nav > li > a > svg { flex-shrink:0; }
.site-sidebar .nav > li > a > span { min-width:0; white-space:normal; overflow-wrap:anywhere; }
@media (max-width:781px) {
  #menu-state:checked ~ .site-sidebar .nav > li > a {
    width:100%; min-width:0; max-height:none; min-height:44px;
    margin:0; padding:.625rem .75rem; box-sizing:border-box;
    align-self:stretch; background:transparent; text-align:start;
  }
  #menu-state:checked ~ .site-sidebar .nav > li:not(.hide-text) > a { justify-content:flex-start; }
}

/* Navigation feedback stays flat within the black sidebar. */
html body #aside.site-sidebar .nav li > a {
  box-shadow:none !important; filter:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
html body #aside.site-sidebar .nav li > a:is(:hover,:focus-visible),
html body #aside.site-sidebar .nav .current-menu-item > a { background:#10101045 !important; }

/*
 * Audio station, playlist and album headers share one layout: the cover at the top left, the info column beside it in a
 * logical order (title, creator, stats), and the action row last. Without a cover the same order applies in one column.
 * With a cover the header is a grid; the info blocks are flattened (display:contents) into it so the action row can sit
 * in the info column on wide screens and span the full width under the cover on tablet and phone.
 */
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station > .entry-header > .station-title-actions { display:contents !important; }
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station > .entry-header > .station-title-actions > .entry-title { order:0; flex:none !important; width:auto !important; margin:0 0 .15rem !important; }
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station > .entry-header > .station-title-actions > .entry-meta { order:4; margin-top:.5rem !important; }
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station > .entry-header > .collection-summary { margin-top:0 !important; }
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station:has(> .header-station-thumbnail) {
 display:grid !important;
 grid-template-columns:clamp(88px,16vw,176px) minmax(0,1fr);
 grid-template-rows:repeat(5,auto) 1fr;
 align-items:start !important;
 gap:0 1.25rem !important;
 padding-block:1rem .5rem !important;
 margin-bottom:.5rem !important;
}
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station > .header-station-thumbnail {
 grid-column:1; grid-row:1 / span 6; order:0; width:100% !important; height:auto !important;
 aspect-ratio:1; margin:0 !important; align-self:start; overflow:hidden;
}
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station > .header-station-thumbnail img {
 display:block; width:100% !important; height:100% !important; aspect-ratio:1;
 object-fit:cover; opacity:1 !important; transform:none !important; transition:none;
}
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station:has(> .header-station-thumbnail) > .entry-header { display:contents !important; }
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station:has(> .header-station-thumbnail) > .entry-header > .station-title-actions > .entry-title { grid-column:2; grid-row:1; }
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station:has(> .header-station-thumbnail) > .entry-header > .entry-artist { grid-column:2; grid-row:2; margin:0 !important; }
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station:has(> .header-station-thumbnail) > .entry-header > .entry-uploader { grid-column:2; grid-row:3; margin:.35rem 0 0 !important; }
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station:has(> .header-station-thumbnail) > .entry-header > .collection-summary { grid-column:2; grid-row:4; margin:.35rem 0 0 !important; }
html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station:has(> .header-station-thumbnail) > .entry-header > .station-title-actions > .entry-meta { grid-column:2; grid-row:5; margin:.75rem 0 0 !important; }
@media(max-width:900px) {
 html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station:has(> .header-station-thumbnail) { padding-inline:1rem !important; gap:0 .9rem !important; }
 html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station > .header-station-thumbnail { grid-row:1 / span 4; }
 html body:is(.single-station,.single-playlist,.single-album) #primary > article:not(:has(> .station-video-stage)) > .header-station:has(> .header-station-thumbnail) > .entry-header > .station-title-actions > .entry-meta { grid-column:1 / -1; grid-row:5; justify-content:flex-start; gap:.6rem; margin:.9rem 0 0 !important; }
}

/* Compact video visibility remains beside the queue, outside the options panel. */
@media(max-width:1100px) {
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-info > [data-plyr="video"] { width:var(--player-control-size) !important; min-width:var(--player-control-size) !important; height:var(--player-control-size) !important; padding:7px !important; flex:0 0 var(--player-control-size); }
}


/* Neutral navigation surfaces and inline waveform hierarchy. */
html body .site-sidebar, html body #aside.site-sidebar { margin:0 !important; background:var(--musiveo-dark-bg,#000) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border:1px solid #1212125e; box-shadow:none !important; box-sizing:border-box; }
.form-profile .form-section { min-width:0; border:1px solid #ffffff18 !important; border-radius:1rem; padding:1.25rem !important; margin-bottom:1.25rem; background:var(--musiveo-dark-bg,#000); }
html body .user-navigation[data-section-scroll] { position:sticky; top:var(--navbar-height,72px); z-index:var(--z-sticky,100); margin-bottom:1.5rem; box-shadow:0 .5px 0 var(--color-border); font-weight:400; width:auto; padding:0 var(--x-gap); background-color:rgb(0 0 0 / 85%) !important; mix-blend-mode:luminosity; }
.user-navigation .profile-section-scroll { background:#07070700 !important; border:1px solid #07070745 !important; border-radius:.75rem !important; padding:.2rem .6rem; scrollbar-color:#1010105c transparent !important; }
.user-navigation .profile-section-scroll .menu-item > a { background:#101010; gap:.4rem; }
.user-navigation .profile-section-scroll .count { position:static !important; transform:none !important; flex:none; margin:0 !important; }
.wp-block-loop .block-loop-waveform-item > .musiveo-waveform { grid-column:2; grid-row:1; align-self:center; min-height:64px; }
.wp-block-loop .block-loop-waveform-item > .entry-header { grid-column:1/-1; grid-row:2; }
.wp-block-loop .block-loop-waveform-item .entry-footer { flex:0 0 auto; }
@media(max-width:600px) { .wp-block-loop .block-loop-waveform-item .entry-footer { flex-wrap:wrap; } }
@media(max-width:782px) { html body :is(.site-header,.site-sidebar,#aside,#mobile-menu) .nav li.hide-text .theme-switch span { display:inline-block !important; } }
/* Header help opens below the trigger. */
html body #header .nav li.hide-text > a[aria-label] { position:relative; overflow:visible; }
html body #header .nav li.hide-text > a[aria-label]::before { display:none !important; }
html body #header .nav li.hide-text > a[aria-label]::after { content:attr(aria-label) !important; position:absolute; top:calc(100% + 6px) !important; bottom:auto !important; left:auto !important; right:0; transform:none !important; margin:0; padding:7px 10px; border:1px solid #333; border-radius:7px; background:#151515; color:#eee; font-size:12px; line-height:1.4; white-space:normal; width:max-content; max-width:min(220px,70vw); box-sizing:border-box; z-index:10; pointer-events:none; display:none; }
@media(hover:hover) { html body #header .nav li.hide-text > a[aria-label]:hover::after { display:block; } }
html body #header .nav li.hide-text > a[aria-label]:focus-visible::after { display:block; }

button.btn-like.active svg,button.btn-like.liked svg,[data-plyr="like"].plyr__control--pressed .icon--pressed { fill:var(--musiveo-accent) !important; stroke:var(--musiveo-accent) !important; }
html body.scrolled #header.site-header { background:var(--musiveo-dark-bg) !important; backdrop-filter:blur(var(--surface-glass-blur)); -webkit-backdrop-filter:blur(var(--surface-glass-blur)); border-bottom-color:rgb(0 0 0); }
/* The header is dark at rest and on scroll, not only after it. */
html body #header.site-header { background:var(--musiveo-dark-bg) !important; }
ul.menu-profile-menu-container { background:#101010 !important; border:1px solid #191919 !important; border-radius:.75rem !important; box-shadow:0 4px 12px rgb(0 0 0 / 15%); overflow:hidden; }
.site-header .nav { min-height:var(--navbar-height); min-width:2.5rem; padding:0 .25rem; }
.page-navigation .nav { padding-block:0; margin:.2rem 0 .2rem 5px; scrollbar-width:thin; }

.site-sidebar .menu-has-icon { --icon-width:var(--side-icon-width); --icon-height:var(--side-icon-height); margin:5px 0; }
#content .container { display:grid; grid-template-columns:minmax(0,1fr); padding:0 .5rem; }
.primary-menu-has-icon .site-sidebar .menu-header { padding:0 .5rem; box-shadow:none; }



@media(min-width:700px) and (max-width:782px) {
 #plyr-playlist:not(.now-playing) > .plyr:not(.plyr-fullscreen) > .plyr__controls { grid-template-columns:repeat(12,minmax(0,1fr)); }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) :is(.plyr-control-info,.plyr-control-info-content) { display:contents !important; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr__cover { grid-column:1; grid-row:1; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr__content { grid-column:2/10; grid-row:1; min-width:0; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-info > [data-plyr="video"] { grid-column:11; grid-row:1; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-info > [data-plyr="list"] { grid-column:12; grid-row:1; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .btn-like { grid-column:5; grid-row:3; justify-self:center; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) [data-plyr="prev"] { grid-column:6; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-btns > [data-plyr="play"] { grid-column:7; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) [data-plyr="next"] { grid-column:8; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > .plyr__volume { grid-column:9; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) [data-now-playing] { grid-column:10; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > [data-plyr="fullscreen"] { grid-column:11; }
 #plyr-playlist:not(.now-playing) .plyr:not(.plyr-fullscreen) .plyr-control-ctrl > .player-more { grid-column:12; }
}

@media(max-width:782px) { html body [data-mte-switcher] .mte-trigger__label { display:inline-flex !important; } }

html body .wp-block-loop .block-loop-waveform-item > .entry-header { flex-direction:row !important; }
html body .wp-block-loop .block-loop-waveform-item .entry-header-inner { width:auto !important; flex:1 1 12rem !important; }
html body .wp-block-loop .block-loop-waveform-item .entry-footer { width:auto !important; flex:0 0 auto !important; }
/* Track and waveform rows keep spaced items and stacked title/byline metadata. */
.wp-block-loop .block-loop-item:is(.block-loop-tracks-item, .block-loop-waveform-item) { padding-block:.5rem !important; background:#10101078; border:1px solid #23232336; margin:1px; }
.wp-block-loop .block-loop-item.block-loop-tracks-item { align-items:center; }
.wp-block-loop .block-loop-item.block-loop-tracks-item > .entry-header { flex:1 1 0; min-width:0; }
.wp-block-loop .block-loop-item.block-loop-tracks-item > :is(.btn-play-now,.btn-playlist,.post-thumbnail) { align-self:center; top:auto; margin-block:0; }
html body .wp-block-loop :is(.block-loop-tracks-item, .block-loop-waveform-item) .entry-header-inner { flex-direction:column !important; align-items:stretch !important; }
.wp-block-loop .block-loop-thumbnail-playback > .post-thumbnail:has(.thumbnail-placeholder) .entry-action { opacity:1; pointer-events:auto; }
/* Thumbnail-only rows keep their compact action group beside the title/byline. */
html body .wp-block-loop .block-loop-thumbnail-playback > .entry-header { flex-direction:row !important; flex-wrap:nowrap; align-items:center !important; gap:.5rem; }
html body .wp-block-loop .block-loop-tracks-item > .entry-header { flex-direction:row !important; flex-wrap:nowrap; align-items:center !important; gap:.5rem; }
html body .wp-block-loop .block-loop-tracks-item .entry-footer { min-width:0; max-width:100%; flex-wrap:nowrap; justify-content:flex-end; }
@container musiveo-media-row (min-width: 440px) {
 html body .wp-block-loop .block-loop-tracks-item > .entry-header { flex-direction:row !important; align-items:center !important; gap:.5rem; }
}
html body .wp-block-loop :is(.block-loop-thumbnail-playback,.block-loop-tracks-item) .entry-header-inner { width:auto !important; flex:1 1 0 !important; }
html body .wp-block-loop :is(.block-loop-thumbnail-playback,.block-loop-tracks-item) .entry-footer { width:auto !important; flex:0 0 auto !important; align-items:center; gap:4px; }
.wp-block-loop :is(.block-loop-tracks-item,.block-loop-waveform-item) .entry-footer :is(.entry-date,.play-duration) { display:inline-flex; color:var(--text-secondary-color,#888); font-size:.75rem; white-space:nowrap; padding:0; }
/* Duration and actions stay beside the track details, including narrow rows. */
html body .wp-block-loop .block-loop-item .entry-footer { justify-content:flex-end !important; margin-inline-start:auto; }
html body .wp-block-loop:not(.block-loop-hide-footer):not(.block-loop-hide-meta):not(.hide-more-actions) :is(.block-loop-tracks-item,.block-loop-waveform-item,.block-loop-thumbnail-playback) .entry-footer { display:flex !important; flex-wrap:nowrap; align-items:center; }
html body .wp-block-loop:not(.block-loop-hide-footer):not(.block-loop-hide-meta):not(.hide-more-actions) :is(.block-loop-tracks-item,.block-loop-waveform-item,.block-loop-thumbnail-playback) .entry-footer :is(.play-duration,.btn-like,.btn-more) { display:inline-flex !important; flex-shrink:0; }





/* Follow state labels retain their icon and text together. */
html body .btn-follow > .follow,html body .btn-follow.active > .following { display:inline-flex !important; align-items:center; gap:.4rem; }
html body .btn-follow > .following,html body .btn-follow.active > .follow { display:none !important; }
html body .btn-follow > span > svg { display:block; width:18px !important; height:18px !important; min-width:18px !important; flex:0 0 18px; }

html body .user-header .profile-primary-actions > .btn-play-wrap { margin:0 !important; }
html body .user-header .profile-primary-actions .btn-play { border-radius:50% !important; }
@media(max-width:600px) {
 html body .user-header .profile-primary-actions { gap:.35rem !important; }
 html body .user-header .profile-primary-actions .btn-more { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; padding:8px !important; }
}

/* Single media headers share readable totals and compact member identity. */
html body .header-station .entry-meta > .station-play-facts { display:inline-flex; align-items:center; flex:none; color:var(--body-color,#ccc); font-size:.875rem; white-space:nowrap; }
html body .header-station .entry-meta .station-play-total { display:inline-flex !important; align-items:center; flex:none; margin:0; padding:.3rem .5rem; background:transparent; color:var(--body-color,#ccc); font-size:.8125rem; white-space:nowrap; }
html body .header-station .station-play-total .play-count,html body .header-station .station-play-total .count { display:inline !important; position:static !important; margin:0 !important; padding:0 !important; background:transparent !important; transform:none !important; }
html body.single-station .header-station .station-play-total .play-count::before { margin-inline-end:2px; }
html body .header-station .station-member > .station-member-avatar { display:inline-flex !important; flex:0 0 32px; width:32px; height:32px; margin:0; padding:0; overflow:hidden; border-radius:50%; }
html body .header-station .station-member-avatar img { display:block !important; width:32px !important; height:32px !important; min-width:32px; max-width:32px; margin:0 !important; padding:0; border-radius:50%; object-fit:cover; }
html body .header-station .entry-uploader > .btn-follow { display:inline-flex !important; align-items:center; justify-content:center; width:auto !important; }

/* Static metadata keeps identical geometry across the scroll-state boundary. */
html body #primary > article > .header-station {
 padding:1rem !important; margin-bottom:1.5rem !important;
 transition:none !important;
}
html body #primary > article:has(> .musiveo-waveform) > .header-station {
 padding-block:1rem .5rem !important; margin-bottom:0 !important;
}
/* Body-level action menus clear the attached media and dock layers. */
html body #dropdown-more.musiveo-ui-menu { --z-modal:100000; position:fixed; z-index:var(--z-modal) !important; }
@media(max-width:782px) {
 html body .site-sidebar, html body #aside.site-sidebar {
  top:0 !important; bottom:0 !important; height:100dvh !important;
  max-height:100dvh !important;
 }
}

@media(min-width:783px) {
 html body .site-sidebar, html body #aside.site-sidebar, html body .slidein-sidebar:not(.minimized) {
  bottom:calc(var(--dock-reserved-height,var(--open-player-height,0px)) + var(--mobile-menu-height,0px)) !important;
  height:auto !important; min-height:0 !important; max-height:none !important;
 }
}

.station-content .station-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }
.station-content .station-tags a { display:inline-flex; max-width:100%; padding:.25rem .55rem; border-radius:.5rem; background:#171717; color:#ddd; font-size:.875rem; overflow-wrap:anywhere; }
.station-content .station-tags a:hover { background:#242424; color:#fff; }

.station-discussion { --discussion-surface:var(--musiveo-dark-bg) !important; background:var(--musiveo-dark-bg) !important; border:1px solid #141414; }
.station-discussion .comment-inline-editor textarea, .station-discussion #commentform #comment { display:block; box-sizing:border-box; width:100% !important; padding:14px 14px 32px !important; margin:0 !important; line-height:1.5; color:#eee; background:#0a0a0a !important; border:1px solid #292929 !important; border-radius:14px !important; box-shadow:none !important; }
.station-discussion #commentform #comment { padding-right:62px !important; padding-bottom:40px !important; }
.comment-emoji-picker { position:absolute; left:8px; bottom:4px; z-index:2; }
.comment-emoji-picker summary { display:flex; align-items:center; justify-content:center; width:32px; height:32px; list-style:none; cursor:pointer; border-radius:8px; color:#aaa; }
.comment-emoji-picker summary::-webkit-details-marker { display:none; }
.comment-emoji-picker summary:hover, .comment-emoji-picker[open] summary { background:#222; color:#fff; }
.comment-emoji-picker summary svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; }
.comment-emoji-grid { position:absolute; left:0; bottom:40px; width:min(300px,calc(100vw - 64px)); display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:3px; padding:8px; background:#1d1d1d; border:1px solid #333; border-radius:14px; box-shadow:0 8px 32px #0009; }
.comment-emoji-picker:not([open]) .comment-emoji-grid { display:none; }
.station-discussion .comment-emoji-grid button { min-width:0 !important; min-height:30px !important; width:100%; height:32px; margin:0; padding:0; border:0; border-radius:7px; background:transparent; font-size:21px; line-height:1; }
.station-discussion .comment-emoji-grid button:hover { background:#353535; }
.comment-emoji-picker :is(summary,button):focus-visible { outline:2px solid #fff; outline-offset:1px; }
.station-description-taxonomies { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.75rem; }
#primary .station-description-taxonomies :is(.station-terms,.station-tags) { margin:0; }

.station-discussion :is(.comment-inline-editor textarea,#commentform #comment) { resize:none !important; overflow:hidden; }
.comment-emoji-grid { box-sizing:border-box; }
.comment-emoji-picker.opens-below .comment-emoji-grid { top:40px; bottom:auto; }

/* The growing composer must not clip its native picker. */
.station-discussion #commentform.comment-form { overflow:visible; }
.station-discussion #commentform:has(.comment-emoji-picker[open]) { position:relative; z-index:5; }
@media(max-width:782px) {
 html body #header.site-header .header-container > .site-brand { display:none !important; }
 html body #header.site-header .header-container > .header-search { order:3 !important; }
 html body #header.site-header .header-container > #header-nav { order:4 !important; }
}

/* Keep the attached station presentation while the transport dock is closed. */
html body #plyr-playlist.player.fixed-bottom.player-inline-only { height:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; pointer-events:none; overflow:visible !important; }
html body #plyr-playlist.player.fixed-bottom.player-inline-only .plyr__controls,
html body #plyr-playlist.player.fixed-bottom.player-inline-only .plyr-list,
html body #plyr-playlist.player.fixed-bottom.player-inline-only .player-more-panel { display:none !important; }
html body #plyr-playlist.player.fixed-bottom.player-inline-only .station-video-pinned { pointer-events:auto; }

/* Bell dropdown rows are styled once, in the NOTIFICATION ROWS block at the end of this file (the name is part of the sentence). */


/* Loop block styling moved to musiveo-loops plugin (build/style.css).
 * Theme no longer overrides plugin's grid/flex layout.
 */


/*
   THE PLAYLIST / SINGLE ROWS SCROLL SIDEWAYS AGAIN.

   "More From <author>" and "More like this" are rendered by Musiveo Plays as a
   `.block-loop-items.related-content-grid` inside a `section.related-content-row`
   -- a DIFFERENT system from the loop block's slider, with its own server-rendered
   scroll buttons rather than the ones loop.js appends.

   The rule that laid those rows out as a horizontal scroller was removed by an
   earlier edit to this file, which left only the generic fallback above:

       .related-content-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); }

   so the rows became a three-column grid. Restored here, after the fallback, with
   the per-breakpoint column counts the section had before: four across, then three,
   two, then a single peek.
*/


@media (max-width: 1100px) { .related-content-row .related-content-grid { grid-auto-columns: calc((100% - 2 * var(--related-gap)) / 3); } }
@media (max-width: 800px)  { .related-content-row .related-content-grid { --related-gap: .75rem; grid-auto-columns: calc((100% - var(--related-gap)) / 2); } }
@media (max-width: 480px)  { .related-content-row .related-content-grid { grid-auto-columns: 78%; } }
@media (prefers-reduced-motion: reduce) { .related-content-row .related-content-grid { scroll-behavior: auto; } }


/* ============================================================
   RESTORED -- these rules were deleted from this file in error and
   are what make the loop sliders size correctly. Taken verbatim
   from musiveo-1.3.9, which is where the sliders last rendered
   correctly. Do not delete this block again.
   ============================================================ */

/*
   BELOW 480px there is no room for a scrollbar-hider, and none is needed once the units
   above are correct. What is still worth capping is the loop grid, whose minimum column
   width is a fixed px and which therefore cannot shrink below it on a narrow phone.
   `minmax(0, 1fr)` is the load-bearing part: the default `1fr` is `minmax(auto, 1fr)`,
   and `auto` refuses to go below the content's minimum, which is how a grid refuses to
   shrink and pushes the page sideways.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.block-loop-items,
	.wp-block-columns {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ===========================================================================
   2. THE SEARCH BAR WAS PAINTING OVER THE NOTIFICATION PANEL

   The header is a flex row: brand, then the search form, then the account controls, and
   the notification `ul` sits AFTER the search form in the DOM. So on a row with no gap
   allowance the two boxes touch, the panel loses, and the panel is the thing that is cut
   off -- which is what "the search bar is overlapping the notification bell dropdown"
   describes.

   Two separate problems, and only fixing the paint order fixes neither:

     1. STACKING. Both are non-positioned or low-z siblings in the same stacking context,
        so "who wins" is decided by DOM order. `--z-dropdown` on the panel does nothing
        while the search form is in the same context and paints later.

     2. GEOMETRY. Even correctly stacked, the panel is 340px wide anchored to the bell.
        If the search form overlaps it, the panel is still partly unclickable, because
        the topmost box eats the click.

   So: raise the panel's stacking context explicitly, and make the search form not span
   the gap.
   --------------------------------------------------------------------------- */

#dropdown-notification,
.dropdown-toggle.dropdown-notifications,
.dropdown-toggle.account-menu-container {
	position: relative;
	z-index: var(--z-dropdown);
}

custom.css already declares the palette on `body`:

       --body-bg-color: #000   --color-grey-500: #101010
       --color-grey-600: #080808   --color-grey-700: #000000e0

   So the theme intends black. The block wrappers did not follow it: WordPress's own
   column/group defaults are transparent over whatever is behind them, and on a black page
   a transparent wrapper over a lighter parent reads as a grey panel, and over the content
   area reads as a hole. Both look like "the blocks are not styled".

   These are set EXPLICITLY rather than left transparent so the value is visible and
   greppable. A block that inherits its background is a block whose appearance depends on
   its parent's background, and that is exactly the arrangement that produced the report.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   3. DARK SURFACES — THE SITE IS BLACK AND DARK GREY, AND THE BLOCKS WERE NOT

   custom.css already declares the palette on `body`:

       --body-bg-color: #000   --color-grey-500: #101010
       --color-grey-600: #080808   --color-grey-700: #000000e0

   So the theme intends black. The block wrappers did not follow it: WordPress's own
   column/group defaults are transparent over whatever is behind them, and on a black page
   a transparent wrapper over a lighter parent reads as a grey panel, and over the content
   area reads as a hole. Both look like "the blocks are not styled".

   These are set EXPLICITLY rather than left transparent so the value is visible and
   greppable. A block that inherits its background is a block whose appearance depends on
   its parent's background, and that is exactly the arrangement that produced the report.
   --------------------------------------------------------------------------- */

 
.wp-block-column {
	flex-grow: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
	margin: auto;
	padding: 0.3rem;
	border-radius: 9px;
	background-color: var(--musiveo-dark-bg);
	box-shadow: none;
}

.wp-block-loop-slider .block-loop-items.is-slider-native {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--loop-grid-gap, 1rem);
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* The theme's grid rule sets this; a slider must not wrap or it is not one. */
	grid-template-columns: none;
}

.wp-block-loop-slider .block-loop-items.is-slider-native::-webkit-scrollbar {
        display: none;
        }

.wp-block-loop-slider .block-loop-items.is-slider-native > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-width: 0;
}

.block-loop-slider-arrows {
	display: flex;
	justify-content: flex-end;
	gap: .25rem;
	margin-top: .5rem;
}

.block-loop-slider-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease;
}

.block-loop-slider-arrow:hover:not(:disabled) {
	background: #1c1c1c;
}

.block-loop-slider-arrow:disabled {
	opacity: .3;
	cursor: default;
}

/* Keyboard focus must be visible on a control that scrolls the whole loop. */
.block-loop-slider-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

body {
	padding-left: clamp(0.75rem, 2vw, 2rem);
	padding-right: clamp(0.75rem, 2vw, 2rem);
}

/*
   The offset box must actually be the offset box. `width: auto` alone is not
   enough where a grid child is allowed to be wider than its parent: a grid item
   defaults to `min-width: auto`, which is its content's min-content size, and
   that is what let a loop card run out under the sidebar.
*/
.site-content,
.archive-content,
#content {
	min-width: 0;
}

.block-loop-items,
.wp-block-loop .block-loop-items {
	min-width: 0;
	max-width: 100%;
}

/* Loop block styling moved to musiveo-loops plugin (build/style.css).
 * Theme no longer overrides plugin's grid/flex layout.
 */

/*
   A slider is the one layout that is SUPPOSED to be wider than the visible
   area -- it scrolls. It is therefore clipped to the content box rather than the
   viewport, so it scrolls inside the offset instead of underneath the sidebar.
*/
.wp-block-loop-slider .block-loop-items.is-slider-native {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Cards keep their own gap; the body gutter is page-level padding, not a card margin. */
@media (max-width: 576px) {
	body {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

/*
   Respect a reader who has asked for less motion: the slider is the only thing
   here that moves on its own.
*/
@media (prefers-reduced-motion: reduce) {
	.wp-block-loop-slider .block-loop-items.is-slider-native {
		scroll-behavior: auto;
	}
	.block-loop-slider-arrow {
		transition: none;
	}
}

/* The wrapper must NOT lay its children out horizontally. */
.wp-block-loop[data-plugin="slider"],
.wp-block-loop.wp-block-loop-slider,
.block-loop-slider {
	display: block;
	overflow: visible;
	grid-auto-flow: unset;
	grid-auto-columns: unset;
	grid-template-columns: none;
	scroll-snap-type: none;
}

/* The heading is always a full-width row ABOVE the cards, never beside them. */
.wp-block-loop[data-plugin="slider"] > .block-loop-title,
.wp-block-loop.wp-block-loop-slider > .block-loop-title {
	width: 100%;
	flex: 0 0 100%;
	margin-bottom: .75rem;
}

/*
   The items container is the scroller. Full width of the column -- the 85% cap
   and the negative half-gutter bleed are what made the cards small, and the
   bleed also pushed the row outside its box, which is how it ended up under the
   sidebar.
*/
.wp-block-loop[data-plugin="slider"] > .block-loop-items,
.wp-block-loop.wp-block-loop-slider > .block-loop-items {
	--loop-max-width: 100%;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--loop-grid-gap, 1rem);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	grid-template-columns: none;
}

.wp-block-loop[data-plugin="slider"] > .block-loop-items::-webkit-scrollbar,
.wp-block-loop.wp-block-loop-slider > .block-loop-items::-webkit-scrollbar {
	display: none;
}

/*
   Each card fills an exact share of the visible width.

   This used to read `flex: 0 0 auto` with `max-width: none`, which let a card be
   exactly as narrow as its content -- measured, a card came out 6.5px wide before
   `loop.js` ran. Combined with the wrapper being a column-flow grid (so the track
   itself had collapsed to ~221px) that is the loop that shows as a narrow
   two-column cluster on first paint and then snaps to the set count once the
   script writes pixel widths over the top.

   So the basis is stated, as the comment here always claimed it was: one
   `--loop-slides`-th of the track, gaps included, which is exactly what
   `measure()` computes in `loop.js`:

       usable = clientWidth - gap * (per - 1)
       width  = usable / per

   `--loop-slides` is emitted by the loops block from the same `cols` that becomes
   `slidesToShow`. The script re-states the same number in pixels, which now agrees
   with the stylesheet instead of replacing `auto`.

   Mobile is unaffected: the `is-slider-native` rules below are `!important` inside
   `max-width: 782px` and give one full-width slide.
*/
.wp-block-loop[data-plugin="slider"] > .block-loop-items > .block-loop-item,
.wp-block-loop.wp-block-loop-slider > .block-loop-items > .block-loop-item {
  flex: 0 0 calc((100% - (var(--loop-slides, 4) - 1) * var(--loop-grid-gap)) / var(--loop-slides, 4));
  min-width: 0;
  scroll-snap-align: start;
  max-width: calc((100% - (var(--loop-slides, 4) - 1) * var(--loop-grid-gap)) / var(--loop-slides, 4));
}

/* The figure inside a card must fill the card -- this is the aspect ratio. */
.wp-block-loop-slider .block-loop-item .post-thumbnail {
	width: 100%;
	margin: 0;
}

.wp-block-loop-slider .block-loop-item .post-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
}

/*
   Arrows sit UNDER the row on a full-width slider. Absolutely positioning them
   over the cards would put them on top of the first and last video, which is
   where the reference site puts them but only because its cards are narrower.
*/
.wp-block-loop-slider .block-loop-slider-arrows {
	position: static;
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: .75rem;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-loop[data-plugin="slider"] > .block-loop-items,
	.wp-block-loop.wp-block-loop-slider > .block-loop-items {
		scroll-behavior: auto;
	}
}

.block-loop-video-item .entry-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/* THE NAME AND THE BADGE: ONE ROW, SIDE BY SIDE. */
.block-loop-video-item .byline {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

/* THE NAME AND THE BADGE: ONE ROW, SIDE BY SIDE.
 *
 * `display: block` on the vcard is NOT INERT -- it is what carries the ellipsis for a long author
 * name, because `text-overflow` needs a block box with a constrained width. **So it is kept**, and
 * the rule that actually centres the badge is placed BEFORE it at a HIGHER specificity, rather than
 * replacing it.
 *
 * MEASURED 2026-10-05, and this rule is the reason 4 of 20 badges were still uncentred after
 * section 15 landed. The badge's own container is a `<span class="author vcard">`, and:
 *
 *     .author.vcard:has(> .user-verified)             display: inline-flex   <- section 15
 *     .block-loop-video-item .byline .author.vcard    display: block         <- the rule below
 *     specificity ~3 against ~7
 *
 * **The winner was my own earlier work in this same file** -- 10.110: the rule that beat the new one
 * was written earlier in this same rebuild, and grepping your own sheet before adding a second rule
 * for a selector is how you find it. 16 of 20 badges centred; the four inside
 * `.block-loop-video-item` did not, and they were the four with the largest offset (22px).
 *
 * `flex` rather than `inline-flex` here: this vcard is a flex ITEM of `.byline`, so it is sized by
 * its own content either way.
 */
.block-loop-video-item .byline .author.vcard:has(> .user-verified) {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.block-loop-video-item .byline .author.vcard,
.block-loop-video-item .byline .url {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}

/*
 * A CARD IN A GRID IS NOT WIDER THAN ITS COLUMN, EVEN FOR A LONG NAME.
 *
 * The ellipsis above is real, but it never applied, because nothing in the chain
 * below `.entry-title` had a width it could be smaller than. Measured on the
 * profile's video section at a 320px column, with the artist name this site
 * actually stores:
 *
 *     .entry-header    334px   <- 14px outside a 320px card
 *     .entry-meta      322px   <- 8px outside it, the overflow that is visible
 *     .byline .url     288px, scrollWidth 288px, so no truncation at all
 *
 * Three separate causes, and each is one line:
 *
 *   1. `.entry-header` is a stretched item of the card's column flex box, and its
 *      computed max-width was `797.4px` -- not `100%`. `max-width: 100%` resolves
 *      against the card and clamps it.
 *   2. `.entry-header-inner` sets `align-items: baseline`, so `.entry-meta` was
 *      baseline-aligned and therefore sized to its own content rather than
 *      stretched. `align-items: stretch` hands it the column's width.
 *   3. With a definite width at last, `max-width: 100%` on `.entry-meta` and on
 *      `.byline` -- whose shared-UI value is `fit-content`, and whose min-content is
 *      the whole name because of `white-space: nowrap` -- lets the ellipsis the
 *      rule above already declared do its job: `.url` becomes 230px against a
 *      288px name.
 *
 * A short name is untouched: it is its own content width and nothing asks it to be
 * narrower. The scope is a video card in a non-slider grid, which is the only place
 * this card is drawn outside a slider.
 */
.wp-block-loop.block-loop-grid:not(.wp-block-loop-slider) .block-loop-video-item > .entry-header {
  max-width: 100%;
}

.wp-block-loop.block-loop-grid:not(.wp-block-loop-slider) .block-loop-video-item .entry-header-inner {
  align-items: stretch;
}

.wp-block-loop.block-loop-grid:not(.wp-block-loop-slider) .block-loop-video-item .entry-meta,
.wp-block-loop.block-loop-grid:not(.wp-block-loop-slider) .block-loop-video-item .byline {
  max-width: 100%;
}

.block-loop-video-item .byline .author.vcard {
  min-width: 0;
}

/* THE NUMBERS: THEIR OWN ROW, UNDER THE NAME, AND QUIETER THAN IT. */
.block-loop-video-item .entry-meta-sub {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.block-loop-video-item .play-count,
.block-loop-video-item .entry-meta-date {
  display: inline-block;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: #9a9aa6;
  white-space: nowrap;
}

.block-loop-video-item .play-count .count {
  font-variant-numeric: tabular-nums;
}

.block-loop-video-item .post-thumbnail {
  position: relative;
}

.block-loop-video-item .entry-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 2px 6px;
  background-color: rgba(0, 0, 0, 0.78);
  border-radius: 3px;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.block-loop-video-item .entry-badge .play-duration {
  display: inline-block;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/*
 * THE ASPECT RATIO IS CARRIED BY THE FIGURE, WHICH IS THE ONLY THING THAT KNOWS IT.
 *
 * `.post-thumbnail` is the video card's artwork box. Giving it `aspect-ratio` makes the card
 * a fixed shape at every width, which is what a row of video thumbnails needs -- otherwise the
 * height comes from the text under the figure and two cards with different title lengths are
 * different heights, which is the ragged-row report.
 *
 * `--loop-ratio` comes from the block, and `1.6` is this site's own stored value, so it is used
 * rather than hardcoded. `auto` is the fallback so a block with no ratio behaves as it did.
 */
 
.block-loop-video-item .post-thumbnail,
.block-loop-video-item .entry-thumbnail {
  height: auto !important;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

/* The image fills that box rather than keeping its own intrinsic height. */
.block-loop-video-item .post-thumbnail img,
.block-loop-video-item .post-thumbnail .musiveo-cover,
.block-loop-video-item .post-thumbnail .svg-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * A NON-SLIDER VIDEO ROW IS A GRID OF LANDSCAPE CARDS THAT DIVIDE THE ROW EXACTLY.
 *
 * `minmax(0, 1fr)` for the reason in section 10: a fixed length in `minmax()` is a floor, and a
 * grid with floors overflows instead of narrowing. `--loop-columns` decides how many.
 */
.wp-block-loop:not(.wp-block-loop-slider) .block-loop-video-item {
  min-width: 0;
}

/*
 * A SLIDER CARD IS SIZED BY THE JAVASCRIPT, NOT BY A BREAKPOINT.
 *
 * This used to read, inside the 782px query below:
 *
 *     flex: 0 0 100% !important;
 *     max-width: 100% !important;
 *
 * and `!important` was deliberate -- it had to beat the inline width
 * `measure()` writes. But it also meant that below 782px every card was pinned
 * to the full track width. The next card started exactly at the right edge, so
 * there was no peek, and a phone got a full-bleed stack that gave no hint it
 * scrolled at all. It also made the width-by-space logic unreachable on every
 * screen under 782px, because a `!important` author rule cannot be out-voted by
 * an inline style.
 *
 * The `!important` is gone. `measure()` now decides the card width from the
 * space actually available -- minimum width first, column count second -- and
 * an inline style outranks this stylesheet without needing either of them to
 * shout.
 *
 * The two rules below keep a sensible width for the moment BEFORE the slider
 * initialises: `.is-slider-native` is added by loop.js itself, so a rule scoped
 * to it only applies once the JavaScript is in charge. Without that marker there
 * would be no way to tell "JS has not measured yet" from "JS says this wide",
 * and the unmeasured state would fall back to whatever `--loop-slides` implies.
 */
@media (max-width: 782px) {

  /* Before loop.js initialises: one full-width slide, as a slider should read. */
  .wp-block-loop-slider .block-loop-items > .block-loop-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .wp-block-loop-slider .block-loop-items.is-slider-native > .block-loop-item {
    aspect-ratio: 16 / 9;
    scroll-snap-align: start;
  }

  .wp-block-loop-slider .block-loop-items.is-slider-native > .block-loop-item .post-thumbnail,
  .wp-block-loop-slider .block-loop-items.is-slider-native > .block-loop-item .entry-thumbnail {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  /*
   * SCROLL-SNAP IS WHAT MAKES IT A SLIDER AND NOT A SCROLLBOX.
   *
   * `x mandatory` is set by the JavaScript, and `scroll-snap-stop: always` stops a fast swipe
   * from skipping a slide -- without it a flick on a phone carries three videos past, which is
   * the difference between a slider and a scrollbar.
   */
  .wp-block-loop-slider .block-loop-items.is-slider-native {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .wp-block-loop-slider .block-loop-items.is-slider-native > .block-loop-item {
    scroll-snap-stop: always;
  }

  /* The arrows are a pointer affordance; on a phone the swipe is the control. */
  .wp-block-loop-slider .block-loop-slider-arrows {
    display: none;
  }
}

/*
 * THE ARROWS, ON A POINTER DEVICE, SIT INSIDE THE ROW RATHER THAN BESIDE IT.
 *
 * They are appended to the loop WRAPPER by loop.js (`loop.appendChild( controls )`), so
 * absolutely positioned against it they sit over the right-hand card -- which is the only
 * useful place for them, and the only place they are visible at all.
 */
@media (min-width: 783px) {

  /*
   * THE DESCENDANT SELECTOR IS LOAD-BEARING, AND THIS SHEET ALREADY HAD A RULE SAYING
   * `position: static`.
   *
   * L1664 of this same file:
   *
   *     .wp-block-loop-slider .block-loop-slider-arrows { position: static; display: flex; … }
   *
   * is (0,2,0) and sets `position: static` explicitly. Written as the bare
   * `.block-loop-slider-arrows` this rule is (0,1,0) and LOSES TO IT. The measurement said so:
   *
   *     before   arrows { display: "flex", w: 758, pos: "static", y: 3014 }
   *
   * **`w: 758` is the giveaway.** A static flex box is block-level, so the arrow container is
   * as wide as the loop and sits UNDER the cards as a strip of its own. That is the "slider is
   * not working correctly" half of the report, and reading the source would not have found it:
   * both rules are present, later in the file than the frozen sheets, inside a media query, and
   * contradicting each other.
   *
   * 10.88 one section over: a media query is a CONDITION and not a scope, so an unscoped rule
   * competes with a scoped one and loses on specificity rather than on order. **The fix is the
   * selector, not `!important`** -- there was no `!important` to fight, only a class.
   */
  .wp-block-loop-slider .block-loop-slider-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.25rem;
    margin-top: 0;
    width: auto;
  }

  .wp-block-loop-slider {
    position: relative;
  }

  .block-loop-slider-arrows .is-prev {
    left: 4px;
  }

  .block-loop-slider-arrows .is-next {
    right: 4px;
  }

  .block-loop-slider-arrows button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.72);
    color: #ffffff;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
  }

  .block-loop-slider-arrows button:disabled {
    opacity: 0.25;
    cursor: default;
  }

  /* A DISABLED ARROW MUST NOT BE HOVERABLE, or it looks live. */
  .block-loop-slider-arrows button:disabled:hover {
    background-color: rgba(0, 0, 0, 0.72);
  }
}

.related-content-grid .block-loop-item { width:100% !important; margin:0 !important; min-width:0; }

@media(max-width:800px) { .related-content-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; } }

.block-loop-item .entry-title { min-width:0; overflow-wrap:anywhere; }

.block-loop-item .post-thumbnail { flex-shrink:0; overflow:hidden; margin-top:0; }

.block-loop-item .post-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; }

.block-loop-row .block-loop-item:where(:not(.block-loop-item-user)) { align-items:flex-start !important; gap:12px; }

.block-loop-row .block-loop-item > .entry-header { flex:1 1 0; margin:0 !important; padding:0 !important; }

.block-loop-row .block-loop-item .entry-header-inner { width:100%; }

.block-loop-row .block-loop-item:where(:not(.block-loop-item-user)) .entry-title { margin:0 0 .4rem !important; font-size:15px !important; line-height:1.4 !important; }

.block-loop-row .block-loop-item .entry-title > a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.block-loop-row .block-loop-item .entry-meta { margin:.25rem 0 !important; font-size:12px; line-height:1.5; }

@media(max-width:600px) { .form-profile .form-row-submit button[type=submit] { width:100%; } }

@media(prefers-reduced-motion:reduce) { .form-profile .form-row-submit button[type=submit] { transition:none; } }

/* Row-card content must not split into competing title and metadata columns. */
.block-loop-row .block-loop-item > .entry-header { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:4px; }

.block-loop-row .block-loop-item:where(:not(.block-loop-item-user)) .entry-header-inner { display:flex !important; flex-direction:column !important; align-items:stretch !important; flex:0 0 auto !important; min-width:0 !important; width:100% !important; }

.block-loop-row .block-loop-item:not(.block-loop-item-user) .entry-title { width:100% !important; min-height:2.8em; }

.block-loop-row .block-loop-item .entry-meta .author { display:flex; align-items:center; gap:4px; min-width:0; }

.block-loop-row .block-loop-item .entry-meta .author > a { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; flex:1 1 auto; }

.block-loop-row .block-loop-item .entry-footer { display:flex; flex-wrap:wrap; align-items:center; gap:4px; width:100%; min-width:0; }

.block-loop-row .block-loop-item .entry-footer .btn-more, .block-loop-row .block-loop-item .entry-footer .btn-like { min-width:36px !important; min-height:36px !important; height:36px !important; margin:0 !important; padding:6px !important; }

.block-loop-row .block-loop-item .entry-meta, .block-loop-row .block-loop-item .byline { min-width:0 !important; max-width:100% !important; width:100%; }

.block-loop-row .block-loop-item .entry-header-inner > * { min-width:0 !important; max-width:100%; }

@media(max-width:782px) { .site-header .search-form { height:40px !important; min-height:40px !important; padding-block:0 !important; } }

/* The search stays in the flow and shrinks so it never covers the header icons; only a viewport wide enough for both unequal side groups centres it. */
@media(min-width:783px) {
 .site-header .header-container { position:relative; }
 .site-header .header-container > .search-form { position:relative !important; left:auto !important; transform:none; margin:0 0 0 auto !important; flex:0 1 min(320px,28vw) !important; width:min(320px,28vw) !important; min-width:9rem; }
}
@media(min-width:1280px) {
 .site-header .header-container > .search-form { position:absolute !important; left:50% !important; transform:translateX(-50%); margin:0 !important; flex:none !important; }
}

/* Keep the scroller contents centred while retaining its transient scrollbar. */
.user-navigation .profile-section-scroll { display:flex; align-items:center; min-height:56px; box-sizing:border-box; }

@media(max-width:767px) {
 #plyr-playlist:not(.plyr-full-player) .plyr-control-btns { align-self:center; }
 #plyr-playlist:not(.plyr-full-player) .plyr-control-btns > .plyr-control-prog { position:absolute; inset:0 0 auto; height:0; min-height:0; }
 #plyr-playlist:not(.plyr-full-player) .plyr-control-btns > button { align-self:center; }
}

#plyr-playlist [data-player-tip] > .plyr__tooltip { pointer-events:none; }

#plyr-playlist [data-player-tip]:focus-visible > .plyr__tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }

.user-navigation .profile-section-scroll { scrollbar-width:auto; padding-block:5.2px 1.2px; }

.user-navigation .profile-section-scroll > .nav { flex:0 0 auto; }

.user-navigation .profile-section-scroll, .user-navigation .profile-section-scroll.is-scrolling { scrollbar-color:auto !important; }

@supports (-moz-appearance:none) { .user-navigation .profile-section-scroll { scrollbar-width:thin; scrollbar-color:transparent transparent !important; } .user-navigation .profile-section-scroll.is-scrolling { scrollbar-color:#777 transparent !important; } }

/* Size static row grids from available content width rather than viewport alone. */
.block-loop-row .block-loop-item:not(.block-loop-item-user) .entry-title { min-height:0 !important; margin-bottom:0 !important; }

.block-loop-row .block-loop-item:where(:not(.block-loop-item-user)) .entry-header-inner { gap:2px !important; }

.block-loop-row .block-loop-item .entry-meta { margin-block:0 !important; }

.block-loop-row .block-loop-item .entry-footer { flex-wrap:nowrap; }

.wp-block-loop.block-loop-grid.user-collection-grid > .block-loop-items { grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)) !important; }

.wp-block-loop-slider > .block-loop-items.is-slider-native:has(> .block-loop-video-item) { align-items:flex-start !important; }



#dropdown-more { box-sizing:border-box; transform:none !important; animation:none !important; transition:none !important; overflow:auto; }

/* Featured cards retain their artwork and readable actions within one surface. */
.wp-block-loop .block-loop-hero { display:flex !important; position:relative; min-width:0; border:1px solid #0b0b0ba8; border-radius:20px; overflow:hidden; background:linear-gradient(155deg,#1e1e1e6e,#0000001f); box-shadow:0 8px 24px #0003; }

.wp-block-loop .block-loop-hero .post-thumbnail { position:relative; width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:16 / 10 !important; margin:0 !important; }

.wp-block-loop .block-loop-hero .post-thumbnail img { display:block; width:100% !important; height:100% !important; object-fit:cover; }

.wp-block-loop .block-loop-hero .entry-header { position:static !important; display:flex !important; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px !important; margin:0; background:transparent; }

.wp-block-loop .block-loop-hero .entry-header-inner { min-width:0; flex:1; padding:0; }

.wp-block-loop .block-loop-hero .entry-title { margin:0 !important; font-size:clamp(17px,1.5vw,22px); line-height:1.35; }

.wp-block-loop .block-loop-hero .entry-title a { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; background:none !important; }

.wp-block-loop .block-loop-hero .entry-summary { margin:8px 0 0; color:#b9b9c2; font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.wp-block-loop .block-loop-hero .entry-footer { display:flex !important; flex:0 0 auto; align-items:center; gap:6px; margin:0 !important; padding:0; }

.wp-block-loop .block-loop-hero .entry-footer button { width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }

.wp-block-loop-slider .block-loop-items.is-slider-native > .block-loop-hero { flex:0 0 min(100%,clamp(260px,36vw,440px)) !important; width:auto !important; max-width:440px !important; aspect-ratio:auto !important; }

/*
 * ARROWS UNDER THE LOOP, FAR RIGHT. The "more" pill stays in the heading.
 *
 * These were written to pin the arrows over the header's top-right corner and pad
 * the heading by 96px to make room. The loops stylesheet now places them under the
 * loop, right-aligned, so the reservation is dropped and the corner pinning is
 * withdrawn. The mobile overlay rules further down are a descendant selector and
 * are deliberately left alone.
 */
.wp-block-loop-slider:has(> .block-loop-slider-arrows) > .block-loop-title { padding-right:0; min-height:0; }

.wp-block-loop-slider > .block-loop-slider-arrows { position:static !important; top:auto !important; right:auto !important; left:auto !important; bottom:auto !important; transform:none !important; width:auto !important; margin:12px 0 0 !important; display:flex !important; justify-content:flex-end; }

/* Keep volume accessible without reserving a wide slider on small screens. */
.plyr-playlist .plyr__volume { display:flex !important; min-width:0; flex:0 0 auto; }

/* Compact recommendation rows use native scrolling. */
.related-content-row { min-width:0; margin-block:1.75rem; }

.related-content-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }

.related-content-heading h2 { margin:0; font-size:1.2rem; }

.related-content-controls { display:flex; flex:none; gap:.4rem; }

.related-content-controls button { display:grid; place-items:center; width:2rem; height:2rem; padding:0; border:1px solid #484848; border-radius:50%; color:inherit; background:transparent; cursor:pointer; }

.related-content-controls button:hover { background:#ffffff15; }

.related-content-controls button:focus-visible { outline:2px solid currentColor; outline-offset:3px; }

.related-content-row .related-content-grid { --related-gap:1rem; display:grid !important; grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:clamp(min(100%,15rem),calc((100% - 3 * var(--related-gap)) / 4),100%); gap:var(--related-gap); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scroll-padding-inline:0; overscroll-behavior-x:contain; padding:0 0 .75rem; margin:0; scrollbar-width:thin; }

.related-content-row .related-content-grid .block-loop-item { scroll-snap-align:start; max-width:none !important; min-width:0; width:100% !important; }

.related-content-row .post-thumbnail { aspect-ratio:16/9; width:100%; overflow:hidden; border-radius:.65rem; }

.related-content-row .post-thumbnail img { width:100%; height:100%; object-fit:cover; }

.single-album .related-content-row .post-thumbnail, .single-playlist .related-content-row .post-thumbnail { aspect-ratio:1; }

@media(max-width:1100px) { .related-content-row .related-content-grid { grid-auto-columns:clamp(min(100%,15rem),calc((100% - 2 * var(--related-gap)) / 3),100%); } }

@media(max-width:800px) { .related-content-row .related-content-grid { --related-gap:.75rem; grid-auto-columns:clamp(min(100%,15rem),calc((100% - var(--related-gap)) / 2),100%); } }

@media(max-width:480px) { .related-content-row .related-content-grid { grid-auto-columns:78%; } .related-content-heading h2 { font-size:1.05rem; } }

@media(prefers-reduced-motion:reduce) { .related-content-row .related-content-grid { scroll-behavior:auto; } }

/* Station media shares the persistent playback instance. */
.station-video-stage { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:.8rem; background:#080808; margin-bottom:1.25rem; isolation:isolate; }

.station-video-preview { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; display:grid; place-items:center; background:#080808; cursor:pointer; }

.station-video-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.8; }

.station-video-preview > span { position:relative; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#ffffffee; color:#151515; font-size:24px; padding-left:4px; }

/* Loop item overrides - replaces custom.css .block-loop-item */

/*
 * A REM OF BREATHING ROOM ABOVE AND BELOW EVERY LOOP BLOCK.
 *
 * MARGIN, NOT PADDING, ON PURPOSE.
 *
 * The request was for "a little bit of padding 1rem above and below all loop
 * blocks", and the visual result of that is one rem of space between blocks --
 * which is what `margin-block` produces and what `padding-block` does not do
 * cleanly here. Padding would also eat 1rem INSIDE the wrapper: the full-bleed
 * sliders size their track off this box, so every card row would come in 1rem
 * narrower on each side and stop lining up with the page edges, the heading and
 * the arrow row. Margin adds the space and leaves the geometry alone.
 *
 * `> :first-child` / `> :last-child` collapse the outer edge so a loop does not
 * double up against whatever already reserves space above or below it.
 */
.wp-block-loop {
  margin-block: 1rem;
}
.wp-block-loop > :first-child {
  margin-block-start: 0;
}
.wp-block-loop > :last-child {
  margin-block-end: 0;
}

.wp-block-loop .block-loop-item {
  position: relative;
  padding: 0;
  max-width: 100%;
  border-radius: var(--loop-radius);
  /*
   * `display` and `flex-direction` ARE DELIBERATELY NOT DECLARED HERE.
   *
   * This rule used to say `display:flex; flex-direction:column`, which is
   * harmless on its own -- it is the same as the plugin's base
   * `.block-loop-item`. The problem is that it is a DIFFERENT selector with the
   * SAME specificity as the plugin's row override:
   *
   *     plugin  .block-loop-item                { flex-direction: column }
   *     plugin  .block-loop-row .block-loop-item{ flex-direction: row    }
   *     theme   .wp-block-loop .block-loop-item { flex-direction: column }
   *
   * Both are (0,2,0), so the theme wins purely by loading later. Every
   * `.block-loop-row` therefore collapsed to a column and the thumbnail dropped
   * ABOVE the title instead of sitting in front of it -- in the station rows,
   * the user rows and the track rows alike.
   *
   * The plugin already sets the correct direction per layout, so the theme must
   * not second-guess it. This rule keeps only the cosmetics.
   */
  flex-wrap: nowrap;
  scroll-snap-align: start;
  order: 10;
  height: auto;
  min-width: 0;
  min-height: 0;
  align-self: start;
  box-shadow: none;
  z-index: 1;
  min-block-size: auto;
}

/* Row cards: entry-header switches to row at container width >= 440px */
.block-loop-row .block-loop-item:is(.block-loop-station, .block-loop-tracks-item) > .entry-header {
  flex-direction: column;
}

@container musiveo-media-row (min-width: 440px) {
  .block-loop-row .block-loop-item:is(.block-loop-station, .block-loop-tracks-item) > .entry-header {
    flex-direction: row;
  }
}

/* User collection grid cards */
.user-collection-grid .block-loop-item {
  flex-direction: column;
}

/* Hero card */
.wp-block-loop .block-loop-hero {
  flex-direction: column;
}

/* Station recommendations */
.station-recommendations .related-content-grid .block-loop-item,
#primary article:has(> .station-video-stage):not(.station-theatre) .station-recommendations .block-loop-item,
#primary > article .station-recommendations .related-content-grid .block-loop-item {
  flex-direction: column;
}



/*
 * ICON-ONLY NAV ITEMS: A SQUARE, NOT A WIDE STRIP.
 *
 * Applied verbatim as supplied.
 *
 * ONE THING TO CHECK: `padding: 0.5rem` comes LAST, and the shorthand resets all
 * four sides. So the `padding-left: 0` and `padding-right: 0` above it have no
 * effect -- the effective padding is 0.5rem on every side, which still reaches the
 * `min-width: 30px` only if the icon is narrow enough.
 *
 * If the intent was to keep the horizontal padding tight while giving the row its
 * vertical breathing room, the last line needs to be `padding: 0.5rem 0` instead.
 * Left exactly as written for now; say the word and it is a one-line change.
 */
.nav li.hide-text > a {
  padding-left: 0;
  padding-right: 0;
  min-width: 30px;
  text-align: center;
  justify-content: center;
  padding: 0.5rem;
}


/* Columns follow the selected surface without borders or shadows. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
  flex-basis: 0;
  flex-grow: 1;
  border-radius: 9px;
  border: none;
}
.dark .wp-block-column,
.dark .wp-block-columns > .wp-block-column {
  background-color: var(--musiveo-dark-bg);
  border-radius: 9px;
  box-shadow: none;
}

/* Per-page mobile navigation, including its layout reservation. */
:root:has(body.hide-mobile-menu), body.hide-mobile-menu {
  --mobile-menu-height: 0rem !important;
}
body.hide-mobile-menu #mobile-menu { display:none !important; }

/* Touch activation keeps control state, without latched hover help. */
@media(hover:none), (pointer:coarse) {
 #plyr-playlist .plyr__controls :is(button,summary):not(:focus-visible) > .plyr__tooltip { opacity:0!important; visibility:hidden!important; }
}

/*
 * NOTIFICATION ROWS (header dropdown and slide-in): "Name liked your post", then the item, then the time.
 *
 * One sentence on the first line (bold name, muted action), the item under it limited to two lines, the time last.
 * "Mark as read" is a small round check button in the top corner instead of a full-width row, so a notification is
 * three short lines tall and the list shows more of them. Unread is shown by a small accent dot, never a tinted
 * background (backgrounds stay #000000 / #101010).
 */
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .play-notification-item {
	position: relative;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: .7rem 2.9rem .7rem .85rem !important;
	background: transparent !important;
	border-bottom: 1px solid #ffffff14 !important;
}
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .play-notification-item:last-child { border-bottom: 0 !important; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .play-notification-item:hover { background: #ffffff08 !important; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .play-notification-item > .notification-row {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	width: 100%;
	padding: 0 !important;
	background: transparent !important;
}
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-avatar,
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-avatar img {
	width: 36px !important;
	height: 36px !important;
	flex: 0 0 36px !important;
	border-radius: 50%;
	object-fit: cover;
}
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-avatar { overflow: hidden; background: #101010; border: 1px solid #262626; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; padding: 0 !important; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-line { font-size: .85rem; line-height: 1.4; color: #a8a8b3; overflow-wrap: anywhere; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-name { display: inline; font-size: inherit; font-weight: 700; color: #fff; text-decoration: none; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) a.notification-name:hover { text-decoration: underline; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-action { display: inline; font-size: inherit; color: inherit; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: .82rem;
	line-height: 1.35;
	color: #e4e4ea;
	text-decoration: none;
	overflow-wrap: anywhere;
}
html body :is(#dropdown-notification, .musiveo-notifications-slidein) a.notification-title:hover { text-decoration: underline; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-time { font-size: .72rem; line-height: 1.3; color: #7d7d89; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .play-notification-item.is-unread .notification-time::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: .45em;
	border-radius: 50%;
	background: #6aa8ff;
	vertical-align: 0;
}
/* The check button: the label stays for screen readers and as a tooltip; only the tick is drawn. */
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-read {
	position: absolute;
	top: .6rem;
	right: .7rem;
	width: 28px;
	height: 28px;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0;
	color: #d4d4dc;
	background: #101010 !important;
	border: 1px solid #333 !important;
	border-radius: 50%;
	cursor: pointer;
	display: grid;
	place-items: center;
}
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-read::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-read:is(:hover, :focus-visible) { color: #fff; border-color: #5a5a66 !important; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-read:focus-visible { outline: 2px solid #ffffff59; outline-offset: 2px; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-read:disabled { opacity: .5; cursor: progress; }
/* Links inside a notification are text, not buttons: no inherited link padding, border or background. */
html body :is(#dropdown-notification, .musiveo-notifications-slidein) :is(a.notification-avatar, a.notification-name, a.notification-title) {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}
html body :is(#dropdown-notification, .musiveo-notifications-slidein) a.notification-avatar { border-radius: 50%; }
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-avatar img { padding: 0 !important; }
/* A notification from a member who no longer exists has no picture: show a quiet person glyph instead of an empty circle. */
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-avatar:not(:has(img))::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #5a5a66;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='9' r='4'/><path d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/></svg>") center 60% / 62% no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='9' r='4'/><path d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/></svg>") center 60% / 62% no-repeat;
}
/* The mark-as-read tick is a true circle: a base button min-height was stretching it to 28 x 37. */
html body :is(#dropdown-notification, .musiveo-notifications-slidein) .notification-read {
	box-sizing: border-box;
	width: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	height: 28px !important;
	min-height: 28px !important;
	max-height: 28px !important;
	aspect-ratio: 1 / 1;
	flex: none;
	border-radius: 50% !important;
	overflow: hidden;
}

/*
 * THE DRAWER'S OWN MENU BUTTON (phones).
 *
 * On a phone the open drawer covers the header, and with it the header's hamburger, so the only way to close the
 * menu was to tap the dimmed strip beside it. The drawer now has the same button beside its logo (a label for the
 * same #menu-state checkbox, so it opens and closes exactly like the header's). Desktop keeps the persistent sidebar
 * and does not show it.
 */
#aside .site-sidebar-bar { display: none; }
@media (max-width: 782px) {
	#aside .site-sidebar-bar {
		display: flex;
		align-items: center;
		min-height: var(--navbar-height, 56px);
		padding: 0 .5rem 0 .25rem;
	}
	#aside .site-sidebar-bar .sidebar-menu-toggle {
		flex: 0 0 auto;
		align-self: center;
		padding: .75rem;
		color: inherit;
	}
	#aside .site-sidebar-bar .site-brand { flex: 1 1 auto; min-width: 0; padding-left: .25rem; }
}

/*
 * LOOP COLUMNS FOLLOW THE WIDTH OF THE LOOP, NOT ONLY THE WIDTH OF THE SCREEN.
 *
 * custom.css decides how many columns a loop wants from the viewport (`--loop-columns`). The loop itself can be much
 * narrower than the viewport -- beside the sidebar, inside a two-column page, in a drawer -- so two or four columns that
 * suit a 1440px screen were squeezed into 580px: track titles broke mid-word, the play count and Like and More buttons
 * wrapped under each other, and album covers shrank to 130px.
 *
 * The column width is now `max(<smallest sensible item>, <what --loop-columns asks for>)`, so a loop keeps the columns
 * it asked for while they fit and drops to fewer, wider columns when they would not. `auto-fill` keeps every item the
 * same width when a row is not full, and `min(100%, ...)` lets one column shrink below the floor on a narrow phone.
 * Sliders and People loops have their own rules and are left alone.
 */
.wp-block-loop:not(.wp-block-loop-slider, .wp-block-loop-user, .user-collection-grid, .user-page *) > .block-loop-items {
	--loop-item-min: 9.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--loop-item-min), calc((100% - (var(--loop-columns, 1) - 1) * var(--loop-grid-gap, .8rem)) / var(--loop-columns, 1)))), 1fr));
}
/* Row and list loops (tracks, station rows, waveforms): play, add, cover, title and the action buttons need room. */
.wp-block-loop.block-loop-row:not(.wp-block-loop-slider, .wp-block-loop-user, .user-collection-grid, .user-page *) > .block-loop-items,
.wp-block-loop.block-loop-list:not(.wp-block-loop-slider, .wp-block-loop-user, .user-collection-grid, .user-page *) > .block-loop-items {
	--loop-item-min: 19rem;
}
/* Cards (albums, playlists, station grids) keep two columns on a phone: one full-width cover per row wastes the screen.
 * Row and list loops stay one column there, as the 480px rule above intends. */
@media (max-width: 480px) {
	.wp-block-loop.block-loop-grid:not(.wp-block-loop-slider, .wp-block-loop-user, .user-collection-grid, .user-page *) > .block-loop-items {
		--loop-item-min: 8.5rem;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--loop-item-min)), 1fr)) !important;
	}
}

/* A Short opened from a link or a search lands on its single page: the cover opens the Shorts feed at that video, so it carries a play mark.
   The mark is on the figure, not on the link: the external-link rule that hides link icons would hide it there. */
.post-thumbnail:has(> .musiveo-short-thumb-link) { position: relative; width: min(360px, 100%); }
.post-thumbnail:has(> .musiveo-short-thumb-link)::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 3.5rem; height: 3.5rem; border-radius: 50%;
	background: #101010 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 1.6rem no-repeat;
	border: 1px solid #333333; pointer-events: none;
}

/* Pinch-zoom is allowed (the viewport no longer sets maximum-scale=1). iOS Safari zooms the page when a field under 16px gets focus, so fields keep 16px there. */
@supports (-webkit-touch-callout: none) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select { font-size: max(16px, 1em); }
}


/* ==========================================================================
   SIDEBAR AND MENU BUTTON REFRESH (2026-11-07)
   Black and #101010 surfaces only, #262626 borders, accent on the active bar and icons only.
   ========================================================================== */

/* The menu button: a rounded, bordered 40px square with three staggered lines (long, short, long). Header and sidebar use the same label. */
html body label.menu-toggle {
  width: 40px; height: 40px; min-height: 40px; padding: 0; margin: 0;
  align-self: center; align-items: center; justify-content: center;
  border: 1px solid #262626; border-radius: 12px; background: #000;
  box-sizing: border-box; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
html body label.menu-toggle:hover, html body label.menu-toggle:focus-visible { background: #101010; border-color: #333333; }
html body label.menu-toggle:focus-visible { outline: 2px solid var(--musiveo-accent, #fff); outline-offset: 2px; }
html body label.menu-toggle i.icon-nav {
  display: block; position: relative; width: 18px; height: 14px; border-radius: 0;
  background:
    linear-gradient(#fff, #fff) left top / 18px 2px no-repeat,
    linear-gradient(#fff, #fff) left center / 11px 2px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 18px 2px no-repeat !important;
}
html body label.menu-toggle i.icon-nav:before, html body label.menu-toggle i.icon-nav:after { display: none; }

/* Rows: 44px, a flat #101010 hover, and a bar plus a brighter label on the page you are on. */
html body #aside.site-sidebar .nav > li:not(.menu-header) > a {
  min-height: 44px; margin: .125rem 0; padding: 0 .75rem; border-radius: 10px; gap: .875rem !important;
  color: #d6d6d6; font-weight: 500;
}
html body #aside.site-sidebar .nav > li:not(.menu-header) > a:is(:hover, :focus-visible) { background: #101010 !important; color: #fff; }
html body #aside.site-sidebar .nav > li:not(.menu-header) > a > svg { width: 20px; height: 20px; }
html body #aside.site-sidebar .nav > li { position: relative; }
html body #aside.site-sidebar .nav > li:is(.current-menu-item, .current_page_item, .current-menu-ancestor) > a {
  background: transparent !important; color: #fff; font-weight: 600;
}
html body #aside.site-sidebar .nav > li:is(.current-menu-item, .current_page_item, .current-menu-ancestor)::before {
  content: ""; position: absolute; left: -.75rem; top: .6rem; bottom: .6rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--musiveo-accent, #fff);
}

/* Section headings: small capitals, a divider above every heading except the first. */
html body #aside.site-sidebar .nav > li.menu-header {
  padding: 1.25rem .75rem .375rem; opacity: 1; font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: #8a8a8a; box-shadow: none;
}
html body #aside.site-sidebar .nav > li ~ li.menu-header { margin-top: .75rem; border-top: 1px solid #262626; padding-top: 1rem; }
html body #aside.site-sidebar .nav > li.menu-header > a { color: inherit; font-weight: inherit; padding: 0; min-height: 0; }

/* NEW tag: a quiet outlined label at the end of the row. */
html body #aside.site-sidebar .nav > li > a > span { display: flex !important; align-items: center; width: 100%; min-width: 0; }
html body #aside.site-sidebar .nav .subscriber-highlight {
  margin-inline-start: auto; vertical-align: baseline; background: transparent; border: 1px solid #333333;
  border-radius: 6px; padding: 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #cfcfcf;
}

/* The menu is a column that fills the sidebar: wallet card on top, language and accent in a footer at the bottom. */
html body #aside.site-sidebar #menu-primary {
  display: flex; flex-direction: column; min-height: calc(100dvh - var(--navbar-height, 76px) - 7rem);
}
/* Wallet card: the balance with a small "credits" caption, and an Add pill on the right that opens the buy-credits window. */
html body #aside.site-sidebar #menu-primary > li:has(.ucs-balance) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "balance add" "label add"; align-items: center;
  column-gap: .75rem; row-gap: 0; margin: .25rem 0 .5rem; padding: .625rem .75rem .625rem .875rem;
  background: #000; border: 1px solid #262626; border-radius: 12px;
}
html body #aside.site-sidebar #menu-primary > li:has(.ucs-balance) > .menu-item-shortcode { grid-area: balance; min-width: 0; }
html body #aside.site-sidebar #menu-primary .ucs-balance { display: inline-flex; align-items: center; align-self: center; gap: .5rem; margin: 0; padding: 0; font-size: 1.1875rem; font-weight: 700; line-height: 1.2; }
html body #aside.site-sidebar #menu-primary .mus-wallet-label { grid-area: label; margin-top: 1px; font-size: 11px; line-height: 1.2; color: #8a8a8a; }
html body #aside.site-sidebar #menu-primary .mus-wallet-add {
  grid-area: add; align-self: center; margin: 0; padding: .25rem .75rem; min-height: 28px; border: 1px solid #333333; border-radius: 999px;
  background: #000; color: #f2f3f4; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease; transform: none;
}
html body #aside.site-sidebar #menu-primary .mus-wallet-add::before { content: "+\00a0"; }
html body #aside.site-sidebar #menu-primary .mus-wallet-add:is(:hover, :focus-visible) { background: #101010; border-color: #333333; color: #fff; }
html body #aside.site-sidebar #menu-primary .mus-wallet-add:focus-visible { outline: 2px solid var(--musiveo-accent, #fff); outline-offset: 2px; }

/* Footer: language and theme side by side in one row (the two items are grouped by includes/sidebar-wallet.php). Outlined pills, no fill. */
html body #aside.site-sidebar #menu-primary > li.mus-menu-footer { order: 90; margin-top: auto; padding: .75rem 0 .5rem; border-top: 1px solid #262626; }
html body #aside.site-sidebar .mus-footer-row { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
html body #aside.site-sidebar .mus-footer-row { align-items: stretch; }
html body #aside.site-sidebar .mus-footer-row [data-mt-switcher], html body #aside.site-sidebar .mus-footer-row [data-mte-switcher],
html body #aside.site-sidebar .mus-footer-row .mt-dropdown { display: flex; width: 100%; line-height: 1; }
html body #aside.site-sidebar .mus-footer-row > li { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; }
html body #aside.site-sidebar .mus-footer-row > li > .menu-item-shortcode, html body #aside.site-sidebar .mus-footer-row [data-mt-switcher],
html body #aside.site-sidebar .mus-footer-row [data-mte-switcher], html body #aside.site-sidebar .mus-footer-row .mt-dropdown { margin: 0; padding: 0; width: 100%; }
html body #aside.site-sidebar .mus-footer-row :is(.mt-popup__btn, .mte-trigger) {
  display: flex; align-items: center; justify-content: center; gap: .375rem; width: 100%; min-width: 0; min-height: 40px; margin: 0; padding: 0 .375rem;
  border: 1px solid #262626; border-radius: 999px; background: transparent; color: #ddd; font-size: 12.5px; font-weight: 600;
  box-shadow: none; transform: none; overflow: hidden;
}
html body #aside.site-sidebar .mus-footer-row :is(.mt-popup__btn, .mte-trigger):is(:hover, :focus-visible) { background: transparent; border-color: #333333; color: #fff; transform: none; }
html body #aside.site-sidebar .mus-footer-row .mte-trigger__name { display: none; }
html body #aside.site-sidebar .mus-footer-row .mte-trigger__label, html body #aside.site-sidebar .mus-footer-row .mt-popup__label {
  display: inline; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: 12.5px;
}

/* Space between the menu button and the logo, and a single-box wallet (the balance pill loses its own border inside the card). */
html body .header-container > label.menu-toggle, html body .site-sidebar-bar > label.menu-toggle { margin-inline-end: .75rem; flex: 0 0 auto; }
html body #aside.site-sidebar #menu-primary > li:has(.ucs-balance) .ucs-balance {
  border: 0; background: transparent; padding: 0; box-shadow: none; min-height: 0;
}

/* A menu label only ever wraps between words (never inside "Livestreams"), and the NEW tag keeps its own width. */
html body #aside.site-sidebar .nav li > a { overflow-wrap: normal; word-break: normal; hyphens: none; }
html body #aside.site-sidebar .nav li > a .subscriber-highlight { white-space: nowrap; }

/* On a phone the open menu turns the header button into a full-screen tap area that closes it: it must not draw a button or an icon there. */
@media (max-width: 781px) {
  /* The phone drawer was a fixed 200px: too narrow for the credits card and for labels with a NEW tag in longer languages. */
  html body #menu-state:checked ~ .site-sidebar { width: min(17.5rem, 84vw); }
  html body #menu-state:checked ~ .site-header label.menu-toggle { border: 0; background: transparent; border-radius: 0; }
  html body #menu-state:checked ~ .site-header label.menu-toggle i.icon-nav { display: none; }
}

/* ---- Sidebar rail: the narrow, icon-only sidebar (desktop only; the button sits under the menu, the choice is remembered). ---- */
html body #aside .mus-rail-bar { display: none; }
@media (min-width: 782px) {
  html body #aside.site-sidebar .mus-rail-bar {
    display: flex; justify-content: flex-end; position: sticky; bottom: 0; z-index: 30001; /* above the menu labels (custom.css gives them z-index 30000 as flex items), so nothing shows through the bar */
    padding: .5rem .75rem; background: var(--musiveo-dark-bg); border-top: 1px solid #262626;
  }
  html body #aside .mus-rail-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid #262626; border-radius: 10px; background: #000; color: #d6d6d6; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
  }
  html body #aside .mus-rail-toggle:is(:hover, :focus-visible) { background: #101010; border-color: #333333; color: #fff; }
  html body #aside .mus-rail-toggle:focus-visible { outline: 2px solid var(--musiveo-accent, #fff); outline-offset: 2px; }
  html.mus-rail body #aside .mus-rail-toggle svg { transform: rotate(180deg); }
  html.mus-rail body #aside .mus-rail-bar { justify-content: center; padding-inline: 0; }

  html.mus-rail body { --side-width: 4.5rem; }
  html.mus-rail body #aside.site-sidebar { width: 4.5rem; min-width: 4.5rem; }
  html.mus-rail body #aside.site-sidebar .nav { padding-inline: .5rem; }
  /* Two extra :not() terms and a doubled class beat `#menu-state:not(:checked) ~ .site-sidebar .nav > li:not(.hide-text) > a { justify-content: flex-start }`,
     which is what the generator pages (sidebar closed by default, then shown as a rail) matched: the icons sat at the left edge instead of the centre. */
  html.mus-rail body #aside.site-sidebar.site-sidebar .nav > li:not(.menu-header):not(.hide-text):not(.never) > a { justify-content: center; padding: 0; gap: 0 !important; }
  html.mus-rail body #aside.site-sidebar .nav > li > a > span,
  html.mus-rail body #aside.site-sidebar .nav > li > a > span * { display: none !important; }
  html.mus-rail body #aside.site-sidebar .nav > li.menu-header { padding: 0; margin: .75rem .5rem .25rem; font-size: 0; height: 0; border-top: 1px solid #262626; }
  html.mus-rail body #aside.site-sidebar .nav > li.menu-header > a { display: none; }
  html.mus-rail body #aside.site-sidebar .nav > li:is(.current-menu-item, .current_page_item, .current-menu-ancestor)::before { left: -.5rem; }
  html.mus-rail body #aside.site-sidebar #menu-primary > li:has(.ucs-balance) { padding: .5rem 0; text-align: center; margin-inline: 0; }
  html.mus-rail body #aside.site-sidebar #menu-primary .ucs-balance { justify-content: center; }
  html.mus-rail body #aside.site-sidebar #menu-primary .ucs-balance .credit-amount,
  html.mus-rail body #aside.site-sidebar #menu-primary .mus-wallet-label,
  html.mus-rail body #aside.site-sidebar #menu-primary .mus-wallet-add { display: none; }
  html.mus-rail body #aside.site-sidebar #menu-primary > li:has(.ucs-balance) {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: .25rem auto .5rem; padding: 0; box-sizing: border-box;
  }
  html.mus-rail body #aside.site-sidebar #menu-primary > li:has(.ucs-balance) > .menu-item-shortcode { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; }
  html.mus-rail body #aside.site-sidebar #menu-primary .ucs-balance { margin: 0; padding: 0; line-height: 0; align-self: center; }
  html.mus-rail body #aside.site-sidebar #menu-primary .ucs-balance .ucs-diamond-plus-icon { transform: scale(1.5); transform-origin: center; margin: 0; }
  html.mus-rail body #aside.site-sidebar .mus-footer-row { flex-direction: column; }
  html.mus-rail body #aside.site-sidebar .mus-footer-row :is(.mt-popup__btn, .mte-trigger) { padding: 0; border-radius: 12px; }
  html.mus-rail body #aside.site-sidebar .mt-popup__label,
  html.mus-rail body #aside.site-sidebar .mte-trigger__label,
  html.mus-rail body #aside.site-sidebar .mte-trigger__name { display: none; }
  html.mus-rail body #aside.site-sidebar .mt-popup__btn, html.mus-rail body #aside.site-sidebar .mte-trigger { justify-content: center; padding-inline: .5rem; min-width: 0; }
}

/* The cookie banner is a white card: the theme's a:hover { color: #fff } turned its links white on white while the pointer was over them. They keep their own colour. */
html body .kncc-inner a:is(:hover, :focus, :active) { color: rgb(61, 72, 114); }

/* Rail tooltip: a small flat label beside the hovered icon (positioned by site.js). */
html body .mus-tip {
  /* Above the fixed header and the player dock (both 99999) so a tooltip near the bottom edge is not covered; later in the page, so it wins the tie. */
  --mus-tip-z: 99999;
  position: fixed; z-index: var(--mus-tip-z); display: none; pointer-events: none; transform: translateY(-50%);
  padding: .375rem .625rem; background: #101010; border: 1px solid #262626; border-radius: 8px;
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: none;
}
html body .mus-tip.is-visible { display: block; }
/* musiveo-collection-tracks */
/* Album and playlist tracks share a clickable, keyboard-accessible row. */
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) > .block-loop-items > .collection-track-row { display:grid !important; grid-template-columns:24px 48px minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding-inline:8px !important; border-radius:8px; cursor:pointer; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row::before { grid-column:1; grid-row:1; color:var(--text-secondary-color,#888) !important; align-self:center; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row > .post-thumbnail { grid-column:2; grid-row:1; width:48px; height:48px; margin:0; align-self:center; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .post-thumbnail-inner { display:block; position:relative; width:100%; height:100%; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .post-thumbnail img { width:100%; height:100%; object-fit:cover; border-radius:4px; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row > .entry-header { display:contents !important; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .entry-header-inner { grid-column:3; grid-row:1; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:4px; min-width:0; width:100% !important; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .entry-title { margin:0; width:100%; font-size:.95rem; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row :is(.entry-meta,.byline,.author) { margin:0 !important; padding:0 !important; min-width:0; line-height:1.4; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .entry-meta { display:flex !important; align-items:center; flex-wrap:wrap; gap:4px; width:100%; text-align:left; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row :is(.byline,.author) { display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .entry-footer { grid-column:4; grid-row:1; display:flex !important; flex-direction:row !important; flex-wrap:nowrap; justify-content:flex-end !important; align-items:center; align-self:center !important; gap:4px; width:auto !important; margin-block:0 !important; margin-inline:0; padding:0; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .entry-footer > * { grid-area:auto !important; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row:hover { background:#10101066 !important; }
html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row:focus-visible { outline:2px solid #888; outline-offset:-2px; }
@media(max-width:782px) {
 html body :is(.collection-track-list,.wp-block-loop.block-loop-row) > .block-loop-items > .collection-track-row { grid-template-columns:16px 40px minmax(0,1fr) auto; gap:8px; padding-inline:4px !important; }
 html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row > .post-thumbnail { width:40px; height:40px; }
 html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .entry-title { font-size:.875rem; }
}

html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .entry-footer > :is(.btn-like, .btn-more) {
  align-self: center !important;
  margin-block: 0 !important;
}

html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row {
  border: 0 !important;
  box-shadow: none !important;
}

:is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .post-thumbnail-inner {
  position: relative;
}

:is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .collection-track-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  color: #fff;
  pointer-events: none;
}

:is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row:is(.collection-track-selected, .is-current) .collection-track-play {
  display: grid;
}

:is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row .collection-track-play svg {
  display: none !important;
}

:is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row.is-current .collection-track-play::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) left 8px center / 3px 11px no-repeat,
    linear-gradient(currentColor, currentColor) right 8px center / 3px 11px no-repeat,
    #000a;
}

:is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row.collection-track-selected:not(.is-current) .collection-track-play svg {
  display: block !important;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  padding: 4px;
  border: 0 !important;
  border-radius: 50%;
  background: #000a;
  fill: currentColor;
}

html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row.collection-track-selected {
  background: #28282880 !important;
}

html body :is(.collection-track-list,.wp-block-loop.block-loop-row) .collection-track-row.is-current {
  background: #38383880 !important;
}

/* Browse rows have no track number unless the block shows its index. */
html body .wp-block-loop.block-loop-row:not(.collection-track-list) > .block-loop-items > .collection-track-row {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}
html body .wp-block-loop.block-loop-row:not(.collection-track-list):not(.block-loop-index) .collection-track-row::before {
  content: none;
}
html body .wp-block-loop.block-loop-row:not(.collection-track-list) .collection-track-row > .post-thumbnail { grid-column: 1; }
html body .wp-block-loop.block-loop-row:not(.collection-track-list) .collection-track-row .entry-header-inner { grid-column: 2; }
html body .wp-block-loop.block-loop-row:not(.collection-track-list) .collection-track-row .entry-footer { grid-column: 3; }

/* Numbered rows: the item number (the loop's CSS counter) takes its own column ahead of the thumbnail. */
html body .wp-block-loop.block-loop-row.block-loop-index:not(.collection-track-list) > .block-loop-items > .collection-track-row {
  grid-template-columns: 2rem 48px minmax(0, 1fr) auto;
}
html body .wp-block-loop.block-loop-row.block-loop-index:not(.collection-track-list) .collection-track-row::before {
  content: counter(li);
  grid-column: 1;
  align-self: center;
  justify-self: center;
  opacity: .5;
}
html body .wp-block-loop.block-loop-row.block-loop-index:not(.collection-track-list) .collection-track-row > .post-thumbnail { grid-column: 2; }
html body .wp-block-loop.block-loop-row.block-loop-index:not(.collection-track-list) .collection-track-row .entry-header-inner { grid-column: 3; }
html body .wp-block-loop.block-loop-row.block-loop-index:not(.collection-track-list) .collection-track-row .entry-footer { grid-column: 4; }
@media (max-width: 782px) {
  html body .wp-block-loop.block-loop-row:not(.collection-track-list) > .block-loop-items > .collection-track-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }
  html body .wp-block-loop.block-loop-row.block-loop-index:not(.collection-track-list) > .block-loop-items > .collection-track-row {
    grid-template-columns: 2rem 40px minmax(0, 1fr) auto;
  }
}

.block-loop-video-item > .entry-header > .btn-more {
  flex: 0 0 auto;
  margin-inline-start: auto !important;
  justify-self: end;
}

.station-copyright {
  display: flex;
  align-items: baseline;
  gap: .35em;
}
.station-copyright::before {
  flex: 0 0 auto;
  margin: 0;
}
.station-copyright-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.station-copyright-text > :first-child { margin-block-start: 0; }
.station-copyright-text > :last-child { margin-block-end: 0; }

/* The retained embed fills the station rectangle after a list-to-station navigation. */
#plyr-playlist .station-video-pinned .plyr__video-embed,
#plyr-playlist .station-video-pinned .plyr__video-embed__container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  transform: none !important;
}