/* Built by scripts/build-css.py from components.css - edit that file, not this one. source-sha1: d26596fb4cb3b3a3c1ba95ccb93e25156a64c60d */
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/Outfit-Variable.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/Inter-Variable.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html {
font-size: 100%;
scroll-padding-block-start: calc(
var(--musical-header-height) + var(--musical-sectionnav-height, 0px) + var(--musical-space-sm)
);
}
:root {
--musical-edit-savebar-room: 15rem;
}
.musical-edit__form .musical-edit-section :is(a, button, input, select, textarea, summary) {
scroll-margin-block-end: calc(
var(--musical-nowplaying-height, 0px) + var(--musical-edit-savebar-room)
);
}
body {
font-family: var(--musical-font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--musical-text-primary);
background: #fff;
}
.brxe-section > .musical-header,
.brxe-section > .musical-footer,
.brxe-musical-site-header.musical-header,
.brxe-musical-site-footer.musical-footer,
.musical-hero,
.musical-section,
.musical-dashboard,
.musical-player-wrap,
.musical-track-grid,
.musical-gallery,
.musical-steps,
.musical-reasons,
.musical-artist-header,
.musical-playlist-page,
.musical-shell {
width: 100%;
max-width: none;
align-self: stretch;
}
.musical-shell {
max-width: 75rem;
margin-inline: auto;
}
.musical-artist-header {
max-width: 50rem;
margin-inline: auto;
}
:root {
--musical-primary: #00d9d9;
--musical-secondary: #e61d9b;
--musical-tertiary: #ffa500;
--musical-primary-ink: #005a5a;
--musical-secondary-ink: #911764;
--musical-success-ink: #006b43;
--musical-tertiary-ink: #8a5a00;
--musical-cover-teal: #d9f0ee;
--musical-cover-teal-ink: #005a5a;
--musical-cover-pink: #f7dcea;
--musical-cover-pink-ink: #911764;
--musical-cover-amber: #fbe8c6;
--musical-cover-amber-ink: #8a5a00;
--musical-bg-light: #fafaf9;
--musical-bg-dark: #1a1a1a;
--musical-text-primary: #1d1d1d;
--musical-text-secondary: #6b6b6b;
--musical-text-placeholder: #949494;
--musical-text-light: #f5f5f5;
--musical-text-light-dim: #c9c9c9;
--musical-border: #e5e5e5;
--musical-border-dark: #2a2a2a;
--musical-success: #00d084;
--musical-success-ink: #0a7a52;
--musical-warning: #ffb800;
--musical-error: #ff5555;
--musical-error-ink: #a51f1f;
--musical-info: #00a8e8;
--musical-font-display: "Outfit", "DM Sans", system-ui, -apple-system, sans-serif;
--musical-font-body: "Inter", system-ui, -apple-system, sans-serif;
--musical-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--musical-space-xs: 0.25rem;
--musical-space-sm: 0.5rem;
--musical-space-md: 1rem;
--musical-space-lg: 1.5rem;
--musical-space-xl: 2rem;
--musical-space-2xl: clamp(1.75rem, 3.5vw, 3rem);
--musical-header-height: 65px;
--musical-space-3xl: clamp(2.25rem, 5vw, 4rem);
--musical-space-4xl: clamp(3rem, 7vw, 6rem);
--musical-section-y: clamp(1.75rem, 4vw, 4rem);
--musical-section-y-tight: clamp(1.25rem, 2.5vw, 2.5rem);
--musical-radius-sm: 6px;
--musical-radius-md: 8px;
--musical-radius-lg: 12px;
--musical-radius-pill: 999px;
--musical-shadow-card: 0 2px 8px rgb(0 0 0 / 8%);
--musical-shadow-card-hover: 0 4px 16px rgb(0 0 0 / 12%);
--musical-shadow-lift: 0 6px 20px rgb(0 0 0 / 14%);
--musical-duration-quick: 0.2s;
--musical-duration-smooth: 0.4s;
--musical-duration-luxe: 0.6s;
--musical-duration-ambient: 28s;
--musical-easing-out: cubic-bezier(0.2, 0, 0.38, 0.92);
--musical-easing-luxe: cubic-bezier(0.16, 1, 0.3, 1);
--musical-measure: 45rem;
--musical-player-width: 44rem;
}
.musical-h1,
.musical-h2,
.musical-h3,
.musical-h4 {
font-family: var(--musical-font-display);
color: var(--musical-text-primary);
margin: 0;
text-wrap: balance;
}
.musical-track-card__title,
.musical-player__title,
.musical-player__artist,
.musical-nowplaying__title,
.musical-nowplaying__artist,
.musical-order__title,
.musical-group__title,
.musical-playlist-editor__title,
.musical-playlist-manager__title,
.musical-hero-picker__name {
overflow-wrap: anywhere;
}
.musical-h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.1;
letter-spacing: -0.01em;
font-weight: 700;
}
.musical-h2 {
font-size: clamp(1.875rem, 4vw, 2.5rem);
line-height: 1.2;
letter-spacing: -0.005em;
font-weight: 700;
}
.musical-h3 {
font-size: 1.75rem;
line-height: 1.3;
font-weight: 600;
}
.musical-h4 {
font-size: 1.25rem;
line-height: 1.4;
font-weight: 600;
}
.musical-body-l {
font-family: var(--musical-font-body);
font-size: 1.125rem;
line-height: 1.6;
}
.musical-body {
font-family: var(--musical-font-body);
font-size: 1rem;
line-height: 1.6;
}
.musical-body-s {
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.5;
}
.musical-label {
font-family: var(--musical-font-body);
font-size: 0.75rem;
line-height: 1.4;
letter-spacing: 0.05em;
font-weight: 600;
}
.musical-caption {
font-family: var(--musical-font-body);
font-size: 0.75rem;
line-height: 1.4;
letter-spacing: 0.08em;
color: var(--musical-text-secondary);
}
.musical-measure {
max-width: var(--musical-measure);
}
.musical-link {
color: var(--musical-primary-ink);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-footer .musical-link,
.musical-genre-filter .musical-link {
text-decoration-line: none;
}
.musical-footer__legal .musical-link {
text-decoration-line: underline;
}
.musical-link:hover,
.musical-link:focus-visible {
color: var(--musical-secondary-ink);
}
.skip-link {
clip: auto;
overflow: visible;
width: auto;
height: auto;
position: absolute;
left: var(--musical-space-md);
top: var(--musical-space-md);
z-index: 999;
padding: var(--musical-space-sm) var(--musical-space-md);
background: var(--musical-text-primary);
color: var(--musical-text-light);
font-weight: 600;
white-space: nowrap;
border-radius: var(--musical-radius-md);
transform: translateY(-200%);
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.skip-link:focus {
transform: translateY(0);
}
.musical-btn:focus-visible,
.musical-link:focus-visible,
.musical-input:focus-visible,
.musical-toggle:focus-visible,
.musical-icon-btn:focus-visible,
.musical-seek:focus-visible,
.musical-track-card__link:focus-visible,
.musical-viewswitch__option:focus-visible,
.musical-groupswitch__option:focus-visible,
.musical-group__title a:focus-visible,
.musical-brand:focus-visible,
.skip-link:focus-visible,
.musical-nav__link:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-player .musical-icon-btn:focus-visible,
.musical-player .musical-seek:focus-visible,
.skip-link:focus-visible,
.musical-footer .musical-link:focus-visible,
.musical-footer .musical-brand:focus-visible,
.musical-hero .musical-btn:focus-visible,
.musical-section--dark .musical-btn:focus-visible {
outline-color: var(--musical-primary);
}
[data-musical-quiet-focus]:focus,
[data-musical-quiet-focus]:focus-visible {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.musical-js .musical-reveal {
opacity: 0;
transform: translateY(30px);
transition:
opacity var(--musical-duration-smooth) var(--musical-easing-out),
transform var(--musical-duration-smooth) var(--musical-easing-out);
transition-delay: var(--musical-reveal-delay, 0ms);
}
.musical-js .musical-reveal.is-revealed {
opacity: 1;
transform: none;
}
html.musical-view-restoring [data-musical-swap] {
visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
.musical-js .musical-reveal {
opacity: 1;
transform: none;
}
}
.musical-js .musical-reorder {
transition:
opacity var(--musical-duration-smooth) var(--musical-easing-out),
transform var(--musical-duration-smooth) var(--musical-easing-luxe);
transition-delay: 0s !important;
will-change: transform;
}
.musical-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--musical-space-sm);
min-height: 56px;
padding: var(--musical-space-md) var(--musical-space-xl);
border: 0;
border-radius: var(--musical-radius-md);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
box-shadow var(--musical-duration-quick) var(--musical-easing-out),
transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-btn__label--full {
display: none;
}
@media (min-width: 48rem) {
.musical-btn__label--full {
display: inline;
}
.musical-btn__label--short {
display: none;
}
}
.musical-btn--primary {
background: var(--musical-tertiary);
color: var(--musical-text-primary);
}
.musical-btn--primary:hover {
background: #ffb733;
box-shadow: var(--musical-shadow-lift);
}
.musical-btn--primary:active {
background: #e08e00;
transform: scale(0.98);
}
.musical-btn--secondary {
background: var(--musical-bg-light);
color: var(--musical-text-primary);
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-btn--secondary:hover {
background: var(--musical-border);
}
.musical-btn--secondary:active {
transform: scale(0.98);
box-shadow: inset 0 0 0 1px var(--musical-text-secondary);
}
.musical-btn--ghost {
background: transparent;
color: var(--musical-primary-ink);
padding-inline: var(--musical-space-sm);
}
.musical-btn--ghost:hover {
color: var(--musical-secondary-ink);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-btn--ghost:active {
transform: scale(0.98);
}
.musical-btn--danger {
background: var(--musical-error);
color: var(--musical-text-light);
}
.musical-btn--danger:hover {
background: #ff6a6a;
box-shadow: var(--musical-shadow-lift);
}
.musical-btn--danger:active {
background: #e04343;
transform: scale(0.98);
}
.musical-btn--on-dark {
color: var(--musical-text-light);
box-shadow: inset 0 0 0 1px rgb(245 245 245 / 35%);
}
.musical-btn--ghost.musical-btn--on-dark {
padding-inline: var(--musical-space-xl);
}
.musical-btn--on-dark:hover {
background: rgb(245 245 245 / 12%);
color: var(--musical-text-light);
text-decoration: none;
}
.musical-btn[disabled],
.musical-btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.musical-btn[hidden] {
display: none;
}
.musical-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: var(--musical-radius-pill);
background: transparent;
color: currentcolor;
cursor: pointer;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-icon-btn:hover {
background: rgb(255 255 255 / 10%);
}
.musical-icon-btn:active {
transform: scale(0.95);
}
.musical-icon-btn svg {
width: 24px;
height: 24px;
fill: currentcolor;
pointer-events: none;
}
.musical-field {
display: flex;
flex-direction: column;
gap: var(--musical-space-xs);
}
.musical-field__label {
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--musical-text-secondary);
text-transform: uppercase;
}
.musical-input {
width: 100%;
min-height: 48px;
padding: var(--musical-space-md);
font-family: var(--musical-font-body);
font-size: 1rem;
line-height: 1.5;
color: var(--musical-text-primary);
background: #fff;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-sm);
transition:
border-color var(--musical-duration-quick) var(--musical-easing-out),
box-shadow var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-input::placeholder {
color: var(--musical-text-placeholder);
}
.musical-input:focus {
border-color: var(--musical-primary-ink);
box-shadow: 0 0 0 3px rgb(0 122 122 / 15%);
outline: none;
}
textarea.musical-input {
min-height: 8rem;
resize: vertical;
}
.musical-input--mono {
font-family: var(--musical-font-mono);
font-size: 0.875rem;
line-height: 1.7;
tab-size: 4;
}
.musical-field__hint {
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.4;
color: var(--musical-text-secondary);
}
.musical-field__error {
display: flex;
align-items: center;
gap: var(--musical-space-xs);
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: #d13030;
}
.musical-toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
cursor: pointer;
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-primary);
}
.musical-toggle__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.musical-toggle__track {
position: relative;
flex: 0 0 auto;
width: 48px;
height: 28px;
border-radius: var(--musical-radius-pill);
background: var(--musical-text-secondary);
transition: background-color var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-toggle__track::after {
content: "";
position: absolute;
inset-block-start: 2px;
inset-inline-start: 2px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
transition: transform var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-toggle__input:checked + .musical-toggle__track {
background: var(--musical-primary-ink);
}
.musical-toggle__input:checked + .musical-toggle__track::after {
transform: translateX(20px);
}
.musical-toggle__input:focus-visible + .musical-toggle__track {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-checkbox {
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
cursor: pointer;
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-primary);
}
.musical-checkbox__input {
position: relative;
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--musical-primary-ink);
}
.musical-checkbox__input:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-section {
padding-block: var(--musical-section-y);
padding-inline: var(--musical-space-lg);
}
.musical-section--tight {
padding-block: var(--musical-section-y-tight);
}
.bricks-is-frontend .musical-section:has(> .musical-shell:empty) {
display: none;
}
.musical-section:has(.musical-discover) {
background-image:
linear-gradient(rgb(255 255 255 / 48%), rgb(255 255 255 / 48%)),
url("../img/discover-wash.webp");
background-size: 100% 100%;
background-position: center;
}
.musical-section--dark {
background: var(--musical-bg-dark);
color: var(--musical-text-light);
}
.musical-section--dark .musical-h1,
.musical-section--dark .musical-h2,
.musical-section--dark .musical-h3,
.musical-section--dark .musical-h4 {
color: var(--musical-text-light);
}
.musical-shell {
width: 100%;
max-width: 75rem;
margin-inline: auto;
}
.musical-stack {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
}
.musical-section__head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--musical-space-md);
margin-block-end: var(--musical-space-lg);
}
@media (min-width: 48rem) {
.musical-section__head {
margin-block-end: var(--musical-space-xl);
}
}
.musical-section__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-md);
margin-block-start: var(--musical-space-xl);
}
@media (max-width: 47.99rem) {
:root {
--musical-section-y: 1.25rem;
--musical-section-y-tight: 1rem;
}
.musical-section__head {
margin-block-end: var(--musical-space-md);
}
.musical-stack {
gap: var(--musical-space-md);
}
.musical-steps,
.musical-reasons,
.musical-claims {
gap: var(--musical-space-lg);
}
.musical-hero {
min-height: 0;
padding-block: var(--musical-space-xl);
}
.musical-hero__inner {
gap: var(--musical-space-md);
}
.musical-hero__copy {
gap: var(--musical-space-md);
}
}
.musical-eyebrow {
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--musical-secondary-ink);
}
.musical-section--dark .musical-eyebrow,
.musical-hero .musical-eyebrow {
color: var(--musical-primary);
}
.musical-section--dark .musical-link,
.musical-hero .musical-link {
color: var(--musical-primary);
}
.musical-section--dark .musical-link:hover,
.musical-section--dark .musical-link:focus-visible,
.musical-hero .musical-link:hover,
.musical-hero .musical-link:focus-visible {
color: var(--musical-text-light);
}
.musical-editorial {
display: grid;
grid-template-columns: 1fr;
gap: var(--musical-space-2xl);
}
@media (min-width: 64rem) {
.musical-editorial {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.musical-editorial__aside {
position: sticky;
top: var(--musical-space-2xl);
align-self: start;
}
}
.musical-steps,
.musical-reasons,
.musical-claims {
display: grid;
grid-template-columns: 1fr;
gap: var(--musical-space-xl);
}
.musical-steps {
counter-reset: musical-step;
}
@media (min-width: 64rem) {
.musical-steps,
.musical-reasons,
.musical-claims {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--musical-space-2xl);
}
}
.musical-reason {
position: relative;
}
.musical-step {
position: relative;
overflow: hidden;
padding: var(--musical-space-lg);
background: #fff;
border-radius: var(--musical-radius-lg);
box-shadow: var(--musical-shadow-card);
}
.musical-step::before {
counter-increment: musical-step;
content: counter(musical-step, decimal-leading-zero) / "";
position: absolute;
inset-block-start: var(--musical-space-sm);
inset-inline-end: var(--musical-space-md);
z-index: 0;
font-family: var(--musical-font-display);
font-size: 3.5rem;
font-weight: 700;
line-height: 1;
color: rgb(26 26 26 / 10%);
pointer-events: none;
}
.musical-step > * {
position: relative;
z-index: 1;
}
.musical-step .musical-h3 {
padding-inline-end: 4.5rem;
}
@media (max-width: 30rem) {
.musical-reason .musical-h3,
.musical-step .musical-h3 {
font-size: 1.3125rem;
}
.musical-step::before {
font-size: 2.5rem;
}
.musical-step .musical-h3 {
padding-inline-end: 3.25rem;
}
}
.musical-section__actions .musical-link,
.musical-step .musical-link {
display: inline-flex;
align-items: center;
min-height: 48px;
}
@media (min-width: 48rem) {
.musical-section__actions .musical-link,
.musical-step .musical-link {
min-height: 0;
}
}
.musical-section:has(.musical-reasons) {
background-image:
linear-gradient(
rgb(255 255 255 / 95%) 0%,
rgb(255 255 255 / 88%) 42%,
rgb(255 255 255 / 88%) 60%,
rgb(255 255 255 / 98%) 88%
),
url("../img/listen-wash.webp");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.musical-section--turns {
position: relative;
isolation: isolate;
overflow: hidden;
}
.musical-turns__head {
display: grid;
gap: var(--musical-space-md);
margin-block-end: var(--musical-space-xl);
}
.musical-turns__title {
display: flex;
flex-direction: column;
gap: var(--musical-space-xs);
}
.musical-turns__lede {
max-width: var(--musical-measure);
color: var(--musical-text-secondary);
}
@media (min-width: 64rem) {
.musical-turns__head {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: end;
gap: var(--musical-space-4xl);
}
}
@media (max-width: 47.99rem) {
.musical-turns__head {
margin-block-end: var(--musical-space-md);
}
.musical-section--turns .musical-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--musical-space-sm);
}
.musical-section--turns .musical-track-card {
gap: var(--musical-space-sm);
padding: var(--musical-space-sm);
}
.musical-section--turns .musical-track-card--lead-artist .musical-track-card__lead {
font-size: 1rem;
}
.musical-section--turns .musical-track-card--lead-artist .musical-track-card__title {
font-size: 0.875rem;
}
.musical-section--turns .musical-track-card__play {
width: 44px;
height: 44px;
inset-block-end: var(--musical-space-xs);
inset-inline-end: var(--musical-space-xs);
}
}
.musical-gallery {
display: grid;
grid-template-columns: 1fr;
gap: var(--musical-space-lg);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 48rem) {
.musical-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.musical-gallery {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--musical-space-xl);
row-gap: var(--musical-space-2xl);
}
.musical-editorial .musical-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.musical-gallery--rows {
grid-template-columns: minmax(0, 1fr);
gap: var(--musical-space-md);
}
.musical-section--media {
position: relative;
overflow: hidden;
isolation: isolate;
padding-block: var(--musical-space-3xl);
}
.musical-section__media {
position: absolute;
inset: 0;
z-index: -3;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.85;
}
.musical-section--media::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg,
rgb(26 26 26 / 92%) 0%,
rgb(26 26 26 / 86%) 34%,
rgb(26 26 26 / 70%) 52%,
rgb(26 26 26 / 18%) 100%),
linear-gradient(180deg, rgb(26 26 26 / 45%) 0%, transparent 55%);
}
.musical-section--media-center {
padding-block: var(--musical-space-2xl);
}
@media (min-width: 48rem) {
.musical-section--media {
padding-block: var(--musical-space-4xl);
}
.musical-section--media-center {
padding-block: var(--musical-space-3xl);
}
}
.musical-section--media-center::after {
background:
radial-gradient(68% 78% at 50% 50%, rgb(26 26 26 / 82%) 0%, rgb(26 26 26 / 62%) 62%, rgb(26 26 26 / 30%) 100%),
linear-gradient(180deg, rgb(26 26 26 / 45%) 0%, transparent 45%);
}
@media (max-width: 47.9375rem) {
.musical-section--media::after {
background:
linear-gradient(180deg, rgb(26 26 26 / 78%) 0%, rgb(26 26 26 / 90%) 100%);
}
.musical-section--media .musical-section__media {
opacity: 0.4;
}
.musical-section--media:not(.musical-section--media-center) picture > .musical-section__media {
opacity: 0.7;
}
.musical-section--media:not(.musical-section--media-center):has(picture)::after {
background:
linear-gradient(180deg, rgb(26 26 26 / 70%) 0%, rgb(26 26 26 / 82%) 100%);
}
.musical-section--media-center .musical-section__media {
opacity: 0.6;
}
.musical-section--media-center::after {
background:
linear-gradient(180deg,
rgb(26 26 26 / 55%) 0%,
rgb(26 26 26 / 82%) 20%,
rgb(26 26 26 / 82%) 82%,
rgb(26 26 26 / 60%) 100%);
}
}
.musical-section__scrim-boost {
position: absolute;
inset: 0;
z-index: -2;
background: rgb(26 26 26 / 48%);
pointer-events: none;
}
.musical-section--media,
.musical-section--turns {
--musical-text-primary: var(--musical-text-light);
--musical-text-secondary: rgb(245 245 245 / 82%);
--musical-primary-ink: var(--musical-primary);
--musical-border: var(--musical-border-dark);
}
.musical-section--media .musical-track-card,
.musical-section--turns .musical-track-card,
.musical-section--media .musical-btn--primary,
.musical-section--media .musical-btn--secondary,
.musical-section--media .musical-share__open,
.musical-section--media .musical-install-help {
--musical-text-primary: #1d1d1d;
--musical-text-secondary: #6b6b6b;
--musical-primary-ink: #005a5a;
--musical-border: #e5e5e5;
}
.musical-section--media .musical-share__open {
background: var(--musical-bg-light);
}
.musical-section--media .musical-share__url,
.musical-section--media .musical-share__snippet {
color: rgb(245 245 245 / 78%);
background: rgb(255 255 255 / 6%);
border-color: var(--musical-border-dark);
}
.musical-section--media .musical-checkbox__input {
accent-color: var(--musical-primary);
}
.musical-section--media .musical-share__feedback {
color: var(--musical-primary);
}
.musical-hero {
position: relative;
display: grid;
align-content: center;
min-height: min(74vh, 38rem);
padding: var(--musical-space-3xl) var(--musical-space-lg);
overflow: hidden;
background: var(--musical-bg-dark);
color: var(--musical-text-light);
isolation: isolate;
}
@media (min-width: 48rem) {
.musical-hero {
padding-block: var(--musical-space-4xl);
}
}
.musical-hero::before {
content: "";
position: absolute;
inset: -20%;
z-index: -2;
background:
radial-gradient(60% 55% at 18% 22%, rgb(0 217 217 / 55%) 0%, transparent 62%),
radial-gradient(52% 50% at 82% 72%, rgb(230 29 155 / 52%) 0%, transparent 60%),
radial-gradient(40% 40% at 62% 12%, rgb(255 165 0 / 32%) 0%, transparent 60%);
}
.musical-hero__media {
position: absolute;
inset: 0;
z-index: -3;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.45;
}
@media (max-width: 47.99rem) {
.musical-hero {
background-image:
linear-gradient(rgb(26 26 26 / 58%), rgb(26 26 26 / 58%)),
url("../img/home-hero-portrait.webp");
background-size: cover;
background-position: center bottom;
}
.musical-hero__media {
display: none;
}
.musical-hero::before {
opacity: 0.5;
}
}
.musical-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgb(26 26 26 / 25%) 0%, rgb(26 26 26 / 78%) 100%);
}
.musical-hero__inner {
position: relative;
width: 100%;
max-width: 75rem;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
align-items: start;
}
.musical-hero__brand {
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
font-family: var(--musical-font-display);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1;
color: var(--musical-text-light);
}
.musical-hero__title {
color: var(--musical-text-light);
max-width: 20ch;
}
.musical-hero__lede {
color: rgb(245 245 245 / 88%);
max-width: 48ch;
}
.musical-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-md);
margin-block-start: var(--musical-space-sm);
}
.musical-hero__copy > *,
.musical-hero__inner > .musical-player-wrap--hero {
animation: musical-rise var(--musical-duration-smooth) var(--musical-easing-luxe) both;
}
.musical-hero__copy > :nth-child(1) { animation-delay: 0s; }
.musical-hero__copy > :nth-child(2) { animation-delay: 0s; }
.musical-hero__copy > :nth-child(3) { animation-delay: 0.08s; }
.musical-hero__copy > :nth-child(4) { animation-delay: 0.16s; }
.musical-hero__inner > .musical-player-wrap--hero { animation-delay: 0.24s; }
.musical-hero__copy {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
align-items: start;
}
.musical-player-wrap--hero {
width: 100%;
max-width: none;
}
@media (min-width: 64rem) {
.musical-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
align-items: center;
column-gap: var(--musical-space-3xl);
}
}
@keyframes musical-rise {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes musical-drift-media {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-1%, 0.6%, 0) scale(1.045); }
}
@keyframes musical-drift-field {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(2.5%, -2%, 0); }
}
@media (prefers-reduced-motion: no-preference) {
.musical-hero__media {
will-change: transform;
animation: musical-drift-media var(--musical-duration-ambient) ease-in-out infinite alternate;
}
.musical-hero::before {
will-change: transform;
animation: musical-drift-field 40s ease-in-out infinite alternate;
}
}
.musical-track-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--musical-space-md);
padding: var(--musical-space-md);
background: #fff;
border-radius: var(--musical-radius-lg);
box-shadow: var(--musical-shadow-card);
scroll-margin-top: calc(64px + var(--musical-space-lg));
transition:
box-shadow var(--musical-duration-smooth) var(--musical-easing-out),
transform var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-track-card:hover,
.musical-track-card:focus-within {
box-shadow: var(--musical-shadow-card-hover);
transform: translateY(-4px);
}
.musical-track-card--fresh {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-track-card__fresh {
margin: 0;
display: flex;
align-items: center;
gap: var(--musical-space-sm);
padding: var(--musical-space-sm) var(--musical-space-md);
border-radius: var(--musical-radius-md);
background: rgb(0 122 122 / 10%);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.5;
color: var(--musical-primary-ink);
}
.musical-track-card__art {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--musical-radius-md);
overflow: hidden;
background: var(--musical-bg-dark);
}
.musical-track-card__art:has(.musical-cover--wave),
.musical-player__art:has(.musical-cover--wave),
.musical-playlist-hero__art:has(.musical-cover--wave) {
background: none;
}
.musical-track-card__art img,
.musical-track-card__art .musical-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--musical-duration-luxe) var(--musical-easing-out);
}
.musical-track-card:hover .musical-track-card__art img,
.musical-track-card:hover .musical-track-card__art .musical-cover {
transform: scale(1.04);
}
.musical-track-card__play {
position: absolute;
z-index: 2;
inset-block-end: var(--musical-space-sm);
inset-inline-end: var(--musical-space-sm);
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: var(--musical-tertiary);
color: var(--musical-text-primary);
cursor: pointer;
box-shadow:
0 0 0 1px rgb(26 26 26 / 22%),
var(--musical-shadow-lift);
transition:
transform var(--musical-duration-smooth) var(--musical-easing-out),
background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-track-card__play svg {
width: 20px;
height: 20px;
fill: currentcolor;
pointer-events: none;
}
.musical-track-card:hover .musical-track-card__play,
.musical-track-card__play:focus-visible {
transform: scale(1.1);
}
.musical-track-card__play:active {
transform: scale(0.95);
}
.musical-track-card__body {
display: flex;
flex-direction: column;
gap: var(--musical-space-xs);
}
.musical-track-card__title {
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.4;
margin: 0;
}
.musical-track-card__link {
color: var(--musical-text-primary);
text-decoration: none;
}
.musical-mark {
position: relative;
z-index: 2;
display: inline-flex;
flex: none;
align-items: center;
gap: 0.25rem;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
cursor: help;
}
.musical-mark svg {
width: 18px;
height: 18px;
fill: currentcolor;
}
.musical-mark::after {
content: attr(data-musical-tip);
position: absolute;
z-index: 5;
inset-block-end: calc(100% + 6px);
inset-inline-end: -4px;
padding: 0.25rem 0.5rem;
border-radius: var(--musical-radius-sm);
background: #1d1d1d;
color: #f5f5f5;
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.3;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
scale: 0;
transition:
opacity var(--musical-duration-quick) var(--musical-easing-out),
visibility var(--musical-duration-quick) var(--musical-easing-out),
scale 0s linear var(--musical-duration-quick);
}
.musical-mark:hover::after,
.musical-mark.is-tipped::after {
opacity: 1;
visibility: visible;
scale: 1;
transition:
opacity var(--musical-duration-quick) var(--musical-easing-out),
visibility var(--musical-duration-quick) var(--musical-easing-out),
scale 0s;
}
.musical-track-card__marks {
display: inline-flex;
flex: none;
align-items: center;
gap: 0.375rem;
}
.musical-track-card__marks:empty {
display: none;
}
.musical-track-card__link::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
border-radius: var(--musical-radius-lg);
}
.musical-track-card:has(.musical-track-card__owner-tools) .musical-track-card__link::after {
content: none;
}
.musical-track-card__link:hover {
color: var(--musical-primary-ink);
}
.musical-track-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-track-card__meta a {
position: relative;
z-index: 2;
color: var(--musical-text-secondary);
}
.musical-track-card__meta a:hover {
color: var(--musical-primary-ink);
}
.musical-track-card__lead {
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
overflow-wrap: anywhere;
}
.musical-track-card__lead a {
position: relative;
z-index: 2;
color: var(--musical-text-primary);
text-decoration: none;
}
.musical-track-card__lead a:hover {
color: var(--musical-primary-ink);
}
.musical-track-card--lead-artist .musical-track-card__title {
font-family: var(--musical-font-body);
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
overflow-wrap: anywhere;
}
.musical-track-card__meta > :not(:first-child):not(.musical-badge):not(.musical-share-btn):not(.musical-embed-btn)::before {
content: "\00b7" / "";
margin-inline-end: var(--musical-space-sm);
color: var(--musical-text-secondary);
}
.musical-track-card__meta > .musical-track-card__marks:not(:first-child):not(.musical-badge):not(.musical-share-btn):not(.musical-embed-btn)::before,
.musical-track-card__meta > .musical-track-card__rating:not(:first-child):not(.musical-badge):not(.musical-share-btn):not(.musical-embed-btn)::before {
content: none;
}
.musical-track-card:not(.musical-track-card--list):not(.musical-track-card--row) .musical-track-card__meta:has(> a:first-child) {
row-gap: 0;
}
.musical-track-card:not(.musical-track-card--list):not(.musical-track-card--row) .musical-track-card__meta:has(> a:first-child)::after {
content: "";
flex: 0 0 100%;
order: 1;
}
.musical-track-card:not(.musical-track-card--list):not(.musical-track-card--row) .musical-track-card__meta:has(> a:first-child) > :not(:first-child):not(.musical-share-btn) {
order: 2;
}
.musical-track-card:not(.musical-track-card--list):not(.musical-track-card--row) .musical-track-card__meta:has(> a:first-child) > .musical-share-btn {
margin-block: -0.875rem;
}
.musical-track-card:not(.musical-track-card--list):not(.musical-track-card--row) .musical-track-card__meta > a:first-child + ::before {
content: none;
}
.musical-track-card:not(.musical-track-card--list):not(.musical-track-card--row) .musical-track-card__meta > .musical-share-btn {
margin-inline-start: auto;
}
.musical-track-card:not(.musical-track-card--list):not(.musical-track-card--row) .musical-track-card__meta:not(:has(> a:first-child)) > .musical-track-card__marks:not(:empty) {
margin-inline-start: auto;
}
.musical-track-card:not(.musical-track-card--list):not(.musical-track-card--row) .musical-track-card__meta:not(:has(> a:first-child)) > .musical-track-card__marks:not(:empty) + .musical-share-btn {
margin-inline-start: 0;
}
.musical-track-card:not(.musical-track-card--list):not(.musical-track-card--row) .musical-track-card__meta:has(> a:first-child) .musical-mark::after {
inset-inline: -4px auto;
}
.musical-track-card__duration {
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
}
.musical-track-card__stat {
font-variant-numeric: tabular-nums;
}
.musical-share-btn {
position: relative;
z-index: 2;
flex: 0 0 auto;
color: var(--musical-text-secondary);
}
.musical-share-btn:hover,
.musical-share-btn:focus-visible {
color: var(--musical-primary-ink);
}
.musical-share-btn svg {
width: 18px;
height: 18px;
fill: currentcolor;
pointer-events: none;
}
.musical-share-btn[hidden] {
display: none;
}
.musical-share-menu {
position: fixed;
z-index: 850;
inline-size: max-content;
min-inline-size: 12rem;
max-inline-size: min(18rem, calc(100vw - 16px));
padding: var(--musical-space-xs);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
background: #fff;
box-shadow: var(--musical-shadow-lift);
font-family: var(--musical-font-body);
opacity: 0;
transform: translateY(-4px) scale(0.96);
transition:
opacity 0.1s var(--musical-easing-out),
transform 0.1s var(--musical-easing-out);
}
.musical-share-menu.is-above {
transform: translateY(4px) scale(0.96);
}
.musical-share-menu.is-open {
opacity: 1;
transform: none;
transition:
opacity 0.16s var(--musical-easing-out),
transform 0.2s var(--musical-easing-luxe);
}
.musical-share-menu__title {
margin: 0;
padding: var(--musical-space-xs) var(--musical-space-sm) var(--musical-space-xs);
overflow: hidden;
font-size: 0.8125rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--musical-text-primary);
}
.musical-share-menu__title[hidden] {
display: none;
}
.musical-share-menu__list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.musical-share-menu__list li[hidden] {
display: none;
}
.musical-share-menu__list li:nth-child(5) {
margin-block-start: var(--musical-space-xs);
padding-block-start: var(--musical-space-xs);
border-block-start: 1px solid var(--musical-border);
}
.musical-share-menu__item {
display: flex;
align-items: center;
gap: var(--musical-space-sm);
inline-size: 100%;
min-block-size: 48px;
padding: 0 var(--musical-space-sm);
border: 0;
border-radius: var(--musical-radius-sm);
background: transparent;
color: var(--musical-text-primary);
font: inherit;
font-size: 0.875rem;
text-align: start;
text-decoration: none;
cursor: pointer;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
@media (min-width: 48rem) {
.musical-share-menu__item {
min-block-size: 44px;
}
}
.musical-share-menu__item svg {
flex: none;
inline-size: 20px;
block-size: 20px;
fill: currentcolor;
color: var(--musical-text-secondary);
}
.musical-share-menu__item:hover {
background: var(--musical-bg-light);
}
.musical-share-menu__item:hover svg,
.musical-share-menu__item:focus-visible svg {
color: var(--musical-primary-ink);
}
.musical-share-menu__item:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: -2px;
background: var(--musical-bg-light);
}
.musical-share-btn[aria-expanded="true"] {
color: var(--musical-primary-ink);
background: var(--musical-bg-light);
}
.musical-section:has([data-musical-grid-empty="similar"]) {
display: none;
}
.musical-gallery--list {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.musical-track-card--list {
display: grid;
grid-template-areas: "art body";
grid-template-columns: 36px minmax(0, 1fr);
align-items: center;
gap: var(--musical-space-md);
min-height: 44px;
padding-block: 0;
padding-inline: var(--musical-space-sm);
background: transparent;
border-radius: 0;
box-shadow: none;
border-block-end: 1px solid var(--musical-border);
}
.musical-track-card--list:has(.musical-track-card__index) {
grid-template-areas: "index art body";
grid-template-columns: 1.5rem 36px minmax(0, 1fr);
}
.musical-section--media .musical-track-card--list {
--musical-text-primary: var(--musical-text-light);
--musical-text-secondary: rgb(245 245 245 / 75%);
--musical-primary-ink: var(--musical-primary);
--musical-border: var(--musical-border-dark);
}
.musical-section--media .musical-track-card--list:hover,
.musical-section--media .musical-track-card--list:focus-within {
background: rgb(245 245 245 / 8%);
}
.musical-track-card--list:hover,
.musical-track-card--list:focus-within {
transform: none;
box-shadow: none;
background: rgb(0 122 122 / 6%);
}
.musical-track-card--list:hover .musical-track-card__art img,
.musical-track-card--list:hover .musical-track-card__art .musical-cover {
transform: none;
}
.musical-track-card__index {
grid-area: index;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
text-align: end;
}
.musical-track-card--list .musical-track-card__art {
grid-area: art;
overflow: visible;
}
.musical-track-card--list .musical-track-card__art img,
.musical-track-card--list .musical-track-card__art .musical-cover {
border-radius: var(--musical-radius-sm);
}
.musical-track-card--list .musical-track-card__body {
grid-area: body;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--musical-space-md);
}
.musical-track-card--list .musical-track-card__title {
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.musical-track-card--list .musical-track-card__meta {
flex-wrap: nowrap;
white-space: nowrap;
}
@media (min-width: 30.01rem) {
.musical-track-card--list .musical-track-card__marks,
.musical-track-card--list .musical-track-card__marks:empty {
display: inline-flex;
justify-content: flex-end;
min-width: 2.625rem;
}
}
.musical-track-card--list .musical-share-btn {
width: 44px;
height: 44px;
}
.musical-track-card--list .musical-track-card__play {
inset: 50% auto auto 50%;
translate: -50% -50%;
width: 44px;
height: 44px;
border-radius: 50%;
background: transparent;
color: var(--musical-text-light);
box-shadow: none;
opacity: 0;
transition: opacity var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-track-card--list .musical-track-card__play::after {
content: "";
position: absolute;
z-index: -1;
inset: 50% auto auto 50%;
translate: -50% -50%;
border-radius: var(--musical-radius-sm);
background: rgb(26 26 26 / 55%);
}
.musical-track-card--list .musical-track-card__play::after {
width: 28px;
height: 28px;
}
@media (hover: none) {
.musical-track-card--list .musical-track-card__play {
opacity: 1;
}
}
.musical-track-card--list:hover .musical-track-card__play,
.musical-track-card--list .musical-track-card__play:focus-visible,
.musical-track-card--list.is-playing .musical-track-card__play {
opacity: 1;
transform: none;
}
.musical-track-card--list.is-playing {
background: rgb(0 122 122 / 12%);
box-shadow: inset 3px 0 0 0 var(--musical-primary-ink);
}
.musical-track-card--list.is-playing:hover,
.musical-track-card--list.is-playing:focus-within {
background: rgb(0 122 122 / 16%);
box-shadow: inset 3px 0 0 0 var(--musical-primary-ink);
}
.musical-track-card--list.is-playing .musical-track-card__link {
color: var(--musical-primary-ink);
}
.musical-section--media .musical-track-card--list.is-playing,
.musical-section--media .musical-track-card--list.is-playing:hover,
.musical-section--media .musical-track-card--list.is-playing:focus-within {
background: rgb(245 245 245 / 14%);
box-shadow: inset 3px 0 0 0 var(--musical-primary);
}
.musical-section--media .musical-track-card--list.is-playing .musical-track-card__link {
color: var(--musical-primary);
}
.musical-track-card--list .musical-track-card__play svg {
width: 14px;
height: 14px;
}
@media (min-width: 48rem) {
.musical-track-card--list {
grid-template-columns: 48px minmax(0, 1fr);
gap: var(--musical-space-lg);
min-height: 64px;
padding-inline: var(--musical-space-md);
}
.musical-track-card--list:has(.musical-track-card__index) {
grid-template-columns: 1.75rem 48px minmax(0, 1fr);
}
.musical-track-card--list .musical-track-card__title {
font-size: 1rem;
}
.musical-track-card--list .musical-track-card__play::after {
width: 40px;
height: 40px;
}
.musical-track-card--list .musical-track-card__play svg {
width: 16px;
height: 16px;
}
}
@media (min-width: 48rem) and (hover: hover) {
.musical-track-card--list .musical-track-card__play {
opacity: 0.75;
}
}
.musical-track-card--list .musical-cover--wave .musical-cover__beat {
display: none;
}
.musical-track-card--list:has(.musical-cover--wave) .musical-track-card__play::after {
content: none;
}
.musical-track-card--list:has(.musical-cover--teal) .musical-track-card__play {
color: var(--musical-cover-teal-ink);
}
.musical-track-card--list:has(.musical-cover--pink) .musical-track-card__play {
color: var(--musical-cover-pink-ink);
}
.musical-track-card--list:has(.musical-cover--amber) .musical-track-card__play {
color: var(--musical-cover-amber-ink);
}
@media (max-width: 30rem) {
.musical-track-card--list .musical-track-card__duration,
.musical-track-card--list .musical-track-card__stat {
display: none;
}
.musical-track-card--list:has(.musical-track-card__meta > a) .musical-track-card__body {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas:
"title marks share"
"meta  marks share";
align-items: center;
gap: 0.125rem var(--musical-space-sm);
}
.musical-track-card--list:has(.musical-track-card__meta > a) .musical-track-card__marks {
grid-area: marks;
}
.musical-track-card--list:has(.musical-track-card__meta > a):where(:has(.musical-track-card__rating)) .musical-track-card__body {
grid-template-columns: minmax(0, 1fr) auto auto auto;
grid-template-areas:
"title marks rating share"
"meta  marks rating share";
}
.musical-track-card--list:has(.musical-track-card__meta > a) .musical-track-card__rating {
grid-area: rating;
}
.musical-track-card--list:has(.musical-track-card__meta > a) .musical-track-card__title {
grid-area: title;
}
.musical-track-card--list:has(.musical-track-card__meta > a) .musical-track-card__meta {
display: contents;
}
.musical-track-card--list .musical-track-card__meta > a {
grid-area: meta;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.musical-track-card--list:has(.musical-track-card__meta > a) .musical-share-btn {
grid-area: share;
}
.musical-track-card--list:has(.musical-track-card__meta > a) {
min-height: 56px;
}
}
.musical-badge {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
padding: 2px var(--musical-space-sm);
border-radius: var(--musical-radius-pill);
font-family: var(--musical-font-body);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.musical-badge--private {
background: var(--musical-border);
color: #4a4a4a;
}
.musical-badge--public {
background: rgb(0 122 122 / 12%);
color: var(--musical-primary-ink);
}
.musical-badge--unlisted {
background: rgb(145 23 100 / 10%);
color: var(--musical-secondary-ink);
}
.musical-song-stage {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--musical-bg-light);
}
.musical-song-stage > * {
position: relative;
z-index: 1;
}
.musical-song-stage::before,
.musical-song-stage::after {
content: '';
position: absolute;
z-index: 0;
inset-inline: -8%;
inset-block-start: -14rem;
block-size: min(72rem, 14rem + 100vh);
pointer-events: none;
}
.musical-song-stage::before {
background-image: var(--musical-song-art, none);
background-position: center 38%;
background-size: cover;
filter: blur(68px) saturate(2.3) brightness(1.14);
opacity: 0.46;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 19%, black 33%, black 52%, transparent 80%);
mask-image: linear-gradient(180deg, transparent 0%, transparent 19%, black 33%, black 52%, transparent 80%);
transition: opacity var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-song-stage:has(.musical-player.is-playing)::before {
opacity: 0.74;
transition: opacity var(--musical-duration-luxe) var(--musical-easing-luxe);
}
.musical-song-stage::after {
background:
radial-gradient(42% 48% at 16% 34%, rgb(0 217 217 / 26%) 0%, rgb(0 217 217 / 0%) 70%),
radial-gradient(46% 52% at 86% 26%, rgb(230 29 155 / 16%) 0%, rgb(230 29 155 / 0%) 72%),
radial-gradient(52% 46% at 54% 72%, rgb(255 165 0 / 18%) 0%, rgb(255 165 0 / 0%) 74%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 17%, black 26%, black 52%, transparent 83%);
mask-image: linear-gradient(180deg, transparent 0%, transparent 17%, black 26%, black 52%, transparent 83%);
}
.musical-song-stage .musical-back {
color: var(--musical-text-primary);
}
@media (prefers-reduced-motion: no-preference) {
.musical-song-stage::before {
will-change: transform;
animation: musical-drift-media var(--musical-duration-ambient) ease-in-out infinite alternate;
}
.musical-song-stage::after {
will-change: transform;
animation: musical-drift-field 44s ease-in-out infinite alternate;
}
}
.musical-song-silent {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
width: 100%;
max-width: var(--musical-player-width);
margin-inline: auto;
}
.musical-back-row {
max-width: var(--musical-player-width);
margin-inline: auto;
margin-block: calc(-1 * var(--musical-space-sm)) var(--musical-space-xs);
}
.musical-back-row[hidden] {
display: none;
}
.musical-player-wrap:has(> .musical-back-row:not([hidden])) {
--musical-art-back: 2.5rem;
}
.musical-back {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
min-height: 44px;
padding-inline-end: var(--musical-space-sm);
border-radius: var(--musical-radius-sm);
font-family: var(--musical-font-body);
font-size: 0.9375rem;
font-weight: 600;
color: var(--musical-text-secondary);
text-decoration: none;
}
.musical-back:hover {
color: var(--musical-text-primary);
}
.musical-back:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-back svg {
flex: none;
width: 20px;
height: 20px;
fill: currentcolor;
}
.musical-player {
--musical-player-gap: var(--musical-space-lg);
--musical-art-max: 22rem;
display: flex;
flex-direction: column;
gap: var(--musical-player-gap);
width: 100%;
max-width: var(--musical-player-width);
margin-inline: auto;
padding: var(--musical-space-xl);
background: var(--musical-bg-dark);
border-radius: var(--musical-radius-lg);
color: var(--musical-text-light);
}
.musical-player__stage {
position: relative;
width: 100%;
max-width: var(--musical-art-max, 22rem);
margin-inline: auto;
padding-block-end: 3rem;
}
.musical-player--hero {
gap: var(--musical-space-md);
max-width: none;
padding: var(--musical-space-lg);
background: rgb(26 26 26 / 62%);
border: 1px solid rgb(245 245 245 / 12%);
}
.musical-player--hero .musical-player__eyebrow {
margin: 0;
}
.musical-player--hero .musical-player__stage {
padding-block-end: 0;
max-width: 13rem;
}
.musical-player--hero .musical-player__meta {
display: flex;
flex-direction: column;
gap: var(--musical-space-xs);
text-align: left;
}
.musical-player--hero .musical-player__title {
font-family: var(--musical-font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--musical-text-light);
margin: 0;
}
.musical-player--hero .musical-player__title-link,
.musical-player--hero .musical-player__artist a {
color: inherit;
text-decoration: none;
}
.musical-player--hero .musical-player__title-link:hover,
.musical-player--hero .musical-player__artist a:hover {
text-decoration: underline;
}
.musical-player--hero .musical-player__artist {
margin: 0;
font-size: 0.875rem;
color: rgb(245 245 245 / 78%);
}
.musical-player--hero .musical-player__controls {
justify-content: flex-start;
}
@media (max-width: 63.99rem) {
.musical-player--hero {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
grid-template-areas:
"art eyebrow"
"art meta"
"controls controls";
align-items: center;
column-gap: var(--musical-space-md);
row-gap: var(--musical-space-xs);
}
.musical-player--hero .musical-player__eyebrow {
grid-area: eyebrow;
align-self: end;
}
.musical-player--hero .musical-player__stage {
grid-area: art;
max-width: 4.5rem;
align-self: center;
}
.musical-player--hero .musical-player__meta {
grid-area: meta;
align-self: start;
}
.musical-player--hero .musical-player__controls {
grid-area: controls;
margin-block-start: var(--musical-space-xs);
}
}
.musical-player--start-here {
background: var(--musical-bg-dark);
border: 1px solid var(--musical-border-dark);
border-radius: var(--musical-radius-lg);
margin-block-end: var(--musical-space-xl);
}
.musical-player--start-here .musical-player__eyebrow {
color: var(--musical-primary);
}
.musical-player--start-here .musical-player__title {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.3;
}
@media (min-width: 48rem) {
.musical-player--start-here {
display: grid;
grid-template-columns: 10rem minmax(0, 1fr);
grid-template-areas:
"art eyebrow"
"art meta"
"art controls";
align-items: center;
column-gap: var(--musical-space-lg);
row-gap: var(--musical-space-xs);
}
.musical-player--start-here .musical-player__eyebrow {
grid-area: eyebrow;
align-self: end;
margin: 0;
}
.musical-player--start-here .musical-player__stage {
grid-area: art;
max-width: 10rem;
align-self: center;
}
.musical-player--start-here .musical-player__meta {
grid-area: meta;
align-self: start;
}
.musical-player--start-here .musical-player__controls {
grid-area: controls;
margin-block-start: var(--musical-space-xs);
}
}
.musical-track-card--list[aria-current="true"] {
background: rgb(0 122 122 / 12%);
box-shadow: inset 3px 0 0 0 var(--musical-primary-ink);
}
.musical-track-card--list[aria-current="true"] .musical-track-card__link {
color: var(--musical-primary-ink);
}
.musical-track-card[aria-current="true"] .musical-track-card__play {
opacity: 1;
transform: none;
}
.musical-player--start-here[aria-current="true"]:not(.is-playing) .musical-player__title {
color: var(--musical-primary);
}
.musical-player__stage:not(:has(.musical-spark)) {
padding-block-end: 0;
}
.musical-player__stage:has(.musical-spark.is-sparked) .musical-player__art {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--musical-primary) 55%, transparent),
0 0 3.5rem -0.5rem color-mix(in srgb, var(--musical-primary) 45%, transparent);
}
.musical-player__art {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--musical-radius-lg);
overflow: hidden;
background: var(--musical-bg-dark);
transition:
transform var(--musical-duration-smooth) var(--musical-easing-out),
box-shadow var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-player__art img,
.musical-player__art .musical-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: musical-fade var(--musical-duration-smooth) var(--musical-easing-out) both;
}
@keyframes musical-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.musical-player.is-playing .musical-player__art {
transform: scale(1.02);
}
.musical-cover__beat {
transform-box: fill-box;
transform-origin: center;
}
@keyframes musical-beat-pulse {
0% { transform: scale(1); }
9% { transform: scale(1.07); }
62% { transform: scale(1.005); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
.is-playing [data-musical-beat] .musical-cover__beat {
animation-duration: var(--musical-beat, 0.75s);
animation-timing-function: var(--musical-easing-out);
animation-iteration-count: infinite;
}
.is-playing [data-musical-beat] .musical-cover__beat--pulse { animation-name: musical-beat-pulse; }
}
.musical-player__meta {
display: flex;
flex-direction: column;
gap: var(--musical-space-xs);
}
.musical-player__meta:has(.musical-player__collapse) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"artist toggle"
"title  title";
column-gap: var(--musical-space-sm);
align-items: start;
}
.musical-player__meta:has(.musical-player__collapse) .musical-player__artist {
grid-area: artist;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.musical-player__meta:has(.musical-player__collapse) .musical-player__title {
grid-area: title;
}
.musical-player__tools {
grid-area: toggle;
display: flex;
align-items: center;
margin-block: -0.75rem;
margin-inline-end: calc(var(--musical-space-sm) * -1);
}
.musical-player__tools .musical-icon-btn {
color: rgb(245 245 245 / 65%);
}
.musical-player__tools .musical-icon-btn:hover {
color: var(--musical-text-light);
}
.musical-player__collapse svg {
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
@media (max-width: 47.99rem) {
.musical-player__popout {
display: none;
}
}
.musical-player__collapse[aria-expanded="false"] svg {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.musical-player__collapse svg {
transition: none;
}
}
.musical-player.is-collapsed .musical-player__stage,
.musical-player.is-collapsed .musical-player__more {
display: none;
}
.musical-player.is-collapsed .musical-player__artist {
white-space: normal;
overflow: visible;
}
.musical-player-wrap.is-popped .musical-player {
display: none;
}
.musical-player__restore {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: var(--musical-player-width);
min-height: 48px;
margin-inline: auto;
padding: 0;
appearance: none;
border: 1px dashed var(--musical-border);
border-radius: var(--musical-radius-lg);
background: none;
color: var(--musical-text-secondary);
cursor: pointer;
transition:
border-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-player__restore[hidden] {
display: none;
}
.musical-nowplaying__restore svg {
transform: rotate(180deg);
}
.musical-nowplaying__close {
flex: 0 0 auto;
margin-inline-start: auto;
min-width: 44px;
min-height: 44px;
}
.musical-nowplaying__close svg {
width: 18px;
height: 18px;
}
.musical-player__restore:hover {
border-color: var(--musical-primary-ink);
color: var(--musical-primary-ink);
}
.musical-player__restore:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 4px;
}
.musical-player__restore svg {
width: 24px;
height: 24px;
fill: currentcolor;
transform: rotate(180deg);
}
.musical-player__artist {
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-primary);
}
.musical-player__artist a {
color: inherit;
text-decoration: none;
}
.musical-player__artist a:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-player__more {
align-self: flex-start;
max-inline-size: 100%;
margin-block-start: calc(var(--musical-player-gap) * -1 + var(--musical-space-sm));
min-height: 48px;
padding: var(--musical-space-sm) var(--musical-space-md);
justify-content: flex-start;
letter-spacing: 0;
background: rgb(22 53 53);
color: var(--musical-primary);
box-shadow: inset 0 0 0 1px rgb(0 217 217 / 35%);
}
.musical-player__more svg {
inline-size: 20px;
block-size: 20px;
flex: none;
fill: currentColor;
}
.musical-player__more-text {
display: flex;
gap: 0.3em;
min-inline-size: 0;
line-height: 1.3;
}
.musical-player__more-count {
flex: none;
white-space: nowrap;
color: var(--musical-text-light);
}
.musical-player__more-by {
min-inline-size: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.musical-player__more:hover,
.musical-player__more:focus-visible {
background: rgb(20 68 68);
box-shadow: inset 0 0 0 1px var(--musical-primary);
}
@media (prefers-reduced-motion: no-preference) {
.musical-player__more > svg:last-child {
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-player__more:hover > svg:last-child {
transform: translateX(3px);
}
}
@media (max-width: 47.99rem) {
.musical-player__more {
align-self: stretch;
padding-inline: 0.75rem;
gap: 0.375rem;
}
.musical-player__more > svg:last-child {
display: none;
}
}
.musical-player__title {
font-family: var(--musical-font-display);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--musical-text-light);
margin: 0;
}
.musical-player__controls {
display: flex;
align-items: center;
gap: var(--musical-space-md);
min-height: 56px;
}
.musical-player__play {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 56px;
height: 56px;
border: 0;
border-radius: 50%;
background: var(--musical-tertiary);
color: var(--musical-text-primary);
cursor: pointer;
transition:
transform var(--musical-duration-smooth) var(--musical-easing-out),
background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-player__play svg {
width: 24px;
height: 24px;
fill: currentcolor;
pointer-events: none;
}
.musical-player__play:hover {
background: #ffb733;
transform: scale(1.08);
}
.musical-player__play:active {
transform: scale(0.95);
}
.musical-player:not(.musical-player--hero) .musical-player__controls {
min-height: 48px;
}
.musical-player:not(.musical-player--hero) .musical-player__play {
width: 48px;
height: 48px;
}
.musical-player__icon-play {
display: flex;
}
.musical-player__icon-pause {
display: none;
}
.is-playing .musical-player__icon-play {
display: none;
}
.is-playing .musical-player__icon-pause {
display: flex;
}
.musical-player__skip {
position: relative;
width: 40px;
height: 40px;
flex: none;
color: rgb(245 245 245 / 75%);
}
@media (hover: none) {
.musical-player__skip::after {
content: "";
position: absolute;
inset: -4px;
}
}
.musical-player__skip svg {
width: 20px;
height: 20px;
fill: currentcolor;
}
.musical-player__skip:hover {
color: var(--musical-text-light);
}
.musical-player__timeline {
display: flex;
align-items: center;
gap: var(--musical-space-sm);
flex: 1 1 auto;
min-width: 0;
}
.musical-player__time {
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
color: rgb(245 245 245 / 75%);
flex: 0 0 auto;
}
.musical-seek,
.musical-volume {
appearance: none;
width: 100%;
height: 20px;
background: transparent;
cursor: pointer;
margin: 0;
}
.musical-seek {
flex: 1 1 auto;
min-width: 0;
--musical-progress: 0%;
}
.musical-volume {
flex: 0 0 6.25rem;
width: 6.25rem;
--musical-progress: 100%;
}
.musical-traits {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-lg);
margin: var(--musical-space-lg) 0 0;
padding-block-start: var(--musical-space-md);
border-block-start: 1px solid var(--musical-border);
}
.musical-details > .musical-traits:first-child {
margin-block-start: 0;
padding-block-start: 0;
border-block-start: 0;
}
.musical-traits__item {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.musical-traits__label {
font-family: var(--musical-font-body);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-traits__value {
margin: 0;
font-family: var(--musical-font-body);
font-size: 1rem;
font-variant-numeric: tabular-nums;
color: var(--musical-text-primary);
}
.musical-details__empty {
margin: 0;
font-family: var(--musical-font-body);
font-size: 1rem;
color: var(--musical-text-secondary);
}
.musical-waveform {
position: relative;
flex: 1 1 auto;
min-width: 0;
height: 3rem;
--musical-progress: 0%;
}
.musical-waveform__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.musical-waveform__base {
fill: rgb(245 245 245 / 24%);
}
.musical-waveform__played {
fill: var(--musical-primary);
width: var(--musical-progress);
transition: width var(--musical-duration-quick) linear;
}
.musical-waveform .musical-seek {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.musical-waveform .musical-seek::-webkit-slider-runnable-track {
height: 100%;
background: transparent;
}
.musical-waveform .musical-seek::-moz-range-track,
.musical-waveform .musical-seek::-moz-range-progress {
height: 100%;
background: transparent;
}
.musical-waveform .musical-seek::-webkit-slider-thumb {
appearance: none;
width: 3px;
height: 3rem;
margin-top: 0;
border-radius: 1px;
background: var(--musical-tertiary);
box-shadow: 0 0 6px rgb(0 0 0 / 50%);
}
.musical-waveform .musical-seek::-moz-range-thumb {
width: 3px;
height: 3rem;
border: 0;
border-radius: 1px;
background: var(--musical-tertiary);
}
.musical-waveform:hover .musical-waveform__base {
fill: rgb(245 245 245 / 34%);
}
.musical-waveform .musical-seek:hover::-webkit-slider-runnable-track {
height: 100%;
}
.musical-waveform .musical-seek:hover::-webkit-slider-thumb {
width: 5px;
margin-top: 0;
border-radius: 1px;
}
@media (max-width: 47.9375em) {
.musical-waveform {
height: 2.25rem;
}
.musical-waveform .musical-seek::-webkit-slider-thumb,
.musical-waveform .musical-seek::-moz-range-thumb {
height: 2.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
.musical-waveform__played {
transition: none;
}
}
.musical-seek::-webkit-slider-runnable-track,
.musical-volume::-webkit-slider-runnable-track {
height: 4px;
border-radius: var(--musical-radius-pill);
background: linear-gradient(
to right,
var(--musical-primary) 0 var(--musical-progress),
var(--musical-border-dark) var(--musical-progress) 100%
);
transition: height var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-seek::-moz-range-track,
.musical-volume::-moz-range-track {
height: 4px;
border-radius: var(--musical-radius-pill);
background: var(--musical-border-dark);
}
.musical-seek::-moz-range-progress,
.musical-volume::-moz-range-progress {
height: 4px;
border-radius: var(--musical-radius-pill);
background: var(--musical-primary);
}
.musical-seek::-webkit-slider-thumb,
.musical-volume::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
margin-top: -4px;
border: 0;
border-radius: 50%;
background: var(--musical-tertiary);
box-shadow: 0 1px 4px rgb(0 0 0 / 40%);
transition:
width var(--musical-duration-quick) var(--musical-easing-out),
height var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-seek::-moz-range-thumb,
.musical-volume::-moz-range-thumb {
width: 12px;
height: 12px;
border: 0;
border-radius: 50%;
background: var(--musical-tertiary);
}
.musical-seek:hover::-webkit-slider-runnable-track {
height: 6px;
}
.musical-seek:hover::-webkit-slider-thumb {
width: 16px;
height: 16px;
margin-top: -5px;
}
.musical-player__volume {
display: flex;
align-items: center;
gap: var(--musical-space-xs);
flex: 0 0 auto;
}
.musical-player__volume .musical-icon-btn {
width: 40px;
height: 40px;
color: rgb(245 245 245 / 80%);
}
@media (max-width: 47.99rem) {
.musical-player__volume {
display: none;
}
.musical-player__controls {
flex-wrap: wrap;
justify-content: center;
gap: var(--musical-space-sm);
}
.musical-player__timeline {
flex: 1 0 100%;
order: 2;
}
.musical-player {
padding: var(--musical-space-md);
--musical-art-reserve: 27.5rem;
--musical-art-floor: 8rem;
--musical-player-gap: var(--musical-space-md);
}
.musical-player-wrap:has(.musical-panels) .musical-player__stage {
max-width: min(
var(--musical-art-max, 22rem),
max(
var(--musical-art-floor),
calc(100svh - var(--musical-art-reserve) - var(--musical-art-back, 0rem))
)
);
}
}
@media (max-width: 47.99rem) and (max-height: 620px) {
.musical-player {
--musical-art-reserve: 26.5rem;
--musical-art-floor: 6rem;
}
.musical-section:has(.musical-player-wrap) {
padding-block-start: var(--musical-space-md);
}
}
@media (min-width: 48rem) {
.musical-player {
--musical-art-reserve: 33rem;
--musical-art-floor: 8rem;
}
.musical-player-wrap:has(.musical-panels) .musical-player__stage {
max-width: min(
var(--musical-art-max, 22rem),
max(
var(--musical-art-floor),
calc(100svh - var(--musical-art-reserve) - var(--musical-art-back, 0rem))
)
);
}
}
@media (min-width: 48rem) and (max-height: 760px) {
.musical-player {
--musical-art-reserve: 27rem;
--musical-art-floor: 6rem;
padding: var(--musical-space-lg);
}
.musical-section:has(.musical-player-wrap:not(.musical-player-wrap--hero)) {
padding-block-start: var(--musical-space-md);
}
.musical-player-wrap .musical-panels {
margin-block-start: var(--musical-space-md);
}
}
.musical-artist-header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--musical-space-md);
max-width: 50rem;
margin-inline: auto;
text-align: center;
}
.musical-artist-header--card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"avatar eyebrow cta"
"avatar name    cta"
"avatar bio     cta"
"avatar meta    cta";
gap: var(--musical-space-xs) var(--musical-space-lg);
align-items: start;
justify-items: start;
width: 100%;
max-width: none;
margin-inline: 0;
padding: var(--musical-space-lg);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
background: #fff;
text-align: start;
}
.musical-artist-header--card .musical-artist-header__avatar {
grid-area: avatar;
width: 5rem;
box-shadow: none;
}
.musical-artist-header--card .musical-eyebrow {
grid-area: eyebrow;
margin: 0;
}
.musical-artist-header--card .musical-artist-header__name {
grid-area: name;
margin: 0;
font-size: 1.5rem;
line-height: 1.2;
}
.musical-artist-header--card .musical-artist-header__name a {
color: inherit;
text-decoration: none;
}
.musical-artist-header--card .musical-artist-header__name a:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.musical-artist-header--card .musical-artist-header__bio {
grid-area: bio;
display: -webkit-box;
max-width: 65ch;
margin: 0;
overflow: hidden;
font-size: 1rem;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.musical-artist-header--card .musical-artist-header__meta {
grid-area: meta;
margin: 0;
justify-content: flex-start;
}
.musical-artist-header--card .musical-artist-header__cta {
grid-area: cta;
align-self: center;
white-space: nowrap;
}
@media (max-width: 40rem) {
.musical-artist-header--card {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"avatar eyebrow"
"avatar name"
"bio    bio"
"meta   meta"
"cta    cta";
gap: var(--musical-space-xs) var(--musical-space-md);
padding: var(--musical-space-md);
}
.musical-artist-header--card .musical-artist-header__avatar {
width: 3.5rem;
}
.musical-artist-header--card .musical-artist-header__name {
align-self: center;
font-size: 1.25rem;
}
.musical-artist-header--card .musical-artist-header__bio,
.musical-artist-header--card .musical-artist-header__meta {
margin-block-start: var(--musical-space-xs);
}
.musical-artist-header--card .musical-artist-header__cta {
align-self: start;
margin-block-start: var(--musical-space-sm);
}
}
.musical-artist-header__avatar {
width: clamp(7.5rem, 18vw, 12.5rem);
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(135deg, var(--musical-primary) 0%, var(--musical-secondary) 100%);
box-shadow: var(--musical-shadow-lift);
}
.musical-artist-header__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.musical-artist-header__bio {
color: var(--musical-text-secondary);
max-width: 55ch;
}
.musical-artist-header__meta,
.musical-artist-header__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--musical-space-xs) var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.875rem;
}
.musical-artist-header__meta {
color: var(--musical-text-secondary);
}
.musical-artist-header__meta > :not(:last-child)::after {
content: "·";
margin-inline-start: var(--musical-space-sm);
}
.musical-artist-header__links {
flex-direction: column;
gap: var(--musical-space-xs);
}
.musical-artist-header__links-heading {
margin: 0;
}
.musical-artist-header__links-list {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--musical-space-xs);
margin: 0;
padding: 0;
list-style: none;
max-width: 100%;
}
.musical-artist-header__links-list > li {
max-width: 100%;
}
.musical-artist-header__links a {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
color: var(--musical-primary-ink);
font-weight: 600;
text-underline-offset: 0.25em;
}
.musical-artist-header__links svg {
flex: none;
width: 1em;
height: 1em;
fill: currentColor;
}
.musical-artist-header__related {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
max-width: 100%;
}
.musical-artist-header__related-portrait {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
object-fit: cover;
flex: none;
}
.musical-artist-header__related span {
min-width: 0;
overflow-wrap: anywhere;
}
.musical-artist-header__related-connection,
.musical-artist-header__link-note {
color: var(--musical-text-secondary);
font-weight: 400;
}
.musical-up-row {
margin-block: calc(-1 * var(--musical-space-md)) var(--musical-space-sm);
text-align: start;
}
.musical-section--dark .musical-up-row .musical-back {
color: var(--musical-text-light);
}
.musical-section--dark .musical-up-row .musical-back:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-artist-directory {
width: 100%;
}
.musical-artist-directory__controls {
margin-block-end: var(--musical-space-lg);
}
.musical-artist-directory__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
gap: var(--musical-space-sm) var(--musical-space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.musical-artist-directory__item {
position: relative;
display: flex;
align-items: center;
gap: var(--musical-space-md);
min-height: 44px;
padding: var(--musical-space-sm);
border-radius: var(--musical-radius-md);
color: var(--musical-text-primary);
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-artist-directory__item:hover {
background: rgb(0 122 122 / 6%);
}
.musical-artist-directory__portrait {
flex: none;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
object-fit: cover;
background: linear-gradient(135deg, var(--musical-primary) 0%, var(--musical-secondary) 100%);
}
.musical-artist-directory__text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.musical-artist-directory__name {
font-family: var(--musical-font-body);
font-weight: 600;
color: inherit;
text-decoration: none;
overflow-wrap: anywhere;
}
.musical-artist-directory__name::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
border-radius: var(--musical-radius-md);
}
.musical-artist-directory__name:focus-visible {
outline: none;
}
.musical-artist-directory__name:focus-visible::after {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-artist-directory__item:hover .musical-artist-directory__name {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-artist-directory__facts {
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
overflow-wrap: anywhere;
}
.musical-artist-directory__stat {
flex: none;
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
white-space: nowrap;
}
.musical-artist-directory .musical-share-btn {
width: 44px;
height: 44px;
}
.musical-artist-directory--list .musical-artist-directory__list {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.musical-artist-directory--list .musical-artist-directory__item {
min-height: 56px;
padding-block: var(--musical-space-xs);
border-block-end: 1px solid var(--musical-border);
border-radius: 0;
}
.musical-artist-directory--list .musical-artist-directory__name::after {
border-radius: 0;
}
.musical-artist-directory--list .musical-artist-directory__name:focus-visible::after {
outline-offset: -2px;
}
.musical-artist-directory--list .musical-artist-directory__portrait {
width: 2.5rem;
height: 2.5rem;
}
.musical-artist-directory--list .musical-artist-directory__stat {
min-width: 6.5rem;
text-align: end;
}
.musical-artist-directory--grid .musical-artist-directory__stat,
.musical-artist-directory--grid .musical-mark {
display: none;
}
@media (max-width: 30rem) {
.musical-artist-directory__stat {
display: none;
}
.musical-artist-directory__item {
gap: var(--musical-space-sm);
}
}
.musical-artist-directory__pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--musical-space-md);
margin-block-start: var(--musical-space-xl);
}
.musical-artist-header > .musical-stack {
align-self: stretch;
}
.musical-artist-header .musical-share {
width: min(100%, 34rem);
margin-inline: auto;
justify-content: center;
}
.musical-install-wrap {
max-width: 34rem;
width: 100%;
}
.musical-install-help {
margin: var(--musical-space-md) auto 0;
max-inline-size: 30rem;
padding: var(--musical-space-md);
border-radius: var(--musical-radius-lg);
background: #fff;
color: var(--musical-text-primary);
text-align: start;
box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
display: grid;
gap: var(--musical-space-md);
}
.musical-install-help[hidden],
.musical-install-guide[hidden] {
display: none;
}
.musical-install-for {
display: grid;
gap: var(--musical-space-xs);
}
.musical-install-for label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--musical-text-secondary);
}
.musical-install-for__select {
min-height: 44px;
}
.musical-install-steps {
list-style: none;
counter-reset: musical-install-step;
margin: 0;
padding: 0;
display: grid;
gap: var(--musical-space-md);
}
.musical-install-steps li {
counter-increment: musical-install-step;
display: grid;
grid-template-columns: 1.75rem minmax(0, 1fr);
gap: var(--musical-space-sm);
font-size: 1rem;
line-height: 1.7;
}
.musical-install-steps li::before {
content: counter(musical-install-step);
display: grid;
place-items: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 50%;
background: var(--musical-primary-ink);
color: #fff;
font-size: 0.875rem;
font-weight: 700;
line-height: 1;
}
.musical-install-key {
display: inline-flex;
align-items: center;
gap: 0.3em;
max-inline-size: 100%;
padding: 0 0.5em;
border: 1px solid rgb(0 0 0 / 18%);
border-radius: 0.4em;
background: #f5f4f0;
font-weight: 600;
line-height: 1.6;
white-space: normal;
}
.musical-install-key--bare {
padding-inline: 0.3em;
}
.musical-install-key svg {
inline-size: 1.15em;
block-size: 1.15em;
flex: none;
fill: currentColor;
}
.musical-install-note {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-install {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
max-width: 100%;
white-space: normal;
}
.musical-artist-header .musical-install,
.musical-artist-header .musical-install:hover {
color: var(--musical-text-light);
}
.musical-install[hidden] {
display: none;
}
.musical-install svg {
width: 18px;
height: 18px;
flex: none;
fill: currentcolor;
}
@media (min-width: 48rem) {
.musical-artist-header {
gap: var(--musical-space-lg);
}
.musical-artist-header__bio {
margin-block-end: 0;
}
.musical-artist-header__meta,
.musical-artist-header__links {
font-size: 1rem;
}
.musical-artist-header > .musical-stack {
margin-block-start: var(--musical-space-md);
}
}
.musical-share {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--musical-space-sm);
}
.musical-share .musical-btn {
flex: 0 0 auto;
white-space: nowrap;
min-height: 48px;
padding-inline: var(--musical-space-lg);
}
@media (max-width: 29.99rem) {
.musical-share .musical-btn {
padding-inline: var(--musical-space-md);
}
}
.musical-song-share {
margin-inline: auto;
margin-block-start: var(--musical-space-xl);
padding-block-start: var(--musical-space-xl);
border-block-start: 1px solid var(--musical-border);
}
.musical-share__url,
.musical-share__snippet {
flex: 1 1 0;
min-width: 0;
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-sm);
padding: var(--musical-space-sm) var(--musical-space-md);
min-height: 48px;
line-height: 1.2;
text-overflow: ellipsis;
}
.musical-share__feedback {
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-primary-ink);
}
.musical-share__open {
width: 48px;
height: 48px;
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-share__open:hover {
background: var(--musical-bg-light);
color: var(--musical-text-primary);
}
.musical-share__open svg {
width: 20px;
height: 20px;
}
.musical-share-preview {
--musical-share-preview-out: #0a4ba8;
--musical-share-preview-ground: #efefed;
}
.musical-share-preview__toggle {
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
min-height: 48px;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
.musical-share-preview__toggle::-webkit-details-marker {
display: none;
}
.musical-share-preview__toggle:hover .musical-share-preview__label {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-share-preview__toggle:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
border-radius: var(--musical-radius-sm);
}
.musical-share-preview__peek {
display: block;
flex: none;
inline-size: 64px;
block-size: 34px;
border-radius: 4px;
overflow: hidden;
background: #101010;
box-shadow: 0 0 0 1px rgb(26 26 26 / 14%);
transition:
transform var(--musical-duration-smooth) var(--musical-easing-luxe),
opacity var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-share-preview__peek img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
@media (hover: hover) {
.musical-share-preview:not([open]) .musical-share-preview__toggle:hover .musical-share-preview__peek {
transform: translateY(-2px) rotate(-3deg) scale(1.06);
}
}
.musical-share-preview[open] .musical-share-preview__peek {
opacity: 0.6;
}
.musical-share-preview__chevron {
display: inline-flex;
flex: none;
transform: rotate(180deg);
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-share-preview__chevron svg {
inline-size: 1em;
block-size: 1em;
}
.musical-share-preview[open] .musical-share-preview__chevron {
transform: rotate(0deg);
}
.musical-share-preview__body {
padding-block-start: var(--musical-space-xs);
text-align: start;
}
@media (min-width: 48rem) {
.musical-share-preview__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
align-items: end;
gap: var(--musical-space-lg);
}
.musical-share-preview__stage {
grid-column: 2;
grid-row: 1;
}
.musical-share-preview__note {
grid-column: 1;
grid-row: 1;
margin: 0;
padding-block-end: var(--musical-space-sm);
}
}
.musical-share-preview__stage {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.375rem;
padding: var(--musical-space-md);
border-radius: var(--musical-radius-lg);
background: var(--musical-share-preview-ground);
}
@media (min-width: 48rem) {
.musical-share-preview__stage {
padding: var(--musical-space-lg);
}
}
.musical-share-preview__sent {
max-width: min(85%, 22rem);
margin: 0;
padding: 0.5rem 0.875rem;
border-radius: 1.125rem;
border-end-end-radius: 0.3rem;
background: var(--musical-share-preview-out);
color: #fff;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
.musical-share-preview__card {
--musical-text-primary: #1d1d1d;
--musical-text-secondary: #6b6b6b;
inline-size: 100%;
max-inline-size: 22rem;
margin: 0;
border: 1px solid rgb(26 26 26 / 12%);
border-radius: 0.875rem;
overflow: hidden;
background: #fff;
}
.musical-share-preview__card img {
display: block;
inline-size: 100%;
block-size: auto;
aspect-ratio: 1200 / 630;
object-fit: cover;
background: #101010;
}
.musical-share-preview__meta {
display: grid;
text-align: start;
gap: 0.125rem;
padding: 0.5rem 0.75rem 0.625rem;
border-block-start: 1px solid rgb(26 26 26 / 10%);
font-family: var(--musical-font-body);
line-height: 1.35;
}
.musical-share-preview__site {
font-size: 0.75rem;
color: var(--musical-text-secondary);
}
.musical-share-preview__title {
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-share-preview__title,
.musical-share-preview__desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.musical-share-preview__desc {
font-size: 0.8125rem;
color: var(--musical-text-secondary);
}
.musical-share-preview__note {
max-width: var(--musical-measure);
margin: var(--musical-space-sm) 0 0;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-share-preview__ghost {
position: absolute;
z-index: 60;
margin: 0;
transform-origin: 0 0;
border-radius: 0.875rem;
box-shadow: var(--musical-shadow-lift);
pointer-events: none;
will-change: transform;
}
.musical-section--media .musical-share-preview__toggle {
color: var(--musical-text-light);
}
.musical-section--media .musical-share-preview__toggle:hover {
color: var(--musical-primary);
}
.musical-section--media .musical-share-preview__toggle:focus-visible {
outline-color: var(--musical-primary);
}
.musical-section--media .musical-share-preview__peek {
box-shadow: 0 0 0 1px rgb(245 245 245 / 22%);
}
.musical-section--media .musical-share-preview__note {
color: var(--musical-text-light-dim);
}
@media (prefers-reduced-motion: reduce) {
.musical-share-preview__peek,
.musical-share-preview__chevron {
transition: none;
}
}
.musical-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--musical-space-lg);
padding: var(--musical-space-3xl) var(--musical-space-lg);
text-align: center;
}
.musical-empty__mark {
width: 8rem;
height: 8rem;
color: var(--musical-primary);
opacity: 0.5;
}
.musical-empty__mark svg {
width: 100%;
height: 100%;
fill: currentcolor;
}
.musical-empty__body {
color: var(--musical-text-secondary);
max-width: 40ch;
}
.musical-skeleton {
border-radius: var(--musical-radius-md);
background: var(--musical-border);
animation: musical-pulse 1.5s ease-in-out infinite;
}
@keyframes musical-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.musical-progress {
height: 6px;
border-radius: var(--musical-radius-pill);
background: var(--musical-border);
overflow: hidden;
}
.musical-progress__bar {
height: 100%;
width: 0;
background: var(--musical-primary);
transition: width var(--musical-duration-smooth) linear;
}
.musical-toasts {
position: fixed;
inset-block-end: var(--musical-space-lg);
inset-inline-end: var(--musical-space-lg);
z-index: 900;
display: flex;
flex-direction: column;
gap: var(--musical-space-sm);
max-width: min(24rem, calc(100vw - 2 * var(--musical-space-lg)));
pointer-events: none;
}
.musical-toast {
display: flex;
align-items: start;
gap: var(--musical-space-sm);
padding: var(--musical-space-md);
border-radius: var(--musical-radius-md);
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-light);
background: var(--musical-text-primary);
box-shadow: var(--musical-shadow-lift);
pointer-events: auto;
animation: musical-rise var(--musical-duration-smooth) var(--musical-easing-out) both;
}
.musical-toast--success { background: #057a52; }
.musical-toast--error { background: #b32424; }
.musical-toast--warning { background: #7a5200; }
.musical-toast--info { background: #00688f; }
.musical-toast__close {
margin-inline-start: auto;
border: 0;
background: transparent;
color: inherit;
opacity: 0.7;
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: var(--musical-space-xs);
}
.musical-toast__close:hover {
opacity: 1;
}
.musical-toast__body {
display: flex;
flex-direction: column;
align-items: start;
gap: var(--musical-space-xs);
min-width: 0;
}
.musical-toast__text {
margin: 0;
line-height: 1.45;
overflow-wrap: anywhere;
}
.musical-toast__link {
display: inline-flex;
align-items: center;
min-height: 44px;
color: inherit;
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.musical-toast__link:hover {
text-decoration-thickness: 2px;
}
.musical-toast__actions {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-xs);
}
.musical-toast__action {
min-height: 44px;
padding: 0 var(--musical-space-md);
border: 1px solid currentColor;
border-radius: var(--musical-radius-pill);
background: transparent;
color: inherit;
font: 600 0.875rem/1 var(--musical-font-body);
cursor: pointer;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-toast__action:hover {
background: rgb(245 245 245 / 14%);
}
.musical-toast__action:first-child {
border-color: var(--musical-text-light);
background: var(--musical-text-light);
color: #1d1d1d;
}
.musical-toast__action:first-child:hover {
background: #fff;
}
.musical-toast--rich .musical-toast__close {
min-width: 44px;
min-height: 44px;
margin-block: calc(-1 * var(--musical-space-sm));
margin-inline-end: calc(-1 * var(--musical-space-sm));
}
.musical-toast__link:focus-visible,
.musical-toast__action:focus-visible,
.musical-toast__close:focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 3px;
}
.musical-toast--applause {
inline-size: 23rem;
max-inline-size: 100%;
padding: var(--musical-space-md) var(--musical-space-md) var(--musical-space-md) var(--musical-space-lg);
border: 2px solid transparent;
border-radius: var(--musical-radius-lg);
background:
linear-gradient(var(--musical-bg-dark), var(--musical-bg-dark)) padding-box,
linear-gradient(135deg, var(--musical-primary), var(--musical-secondary)) border-box;
color: var(--musical-text-light);
}
.musical-toast--applause .musical-toast__body {
flex: 1;
}
.musical-toast--applause {
position: relative;
}
.musical-toast--applause .musical-toast__close {
position: absolute;
inset-block-start: var(--musical-space-xs);
inset-inline-end: var(--musical-space-xs);
margin: 0;
}
.musical-applause__eyebrow,
.musical-applause__headline {
padding-inline-end: var(--musical-space-xl);
}
.musical-applause {
inline-size: 100%;
}
.musical-applause__eyebrow {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--musical-primary);
}
.musical-applause__headline {
margin: var(--musical-space-xs) 0 0;
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
color: var(--musical-text-light);
text-wrap: balance;
}
.musical-applause__lines {
display: grid;
gap: var(--musical-space-sm);
margin: var(--musical-space-md) 0 0;
padding: 0;
list-style: none;
}
.musical-applause__line {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
column-gap: var(--musical-space-sm);
align-items: start;
font-size: 0.875rem;
line-height: 1.45;
color: var(--musical-text-light);
}
.musical-applause__icon {
display: grid;
place-items: center;
block-size: 1.45em;
color: var(--musical-text-light-dim);
}
.musical-applause__icon--star svg {
display: block;
inline-size: 16px;
block-size: 16px;
fill: var(--musical-primary);
}
.musical-applause__words {
min-width: 0;
overflow-wrap: anywhere;
text-wrap: pretty;
}
.musical-applause__title {
font-weight: 600;
color: var(--musical-text-light);
}
.musical-applause__dim,
.musical-applause__line--more {
color: var(--musical-text-light-dim);
}
@media (prefers-reduced-motion: no-preference) {
.musical-applause__icon--star svg {
animation: musical-applause-pop var(--musical-duration-smooth) var(--musical-easing-out) 0.15s both;
}
}
@keyframes musical-applause-pop {
0% { transform: scale(0); }
60% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.musical-applause-confetti {
position: absolute;
z-index: -1;
block-size: 0;
pointer-events: none;
}
.musical-applause-confetti__piece {
position: absolute;
inset-block-start: 0;
border-radius: 1px;
background: var(--musical-primary);
}
.musical-applause-confetti__piece--secondary {
background: var(--musical-secondary);
}
.musical-applause-confetti__piece--tertiary {
background: var(--musical-tertiary);
}
.musical-applause-confetti__piece.is-dot {
border-radius: 50%;
}
body > header:has(.musical-header) {
position: sticky;
top: 0;
z-index: 500;
}
.musical-header {
background: rgb(250 250 249 / 92%);
backdrop-filter: blur(10px);
border-block-end: 1px solid var(--musical-border);
}
.musical-header__inner {
display: flex;
align-items: center;
gap: var(--musical-space-lg);
min-height: 64px;
max-width: 75rem;
margin-inline: auto;
padding-inline: var(--musical-space-lg);
}
.musical-brand {
display: inline-flex;
align-items: center;
min-height: 48px;
gap: var(--musical-space-sm);
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--musical-text-primary);
text-decoration: none;
}
.musical-brand__mark {
width: 32px;
height: 32px;
border-radius: var(--musical-radius-md);
background: linear-gradient(135deg, var(--musical-primary) 0%, var(--musical-secondary) 100%);
object-fit: cover;
flex: 0 0 auto;
}
.musical-nav {
margin-inline-start: 0;
}
.musical-nav + .musical-btn {
margin-inline-start: auto;
}
.musical-nav__list {
display: flex;
align-items: center;
gap: var(--musical-space-lg);
list-style: none;
margin: 0;
padding: 0;
}
.musical-nav__link {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--musical-font-body);
font-size: 1rem;
color: var(--musical-text-primary);
text-decoration: none;
border-block-end: 3px solid transparent;
transition:
color var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-nav__link:hover {
color: var(--musical-primary-ink);
border-block-end-color: var(--musical-border);
}
.musical-nav__link[aria-current="page"] {
border-block-end-color: var(--musical-primary-ink);
font-weight: 600;
}
.musical-nav__link--utility,
.musical-nav__account {
display: none;
}
.musical-header__musician {
min-height: 44px;
font-size: 1rem;
font-weight: 500;
letter-spacing: normal;
}
.musical-account {
position: relative;
flex: none;
}
.musical-account__toggle {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
min-height: 48px;
padding: 0 var(--musical-space-xs);
border: 0;
border-radius: var(--musical-radius-pill);
background: transparent;
color: var(--musical-text-primary);
cursor: pointer;
}
.musical-account__toggle:hover {
background: color-mix(in srgb, var(--musical-text-primary) 6%, transparent);
}
.musical-account__toggle:focus-visible,
.musical-account__link:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-account__face {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
flex: none;
}
.musical-account__face--initial {
background: linear-gradient(135deg, var(--musical-primary-ink) 0%, var(--musical-secondary-ink) 100%);
color: #fff;
font-family: var(--musical-font-display);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1;
}
.musical-account__toggle svg {
width: 16px;
height: 16px;
fill: currentcolor;
transform: rotate(180deg);
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-account__toggle[aria-expanded="true"] svg {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.musical-account__toggle svg {
transition: none;
}
}
.musical-account__menu {
position: absolute;
inset-block-start: calc(100% + var(--musical-space-xs));
inset-inline-end: 0;
z-index: 10;
min-width: 15rem;
max-width: 20rem;
padding-block: var(--musical-space-xs);
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
box-shadow: var(--musical-shadow-lift);
}
.musical-account__menu[hidden] {
display: none;
}
.musical-account__who {
margin: 0;
padding: var(--musical-space-sm) var(--musical-space-md);
border-block-end: 1px solid var(--musical-border);
font-size: 0.875rem;
color: var(--musical-text-secondary);
overflow-wrap: anywhere;
}
.musical-account__who strong {
display: block;
font-size: 1rem;
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-account__list {
list-style: none;
margin: 0;
padding: 0;
}
.musical-account__list li:last-child {
margin-block-start: var(--musical-space-xs);
padding-block-start: var(--musical-space-xs);
border-block-start: 1px solid var(--musical-border);
}
.musical-account__link {
display: flex;
align-items: center;
min-height: 44px;
padding-inline: var(--musical-space-md);
color: var(--musical-text-primary);
text-decoration: none;
}
.musical-account__link:hover {
background: color-mix(in srgb, var(--musical-text-primary) 6%, transparent);
color: var(--musical-primary-ink);
}
.musical-account__link[aria-current="page"] {
font-weight: 600;
}
.musical-header__toggle {
display: none;
flex: none;
margin-inline-start: auto;
}
.musical-header__cta-label--short {
display: none;
}
.musical-header__toggle-bar {
transform-origin: 12px 12px;
transition:
transform var(--musical-duration-quick) var(--musical-easing-out),
opacity var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-header__toggle[aria-expanded="true"] .musical-header__toggle-bar--top {
transform: rotate(45deg) translateY(6px);
}
.musical-header__toggle[aria-expanded="true"] .musical-header__toggle-bar--mid {
opacity: 0;
}
.musical-header__toggle[aria-expanded="true"] .musical-header__toggle-bar--bottom {
transform: rotate(-45deg) translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
.musical-header__toggle-bar {
transition: none;
}
}
@media (max-width: 47.99rem) {
.musical-header__inner {
gap: var(--musical-space-md);
padding-inline: var(--musical-space-md);
}
.musical-brand {
white-space: nowrap;
}
.musical-header__inner > .musical-btn {
padding-inline: var(--musical-space-md);
white-space: nowrap;
}
.musical-account {
display: none;
}
.musical-header__musician {
display: none;
}
.musical-nav__link--utility {
display: flex;
}
.musical-nav__account {
display: block;
}
.musical-header__toggle {
display: inline-flex;
}
.musical-nav {
position: absolute;
inset-inline: 0;
top: 100%;
margin: 0;
background: var(--musical-bg-light);
border-block-end: 1px solid var(--musical-border);
display: none;
}
.musical-nav.is-open {
display: block;
}
.musical-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--musical-space-sm) var(--musical-space-lg) var(--musical-space-lg);
}
.musical-nav__link {
display: flex;
min-height: 48px;
border-block-end: 1px solid var(--musical-border);
}
.musical-nav__list li:last-child .musical-nav__link {
border-block-end: 0;
}
.musical-nav__account--first {
margin-block-start: var(--musical-space-sm);
border-block-start: 2px solid var(--musical-border);
}
.musical-nav__list li:has(+ .musical-nav__account--first) .musical-nav__link {
border-block-end: 0;
}
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
.musical-header--signed-in .musical-header__toggle {
display: inline-flex;
}
.musical-header--signed-in .musical-nav + .musical-btn {
margin-inline-start: 0;
}
.musical-header--signed-in .musical-header__inner > .musical-btn {
white-space: nowrap;
}
.musical-header--signed-in .musical-account {
display: none;
}
.musical-header--signed-in .musical-nav__account {
display: block;
}
.musical-header--signed-in .musical-nav__account--first {
margin-block-start: var(--musical-space-sm);
border-block-start: 2px solid var(--musical-border);
}
.musical-header--signed-in .musical-nav__list li:has(+ .musical-nav__account--first) .musical-nav__link {
border-block-end: 0;
}
.musical-header--signed-in .musical-nav {
position: absolute;
top: 100%;
inset-inline-end: var(--musical-space-lg);
width: 20rem;
display: none;
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-block-start: 0;
border-end-start-radius: var(--musical-radius-md);
border-end-end-radius: var(--musical-radius-md);
box-shadow: var(--musical-shadow-lift);
}
.musical-header--signed-in .musical-nav.is-open {
display: block;
}
.musical-header--signed-in .musical-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--musical-space-sm) var(--musical-space-lg) var(--musical-space-md);
}
.musical-header--signed-in .musical-nav__link {
display: flex;
min-height: 48px;
border-block-end: 1px solid var(--musical-border);
}
.musical-header--signed-in .musical-nav__list li:last-child .musical-nav__link {
border-block-end: 0;
}
}
@media (min-width: 48rem) and (max-width: 52.99rem) {
.musical-header:not(.musical-header--signed-in, .musical-header--campaign) .musical-header__inner {
gap: var(--musical-space-md);
padding-inline: var(--musical-space-md);
}
.musical-header:not(.musical-header--signed-in, .musical-header--campaign) .musical-nav__list {
gap: var(--musical-space-md);
}
.musical-header:not(.musical-header--signed-in, .musical-header--campaign) .musical-nav__list li:has(> .musical-nav__link--utility) {
display: none;
}
}
@media (max-width: 25.625rem) {
.musical-header__cta .musical-header__cta-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.musical-header__cta-label--short {
display: inline;
}
}
@media (max-width: 22.4375rem) {
.musical-brand__name {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
.musical-footer {
position: relative;
isolation: isolate;
background: var(--musical-bg-dark);
color: var(--musical-text-light);
padding: var(--musical-space-3xl) var(--musical-space-lg) var(--musical-space-xl);
}
.musical-footer::before,
.musical-footer::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.musical-footer::before {
z-index: -3;
background-image: url("../img/footer-band.webp");
background-size: cover;
background-position: center;
opacity: 0.65;
}
.musical-footer::after {
z-index: -1;
background-color: rgb(26 26 26 / 58%);
}
@media (max-width: 47.99rem) {
.musical-footer::before {
opacity: 0.5;
}
}
.musical-footer__inner {
display: grid;
gap: var(--musical-space-xl);
max-width: 75rem;
margin-inline: auto;
}
@media (min-width: 48rem) {
.musical-footer__inner {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.musical-footer__intro {
grid-column: 1 / -1;
}
}
@media (min-width: 64rem) {
.musical-footer__inner {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.musical-footer__intro {
grid-column: auto;
}
}
.musical-footer .musical-link {
color: rgb(245 245 245 / 85%);
}
.musical-footer .musical-link:hover {
color: var(--musical-primary);
}
.musical-footer__brand {
color: var(--musical-text-light);
}
@media (max-width: 47.99rem) {
.musical-footer__intro {
display: none;
}
}
.musical-import__details summary {
cursor: pointer;
}
.musical-import [data-musical-import-start] {
align-self: start;
}
.musical-import > .musical-studio-fold > .musical-studio-fold__body,
.musical-artist-link > .musical-studio-fold > .musical-studio-fold__body {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
}
.musical-import__table {
width: 100%;
border-collapse: collapse;
text-align: start;
}
.musical-import__table th,
.musical-import__table td {
padding: var(--musical-space-xs) var(--musical-space-sm);
vertical-align: middle;
}
.musical-import__table th {
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-text-secondary);
border-block-end: 1px solid var(--musical-border);
}
.musical-import__row {
border-block-end: 1px solid var(--musical-border);
}
.musical-import__file {
font-size: 0.875rem;
color: var(--musical-text-secondary);
word-break: break-word;
}
.musical-import__status {
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.is-done .musical-import__status {
color: var(--musical-success-ink);
}
.is-failed .musical-import__status {
color: var(--musical-error-ink);
}
@media (max-width: 47.99rem) {
.musical-import__table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.musical-import__table,
.musical-import__table tbody,
.musical-import__row,
.musical-import__table td {
display: block;
width: 100%;
}
.musical-import__row {
padding-block: var(--musical-space-md);
}
.musical-import__table td[data-label]::before {
content: attr(data-label);
display: block;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-text-secondary);
margin-block-end: 0.25rem;
}
}
.musical-auth__legal {
color: var(--musical-text-secondary);
max-width: 44ch;
}
.musical-footer__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.musical-footer__list .musical-link {
display: flex;
align-items: center;
min-height: 48px;
border-block-end: 1px solid rgb(245 245 245 / 10%);
}
.musical-footer__list li:last-child .musical-link {
border-block-end: 0;
}
@media (min-width: 48rem) {
.musical-footer__list {
gap: var(--musical-space-sm);
}
.musical-footer__list .musical-link {
display: inline;
min-height: 0;
border-block-end: 0;
}
}
.musical-footer__legal {
max-width: 75rem;
margin: var(--musical-space-xl) auto 0;
padding-block-start: var(--musical-space-lg);
border-block-start: 1px solid var(--musical-border-dark);
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: rgb(245 245 245 / 65%);
}
.musical-dashboard {
display: grid;
grid-template-columns: 1fr;
gap: var(--musical-space-xl);
max-width: 78rem;
margin-inline: auto;
padding: var(--musical-space-xl) var(--musical-space-lg) var(--musical-space-3xl);
}
@media (min-width: 64rem) {
.musical-dashboard {
grid-template-columns: 10.5rem minmax(0, 1fr);
gap: var(--musical-space-2xl);
}
}
.musical-dashboard:has([data-musical-admin-edit]) {
grid-template-columns: minmax(0, 1fr);
}
.musical-sidebar {
min-width: 0;
}
.musical-sidebar__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
gap: var(--musical-space-xs);
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.musical-sidebar__list::-webkit-scrollbar {
display: none;
}
@media (min-width: 64rem) {
.musical-sidebar {
position: sticky;
top: calc(var(--musical-header-height) + var(--musical-space-lg));
align-self: start;
}
.musical-sidebar__list {
flex-direction: column;
overflow-x: visible;
}
}
.musical-sidebar__link {
display: flex;
align-items: center;
flex: 0 0 auto;
min-height: 44px;
padding-inline: var(--musical-space-sm);
border-block-end: 3px solid transparent;
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
text-decoration: none;
white-space: nowrap;
border-radius: var(--musical-radius-sm);
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-sidebar__link:hover {
background: var(--musical-border);
}
.musical-sidebar__link[aria-current="page"] {
font-weight: 600;
color: var(--musical-text-primary);
border-block-end-color: var(--musical-primary-ink);
}
@media (min-width: 64rem) {
.musical-sidebar__link {
border-block-end: 0;
border-inline-start: 3px solid transparent;
white-space: normal;
}
.musical-sidebar__link[aria-current="page"] {
border-inline-start-color: var(--musical-primary-ink);
}
}
.musical-dashboard__actions {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-md);
margin-block-end: var(--musical-space-xl);
}
.musical-artist-link {
padding: var(--musical-space-lg);
background: #fff;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
box-shadow: var(--musical-shadow-card);
}
.musical-promote {
container: musical-promote / inline-size;
margin-block-start: var(--musical-space-lg);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
background: var(--musical-bg-light);
}
.musical-promote__summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--musical-space-md);
min-height: 44px;
padding: var(--musical-space-md) var(--musical-space-lg);
border-radius: var(--musical-radius-lg);
cursor: pointer;
list-style: none;
}
.musical-promote__summary::-webkit-details-marker {
display: none;
}
.musical-promote__summary:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-promote__summary:hover .musical-promote__title {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-promote__thumb-frame {
display: block;
width: 44px;
aspect-ratio: 2480 / 3508;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 1px 2px rgb(0 0 0 / 14%), 0 4px 10px -4px rgb(0 0 0 / 30%);
transition:
transform var(--musical-duration-quick) var(--musical-easing-out),
box-shadow var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-promote__summary:hover .musical-promote__thumb-frame {
transform: translateY(-2px) rotate(-2deg);
box-shadow: 0 1px 2px rgb(0 0 0 / 14%), 0 8px 16px -6px rgb(0 0 0 / 34%);
}
.musical-promote__thumb {
display: block;
width: 100%;
height: 100%;
}
.musical-promote__thumb-ground {
fill: #101010;
transition: fill var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-promote__thumb-ink {
fill: #f5f5f5;
transition: fill var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-promote:has(input[value="light"]:checked) .musical-promote__thumb-ground {
fill: #fafaf9;
}
.musical-promote:has(input[value="light"]:checked) .musical-promote__thumb-ink {
fill: #1d1d1d;
}
.musical-promote:has(input[value="light"]:checked) .musical-promote__thumb-frame {
outline: 1px solid var(--musical-border);
outline-offset: -1px;
}
.musical-promote__head {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.musical-promote__title {
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
color: var(--musical-text-primary);
}
.musical-promote__note {
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.45;
color: #5f5f5f;
}
.musical-promote__cue {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
white-space: nowrap;
}
.musical-promote__cue svg {
width: 20px;
height: 20px;
fill: currentColor;
transform: rotate(180deg);
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-promote[open] .musical-promote__cue svg {
transform: rotate(0deg);
}
.musical-promote__cue-label--open,
.musical-promote[open] .musical-promote__cue-label--closed {
display: none;
}
.musical-promote[open] .musical-promote__cue-label--open {
display: inline;
}
@container musical-promote (max-width: 30rem) {
.musical-promote__cue-label {
display: none !important;
}
}
.musical-promote__body {
display: grid;
grid-template-areas:
"help"
"preview"
"form";
gap: var(--musical-space-lg);
padding: 0 var(--musical-space-lg) var(--musical-space-lg);
}
@container musical-promote (min-width: 38rem) {
.musical-promote__body {
grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr);
grid-template-rows: auto 1fr;
grid-template-areas:
"preview help"
"preview form";
column-gap: var(--musical-space-xl);
align-items: start;
}
.musical-promote__preview {
position: sticky;
top: calc(var(--musical-header-height, 4rem) + var(--musical-space-md));
}
}
.musical-promote__controls {
display: contents;
}
.musical-promote__controls .musical-help-row {
grid-area: help;
margin: 0;
}
.musical-promote__preview {
grid-area: preview;
margin: 0;
}
.musical-promote__form {
grid-area: form;
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
min-width: 0;
}
.musical-promote__stage {
display: flex;
justify-content: center;
padding: var(--musical-space-xl) var(--musical-space-lg);
border-radius: var(--musical-radius-md);
background:
radial-gradient(120% 90% at 50% 0%, rgb(0 217 217 / 16%), transparent 70%),
#e6f0f0;
}
.musical-promote__paper {
position: relative;
width: 100%;
max-width: 15rem;
aspect-ratio: 2480 / 3508;
border-radius: 2px;
overflow: hidden;
box-shadow:
0 1px 2px rgb(0 40 40 / 14%),
0 18px 32px -14px rgb(0 40 40 / 42%);
transition: aspect-ratio var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-promote__sheet {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
transition:
opacity var(--musical-duration-smooth) var(--musical-easing-out),
transform var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-promote__sheet.is-entering {
opacity: 0;
transform: scale(1.015);
}
.musical-promote__sheet.is-leaving {
opacity: 0;
}
.musical-promote__caption {
display: flex;
flex-direction: column;
gap: 2px;
margin-block-start: var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.45;
text-align: center;
color: #5f5f5f;
}
.musical-promote__size {
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-promote__status:not(:empty) {
margin-block-start: var(--musical-space-xs);
font-weight: 600;
color: #d13030;
}
.musical-promote__group {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.musical-promote__legend {
padding: 0;
margin-block-end: var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-promote__designs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--musical-space-sm);
}
.musical-promote__designs .musical-promote__legend {
grid-column: 1 / -1;
}
.musical-promote__design,
.musical-promote__segment {
display: flex;
align-items: center;
gap: var(--musical-space-sm);
min-height: 56px;
padding: var(--musical-space-sm) var(--musical-space-md);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
background: #fff;
cursor: pointer;
transition:
border-color var(--musical-duration-quick) var(--musical-easing-out),
box-shadow var(--musical-duration-quick) var(--musical-easing-out),
background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-promote__design {
gap: var(--musical-space-md);
min-height: 72px;
}
.musical-promote__design:hover,
.musical-promote__segment:hover {
border-color: var(--musical-text-secondary);
}
.musical-promote__design:has(input:checked),
.musical-promote__segment:has(input:checked) {
border-color: var(--musical-primary-ink);
background: rgb(0 90 90 / 6%);
box-shadow: inset 0 0 0 1px var(--musical-primary-ink);
}
.musical-promote__design:has(input:focus-visible),
.musical-promote__segment:has(input:focus-visible) {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-promote__design-icon {
flex: 0 0 auto;
width: 30px;
height: 43px;
padding: 3px;
border-radius: 3px;
background: var(--musical-bg-light);
box-shadow: inset 0 0 0 1px var(--musical-border);
fill: #9a9a9a;
transition: fill var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-promote__design:has(input:checked) .musical-promote__design-icon {
background: #fff;
fill: var(--musical-primary-ink);
}
.musical-promote__option-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.musical-promote__option-name {
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
}
.musical-promote__option-hint {
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.35;
color: #5f5f5f;
}
:is(.musical-promote__design, .musical-promote__segment):has(input:checked) .musical-promote__option-name {
color: var(--musical-primary-ink);
}
.musical-promote__songs {
display: none;
}
.musical-promote:has(input[name="design"][value="wall"]:checked) .musical-promote__songs--many,
.musical-promote:has(input[name="design"][value="tracklist"]:checked) .musical-promote__songs--many,
.musical-promote:has(input[name="design"][value="single"]:checked) .musical-promote__songs--one {
display: block;
}
.musical-promote__songs-note {
margin: 0 0 var(--musical-space-sm);
max-width: 36rem;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.45;
color: #5f5f5f;
}
.musical-promote__song-list {
max-height: 21rem;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
background: #fff;
scrollbar-color: var(--musical-border) transparent;
scrollbar-width: thin;
}
.musical-promote__song {
display: flex;
align-items: center;
gap: var(--musical-space-md);
min-height: 56px;
padding: var(--musical-space-sm) var(--musical-space-md);
cursor: pointer;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-promote__song + .musical-promote__song {
border-top: 1px solid var(--musical-border);
}
.musical-promote__song:hover {
background: var(--musical-bg-light);
}
.musical-promote__song:has(input:checked) {
background: rgb(0 90 90 / 6%);
}
.musical-promote__song input {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
accent-color: var(--musical-primary-ink);
cursor: pointer;
}
.musical-promote__song-art {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 4px;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}
.musical-promote__song-art :is(img, svg) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.musical-promote__song-title {
min-width: 0;
overflow: hidden;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--musical-text-primary);
}
.musical-promote__pair {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: var(--musical-space-lg) var(--musical-space-md);
}
.musical-promote__segmented {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--musical-space-sm);
}
.musical-promote__segmented .musical-promote__legend {
grid-column: 1 / -1;
}
.musical-promote__swatch {
position: relative;
flex: 0 0 auto;
width: 20px;
aspect-ratio: 2480 / 3508;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%);
}
.musical-promote__swatch::after {
content: "";
position: absolute;
left: 10%;
bottom: 12%;
width: 30%;
aspect-ratio: 1;
border-radius: 1px;
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
}
.musical-promote__swatch--dark {
background: #101010;
}
.musical-promote__swatch--light {
background: #fafaf9;
}
.musical-promote__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm) var(--musical-space-md);
padding-block-start: var(--musical-space-sm);
}
.musical-promote__download {
justify-content: flex-start;
gap: var(--musical-space-md);
padding: var(--musical-space-sm) var(--musical-space-lg);
letter-spacing: 0;
text-align: start;
}
.musical-promote__download svg,
.musical-promote__qr-only svg {
flex: 0 0 auto;
width: 22px;
height: 22px;
fill: currentColor;
}
.musical-promote__download-text {
display: flex;
flex-direction: column;
gap: 3px;
}
.musical-promote__download-name {
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
}
.musical-promote__download-meta {
font-size: 0.75rem;
font-weight: 500;
line-height: 1.2;
}
.musical-promote__qr-only {
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
min-height: 44px;
padding: 0 var(--musical-space-md);
border: 1px solid rgb(0 0 0 / 16%);
border-radius: var(--musical-radius-md);
background: #fff;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
color: var(--musical-primary-ink);
cursor: pointer;
transition: border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-promote__qr-only svg {
width: 20px;
height: 20px;
}
.musical-promote__qr-only:hover {
border-color: var(--musical-primary-ink);
}
.musical-promote__qr-only:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-promote__qr-only[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
.musical-promote__qr-only[disabled]:hover {
border-color: rgb(0 0 0 / 16%);
}
.musical-promote__locked {
display: flex;
align-items: flex-start;
gap: var(--musical-space-sm);
margin: var(--musical-space-sm) 0 0;
padding: var(--musical-space-sm) var(--musical-space-md);
border-radius: var(--musical-radius-md);
background: rgb(255 165 0 / 12%);
font-size: 0.875rem;
line-height: 1.45;
color: var(--musical-text-primary);
}
.musical-promote__locked svg {
flex: none;
width: 16px;
height: 16px;
margin-block-start: 2px;
fill: currentColor;
}
@container musical-promote (max-width: 37.99rem) {
.musical-promote__summary,
.musical-promote__body {
padding-inline: var(--musical-space-md);
}
.musical-promote__paper {
max-width: 12.5rem;
}
.musical-promote__download,
.musical-promote__qr-only {
width: 100%;
}
.musical-promote__qr-only {
justify-content: center;
min-height: 48px;
}
}
@container musical-promote (max-width: 24rem) {
.musical-promote__designs {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 47.99rem) {
.musical-promote__design,
.musical-promote__segment,
.musical-promote__song {
min-height: 56px;
}
}
@media (prefers-reduced-motion: reduce) {
.musical-promote__thumb-frame,
.musical-promote__cue svg,
.musical-promote__sheet,
.musical-promote__paper,
.musical-promote__thumb-ground,
.musical-promote__thumb-ink {
transition: none;
}
.musical-promote__summary:hover .musical-promote__thumb-frame {
transform: none;
}
}
@media (max-width: 29.99rem) {
.musical-promote__actions .musical-btn {
flex: 1 1 100%;
}
}
.musical-track-card__owner-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-md);
position: relative;
z-index: 2;
padding-block-start: var(--musical-space-sm);
border-block-start: 1px solid var(--musical-border);
}
.musical-visibility {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.musical-visibility__options,
.musical-cover-words__options {
display: inline-flex;
padding: 3px;
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
}
.musical-visibility__input,
.musical-cover-words__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.musical-visibility__option,
.musical-cover-words__option {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding-inline: var(--musical-space-md);
border-radius: var(--musical-radius-pill);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
font-weight: 600;
color: var(--musical-text-secondary);
cursor: pointer;
white-space: nowrap;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-visibility__option:hover,
.musical-cover-words__option:hover {
color: var(--musical-text-primary);
}
.musical-visibility__input:checked + .musical-visibility__option,
.musical-cover-words__input:checked + .musical-cover-words__option {
background: #fff;
color: var(--musical-text-primary);
box-shadow: var(--musical-shadow-card);
}
.musical-visibility__input:focus-visible + .musical-visibility__option,
.musical-cover-words__input:focus-visible + .musical-cover-words__option {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-visibility__input:disabled + .musical-visibility__option,
.musical-cover-words__input:disabled + .musical-cover-words__option {
cursor: progress;
opacity: 0.6;
}
.musical-track-card__visibility-note {
position: relative;
z-index: 2;
margin: 0;
letter-spacing: 0.02em;
}
.musical-track-card__reset-link {
min-height: 44px;
padding-inline: var(--musical-space-md);
flex: 0 0 auto;
white-space: nowrap;
color: var(--musical-text-secondary);
}
.musical-track-card__reset-link[hidden] {
display: none;
}
.musical-get-started-wrap {
container-type: inline-size;
}
.musical-get-started {
display: grid;
gap: var(--musical-space-lg);
padding: var(--musical-space-lg);
border: 1px solid #cdeeee;
border-radius: var(--musical-radius-lg);
background: linear-gradient(180deg, #effafa 0%, #fff 70%);
}
.musical-get-started__head {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--musical-space-sm) var(--musical-space-md);
align-items: center;
}
.musical-get-started__intro > * {
margin: 0;
}
.musical-get-started__heading {
margin-block: 2px;
}
.musical-get-started__actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm) var(--musical-space-md);
align-items: center;
}
.musical-get-started__hide {
min-height: 44px;
padding: 0 var(--musical-space-xs);
border: 0;
background: none;
font: 600 0.875rem/1 var(--musical-font-body);
color: var(--musical-text-secondary);
cursor: pointer;
}
.musical-get-started__hide:hover {
color: var(--musical-primary-ink);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-get-started__hide:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-get-started__ring {
width: 56px;
height: 56px;
transform: rotate(-90deg);
}
.musical-get-started__ring circle {
fill: none;
stroke-width: 4;
}
.musical-get-started__ring-track {
stroke: #d4efef;
}
.musical-get-started__ring-fill {
stroke: var(--musical-primary);
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: calc(100 - var(--musical-done, 0));
transition: stroke-dashoffset var(--musical-duration-smooth) var(--musical-easing-luxe);
}
.musical-get-started__steps {
display: grid;
gap: var(--musical-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.musical-get-started__step {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--musical-space-sm) var(--musical-space-md);
align-items: center;
padding: var(--musical-space-md);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
background: #fff;
transition: border-color var(--musical-duration-quick) var(--musical-easing-out),
box-shadow var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-get-started__step > .musical-btn {
grid-column: 2;
justify-self: start;
}
.musical-get-started__step.is-next {
border-color: var(--musical-primary);
box-shadow: 0 0 0 3px rgba(0, 217, 217, 0.16);
}
.musical-get-started__title {
margin: 0;
font-family: var(--musical-font-body);
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: var(--musical-text-primary);
}
.musical-get-started__body {
margin: 2px 0 0;
font-size: 0.875rem;
line-height: 1.45;
color: var(--musical-text-secondary);
}
.musical-get-started__step.is-done .musical-get-started__title {
color: var(--musical-text-secondary);
}
.musical-get-started__tick {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 2px solid #c9c8c2;
border-radius: 50%;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-get-started__tick svg {
width: 18px;
height: 18px;
fill: none;
stroke: #fff;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.is-done > .musical-get-started__tick {
border-color: var(--musical-primary-ink);
background: var(--musical-primary-ink);
}
.is-done > .musical-get-started__tick svg {
stroke-dashoffset: 0;
transition: stroke-dashoffset var(--musical-duration-smooth) var(--musical-easing-luxe) 0.1s;
}
@container (min-width: 40rem) {
.musical-get-started__head {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.musical-get-started__actions {
grid-column: auto;
justify-content: flex-end;
}
.musical-get-started__step {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.musical-get-started__step > .musical-btn {
grid-column: 3;
}
}
@media (min-width: 48rem) {
.musical-get-started {
padding: var(--musical-space-xl);
}
}
@media (prefers-reduced-motion: reduce) {
.musical-get-started__ring-fill,
.musical-get-started__step,
.musical-get-started__tick,
.is-done > .musical-get-started__tick svg {
transition: none;
}
}
.musical-tour {
position: fixed;
inset: 0;
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
overflow: hidden;
}
.musical-tour::backdrop {
background: transparent;
}
.musical-tour__spot {
position: fixed;
border-radius: var(--musical-radius-lg);
box-shadow: 0 0 0 200vmax rgba(12, 12, 12, 0.62);
pointer-events: none;
}
.musical-tour__card {
position: fixed;
right: var(--musical-space-md);
bottom: var(--musical-space-md);
left: var(--musical-space-md);
display: grid;
gap: var(--musical-space-sm);
padding: var(--musical-space-lg);
padding-inline-end: calc(var(--musical-space-lg) + 32px);
border-radius: var(--musical-radius-lg);
background: #fff;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
.musical-tour__card {
right: auto;
bottom: auto;
width: min(360px, calc(100vw - 32px));
}
}
.musical-tour__words {
display: grid;
gap: var(--musical-space-sm);
}
.musical-tour__of {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--musical-primary-ink);
}
.musical-tour__title {
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.25rem;
line-height: 1.25;
color: var(--musical-text-primary);
}
.musical-tour__text {
margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-tour__nav {
display: flex;
justify-content: flex-end;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-sm);
}
.musical-tour__close {
position: absolute;
top: 6px;
right: 6px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: none;
color: var(--musical-text-secondary);
cursor: pointer;
}
.musical-tour__close:hover {
color: var(--musical-primary-ink);
}
.musical-tour__close:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: -2px;
}
.musical-tour__close svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.musical-studio-summary {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-lg) var(--musical-space-xl);
align-items: center;
justify-content: space-between;
margin-block-start: var(--musical-space-lg);
}
.musical-studio-summary__stats {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-md) var(--musical-space-xl);
margin: 0;
}
.musical-studio-summary__stat {
display: flex;
flex-direction: column-reverse;
}
.musical-studio-summary__stat dt {
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--musical-text-light-dim);
}
.musical-studio-summary__stat dd {
margin: 0;
font-family: var(--musical-font-display);
font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--musical-text-light);
}
.musical-studio-summary__cta svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.musical-studio-head {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--musical-space-xs) var(--musical-space-md);
align-items: center;
margin-block-end: var(--musical-space-lg);
}
.musical-studio-head__mark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--musical-radius-md);
background: #e0f7f7;
color: var(--musical-primary-ink);
}
.musical-studio-head__mark svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.musical-studio-head__title {
margin: 0;
font-family: var(--musical-font-display);
font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
font-weight: 600;
line-height: 1.2;
color: var(--musical-text-primary);
}
.musical-studio-head__hint {
max-width: 40rem;
margin: 2px 0 0;
font-size: 0.9375rem;
line-height: 1.45;
color: var(--musical-text-secondary);
}
.musical-studio-head__action {
justify-self: end;
}
@media (max-width: 30rem) {
.musical-studio-head {
grid-template-columns: auto minmax(0, 1fr);
}
.musical-studio-head__action {
grid-column: 1 / -1;
justify-self: start;
}
}
.musical-studio-fold > summary {
grid-template-columns: auto minmax(0, 1fr) auto auto;
min-height: 44px;
margin-block-end: 0;
cursor: pointer;
list-style: none;
}
.musical-studio-fold > summary::-webkit-details-marker {
display: none;
}
.musical-studio-fold[open] > summary {
margin-block-end: var(--musical-space-lg);
}
.musical-studio-fold > summary .musical-studio-head__hint {
display: block;
}
.musical-studio-fold > summary:hover .musical-studio-head__title {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-studio-fold > summary:focus-visible,
.musical-playlist-manager__fold > summary:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
border-radius: var(--musical-radius-md);
}
.musical-studio-fold__tally {
padding: 2px 10px;
border-radius: 999px;
background: #e0f7f7;
color: var(--musical-primary-ink);
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
}
.musical-studio-fold__twist {
display: inline-flex;
align-items: center;
color: var(--musical-primary-ink);
transform: rotate(180deg);
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-studio-fold__twist svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.musical-studio-fold[open] > summary > .musical-studio-fold__twist,
.musical-playlist-manager__fold[open] > summary > .musical-studio-fold__twist {
transform: rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
.musical-studio-fold__twist {
transition: none;
}
}
@media (max-width: 30rem) {
.musical-studio-fold > summary {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.musical-studio-fold > summary > .musical-studio-fold__tally {
grid-column: 2;
grid-row: 2;
justify-self: start;
}
.musical-studio-fold > summary > .musical-studio-fold__twist {
grid-column: 3;
grid-row: 1;
}
}
.musical-pager-hidden {
display: none !important;
}
.musical-pager {
margin-block-start: var(--musical-space-lg);
display: grid;
gap: var(--musical-space-xs);
justify-items: center;
}
.musical-pager__controls,
.musical-pager__numbers {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--musical-space-xs);
}
.musical-pager__button {
min-width: 44px;
min-height: 44px;
padding: 0 var(--musical-space-sm);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
background: #fff;
color: var(--musical-text-primary);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background var(--musical-duration-quick) var(--musical-easing-out), border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-pager__button:hover:not([disabled]) {
border-color: var(--musical-primary-ink);
}
.musical-pager__button:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-pager__button[aria-current="page"] {
background: var(--musical-primary-ink);
border-color: var(--musical-primary-ink);
color: #fff;
}
.musical-pager__button[disabled] {
opacity: 0.45;
cursor: default;
}
.musical-pager__status {
margin: 0;
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-dashboard .musical-playlist-manager,
.musical-dashboard .musical-import {
padding: var(--musical-space-lg);
background: #fff;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
box-shadow: var(--musical-shadow-card);
}
@media (min-width: 48rem) {
.musical-dashboard .musical-playlist-manager,
.musical-dashboard .musical-import,
.musical-artist-link {
padding: var(--musical-space-xl);
}
}
.brxe-section:has(> .musical-dashboard) {
background: #f5f4f0;
}
.musical-dashboard :is(.musical-artist-link, .musical-track-grid, .musical-upload-panel, .musical-import, .musical-playlist-manager) {
background-color: #fff;
}
.musical-dashboard .musical-studio-head__mark {
width: 36px;
height: 36px;
background: #f1f0ec;
color: var(--musical-text-primary);
}
.musical-dashboard .musical-studio-head__mark svg {
width: 18px;
height: 18px;
}
.musical-dashboard .musical-studio-fold__tally {
background: #f1f0ec;
color: var(--musical-text-secondary);
}
.musical-dashboard .musical-studio-fold__twist {
color: var(--musical-text-secondary);
}
.musical-dashboard .musical-studio-fold > summary:hover .musical-studio-head__title {
text-decoration: none;
color: var(--musical-primary-ink);
}
.musical-dashboard .musical-track-grid {
--musical-songs-pad: var(--musical-space-lg);
padding: var(--musical-songs-pad);
background: #fff;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
box-shadow: var(--musical-shadow-card);
}
.musical-dashboard .musical-track-grid > .musical-studio-fold > summary {
margin: calc(var(--musical-songs-pad) * -1) calc(var(--musical-songs-pad) * -1) var(--musical-space-lg);
padding: var(--musical-songs-pad);
border-radius: var(--musical-radius-lg) var(--musical-radius-lg) 0 0;
background:
radial-gradient(36rem 14rem at 100% 0%, rgb(0 217 217 / 32%), transparent 70%),
radial-gradient(28rem 12rem at 0% 100%, rgb(230 29 155 / 26%), transparent 70%),
#151515;
color: var(--musical-text-light);
}
.musical-dashboard .musical-track-grid > .musical-studio-fold:not([open]) > summary {
margin-block-end: calc(var(--musical-songs-pad) * -1);
border-radius: var(--musical-radius-lg);
}
.musical-dashboard .musical-track-grid > .musical-studio-fold > summary .musical-studio-head__title {
color: var(--musical-text-light);
}
.musical-dashboard .musical-track-grid > .musical-studio-fold > summary:hover .musical-studio-head__title {
color: var(--musical-primary);
}
.musical-dashboard .musical-track-grid > .musical-studio-fold > summary .musical-studio-head__hint {
color: rgb(245 245 245 / 74%);
}
.musical-dashboard .musical-track-grid > .musical-studio-fold > summary .musical-studio-head__mark {
background: rgb(255 255 255 / 10%);
color: var(--musical-primary);
}
.musical-dashboard .musical-track-grid > .musical-studio-fold > summary .musical-studio-fold__tally {
background: rgb(0 217 217 / 18%);
color: var(--musical-text-light);
}
.musical-dashboard .musical-track-grid > .musical-studio-fold > summary .musical-studio-fold__twist {
color: var(--musical-text-light);
}
.musical-dashboard .musical-track-grid > .musical-studio-fold > summary:focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 3px;
}
.musical-dashboard .musical-track-grid .musical-track-card--row {
padding-inline: 0;
background: none;
border: 0;
border-block-end: 1px solid var(--musical-border);
border-radius: 0;
box-shadow: none;
}
.musical-dashboard .musical-track-grid .musical-track-card--row:last-child {
border-block-end: 0;
}
.musical-dashboard .musical-track-grid .musical-track-card--row:hover {
transform: none;
box-shadow: none;
}
@media (min-width: 48rem) {
.musical-dashboard .musical-track-grid {
--musical-songs-pad: var(--musical-space-xl);
}
}
@media (max-width: 39.99rem) {
.musical-dashboard .musical-track-grid {
--musical-songs-pad: var(--musical-space-md);
}
}
.musical-dashboard .musical-track-card--row .musical-track-card__visibility-note:not(.is-telling) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.musical-dashboard .musical-track-card--row:has(.musical-visibility__options:focus-within) .musical-track-card__visibility-note {
position: static;
width: auto;
height: auto;
overflow: visible;
clip-path: none;
white-space: normal;
}
body:has(.musical-dashboard) .musical-header__cta.musical-btn--primary {
background: transparent;
color: var(--musical-text-primary);
box-shadow: inset 0 0 0 1px var(--musical-border);
}
body:has(.musical-dashboard) .musical-header__cta.musical-btn--primary:hover {
background: var(--musical-bg-light);
}
body:has(.musical-get-started) .musical-studio-summary__cta.musical-btn--primary {
background: transparent;
color: var(--musical-text-light);
box-shadow: inset 0 0 0 1px rgb(245 245 245 / 45%);
}
body:has(.musical-get-started) .musical-studio-summary__cta.musical-btn--primary:hover {
background: rgb(255 255 255 / 8%);
}
.musical-artist-link__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm) var(--musical-space-lg);
margin: 0;
}
.musical-sidebar__link {
--musical-link-ink: var(--musical-primary-ink);
--musical-link-wash: rgb(0 217 217 / 12%);
gap: var(--musical-space-sm);
border: 0;
border-radius: var(--musical-radius-md);
color: var(--musical-text-primary);
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-sidebar__mark {
display: grid;
flex: none;
place-items: center;
width: 16px;
height: 16px;
color: var(--musical-text-secondary);
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-sidebar__mark svg,
.musical-sidebar__away svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.musical-sidebar__label {
min-width: 0;
}
.musical-sidebar__away {
display: grid;
margin-inline-start: auto;
color: var(--musical-text-secondary);
opacity: 0.6;
transition:
transform var(--musical-duration-quick) var(--musical-easing-out),
opacity var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-sidebar__link:hover {
background: #f3f2ee;
}
.musical-sidebar__link:is(:hover, .is-here) .musical-sidebar__mark {
color: var(--musical-link-ink);
}
.musical-sidebar__link:hover .musical-sidebar__away {
opacity: 1;
transform: translateX(3px);
}
.musical-sidebar__link.is-here,
.musical-sidebar__link[aria-current="page"] {
background: var(--musical-link-wash);
font-weight: 600;
}
.musical-sidebar__link[aria-current="page"] {
--musical-link-wash: #ecebe6;
}
.musical-sidebar__link:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-sidebar__title {
margin: 0 0 var(--musical-space-xs);
padding-inline: var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
@media (max-width: 63.99rem) {
.musical-sidebar__nav {
display: flex;
gap: var(--musical-space-sm);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.musical-sidebar__nav::-webkit-scrollbar {
display: none;
}
.musical-sidebar__group {
position: relative;
display: flex;
flex: none;
}
.musical-sidebar__group--away {
padding-inline-start: var(--musical-space-sm);
border-inline-start: 1px solid var(--musical-border);
}
.musical-sidebar__list {
overflow-x: visible;
}
.musical-sidebar__title {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (min-width: 64rem) {
.musical-dashboard {
grid-template-columns: 14rem minmax(0, 1fr);
}
.musical-sidebar__nav {
display: grid;
gap: var(--musical-space-md);
padding: var(--musical-space-md) var(--musical-space-sm);
background: #fff;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
box-shadow: var(--musical-shadow-card);
}
.musical-sidebar__group--away {
padding-block-start: var(--musical-space-md);
border-block-start: 1px solid var(--musical-border);
}
.musical-sidebar__link {
padding-inline: var(--musical-space-xs) var(--musical-space-sm);
border-inline-start: 0;
}
}
.musical-track-card__stats {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-xs) var(--musical-space-md);
margin: 0;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
}
.musical-track-card__stats > span + span::before {
content: "·";
margin-inline-end: var(--musical-space-md);
color: #b5b5b0;
}
@media (hover: hover) {
.musical-track-grid .musical-track-card--row {
transition: transform var(--musical-duration-quick) var(--musical-easing-out),
box-shadow var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-track-grid .musical-track-card--row:hover {
transform: translateY(-2px);
box-shadow: var(--musical-shadow-card-hover);
}
.musical-track-grid .musical-track-card--row:has(.musical-edit[open]):hover {
transform: none;
}
}
.musical-empty__art {
display: block;
width: 160px;
height: auto;
margin: 0 auto var(--musical-space-md);
}
.musical-upload__drop.has-file > :not(.musical-upload__chip):not(input) {
display: none;
}
.musical-upload__chip {
display: inline-flex;
gap: var(--musical-space-sm);
align-items: center;
max-width: 100%;
padding: 4px 4px 4px 14px;
border-radius: var(--musical-radius-pill);
background: #e0f7f7;
font-family: var(--musical-font-body);
font-size: 0.9375rem;
color: var(--musical-primary-ink);
}
.musical-upload__chip[hidden] {
display: none;
}
.musical-upload__chip .musical-upload__filename {
min-width: 0;
overflow: hidden;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.musical-upload__filesize {
flex: none;
font-size: 0.8125rem;
color: var(--musical-text-secondary);
}
.musical-upload__chip-icon svg,
.musical-upload__chip-clear svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.musical-upload__chip-clear {
display: grid;
flex: none;
place-items: center;
width: 44px;
height: 44px;
margin-block: -8px;
border: 0;
border-radius: 50%;
background: none;
color: inherit;
cursor: pointer;
}
.musical-upload__chip-clear:hover {
background: rgba(0, 90, 90, 0.1);
}
.musical-upload__chip-clear:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: -2px;
}
.musical-btn:active:not(:disabled) {
transform: scale(0.97);
}
.musical-sidebar__link {
transition: background-color var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-smooth) var(--musical-easing-luxe),
color var(--musical-duration-quick) var(--musical-easing-out);
}
@media (prefers-reduced-motion: reduce) {
.musical-track-grid .musical-track-card--row,
.musical-sidebar__link {
transition: none;
}
.musical-track-grid .musical-track-card--row:hover,
.musical-btn:active:not(:disabled) {
transform: none;
}
}
@keyframes musical-fresh-glow {
from {
box-shadow: 0 0 0 0 rgba(0, 217, 217, 0.55);
}
to {
box-shadow: 0 0 0 14px rgba(0, 217, 217, 0);
}
}
.musical-track-card--fresh {
animation: musical-fresh-glow var(--musical-duration-smooth) var(--musical-easing-out);
}
@supports (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: no-preference) {
.musical-edit-section--fold {
interpolate-size: allow-keywords;
}
.musical-edit-section--fold::details-content {
block-size: 0;
overflow: clip;
transition: block-size var(--musical-duration-quick) var(--musical-easing-out),
content-visibility var(--musical-duration-quick) allow-discrete;
}
.musical-edit-section--fold[open]::details-content {
block-size: auto;
transition: none;
}
}
}
@media (prefers-reduced-motion: reduce) {
.musical-track-card--fresh {
animation: none;
}
}
.musical-upload-panel {
padding: var(--musical-space-lg);
background: #fff;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
}
.musical-upload-panel__first {
margin: calc(-1 * var(--musical-space-sm)) 0 0;
max-width: 44rem;
color: var(--musical-text-secondary);
text-wrap: pretty;
}
@media (min-width: 48rem) {
.musical-upload-panel {
padding: var(--musical-space-xl);
}
}
.musical-upload {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
}
.musical-upload__primary,
.musical-upload__submit {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
}
.musical-upload__primary .musical-field,
.musical-upload__primary .musical-toggle {
max-width: 34rem;
}
.musical-upload__drop {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--musical-space-sm);
min-height: 11rem;
padding: var(--musical-space-lg);
text-align: center;
border: 2px dashed var(--musical-border);
border-radius: var(--musical-radius-lg);
background: #fff;
color: var(--musical-text-secondary);
cursor: pointer;
transition:
border-color var(--musical-duration-quick) var(--musical-easing-out),
background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-upload__drop:hover,
.musical-upload__drop.is-dragging {
border-color: var(--musical-primary-ink);
background: rgb(0 122 122 / 5%);
}
.musical-upload__drop:focus-within {
border-color: var(--musical-primary-ink);
box-shadow: 0 0 0 3px rgb(0 122 122 / 15%);
}
.musical-upload__drop-icon svg {
width: 32px;
height: 32px;
fill: var(--musical-primary-ink);
}
.musical-upload__drop-lead {
font-family: var(--musical-font-display);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
}
.musical-upload__drop input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.musical-upload__filename {
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
overflow-wrap: anywhere;
}
.musical-upload__more {
border-block-start: 1px solid var(--musical-border);
padding-block-start: var(--musical-space-md);
}
.musical-upload__more-summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--musical-space-md);
align-items: center;
min-height: 44px;
padding: var(--musical-space-md);
border: 1px dashed var(--musical-primary-ink);
border-radius: var(--musical-radius-lg);
background: #fff;
cursor: pointer;
list-style: none;
transition: background var(--musical-duration-quick) var(--musical-easing-out), border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-upload__more-summary::-webkit-details-marker {
display: none;
}
.musical-upload__more-summary:hover {
background: #f2fbfb;
border-style: solid;
}
.musical-upload__more-summary:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-upload__more[open] > .musical-upload__more-summary {
border-style: solid;
margin-block-end: var(--musical-space-md);
}
.musical-upload__more-mark {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #e0f7f7;
color: var(--musical-primary-ink);
}
.musical-upload__more-mark svg {
width: 20px;
height: 20px;
fill: currentColor;
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-upload__more[open] .musical-upload__more-mark svg {
transform: rotate(45deg);
}
.musical-upload__more-text {
display: grid;
gap: 2px;
}
.musical-upload__more-label {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-xs) var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 1rem;
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-upload__more-summary:hover .musical-upload__more-label {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-upload__more-tag {
padding: 1px 8px;
border-radius: 999px;
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
color: var(--musical-text-secondary);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
}
.musical-upload__more-hint {
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-upload__more[open] > summary > .musical-studio-fold__twist {
transform: rotate(0deg);
}
.musical-upload__more-body {
display: flex;
flex-direction: column;
}
@media (prefers-reduced-motion: reduce) {
.musical-upload__more-summary,
.musical-upload__more-mark svg {
transition: none;
}
}
.musical-upload__submit {
align-items: flex-start;
}
.musical-auth {
display: grid;
grid-template-columns: 1fr;
gap: var(--musical-space-xl);
align-items: start;
}
@media (min-width: 56rem) {
.musical-auth {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--musical-space-2xl);
}
.musical-auth--step {
width: 100%;
grid-template-columns: minmax(0, 32rem);
justify-content: center;
}
}
.musical-auth__panel {
padding: var(--musical-space-xl);
background: #fff;
border-radius: var(--musical-radius-lg);
box-shadow: var(--musical-shadow-card);
}
.musical-auth__account-actions {
align-self: start;
}
.musical-auth__panel--accent {
background: linear-gradient(150deg, var(--musical-bg-dark) 0%, #241d2c 100%);
color: var(--musical-text-light);
box-shadow: var(--musical-shadow-lift);
}
.musical-auth__panel--accent .musical-h3 {
color: var(--musical-text-light);
}
.musical-auth__panel--accent .musical-field__label,
.musical-auth__panel--accent .musical-caption {
color: rgb(245 245 245 / 75%);
}
.musical-auth__panel--accent .musical-body-s {
color: rgb(245 245 245 / 88%);
}
.musical-auth__panel--accent .musical-field__error {
color: #ff9d9d;
}
.musical-auth .llq-signin {
--llq-signin-accent: var(--musical-primary-ink);
--llq-signin-on-accent: var(--musical-text-light);
}
.musical-auth__panel--accent .llq-signin {
--llq-signin-accent: var(--musical-text-light);
--llq-signin-on-accent: var(--musical-bg-dark);
}
.musical-auth__connections .llq-signin__heading {
font-family: var(--musical-font-display);
font-size: 1.75rem;
line-height: 1.3;
font-weight: 600;
color: var(--musical-text-primary);
margin-bottom: 0.25rem;
}
.musical-auth__connections .llq-signin__connection {
padding: 0.5rem 0;
border-top: 1px solid var(--musical-border, color-mix(in srgb, currentColor 15%, transparent));
}
.musical-auth .llq-signin__label {
color: var(--musical-text-secondary);
}
.musical-auth__panel--accent .llq-signin__label {
color: rgb(245 245 245 / 75%);
}
.musical-auth__panel--accent .llq-signin__input {
background: #fff;
border-color: transparent;
color: var(--musical-primary-ink);
}
.musical-auth__or {
display: flex;
align-items: center;
gap: var(--musical-space-md);
color: var(--musical-text-secondary);
font-size: 0.875rem;
}
.musical-auth__or::before,
.musical-auth__or::after {
content: "";
flex: 1;
height: 1px;
background: currentColor;
opacity: 0.25;
}
.musical-auth__actions {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-md);
}
.musical-profile__details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: var(--musical-space-lg);
}
.musical-profile__notice {
margin: 0;
}
.musical-profile__notice--success {
color: var(--musical-success-ink);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
}
:target,
.musical-anchor,
[id^="musical-"] {
scroll-margin-top: calc(64px + var(--musical-space-lg));
}
.musical-anchor {
display: block;
height: 0;
overflow: hidden;
}
.musical-visually-hidden {
position: absolute !important;
display: block;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.musical-visually-hidden[hidden] {
display: none;
}
.musical-track-card--row {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr);
grid-template-areas: "art body";
align-items: start;
gap: var(--musical-space-md);
padding: var(--musical-space-md);
}
.musical-track-card--row .musical-track-card__art {
grid-area: art;
}
.musical-track-card--row .musical-track-card__body {
grid-area: body;
}
@media (min-width: 40rem) {
.musical-track-card--row {
grid-template-columns: 6rem minmax(0, 1fr);
gap: var(--musical-space-lg);
padding: var(--musical-space-lg);
}
}
@media (max-width: 59.99rem) {
.musical-track-card--row:has(.musical-edit[open]) {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "body";
}
.musical-track-card--row:has(.musical-edit[open]) .musical-track-card__art {
display: none;
}
}
@media (min-width: 64rem) {
.musical-track-card--row .musical-track-card__body {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: var(--musical-space-lg);
row-gap: var(--musical-space-sm);
}
.musical-track-card--row .musical-track-card__title,
.musical-track-card--row .musical-track-card__meta,
.musical-track-card--row .musical-track-card__visibility-note,
.musical-track-card--row .musical-track-card__fresh,
.musical-track-card--row .musical-edit {
grid-column: 1 / -1;
}
.musical-track-card--row .musical-track-card__owner-tools {
border-block-start: 0;
padding-block-start: 0;
}
}
.musical-track-card--row:hover,
.musical-track-card--row:focus-within {
transform: none;
}
.musical-track-card--row:hover .musical-track-card__art img,
.musical-track-card--row:hover .musical-track-card__art .musical-cover {
transform: none;
}
.musical-track-card--row .musical-track-card__play {
inset: 50% auto auto 50%;
translate: -50% -50%;
width: 44px;
height: 44px;
}
.musical-track-card--row .musical-track-card__play svg {
width: 16px;
height: 16px;
}
.musical-track-card__share {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
position: relative;
z-index: 2;
}
.musical-track-card__share[hidden] {
display: none;
}
.musical-track-card__share .musical-btn {
min-height: 44px;
padding-inline: var(--musical-space-md);
flex: 0 0 auto;
white-space: nowrap;
}
.musical-edit {
position: relative;
z-index: 2;
border-block-start: 1px solid var(--musical-border);
padding-block-start: var(--musical-space-sm);
}
.musical-edit__summary {
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
min-height: 44px;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
cursor: pointer;
}
.musical-edit__cue {
padding: 2px var(--musical-space-sm);
border-radius: var(--musical-radius-pill);
background: rgb(0 122 122 / 10%);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
text-decoration: none;
}
.musical-edit__summary:hover,
.musical-edit-section--fold > summary:hover .musical-edit-section__title {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-edit__summary:focus-visible,
.musical-edit-section--fold > summary:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-edit__summary-label--open,
.musical-edit[open] .musical-edit__summary-label--closed,
.musical-edit[open] .musical-edit__cue {
display: none;
}
.musical-edit[open] .musical-edit__summary-label--open {
display: inline;
}
.musical-edit__form {
display: flex;
flex-direction: column;
padding-block-start: var(--musical-space-md);
}
.musical-edit__heading {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-edit__heading-title {
color: var(--musical-text-primary);
text-transform: none;
letter-spacing: 0.01em;
}
.musical-edit__intro {
margin: var(--musical-space-xs) 0 var(--musical-space-lg);
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-edit,
.musical-upload__more {
--musical-edit-ground-odd: #f5f4f0;
--musical-edit-ground-even: #eaf3f3;
}
.musical-edit__form,
.musical-upload__more-body {
container: musical-edit / inline-size;
}
.musical-edit-section {
display: grid;
gap: var(--musical-space-lg);
margin-block-end: var(--musical-space-md);
padding: var(--musical-space-md);
border-radius: var(--musical-radius-lg);
background: var(--musical-edit-ground-odd);
}
.musical-edit-section:nth-of-type(even) {
background: var(--musical-edit-ground-even);
}
.musical-edit-section--fold {
display: block;
}
.musical-edit-section--fold > summary {
grid-template-columns: auto minmax(0, 1fr) auto;
min-height: 44px;
cursor: pointer;
list-style: none;
}
.musical-edit-section--fold > summary::-webkit-details-marker {
display: none;
}
.musical-edit-section--fold > .musical-edit-section__body {
margin-block-start: var(--musical-space-lg);
}
.musical-edit-section__head {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--musical-space-md);
row-gap: 2px;
align-items: center;
}
.musical-edit-section__mark {
grid-row: span 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--musical-radius-md);
background: #fff;
color: var(--musical-primary-ink);
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}
.musical-edit-section__mark svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.musical-edit-section__title {
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
color: var(--musical-text-primary);
}
.musical-edit-section__title label {
font: inherit;
color: inherit;
cursor: pointer;
}
.musical-edit-section__note {
margin: 0;
max-width: 40rem;
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.45;
color: #5f5f5f;
}
.musical-edit-section__twist {
grid-column: 3;
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
color: var(--musical-primary-ink);
transform: rotate(180deg);
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-edit-section__twist svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.musical-edit-section--fold[open] > summary .musical-edit-section__twist {
transform: rotate(0deg);
}
.musical-edit-section--fold > summary:has(> .musical-edit-section__state) {
grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.musical-edit-section--fold > summary:has(> .musical-edit-section__state) > .musical-edit-section__twist {
grid-column: 4;
}
.musical-edit-section--fold > summary:has(> .musical-edit-section__state) > .musical-edit-section__note {
grid-column: 2 / -2;
grid-row: 2;
}
.musical-edit-section__state {
grid-column: 3;
grid-row: 1;
padding: 2px 10px;
border-radius: var(--musical-radius-pill, 999px);
background: #e0f7f7;
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.5;
color: var(--musical-primary-ink);
}
.musical-edit-section__state[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.musical-edit-section__twist {
transition: none;
}
}
.musical-edit-section__body {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
min-width: 0;
}
.musical-edit-section__body > textarea.musical-input {
min-height: 0;
}
.musical-edit-section__body > textarea + .musical-attach {
margin-block-start: calc(var(--musical-space-sm) - var(--musical-space-lg));
}
.musical-edit-section__body > textarea + .musical-attach:has(.musical-attach__heading) {
margin-block-start: 0;
}
.musical-edit-section .musical-cover-picker {
background: #fff;
}
.musical-edit-section .musical-cover-picker .musical-caption {
font-size: 0.8125rem;
letter-spacing: 0;
color: #5f5f5f;
}
.musical-cover-picker__body > .musical-edit-section.musical-edit-section--fold {
margin-block: 0;
padding: var(--musical-space-md) 0 0;
border-block-start: 1px solid var(--musical-border);
border-radius: 0;
background: none;
}
@container musical-edit (min-width: 36rem) {
.musical-edit-section {
padding: var(--musical-space-lg);
}
}
:is(.musical-edit-section, .musical-replace, .musical-polish, .musical-stems, .musical-related-fields, .musical-order, .musical-feedback-panel) :is(
.musical-attach__pick,
.musical-attach__remove,
.musical-cover-picker__choose,
.musical-genre-ai__button,
[data-musical-shuffle-art],
.musical-credits-fields__add,
.musical-versions-fields__add,
.musical-related-fields__add,
.musical-related-row__remove,
.musical-filepick,
[data-musical-replace-submit],
[data-musical-polish-run],
[data-musical-polish-play],
[data-musical-stems-run],
[data-musical-stems-play],
[data-musical-stems-zip],
[data-musical-ai-cover-run],
[data-musical-cover-words-fill],
[data-musical-cover-words-more],
[data-musical-cover-words-drop],
[data-musical-cover-words-remove],
[data-musical-cover-download],
.musical-order__pin,
[data-musical-feedback-make],
.musical-feedback-link__act,
[data-musical-feedback-revoke-all]
) {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
gap: var(--musical-space-sm);
min-height: 44px;
padding: 0 var(--musical-space-md);
border: 1px solid rgb(0 0 0 / 16%);
border-radius: var(--musical-radius-md);
background: #fff;
box-shadow: none;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
color: var(--musical-primary-ink);
text-decoration: none;
cursor: pointer;
transition:
border-color var(--musical-duration-quick) var(--musical-easing-out),
background-color var(--musical-duration-quick) var(--musical-easing-out);
}
:is(.musical-edit-section, .musical-replace, .musical-polish, .musical-stems, .musical-related-fields, .musical-order, .musical-feedback-panel) :is(
.musical-attach__pick,
.musical-attach__remove,
.musical-cover-picker__choose,
.musical-genre-ai__button,
[data-musical-shuffle-art],
.musical-credits-fields__add,
.musical-versions-fields__add,
.musical-related-fields__add,
.musical-related-row__remove,
.musical-filepick,
[data-musical-replace-submit],
[data-musical-polish-run],
[data-musical-polish-play],
[data-musical-stems-run],
[data-musical-stems-play],
[data-musical-stems-zip],
[data-musical-ai-cover-run],
[data-musical-cover-words-fill],
[data-musical-cover-words-more],
[data-musical-cover-words-drop],
[data-musical-cover-words-remove],
[data-musical-cover-download],
.musical-order__pin,
[data-musical-feedback-make],
.musical-feedback-link__act,
[data-musical-feedback-revoke-all]
):hover:not(:disabled) {
border-color: var(--musical-primary-ink);
background: #fff;
color: var(--musical-primary-ink);
text-decoration: none;
}
:is(.musical-edit-section, .musical-replace, .musical-polish, .musical-stems, .musical-related-fields, .musical-order, .musical-feedback-panel) :is(
.musical-genre-ai__button,
[data-musical-shuffle-art],
.musical-credits-fields__add,
.musical-versions-fields__add,
.musical-related-fields__add,
.musical-related-row__remove,
[data-musical-replace-submit],
[data-musical-polish-run],
[data-musical-polish-play],
[data-musical-stems-run],
[data-musical-stems-play],
[data-musical-stems-zip],
[data-musical-ai-cover-run],
[data-musical-cover-words-fill],
[data-musical-cover-words-more],
[data-musical-cover-words-drop],
[data-musical-cover-words-remove],
[data-musical-cover-download],
.musical-order__pin,
[data-musical-feedback-make],
.musical-feedback-link__act,
[data-musical-feedback-revoke-all]
):focus-visible,
:is(.musical-edit-section, .musical-replace, .musical-polish, .musical-related-fields, .musical-feedback-panel) :is(
.musical-attach__pick,
.musical-attach__remove,
.musical-cover-picker__choose,
.musical-filepick
):has(input:focus-visible) {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
:is(.musical-edit-section, .musical-replace, .musical-polish, .musical-stems, .musical-related-fields, .musical-order, .musical-feedback-panel) :is(
.musical-genre-ai__button,
[data-musical-shuffle-art],
.musical-credits-fields__add,
.musical-versions-fields__add,
.musical-related-fields__add,
.musical-related-row__remove,
[data-musical-replace-submit],
[data-musical-polish-run],
[data-musical-polish-play],
[data-musical-stems-run],
[data-musical-stems-play],
[data-musical-stems-zip],
[data-musical-ai-cover-run],
[data-musical-cover-words-fill],
[data-musical-cover-words-more],
[data-musical-cover-words-drop],
[data-musical-cover-words-remove],
[data-musical-cover-download],
.musical-order__pin,
[data-musical-feedback-make],
.musical-feedback-link__act,
[data-musical-feedback-revoke-all]
):disabled {
opacity: 0.55;
cursor: not-allowed;
}
:is(.musical-edit-section, .musical-replace, .musical-polish, .musical-stems, .musical-related-fields, .musical-order, .musical-feedback-panel) :is(
.musical-attach__pick,
.musical-cover-picker__choose,
.musical-genre-ai__button,
[data-musical-shuffle-art],
.musical-credits-fields__add,
.musical-versions-fields__add,
.musical-related-fields__add,
.musical-related-row__remove,
[data-musical-cover-download],
.musical-order__pin
) svg {
flex: none;
width: 18px;
height: 18px;
fill: currentColor;
}
.musical-edit :is(.musical-replace__current, .musical-replace__note, .musical-polish__note) {
max-width: 40rem;
margin: 0 0 var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.45;
color: #5f5f5f;
}
.musical-edit :is(.musical-replace__note, .musical-polish > .musical-polish__note) {
margin-block-end: var(--musical-space-lg);
}
.musical-edit .musical-replace__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-md);
margin-block-start: var(--musical-space-md);
}
.musical-edit .musical-polish__run {
display: grid;
justify-items: start;
gap: var(--musical-space-md);
}
.musical-edit .musical-polish__run .musical-field {
justify-self: stretch;
}
.musical-edit .musical-polish [hidden] {
display: none;
}
.musical-edit .musical-polish__runs,
.musical-edit .musical-polish__status {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
color: #5f5f5f;
}
.musical-edit .musical-polish__status {
margin-block-start: var(--musical-space-sm);
font-size: 0.875rem;
color: var(--musical-text-primary);
}
.musical-edit .musical-polish__status.is-error {
color: var(--musical-error-ink);
}
.musical-edit .musical-polish__measured {
margin: 0 0 var(--musical-space-md);
font-family: var(--musical-font-body);
font-size: 0.9375rem;
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-edit .musical-polish__ab {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
}
.musical-edit .musical-polish__side {
min-height: 44px;
padding: 0 var(--musical-space-md);
border: 1px solid rgb(0 0 0 / 16%);
border-radius: var(--musical-radius-pill);
background: #fff;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
cursor: pointer;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-edit .musical-polish__side:hover {
border-color: var(--musical-primary-ink);
}
.musical-edit .musical-polish__side[aria-pressed="true"] {
border-color: var(--musical-primary-ink);
background: var(--musical-primary-ink);
color: var(--musical-text-light);
}
.musical-edit .musical-polish__side:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-edit .musical-polish__time {
font-family: var(--musical-font-mono);
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: #5f5f5f;
}
.musical-edit :is(.musical-polish__actions, .musical-polish__revert) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-lg);
}
.musical-edit .musical-polish__revert .musical-polish__note {
flex-basis: 100%;
margin: 0;
}
.musical-edit__foot {
margin-block-start: var(--musical-space-md);
}
.musical-edit__close {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
min-height: 44px;
padding: 0;
border: 0;
background: none;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
cursor: pointer;
}
.musical-edit__close svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.musical-edit__close:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-edit__close:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-cover-picker__choose input[type="file"],
.musical-attach__pick input[type="file"],
.musical-filepick input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.musical-edit__actions {
position: sticky;
inset-block-end: var(--musical-nowplaying-height, 0px);
z-index: 3;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-md);
padding-block: var(--musical-space-md);
border-block-start: 1px solid var(--musical-border);
background: #fff;
box-shadow: 0 -10px 16px -14px rgb(0 0 0 / 35%);
}
.musical-edit__status {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.5;
}
.musical-edit__status--success {
color: var(--musical-success-ink);
}
.musical-edit__status--error {
color: #d13030;
}
.musical-edit__delete {
margin-inline-start: auto;
color: var(--musical-error-ink);
}
.musical-edit__delete:hover,
.musical-edit__delete:focus-visible {
background: rgb(165 31 31 / 8%);
}
.musical-cover-picker {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--musical-space-md);
padding: var(--musical-space-md);
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
}
.musical-cover-picker__preview {
position: relative;
flex: 0 0 auto;
display: block;
width: 5.5rem;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--musical-radius-sm);
background: #fff;
}
.musical-profile-picture__preview {
border-radius: 50%;
}
.musical-cover-picker__preview img,
.musical-cover-picker__preview .musical-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.musical-cover-picker__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--musical-text-secondary);
}
.musical-cover-picker__placeholder svg {
width: 40%;
height: 40%;
fill: currentcolor;
}
.musical-cover-picker__body {
flex: 1 1 12rem;
min-width: 12rem;
display: flex;
flex-direction: column;
gap: var(--musical-space-xs);
}
.musical-cover-picker .musical-checkbox {
align-items: flex-start;
}
.musical-cover-picker__choose,
.musical-filepick {
position: relative;
align-self: flex-start;
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: 600;
color: var(--musical-primary-ink);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-cover-picker__choose input[type="file"],
.musical-filepick input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.musical-cover-picker__choose:focus-within,
.musical-filepick:focus-within {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
border-radius: var(--musical-radius-sm);
}
.musical-cover-picker__filename,
.musical-filepick__filename {
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
overflow-wrap: anywhere;
}
.musical-cover-picker__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-xs);
}
.musical-cover-picker__downloads {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
}
.musical-attach__add {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--musical-space-md);
}
.musical-attach__pick-icon,
.musical-attach__icon,
.musical-attach__chosen-icon {
display: inline-flex;
flex: none;
}
.musical-attach svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.musical-attach__limits {
font-family: var(--musical-font-body);
font-size: 0.8125rem;
color: var(--musical-text-secondary);
}
.musical-attach.is-dragging {
border-radius: var(--musical-radius-md);
outline: 2px dashed var(--musical-primary-ink);
outline-offset: 4px;
background: rgb(0 122 122 / 5%);
}
.musical-attach__file {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-xs) var(--musical-space-sm);
padding: 5px 5px 5px var(--musical-space-md);
border: 1px solid rgb(0 0 0 / 12%);
border-radius: var(--musical-radius-md);
background: #fff;
}
.musical-attach__icon {
color: var(--musical-text-secondary);
}
.musical-attach__name {
flex: 1 1 8rem;
min-width: 0;
padding-block: var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
overflow-wrap: anywhere;
text-decoration: underline;
text-decoration-color: var(--musical-border);
text-underline-offset: 0.25em;
}
.musical-attach__name:hover {
text-decoration-color: currentColor;
}
.musical-attach__actions {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--musical-space-md);
}
.musical-edit-section .musical-attach__remove {
color: var(--musical-text-primary);
}
.musical-edit-section .musical-attach__remove:has(input:checked),
.musical-edit-section .musical-attach__remove:has(input:checked):hover {
border-color: var(--musical-error-ink);
background: #fbeeee;
color: var(--musical-error-ink);
}
.musical-attach__remove input:checked {
accent-color: var(--musical-error-ink);
}
.musical-attach__removing,
.musical-attach__chosen {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.5;
}
.musical-attach__removing {
display: none;
color: var(--musical-error-ink);
}
.musical-attach:has(.musical-attach__remove input:checked) .musical-attach__removing {
display: block;
}
.musical-attach:has(.musical-attach__remove input:checked) .musical-attach__name,
.musical-attach:has([data-musical-file-filename]:not(:empty)) .musical-attach__name {
color: var(--musical-text-secondary);
text-decoration-line: line-through;
text-decoration-color: currentColor;
}
.musical-attach__chosen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--musical-space-xs);
color: var(--musical-text-primary);
}
.musical-attach__chosen:has([data-musical-file-filename]:empty) {
display: none;
}
.musical-attach__chosen-icon {
color: var(--musical-success-ink);
}
.musical-attach__chosen-name {
font-weight: 600;
overflow-wrap: anywhere;
}
.musical-attach__chosen-when {
color: var(--musical-text-secondary);
}
.musical-hero-picker {
min-width: 0;
margin: 0;
padding: var(--musical-space-md);
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
display: flex;
flex-direction: column;
gap: var(--musical-space-sm);
}
.musical-hero-picker__details {
min-width: 0;
}
.musical-hero-picker__summary {
display: flex;
align-items: center;
gap: var(--musical-space-sm);
min-height: 44px;
cursor: pointer;
list-style: none;
border-radius: var(--musical-radius-sm);
}
.musical-hero-picker__summary::-webkit-details-marker {
display: none;
}
.musical-hero-picker__summary:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-hero-picker__summary-thumb {
flex: 0 0 auto;
display: block;
width: 6.5rem;
aspect-ratio: 5 / 2;
overflow: hidden;
background: #1a1a1a;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-sm);
}
.musical-hero-picker__summary-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.musical-hero-picker__summary-label {
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-hero-picker__summary-action {
margin-inline-start: auto;
font-weight: 600;
color: var(--musical-primary-ink);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-hero-picker__details:not([open]) .musical-hero-picker__summary-action-close {
display: none;
}
.musical-hero-picker__details[open] .musical-hero-picker__summary-action-open {
display: none;
}
.musical-hero-picker__panel {
display: flex;
flex-direction: column;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-sm);
}
.musical-hero-picker__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
gap: var(--musical-space-sm);
}
.musical-hero-picker__option {
position: relative;
display: flex;
flex-direction: column;
gap: var(--musical-space-xs);
cursor: pointer;
}
.musical-hero-picker__radio {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.musical-hero-picker__thumb {
display: block;
aspect-ratio: 5 / 2;
overflow: hidden;
background: #1a1a1a;
border: 2px solid var(--musical-border);
border-radius: var(--musical-radius-sm);
}
.musical-hero-picker__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.musical-hero-picker__radio:checked ~ .musical-hero-picker__thumb {
border-color: var(--musical-primary-ink);
box-shadow: 0 0 0 1px var(--musical-primary-ink);
}
.musical-hero-picker__radio:checked ~ .musical-hero-picker__name {
font-weight: 600;
color: var(--musical-primary-ink);
}
.musical-hero-picker__radio:focus-visible ~ .musical-hero-picker__thumb {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-hero-picker__radio:disabled ~ .musical-hero-picker__thumb,
.musical-hero-picker__radio:disabled ~ .musical-hero-picker__name {
opacity: 0.6;
}
.musical-hero-picker__name {
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-hero-picker__empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 0.8125rem;
color: rgb(245 245 245 / 70%);
}
@media (max-width: 47.9375rem) {
.musical-hero-picker__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.musical-hero-picker__thumb {
aspect-ratio: 4 / 5;
}
.musical-hero-picker__summary-thumb {
width: 3.5rem;
aspect-ratio: 4 / 5;
}
}
.musical-panels {
max-width: var(--musical-measure);
margin-inline: auto;
margin-block-start: var(--musical-space-xl);
}
@media (min-width: 48rem) {
.musical-panels {
margin-block-start: var(--musical-space-2xl);
}
}
@media (max-width: 47.99rem) {
.musical-panels {
margin-block-start: var(--musical-space-md);
}
}
.musical-panels__tabs {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-lg);
border-block-end: 1px solid var(--musical-border);
scroll-margin-block-start: var(--musical-space-sm);
}
.musical-panels__tab {
position: relative;
appearance: none;
background: none;
border: 0;
padding: 0 0 var(--musical-space-sm);
min-height: 44px;
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--musical-text-secondary);
cursor: pointer;
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-panels__tab::after {
content: "";
position: absolute;
inset-block-end: -1px;
inset-inline: 0;
height: 2px;
background: var(--musical-primary-ink);
transform: scaleX(0);
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-panels__tab:hover {
color: var(--musical-text-primary);
}
.musical-panels__tab[aria-selected="true"] {
color: var(--musical-text-primary);
}
.musical-panels__tab[aria-selected="true"]::after {
transform: scaleX(1);
}
.musical-panels__tab:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 4px;
border-radius: var(--musical-radius-sm);
}
.musical-panels__tab-short {
display: none;
}
@media (max-width: 47.99rem) {
.musical-panels__tabs {
gap: var(--musical-space-md);
}
.musical-panels__tab-long {
display: none;
}
.musical-panels__tab-short {
display: inline;
}
}
@media (max-width: 21.5rem) {
.musical-panels__tabs {
column-gap: var(--musical-space-sm);
}
.musical-panels__tab {
font-size: 0.6875rem;
}
}
.musical-panels__panel {
padding-block-start: var(--musical-space-xl);
}
.musical-panels__panel:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 4px;
border-radius: var(--musical-radius-md);
}
.musical-prose {
font-family: var(--musical-font-body);
font-size: 1.125rem;
line-height: 1.6;
color: var(--musical-text-primary);
}
.musical-prose p {
margin-block: 0 var(--musical-space-md);
}
.musical-prose p:last-child {
margin-block-end: 0;
}
.musical-lyrics {
max-width: 34rem;
line-height: 1.75;
}
.musical-lyrics p {
margin-block-end: var(--musical-space-lg);
}
.musical-chords {
margin: 0;
padding: var(--musical-space-lg);
overflow-x: auto;
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
font-family: var(--musical-font-mono);
font-size: 0.875rem;
line-height: 1.8;
color: var(--musical-text-primary);
tab-size: 4;
white-space: pre;
overscroll-behavior-x: contain;
}
.musical-chords code {
font: inherit;
background: none;
padding: 0;
}
@media (max-width: 600px) {
.musical-chords {
padding: var(--musical-space-md);
font-size: 0.875rem;
}
}
.musical-credits {
font-family: var(--musical-font-body);
color: var(--musical-text-primary);
}
.musical-credits__list {
margin: 0;
display: grid;
gap: var(--musical-space-sm);
}
.musical-credits__list--parted {
margin-block-start: var(--musical-space-lg);
padding-block-start: var(--musical-space-lg);
border-block-start: 1px solid var(--musical-border);
}
.musical-credits__row {
display: grid;
grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
gap: var(--musical-space-md);
align-items: baseline;
}
.musical-credits__role {
margin: 0;
display: grid;
grid-template-columns: 2.05rem minmax(0, 1fr);
gap: 0.55rem;
align-items: baseline;
font-size: 0.875rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-credits__icon {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem;
inline-size: 2.05rem;
transform: translateY(0.22rem);
}
.musical-credits__icon svg {
inline-size: 1.15rem;
block-size: 1.15rem;
opacity: 0.78;
}
.musical-credits__icon--2 svg,
.musical-credits__icon--3 svg {
inline-size: 0.9rem;
block-size: 0.9rem;
}
.musical-credits__people {
margin: 0;
font-size: 1rem;
line-height: 1.5;
}
@media (max-width: 30rem) {
.musical-credits__row {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.musical-credits__people {
padding-inline-start: 2.6rem;
}
.musical-credits__list {
gap: var(--musical-space-md);
}
}
.musical-credits-fields {
margin: 0;
padding: 0;
border: 0;
display: grid;
gap: var(--musical-space-md);
container-type: inline-size;
container-name: musical-credits;
}
.musical-credits-fields__written {
display: grid;
gap: var(--musical-space-md);
}
@container musical-credits (min-width: 30rem) {
.musical-credits-fields__written {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.musical-credits-fields__words-by,
.musical-credits-fields__music-by,
.musical-credits-fields__artwork {
grid-column: 1 / -1;
}
}
.musical-credits-fields__subhead {
margin: var(--musical-space-sm) 0 calc(var(--musical-space-sm) * -1);
padding-block-start: var(--musical-space-md);
border-block-start: 1px solid rgb(0 0 0 / 10%);
font-family: var(--musical-font-display);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
}
.musical-credits-fields__lead {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-credits-fields__lead em {
font-style: normal;
color: var(--musical-text-primary);
}
.musical-credit-palette {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
}
.musical-credit-palette__label {
font-size: 0.8125rem;
color: var(--musical-text-secondary);
margin-inline-end: var(--musical-space-xs);
}
.musical-credit-palette__pick {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.7rem;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
background: transparent;
color: var(--musical-text-secondary);
font: inherit;
font-size: 0.8125rem;
line-height: 1.2;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.musical-credit-palette__pick:hover,
.musical-credit-palette__pick:focus-visible {
border-color: var(--musical-primary-ink);
color: var(--musical-text-primary);
background: rgb(0 122 122 / 6%);
}
.musical-credit-palette__mark {
inline-size: 1.05rem;
block-size: 1.05rem;
flex: none;
}
.musical-credits-fields__rows {
display: grid;
gap: var(--musical-space-sm);
}
.musical-credit-row {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
gap: var(--musical-space-sm);
align-items: start;
}
.musical-credit-row__field {
min-width: 0;
}
.musical-credit-row__icon {
position: static;
}
.musical-credit-row__icon-summary {
display: flex;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-sm);
color: var(--musical-text-secondary);
cursor: pointer;
list-style: none;
}
.musical-credit-row__icon-summary::-webkit-details-marker {
display: none;
}
.musical-credit-row__icon-summary:hover,
.musical-credit-row__icon[open] > .musical-credit-row__icon-summary {
border-color: var(--musical-primary-ink);
color: var(--musical-text-primary);
}
.musical-credit-row__icon-mark {
display: flex;
align-items: center;
justify-content: center;
}
.musical-credit-row__icon-mark svg {
inline-size: 1.3rem;
block-size: 1.3rem;
}
.musical-credit-row__icon-cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.1rem;
inline-size: 2.1rem;
}
.musical-credit-row__icon-cluster--2 svg,
.musical-credit-row__icon-cluster--3 svg {
inline-size: 0.9rem;
block-size: 0.9rem;
}
.musical-credit-row__icon-empty {
display: block;
inline-size: 1.1rem;
block-size: 1.1rem;
border: 1px dashed currentcolor;
border-radius: 3px;
opacity: 0.55;
}
.musical-credit-row__picker {
position: absolute;
z-index: 20;
inset-block-start: calc(100% + 0.35rem);
inset-inline-start: 0;
inline-size: min(22rem, 100%);
max-block-size: min(21rem, 60vh);
overflow-y: auto;
box-sizing: border-box;
padding: var(--musical-space-md);
background: #fff;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
box-shadow: var(--musical-shadow-lift);
}
.musical-icon-picker {
display: grid;
gap: var(--musical-space-md);
}
.musical-icon-picker__modes {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
}
.musical-icon-picker__mode {
padding: 0.35rem 0.7rem;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
background: transparent;
color: var(--musical-text-secondary);
font: inherit;
font-size: 0.8125rem;
cursor: pointer;
}
.musical-icon-picker__mode:hover,
.musical-icon-picker__mode:focus-visible {
border-color: var(--musical-primary-ink);
color: var(--musical-text-primary);
}
.musical-icon-picker__heading {
margin: 0 0 var(--musical-space-xs);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-icon-picker__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
gap: 0.35rem;
}
.musical-icon-picker__icon {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
padding: 0;
border: 1px solid transparent;
border-radius: var(--musical-radius-sm);
background: transparent;
color: var(--musical-text-primary);
cursor: pointer;
}
.musical-icon-picker__icon:hover,
.musical-icon-picker__icon:focus-visible {
border-color: var(--musical-primary-ink);
background: rgb(0 122 122 / 8%);
}
.musical-icon-picker__icon svg {
inline-size: 1.4rem;
block-size: 1.4rem;
}
.musical-credit-row__remove {
padding-inline: var(--musical-space-sm);
line-height: 1;
min-height: 48px;
color: var(--musical-text-secondary);
}
.musical-credit-row__remove:hover {
color: var(--musical-text-primary);
}
.musical-credits-fields__merge {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
margin: 0;
padding: var(--musical-space-sm) var(--musical-space-md);
border: 1px solid var(--musical-warning);
border-radius: var(--musical-radius-md);
background: rgb(255 184 0 / 8%);
font-size: 0.875rem;
color: var(--musical-text-primary);
}
.musical-credits-fields__merge[hidden] {
display: none;
}
.musical-credits-fields__merge-do {
padding-block: 0.25rem;
min-height: 0;
}
.musical-credits-fields__add {
justify-self: start;
}
@container musical-credits (max-width: 30rem) {
.musical-credit-row {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.musical-credit-row__icon {
grid-column: 1;
grid-row: 1;
}
.musical-credit-row__field--role {
grid-column: 2 / -1;
grid-row: 1;
}
.musical-credit-row__field--people {
grid-column: 2;
grid-row: 2;
}
.musical-credit-row__remove {
grid-column: 3;
grid-row: 2;
}
.musical-credits-fields__rows {
gap: var(--musical-space-lg);
}
.musical-credit-palette__name {
max-inline-size: 9rem;
}
}
@media (max-width: 30rem) {
.musical-credit-palette__pick:nth-of-type(n + 7) {
display: none;
}
}
.musical-field--suggest {
position: relative;
}
.musical-suggest {
position: absolute;
z-index: 30;
inset-inline: 0;
top: 100%;
max-height: 15rem;
margin: var(--musical-space-xs) 0 0;
padding: var(--musical-space-xs);
overflow-y: auto;
list-style: none;
background: #fff;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-sm);
box-shadow: var(--musical-shadow-card);
}
.musical-suggest[hidden] {
display: none;
}
.musical-suggest__option {
padding: var(--musical-space-xs) var(--musical-space-sm);
border-radius: var(--musical-radius-sm);
color: var(--musical-text-primary);
cursor: pointer;
}
.musical-suggest__option:hover,
.musical-suggest__option.is-active {
background: var(--musical-bg-light);
color: var(--musical-primary-ink);
}
.musical-field--combobox {
position: relative;
}
.musical-genre-suggestions {
position: absolute;
z-index: 20;
inset-inline: 0;
top: 100%;
max-height: 15rem;
margin: var(--musical-space-xs) 0 0;
padding: var(--musical-space-xs);
overflow-y: auto;
list-style: none;
background: #fff;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-sm);
box-shadow: var(--musical-shadow-card);
}
.musical-genre-suggestions__option {
padding: var(--musical-space-xs) var(--musical-space-sm);
border-radius: var(--musical-radius-sm);
color: var(--musical-text-primary);
cursor: pointer;
}
.musical-genre-suggestions__option:hover,
.musical-genre-suggestions__option.is-active {
background: var(--musical-bg-light);
color: var(--musical-primary-ink);
}
.musical-genre-filter {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
align-items: center;
margin: 0 0 var(--musical-space-lg);
color: var(--musical-text-secondary);
}
.musical-genre-filter .musical-link {
display: inline-flex;
align-items: center;
min-height: 48px;
padding-inline: var(--musical-space-xs);
}
@media (min-width: 48rem) {
.musical-genre-filter {
align-items: baseline;
}
.musical-genre-filter .musical-link {
min-height: 0;
padding-inline: 0;
}
}
.musical-track-card__title {
scroll-margin-top: 6rem;
}
.musical-genre-ai {
margin-top: calc(var(--musical-space-md) * -1);
}
.musical-genre-ai__button {
padding: 0;
font-family: inherit;
font-size: 0.875rem;
color: var(--musical-primary-ink);
text-decoration: underline;
text-underline-offset: 3px;
background: none;
border: 0;
cursor: pointer;
}
.musical-genre-ai__button:hover:not(:disabled) {
color: var(--musical-secondary-ink);
}
.musical-genre-ai__button:disabled {
color: var(--musical-text-secondary);
cursor: progress;
}
.musical-genre-ai__status {
margin: var(--musical-space-sm) 0 0;
font-size: 0.8125rem;
color: var(--musical-text-secondary);
}
.musical-genre-ai__list {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
margin: var(--musical-space-sm) 0 0;
padding: 0;
list-style: none;
}
.musical-genre-ai__chip {
padding: var(--musical-space-xs) var(--musical-space-md);
font-family: inherit;
font-size: 0.8125rem;
color: var(--musical-text-primary);
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
cursor: pointer;
transition: border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-genre-ai__chip::before {
content: "+ ";
color: var(--musical-primary-ink);
}
.musical-genre-ai__chip:hover:not(:disabled) {
border-color: var(--musical-primary-ink);
}
.musical-genre-ai__chip.is-chosen {
color: var(--musical-text-secondary);
cursor: default;
opacity: 0.6;
}
.musical-genre-ai__chip.is-chosen::before {
content: "✓ ";
}
@media (prefers-reduced-motion: reduce) {
.musical-genre-ai__chip {
transition: none;
}
}
.musical-genre-cloud {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm) var(--musical-space-lg);
align-items: baseline;
justify-content: center;
align-self: stretch;
}
.musical-genre-tag {
color: var(--musical-text-secondary);
font-family: var(--musical-font-display);
line-height: 1.2;
text-decoration: none;
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-genre-tag:hover,
.musical-genre-tag:focus-visible {
color: var(--musical-primary-ink);
text-decoration: underline;
}
.musical-genre-tag--1 { font-size: 0.875rem; }
.musical-genre-tag--2 { font-size: 1.0625rem; }
.musical-genre-tag--3 { font-size: 1.3125rem; }
.musical-genre-tag--4 { font-size: 1.625rem; }
.musical-genre-tag--5 { font-size: 2rem; }
.musical-playlist-hero {
display: grid;
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
gap: var(--musical-space-2xl);
align-items: start;
}
.musical-playlist-hero__art {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--musical-radius-lg);
overflow: hidden;
background: var(--musical-bg-dark);
box-shadow: var(--musical-shadow-lift);
}
.musical-playlist-hero__art img,
.musical-playlist-hero__art .musical-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.musical-playlist-hero__body {
display: flex;
flex-direction: column;
gap: var(--musical-space-md);
min-width: 0;
}
.musical-playlist-header__meta {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
align-items: center;
color: var(--musical-text-secondary);
margin: 0;
}
.musical-playlist-hero__now {
display: flex;
flex-direction: column;
gap: var(--musical-space-2xs, 0.25rem);
margin: var(--musical-space-sm) 0 0;
}
.musical-playlist-hero__now-label {
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-primary-ink);
}
.musical-playlist-hero__now-track {
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
}
.musical-playlist-hero__transport {
display: flex;
align-items: center;
gap: var(--musical-space-md);
}
.musical-playlist-hero__play {
width: 56px;
height: 56px;
flex: none;
}
.musical-playlist-hero__step {
width: 44px;
height: 44px;
flex: none;
color: var(--musical-text-primary);
}
.musical-playlist-hero__step svg {
width: 22px;
height: 22px;
fill: currentcolor;
}
.musical-playlist-hero__step:hover {
color: var(--musical-primary);
}
.musical-advance {
position: relative;
cursor: pointer;
}
.musical-advance__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.musical-advance:has(:focus-visible) {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-nowplaying .musical-advance:has(:focus-visible) {
outline-color: var(--musical-primary);
}
.musical-playlist-hero__shuffle,
.musical-playlist-hero__advance {
width: 40px;
height: 40px;
flex: none;
color: var(--musical-text-secondary);
}
.musical-playlist-hero__shuffle svg,
.musical-playlist-hero__advance svg {
width: 20px;
height: 20px;
fill: currentcolor;
}
.musical-playlist-hero__shuffle:hover,
.musical-playlist-hero__advance:hover {
color: var(--musical-text-primary);
}
.musical-playlist-hero__advance:has(:checked),
.musical-playlist-hero__shuffle[aria-pressed="true"] {
background: color-mix(in srgb, var(--musical-primary-ink) 18%, transparent);
color: var(--musical-primary-ink);
}
.musical-playlist-hero__volume {
margin-inline-start: auto;
}
.musical-playlist-hero__timeline {
margin-top: var(--musical-space-xs);
}
.musical-playlist-hero__wave {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
}
.musical-playlist-detail {
margin-top: var(--musical-space-2xl);
}
.musical-playlist-detail:empty {
display: none;
}
.musical-playlist-detail__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-md);
max-width: var(--musical-measure);
margin-inline: auto;
margin-block: 0;
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-playlist-detail__open {
color: var(--musical-primary-ink);
font-weight: 600;
}
.musical-playlist-detail > .musical-stack {
max-width: var(--musical-measure);
margin-inline: auto;
margin-block-start: var(--musical-space-2xl);
}
.musical-catalogue__transport {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
margin-block: var(--musical-space-lg) var(--musical-space-xl);
}
.musical-catalogue__transport .musical-btn {
padding-inline: var(--musical-space-md);
}
.musical-catalogue__transport .musical-catalogue__shuffle {
flex: none;
}
@media (min-width: 48rem) {
.musical-catalogue__transport .musical-btn {
padding-inline: var(--musical-space-xl);
}
}
.musical-catalogue__transport svg {
width: 20px;
height: 20px;
fill: currentcolor;
}
.musical-catalogue__step {
width: 48px;
height: 48px;
flex: none;
color: var(--musical-text-primary);
}
@media (min-width: 48rem) {
.musical-catalogue__step {
width: 44px;
height: 44px;
}
}
.musical-catalogue__step:hover {
color: var(--musical-primary);
}
.musical-statswitch {
margin-block-end: var(--musical-space-lg);
}
.musical-statswitch__label {
display: flex;
align-items: center;
gap: var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-primary);
min-height: 44px;
cursor: pointer;
}
.musical-statswitch__note {
margin: 0;
padding-inline-start: calc(18px + var(--musical-space-sm));
}
.musical-catalogue__shuffle[aria-pressed="true"] {
background: var(--musical-primary);
border-color: var(--musical-primary);
color: var(--musical-bg-dark);
}
.musical-chordsheet {
display: flex;
flex-direction: column;
gap: var(--musical-space-md);
container-type: inline-size;
}
.musical-chordsheet__image {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin-inline: auto;
border-radius: var(--musical-radius-md);
background: var(--musical-bg-light);
}
.musical-chordsheet__frame {
display: block;
width: 100%;
height: calc(100cqw * 1.414 + 3.5rem);
min-height: 24rem;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
background: var(--musical-bg-light);
}
.musical-panels__panel > * + .musical-chordsheet {
margin-block-start: var(--musical-space-xl);
}
.musical-chordsheet__fallback {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
color: var(--musical-text-secondary);
}
.musical-chordsheet__actions {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
margin: 0;
}
.musical-order {
margin-block-end: var(--musical-space-xl);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
}
.musical-order__summary {
padding: var(--musical-space-md);
cursor: pointer;
font-family: var(--musical-font-body);
font-weight: 600;
min-height: 44px;
}
.musical-order__body {
padding: 0 var(--musical-space-md) var(--musical-space-md);
}
.musical-order__note {
margin: 0 0 var(--musical-space-md);
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-order .musical-order__pin[aria-pressed="true"],
.musical-order .musical-order__pin[aria-pressed="true"]:hover {
background: rgb(0 122 122 / 12%);
border-color: transparent;
color: var(--musical-primary-ink);
}
.musical-order__pin-note {
font-family: var(--musical-font-body);
font-size: 0.8125rem;
color: var(--musical-text-secondary);
white-space: nowrap;
}
@media (max-width: 29.99rem) {
.musical-order__pin [data-musical-pin-label] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
}
.musical-replace__current {
margin: 0 0 var(--musical-space-sm);
color: var(--musical-text-secondary);
}
.musical-replace__filename {
font-family: var(--musical-font-mono);
font-size: 0.8125rem;
color: var(--musical-text-primary);
overflow-wrap: anywhere;
}
.musical-replace__note {
margin: 0 0 var(--musical-space-md);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-replace__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-md);
}
.musical-replace__status {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
}
.musical-replace__status.is-error {
color: var(--musical-error-ink);
}
.musical-replace__status.is-success {
color: var(--musical-primary-ink);
}
.musical-polish__note {
margin: 0 0 var(--musical-space-md);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-polish__run {
display: grid;
gap: var(--musical-space-sm);
}
.musical-polish__runs {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.75rem;
color: var(--musical-text-secondary);
}
.musical-polish__status {
margin: var(--musical-space-sm) 0 0;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
}
.musical-polish__status.is-error {
color: var(--musical-error-ink);
}
.musical-polish__status.is-success {
color: var(--musical-primary-ink);
}
.musical-polish__measured {
margin: 0 0 var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-polish__ab {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
}
.musical-polish__side {
min-height: 40px;
padding: 0 var(--musical-space-md);
border: 0;
border-radius: var(--musical-radius-pill);
background: var(--musical-bg-light);
box-shadow: inset 0 0 0 1px var(--musical-border);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
font-weight: 600;
color: var(--musical-text-primary);
cursor: pointer;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-polish__side[aria-pressed="true"] {
background: var(--musical-primary-ink);
color: var(--musical-text-light);
box-shadow: none;
}
.musical-polish__play {
min-height: 40px;
padding-block: 0;
}
.musical-polish__time {
font-family: var(--musical-font-mono);
font-size: 0.8125rem;
color: var(--musical-text-secondary);
font-variant-numeric: tabular-nums;
}
.musical-polish__actions,
.musical-polish__revert {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-md);
}
.musical-polish__revert .musical-polish__note {
flex-basis: 100%;
margin-block-end: 0;
}
.musical-stems [hidden] {
display: none;
}
.musical-stems__lead,
.musical-stems__note,
.musical-stems__allowance,
.musical-stems__levels,
.musical-stems__status {
max-width: 40rem;
margin: 0 0 var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.5;
color: var(--musical-text-primary);
}
.musical-stems__note {
margin-block-end: var(--musical-space-md);
}
.musical-stems__run {
display: grid;
justify-items: start;
gap: var(--musical-space-sm);
}
.musical-stems__run > p {
margin: 0;
}
.musical-stems__allowance {
font-size: 0.8125rem;
}
.musical-stems__status {
margin-block-start: var(--musical-space-sm);
font-weight: 600;
}
.musical-stems__status.is-error {
color: var(--musical-error-ink);
}
.musical-stems__banner {
max-width: 40rem;
margin: var(--musical-space-sm) 0;
padding: var(--musical-space-sm) var(--musical-space-md);
border-radius: var(--musical-radius-sm);
background: var(--musical-warning);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.4;
color: var(--musical-text-primary);
}
.musical-stems__transport {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm) var(--musical-space-md);
margin-block-end: var(--musical-space-md);
}
.musical-stems__seek,
.musical-stems__volume {
appearance: none;
height: 44px;
margin: 0;
background: transparent;
cursor: pointer;
}
.musical-stems__seek {
flex: 1 1 8rem;
min-width: 0;
--musical-progress: 0%;
}
.musical-stems__time {
min-width: 2.5rem;
font-family: var(--musical-font-mono);
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
color: var(--musical-text-primary);
}
.musical-stems__practice,
.musical-stems__toggle {
min-height: 44px;
padding: 0 var(--musical-space-md);
border: 1px solid rgb(0 0 0 / 16%);
border-radius: var(--musical-radius-pill);
background: var(--musical-bg-light);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
cursor: pointer;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-stems__practice:hover,
.musical-stems__toggle:hover {
border-color: var(--musical-primary-ink);
}
.musical-stems__practice[aria-pressed="true"],
.musical-stems__toggle[aria-pressed="true"] {
border-color: var(--musical-primary-ink);
background: var(--musical-primary-ink);
color: var(--musical-text-light);
}
.musical-stems__practice:focus-visible,
.musical-stems__toggle:focus-visible,
.musical-stems__download:focus-visible,
.musical-stems__seek:focus-visible,
.musical-stems__volume:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-stems__list {
display: grid;
gap: var(--musical-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.musical-stems__stem {
display: grid;
grid-template-columns: minmax(7rem, 1fr) auto auto minmax(5rem, 9rem) auto;
align-items: center;
gap: var(--musical-space-sm);
padding: var(--musical-space-sm) var(--musical-space-md);
border: 1px solid rgb(0 0 0 / 10%);
border-radius: var(--musical-radius-md);
background: var(--musical-bg-light);
}
.musical-stems__stem.is-failed {
border-color: var(--musical-error-ink);
}
.musical-stems__stem.is-failed .musical-stems__name {
color: var(--musical-error-ink);
}
.musical-stems__name {
min-width: 0;
font-family: var(--musical-font-body);
font-size: 0.9375rem;
font-weight: 600;
color: var(--musical-text-primary);
overflow-wrap: anywhere;
}
.musical-stems__volume {
flex: none;
width: 100%;
--musical-progress: 100%;
}
.musical-stems__seek::-webkit-slider-runnable-track,
.musical-stems__volume::-webkit-slider-runnable-track {
height: 4px;
border-radius: var(--musical-radius-pill);
background: linear-gradient(
to right,
var(--musical-primary-ink) 0 var(--musical-progress),
var(--musical-text-secondary) var(--musical-progress) 100%
);
}
.musical-stems__seek::-moz-range-track,
.musical-stems__volume::-moz-range-track {
height: 4px;
border-radius: var(--musical-radius-pill);
background: var(--musical-text-secondary);
}
.musical-stems__seek::-moz-range-progress,
.musical-stems__volume::-moz-range-progress {
height: 4px;
border-radius: var(--musical-radius-pill);
background: var(--musical-primary-ink);
}
.musical-stems__seek::-webkit-slider-thumb,
.musical-stems__volume::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
margin-top: -4px;
border: 0;
border-radius: 50%;
background: var(--musical-tertiary);
box-shadow: 0 1px 4px rgb(0 0 0 / 40%);
}
.musical-stems__seek::-moz-range-thumb,
.musical-stems__volume::-moz-range-thumb {
width: 12px;
height: 12px;
border: 0;
border-radius: 50%;
background: var(--musical-tertiary);
}
.musical-stems__download {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding-inline: var(--musical-space-xs);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-stems__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-md);
}
@media (max-width: 30rem) {
.musical-stems__transport {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"play time"
"seek seek"
"practice practice";
}
.musical-stems__play { grid-area: play; }
.musical-stems__time { grid-area: time; justify-self: end; }
.musical-stems__seek {
grid-area: seek;
width: 100%;
}
.musical-stems__practice {
grid-area: practice;
justify-self: start;
}
.musical-stems__stem {
grid-template-columns: auto auto minmax(0, 1fr);
grid-template-areas:
"name name download"
"mute solo volume";
}
.musical-stems__name { grid-area: name; }
.musical-stems__download { grid-area: download; justify-self: end; }
.musical-stems__stem > [data-musical-stems-mute] { grid-area: mute; }
.musical-stems__stem > [data-musical-stems-solo] { grid-area: solo; }
.musical-stems__stem > [data-musical-stems-volume] { grid-area: volume; }
}
.musical-ai-cover {
display: grid;
gap: var(--musical-space-md);
}
.musical-ai-cover [hidden] {
display: none;
}
.musical-ai-cover__form {
display: grid;
justify-items: start;
gap: var(--musical-space-md);
}
.musical-ai-cover__form .musical-field {
justify-self: stretch;
}
.musical-ai-cover p {
margin: 0;
}
.musical-ai-cover .musical-caption {
max-width: 40rem;
font-size: 0.8125rem;
line-height: 1.45;
letter-spacing: 0;
color: #5f5f5f;
}
.musical-ai-cover .musical-caption + .musical-caption {
margin-block-start: calc(var(--musical-space-xs) - var(--musical-space-md));
}
.musical-ai-cover__status {
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.45;
color: var(--musical-text-primary);
}
.musical-ai-cover__status.is-error {
color: var(--musical-error-ink);
}
.musical-ai-cover__status.is-success {
color: var(--musical-primary-ink);
}
.musical-ai-cover__status:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
border-radius: var(--musical-radius-sm);
}
.musical-ai-cover__canvas {
position: relative;
width: 100%;
max-width: 240px;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--musical-radius-md);
background: #f4efe4;
}
.musical-ai-cover__canvas video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-ai-cover__canvas video.is-front {
opacity: 1;
}
.musical-ai-cover__result {
display: grid;
gap: var(--musical-space-md);
}
.musical-ai-cover__result img {
display: block;
width: 100%;
max-width: 240px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--musical-radius-md);
background: #fff;
}
.musical-ai-cover__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
}
.musical-cover-words {
display: grid;
gap: var(--musical-space-md);
container-type: inline-size;
container-name: musical-cover-words;
}
.musical-cover-words [hidden] {
display: none;
}
@container musical-cover-words (min-width: 36rem) {
.musical-cover-words {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--musical-space-lg);
}
.musical-cover-words > * {
grid-column: 1;
}
.musical-cover-words > .musical-cover-words__lede,
.musical-cover-words > .musical-cover-words__quick {
grid-column: 1 / -1;
}
.musical-cover-words > .musical-cover-words__side {
grid-column: 2;
grid-row: 3 / span 2;
width: 240px;
position: sticky;
top: var(--musical-space-md);
align-self: start;
}
}
.musical-cover-words__side {
display: grid;
gap: var(--musical-space-sm);
min-width: 0;
}
.musical-cover-words__quick,
.musical-cover-words__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
}
.musical-cover-words__block {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--musical-space-md);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.musical-cover-words__block + .musical-cover-words__block {
padding-block-start: var(--musical-space-md);
border-block-start: 1px solid var(--musical-border);
}
.musical-cover-words__choices {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-md);
}
.musical-cover-words__choice {
display: grid;
gap: var(--musical-space-xs);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.musical-cover-words__choice legend {
padding: 0;
}
.musical-cover-words__options {
flex-wrap: wrap;
}
.musical-cover-words__option {
padding-inline: var(--musical-space-sm);
}
.musical-cover-words__drop,
.musical-cover-words__more {
justify-self: start;
}
.musical-cover-words__preview {
display: grid;
gap: var(--musical-space-xs);
margin: 0;
}
.musical-cover-words .musical-caption {
max-width: 40rem;
margin: 0;
font-size: 0.8125rem;
line-height: 1.45;
letter-spacing: 0;
}
.musical-cover-words__preview img {
display: block;
width: 100%;
max-width: 240px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--musical-radius-md);
background: #fff;
}
.musical-cover-words__status {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.45;
color: var(--musical-text-primary);
}
.musical-cover-words__status.is-error {
color: var(--musical-error-ink);
}
.musical-cover-words__status.is-success {
color: var(--musical-primary-ink);
}
.musical-cover-words__status:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
border-radius: var(--musical-radius-sm);
}
.musical-playlist-order {
margin-top: var(--musical-space-3xl);
}
.musical-playlist-tracks {
list-style: none;
margin: var(--musical-space-lg) 0 0;
padding: 0;
}
.musical-playlist-share {
margin-top: var(--musical-space-3xl);
padding-top: var(--musical-space-xl);
border-top: 1px solid var(--musical-border);
}
.musical-playlist-share__lede {
margin: var(--musical-space-xs) 0 var(--musical-space-lg);
color: var(--musical-text-secondary);
}
@media (max-width: 63.9375rem) {
.musical-playlist-hero {
grid-template-columns: minmax(0, 1fr);
gap: var(--musical-space-xl);
}
.musical-playlist-hero__art {
max-width: 20rem;
}
}
.musical-playlist-track {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: var(--musical-space-md);
align-items: center;
padding: 0;
border-bottom: 1px solid var(--musical-border);
}
.musical-playlist-track .musical-track-card--list {
border-block-end: 0;
}
.musical-playlist-track__index {
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
text-align: right;
}
.musical-playlist-track--hidden {
opacity: 0.62;
}
.musical-playlist-track__notice {
grid-column: 2;
margin: 0;
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-playlist-track[aria-current="true"] .musical-playlist-track__index {
color: var(--musical-primary-ink);
}
@media (max-width: 480px) {
.musical-playlist-track {
grid-template-columns: 1.75rem 1fr;
gap: var(--musical-space-sm);
}
}
.musical-playlist-manager__list {
list-style: none;
margin: var(--musical-space-lg) 0 0;
padding: 0;
display: grid;
gap: var(--musical-space-sm);
}
.musical-playlist-manager__item {
padding: var(--musical-space-sm) var(--musical-space-lg);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
background: var(--musical-bg-light);
}
.musical-playlist-manager__fold > summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: var(--musical-space-sm);
align-items: center;
min-height: 44px;
cursor: pointer;
list-style: none;
}
.musical-playlist-manager__fold > summary::-webkit-details-marker {
display: none;
}
.musical-playlist-manager__fold > summary:hover .musical-playlist-manager__title {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-playlist-manager__body {
padding-block: var(--musical-space-md) var(--musical-space-sm);
}
.musical-playlist-manager__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-lg);
padding-block-start: var(--musical-space-md);
border-top: 1px solid var(--musical-border);
}
.musical-playlist-manager__title {
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.musical-playlist-manager__count {
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
white-space: nowrap;
}
.musical-playlist-create {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
align-items: flex-end;
}
.musical-playlist-editor__rows,
.musical-order__rows {
list-style: none;
margin: var(--musical-space-md) 0;
padding: 0;
}
.musical-playlist-editor__row,
.musical-order__row {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
align-items: center;
padding: var(--musical-space-sm);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-sm);
margin-bottom: var(--musical-space-xs);
background: var(--musical-bg-light);
}
.musical-playlist-editor__handle,
.musical-order__handle {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
cursor: grab;
color: var(--musical-text-secondary);
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.musical-playlist-editor__handle svg,
.musical-order__handle svg {
width: 18px;
height: 18px;
fill: currentcolor;
}
@media (any-pointer: coarse) {
.musical-playlist-editor__handle,
.musical-order__handle {
width: 44px;
height: 44px;
}
}
@media (hover: hover) and (pointer: fine) {
.musical-playlist-editor__row[data-musical-carry],
.musical-order__row[data-musical-carry] {
cursor: grab;
-webkit-user-select: none;
user-select: none;
}
}
.musical-order-btn__icon {
display: none;
}
.musical-order-btn__icon svg {
width: 20px;
height: 20px;
fill: currentcolor;
}
.musical-order-btn__icon--down svg {
transform: rotate(180deg);
}
.musical-playlist-editor__title,
.musical-order__title {
flex: 1 1 12rem;
min-width: 0;
}
.musical-playlist-editor__add {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
align-items: flex-end;
}
@media (max-width: 480px) {
.musical-playlist-editor__row > *,
.musical-order__row > * {
order: 2;
}
.musical-playlist-editor__row > .musical-playlist-editor__title,
.musical-order__row > .musical-order__title,
.musical-playlist-editor__row > .musical-badge,
.musical-order__row > .musical-badge {
order: 0;
}
.musical-playlist-editor__title,
.musical-order__title {
flex: 1 1 0;
}
.musical-playlist-editor__row::after,
.musical-order__row::after {
content: "";
order: 1;
flex-basis: 100%;
height: 0;
}
.musical-playlist-editor__row,
.musical-order__row {
position: relative;
padding-inline-end: calc(44px + var(--musical-space-sm));
}
.musical-playlist-editor__handle,
.musical-order__handle {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
width: 44px;
height: auto;
}
.musical-playlist-editor__row .musical-btn:has(> .musical-order-btn__icon),
.musical-order__row .musical-btn:has(> .musical-order-btn__icon) {
width: 44px;
min-height: 44px;
padding: 0;
}
.musical-order-btn__icon {
display: inline-flex;
}
.musical-order-btn__icon + .musical-order-btn__text {
display: none;
}
}
.musical-artist-body {
align-items: stretch;
}
.musical-artist-body > :first-child .musical-catalogue {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.musical-catalogue {
margin-top: var(--musical-space-3xl);
padding-top: var(--musical-space-2xl);
border-top: 1px solid var(--musical-border);
}
.musical-catalogue__head {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-md);
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--musical-space-lg);
}
@media (min-width: 48rem) {
.musical-catalogue__head {
margin-bottom: var(--musical-space-xl);
}
}
.musical-catalogue__heading {
margin: 0;
}
.musical-viewswitch {
display: inline-flex;
gap: var(--musical-space-xs);
padding: var(--musical-space-xs);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
background: var(--musical-bg-light);
}
.musical-viewswitch__option {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 var(--musical-space-lg);
border-radius: var(--musical-radius-pill);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-secondary);
text-decoration: none;
white-space: nowrap;
transition:
background var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-viewswitch__option:hover {
background: var(--musical-border);
color: var(--musical-text-primary);
}
@media (min-width: 48rem) {
.musical-viewswitch__option {
min-height: 44px;
}
}
@media (max-width: 30rem) {
.musical-viewswitch {
flex-wrap: wrap;
max-width: 100%;
}
.musical-viewswitch__option {
padding-inline: var(--musical-space-md);
}
}
.musical-hasfilter {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--musical-space-xs);
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-hasfilter__label {
margin-inline-end: var(--musical-space-xs);
}
.musical-hasfilter__option {
display: inline-flex;
align-items: center;
gap: 0.375rem;
min-height: 44px;
padding-inline: var(--musical-space-sm);
border-radius: var(--musical-radius-pill);
color: var(--musical-text-secondary);
text-decoration: none;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-hasfilter__option svg {
width: 18px;
height: 18px;
fill: currentcolor;
}
.musical-hasfilter__option:hover {
color: var(--musical-text-primary);
}
.musical-hasfilter__option:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: -2px;
}
.musical-hasfilter__option.is-current {
background: rgb(0 122 122 / 10%);
color: var(--musical-primary-ink);
font-weight: 600;
}
.musical-mixstart {
display: inline-flex;
align-items: center;
gap: 0.375rem;
min-height: 44px;
padding-block: 0;
padding-inline: 0.75rem var(--musical-space-md);
border: 0;
border-radius: var(--musical-radius-pill);
background: none;
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
cursor: pointer;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-mixstart[hidden],
.musical-mixall[hidden] {
display: none;
}
.musical-mixstart svg {
width: 18px;
height: 18px;
fill: currentcolor;
}
.musical-mixstart:hover {
color: var(--musical-text-primary);
}
.musical-mixstart:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: -2px;
}
.musical-mixstart[aria-pressed="true"] {
background: rgb(0 122 122 / 10%);
color: var(--musical-primary-ink);
font-weight: 600;
}
.musical-mixall {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-is-mixing .musical-track-card .musical-share-btn:not(.musical-mix-pick),
.musical-is-mixing .musical-artist-directory__item .musical-share-btn:not(.musical-mix-pick) {
display: none;
}
.musical-mix-pick {
width: 44px;
height: 44px;
background: none;
box-shadow: none;
}
.musical-mix-pick > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: inset 0 0 0 1.5px currentcolor;
pointer-events: none;
}
.musical-mix-pick svg {
width: 16px;
height: 16px;
}
.musical-mix-pick > .musical-mix-pick__in,
.musical-mix-pick[aria-pressed="true"] > .musical-mix-pick__add {
display: none;
}
.musical-mix-pick[aria-pressed="true"] > .musical-mix-pick__in {
display: inline-flex;
background: #005a5a;
color: #fff;
box-shadow: none;
}
.musical-mix-pick[aria-pressed="true"],
.musical-mix-pick[aria-pressed="true"]:hover {
background: none;
}
.musical-is-mixing body {
padding-block-end: calc(var(--musical-nowplaying-height, 0px) + var(--musical-mixbar-height, 0px));
}
.musical-mixbar {
position: fixed;
z-index: 790;
inset-inline: 0;
inset-block-end: var(--musical-nowplaying-height, 0px);
border-block-start: 1px solid var(--musical-border);
background: #fff;
box-shadow: 0 -8px 24px rgb(0 0 0 / 8%);
}
.musical-mixbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm) var(--musical-space-md);
max-width: 75rem;
margin-inline: auto;
padding: var(--musical-space-sm) var(--musical-space-lg);
}
.musical-mixbar__count {
flex: 1 1 12rem;
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.9375rem;
color: var(--musical-text-secondary);
}
.musical-mixbar__title {
margin-inline-end: var(--musical-space-sm);
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-mixbar .musical-btn {
min-height: 44px;
padding-inline: var(--musical-space-lg);
white-space: nowrap;
}
.musical-mixbar [aria-disabled="true"] {
opacity: 0.45;
cursor: default;
}
@media (max-width: 30rem) {
.musical-mixbar__inner {
padding-inline: var(--musical-space-md);
}
.musical-mixbar__count {
flex-basis: 100%;
}
.musical-mixbar .musical-btn {
flex: 1 1 auto;
padding-inline: var(--musical-space-md);
}
}
.musical-mixpill {
position: fixed;
z-index: 780;
inset-inline-end: var(--musical-space-lg);
inset-block-end: calc(var(--musical-space-lg) + var(--musical-nowplaying-height, 0px));
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
min-height: 44px;
padding-block: 0;
padding-inline: var(--musical-space-md) 0.625rem;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
background: #fff;
box-shadow: var(--musical-shadow-lift);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
text-decoration: none;
animation: musical-rise var(--musical-duration-smooth) var(--musical-easing-out) both;
transition:
border-color var(--musical-duration-quick) var(--musical-easing-out),
inset-block-end var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-mixpill svg {
width: 18px;
height: 18px;
fill: var(--musical-primary-ink);
}
.musical-mixpill:hover {
border-color: var(--musical-primary-ink);
}
.musical-mixpill:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-mixpill__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding-inline: 0.375rem;
border-radius: var(--musical-radius-pill);
background: var(--musical-primary-ink);
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: #fff;
}
.musical-has-mixpill .musical-footer {
padding-block-end: calc(44px + 2 * var(--musical-space-lg));
}
.musical-has-mixpill .musical-toasts {
inset-block-end: calc(var(--musical-space-lg) + var(--musical-nowplaying-height, 0px) + 44px + var(--musical-space-sm));
}
@media (max-width: 30rem) {
.musical-mixpill {
inset-inline-end: var(--musical-space-md);
inset-block-end: calc(var(--musical-space-md) + var(--musical-nowplaying-height, 0px));
}
.musical-has-mixpill .musical-toasts {
inset-block-end: calc(var(--musical-space-md) + var(--musical-nowplaying-height, 0px) + 44px + var(--musical-space-sm));
}
}
@media (prefers-reduced-motion: reduce) {
.musical-mixpill {
animation: none;
transition: none;
}
}
@media print {
.musical-mixpill {
display: none;
}
}
.musical-mix {
width: 100%;
}
.musical-mix__summary {
margin-block-end: var(--musical-space-md);
}
.musical-mix__actions {
display: flex;
gap: var(--musical-space-sm);
margin-block-start: var(--musical-space-xl);
}
.musical-mix__actions > .musical-btn {
flex: 1 1 0;
min-width: 0;
padding-inline: var(--musical-space-sm);
line-height: 1.2;
text-align: center;
}
.musical-mix__actions > [hidden] {
display: none;
}
.musical-mix__actions > [data-musical-mix-edit][aria-pressed="true"] {
background: rgb(0 122 122 / 10%);
color: var(--musical-primary-ink);
box-shadow: inset 0 0 0 1px var(--musical-primary-ink);
}
@media (min-width: 48rem) {
.musical-mix__actions > .musical-btn {
flex: none;
padding-inline: var(--musical-space-xl);
}
.musical-mix__actions > [data-musical-mix-clear] {
margin-inline-start: auto;
}
}
.musical-is-mix-editing .musical-mix .musical-track-card .musical-share-btn {
display: none;
}
.musical-mix-edit {
position: relative;
z-index: 2;
display: inline-flex;
flex: none;
align-items: center;
}
.musical-is-mix-editing .musical-mix .musical-track-card .musical-track-card__meta > .musical-mix-edit.musical-mix-edit::before {
content: none;
}
.musical-mix-edit__btn {
width: 44px;
height: 44px;
background: none;
box-shadow: none;
color: var(--musical-text-secondary);
}
.musical-mix-edit__btn:hover:not(:disabled) {
color: var(--musical-text-primary);
}
.musical-mix-edit__btn:disabled {
opacity: 0.3;
cursor: default;
}
.musical-mix-edit__btn[data-musical-mix-move="down"] svg {
transform: rotate(180deg);
}
@media (max-width: 30rem) {
.musical-is-mix-editing .musical-mix .musical-track-card--list .musical-track-card__body {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas:
"title title grip"
"meta  btns  grip";
}
.musical-is-mix-editing .musical-mix .musical-mix-edit {
display: contents;
}
.musical-is-mix-editing .musical-mix .musical-mix-edit__btns {
position: relative;
z-index: 2;
grid-area: btns;
}
.musical-is-mix-editing .musical-mix .musical-mix-edit__grip {
position: relative;
z-index: 2;
grid-area: grip;
align-self: stretch;
height: auto;
}
.musical-is-mix-editing .musical-mix .musical-track-card--list .musical-track-card__meta > a,
.musical-is-mix-editing .musical-mix .musical-track-card__marks,
.musical-is-mix-editing .musical-mix .musical-track-card__rating {
display: none;
}
}
.musical-mix-edit__grip {
display: none;
align-items: center;
justify-content: center;
width: 24px;
height: 44px;
color: var(--musical-text-secondary);
opacity: 0.5;
transition: opacity var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-mix-edit__grip svg {
width: 18px;
height: 18px;
fill: currentcolor;
}
.musical-mix-edit__btns {
display: inline-flex;
align-items: center;
}
.musical-is-mix-editing .musical-mix [data-musical-carry] .musical-mix-edit__grip {
display: inline-flex;
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
@media (any-pointer: coarse) {
.musical-mix-edit__grip {
width: 44px;
opacity: 0.75;
}
}
@media (hover: hover) and (pointer: fine) {
.musical-is-mix-editing .musical-mix [data-musical-carry] {
cursor: grab;
-webkit-user-select: none;
user-select: none;
}
.musical-is-mix-editing .musical-mix [data-musical-carry]:hover .musical-mix-edit__grip {
opacity: 1;
}
.musical-is-mix-editing .musical-mix [data-musical-carry] .musical-track-card__link::after {
content: none;
}
}
.musical-is-carrying,
.musical-is-carrying * {
cursor: grabbing !important;
-webkit-user-select: none;
user-select: none;
}
[data-musical-carry].is-lifted {
border-color: transparent;
border-radius: var(--musical-radius-md);
background: rgb(0 122 122 / 6%);
outline: 2px dashed rgb(0 90 90 / 35%);
outline-offset: -2px;
}
[data-musical-carry].is-lifted > * {
visibility: hidden;
}
.musical-carry-lift.musical-carry-lift {
position: fixed;
z-index: 880;
margin: 0;
border-radius: var(--musical-radius-md);
background: #fff;
box-shadow: 0 14px 36px rgb(0 0 0 / 22%), 0 0 0 1px var(--musical-border);
opacity: 1;
pointer-events: none;
transition: none;
will-change: transform;
}
.musical-carry-lift .musical-mix-edit__grip {
display: inline-flex;
opacity: 1;
}
.musical-mix__editnote {
margin-block: 0 var(--musical-space-md);
}
.musical-mix__editnote[hidden] {
display: none;
}
.musical-mix__empty {
display: grid;
gap: var(--musical-space-sm);
justify-items: start;
max-width: 40rem;
}
.musical-viewcontrols,
.musical-artist-directory__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-xs) var(--musical-space-md);
}
.musical-viewswitch__option.is-current {
background: var(--musical-text-primary);
color: var(--musical-text-light);
}
.brxe-musical-view-switch {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-md);
}
.musical-catalogue__controls {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-md);
align-items: center;
}
.musical-groupswitch {
display: inline-flex;
padding: var(--musical-space-xs);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
background: var(--musical-bg-light);
}
.musical-groupswitch__option {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 var(--musical-space-lg);
border-radius: var(--musical-radius-pill);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-secondary);
text-decoration: none;
white-space: nowrap;
transition:
background var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-groupswitch__option:hover {
background: var(--musical-border);
color: var(--musical-text-primary);
}
@media (min-width: 48rem) {
.musical-groupswitch__option {
min-height: 44px;
}
}
@media (max-width: 30rem) {
.musical-groupswitch__option {
padding-inline: var(--musical-space-md);
}
}
.musical-groupswitch__option.is-current {
background: var(--musical-text-primary);
color: var(--musical-text-light);
}
.musical-catalogue__more {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-md);
align-items: center;
justify-content: center;
margin: var(--musical-space-2xl) 0 0;
}
.musical-catalogue__count {
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-catalogue__groups {
display: flex;
flex-direction: column;
gap: var(--musical-space-3xl);
}
.musical-group__head {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm) var(--musical-space-md);
align-items: baseline;
justify-content: space-between;
padding-bottom: var(--musical-space-sm);
margin-bottom: var(--musical-space-lg);
border-bottom: 1px solid var(--musical-border);
}
.musical-group__title {
margin: 0;
}
.musical-group__title a {
color: inherit;
text-decoration: none;
}
.musical-group__title a:hover {
color: var(--musical-primary-ink);
text-decoration: underline;
}
.musical-group__meta {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-md);
align-items: center;
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-group .musical-catalogue__transport {
margin-block: 0 var(--musical-space-lg);
}
.musical-artist-about__heading {
margin: 0 0 var(--musical-space-lg);
}
.musical-artist-about__genres {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
list-style: none;
margin: 0;
padding: 0;
}
.musical-genre-chip {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 var(--musical-space-lg);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
text-decoration: none;
transition:
background var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-genre-chip:hover {
border-color: var(--musical-primary-ink);
color: var(--musical-primary-ink);
}
.musical-genre-chip:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
@media (min-width: 48rem) {
.musical-genre-chip {
min-height: 44px;
}
}
.musical-nowplaying {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 800;
background: var(--musical-bg-dark);
color: var(--musical-text-light);
box-shadow: var(--musical-shadow-lift);
border-block-start: 1px solid rgb(245 245 245 / 10%);
transform: translateY(0);
transition:
transform var(--musical-duration-smooth) var(--musical-easing-out),
overlay var(--musical-duration-smooth) allow-discrete,
display var(--musical-duration-smooth) allow-discrete;
}
.musical-nowplaying[hidden] {
display: none;
transform: translateY(100%);
}
@starting-style {
.musical-nowplaying:not([hidden]) {
transform: translateY(100%);
}
}
.musical-nowplaying__inner {
display: flex;
align-items: center;
gap: var(--musical-space-md);
max-width: 75rem;
margin-inline: auto;
padding: var(--musical-space-sm) var(--musical-space-lg);
}
.musical-nowplaying__art {
flex: 0 0 auto;
display: block;
width: 48px;
height: 48px;
border-radius: var(--musical-radius-md);
overflow: hidden;
background: rgb(245 245 245 / 8%);
}
.musical-nowplaying__art img,
.musical-nowplaying__art svg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.musical-nowplaying__meta {
flex: 0 1 14rem;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.musical-nowplaying__title,
.musical-nowplaying__artist {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
}
.musical-nowplaying__title {
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-light);
}
.musical-nowplaying__artist {
font-family: var(--musical-font-body);
font-size: 0.8125rem;
color: rgb(245 245 245 / 75%);
}
.musical-nowplaying__title:hover,
.musical-nowplaying__artist:hover {
text-decoration: underline;
}
.musical-nowplaying__transport {
display: flex;
align-items: center;
gap: var(--musical-space-xs);
flex: 0 0 auto;
}
.musical-nowplaying__break {
display: none;
}
.musical-nowplaying [hidden] {
display: none;
}
.musical-nowplaying__step,
.musical-nowplaying__shuffle,
.musical-nowplaying__advance,
.musical-nowplaying__skip {
width: 40px;
height: 40px;
flex: none;
color: rgb(245 245 245 / 75%);
}
.musical-nowplaying__step svg,
.musical-nowplaying__shuffle svg,
.musical-nowplaying__advance svg,
.musical-nowplaying__skip svg {
width: 20px;
height: 20px;
fill: currentcolor;
}
.musical-nowplaying__step:hover,
.musical-nowplaying__shuffle:hover,
.musical-nowplaying__advance:hover,
.musical-nowplaying__skip:hover {
color: var(--musical-text-light);
}
.musical-nowplaying__advance:has(:checked),
.musical-nowplaying__shuffle[aria-pressed="true"] {
background: color-mix(in srgb, var(--musical-primary) 20%, transparent);
color: var(--musical-primary);
}
.musical-nowplaying__play {
width: 44px;
height: 44px;
}
.musical-nowplaying__play svg {
width: 20px;
height: 20px;
}
.musical-nowplaying__timeline {
flex: 1 1 auto;
min-width: 0;
}
.musical-nowplaying__wave {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.musical-nowplaying__wave.musical-waveform {
height: 2.25rem;
}
.musical-nowplaying__wave.musical-waveform .musical-seek::-webkit-slider-thumb {
height: 2.25rem;
}
.musical-nowplaying__wave.musical-waveform .musical-seek::-moz-range-thumb {
height: 2.25rem;
}
.musical-nowplaying__volume {
flex: 0 0 auto;
}
.musical-nowplaying__wave {
min-width: 6rem;
}
@media (max-width: 63.99rem) {
.musical-nowplaying__volume {
display: none;
}
}
@media (min-width: 48rem) and (max-width: 74.99rem) {
.musical-nowplaying__meta {
flex: 0 1 9rem;
}
.musical-nowplaying__volume .musical-volume {
flex: 0 1 4rem;
width: 4rem;
}
.musical-nowplaying__timeline .musical-player__time {
display: none;
}
}
body {
padding-block-end: var(--musical-nowplaying-height, 0px);
}
.musical-toasts {
inset-block-end: calc(var(--musical-space-lg) + var(--musical-nowplaying-height, 0px));
}
@media (max-width: 47.99rem) {
.musical-nowplaying__inner {
flex-wrap: wrap;
gap: var(--musical-space-sm);
padding: var(--musical-space-sm) var(--musical-space-md);
}
.musical-nowplaying__meta {
flex: 1 1 0;
}
.musical-nowplaying__timeline {
flex: 1 0 100%;
order: 3;
gap: var(--musical-space-xs);
}
.musical-nowplaying__art {
width: 40px;
height: 40px;
}
.musical-nowplaying__transport {
display: contents;
}
.musical-nowplaying__art { order: 1; }
.musical-nowplaying__meta { order: 2; }
.musical-nowplaying__step[data-musical-queue-prev] { order: 3; }
.musical-nowplaying__play { order: 4; }
.musical-nowplaying__step[data-musical-queue-next] { order: 5; }
.musical-nowplaying__restore { order: 6; }
.musical-nowplaying__break { order: 7; }
.musical-nowplaying__skip[data-musical-skip="-10"] { order: 8; }
.musical-nowplaying__timeline { order: 9; }
.musical-nowplaying__skip[data-musical-skip="10"] { order: 10; }
.musical-nowplaying__advance { order: 11; }
.musical-nowplaying__close { order: 12; }
.musical-nowplaying__break {
display: block;
flex: 0 0 100%;
height: 0;
}
.musical-nowplaying__timeline {
flex: 1 1 0;
min-width: 0;
}
.musical-nowplaying__shuffle {
display: none;
}
.musical-nowplaying__timeline .musical-player__time {
display: none;
}
.musical-nowplaying__step,
.musical-nowplaying__skip,
.musical-nowplaying__advance,
.musical-nowplaying__restore,
.musical-nowplaying__play {
width: 48px;
height: 48px;
}
}
.musical-nowplaying__minimize {
display: none;
}
@media (max-width: 47.99rem) {
.musical-nowplaying__minimize {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
inset-block-end: 100%;
inset-inline-start: 50%;
translate: -50% 0;
width: 56px;
height: 24px;
padding: 0;
border: 1px solid rgb(245 245 245 / 10%);
border-block-end: 0;
border-radius: var(--musical-radius-lg) var(--musical-radius-lg) 0 0;
background: var(--musical-bg-dark);
color: var(--musical-text-light);
cursor: pointer;
}
.musical-nowplaying__minimize::before {
content: "";
position: absolute;
inset: -24px 0 0;
}
.musical-nowplaying__minimize svg {
width: 20px;
height: 20px;
fill: currentcolor;
rotate: 180deg;
}
.musical-nowplaying.is-minimized {
inset-inline-start: auto;
inset-inline-end: var(--musical-space-md);
inset-block-end: var(--musical-space-md);
border: 1px solid rgb(245 245 245 / 10%);
border-radius: var(--musical-radius-pill);
}
.musical-nowplaying.is-minimized .musical-nowplaying__inner {
display: grid;
grid-template-columns: 48px 48px;
align-items: center;
gap: var(--musical-space-xs);
padding: var(--musical-space-xs);
}
.musical-nowplaying.is-minimized .musical-nowplaying__inner > :not(.musical-nowplaying__art, .musical-nowplaying__transport, .musical-nowplaying__minimize),
.musical-nowplaying.is-minimized .musical-nowplaying__transport > :not(.musical-nowplaying__play) {
display: none;
}
.musical-nowplaying.is-minimized .musical-nowplaying__art,
.musical-nowplaying.is-minimized .musical-nowplaying__play {
grid-area: 1 / 1;
width: 48px;
height: 48px;
border-radius: 50%;
}
.musical-nowplaying.is-minimized .musical-nowplaying__play {
background: rgb(26 26 26 / 65%);
color: var(--musical-text-light);
}
.musical-nowplaying.is-minimized .musical-nowplaying__minimize {
grid-area: 1 / 2;
position: static;
translate: none;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: transparent;
}
.musical-nowplaying.is-minimized .musical-nowplaying__minimize::before {
content: none;
}
.musical-nowplaying.is-minimized .musical-nowplaying__minimize svg {
rotate: none;
}
}
.musical-signup-guard {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.musical-turnstile {
min-height: 65px;
}
.musical-select {
width: 100%;
min-height: 48px;
padding: var(--musical-space-md);
padding-right: calc(var(--musical-space-md) * 2.5);
font-family: var(--musical-font-body);
font-size: 1rem;
line-height: 1.5;
color: var(--musical-text-primary);
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--musical-space-md) center;
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-sm);
appearance: none;
transition:
border-color var(--musical-duration-quick) var(--musical-easing-out),
box-shadow var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-select:focus {
border-color: var(--musical-primary-ink);
box-shadow: 0 0 0 3px rgb(0 122 122 / 15%);
outline: none;
}
.musical-contact {
align-self: stretch;
max-width: var(--musical-measure);
}
.musical-contact__panel {
padding: var(--musical-space-xl);
background: #fff;
border-radius: var(--musical-radius-lg);
box-shadow: var(--musical-shadow-card);
}
.musical-contact__notice {
margin: 0;
}
.musical-contact__notice--success {
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-success-ink);
}
.musical-spark {
position: absolute;
inset: auto 0 0 auto;
z-index: 2;
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
min-height: 48px;
max-width: calc(100% - (var(--musical-space-md) * 2));
padding: 0 var(--musical-space-md);
border: 0;
border-radius: var(--musical-radius-pill);
box-shadow: inset 0 0 0 1px rgb(245 245 245 / 22%);
background: rgb(26 26 26 / 72%);
backdrop-filter: blur(6px);
color: var(--musical-text-light);
white-space: nowrap;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
cursor: pointer;
transition:
background var(--musical-duration-quick) var(--musical-easing-out),
box-shadow var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out),
transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-spark__icon {
display: inline-flex;
width: 20px;
height: 20px;
}
.musical-spark__icon svg {
width: 100%;
height: 100%;
fill: currentcolor;
}
.musical-spark__count {
font-variant-numeric: tabular-nums;
opacity: 0.9;
padding-inline-start: var(--musical-space-xs);
border-inline-start: 1px solid rgb(245 245 245 / 25%);
margin-inline-start: var(--musical-space-xs);
}
.musical-spark:hover {
box-shadow: inset 0 0 0 1px rgb(245 245 245 / 70%);
}
.musical-spark:active {
transform: scale(0.98);
}
.musical-spark.is-sparked {
box-shadow: inset 0 0 0 2px var(--musical-primary);
background: color-mix(in srgb, var(--musical-primary) 20%, rgb(26 26 26 / 88%));
color: var(--musical-primary);
}
.musical-spark.is-sparked .musical-spark__icon {
transform: scale(1.15);
}
.musical-spark.is-sparked .musical-spark__count {
opacity: 1;
}
.musical-spark:focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 3px;
}
@keyframes musical-spark-pop {
50% {
transform: scale(1.4) rotate(12deg);
}
}
.musical-spark.is-sparking .musical-spark__icon {
animation: musical-spark-pop var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-invite {
max-width: var(--musical-measure);
margin-inline: auto;
margin-block: var(--musical-space-2xl);
padding: var(--musical-space-xl);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--musical-space-sm);
background: var(--musical-bg-light);
border-block-start: 3px solid var(--musical-tertiary);
border-radius: var(--musical-radius-md);
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-invite__body {
color: var(--musical-text-secondary);
}
.musical-invite__cta {
margin-block-start: var(--musical-space-xs);
}
.musical-invite__note {
color: var(--musical-text-secondary);
}
.musical-share__embed-summary {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
min-height: 44px;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
cursor: pointer;
list-style: none;
}
.musical-share__embed-summary::-webkit-details-marker {
display: none;
}
.musical-share__embed-summary:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-share__embed-summary:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
border-radius: var(--musical-radius-sm);
}
.musical-share__embed-chevron {
display: inline-flex;
flex: none;
transform: rotate(180deg);
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-share__embed-chevron svg {
width: 1em;
height: 1em;
}
.musical-share__embed[open] .musical-share__embed-chevron {
transform: rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
.musical-share__embed-chevron {
transition: none;
}
}
.musical-share__embed-body {
padding-block-start: var(--musical-space-xs);
}
.musical-share__embed .musical-share__snippet {
font-family: var(--musical-font-mono);
font-size: 0.8125rem;
}
.musical-section--media .musical-share__embed-summary {
color: var(--musical-text-light);
}
.musical-section--media .musical-share__embed-summary:hover {
color: var(--musical-primary);
}
.musical-section--media .musical-share__embed-summary:focus-visible {
outline-color: var(--musical-primary);
}
.musical-embed-btn[hidden] {
display: none;
}
.musical-compare table {
width: 100%;
border-collapse: collapse;
text-align: start;
}
.musical-compare caption {
caption-side: bottom;
padding-block-start: var(--musical-space-sm);
font-size: 0.875rem;
color: var(--musical-text-secondary);
text-align: start;
}
.musical-compare th,
.musical-compare td {
padding: var(--musical-space-sm) var(--musical-space-md);
vertical-align: top;
border-block-end: 1px solid var(--musical-border);
}
.musical-compare thead th {
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-compare tbody th {
font-weight: 600;
}
@media (max-width: 47.99rem) {
.musical-compare thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.musical-compare table {
display: flex;
flex-direction: column;
}
.musical-compare caption {
order: 1;
}
.musical-compare caption,
.musical-compare tbody,
.musical-compare tr,
.musical-compare th,
.musical-compare td {
display: block;
width: 100%;
}
.musical-compare tr {
padding-block: var(--musical-space-sm);
border-block-end: 1px solid var(--musical-border);
}
.musical-compare th,
.musical-compare td {
border: 0;
padding-block: var(--musical-space-xs);
}
.musical-compare td::before {
content: attr(data-label);
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
}
.musical-js .musical-compare.musical-reveal {
opacity: 1;
transform: none;
}
.musical-js .musical-compare.musical-reveal tbody tr {
opacity: 0.3;
}
.musical-js .musical-compare.musical-reveal.is-revealed tbody tr {
animation: musical-compare-settle var(--musical-duration-smooth)
var(--musical-easing-out) both;
}
@keyframes musical-compare-settle {
from {
opacity: 0.3;
}
to {
opacity: 1;
}
}
.musical-js .musical-compare.musical-reveal.is-revealed tbody tr:nth-child(2) {
animation-delay: 110ms;
}
.musical-js .musical-compare.musical-reveal.is-revealed tbody tr:nth-child(3) {
animation-delay: 220ms;
}
.musical-js .musical-compare.musical-reveal.is-revealed tbody tr:nth-child(4) {
animation-delay: 440ms;
}
@media (prefers-reduced-motion: reduce) {
.musical-js .musical-compare.musical-reveal tbody tr,
.musical-js .musical-compare.musical-reveal.is-revealed tbody tr:nth-child(n) {
opacity: 1;
animation: none;
}
}
.musical-faq {
display: grid;
gap: var(--musical-space-3xl);
}
.musical-faq__item {
display: grid;
gap: var(--musical-space-md);
scroll-margin-block-start: calc(64px + var(--musical-space-lg));
}
.musical-faq__answer > p + p {
margin-block-start: var(--musical-space-md);
}
.musical-faq__answer a {
color: var(--musical-primary-ink);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-faq__answer a:hover,
.musical-faq__answer a:focus-visible {
color: var(--musical-secondary-ink);
}
.musical-related-fields {
min-width: 0;
margin: 0;
padding: var(--musical-space-md);
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
display: grid;
gap: var(--musical-space-md);
}
.musical-related-fields__rows {
display: grid;
gap: var(--musical-space-md);
}
.musical-related-row {
position: relative;
min-width: 0;
margin: 0;
padding: var(--musical-space-md);
background: #fff;
border: 1px solid rgb(0 0 0 / 10%);
border-radius: var(--musical-radius-md);
display: grid;
gap: var(--musical-space-md);
}
.musical-related-row__head {
float: inline-start;
inline-size: 100%;
display: flex;
align-items: center;
gap: var(--musical-space-sm);
min-block-size: 44px;
margin: 0;
padding: 0 7rem 0 0;
font-family: var(--musical-font-display);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
}
.musical-related-row__head + * {
clear: both;
}
.musical-related-row__portrait {
inline-size: 2rem;
block-size: 2rem;
border-radius: 50%;
object-fit: cover;
flex: none;
}
.musical-related-row__name {
min-width: 0;
overflow-wrap: anywhere;
}
.musical-related-row:not(:has(.musical-related-row__portrait)) .musical-related-row__name {
color: var(--musical-text-secondary);
font-weight: 500;
}
.musical-related-row .musical-field {
margin: 0;
}
.musical-related-fields .musical-related-row__remove {
position: absolute;
inset-block-start: var(--musical-space-md);
inset-inline-end: var(--musical-space-md);
}
.musical-related-row__connection .musical-input {
max-width: 24rem;
}
.musical-profile-link {
display: grid;
gap: var(--musical-space-sm);
}
.musical-profile-link__note .musical-field__label {
font-weight: 400;
color: var(--musical-text-secondary);
}
.musical-profile-link__note .musical-input {
max-width: 24rem;
}
@media (max-width: 40rem) {
.musical-related-row__head {
padding-inline-end: 3.5rem;
}
.musical-related-fields .musical-related-row__remove {
inline-size: 44px;
padding: 0;
}
.musical-related-row__remove-word {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.musical-versions {
display: grid;
gap: var(--musical-space-md);
}
.musical-versions__heading {
margin: 0;
}
.musical-versions__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--musical-space-sm);
}
.musical-versions__item {
display: grid;
gap: var(--musical-space-xs);
}
.musical-versions__link {
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
max-width: 100%;
color: var(--musical-primary-ink);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
text-underline-offset: 0.25em;
}
.musical-versions__cover {
flex: none;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--musical-radius-md);
overflow: hidden;
background: var(--musical-border);
display: grid;
place-items: center;
}
.musical-versions__cover img,
.musical-versions__cover svg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.musical-versions__cover--icon svg {
width: 1rem;
height: 1rem;
fill: currentColor;
}
.musical-versions__cover--link svg {
width: 1.25rem;
height: 1.25rem;
}
.musical-versions__text {
display: grid;
min-width: 0;
}
.musical-versions__title {
overflow-wrap: anywhere;
}
.musical-versions__by {
font-weight: 400;
color: var(--musical-text-secondary);
}
.musical-versions__label {
margin: 0;
padding-inline-start: calc(2.5rem + var(--musical-space-sm));
}
.musical-versions-fields {
margin: 0;
padding: 0;
border: 0;
display: grid;
gap: var(--musical-space-md);
container-type: inline-size;
container-name: musical-versions;
}
.musical-versions-fields__rows {
display: grid;
gap: var(--musical-space-sm);
}
.musical-version-row {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
gap: var(--musical-space-sm);
align-items: start;
}
.musical-version-row__field {
min-width: 0;
}
.musical-version-row__resolved:empty,
.musical-version-row__error:empty {
display: none;
}
.musical-version-row__remove {
padding-inline: var(--musical-space-sm);
line-height: 1;
min-height: 48px;
color: var(--musical-text-secondary);
}
.musical-version-row__remove:hover {
color: var(--musical-text-primary);
}
.musical-versions-fields__add {
justify-self: start;
}
@container musical-versions (max-width: 30rem) {
.musical-version-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.musical-version-row__field--url {
grid-column: 1 / -1;
}
}
.musical-fm-intro {
display: grid;
gap: var(--musical-space-xl);
}
@media (min-width: 64rem) {
.musical-fm-intro {
grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
column-gap: var(--musical-space-3xl);
align-items: start;
}
}
.musical-contents {
background: rgb(255 255 255 / 6%);
border: 1px solid rgb(255 255 255 / 12%);
border-radius: var(--musical-radius-lg);
padding: var(--musical-space-lg);
}
.musical-section--media .musical-contents {
background:
linear-gradient(rgb(255 255 255 / 6%), rgb(255 255 255 / 6%)),
rgb(26 26 26 / 82%);
}
.musical-contents__title {
margin: 0 0 var(--musical-space-md);
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--musical-primary);
}
.musical-contents__list {
margin: 0;
padding: 0;
list-style: none;
counter-reset: musical-contents;
}
.musical-contents__link {
display: flex;
gap: var(--musical-space-md);
align-items: center;
min-height: 44px;
margin-inline: calc(var(--musical-space-sm) * -1);
padding: var(--musical-space-sm);
border-radius: var(--musical-radius-sm);
color: var(--musical-text-light);
text-decoration: none;
counter-increment: musical-contents;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-contents__link::before {
content: counter(musical-contents, decimal-leading-zero);
flex: none;
width: 2ch;
color: rgb(245 245 245 / 60%);
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-contents__link:hover,
.musical-contents__link:focus-visible {
background: rgb(255 255 255 / 8%);
color: var(--musical-primary);
}
.musical-contents__link:hover::before,
.musical-contents__link:focus-visible::before {
color: var(--musical-primary);
}
@media (prefers-reduced-motion: reduce) {
.musical-contents__link,
.musical-contents__link::before {
transition: none;
}
}
.musical-sectionnav {
position: fixed;
inset-inline: 0;
top: var(--musical-header-height);
z-index: 400;
display: flex;
justify-content: center;
background: rgb(250 250 249 / 92%);
backdrop-filter: blur(10px);
border-block-end: 1px solid var(--musical-border);
--musical-sectionnav-exit: calc(var(--musical-duration-quick) * 0.7);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition:
transform var(--musical-sectionnav-exit) var(--musical-easing-out),
opacity var(--musical-sectionnav-exit) var(--musical-easing-out),
visibility 0s linear var(--musical-sectionnav-exit);
}
.musical-sectionnav.is-showing {
transform: none;
opacity: 1;
visibility: visible;
transition:
transform var(--musical-duration-quick) var(--musical-easing-luxe),
opacity var(--musical-duration-quick) var(--musical-easing-luxe),
visibility 0s linear 0s;
}
.musical-sectionnav[hidden] {
display: none;
}
.musical-sectionnav__list {
position: relative;
display: flex;
align-items: center;
gap: var(--musical-space-lg);
width: 100%;
max-width: 75rem;
margin: 0;
padding-inline: var(--musical-space-lg);
list-style: none;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
}
.musical-sectionnav__list::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 1px;
height: 2px;
background: var(--musical-primary-ink);
opacity: 0;
transform:
translateX(var(--musical-rail-x, 0px))
scaleX(var(--musical-rail-width, 0));
transform-origin: 0 50%;
pointer-events: none;
}
.musical-sectionnav.is-railed .musical-sectionnav__list::after {
opacity: 1;
transition:
transform var(--musical-duration-smooth) var(--musical-easing-luxe),
opacity var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-sectionnav__list::-webkit-scrollbar {
display: none;
}
.musical-sectionnav__link {
display: inline-flex;
align-items: center;
min-height: 44px;
white-space: nowrap;
font-size: 0.875rem;
color: var(--musical-text-secondary);
text-decoration: none;
border-block-end: 2px solid transparent;
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-sectionnav__link:hover {
color: var(--musical-text-primary);
}
.musical-sectionnav__link[aria-current="true"] {
color: var(--musical-primary-ink);
border-block-end-color: var(--musical-primary-ink);
}
.musical-sectionnav.is-railed .musical-sectionnav__link[aria-current="true"] {
border-block-end-color: transparent;
}
.musical-faq__index {
margin-block-end: var(--musical-space-2xl);
padding: var(--musical-space-lg);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
}
.musical-faq__index-list {
margin: 0;
padding-inline-start: var(--musical-space-lg);
display: grid;
gap: var(--musical-space-xs);
}
@media (min-width: 48rem) {
.musical-faq__index-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--musical-space-xl);
}
}
.musical-faq__index-list li::marker {
color: var(--musical-text-secondary);
font-size: 0.875rem;
}
.musical-faq__top {
margin-block-start: var(--musical-space-2xl);
}
.musical-free {
width: 100%;
}
.musical-free__list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 48rem) {
.musical-free__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--musical-space-2xl);
}
}
.musical-free__list li {
position: relative;
padding-block: var(--musical-space-md);
padding-inline-start: var(--musical-space-lg);
border-block-end: 1px solid var(--musical-border);
font-family: var(--musical-font-body);
font-size: 1.125rem;
font-weight: 500;
line-height: 1.4;
}
.musical-free__list li::before {
content: "";
position: absolute;
inset-block-start: 1.55em;
inset-inline-start: 0;
width: 0.625rem;
height: 2px;
background: var(--musical-primary);
border-radius: var(--musical-radius-pill);
}
.musical-section--free {
background-image:
linear-gradient(
rgb(250 250 249 / 92%) 0%,
rgb(250 250 249 / 88%) 45%,
rgb(250 250 249 / 95%) 100%
),
url("../img/free-band-wash.webp");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.musical-free p {
margin-block-start: var(--musical-space-xl);
}
.musical-free__caveat {
margin-block-start: var(--musical-space-lg);
padding-block-start: var(--musical-space-lg);
border-block-start: 1px solid var(--musical-border);
color: var(--musical-text-secondary);
}
.musical-section--pledge {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--musical-bg-dark);
color: var(--musical-text-light);
}
.musical-section--pledge::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: url("../img/pledge-band-texture.webp");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.55;
}
.musical-section--pledge::after,
.musical-section--turns::after,
.musical-notfound::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(60% 45% at 8% 6%, rgb(0 217 217 / 16%) 0%, transparent 55%),
radial-gradient(65% 50% at 94% 96%, rgb(230 29 155 / 18%) 0%, transparent 55%),
radial-gradient(40% 30% at 88% 34%, rgb(255 165 0 / 8%) 0%, transparent 60%);
}
.musical-section--pledge .musical-h2,
.musical-section--pledge .musical-h3 {
color: var(--musical-text-light);
}
.musical-pledge__list {
display: grid;
gap: var(--musical-space-4xl);
margin-block-start: var(--musical-space-3xl);
}
@media (min-width: 64rem) {
.musical-pledge__item {
display: grid;
grid-template-columns: minmax(0, 22rem) minmax(0, 36rem);
column-gap: var(--musical-space-3xl);
align-items: start;
}
}
.musical-pledge__title {
margin: 0;
font-family: var(--musical-font-display);
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
text-wrap: balance;
}
@media (min-width: 64rem) {
.musical-pledge__title {
position: sticky;
inset-block-start: calc(
var(--musical-header-height) + var(--musical-sectionnav-height, 0px) +
var(--musical-space-lg)
);
}
}
.musical-pledge__body {
display: flex;
flex-direction: column;
gap: var(--musical-space-md);
margin-block-start: var(--musical-space-md);
}
@media (min-width: 64rem) {
.musical-pledge__body {
margin-block-start: 0;
}
}
.musical-pledge__item--commitment .musical-pledge__title::before {
content: "";
display: block;
width: 2.5rem;
height: 2px;
margin-block-end: var(--musical-space-md);
background: var(--musical-primary);
border-radius: var(--musical-radius-pill);
}
@media (min-width: 48rem) {
.musical-compare tbody tr:first-child {
background: rgb(0 217 217 / 8%);
}
.musical-compare tbody tr:first-child th[scope="row"] {
font-weight: 700;
color: var(--musical-primary-ink);
}
}
.musical-faq {
width: 100%;
}
@media (min-width: 64rem) {
.musical-faq {
display: block;
column-count: 2;
column-gap: var(--musical-space-3xl);
}
.musical-faq__index {
column-span: all;
}
.musical-faq__item {
break-inside: avoid;
margin-block-end: var(--musical-space-3xl);
}
.musical-faq__top {
column-span: all;
}
}
.musical-js .musical-pledge__item.musical-reveal {
transition-duration: var(--musical-duration-luxe);
transition-timing-function: var(--musical-easing-luxe);
transition-delay: 0s;
}
.musical-js .musical-pledge__item.musical-reveal:nth-child(2) {
transition-delay: 90ms;
}
.musical-js .musical-pledge__item.musical-reveal:nth-child(3) {
transition-delay: 180ms;
}
.musical-js .musical-pledge__item.musical-reveal:nth-child(4) {
transition-delay: 270ms;
}
@media (prefers-reduced-motion: reduce) {
.musical-js .musical-pledge__item.musical-reveal,
.musical-js .musical-pledge__item.musical-reveal:nth-child(n) {
transition-delay: 0s;
}
}
.musical-campaign-hero::after {
background:
linear-gradient(
90deg,
rgb(26 26 26 / 94%) 0%,
rgb(26 26 26 / 88%) 42%,
rgb(26 26 26 / 52%) 72%,
rgb(26 26 26 / 34%) 100%
);
}
.musical-campaign-hero::before {
opacity: 0.34;
}
.musical-campaign-hero__inner {
max-width: 72rem;
}
@media (min-width: 64rem) {
.musical-campaign-hero__inner {
grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
}
}
.musical-campaign-hero__copy {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
align-self: stretch;
width: 100%;
max-width: 34rem;
}
.musical-campaign-hero__title {
margin: 0;
}
.musical-campaign-hero__lede {
margin: 0;
color: var(--musical-text-light);
}
.musical-campaign-hero__micro {
color: var(--musical-text-light-dim);
margin: 0;
}
.musical-campaign-hero .musical-btn--primary {
padding: 0.9rem 1.75rem;
font-size: 1rem;
}
.musical-campaign-link {
--musical-campaign-note: #ff8fd0;
width: 100%;
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
padding: var(--musical-space-lg);
border-radius: var(--musical-radius-lg);
background-color: rgb(26 26 26 / 94%);
border: 1px solid rgb(245 245 245 / 12%);
}
.musical-campaign-link .musical-player--hero {
padding: 0;
background: none;
border: 0;
border-radius: 0;
}
.musical-campaign-link__player {
animation: musical-rise var(--musical-duration-luxe) var(--musical-easing-luxe) both;
}
.musical-campaign-link .musical-player__stage::before,
.musical-song-stage .musical-player__stage::before {
content: '';
position: absolute;
inset: -16%;
z-index: 0;
background:
var(--musical-song-art, none) center / cover no-repeat,
radial-gradient(closest-side, rgb(255 165 0 / 55%), rgb(255 165 0 / 0%) 78%);
filter: blur(38px) saturate(2.2) brightness(1.06);
border-radius: 50%;
opacity: 0;
transform: scale(0.9);
pointer-events: none;
transition:
opacity var(--musical-duration-quick) var(--musical-easing-out),
transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-song-stage .musical-player__stage::before {
inset: -22% -22% calc(3rem - 22%);
background:
radial-gradient(closest-side, rgb(255 165 0 / 55%) 64%, rgb(255 165 0 / 0%) 100%),
var(--musical-song-art, none) center / cover no-repeat;
filter: blur(40px) saturate(1.8);
}
.musical-campaign-link .musical-player__art,
.musical-song-stage .musical-player__art {
position: relative;
z-index: 1;
}
.musical-campaign-link .musical-player.is-playing .musical-player__stage::before,
.musical-song-stage .musical-player.is-playing .musical-player__stage::before {
opacity: 1;
transform: scale(1);
transition-duration: var(--musical-duration-luxe);
transition-timing-function: var(--musical-easing-luxe);
}
.musical-campaign-link .musical-player__title-link,
.musical-campaign-link .musical-player__artist a {
text-decoration: underline;
text-decoration-color: var(--musical-primary);
text-underline-offset: 0.3em;
text-decoration-thickness: 2px;
transition: text-decoration-color var(--musical-duration-quick) ease;
}
.musical-campaign-link .musical-player__artist {
color: var(--musical-text-light-dim);
font-weight: 500;
letter-spacing: normal;
text-transform: none;
}
.musical-campaign-link .musical-player__artist a {
text-decoration-thickness: 1px;
}
.musical-campaign-link .musical-player__title {
margin-block-start: 1.25rem;
}
.musical-campaign-link .musical-player__title-link,
.musical-campaign-link .musical-player__artist a {
display: inline-block;
}
.musical-campaign-link .musical-player__artist a {
padding-block: 0.75rem;
margin-block: -0.75rem;
}
.musical-campaign-link .musical-player__title-link {
padding-block: max(0.5rem, calc((2.75rem - 1.25em) / 2));
margin-block: max(-0.5rem, calc((1.25em - 2.75rem) / 2));
}
.musical-campaign-link .musical-player__title-link:hover,
.musical-campaign-link .musical-player__artist a:hover {
text-decoration-color: currentcolor;
}
.musical-campaign-link__aside {
margin: 0;
padding-inline-start: 0.25rem;
font-family: var(--musical-font-body);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
color: var(--musical-campaign-note);
text-align: start;
text-wrap: pretty;
}
.musical-campaign-link__nib {
display: inline-block;
width: 40px;
height: 40px;
margin-inline-start: 0.4rem;
vertical-align: middle;
position: relative;
inset-block-start: 0.85rem;
fill: none;
stroke: var(--musical-campaign-note);
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
.musical-campaign-link__nib path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: musical-nib-draw var(--musical-duration-luxe) var(--musical-easing-out) both;
animation-delay: 0.9s;
}
.musical-campaign-link__nib path + path {
animation-duration: var(--musical-duration-smooth);
animation-delay: 1.4s;
}
@keyframes musical-nib-draw {
to {
stroke-dashoffset: 0;
}
}
}
.musical-campaign-link__door {
align-self: stretch;
margin-block-start: 0;
}
.musical-campaign-link__door .musical-player__more-text {
flex-direction: column;
gap: 0.1em;
align-items: flex-start;
}
.musical-campaign-link__door .musical-player__more-by {
overflow: visible;
text-overflow: clip;
white-space: normal;
}
.musical-campaign-link__send {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--musical-space-sm);
text-align: center;
}
.musical-campaign-link__copy {
width: 100%;
justify-content: center;
}
.musical-campaign-link__copy svg {
flex: none;
width: 20px;
height: 20px;
fill: currentcolor;
}
.musical-campaign-link__note {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--musical-text-light);
text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
.musical-campaign-link__player {
animation: none;
}
}
.musical-campaign-link__try {
margin: calc(-1 * var(--musical-space-sm)) 0 0;
color: var(--musical-campaign-note);
font-weight: 600;
text-wrap: pretty;
}
.musical-campaign-link .musical-player__play {
position: relative;
}
@media (prefers-reduced-motion: no-preference) {
.musical-campaign-link .musical-player__play::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--musical-tertiary);
opacity: 0;
pointer-events: none;
animation: musical-try-pulse 1.6s var(--musical-easing-out) 1.4s 3 both;
}
@keyframes musical-try-pulse {
from {
transform: scale(1);
opacity: 0.75;
}
70%,
to {
transform: scale(1.75);
opacity: 0;
}
}
.musical-campaign-link .musical-player__play:hover::after,
.musical-campaign-link .musical-player__play:focus-visible::after,
.musical-campaign-link .musical-player__play:active::after,
.musical-campaign-link .musical-player.is-playing .musical-player__play::after,
.musical-campaign-link[data-musical-played] .musical-player__play::after {
animation: none;
}
}
.musical-campaign-send__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--musical-space-2xl);
align-items: center;
}
@media (min-width: 64rem) {
.musical-campaign-send__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: var(--musical-space-3xl);
}
}
.musical-campaign-send__copy {
max-width: 34rem;
}
.musical-campaign-send__note {
color: var(--musical-text-secondary);
}
.musical-thread {
--musical-thread-in: #e9e9eb;
--musical-thread-out: #0a4ba8;
--musical-thread-pace: 420ms;
width: 100%;
max-width: 27rem;
margin-inline: auto;
border-radius: var(--musical-radius-lg);
background: #fff;
box-shadow:
0 1px 2px rgb(26 26 26 / 8%),
0 18px 40px rgb(26 26 26 / 14%);
overflow: hidden;
}
.musical-thread__head {
display: flex;
align-items: center;
gap: var(--musical-space-sm);
padding: var(--musical-space-md) var(--musical-space-lg);
border-block-end: 1px solid rgb(26 26 26 / 10%);
background: rgb(250 250 249 / 92%);
}
.musical-thread__face {
display: grid;
place-items: center;
inline-size: 2rem;
block-size: 2rem;
border-radius: 50%;
background: var(--musical-primary-ink);
color: var(--musical-text-light);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
}
.musical-thread__who {
font-family: var(--musical-font-body);
font-size: 0.9375rem;
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-thread__log {
display: flex;
flex-direction: column;
gap: 0.375rem;
padding: var(--musical-space-lg);
}
.musical-thread__msg {
max-width: 80%;
margin: 0;
padding: 0.5rem 0.875rem;
border-radius: 1.125rem;
font-family: var(--musical-font-body);
font-size: 0.9375rem;
line-height: 1.4;
text-wrap: pretty;
}
.musical-thread__msg--them {
align-self: flex-start;
border-end-start-radius: 0.3rem;
background: var(--musical-thread-in);
color: var(--musical-text-primary);
}
.musical-thread__msg--me {
align-self: flex-end;
border-end-end-radius: 0.3rem;
background: var(--musical-thread-out);
color: #fff;
}
.musical-thread__msg--them + .musical-thread__msg--them,
.musical-thread__msg--me + .musical-thread__msg--me {
margin-block-start: -0.125rem;
}
.musical-thread__card {
align-self: flex-end;
display: block;
width: 100%;
max-width: 88%;
margin-block-start: 0.25rem;
border: 1px solid rgb(26 26 26 / 12%);
border-radius: 0.875rem;
overflow: hidden;
background: #fff;
color: inherit;
text-decoration: none;
transition:
box-shadow var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out),
scale var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-thread__card:hover,
.musical-thread__card:focus-visible {
border-color: rgb(26 26 26 / 22%);
box-shadow: var(--musical-shadow-lift);
scale: 1.015;
}
.musical-thread__card:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-thread__card:hover .musical-thread__meta span,
.musical-thread__card:focus-visible .musical-thread__meta span {
text-decoration: underline;
text-underline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.musical-thread__card,
.musical-thread__card:hover,
.musical-thread__card:focus-visible {
scale: none;
}
}
.musical-thread__card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1200 / 630;
object-fit: cover;
}
.musical-thread__meta {
display: block;
padding: 0.5rem 0.75rem;
border-block-start: 1px solid rgb(26 26 26 / 10%);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.35;
color: var(--musical-text-secondary, #5a5a5a);
}
.musical-thread__meta span {
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-js .musical-thread__msg.musical-reveal,
.musical-js .musical-thread__card.musical-reveal {
transition-property: opacity, transform;
transition-duration: 620ms;
transition-timing-function: var(--musical-easing-luxe);
transition-delay: calc(var(--musical-thread-beat, 0) * var(--musical-thread-pace, 420ms));
transform: translateY(-10px);
}
.musical-js .musical-thread__msg.musical-reveal.is-revealed,
.musical-js .musical-thread__card.musical-reveal.is-revealed {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.musical-js .musical-thread__msg.musical-reveal,
.musical-js .musical-thread__card.musical-reveal,
.musical-js .musical-thread__msg.musical-reveal:nth-child(n),
.musical-js .musical-thread__card.musical-reveal:nth-child(n) {
transition-delay: 0s;
transform: none;
}
}
.musical-js .musical-campaign-unfurl.is-motion-owned .musical-reveal {
transition: none;
}
.musical-campaign-motion__ghost {
position: absolute;
top: 0;
left: 0;
z-index: 20;
overflow: hidden;
pointer-events: none;
border-radius: var(--musical-radius-md);
background: rgb(26 26 26 / 94%);
box-shadow: 0 18px 40px rgb(26 26 26 / 28%);
will-change: transform, width, height, opacity;
}
.musical-campaign-motion__ghost img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.musical-campaign-band {
background-image:
linear-gradient(
rgb(250 250 249 / 88%) 0%,
rgb(250 250 249 / 80%) 50%,
rgb(250 250 249 / 92%) 100%
),
url("../img/campaign-signup-texture.webp");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.musical-campaign-steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--musical-space-xl);
margin-block-start: var(--musical-space-xl);
}
@media (min-width: 64rem) {
.musical-campaign-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--musical-space-2xl);
}
}
.musical-campaign-step {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
padding-block-start: var(--musical-space-lg);
border-block-start: 3px solid var(--musical-primary);
}
.musical-campaign-step:nth-child(2) {
border-block-start-color: var(--musical-secondary);
}
.musical-campaign-step:nth-child(3) {
border-block-start-color: var(--musical-tertiary);
}
.musical-campaign-step::before {
content: attr(data-step) / "";
display: block;
margin-block-end: var(--musical-space-sm);
font-family: var(--musical-font-display);
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
color: var(--musical-primary-ink);
}
.musical-campaign-step:nth-child(2)::before {
color: var(--musical-secondary-ink);
}
.musical-campaign-step:nth-child(3)::before {
color: var(--musical-tertiary-ink);
}
.musical-campaign-step__art {
order: -1;
display: block;
width: 100%;
margin-block-end: var(--musical-space-lg);
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--musical-radius-md);
background-color: var(--musical-bg-dark);
}
.musical-campaign-step h3 {
margin: 0 0 var(--musical-space-sm);
}
.musical-campaign-step p {
margin: 0;
}
.musical-campaign-tools__copy {
max-width: 40rem;
}
.musical-campaign-tools__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--musical-space-xl);
margin-block-start: var(--musical-space-xl);
}
@media (min-width: 64rem) {
.musical-campaign-tools__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--musical-space-2xl);
}
}
.musical-campaign-tool {
display: flex;
flex-direction: column;
padding-block-start: var(--musical-space-lg);
border-block-start: 3px solid var(--musical-secondary);
}
.musical-campaign-tool:nth-child(2) {
border-block-start-color: var(--musical-primary);
}
.musical-campaign-tool:nth-child(3) {
border-block-start-color: var(--musical-tertiary);
}
.musical-campaign-tool h3 {
margin: 0 0 var(--musical-space-sm);
}
.musical-campaign-tool p {
margin: 0;
}
.musical-campaign-tool__fine {
margin-block-start: var(--musical-space-sm) !important;
color: var(--musical-text-secondary);
}
.musical-campaign-tool__fine a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.musical-campaign-tool__figure {
margin: 0 0 var(--musical-space-lg);
transition: transform var(--musical-duration-smooth) var(--musical-easing-out);
}
@media (hover: hover) {
.musical-campaign-tool:hover .musical-campaign-tool__figure {
transform: translateY(-2px);
}
.musical-campaign-tool__figure img {
transition: transform var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-campaign-tool:hover .musical-campaign-tool__figure--cover img {
transform: scale(1.025);
}
}
.musical-js .musical-campaign-step.musical-reveal,
.musical-js .musical-campaign-tool.musical-reveal,
.musical-js .musical-campaign-trust__item.musical-reveal {
position: relative;
border-block-start-color: var(--musical-border);
}
.musical-js .musical-campaign-step.musical-reveal::after,
.musical-js .musical-campaign-tool.musical-reveal::after,
.musical-js .musical-campaign-trust__item.musical-reveal::after {
content: "";
position: absolute;
inset-block-start: -3px;
inset-inline-start: 0;
width: 0;
height: 3px;
background: var(--musical-primary);
transition: width var(--musical-duration-luxe) var(--musical-easing-luxe);
transition-delay: var(--musical-reveal-delay, 0ms);
}
.musical-js .musical-campaign-step.musical-reveal.is-revealed::after,
.musical-js .musical-campaign-tool.musical-reveal.is-revealed::after,
.musical-js .musical-campaign-trust__item.musical-reveal.is-revealed::after {
width: 100%;
}
.musical-js .musical-campaign-step.musical-reveal:nth-child(2)::after,
.musical-js .musical-campaign-tool.musical-reveal:nth-child(1)::after,
.musical-js .musical-campaign-trust__item.musical-reveal:nth-child(2)::after {
background: var(--musical-secondary);
}
.musical-js .musical-campaign-step.musical-reveal:nth-child(3)::after,
.musical-js .musical-campaign-tool.musical-reveal:nth-child(3)::after,
.musical-js .musical-campaign-trust__item.musical-reveal:nth-child(3)::after {
background: var(--musical-tertiary);
}
.musical-js .musical-campaign-tool.musical-reveal:nth-child(2)::after {
background: var(--musical-primary);
}
.musical-reasons > .musical-reason::before,
.musical-claims > .musical-reason::before {
content: "";
position: absolute;
inset-block-start: calc(var(--musical-space-md) * -1);
inset-inline-start: 0;
width: 2.5rem;
height: 3px;
border-radius: var(--musical-radius-pill);
background: var(--musical-primary);
transform-origin: left center;
}
.musical-reasons > .musical-reason:nth-child(3n + 2)::before,
.musical-claims > .musical-reason:nth-child(3n + 2)::before {
background: var(--musical-secondary);
}
.musical-reasons > .musical-reason:nth-child(3n)::before,
.musical-claims > .musical-reason:nth-child(3n)::before {
background: var(--musical-tertiary);
}
.musical-js .musical-reasons > .musical-reason.musical-reveal::before,
.musical-js .musical-claims > .musical-reason.musical-reveal::before {
transform: scaleX(0);
transition: transform var(--musical-duration-luxe) var(--musical-easing-luxe);
transition-delay: calc(var(--musical-reveal-delay, 0ms) + 150ms);
}
.musical-js .musical-reasons > .musical-reason.musical-reveal.is-revealed::before,
.musical-js .musical-claims > .musical-reason.musical-reveal.is-revealed::before {
transform: scaleX(1);
}
.musical-js .musical-free.musical-reveal {
opacity: 1;
transform: none;
transition: none;
}
.musical-js .musical-free.musical-reveal .musical-free__list li::before {
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--musical-duration-smooth) var(--musical-easing-luxe);
transition-delay: calc(var(--musical-free-index, 0) * 90ms + 150ms);
}
.musical-js .musical-free.musical-reveal.is-revealed .musical-free__list li::before {
transform: scaleX(1);
}
.musical-free__list li:nth-child(2) {
--musical-free-index: 1;
}
.musical-free__list li:nth-child(3) {
--musical-free-index: 2;
}
.musical-free__list li:nth-child(4) {
--musical-free-index: 3;
}
.musical-free__list li:nth-child(5) {
--musical-free-index: 4;
}
.musical-free__list li:nth-child(6) {
--musical-free-index: 5;
}
.musical-free__list li:nth-child(7) {
--musical-free-index: 6;
}
.musical-free__list li:nth-child(n + 8) {
--musical-free-index: 7;
}
.musical-heading-rule {
position: relative;
}
.musical-heading-rule::before {
content: "";
position: absolute;
inset-block-start: calc(var(--musical-space-md) * -1);
inset-inline-start: 0;
width: 2.5rem;
height: 3px;
border-radius: var(--musical-radius-pill);
background: var(--musical-primary);
transform-origin: left center;
}
.musical-heading-rule--secondary::before {
background: var(--musical-secondary);
}
.musical-heading-rule--tertiary::before {
background: var(--musical-tertiary);
}
.musical-js .musical-heading-rule.musical-reveal {
opacity: 1;
transform: none;
transition: none;
}
.musical-js .musical-heading-rule.musical-reveal::before {
transform: scaleX(0);
transition: transform var(--musical-duration-luxe) var(--musical-easing-luxe);
transition-delay: 150ms;
}
.musical-js .musical-heading-rule.musical-reveal.is-revealed::before {
transform: scaleX(1);
}
@media (prefers-reduced-motion: no-preference) {
.musical-song-stage .musical-waveform__svg {
transform-origin: 50% 50%;
animation: musical-wave-rise var(--musical-duration-luxe) var(--musical-easing-luxe) 0.3s both;
}
@keyframes musical-wave-rise {
from {
opacity: 0.4;
transform: scaleY(0.08);
}
to {
opacity: 1;
transform: none;
}
}
.musical-song-stage .musical-panels__panel:not([hidden]) {
animation: musical-panel-in var(--musical-duration-smooth) var(--musical-easing-out) both;
}
.musical-song-stage .musical-panels__panel:not([hidden]) :is(.musical-credits__row, .musical-traits__item) {
animation: musical-panel-in var(--musical-duration-smooth) var(--musical-easing-out) both;
animation-delay: calc(var(--musical-row-index, 0) * 45ms + 80ms);
}
@keyframes musical-panel-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
}
:is(.musical-credits__row, .musical-traits__item):nth-child(2) {
--musical-row-index: 1;
}
:is(.musical-credits__row, .musical-traits__item):nth-child(3) {
--musical-row-index: 2;
}
:is(.musical-credits__row, .musical-traits__item):nth-child(4) {
--musical-row-index: 3;
}
:is(.musical-credits__row, .musical-traits__item):nth-child(5) {
--musical-row-index: 4;
}
:is(.musical-credits__row, .musical-traits__item):nth-child(n + 6) {
--musical-row-index: 5;
}
@media (prefers-reduced-motion: no-preference) {
.musical-section--media .musical-artist-header__avatar {
animation: musical-portrait-settle var(--musical-duration-luxe) var(--musical-easing-luxe) both;
}
@keyframes musical-portrait-settle {
from {
opacity: 0;
transform: scale(0.92);
}
to {
opacity: 1;
transform: none;
}
}
.musical-section--media .musical-artist-header > :is(.musical-artist-header__bio, .musical-artist-header__meta, .musical-artist-header__links, .musical-stack) {
animation: musical-rise var(--musical-duration-smooth) var(--musical-easing-luxe) both;
animation-delay: 0.16s;
}
.musical-section--media .musical-artist-header > .musical-artist-header__meta {
animation-delay: 0.24s;
}
.musical-section--media .musical-artist-header > :is(.musical-artist-header__links, .musical-stack) {
animation-delay: 0.32s;
}
@media (hover: hover) {
.musical-section--media .musical-artist-header__image,
.musical-artist-header__related-portrait {
transition: transform var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-section--media .musical-artist-header__avatar:hover .musical-artist-header__image {
transform: scale(1.04);
}
.musical-artist-header__related:hover .musical-artist-header__related-portrait {
transform: scale(1.12);
}
.musical-section--media .musical-artist-header .musical-share__open:hover {
transform: translateY(-2px);
}
.musical-section--media .musical-artist-header .musical-share__open:active {
transform: scale(0.95);
}
}
}
.musical-hero .musical-player-wrap--hero .musical-player__play {
position: relative;
}
@media (prefers-reduced-motion: no-preference) {
.musical-hero .musical-player-wrap--hero .musical-player__play::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--musical-tertiary);
opacity: 0;
pointer-events: none;
animation: musical-try-pulse 1.6s var(--musical-easing-out) 1.4s 3 both;
}
.musical-hero .musical-player-wrap--hero .musical-player__play:hover::after,
.musical-hero .musical-player-wrap--hero .musical-player__play:focus-visible::after,
.musical-hero .musical-player-wrap--hero .musical-player__play:active::after,
.musical-hero .musical-player-wrap--hero .musical-player.is-playing .musical-player__play::after,
.musical-hero .musical-player-wrap--hero[data-musical-played] .musical-player__play::after {
animation: none;
}
}
.musical-campaign-tool__figure img,
.musical-campaign-tool__panel {
width: 100%;
aspect-ratio: 4 / 5;
border-radius: var(--musical-radius-md);
}
.musical-campaign-tool__figure img {
display: block;
height: auto;
background-color: var(--musical-bg-dark);
}
.musical-campaign-tool__figure--cover img {
object-fit: cover;
}
.musical-campaign-tool__figure--poster img {
object-fit: contain;
padding: var(--musical-space-md);
box-shadow: 0 12px 32px rgb(26 26 26 / 18%);
}
.musical-campaign-tool__figure figcaption {
margin-block-start: var(--musical-space-sm);
color: var(--musical-text-secondary);
}
.musical-campaign-tool__panel {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--musical-space-sm);
padding: var(--musical-space-lg);
background: var(--musical-bg-light);
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-campaign-tool__panel .musical-polish__side,
.musical-campaign-tool__panel .musical-polish__play,
.musical-campaign-tool__panel .musical-btn {
display: inline-flex;
align-items: center;
cursor: default;
}
.musical-campaign-tool__panel > .musical-btn {
align-self: flex-start;
margin-block-start: var(--musical-space-xs);
}
.musical-campaign-tool__label {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-campaign-tool__label + .musical-campaign-tool__label,
.musical-campaign-tool__chips + .musical-campaign-tool__label,
.musical-campaign-tool__input + .musical-campaign-tool__label {
margin-block-start: var(--musical-space-sm);
}
.musical-campaign-tool__chips {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-xs);
margin: 0;
padding: 0;
list-style: none;
}
.musical-campaign-tool__chips li {
padding: 0.35rem var(--musical-space-md);
border-radius: var(--musical-radius-pill);
background: #fff;
box-shadow: inset 0 0 0 1px var(--musical-border);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
font-weight: 600;
}
.musical-campaign-tool__chips li:first-child {
background: var(--musical-primary-ink);
color: var(--musical-text-light);
box-shadow: none;
}
.musical-campaign-tool__input {
display: block;
padding: 0.65rem var(--musical-space-md);
border-radius: var(--musical-radius-sm);
background: #fff;
box-shadow: inset 0 0 0 1px var(--musical-border);
font-family: var(--musical-font-body);
font-size: 0.9375rem;
color: var(--musical-text-secondary);
}
.musical-campaign-tool__levels {
justify-content: center;
gap: var(--musical-space-xl);
padding: var(--musical-space-xl);
background: var(--musical-bg-dark);
color: var(--musical-text-light);
box-shadow: none;
}
.musical-campaign-tool__level {
display: flex;
flex-direction: column;
gap: var(--musical-space-xs);
}
.musical-campaign-tool__level-name {
font-family: var(--musical-font-display);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.2;
}
.musical-campaign-tool__level-bar {
display: block;
height: 14px;
border-radius: var(--musical-radius-pill);
background: rgb(245 245 245 / 10%);
overflow: hidden;
}
.musical-campaign-tool__level-fill {
display: block;
width: var(--musical-level, 50%);
height: 100%;
border-radius: inherit;
background: var(--musical-text-light-dim);
}
.musical-js .musical-campaign-tool.musical-reveal .musical-campaign-tool__level-fill {
width: 0;
transition: width 1.2s var(--musical-easing-luxe);
transition-delay: 0.6s;
}
.musical-js .musical-campaign-tool.musical-reveal .musical-campaign-tool__level--after .musical-campaign-tool__level-fill {
transition-delay: 1.1s;
}
.musical-js .musical-campaign-tool.musical-reveal.is-revealed .musical-campaign-tool__level-fill {
width: var(--musical-level, 50%);
}
.musical-campaign-tool__level--before .musical-campaign-tool__level-fill {
background-image: repeating-linear-gradient(
90deg,
rgb(26 26 26 / 22%) 0 2px,
transparent 2px 5px
);
background-color: var(--musical-text-light-dim);
}
.musical-campaign-tool__level--after .musical-campaign-tool__level-fill {
background: var(--musical-primary);
}
.musical-campaign-tool__level-note {
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.45;
color: var(--musical-text-light-dim);
text-wrap: pretty;
}
.musical-feedback-story {
display: grid;
gap: var(--musical-space-xl);
margin-block-start: var(--musical-space-xl);
}
.musical-feedback-story,
.musical-feedback-story * {
box-sizing: border-box;
}
.musical-feedback-story > * {
min-width: 0;
}
.musical-feedback-story__steps {
grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
.musical-feedback-story__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.musical-feedback-story__facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--musical-space-xl);
}
}
.musical-feedback-story__stage[hidden] {
display: none;
}
.musical-feedback-story.is-motion-owned {
grid-template-areas:
"stage"
"story"
"facts";
}
.musical-feedback-story.is-motion-owned .musical-feedback-story__stage {
grid-area: stage;
}
.musical-feedback-story.is-motion-owned .musical-feedback-story__story {
display: grid;
gap: var(--musical-space-lg);
align-content: start;
grid-area: story;
}
.musical-feedback-story.is-motion-owned .musical-feedback-story__facts {
grid-area: facts;
}
.musical-feedback-story.is-motion-owned .musical-feedback-story__still {
display: none;
}
.musical-feedback-story.is-motion-owned .musical-feedback-story__steps {
grid-template-columns: 1fr;
gap: var(--musical-space-md);
}
@media (min-width: 64rem) {
.musical-feedback-story.is-motion-owned {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-areas:
"story stage"
"facts facts";
column-gap: var(--musical-space-2xl);
align-items: center;
}
}
.musical-feedback-story.is-motion-owned .musical-feedback-story__step {
padding: var(--musical-space-sm) var(--musical-space-md);
border-inline-start: 3px solid var(--musical-border);
border-radius: 0 var(--musical-radius-md) var(--musical-radius-md) 0;
transition:
border-color var(--musical-duration-smooth) var(--musical-easing-out),
background-color var(--musical-duration-smooth) var(--musical-easing-out);
}
.musical-feedback-story__step[aria-current] {
border-inline-start-color: var(--musical-primary);
background: rgb(0 217 217 / 7%);
}
.musical-feedback-story__step[aria-current] .musical-help__step-title::before {
background: var(--musical-secondary);
}
.musical-feedback-story__jump {
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: start;
cursor: pointer;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 0.2em;
transition: text-decoration-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-feedback-story__jump:hover {
text-decoration-color: currentColor;
}
.musical-feedback-story__jump:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
border-radius: 2px;
}
.musical-feedback-story__replay {
justify-self: start;
}
.musical-feedback-story__replay svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.musical-feedback-story__stage {
container: musical-feedback-stage / inline-size;
position: relative;
display: grid;
grid-template-rows: 1fr auto;
min-height: 29rem;
padding: var(--musical-space-md);
overflow: hidden;
border-radius: var(--musical-radius-lg);
background:
radial-gradient(120% 80% at 100% 0%, rgb(0 217 217 / 10%), transparent 60%),
radial-gradient(90% 70% at 0% 100%, rgb(230 29 155 / 9%), transparent 60%),
var(--musical-bg-dark);
color: var(--musical-text-light);
}
@media (min-width: 64rem) {
.musical-feedback-story__stage {
min-height: 25rem;
padding: var(--musical-space-xl);
}
}
.musical-feedback-story__scenes {
display: grid;
}
.musical-feedback-story__scene {
position: relative;
display: flex;
flex-direction: column;
grid-area: 1 / 1;
gap: var(--musical-space-md);
align-items: center;
justify-content: center;
min-width: 0;
}
@container musical-feedback-stage (min-width: 36rem) {
.musical-feedback-story__scene.is-link {
flex-direction: row;
gap: var(--musical-space-lg);
}
}
.musical-feedback-story__pointer {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 22px;
height: 22px;
margin: -11px 0 0 -11px;
border-radius: 50%;
background: var(--musical-tertiary);
box-shadow: 0 0 0 3px #fff, 0 8px 18px rgb(0 0 0 / 40%);
pointer-events: none;
visibility: hidden;
}
.musical-feedback-story__caption {
display: flex;
gap: var(--musical-space-sm);
align-items: center;
margin: var(--musical-space-md) 0 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-light-dim);
}
.musical-feedback-story__caption > span:first-child {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--musical-primary);
font-size: 0.75rem;
color: var(--musical-bg-dark);
}
@media (min-width: 64rem) {
.musical-feedback-story__caption {
display: none;
}
}
.musical-feedback-story__card {
display: grid;
gap: 10px;
width: min(21rem, 100%);
padding: 18px 20px;
border-radius: var(--musical-radius-md);
background: #fff;
box-shadow: 0 22px 44px -22px rgb(0 0 0 / 70%);
font-size: 0.875rem;
line-height: 1.4;
color: var(--musical-text-primary);
}
.musical-feedback-story__card p {
margin: 0;
}
.musical-feedback-story__card-title {
display: flex;
gap: 8px;
align-items: center;
font-weight: 600;
}
.musical-feedback-story__field {
display: flex;
align-items: center;
min-height: 34px;
padding: 6px 10px;
border-radius: var(--musical-radius-sm);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 16%);
font-size: 0.8125rem;
}
.musical-feedback-story__field.is-area {
align-items: flex-start;
min-height: 52px;
}
.musical-feedback-story__caret {
width: 1.5px;
height: 1.05em;
margin-inline-start: 1px;
background: var(--musical-primary-ink);
}
@media (prefers-reduced-motion: no-preference) {
.musical-feedback-story__caret {
animation: musical-feedback-caret 1s steps(1) infinite;
}
}
@keyframes musical-feedback-caret {
50% {
opacity: 0;
}
}
.musical-feedback-story__made {
display: grid;
gap: 8px;
}
.musical-feedback-story__press {
transform-origin: center;
}
.musical-feedback-story .musical-feedback-story__swap {
display: inline-grid;
}
.musical-feedback-story__swap > [data-swap] {
display: inline-flex;
grid-area: 1 / 1;
gap: 5px;
align-items: center;
}
.musical-feedback-story__chat {
display: flex;
flex-direction: column;
gap: 6px;
width: min(17rem, 100%);
}
.musical-feedback-story__bubble {
align-self: flex-end;
max-width: 88%;
padding: 8px 12px;
border-radius: 16px 16px 4px 16px;
background: var(--musical-primary);
font-size: 0.8125rem;
line-height: 1.35;
color: var(--musical-bg-dark);
}
.musical-feedback-story__bubble.is-link {
display: inline-flex;
gap: 6px;
align-items: center;
min-width: 0;
font-weight: 600;
}
.musical-feedback-story__bubble.is-link > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.musical-feedback-story__bubble svg,
.musical-feedback-story__mark svg,
.musical-feedback-story__nav svg,
.musical-feedback-story__deck-play svg,
.musical-feedback-story__cue svg {
flex: none;
width: 14px;
height: 14px;
fill: currentColor;
}
.musical-feedback-story__bubble.is-reply {
align-self: flex-start;
border-radius: 16px 16px 16px 4px;
background: rgb(245 245 245 / 14%);
color: var(--musical-text-light);
}
.musical-feedback-story__deck {
display: grid;
gap: 12px;
width: min(30rem, 100%);
}
.musical-feedback-story__deck-head {
display: flex;
gap: 10px;
align-items: center;
margin: 0;
font-size: 0.9375rem;
}
.musical-feedback-story__deck-play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--musical-primary);
color: var(--musical-bg-dark);
}
.musical-feedback-story__deck-title {
font-weight: 600;
}
.musical-feedback-story__deck-artist {
color: var(--musical-text-light-dim);
}
.musical-feedback-story__track {
--at: 0%;
position: relative;
display: grid;
gap: 4px;
}
.musical-feedback-story__pins {
position: relative;
display: block;
height: 22px;
}
.musical-feedback-story__wave {
position: relative;
display: block;
height: 64px;
}
.musical-feedback-story__bars.is-played {
fill: var(--musical-primary);
clip-path: inset(0 calc(100% - var(--at)) 0 0);
}
.musical-feedback-story__region {
position: absolute;
inset-block: 0;
left: 41%;
width: 17%;
border-inline: 1px solid rgb(0 217 217 / 60%);
background: rgb(0 217 217 / 16%);
transform-origin: left center;
}
.musical-feedback-story__playhead {
position: absolute;
inset-block: -4px;
left: var(--at);
width: 2px;
margin-inline-start: -1px;
border-radius: 1px;
background: var(--musical-tertiary);
}
.musical-feedback-story__marks {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.musical-feedback-story__mark {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 7px 12px;
border-radius: var(--musical-radius-pill);
background: rgb(245 245 245 / 12%);
font-size: 0.75rem;
font-weight: 600;
color: var(--musical-text-light);
}
.musical-feedback-story__notes {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.8125rem;
}
.musical-feedback-story__note {
--on: 0;
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
min-height: 32px;
padding: 5px 8px;
border-radius: var(--musical-radius-sm);
background: rgb(245 245 245 / 7%);
}
.musical-feedback-story__note-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--musical-primary);
font-size: 0.6875rem;
font-weight: 700;
color: var(--musical-bg-dark);
}
.musical-feedback-story__note-time {
font-family: var(--musical-font-mono);
font-size: 0.75rem;
color: var(--musical-text-light-dim);
}
.musical-feedback-story__card.is-reader {
width: min(24rem, 100%);
}
.musical-feedback-story__quote {
font-style: italic;
}
.musical-feedback-story__track.is-read .musical-feedback-story__wave {
height: 44px;
}
.musical-feedback-story__track.is-read .musical-help-wave {
fill: rgb(0 0 0 / 16%);
}
.musical-feedback-story__track.is-read .musical-feedback-story__bars.is-played {
fill: var(--musical-primary-ink);
}
.musical-feedback-story__track.is-read .musical-feedback-story__region {
border-color: rgb(0 90 90 / 40%);
background: rgb(0 90 90 / 10%);
}
.musical-feedback-story__notes.is-read .musical-feedback-story__note {
background: rgb(0 217 217 / calc(8% + var(--on) * 22%));
}
.musical-feedback-story__notes.is-read .musical-feedback-story__note-time {
color: var(--musical-text-secondary);
}
.musical-feedback-story__cue {
display: inline-flex;
color: var(--musical-primary-ink);
}
.musical-feedback-story__nav {
position: absolute;
top: 0;
right: 0;
display: inline-flex;
gap: 6px;
align-items: center;
padding: 7px 12px;
border-radius: var(--musical-radius-pill);
background: rgb(245 245 245 / 12%);
font-size: 0.8125rem;
font-weight: 600;
color: var(--musical-text-light);
}
.musical-feedback-story__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--musical-radius-pill);
background: var(--musical-secondary);
font-size: 0.6875rem;
font-weight: 700;
color: #fff;
}
.musical-campaign-trust__copy {
max-width: 40rem;
}
.musical-campaign-trust__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--musical-space-xl);
margin-block-start: var(--musical-space-xl);
}
@media (min-width: 64rem) {
.musical-campaign-trust__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--musical-space-2xl);
}
}
.musical-campaign-trust__item {
padding-block-start: var(--musical-space-lg);
border-block-start: 3px solid var(--musical-primary);
}
.musical-campaign-trust__item:nth-child(2) {
border-block-start-color: var(--musical-secondary);
}
.musical-campaign-trust__item:nth-child(3) {
border-block-start-color: var(--musical-tertiary);
}
.musical-campaign-trust__item h3 {
margin: 0 0 var(--musical-space-sm);
}
.musical-campaign-trust__item p {
margin: 0;
}
.musical-campaign-trust__links {
margin: 0;
color: var(--musical-text-secondary);
}
.musical-campaign-trust__links a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.musical-campaign-signup-band {
position: relative;
scroll-margin-block-start: 5rem;
background-image:
linear-gradient(rgb(26 26 26 / 78%), rgb(26 26 26 / 90%)),
url("../img/campaign-signup-texture.webp");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.musical-campaign-signup {
max-width: 34rem;
margin-inline: auto;
text-align: center;
}
.musical-campaign-signup .llq-signin {
--llq-signin-accent: var(--musical-tertiary);
--llq-signin-on-accent: var(--musical-text-primary);
text-align: start;
margin-inline: auto;
}
.musical-campaign-signup__legal,
.musical-campaign-signup__signin {
color: var(--musical-text-light-dim);
}
.musical-campaign-signup__legal a,
.musical-campaign-signup__signin a {
color: var(--musical-primary);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.musical-campaign-assurances {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--musical-space-md) var(--musical-space-2xl);
width: 100%;
max-width: none;
margin: var(--musical-space-3xl) 0 var(--musical-space-md);
padding: 0;
list-style: none;
text-align: center;
}
.musical-campaign-assurances li {
position: relative;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-light);
}
.musical-campaign-assurances li::after {
content: "";
display: block;
width: 1.75rem;
height: 1px;
margin: var(--musical-space-xs) auto 0;
background: var(--musical-text-light-dim);
opacity: 0.45;
}
.musical-header--campaign .musical-header__inner {
gap: var(--musical-space-md);
}
.musical-header--campaign .musical-header__back {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
min-height: 44px;
padding-inline-end: var(--musical-space-xs);
border-radius: var(--musical-radius-sm);
font-family: var(--musical-font-body);
font-size: 0.9375rem;
font-weight: 600;
color: var(--musical-text-primary);
text-decoration: none;
white-space: nowrap;
}
.musical-header--campaign .musical-header__back svg {
flex: none;
width: 20px;
height: 20px;
fill: currentcolor;
}
.musical-header--campaign .musical-header__back:hover {
color: var(--musical-primary-ink);
}
.musical-header--campaign .musical-header__note {
flex: 1;
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.35;
color: var(--musical-text-secondary);
text-align: center;
text-wrap: pretty;
}
.musical-header--campaign .musical-header__actions {
display: flex;
align-items: center;
gap: var(--musical-space-md);
margin-inline-start: auto;
}
.musical-header--campaign .musical-header__quiet {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 0.875rem;
white-space: nowrap;
}
.musical-header--campaign .musical-header__cta {
flex: none;
min-height: 44px;
padding-block: 0;
padding-inline: var(--musical-space-lg);
white-space: nowrap;
}
.musical-header__cta-short {
display: none;
}
.musical-js .musical-header--campaign[data-musical-campaign-reveal] .musical-header__cta {
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--musical-duration-quick) var(--musical-easing-luxe),
transform var(--musical-duration-quick) var(--musical-easing-luxe),
visibility 0s linear var(--musical-duration-quick);
}
.musical-js .musical-header--campaign[data-musical-campaign-reveal].is-showing-cta .musical-header__cta {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
@media (max-width: 61.9375rem) {
.musical-header--campaign .musical-header__note {
display: none;
}
}
@media (max-width: 47.9375rem) {
.musical-header--campaign .musical-header__quiet {
display: none;
}
}
@media (max-width: 26rem) {
.musical-header--campaign .musical-header__inner {
gap: var(--musical-space-sm);
padding-inline: var(--musical-space-md);
}
.musical-header--campaign .musical-brand__name {
display: none;
}
.musical-header--campaign .musical-header__back span,
.musical-header--campaign .musical-header__cta {
font-size: 0.875rem;
}
.musical-header--campaign .musical-header__cta {
padding-inline: var(--musical-space-md);
}
.musical-header--campaign .musical-header__cta-long {
display: none;
}
.musical-header--campaign .musical-header__cta-short {
display: inline;
}
}
.musical-campaign-hero :focus-visible,
.musical-campaign-signup-band :focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 3px;
}
@media (max-width: 47.99rem) {
.musical-campaign-hero {
background-image:
linear-gradient(rgb(26 26 26 / 62%), rgb(26 26 26 / 78%)),
url("../img/campaign-signal-portrait-2.webp");
background-size: cover;
background-position: center center;
}
.musical-campaign-hero .musical-hero__media {
display: none;
}
.musical-campaign-hero::after {
background: linear-gradient(180deg, rgb(26 26 26 / 30%) 0%, rgb(26 26 26 / 72%) 100%);
}
.musical-thread {
max-width: none;
}
}
.musical-notfound {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
place-items: center;
min-height: calc(100svh - var(--musical-header-height));
text-align: center;
}
.musical-notfound__inner {
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
gap: var(--musical-space-lg);
}
.musical-notfound__eq {
display: block;
width: 100%;
max-width: 34rem;
height: auto;
margin-block-end: var(--musical-space-xl);
overflow: visible;
}
.musical-notfound__seg {
fill: var(--musical-border-dark);
}
.musical-notfound__seg--lit {
fill: var(--musical-primary);
}
.musical-notfound__seg--peak {
fill: var(--musical-secondary);
}
.musical-notfound__line {
stroke: var(--musical-primary);
stroke-width: 3;
stroke-opacity: 0.5;
stroke-dasharray: 1;
}
.musical-notfound__head {
fill: var(--musical-tertiary);
}
.musical-notfound__lede {
margin: 0;
color: var(--musical-text-light-dim);
}
.musical-notfound__actions {
justify-content: center;
margin-block-start: var(--musical-space-sm);
}
@media (max-width: 29.9375rem) {
.musical-notfound__actions {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.musical-notfound__line {
stroke-width: 4;
}
}
@media (prefers-reduced-motion: no-preference) {
.musical-notfound__col {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: musical-notfound-rise var(--musical-duration-luxe) var(--musical-easing-luxe) calc(var(--i) * 30ms) backwards;
}
.musical-notfound__line {
animation: musical-notfound-run var(--musical-duration-smooth) var(--musical-easing-out) 0.7s backwards;
}
.musical-notfound__head {
animation: musical-fade var(--musical-duration-quick) var(--musical-easing-out) 1.1s backwards;
}
}
@keyframes musical-notfound-rise {
from { transform: scaleY(0); }
}
@keyframes musical-notfound-run {
from { stroke-dashoffset: 1; }
}
.musical-story-open {
padding-block: var(--musical-space-3xl) var(--musical-space-2xl);
}
.musical-story-open__grid,
.musical-story-letter__grid,
.musical-story-values__grid {
display: grid;
gap: var(--musical-space-2xl);
}
@media (min-width: 64rem) {
.musical-story-open__grid,
.musical-story-letter__grid,
.musical-story-values__grid,
.musical-story-close__inner,
.musical-story-statement .musical-shell {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: var(--musical-space-4xl);
align-items: start;
}
.musical-story-open__grid {
align-items: stretch;
}
.musical-story-open__copy {
padding-block-end: calc(var(--musical-space-md) + 1.3125rem);
}
.musical-story-open__copy .musical-h1 {
margin-block-start: auto;
}
}
.musical-story-open__lede {
max-width: 30rem;
margin: 0;
font-family: var(--musical-font-body);
font-size: 1.25rem;
line-height: 1.5;
text-wrap: pretty;
}
.musical-story-portrait {
width: 100%;
max-width: 34rem;
margin: 0;
}
@media (min-width: 64rem) {
.musical-story-portrait {
max-width: none;
}
}
.musical-story-portrait img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--musical-radius-lg);
background-color: var(--musical-border);
}
.musical-story-portrait .bricks-image-caption {
position: static;
width: auto;
margin-block-start: var(--musical-space-md);
padding: 0;
background: none;
color: var(--musical-text-secondary);
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.5;
text-align: start;
text-wrap: balance;
pointer-events: auto;
}
.musical-story-letter {
padding-block: var(--musical-space-2xl) var(--musical-space-4xl);
}
@media (min-width: 64rem) {
.musical-story-letter__head {
position: sticky;
inset-block-start: calc(var(--musical-header-height) + var(--musical-space-xl));
}
}
.musical-story-letter__body {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
max-width: 36rem;
}
.musical-story-letter__body p {
margin: 0;
text-wrap: pretty;
}
.musical-story-letter__body .musical-story-letter__pull {
margin-block: var(--musical-space-sm);
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.35;
color: var(--musical-text-primary);
text-wrap: balance;
}
@media (min-width: 48rem) {
.musical-story-letter__body .musical-story-letter__pull {
font-size: 1.75rem;
line-height: 1.3;
}
.musical-story-letter__sentence {
display: block;
}
}
.musical-story-letter__sign {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--musical-space-xs);
margin-block-start: var(--musical-space-lg);
}
.musical-story-letter__sign::before {
content: "";
width: 2.5rem;
height: 3px;
margin-block-end: var(--musical-space-md);
border-radius: var(--musical-radius-pill);
background: var(--musical-primary);
}
.musical-story-letter__body .musical-story-letter__name {
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.4;
}
.musical-story-letter__body .musical-story-letter__role {
font-size: 0.875rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-story-statement {
position: relative;
isolation: isolate;
overflow: hidden;
justify-content: center;
min-height: min(60svh, 34rem);
padding-block: var(--musical-space-4xl);
}
.musical-story-statement::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(44rem 26rem at 0% 0%, rgb(0 217 217 / 16%) 0%, transparent 70%),
radial-gradient(48rem 28rem at 100% 100%, rgb(230 29 155 / 18%) 0%, transparent 70%);
}
.musical-story-statement__line {
display: block;
}
.musical-story-statement__support {
max-width: 30rem;
margin: var(--musical-space-lg) 0 0;
color: var(--musical-text-light-dim);
text-wrap: balance;
}
@media (min-width: 64rem) {
.musical-story-statement__title {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
.musical-story-statement__line + .musical-story-statement__line {
grid-column: 2;
grid-row: 2;
}
.musical-story-statement__support {
grid-column: 2;
}
}
@media (prefers-reduced-motion: no-preference) {
.musical-js .musical-story-statement .musical-reveal {
transition-duration: var(--musical-duration-luxe);
transition-timing-function: var(--musical-easing-luxe);
}
}
.musical-story-values {
padding-block: var(--musical-space-4xl);
}
.musical-story-values__list {
display: grid;
gap: var(--musical-space-xl);
max-width: 36rem;
margin: 0;
padding: 0;
list-style: none;
}
.musical-story-values__item {
display: flex;
flex-direction: column;
gap: var(--musical-space-sm);
padding-block-start: var(--musical-space-lg);
border-block-start: 1px solid var(--musical-border);
}
.musical-story-values__item .musical-h3 {
font-size: 1.25rem;
line-height: 1.4;
}
@media (min-width: 64rem) {
.musical-story-values__item .musical-h3 {
font-size: 1.75rem;
line-height: 1.3;
}
}
.musical-story-values__text {
margin: 0;
text-wrap: pretty;
}
.musical-story-close {
padding-block: var(--musical-space-4xl);
background-color: rgb(0 217 217 / 8%);
}
.musical-story-close__inner p {
margin: 0;
text-wrap: balance;
}
.musical-story-close__inner .musical-btn {
align-self: flex-start;
margin-block-start: var(--musical-space-sm);
}
@media (min-width: 64rem) {
.musical-story-close__inner {
row-gap: var(--musical-space-lg);
}
.musical-story-close__inner .musical-h2 {
grid-row: 1 / span 2;
}
.musical-story-close__inner p,
.musical-story-close__inner .musical-btn {
grid-column: 2;
}
.musical-story-close__inner .musical-btn {
justify-self: start;
margin-block-start: 0;
}
}
.musical-feedback-root {
align-self: stretch;
width: 100%;
}
.musical-feedback {
container: musical-feedback / inline-size;
display: flex;
flex-direction: column;
gap: var(--musical-space-xl);
box-sizing: border-box;
width: 100%;
max-width: 75rem;
margin-inline: auto;
}
.musical-feedback [hidden] {
display: none;
}
.musical-feedback--closed {
max-width: var(--musical-player-width);
gap: var(--musical-space-md);
}
.musical-feedback__head {
display: grid;
gap: var(--musical-space-sm);
max-width: 46rem;
}
.musical-feedback__ask {
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--musical-text-primary);
}
.musical-feedback__ask strong {
font-weight: 700;
color: var(--musical-secondary-ink);
}
.musical-feedback__recording {
margin: 0;
font-size: 1rem;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
}
.musical-feedback__private {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 8px;
margin: 4px 0 0;
padding: 6px 14px 6px 10px;
border-radius: var(--musical-radius-pill);
background: rgb(0 90 90 / 8%);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
}
.musical-feedback__lock {
display: inline-flex;
}
.musical-feedback__lock svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.musical-feedback__message {
margin: var(--musical-space-sm) 0 0;
padding: var(--musical-space-md) var(--musical-space-lg);
border-radius: var(--musical-radius-lg);
background: #fff;
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-feedback__message-from {
margin-block-end: 6px;
text-align: start;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-feedback__message .musical-prose p {
margin: 0;
font-size: 1.125rem;
line-height: 1.6;
}
.musical-feedback__message .musical-prose p + p {
margin-block-start: var(--musical-space-sm);
}
.musical-feedback__focus-block {
display: grid;
gap: 8px;
margin-block-start: var(--musical-space-xs);
}
.musical-feedback__focus-lead {
margin: 0;
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-feedback__focus {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-xs);
margin: 0;
padding: 0;
list-style: none;
}
.musical-feedback__chip {
padding: 6px 12px;
border-radius: var(--musical-radius-pill);
background: rgb(0 90 90 / 9%);
font-size: 0.8125rem;
font-weight: 600;
color: var(--musical-primary-ink);
}
.musical-feedback__layout {
display: grid;
gap: var(--musical-space-xl);
align-items: start;
}
.musical-feedback__main,
.musical-feedback__side {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
min-width: 0;
}
@container musical-feedback (min-width: 60rem) {
.musical-feedback__ask {
font-size: clamp(1.875rem, 4vw, 2.5rem);
}
.musical-feedback__layout {
grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 1fr);
gap: var(--musical-space-2xl);
}
}
.musical-feedback__marks {
position: sticky;
top: var(--musical-header-height);
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
padding: var(--musical-space-md);
border-radius: var(--musical-radius-lg);
background: var(--musical-bg-dark);
box-shadow: 0 12px 28px -18px rgb(0 0 0 / 60%);
}
.musical-feedback__mark {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 0 16px 0 12px;
border: 0;
border-radius: var(--musical-radius-pill);
background: rgb(245 245 245 / 10%);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-light);
cursor: pointer;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-feedback__mark svg {
flex: none;
width: 18px;
height: 18px;
fill: var(--musical-primary);
}
.musical-feedback__mark:hover:not(:disabled):not(.is-armed) {
background: rgb(245 245 245 / 18%);
}
.musical-feedback__mark:focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 2px;
}
.musical-feedback__mark:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.musical-feedback__mark.is-armed {
background: var(--musical-tertiary);
color: var(--musical-text-primary);
}
.musical-feedback__mark.is-armed svg {
fill: currentColor;
}
.musical-feedback__mark.is-armed:hover {
background: #ffb733;
}
.musical-feedback__mark.is-quiet {
padding-inline: 16px;
background: none;
box-shadow: inset 0 0 0 1px rgb(245 245 245 / 30%);
}
.musical-feedback__hint {
flex-basis: 100%;
margin: 0;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--musical-text-light-dim);
}
.musical-feedback__hint.is-error {
color: #ff9d9d;
}
@container musical-feedback (max-width: 30rem) {
.musical-feedback__mark {
flex: 1 1 0;
justify-content: center;
padding-inline: 8px;
font-size: 0.8125rem;
line-height: 1.2;
text-align: center;
}
.musical-feedback__mark svg {
display: none;
}
.musical-feedback__mark-more {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.musical-feedback__mark.is-quiet {
flex-basis: 100%;
}
}
.musical-feedback__ticks {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.musical-feedback__tick {
position: absolute;
inset-block: -3px;
left: var(--at);
width: 2px;
margin-inline-start: -1px;
border-radius: 1px;
background: rgb(245 245 245 / 90%);
}
.musical-feedback__tick.is-span {
width: var(--len);
margin-inline-start: 0;
border-inline: 1px solid rgb(0 217 217 / 60%);
border-radius: 0;
background: rgb(0 217 217 / 16%);
}
.musical-feedback__log {
display: grid;
gap: var(--musical-space-sm);
}
.musical-feedback__log-title {
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
}
.musical-feedback__log-empty {
margin: 0;
padding: var(--musical-space-md) var(--musical-space-lg);
border: 1px dashed var(--musical-border);
border-radius: var(--musical-radius-lg);
font-size: 1rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-feedback__notes {
margin: 0;
padding: 0;
list-style: none;
}
.musical-feedback__note {
display: grid;
gap: var(--musical-space-sm);
padding: var(--musical-space-md) var(--musical-space-sm);
border-radius: var(--musical-radius-md);
}
.musical-feedback__note + .musical-feedback__note {
box-shadow: 0 -1px 0 var(--musical-border);
}
.musical-feedback__note--open {
background: rgb(255 165 0 / 9%);
}
.musical-feedback__note:has(textarea) {
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
}
.musical-feedback__note-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
}
.musical-feedback__note-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: var(--musical-radius-pill);
background: var(--musical-primary-ink);
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
}
.musical-feedback__note-time {
font-size: 1rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--musical-text-primary);
}
.musical-feedback__note-kind {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-feedback__note-body {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 1rem;
line-height: 1.55;
color: var(--musical-text-primary);
}
.musical-feedback__note-actions,
.musical-feedback__editor-actions,
.musical-feedback__times {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-xs);
align-items: end;
}
.musical-feedback__cue {
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
min-height: 48px;
padding: 0 12px 0 8px;
border: 0;
border-radius: var(--musical-radius-pill);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%);
font-family: var(--musical-font-body);
cursor: pointer;
transition: box-shadow var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-feedback__cue:hover {
box-shadow: inset 0 0 0 1px var(--musical-primary-ink);
}
.musical-feedback__cue:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-feedback__cue-icon {
display: inline-flex;
color: var(--musical-primary-ink);
}
.musical-feedback__cue-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.musical-feedback__note-actions .musical-btn,
.musical-feedback__editor-actions .musical-btn,
.musical-feedback__times .musical-btn {
min-height: 48px;
height: auto;
padding: 0 14px;
font-size: 0.875rem;
}
.musical-feedback__note-actions .musical-btn--secondary,
.musical-feedback__editor-actions .musical-btn--secondary {
border: 1px solid rgb(0 0 0 / 16%);
background: #fff;
color: var(--musical-primary-ink);
}
.musical-feedback__editor-label {
margin: 0;
font-weight: 600;
}
.musical-feedback__time .musical-input {
max-width: 9rem;
font-variant-numeric: tabular-nums;
}
.musical-feedback__form,
.musical-feedback__done {
padding: var(--musical-space-lg);
border-radius: var(--musical-radius-lg);
background: #fff;
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-feedback__form [data-musical-feedback-send] {
width: 100%;
}
.musical-feedback__done {
display: grid;
gap: var(--musical-space-sm);
padding-block: var(--musical-space-xl);
color: var(--musical-text-primary);
}
.musical-feedback__done-title {
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.1;
color: var(--musical-text-primary);
}
.musical-feedback__done-title:focus {
outline: none;
}
.musical-feedback__done-text {
margin: 0;
font-size: 1.125rem;
line-height: 1.55;
color: var(--musical-text-primary);
}
.musical-feedback__draft:empty {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
clip-path: inset(50%);
}
.musical-feedback__main > .musical-panels {
max-width: none;
margin-inline: 0;
}
.musical-feedback__dialog {
max-width: min(32rem, calc(100vw - 2rem));
border: 0;
border-radius: var(--musical-radius-lg);
padding: var(--musical-space-lg);
}
.musical-feedback__dialog::backdrop {
background: rgb(0 0 0 / 50%);
}
.musical-feedback__dialog-actions {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-xs);
}
@media (prefers-reduced-motion: reduce) {
.musical-feedback__mark {
transition: none;
}
}
.musical-feedback-panel {
display: flex;
flex-direction: column;
gap: var(--musical-space-xl);
min-width: 0;
}
.musical-feedback-panel [hidden] {
display: none;
}
.musical-feedback-panel__lead {
margin: 0;
max-width: 40rem;
font-size: 1rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-feedback-panel__subhead {
margin: 0 0 var(--musical-space-sm);
font-family: var(--musical-font-display);
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
color: var(--musical-text-primary);
}
.musical-feedback-panel__status {
margin: 0;
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-feedback-panel__status.is-error {
color: var(--musical-error-ink);
}
.musical-feedback-panel__sent {
display: flex;
flex-direction: column;
}
.musical-feedback-links {
margin: 0;
padding: 0;
list-style: none;
border-radius: var(--musical-radius-lg);
background: #fff;
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-feedback-link {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--musical-space-sm) var(--musical-space-md);
padding: var(--musical-space-md);
}
.musical-feedback-link + .musical-feedback-link {
border-block-start: 1px solid var(--musical-border);
}
.musical-feedback-link__who {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.musical-feedback-link__label {
overflow-wrap: anywhere;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: var(--musical-text-primary);
}
.musical-feedback-link__meta {
font-size: 0.8125rem;
line-height: 1.4;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
}
.musical-feedback-link__state {
display: inline-flex;
align-items: center;
gap: 6px;
justify-self: end;
padding: 3px 10px;
border-radius: var(--musical-radius-pill);
background: var(--musical-border);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
color: var(--musical-text-secondary);
}
.musical-feedback-link__state::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.musical-feedback-link.is-waiting .musical-feedback-link__state {
background: rgb(0 90 90 / 9%);
color: var(--musical-primary-ink);
}
.musical-feedback-link.is-answered .musical-feedback-link__state {
background: rgb(0 107 67 / 10%);
color: var(--musical-success-ink);
}
.musical-feedback-link.is-expired .musical-feedback-link__label,
.musical-feedback-link.is-revoked .musical-feedback-link__label {
color: var(--musical-text-secondary);
}
.musical-feedback-link__actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
}
.musical-feedback-link__actions:empty {
display: none;
}
.musical-feedback-link__read {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 var(--musical-space-sm);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-feedback-link__read:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
border-radius: var(--musical-radius-sm);
}
@container musical-edit (min-width: 36rem) {
.musical-feedback-link {
grid-template-columns: minmax(0, 1fr) 6.5rem 13rem;
gap: var(--musical-space-md);
padding: var(--musical-space-md) var(--musical-space-lg);
}
.musical-feedback-link__state {
justify-self: start;
}
.musical-feedback-link__actions {
grid-column: auto;
justify-content: flex-end;
}
}
.musical-feedback-panel__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--musical-space-sm) var(--musical-space-md);
margin-block-start: var(--musical-space-sm);
}
.musical-feedback-panel__inbox {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 1rem;
font-weight: 600;
color: var(--musical-primary-ink);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-feedback-panel__off {
min-height: 44px;
padding: 0 var(--musical-space-sm);
border: 0;
background: none;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--musical-text-secondary);
cursor: pointer;
}
.musical-feedback-panel__off:hover {
color: var(--musical-error-ink);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-feedback-panel__inbox:focus-visible,
.musical-feedback-panel__off:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
border-radius: var(--musical-radius-sm);
}
.musical-feedback-once {
display: grid;
gap: var(--musical-space-sm);
padding: var(--musical-space-lg);
border-radius: var(--musical-radius-lg);
background: #fff;
box-shadow:
inset 0 0 0 2px var(--musical-primary-ink),
0 10px 28px -12px rgb(0 60 60 / 35%);
}
.musical-feedback-once__title {
display: flex;
align-items: center;
gap: var(--musical-space-sm);
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
}
.musical-feedback-once__mark {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--musical-radius-md);
background: var(--musical-primary-ink);
color: #fff;
}
.musical-feedback-once__mark svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.musical-feedback-once__why {
margin: 0;
max-width: 40rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-feedback-once__url.musical-input {
width: 100%;
margin-block: var(--musical-space-xs);
background: var(--musical-bg-light);
font-family: var(--musical-font-mono);
font-size: 0.875rem;
color: var(--musical-text-primary);
}
.musical-feedback-once__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm);
}
.musical-feedback-once__actions .musical-btn--primary svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.musical-feedback-compose {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
}
.musical-feedback-compose > .musical-feedback-panel__subhead {
margin: 0;
}
.musical-feedback-compose__pair {
display: grid;
gap: var(--musical-space-lg);
}
@container musical-edit (min-width: 36rem) {
.musical-feedback-compose__pair {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.musical-feedback-compose__group {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.musical-feedback-compose__group > legend {
margin-block-end: var(--musical-space-sm);
padding: 0;
}
.musical-feedback-chips {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
}
.musical-feedback-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 16px;
border-radius: var(--musical-radius-pill);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 16%);
font-size: 0.875rem;
font-weight: 500;
color: var(--musical-text-primary);
cursor: pointer;
transition:
box-shadow var(--musical-duration-quick) var(--musical-easing-out),
background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-feedback-chip input,
.musical-feedback-span__option input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.musical-feedback-chip__tick {
display: none;
color: var(--musical-primary-ink);
}
.musical-feedback-chip__tick svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.musical-feedback-chip:hover {
box-shadow: inset 0 0 0 1px var(--musical-primary-ink);
}
.musical-feedback-chip:has(input:checked) {
padding-inline-start: 12px;
background: rgb(0 90 90 / 9%);
box-shadow: inset 0 0 0 1.5px var(--musical-primary-ink);
font-weight: 600;
color: var(--musical-primary-ink);
}
.musical-feedback-chip:has(input:checked) .musical-feedback-chip__tick {
display: inline-flex;
}
.musical-feedback-chip:has(input:focus-visible),
.musical-feedback-span__option:has(input:focus-visible) {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-feedback-span {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
padding: 4px;
border-radius: var(--musical-radius-md);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 16%);
}
@container musical-edit (min-width: 36rem) {
.musical-feedback-span {
display: inline-grid;
grid-template-columns: repeat(4, auto);
}
}
.musical-feedback-span__option {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 var(--musical-space-md);
border-radius: var(--musical-radius-sm);
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
color: var(--musical-text-primary);
cursor: pointer;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-feedback-span__option:hover {
background: rgb(0 90 90 / 7%);
}
.musical-feedback-span__option:has(input:checked) {
background: var(--musical-primary-ink);
font-weight: 600;
color: #fff;
}
.musical-feedback-compose__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--musical-space-md);
padding-block-start: var(--musical-space-md);
border-block-start: 1px solid rgb(0 0 0 / 8%);
}
.musical-feedback-compose__recording {
display: flex;
flex: 1 1 18rem;
align-items: flex-start;
gap: var(--musical-space-sm);
margin: 0;
max-width: 36rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-feedback-compose__recording-mark {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgb(0 90 90 / 9%);
color: var(--musical-primary-ink);
}
.musical-feedback-compose__recording-mark svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.musical-feedback-compose__foot [data-musical-feedback-make] {
flex: none;
}
.musical-feedback-compose__foot [data-musical-feedback-make] svg,
.musical-feedback-link__act svg {
flex: none;
width: 18px;
height: 18px;
fill: currentColor;
}
.musical-field__error[hidden] {
display: none;
}
.musical-sidebar__count {
display: inline-block;
flex: none;
padding: 0 0.6em;
border-radius: 999px;
background: var(--musical-secondary-ink);
color: #fff;
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.7;
white-space: nowrap;
}
.musical-sidebar__count[hidden] {
display: none;
}
.musical-edit__cue--feedback {
background: var(--musical-primary-ink);
color: #fff;
}
.musical-feedback-inbox {
container: musical-inbox / inline-size;
width: 100%;
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
min-width: 0;
}
.musical-feedback-inbox [hidden] {
display: none;
}
.musical-feedback-inbox__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--musical-space-sm) var(--musical-space-md);
}
.musical-feedback-inbox__summary {
margin: 0;
font-size: 1rem;
line-height: 1.5;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
}
.musical-feedback-inbox__summary strong {
font-weight: 600;
color: var(--musical-primary-ink);
}
.musical-help-open {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 14px 0 10px;
border: 0;
border-radius: var(--musical-radius-pill);
background: rgb(0 90 90 / 8%);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
cursor: pointer;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-help-open svg {
flex: none;
width: 20px;
height: 20px;
fill: currentColor;
}
.musical-help-open:hover {
background: rgb(0 90 90 / 14%);
}
.musical-help-open:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
@media (max-width: 47.99rem) {
.musical-help-open {
min-height: 48px;
}
}
.musical-help-row {
display: flex;
justify-content: flex-end;
margin-block-end: var(--musical-space-md);
}
.musical-feedback-filter {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-sm) var(--musical-space-md);
}
.musical-feedback-filter ul {
display: flex;
gap: var(--musical-space-xs);
margin: 0;
padding: 0;
list-style: none;
}
.musical-feedback-filter__status {
flex: none;
padding: 3px;
background: var(--musical-bg-light);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
}
.musical-feedback-filter__seg,
.musical-feedback-filter__chip {
display: inline-flex;
align-items: center;
gap: 0.45em;
min-height: 36px;
padding-inline: var(--musical-space-md);
border-radius: var(--musical-radius-pill);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
font-weight: 600;
color: var(--musical-text-secondary);
text-decoration: none;
white-space: nowrap;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-feedback-filter__seg:hover {
color: var(--musical-text-primary);
}
.musical-feedback-filter__seg[aria-current="true"] {
background: #fff;
color: var(--musical-text-primary);
box-shadow: var(--musical-shadow-card);
}
.musical-feedback-filter__songs {
flex-wrap: wrap;
min-width: 0;
}
.musical-feedback-filter__chip {
position: relative;
background: #fff;
border: 1px solid var(--musical-border);
}
.musical-feedback-filter__chip:hover {
border-color: var(--musical-text-secondary);
color: var(--musical-text-primary);
}
.musical-feedback-filter__chip[aria-current="true"] {
background: var(--musical-bg-dark);
border-color: var(--musical-bg-dark);
color: var(--musical-text-light);
}
.musical-feedback-filter__title {
max-width: 14rem;
overflow: hidden;
text-overflow: ellipsis;
}
.musical-feedback-filter__count {
font-weight: 500;
font-variant-numeric: tabular-nums;
opacity: 0.7;
}
.musical-feedback-filter__new {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--musical-secondary);
}
.musical-feedback-filter__seg:focus-visible,
.musical-feedback-filter__chip:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
@media (max-width: 47.99rem) {
.musical-feedback-filter__songs {
flex-wrap: nowrap;
width: 100%;
overflow-x: auto;
padding-block: 2px;
scrollbar-width: none;
}
.musical-feedback-filter__songs::-webkit-scrollbar {
display: none;
}
.musical-feedback-filter__songs li {
flex: none;
}
}
.musical-feedback-inbox__page {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 var(--musical-space-md);
border: 1px solid rgb(0 0 0 / 16%);
border-radius: var(--musical-radius-md);
background: #fff;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
text-decoration: none;
cursor: pointer;
transition: border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-feedback-inbox__page:hover {
border-color: var(--musical-primary-ink);
}
.musical-feedback-inbox__page:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-sheet {
overflow: hidden;
border-radius: var(--musical-radius-lg);
background: #fff;
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-sheet__head {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
align-items: center;
gap: var(--musical-space-sm) var(--musical-space-md);
padding: var(--musical-space-md);
background: var(--musical-bg-dark);
color: var(--musical-text-light);
}
.musical-sheet__art {
display: block;
width: 64px;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--musical-radius-md);
background: var(--musical-border-dark);
}
.musical-sheet__art :is(img, svg) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.musical-sheet__title {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.musical-sheet__name {
margin: 0;
overflow-wrap: anywhere;
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--musical-text-light);
}
.musical-sheet__count {
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
color: var(--musical-text-light-dim);
}
.musical-sheet__count strong {
font-weight: 600;
color: var(--musical-primary);
}
.musical-sheet__studio {
grid-column: 2;
justify-self: start;
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-sheet__studio:focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 2px;
border-radius: var(--musical-radius-sm);
}
.musical-sheet__rows {
margin: 0;
padding: 0;
list-style: none;
}
.musical-sheet__row + .musical-sheet__row {
border-block-start: 1px solid var(--musical-border);
}
.musical-sheet__open {
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto;
grid-template-areas:
"dot who when"
". line line"
". moments moments";
align-items: center;
gap: 6px var(--musical-space-md);
padding: var(--musical-space-md);
color: inherit;
text-decoration: none;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-sheet__open:hover {
background: rgb(0 90 90 / 4%);
}
.musical-sheet__open:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: -3px;
border-radius: var(--musical-radius-md);
}
.musical-sheet__dot {
grid-area: dot;
width: 10px;
height: 10px;
border-radius: 50%;
}
.musical-sheet__row.is-new .musical-sheet__dot {
background: var(--musical-primary-ink);
}
.musical-sheet__row.is-new .musical-sheet__person {
font-weight: 700;
}
.musical-sheet__who {
grid-area: who;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.musical-sheet__name-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px var(--musical-space-sm);
}
.musical-sheet__person {
overflow-wrap: anywhere;
font-size: 1rem;
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-sheet__label {
font-size: 0.8125rem;
color: var(--musical-text-secondary);
}
.musical-sheet__moments {
grid-area: moments;
display: grid;
gap: 4px;
min-width: 0;
}
.musical-sheet__strip {
position: relative;
display: block;
height: 14px;
}
.musical-sheet__strip::before {
content: "";
position: absolute;
inset: 6px 0 auto;
height: 2px;
border-radius: 1px;
background: var(--musical-border);
}
.musical-sheet__tick,
.musical-sheet__span {
position: absolute;
left: var(--at);
}
.musical-sheet__tick {
top: 0;
width: 3px;
height: 14px;
border-radius: 2px;
background: var(--musical-primary-ink);
transform: translateX(-1.5px);
}
.musical-sheet__span {
top: 3px;
width: var(--len);
height: 8px;
border-radius: 4px;
background: rgb(0 90 90 / 70%);
}
.musical-sheet__notes {
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
}
.musical-sheet__line {
grid-area: line;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 1rem;
line-height: 1.45;
color: var(--musical-text-secondary);
}
.musical-sheet__row.is-new .musical-sheet__line {
color: var(--musical-text-primary);
}
.musical-sheet__when {
grid-area: when;
justify-self: end;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--musical-text-secondary);
}
@container musical-inbox (min-width: 44rem) {
.musical-sheet__head {
grid-template-columns: 88px minmax(0, 1fr) auto;
gap: var(--musical-space-lg);
padding: var(--musical-space-md) var(--musical-space-lg);
}
.musical-sheet__art {
width: 88px;
}
.musical-sheet__name {
font-size: 1.25rem;
}
.musical-sheet__studio {
grid-column: 3;
}
.musical-sheet__open {
grid-template-columns: 10px minmax(9rem, 13rem) minmax(8rem, 13rem) minmax(0, 1fr) auto;
grid-template-areas: "dot who moments line when";
gap: var(--musical-space-lg);
min-height: 76px;
padding: var(--musical-space-md) var(--musical-space-lg);
}
.musical-sheet__line {
-webkit-line-clamp: 1;
}
}
.musical-feedback-inbox__pages {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--musical-space-md);
margin-block-start: var(--musical-space-md);
}
.musical-feedback-inbox__of {
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
}
.musical-reader {
container: musical-reader / inline-size;
width: 100%;
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
min-width: 0;
}
.musical-reader [hidden] {
display: none;
}
.musical-reader__back {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
text-decoration: none;
}
.musical-reader__back svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.musical-reader__back:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-reader__back:focus-visible,
.musical-reader__meta a:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
border-radius: var(--musical-radius-sm);
}
.musical-reader__head {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
align-items: center;
gap: var(--musical-space-md);
margin-block-start: calc(-1 * var(--musical-space-sm));
}
.musical-reader__art {
display: block;
width: 56px;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--musical-radius-md);
background: var(--musical-border);
}
.musical-reader__art :is(img, svg) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.musical-reader__heading {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.musical-reader__from {
margin: 0;
overflow-wrap: anywhere;
font-family: var(--musical-font-display);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--musical-text-primary);
}
.musical-reader__meta {
font-size: 1rem;
line-height: 1.45;
color: var(--musical-text-secondary);
}
.musical-reader__meta a {
font-weight: 600;
color: var(--musical-primary-ink);
text-underline-offset: 0.25em;
}
.musical-reader__deck {
position: sticky;
top: var(--musical-header-height);
z-index: 3;
display: grid;
gap: var(--musical-space-sm);
padding: var(--musical-space-md);
border-radius: var(--musical-radius-lg);
background: var(--musical-bg-dark);
color: var(--musical-text-light);
box-shadow: 0 12px 28px -18px rgb(0 0 0 / 60%);
}
.musical-reader__transport {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-xs) var(--musical-space-md);
}
.musical-reader__toggle {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: var(--musical-tertiary);
color: var(--musical-text-primary);
cursor: pointer;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-reader__toggle:hover {
background: #ffb733;
}
.musical-reader__toggle:active {
background: #e08e00;
}
.musical-reader__toggle:focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 3px;
}
.musical-reader__toggle svg {
width: 26px;
height: 26px;
fill: currentColor;
}
.musical-reader__icon-pause,
.musical-reader__deck.is-playing .musical-reader__icon-play {
display: none;
}
.musical-reader__deck.is-playing .musical-reader__icon-pause,
.musical-reader__icon-play {
display: inline-flex;
}
.musical-reader__clock {
font-size: 1rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--musical-text-light);
}
.musical-reader__which {
flex: 1 1 100%;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--musical-text-light-dim);
}
.musical-reader__stage {
display: grid;
gap: 6px;
padding-block-start: 4px;
}
.musical-reader__pins {
--rows: 1;
--rail: calc(28px + (var(--rows) - 1) * 26px);
--wave: 5rem;
position: relative;
height: var(--rail);
margin: 0 14px;
padding: 0;
list-style: none;
}
.musical-reader__pins:has(.is-low) {
--rows: 2;
}
.musical-reader__pin {
--row: 0;
--top: calc(var(--row) * 26px);
position: absolute;
top: var(--top);
left: var(--at, 0%);
display: flex;
width: 28px;
margin-inline-start: -14px;
}
.musical-reader__pin::before {
content: "";
position: absolute;
z-index: 1;
top: -8px;
left: -8px;
width: 44px;
height: 44px;
cursor: pointer;
}
.musical-reader__pin.is-low {
--row: 1;
}
.musical-reader__pin::after {
content: "";
position: absolute;
top: 28px;
left: calc(50% - 0.5px);
width: 1px;
z-index: 1;
height: calc(var(--rail) - var(--top) - 28px + 6px + var(--wave));
background: rgb(0 217 217 / 45%);
pointer-events: none;
}
.musical-reader__pin.is-now::after {
background: rgb(255 165 0 / 75%);
}
.musical-reader__pin-button {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50% 50% 50% 4px;
background: var(--musical-primary);
box-shadow: 0 0 0 2px var(--musical-bg-dark);
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--musical-bg-dark);
cursor: pointer;
transform: rotate(-45deg);
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-reader__pin-button > span[aria-hidden] {
transform: rotate(45deg);
}
.musical-reader__pin.is-lit .musical-reader__pin-button {
transform: rotate(-45deg) scale(1.14);
}
.musical-reader__pin.is-now .musical-reader__pin-button {
background: var(--musical-tertiary);
}
.musical-reader__pin-button:focus-visible {
outline: 2px solid var(--musical-text-light);
outline-offset: 2px;
}
.musical-reader__wave.musical-waveform {
height: 5rem;
margin: 0 14px;
}
.musical-reader__wave:not(:has(.musical-waveform__svg))::before {
content: "";
position: absolute;
inset: calc(50% - 1px) 0 auto;
height: 2px;
border-radius: 1px;
background: rgb(245 245 245 / 24%);
}
.musical-reader__wave .musical-seek::-webkit-slider-thumb {
height: 5rem;
}
.musical-reader__wave .musical-seek::-moz-range-thumb {
height: 5rem;
}
.musical-reader__region {
position: absolute;
inset-block: 0;
left: var(--at);
width: var(--len);
border-inline: 1px solid rgb(0 217 217 / 55%);
background: rgb(0 217 217 / 14%);
pointer-events: none;
}
.musical-reader__gone {
margin: 0;
font-size: 1rem;
line-height: 1.5;
color: var(--musical-text-light-dim);
}
.musical-reader__body {
display: grid;
gap: var(--musical-space-xl);
align-items: start;
}
.musical-reader__section-title {
margin: 0 0 var(--musical-space-sm);
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
}
.musical-reader__notes {
margin: 0;
padding: 0;
list-style: none;
}
.musical-reader__note {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--musical-space-sm) var(--musical-space-md);
padding: var(--musical-space-md) var(--musical-space-sm);
border-radius: var(--musical-radius-md);
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-reader__note + .musical-reader__note {
box-shadow: 0 -1px 0 var(--musical-border);
}
.musical-reader__note.is-lit {
background: rgb(0 90 90 / 6%);
}
.musical-reader__note.is-now {
background: rgb(255 165 0 / 13%);
}
.musical-reader__cue {
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
align-self: start;
min-height: 44px;
padding: 0 12px 0 8px;
border: 0;
border-radius: var(--musical-radius-pill);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%);
font-family: var(--musical-font-body);
cursor: pointer;
transition: box-shadow var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-reader__cue:hover:not(:disabled) {
box-shadow: inset 0 0 0 1px var(--musical-primary-ink);
}
.musical-reader__cue:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-reader__cue:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.musical-reader__num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: var(--musical-radius-pill);
background: var(--musical-primary-ink);
font-size: 0.75rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
}
.musical-reader__note.is-now .musical-reader__num {
background: var(--musical-tertiary);
color: var(--musical-text-primary);
}
.musical-reader__time {
font-size: 0.875rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--musical-text-primary);
}
.musical-reader__cue-icon {
display: inline-flex;
color: var(--musical-primary-ink);
}
.musical-reader__cue-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.musical-reader__text,
.musical-reader__prose {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 1rem;
line-height: 1.6;
color: var(--musical-text-primary);
}
.musical-reader__quiet {
margin: 0;
font-size: 1rem;
line-height: 1.5;
color: var(--musical-text-secondary);
}
.musical-reader__verdict {
display: flex;
flex-direction: column;
gap: var(--musical-space-lg);
padding: var(--musical-space-lg);
border-radius: var(--musical-radius-lg);
background: #fff;
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-reader__say {
display: grid;
gap: 6px;
}
.musical-reader__say-title {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-reader__reply .musical-btn {
width: 100%;
}
.musical-reader__actions {
display: flex;
flex-wrap: wrap;
gap: 0 var(--musical-space-sm);
padding-block-start: var(--musical-space-sm);
border-block-start: 1px solid var(--musical-border);
}
.musical-reader__act {
min-height: 44px;
padding: 0 var(--musical-space-xs);
border: 0;
background: none;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
cursor: pointer;
}
.musical-reader__act:hover:not(:disabled) {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.musical-reader__act.is-danger {
color: var(--musical-error-ink);
}
.musical-reader__act:disabled {
color: var(--musical-text-secondary);
cursor: not-allowed;
}
.musical-reader__act:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
border-radius: var(--musical-radius-sm);
}
.musical-reader__status {
margin: 0;
font-size: 0.875rem;
color: var(--musical-text-secondary);
}
.musical-reader__status.is-error {
color: var(--musical-error-ink);
}
@container musical-reader (min-width: 44rem) {
.musical-reader__head {
grid-template-columns: 72px minmax(0, 1fr);
gap: var(--musical-space-lg);
}
.musical-reader__art {
width: 72px;
}
.musical-reader__from {
font-size: 1.75rem;
}
.musical-reader__deck {
gap: var(--musical-space-md);
padding: var(--musical-space-lg) var(--musical-space-xl);
}
.musical-reader__which {
flex: 0 1 auto;
margin-inline-start: auto;
text-align: end;
}
}
@container musical-reader (min-width: 56rem) {
.musical-reader__body {
grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
gap: var(--musical-space-2xl);
}
}
@media (max-width: 47.9375em) {
.musical-reader__wave.musical-waveform {
height: 3.5rem;
}
.musical-reader__pins {
--wave: 3.5rem;
}
.musical-reader__wave .musical-seek::-webkit-slider-thumb {
height: 3.5rem;
}
.musical-reader__wave .musical-seek::-moz-range-thumb {
height: 3.5rem;
}
.musical-reader__note {
grid-template-columns: minmax(0, 1fr);
}
.musical-reader__cue {
justify-self: start;
}
}
@media (prefers-reduced-motion: reduce) {
.musical-reader__pin-button,
.musical-reader__note,
.musical-sheet__open {
transition: none;
}
}
.musical-help-dialog {
width: min(58rem, calc(100vw - 2rem));
max-height: calc(100dvh - 2rem);
margin: auto;
padding: 0;
overflow: auto;
border: 0;
border-radius: var(--musical-radius-lg);
background: var(--musical-bg-light);
color: var(--musical-text-primary);
box-shadow: 0 32px 80px -24px rgb(0 0 0 / 55%);
overscroll-behavior: contain;
}
.musical-help-dialog::backdrop {
background: rgb(26 26 26 / 62%);
}
.musical-help-dialog[open] {
animation: musical-help-in var(--musical-duration-smooth) var(--musical-easing-luxe);
}
@keyframes musical-help-in {
from {
opacity: 0;
transform: translateY(14px) scale(0.985);
}
}
.musical-help-dialog[open] {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.musical-help-dialog__close {
position: sticky;
top: 12px;
z-index: 2;
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 12px 12px -56px 0;
border: 0;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%), 0 4px 12px -6px rgb(0 0 0 / 30%);
color: var(--musical-text-primary);
cursor: pointer;
}
.musical-help-dialog__close svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.musical-help-dialog__close:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-help {
container: musical-help / inline-size;
display: grid;
gap: var(--musical-space-xl);
padding: var(--musical-space-lg);
}
.musical-help__head {
display: grid;
gap: var(--musical-space-sm);
padding-inline-end: 44px;
}
@media (max-width: 47.99rem) {
.musical-help-dialog__close {
width: 48px;
height: 48px;
margin: 12px 12px -60px 0;
}
.musical-help__head {
padding-inline-end: 48px;
}
}
.musical-help__title {
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--musical-text-primary);
}
.musical-help__lead {
margin: 0;
max-width: 40rem;
font-size: 1.125rem;
line-height: 1.55;
color: var(--musical-text-secondary);
}
.musical-help__steps {
display: grid;
gap: var(--musical-space-xl) var(--musical-space-lg);
margin: 0;
padding: 0;
list-style: none;
counter-reset: musical-help;
}
.musical-help__step {
display: grid;
gap: var(--musical-space-md);
align-content: start;
counter-increment: musical-help;
}
.musical-help__picture {
display: flex;
align-items: center;
justify-content: center;
min-height: 13rem;
padding: var(--musical-space-md);
overflow: hidden;
border-radius: var(--musical-radius-lg);
background: rgb(0 90 90 / 8%);
}
.musical-help__picture.is-dark {
background: var(--musical-bg-dark);
}
.musical-help__picture.is-grey {
background: rgb(0 0 0 / 5%);
}
.musical-help__words {
display: grid;
gap: 6px;
}
.musical-help__step-title {
display: flex;
align-items: center;
gap: var(--musical-space-sm);
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
}
.musical-help__step-title::before {
content: counter(musical-help);
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--musical-primary-ink);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
font-weight: 700;
color: #fff;
}
.musical-help__words p {
margin: 0;
font-size: 1rem;
line-height: 1.55;
color: var(--musical-text-secondary);
}
.musical-help__facts {
display: grid;
gap: var(--musical-space-sm);
margin: 0;
padding: var(--musical-space-lg) 0 0;
border-block-start: 1px solid var(--musical-border);
list-style: none;
}
.musical-help__facts li {
position: relative;
padding-inline-start: 22px;
font-size: 1rem;
line-height: 1.5;
color: var(--musical-text-primary);
}
.musical-help__facts li::before {
content: "";
position: absolute;
top: 0.55em;
left: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--musical-primary-ink);
}
@container musical-help (min-width: 40rem) {
.musical-help {
gap: var(--musical-space-2xl);
padding: var(--musical-space-xl) var(--musical-space-2xl) var(--musical-space-2xl);
}
.musical-help__title {
font-size: 1.75rem;
}
.musical-help__steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.musical-help-card {
display: grid;
gap: 8px;
width: min(16rem, 92%);
padding: 14px 16px;
border-radius: var(--musical-radius-md);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%), 0 10px 24px -14px rgb(0 0 0 / 35%);
font-size: 0.8125rem;
line-height: 1.35;
color: var(--musical-text-primary);
}
.musical-help-card--actions {
width: auto;
max-width: 92%;
}
.musical-help-card--actions .musical-help-card__row {
flex-wrap: wrap;
}
.musical-help-card--link {
box-shadow: inset 0 0 0 2px var(--musical-primary-ink), 0 10px 24px -14px rgb(0 60 60 / 45%);
}
.musical-help-card__row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.musical-help-card__mark {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: var(--musical-radius-sm);
background: var(--musical-primary-ink);
color: #fff;
}
.musical-help-card__mark svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.musical-help-card__strong {
font-weight: 600;
}
.musical-help-card__muted {
color: var(--musical-text-secondary);
}
.musical-help-card__url {
padding: 6px 8px;
border-radius: var(--musical-radius-sm);
background: var(--musical-bg-light);
font-family: var(--musical-font-mono);
font-size: 0.75rem;
color: var(--musical-text-secondary);
}
.musical-help-card__button {
display: inline-flex;
align-items: center;
gap: 5px;
justify-self: start;
padding: 6px 12px;
border-radius: var(--musical-radius-md);
background: var(--musical-tertiary);
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
color: var(--musical-text-primary);
}
.musical-help-card__button svg {
width: 13px;
height: 13px;
fill: currentColor;
}
.musical-help-card__button.is-quiet {
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 16%);
color: var(--musical-primary-ink);
}
.musical-help-card__field {
padding: 6px 8px;
border-radius: var(--musical-radius-sm);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%);
font-size: 0.75rem;
color: var(--musical-text-primary);
}
.musical-help-card__field.is-typed {
color: var(--musical-text-secondary);
}
.musical-help-card__label {
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--musical-text-secondary);
}
.musical-help-card__line {
height: 6px;
border-radius: 3px;
background: var(--musical-border);
}
.musical-help-card__line.is-short {
width: 58%;
}
.musical-help-card__line.is-mid {
width: 80%;
}
.musical-help-card__dot {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--musical-primary-ink);
}
.musical-help-card__strip {
position: relative;
display: block;
height: 12px;
}
.musical-help-card__strip::before {
content: "";
position: absolute;
inset: 5px 0 auto;
height: 2px;
border-radius: 1px;
background: var(--musical-border);
}
.musical-help-card__strip > span {
position: absolute;
top: 1px;
left: var(--at);
width: 3px;
height: 10px;
border-radius: 2px;
background: var(--musical-primary-ink);
}
.musical-help-card__strip > span.is-span {
top: 2.5px;
width: var(--len);
height: 7px;
border-radius: 4px;
background: rgb(0 90 90 / 45%);
}
.musical-help-deck {
display: grid;
gap: 8px;
width: min(18rem, 94%);
}
.musical-help-deck__pins {
position: relative;
display: block;
height: 22px;
margin: 0 10px;
}
.musical-help-pin {
position: absolute;
top: 0;
left: var(--at);
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--musical-primary);
font-size: 0.6875rem;
font-weight: 700;
color: var(--musical-bg-dark);
transform: translateX(-50%);
}
.musical-help-pin.is-now {
background: var(--musical-tertiary);
}
.musical-help-deck__wave {
position: relative;
display: block;
height: 56px;
margin: 0 10px;
}
.musical-help-wave {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: rgb(245 245 245 / 42%);
}
.musical-help-deck__region {
position: absolute;
inset-block: 0;
left: var(--at);
width: var(--len);
border-inline: 1px solid rgb(0 217 217 / 55%);
background: rgb(0 217 217 / 16%);
}
.musical-help-deck__buttons {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 4px 10px 0;
}
.musical-help-deck__buttons > span {
padding: 5px 10px;
border-radius: var(--musical-radius-pill);
background: rgb(245 245 245 / 12%);
font-size: 0.6875rem;
font-weight: 600;
color: var(--musical-text-light);
}
.musical-help-seg {
display: inline-flex;
gap: 3px;
padding: 3px;
border-radius: var(--musical-radius-md);
background: #fff;
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 16%);
font-size: 0.6875rem;
font-weight: 600;
}
.musical-help-seg > span {
padding: 5px 9px;
border-radius: var(--musical-radius-sm);
color: var(--musical-text-primary);
}
.musical-help-seg > span.is-on {
background: var(--musical-primary-ink);
color: #fff;
}
.musical-help-seg.is-wide {
display: flex;
}
.musical-help-seg.is-wide > span {
flex: 1;
text-align: center;
}
.musical-help-cover {
display: grid;
justify-items: center;
gap: 12px;
}
.musical-help-cover.is-pair {
grid-template-columns: repeat(2, auto);
column-gap: 12px;
}
.musical-help-cover.is-pair .musical-help-cover__controls {
grid-column: 1 / -1;
}
.musical-help-cover__art {
position: relative;
display: block;
width: 104px;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--musical-radius-md);
box-shadow: 0 10px 24px -14px rgb(0 0 0 / 45%);
}
.musical-help-cover__art.is-small {
width: 84px;
}
.musical-help-cover__art svg,
.musical-help-cover__art img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.musical-help-cover__art.is-cropping {
overflow: visible;
outline: 2px dashed rgb(0 90 90 / 60%);
outline-offset: 5px;
}
.musical-help-cover__words {
position: absolute;
inset: auto 0 0;
display: grid;
gap: 1px;
padding: 8px;
font-family: var(--musical-font-display);
color: #fff;
text-shadow: 0 1px 6px rgb(0 0 0 / 70%);
}
.musical-help-cover__artist {
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.musical-help-cover__song {
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.1;
}
.musical-help-cover__controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.musical-help-deck__wave.is-working {
overflow: hidden;
}
.musical-help-deck__scan {
position: absolute;
inset-block: 0;
left: 0;
width: 22%;
background: linear-gradient(90deg, transparent, rgb(0 217 217 / 30%), transparent);
animation: musical-help-scan 2.4s var(--musical-easing-out) infinite;
}
@keyframes musical-help-scan {
from {
transform: translateX(-100%);
}
to {
transform: translateX(460%);
}
}
.musical-help-deck__ab {
display: inline-flex;
justify-self: start;
gap: 3px;
margin: 0 10px;
padding: 3px;
border-radius: var(--musical-radius-pill);
background: rgb(245 245 245 / 10%);
}
.musical-help-deck__ab > span {
padding: 4px 10px;
border-radius: var(--musical-radius-pill);
font-size: 0.6875rem;
font-weight: 600;
color: var(--musical-text-light-dim);
}
.musical-help-deck__ab > span.is-on {
background: var(--musical-primary);
color: var(--musical-bg-dark);
}
.musical-help-deck__pair {
display: grid;
gap: 6px;
}
.musical-help-deck__pair .musical-help-deck__wave {
height: 34px;
}
.musical-help-deck__wave.is-dim .musical-help-wave {
fill: rgb(245 245 245 / 26%);
}
.musical-help-wave.is-bright {
fill: var(--musical-primary);
}
@media (prefers-reduced-motion: reduce) {
.musical-help-dialog[open],
.musical-help-deck__scan {
animation: none;
}
}
.musical-stems-band {
position: relative;
isolation: isolate;
overflow: hidden;
}
.musical-stems-band::before {
content: "";
position: absolute;
inset: 0 0 auto;
z-index: -2;
height: min(100%, 34rem);
background: url("../img/stems-band-bg.webp") 72% 62% / cover no-repeat;
mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.musical-stems-band::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(26 26 26 / 86%);
}
@media (min-width: 64rem) {
.musical-stems-band::after {
background: linear-gradient(
90deg,
rgb(26 26 26 / 94%) 0%,
rgb(26 26 26 / 92%) 70%,
rgb(26 26 26 / 45%) 100%
);
}
}
@media (min-width: 80rem) {
.musical-stems-band::after {
background: linear-gradient(
90deg,
rgb(26 26 26 / 94%) 0%,
rgb(26 26 26 / 90%) 55%,
rgb(26 26 26 / 35%) 80%,
rgb(26 26 26 / 25%) 100%
);
}
}
.musical-stems-band .musical-body-l {
color: var(--musical-text-light);
}
.musical-stems-story,
.musical-stems-story * {
box-sizing: border-box;
}
.musical-stems-story {
--musical-lane-height: 2.75rem;
--musical-lane-gap: var(--musical-space-sm);
--musical-played: 62%;
display: grid;
gap: var(--musical-space-lg);
margin-block-start: var(--musical-space-xl);
}
.musical-stems-story > * {
min-width: 0;
}
.musical-stems-story__figure {
display: grid;
gap: var(--musical-space-md);
margin: 0;
}
.musical-stems-story__stage {
display: grid;
gap: var(--musical-space-lg);
align-items: start;
}
@media (min-width: 64rem) {
.musical-stems-story__stage {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: var(--musical-space-2xl);
align-items: center;
}
}
.musical-stems-story__split {
display: grid;
gap: var(--musical-lane-gap);
min-width: 0;
}
.musical-stems-story__mix,
.musical-stems-story__lane {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
align-items: center;
gap: var(--musical-space-md);
height: var(--musical-lane-height);
}
.musical-stems-story__mix {
height: calc(var(--musical-lane-height) * 1.5);
margin-block-end: var(--musical-space-sm);
padding-block-end: var(--musical-space-md);
border-block-end: 1px solid rgb(245 245 245 / 22%);
box-sizing: content-box;
}
.musical-stems-story__mix-label,
.musical-stems-story__lane-name {
font-family: var(--musical-font-body);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.25;
color: var(--musical-text-light);
}
.musical-stems-story__lane-name {
display: grid;
padding-inline-start: var(--musical-space-sm);
border-inline-start: 3px solid var(--musical-lane-hue);
}
.musical-stems-story__lane.is-vocals { --musical-lane-hue: var(--musical-primary); }
.musical-stems-story__lane.is-drums { --musical-lane-hue: var(--musical-secondary); }
.musical-stems-story__lane.is-bass { --musical-lane-hue: var(--musical-tertiary); }
.musical-stems-story__lane.is-other { --musical-lane-hue: var(--musical-text-light); }
.musical-stems-story__mix { --musical-lane-hue: var(--musical-text-light); }
.musical-stems-story__muted {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--musical-primary);
}
.musical-stems-story__lanes {
position: relative;
display: grid;
gap: var(--musical-lane-gap);
}
.musical-stems-story__wave {
position: relative;
display: block;
height: 100%;
min-width: 0;
}
.musical-stems-story__bars {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: rgb(245 245 245 / 30%);
}
.musical-stems-story__bars.is-played {
fill: var(--musical-lane-hue);
clip-path: inset(0 calc(100% - var(--musical-played)) 0 0);
}
.musical-stems-story__lane.is-vocals .musical-stems-story__wave {
transform: scaleY(0.12);
}
.musical-stems-story__playhead {
position: absolute;
inset-block: -4px;
left: calc(4.5rem + var(--musical-space-md));
right: 0;
pointer-events: none;
}
.musical-stems-story__playhead {
overflow: hidden;
}
.musical-stems-story__playhead::before {
content: "";
position: absolute;
inset: 0;
border-inline-end: 2px solid var(--musical-tertiary);
transform: translateX(calc(var(--musical-played) - 100%));
}
.musical-stems-story__player {
container: musical-stems-player / inline-size;
display: grid;
gap: var(--musical-space-sm);
min-width: 0;
padding: var(--musical-space-md);
border-radius: var(--musical-radius-lg);
background: #f3f2ef;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.2;
color: var(--musical-text-primary);
}
.musical-stems-story__transport {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"play seek time"
"practice practice practice";
align-items: center;
gap: var(--musical-space-sm) var(--musical-space-md);
}
.musical-stems-story__transport > .musical-stems-story__button { grid-area: play; }
.musical-stems-story__seek { grid-area: seek; }
.musical-stems-story__time { grid-area: time; }
.musical-stems-story__practice { grid-area: practice; justify-self: start; }
.musical-stems-story__button,
.musical-stems-story__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.25rem;
padding: 0 var(--musical-space-md);
white-space: nowrap;
}
.musical-stems-story__button {
justify-self: start;
border-radius: var(--musical-radius-md);
background: var(--musical-bg-light);
box-shadow: inset 0 0 0 1px var(--musical-border);
color: var(--musical-primary-ink);
}
.musical-stems-story__toggle {
border: 1px solid rgb(0 0 0 / 16%);
border-radius: var(--musical-radius-pill);
background: var(--musical-bg-light);
}
.musical-stems-story__practice {
border-color: var(--musical-primary-ink);
background: var(--musical-primary-ink);
color: var(--musical-text-light);
}
.musical-stems-story__seek,
.musical-stems-story__level {
position: relative;
display: block;
height: 4px;
border-radius: var(--musical-radius-pill);
}
.musical-stems-story__seek {
background: var(--musical-text-secondary);
}
.musical-stems-story__seek-fill {
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--musical-primary-ink);
transform: scaleX(0.62);
transform-origin: left center;
}
.musical-stems-story__seek-thumb::after,
.musical-stems-story__level-thumb {
position: absolute;
top: -4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--musical-tertiary);
box-shadow: 0 1px 4px rgb(0 0 0 / 40%);
}
.musical-stems-story__seek-thumb {
position: absolute;
inset: 0;
transform: translateX(calc(var(--musical-played) - 100%));
}
.musical-stems-story__seek-thumb::after {
content: "";
right: -6px;
}
.musical-stems-story__level {
background: var(--musical-primary-ink);
}
.musical-stems-story__level-thumb {
right: 0;
}
.musical-stems-story__time {
font-family: var(--musical-font-mono);
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.musical-stems-story__rows {
display: grid;
gap: var(--musical-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.musical-stems-story__row {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr);
grid-template-areas:
"name name download"
"mute solo level";
align-items: center;
gap: var(--musical-space-sm);
padding: var(--musical-space-sm) var(--musical-space-md);
border: 1px solid rgb(0 0 0 / 10%);
border-radius: var(--musical-radius-md);
background: var(--musical-bg-light);
}
.musical-stems-story__name { grid-area: name; font-size: 0.875rem; }
.musical-stems-story__toggle.is-mute { grid-area: mute; }
.musical-stems-story__toggle.is-solo { grid-area: solo; }
.musical-stems-story__level { grid-area: level; }
.musical-stems-story__download {
grid-area: download;
justify-self: end;
color: var(--musical-primary-ink);
text-decoration: underline;
text-underline-offset: 0.25em;
}
@container musical-stems-player (min-width: 30rem) {
.musical-stems-story__transport {
grid-template-columns: auto minmax(0, 1fr) auto auto;
grid-template-areas: "play seek time practice";
}
.musical-stems-story__row {
grid-template-columns: minmax(6.5rem, 1fr) auto auto minmax(3rem, 6rem) auto;
grid-template-areas: "name mute solo level download";
}
}
.musical-stems-story__caption {
max-width: 45rem;
margin: 0;
text-align: start;
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--musical-text-light-dim);
}
.musical-stems-story__replay {
justify-self: start;
}
.musical-stems-story__replay[hidden] {
display: none;
}
.musical-stems-story__replay svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.musical-stems-story__facts {
display: grid;
gap: var(--musical-space-sm) var(--musical-space-xl);
margin: 0;
padding: var(--musical-space-lg) 0 0;
border-block-start: 1px solid rgb(245 245 245 / 22%);
list-style: none;
}
@media (min-width: 48rem) {
.musical-stems-story__facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.musical-stems-story__facts li {
position: relative;
padding-inline-start: 22px;
font-family: var(--musical-font-body);
font-size: 1rem;
line-height: 1.5;
color: var(--musical-text-light);
}
.musical-stems-story__facts li::before {
content: "";
position: absolute;
top: 0.55em;
left: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--musical-primary);
}
@media (prefers-reduced-motion: no-preference) {
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__lane,
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__player,
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__playhead,
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__muted {
opacity: 0;
}
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__bars.is-played {
clip-path: inset(0 100% 0 0);
}
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__lane.is-vocals .musical-stems-story__wave {
transform: none;
}
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__practice {
border-color: rgb(0 0 0 / 16%);
background: var(--musical-bg-light);
color: var(--musical-text-primary);
}
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__seek-fill {
transform: scaleX(0);
}
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__seek-thumb,
.musical-stems-story.is-armed:not(.is-playing) .musical-stems-story__playhead::before {
transform: translateX(-100%);
}
.musical-stems-story.is-playing .musical-stems-story__mix .musical-stems-story__wave {
animation: musical-stems-rise var(--musical-duration-luxe) var(--musical-easing-luxe) both;
}
.musical-stems-story.is-playing .musical-stems-story__lane {
animation: musical-stems-split var(--musical-duration-luxe) var(--musical-easing-luxe) both;
animation-delay: calc(0.5s + var(--musical-lane) * 0.12s);
}
.musical-stems-story.is-playing .musical-stems-story__player {
animation: musical-stems-arrive var(--musical-duration-smooth) var(--musical-easing-out) 1.3s both;
}
.musical-stems-story.is-playing .musical-stems-story__playhead {
animation: musical-fade var(--musical-duration-quick) var(--musical-easing-out) 2s both;
}
.musical-stems-story.is-playing .musical-stems-story__playhead::before,
.musical-stems-story.is-playing .musical-stems-story__seek-thumb {
animation: musical-stems-run 5.2s linear 2s both;
}
.musical-stems-story.is-playing .musical-stems-story__bars.is-played {
animation: musical-stems-paint 5.2s linear 2s both;
}
.musical-stems-story.is-playing .musical-stems-story__seek-fill {
animation: musical-stems-fill 5.2s linear 2s both;
}
.musical-stems-story.is-playing .musical-stems-story__practice {
animation: musical-stems-press var(--musical-duration-smooth) var(--musical-easing-out) 4.2s both;
}
.musical-stems-story.is-playing .musical-stems-story__lane.is-vocals .musical-stems-story__wave {
animation: musical-stems-hush var(--musical-duration-smooth) var(--musical-easing-out) 4.4s both;
}
.musical-stems-story.is-playing .musical-stems-story__muted {
animation: musical-fade var(--musical-duration-quick) var(--musical-easing-out) 4.6s both;
}
}
@keyframes musical-stems-rise {
from {
opacity: 0.4;
transform: scaleY(0.08);
}
}
@keyframes musical-stems-split {
from {
opacity: 0;
transform: translateY(calc(-1 * (var(--musical-lane) + 1) * (var(--musical-lane-height) + var(--musical-lane-gap)) - var(--musical-space-md)));
}
30% {
opacity: 1;
}
to {
opacity: 1;
}
}
@keyframes musical-stems-arrive {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
}
}
@keyframes musical-stems-run {
from {
transform: translateX(-100%);
}
}
@keyframes musical-stems-paint {
from {
clip-path: inset(0 100% 0 0);
}
}
@keyframes musical-stems-fill {
from {
transform: scaleX(0);
}
}
@keyframes musical-stems-press {
from {
border-color: rgb(0 0 0 / 16%);
background: var(--musical-bg-light);
color: var(--musical-text-primary);
transform: none;
}
45% {
border-color: rgb(0 0 0 / 16%);
background: var(--musical-bg-light);
color: var(--musical-text-primary);
transform: scale(0.96);
}
}
@keyframes musical-stems-hush {
from {
transform: none;
}
}
.musical-playlist-strip {
margin-top: var(--musical-space-xl);
}
.musical-playlist-strip__heading {
margin: 0 0 var(--musical-space-sm);
}
.musical-playlist-strip__list {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.musical-playlist-strip__link {
display: inline-flex;
align-items: center;
gap: var(--musical-space-sm);
min-height: 44px;
padding: 0 var(--musical-space-lg);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
text-decoration: none;
overflow-wrap: anywhere;
transition:
background var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-playlist-strip__link:hover {
background: var(--musical-bg-light);
border-color: var(--musical-text-secondary);
}
.musical-playlist-strip__link:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-playlist-strip__count {
font-weight: 400;
color: var(--musical-text-secondary);
white-space: nowrap;
}
@media (max-width: 30rem) {
.musical-playlist-strip__list > li:nth-child(n + 7) {
display: none;
}
}
:root {
--musical-rating-1: #f7c3d3;
--musical-rating-2: #f3a6bf;
--musical-rating-3: #ee88a9;
--musical-rating-4: #e86a93;
--musical-rating-5: #df4d7c;
--musical-rating-6: #d13466;
--musical-rating-7: #bd2152;
--musical-rating-8: #a51b44;
--musical-rating-9: #8c1638;
--musical-rating-10: #73102c;
--musical-rating-11: #ff2e63;
--musical-rating-dark-1: #faccdc;
--musical-rating-dark-2: #fcbfd2;
--musical-rating-dark-3: #fcb2c8;
--musical-rating-dark-4: #fca6bc;
--musical-rating-dark-5: #fb99af;
--musical-rating-dark-6: #fa8ca2;
--musical-rating-dark-7: #f97f93;
--musical-rating-dark-8: #f77283;
--musical-rating-dark-9: #f56572;
--musical-rating-dark-10: #f2575f;
--musical-knob-off: #8a8a8a;
--musical-knob-track: #e5e5e5;
--musical-knob-face: #1d1d1d;
--musical-knob-face-edge: transparent;
--musical-knob-eleven-ink: #ff2e63;
--musical-knob-keyline: var(--musical-secondary-ink);
}
.musical-player,
.musical-section--media .musical-track-card--list {
--musical-knob-track: #3a3a3a;
--musical-knob-face: #2e2e2e;
--musical-knob-face-edge: #4a4a4a;
--musical-knob-eleven-ink: #ff6088;
--musical-knob-keyline: transparent;
}
.musical-player,
.musical-section--media .musical-track-card--list,
.musical-track-card__badge,
.musical-artist-directory--grid .musical-artist-directory__rating,
.musical-rating-filter.is-on,
.musical-applause {
--musical-rating-1: var(--musical-rating-dark-1);
--musical-rating-2: var(--musical-rating-dark-2);
--musical-rating-3: var(--musical-rating-dark-3);
--musical-rating-4: var(--musical-rating-dark-4);
--musical-rating-5: var(--musical-rating-dark-5);
--musical-rating-6: var(--musical-rating-dark-6);
--musical-rating-7: var(--musical-rating-dark-7);
--musical-rating-8: var(--musical-rating-dark-8);
--musical-rating-9: var(--musical-rating-dark-9);
--musical-rating-10: var(--musical-rating-dark-10);
}
.musical-knob--1 { --musical-knob-level: var(--musical-rating-1); }
.musical-knob--2 { --musical-knob-level: var(--musical-rating-2); }
.musical-knob--3 { --musical-knob-level: var(--musical-rating-3); }
.musical-knob--4 { --musical-knob-level: var(--musical-rating-4); }
.musical-knob--5 { --musical-knob-level: var(--musical-rating-5); }
.musical-knob--6 { --musical-knob-level: var(--musical-rating-6); }
.musical-knob--7 { --musical-knob-level: var(--musical-rating-7); }
.musical-knob--8 { --musical-knob-level: var(--musical-rating-8); }
.musical-knob--9 { --musical-knob-level: var(--musical-rating-9); }
.musical-knob--10 { --musical-knob-level: var(--musical-rating-10); }
.musical-knob--11 { --musical-knob-level: var(--musical-rating-11); }
.musical-knob {
display: inline-grid;
place-items: center;
flex: none;
}
.musical-knob__svg {
display: block;
overflow: visible;
}
.musical-knob__track,
.musical-knob__notch,
.musical-knob__arc,
.musical-knob__edge,
.musical-knob__idle {
fill: none;
stroke-linecap: round;
}
.musical-knob__track,
.musical-knob__notch {
stroke: var(--musical-knob-track);
}
.musical-knob__arc,
.musical-knob--11 .musical-knob__notch {
stroke: var(--musical-knob-level);
}
.musical-knob__edge {
stroke: transparent;
}
.musical-knob--1 .musical-knob__edge,
.musical-knob--2 .musical-knob__edge,
.musical-knob--3 .musical-knob__edge,
.musical-knob--4 .musical-knob__edge {
stroke: var(--musical-knob-keyline);
}
.musical-knob__face {
fill: var(--musical-knob-face);
stroke: var(--musical-knob-face-edge);
stroke-width: 1;
}
.musical-knob__dot {
fill: var(--musical-knob-level);
}
.musical-knob__idle {
stroke: var(--musical-knob-off);
}
.musical-knob__num {
fill: var(--musical-text-light);
font-family: var(--musical-font-display);
font-weight: 700;
font-variant-numeric: tabular-nums;
text-anchor: middle;
dominant-baseline: central;
}
.musical-knob--11 .musical-knob__num {
fill: var(--musical-knob-eleven-ink);
}
.musical-knob__tick text {
fill: #8c8c8c;
font-family: var(--musical-font-body);
font-size: 10px;
font-weight: 600;
text-anchor: middle;
dominant-baseline: central;
}
.musical-knob__tick.is-lit text {
fill: var(--musical-text-light);
}
.musical-knob__tick--11 text {
font-size: 12px;
font-weight: 700;
}
.musical-knob__tick--11.is-lit text {
fill: var(--musical-knob-eleven-ink);
}
.musical-knob__hit {
fill: transparent;
cursor: pointer;
}
.musical-knob--glyph .musical-knob__track,
.musical-knob--glyph .musical-knob__idle {
stroke: currentColor;
}
.musical-knob--glyph .musical-knob__face {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
}
.musical-track-card__rating,
.musical-artist-directory__rating {
display: inline-flex;
flex: none;
justify-content: center;
min-width: 24px;
}
.musical-track-card__badge,
.musical-artist-directory--grid .musical-artist-directory__rating {
--musical-knob-track: #3a3a3a;
--musical-knob-face: #2e2e2e;
--musical-knob-face-edge: #4a4a4a;
--musical-knob-eleven-ink: #ff6088;
--musical-knob-keyline: transparent;
position: absolute;
z-index: 1;
display: grid;
place-items: center;
min-width: 0;
border-radius: 50%;
background: #1d1d1d;
box-shadow: 0 0 0 2px rgb(255 255 255 / 85%);
pointer-events: none;
}
.musical-track-card__badge:empty,
.musical-artist-directory--grid .musical-artist-directory__rating:empty {
display: none;
}
.musical-track-card__badge {
inset-block-start: var(--musical-space-sm);
inset-inline-start: var(--musical-space-sm);
}
.musical-artist-directory__face {
position: relative;
flex: none;
display: block;
line-height: 0;
}
.musical-artist-directory--grid .musical-artist-directory__rating {
inset-block-end: -3px;
inset-inline-end: 0;
}
[data-musical-rating-slot] .musical-knob--11 .musical-knob__svg {
filter: drop-shadow(0 0 3px rgb(255 46 99 / 60%));
}
.musical-track-card__badge[data-musical-rating-painted="11"] {
box-shadow:
0 0 0 2px rgb(255 255 255 / 85%),
0 0 8px 2px rgb(255 46 99 / 55%);
}
.musical-artist-directory--grid .musical-artist-directory__rating[data-musical-rating-painted="11"] {
box-shadow:
0 0 0 2px rgb(255 255 255 / 85%),
0 0 5px 1px rgb(255 46 99 / 55%);
}
@media (prefers-reduced-motion: no-preference) {
[data-musical-rating-slot] .musical-knob.is-shimmering .musical-knob__svg {
animation: musical-knob-shimmer-halo calc(var(--musical-duration-luxe) + var(--musical-duration-quick)) 1;
}
[data-musical-rating-slot] .musical-knob.is-shimmering .musical-knob__arc {
animation: musical-knob-shimmer-arc calc(var(--musical-duration-luxe) + var(--musical-duration-quick)) 1;
}
.musical-reveal [data-musical-rating-slot] .musical-knob.is-shimmering .musical-knob__svg,
.musical-reveal [data-musical-rating-slot] .musical-knob.is-shimmering .musical-knob__arc {
animation-delay: calc(var(--musical-reveal-delay, 0ms) + var(--musical-duration-smooth));
}
.musical-js .musical-reveal:not(.is-revealed) [data-musical-rating-slot] .musical-knob.is-shimmering .musical-knob__svg,
.musical-js .musical-reveal:not(.is-revealed) [data-musical-rating-slot] .musical-knob.is-shimmering .musical-knob__arc {
animation-play-state: paused;
}
}
@keyframes musical-knob-shimmer-halo {
0% {
filter: drop-shadow(0 0 3px rgb(255 46 99 / 60%));
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
75% {
filter: drop-shadow(0 0 7px rgb(255 96 136 / 95%));
animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.92);
}
100% {
filter: drop-shadow(0 0 3px rgb(255 46 99 / 60%));
}
}
@keyframes musical-knob-shimmer-arc {
0% {
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
75% {
stroke: #ffc2d1;
stroke-width: 4px;
animation-timing-function: cubic-bezier(0.2, 0, 0.38, 0.92);
}
}
.musical-knob-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--musical-space-xs);
min-width: 48px;
height: 48px;
padding: 0 9px;
border: 0;
border-radius: var(--musical-radius-pill);
background: transparent;
color: rgb(245 245 245 / 65%);
cursor: pointer;
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-knob-trigger:not(.is-rated) {
padding-inline-end: var(--musical-space-sm);
}
.musical-knob-trigger[hidden],
.musical-knob-trigger__word[hidden] {
display: none;
}
.musical-knob-trigger:hover {
background: rgb(255 255 255 / 10%);
color: var(--musical-text-light);
}
.musical-knob-trigger:focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 3px;
}
.musical-knob-trigger__word {
font-family: var(--musical-font-body);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
}
.musical-player__meta:has(.musical-knob-pop) {
position: relative;
}
.musical-knob-pop {
position: absolute;
z-index: 30;
top: var(--musical-knob-pop-top, calc(100% + var(--musical-space-sm)));
right: var(--musical-knob-pop-right, 0);
display: grid;
justify-items: center;
gap: var(--musical-space-xs);
width: 220px;
padding: var(--musical-space-md) var(--musical-space-md) var(--musical-space-sm);
border: 1px solid #333;
border-radius: var(--musical-radius-lg);
background: #242424;
box-shadow: 0 12px 32px rgb(0 0 0 / 55%);
color: var(--musical-text-light);
text-align: center;
}
.musical-knob-pop[hidden] {
display: none;
}
.musical-knob--big {
width: 170px;
height: 170px;
margin-block-end: var(--musical-space-sm);
border-radius: 50%;
touch-action: none;
cursor: ns-resize;
user-select: none;
-webkit-user-select: none;
}
.musical-knob--big:focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 8px;
}
.musical-knob-pop__state {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.9375rem;
font-weight: 600;
color: var(--musical-text-light-dim);
}
.musical-knob-pop__hint,
.musical-knob-pop__note {
margin: 0;
font-family: var(--musical-font-body);
color: var(--musical-text-light-dim);
text-wrap: pretty;
}
.musical-knob-pop__hint {
font-size: 0.8125rem;
line-height: 1.35;
}
.musical-knob-pop__note {
font-size: 0.75rem;
line-height: 1.4;
color: rgb(245 245 245 / 62%);
}
.musical-knob-pop__actions {
display: flex;
justify-content: flex-end;
justify-self: stretch;
}
.musical-knob-pop__btn {
min-width: 44px;
min-height: 44px;
padding: 0 var(--musical-space-sm);
border: 0;
border-radius: var(--musical-radius-md);
background: none;
color: var(--musical-primary);
font-family: var(--musical-font-body);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
}
.musical-knob-pop__btn:hover {
background: rgb(0 217 217 / 10%);
}
.musical-knob-pop__btn:focus-visible {
outline: 2px solid var(--musical-primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.musical-knob-pop:not([hidden]) {
animation: musical-knob-pop-in var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-knob.is-cranked .musical-knob__arc,
.musical-knob.is-cranked .musical-knob__notch {
animation: musical-knob-crank var(--musical-duration-luxe) var(--musical-easing-luxe);
}
}
@keyframes musical-knob-pop-in {
from {
opacity: 0;
transform: translateY(-4px) scale(0.97);
}
}
@keyframes musical-knob-crank {
from {
stroke: #ffc2d1;
stroke-width: 10px;
}
}
.musical-rating-head {
display: flex;
justify-content: flex-end;
gap: var(--musical-space-xs);
margin-block-end: var(--musical-space-xs);
}
.musical-rating-head[hidden] {
display: none;
}
.musical-rating-share-import {
margin-block: 0 var(--musical-space-lg);
padding: var(--musical-space-md);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
}
.musical-rating-share-import__actions {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
margin: var(--musical-space-sm) 0 0;
}
.musical-rating-share-import__theirs {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
}
.musical-rating-share {
margin-block: 0 var(--musical-space-md);
}
.musical-rating-share[hidden] {
display: none;
}
.musical-rating-share__menu {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
margin-top: var(--musical-space-sm);
padding: var(--musical-space-md);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-lg);
}
.musical-rating-share__email {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: var(--musical-space-sm);
flex-basis: 100%;
}
.musical-rating-share__email .musical-label {
flex-basis: 100%;
}
.musical-rating-share__email .musical-input {
flex: 1 1 10rem;
width: auto;
min-width: 0;
min-height: 44px;
padding-block: 0.5rem;
padding-inline: 0.75rem;
}
.musical-rating-share__email .musical-btn {
flex: none;
min-height: 44px;
padding-block: 0;
}
@media (max-width: 47.9375rem) {
.musical-rating-share__email .musical-input,
.musical-rating-share__email .musical-btn {
min-height: 48px;
}
}
.musical-rating-share__status {
flex-basis: 100%;
margin: 0;
}
.musical-rating-share__status:empty {
display: none;
}
.musical-rating-share__menu[hidden],
.musical-rating-share__menu [hidden] {
display: none;
}
.musical-rating-sort {
display: inline-flex;
align-items: center;
gap: 2px;
min-width: 44px;
min-height: 44px;
padding: 0 var(--musical-space-sm);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
background: none;
color: var(--musical-text-secondary);
cursor: pointer;
}
.musical-rating-sort__arrow {
font-size: 0.75rem;
line-height: 1;
}
.musical-rating-sort[aria-pressed="true"] {
border-color: var(--musical-rating-8);
color: var(--musical-rating-8);
}
.musical-rating-sort:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-rating-filter {
--musical-knob-eleven-ink: #ff6088;
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
min-width: 44px;
min-height: 44px;
padding: 0 var(--musical-space-sm);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-md);
background: none;
color: var(--musical-text-secondary);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
cursor: pointer;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-rating-filter:hover {
border-color: var(--musical-text-secondary);
color: var(--musical-text-primary);
}
.musical-rating-filter.is-on {
border-color: #1d1d1d;
background: #1d1d1d;
color: var(--musical-text-light);
}
.musical-rating-filter.is-on:hover {
background: #333;
}
.musical-rating-filter.is-on .musical-knob--glyph .musical-knob__track {
stroke: rgb(245 245 245 / 35%);
}
.musical-rating-filter:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
}
.musical-rating-filter__readout:empty {
display: none;
}
[data-musical-queue-start][aria-disabled="true"] {
opacity: 0.55;
cursor: default;
}
.musical-rating-filter .musical-knob--11 .musical-knob__svg,
.musical-knob-pop--filter .musical-knob--11 .musical-knob__svg {
filter: drop-shadow(0 0 3px rgb(255 46 99 / 60%));
}
@media (prefers-reduced-motion: no-preference) {
.musical-rating-filter .musical-knob.is-shimmering .musical-knob__svg,
.musical-knob-pop--filter .musical-knob.is-shimmering .musical-knob__svg {
animation: musical-knob-shimmer-halo calc(var(--musical-duration-luxe) + var(--musical-duration-quick)) 1;
}
.musical-rating-filter .musical-knob.is-shimmering .musical-knob__arc {
animation: musical-knob-shimmer-arc calc(var(--musical-duration-luxe) + var(--musical-duration-quick)) 1;
}
}
.musical-knob-pop--filter {
border-color: var(--musical-border);
background: #fff;
box-shadow: var(--musical-shadow-lift);
color: var(--musical-text-primary);
}
.musical-knob-pop--filter .musical-knob-pop__state {
color: var(--musical-text-primary);
}
.musical-knob-pop--filter .musical-knob-pop__hint {
color: var(--musical-text-secondary);
}
.musical-knob-pop--filter .musical-knob__tick text {
fill: var(--musical-text-secondary);
}
.musical-knob-pop--filter .musical-knob__tick.is-lit text {
fill: var(--musical-text-primary);
}
.musical-knob-pop--filter .musical-knob__tick--11.is-lit text {
fill: #d6004a;
}
.musical-knob-pop--filter .musical-knob--big:focus-visible,
.musical-knob-pop--filter .musical-knob-pop__btn:focus-visible {
outline-color: var(--musical-primary-ink);
}
.musical-knob-pop--filter .musical-knob-pop__btn {
color: var(--musical-primary-ink);
}
.musical-knob-pop--filter .musical-knob-pop__btn:hover {
background: rgb(0 90 90 / 8%);
}
.musical-rating-filter__empty {
max-width: 38rem;
margin-block: var(--musical-space-md) var(--musical-space-xl);
}
.musical-rating-filter__empty[hidden],
.musical-group[hidden],
[data-musical-queue-rows] > [hidden] {
display: none;
}
.musical-js [data-musical-queue-rows] > .is-filter-leaving,
.musical-js .musical-artist-directory__list > .is-filter-leaving {
opacity: 0;
transform: scale(0.94);
pointer-events: none;
}
.musical-js [data-musical-queue-rows] > .is-filter-leaving,
.musical-js [data-musical-queue-rows] > .is-filter-returning,
.musical-js .musical-artist-directory__list > .is-filter-leaving,
.musical-js .musical-artist-directory__list > .is-filter-returning {
transition:
opacity var(--musical-duration-quick) var(--musical-easing-out),
transform var(--musical-duration-quick) var(--musical-easing-out);
transition-delay: 0s !important;
}
.musical-js [data-musical-queue-rows] > .is-filter-coming,
.musical-js .musical-artist-directory__list > .is-filter-coming {
animation: musical-filter-in var(--musical-duration-quick) var(--musical-easing-out) var(--musical-duration-quick) backwards;
}
@keyframes musical-filter-in {
from {
opacity: 0;
transform: scale(0.94);
}
}
@media (prefers-reduced-motion: reduce) {
.musical-js [data-musical-queue-rows] > .is-filter-leaving,
.musical-js [data-musical-queue-rows] > .is-filter-returning,
.musical-js [data-musical-queue-rows] > .is-filter-coming,
.musical-js .musical-artist-directory__list > .is-filter-leaving,
.musical-js .musical-artist-directory__list > .is-filter-returning,
.musical-js .musical-artist-directory__list > .is-filter-coming {
transition: none;
animation: none;
}
}
.musical-rated,
.musical-rated ~ .musical-starred-strip {
width: 100%;
max-width: 56rem;
}
.musical-rated ~ .musical-starred-strip {
margin-block: var(--musical-space-2xl) 0;
}
.musical-rated__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--musical-space-sm) var(--musical-space-md);
margin-block: 0 var(--musical-space-lg);
}
.musical-rated__controls .musical-catalogue__transport {
margin-block: 0;
}
.musical-rated__tools {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--musical-space-xs);
}
.musical-rated__tools .musical-rating-head {
margin: 0;
}
.musical-rated__tools .musical-rating-share:not([hidden]) {
display: contents;
}
.musical-rated__tools .musical-rating-share__menu {
position: absolute;
z-index: 30;
top: calc(100% + var(--musical-space-sm));
right: 0;
width: min(22rem, calc(100vw - 2 * var(--musical-space-md)));
margin: 0;
background: #fff;
box-shadow: var(--musical-shadow-lift);
}
.musical-rated__tools .musical-rating-share__menu[hidden] {
display: none;
}
.musical-rating-sort--labelled {
gap: var(--musical-space-xs);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
}
.musical-rating-sort--labelled .musical-rating-sort__arrow {
order: -1;
margin-inline-end: -0.125rem;
}
.musical-rating-sort--labelled .musical-rating-sort__knob {
order: -2;
}
@media (max-width: 47.9375rem) {
.musical-rated__tools .musical-rating-sort,
.musical-rated__tools .musical-rating-filter,
.musical-rated__tools .musical-rating-share .musical-btn {
min-height: 48px;
}
.musical-rated__tools {
flex-wrap: nowrap;
}
.musical-rated__controls {
position: relative;
}
.musical-rated__tools {
position: static;
}
.musical-rated__tools .musical-rating-share__menu {
left: 0;
right: 0;
width: auto;
}
}
.musical-rated .musical-track-card--list .musical-track-card__meta > .musical-track-card__rating {
order: 99;
min-width: 30px;
margin-inline-start: var(--musical-space-xs);
}
.musical-rated .musical-track-card--list .musical-track-card__meta > .musical-share-btn {
order: 100;
}
.musical-rated__tools .musical-rating-share .musical-btn {
min-height: 44px;
padding-block: 0;
padding-inline: var(--musical-space-md);
font-size: 0.875rem;
}
.musical-rated__note {
max-width: 38rem;
margin-block: var(--musical-space-xl) 0;
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.5;
color: var(--musical-text-secondary);
text-wrap: pretty;
}
.musical-rated__none-up {
max-width: 38rem;
margin-block: 0 var(--musical-space-lg);
color: var(--musical-text-secondary);
}
.musical-rated__low {
margin-block-start: var(--musical-space-xl);
border-block-start: 1px solid var(--musical-border);
}
.musical-rated__low-summary {
display: flex;
align-items: baseline;
gap: var(--musical-space-sm);
min-height: 48px;
padding-block: var(--musical-space-sm);
cursor: pointer;
list-style: none;
}
.musical-rated__low-summary::-webkit-details-marker {
display: none;
}
.musical-rated__low-summary::after {
content: "";
width: 0.5rem;
height: 0.5rem;
margin-inline-start: auto;
align-self: center;
border-right: 2px solid currentcolor;
border-bottom: 2px solid currentcolor;
color: var(--musical-text-secondary);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-rated__low[open] > .musical-rated__low-summary::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
.musical-rated__low-summary:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 2px;
border-radius: var(--musical-radius-sm);
}
.musical-rated__low-count {
font-family: var(--musical-font-body);
font-size: 0.875rem;
color: var(--musical-text-secondary);
font-variant-numeric: tabular-nums;
}
.musical-rated__low-note {
margin-block: 0 var(--musical-space-sm);
color: var(--musical-text-secondary);
}
.musical-rated__empty {
display: grid;
justify-items: center;
gap: var(--musical-space-sm);
max-width: 34rem;
margin-inline: auto;
padding-block: var(--musical-space-xl) var(--musical-space-2xl);
text-align: center;
}
@media (min-width: 48rem) {
.musical-rated__empty {
justify-items: start;
margin-inline: 0;
text-align: start;
}
}
.musical-rated__empty > h2,
.musical-rated__empty > p {
margin: 0;
text-wrap: balance;
}
.musical-rated__empty > .musical-body {
color: var(--musical-text-secondary);
text-wrap: pretty;
}
.musical-rated__empty-action {
margin-block-start: var(--musical-space-sm) !important;
}
.musical-rated__knob {
display: block;
width: 170px;
height: 170px;
margin-block-end: var(--musical-space-xs);
}
.musical-rated__knob .musical-knob__svg {
display: block;
filter: drop-shadow(0 0 6px rgb(255 46 99 / 45%));
}
.musical-rated__knob .musical-knob__hit {
cursor: default;
}
.musical-rated__knob .musical-knob__tick text {
fill: var(--musical-text-secondary);
}
.musical-rated__knob .musical-knob__tick.is-lit text {
fill: var(--musical-text-primary);
}
.musical-rated__knob .musical-knob__tick--11.is-lit text {
fill: #d6004a;
}
@media (prefers-reduced-motion: no-preference) {
.musical-rated__knob .musical-knob__arc,
.musical-rated__knob .musical-knob__edge {
stroke-dasharray: 1;
animation: musical-rated-knob-sweep calc(2 * var(--musical-duration-luxe)) var(--musical-easing-out) var(--musical-duration-smooth) backwards;
}
.musical-rated__knob .musical-knob__dot,
.musical-rated__knob .musical-knob__num {
animation: musical-rated-knob-land var(--musical-duration-smooth) var(--musical-easing-out) calc(var(--musical-duration-smooth) + 1.6 * var(--musical-duration-luxe)) backwards;
}
}
@keyframes musical-rated-knob-sweep {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes musical-rated-knob-land {
from {
opacity: 0;
}
}
.musical-rated__empty[hidden] {
display: none;
}
html.musical-has-ratings:not(.musical-ratings-released) .musical-rated[data-musical-rated-songs=""] .musical-rated__empty:not(.is-confirmed) {
visibility: hidden;
}
.musical-article,
.musical-articles {
--musical-article-measure: 42rem;
}
.musical-article ::selection,
.musical-articles ::selection,
.musical-article-more ::selection {
background: rgb(0 217 217 / 30%);
color: var(--musical-text-primary);
}
.musical-articles__shell {
display: flex;
flex-direction: column;
gap: var(--musical-space-2xl);
}
.musical-articles__head {
display: flex;
flex-direction: column;
gap: var(--musical-space-md);
max-width: var(--musical-article-measure);
}
.musical-articles__lede {
margin: 0;
color: var(--musical-text-secondary);
}
.musical-articles__lede:empty {
display: none;
}
.musical-articles__lede p {
margin: 0;
}
.musical-section--dark .musical-articles__lede {
color: inherit;
}
.musical-article-topics__list {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.musical-article-topics__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: var(--musical-space-md);
border-radius: var(--musical-radius-pill);
box-shadow: inset 0 0 0 1px var(--musical-border);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-primary);
text-decoration: none;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
box-shadow var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-article-topics__link:hover {
background: rgb(0 122 122 / 8%);
box-shadow: inset 0 0 0 1px var(--musical-primary-ink);
color: var(--musical-primary-ink);
}
.musical-article-topics__link[aria-current="page"] {
background: var(--musical-primary-ink);
box-shadow: none;
color: var(--musical-text-light);
}
.musical-article-topics__link:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
@media (max-width: 47.99rem) {
.musical-article-topics__link {
min-height: 48px;
}
}
.musical-articles__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--musical-space-2xl) var(--musical-space-xl);
}
@media (min-width: 48rem) {
.musical-articles__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.musical-articles__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.musical-article-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--musical-space-md);
border-radius: var(--musical-radius-lg);
}
.musical-article-card__media {
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--musical-radius-lg);
background: var(--musical-cover-teal);
}
.musical-article-card__img,
.musical-article-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--musical-duration-luxe) var(--musical-easing-luxe);
}
.musical-article-card:hover .musical-article-card__media img {
transform: scale(1.04);
}
.musical-article-card__body {
display: flex;
flex-direction: column;
gap: var(--musical-space-sm);
}
.musical-article-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.8125rem;
line-height: 1.5;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
}
.musical-article-card__meta > * + *::before,
.musical-article__meta > * + *::before {
content: "·";
margin-inline-end: var(--musical-space-sm);
color: var(--musical-text-secondary);
}
.musical-article-card__meta > :empty,
.musical-article__meta > :empty {
display: none;
}
.musical-article-card__title {
margin: 0;
font-family: var(--musical-font-display);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
color: var(--musical-text-primary);
text-wrap: balance;
overflow-wrap: anywhere;
}
.musical-article-card__title a {
color: inherit;
text-decoration: none;
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-article-card__title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--musical-radius-lg);
}
.musical-article-card:hover .musical-article-card__title a {
color: var(--musical-primary-ink);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.musical-article-card__title a:focus-visible {
outline: none;
}
.musical-article-card__title a:focus-visible::after {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 6px;
}
.musical-article-card__excerpt {
margin: 0;
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.6;
color: var(--musical-text-secondary);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.musical-article-card__excerpt p {
margin: 0;
}
body:not(.paged) .musical-articles__grid:not(.musical-articles__grid--more) > .musical-article-card:first-child {
grid-column: 1 / -1;
}
@media (min-width: 48rem) {
body:not(.paged) .musical-articles__grid:not(.musical-articles__grid--more) > .musical-article-card:first-child {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: center;
gap: var(--musical-space-3xl);
}
body:not(.paged) .musical-articles__grid:not(.musical-articles__grid--more) > .musical-article-card:first-child:not(:only-child) {
padding-block-end: var(--musical-space-2xl);
border-block-end: 1px solid var(--musical-border);
border-radius: 0;
}
body:not(.paged) .musical-articles__grid:not(.musical-articles__grid--more) > .musical-article-card:first-child .musical-article-card__body {
gap: var(--musical-space-md);
}
body:not(.paged) .musical-articles__grid:not(.musical-articles__grid--more) > .musical-article-card:first-child .musical-article-card__title {
font-size: clamp(1.875rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.005em;
}
body:not(.paged) .musical-articles__grid:not(.musical-articles__grid--more) > .musical-article-card:first-child .musical-article-card__excerpt {
font-size: 1.125rem;
-webkit-line-clamp: 4;
line-clamp: 4;
}
body:not(.paged) .musical-articles__grid:not(.musical-articles__grid--more) > .musical-article-card:first-child:not(:only-child) .musical-article-card__title a::after {
inset-block-end: var(--musical-space-2xl);
}
}
.musical-articles__pagination .page-numbers {
display: flex;
flex-wrap: wrap;
gap: var(--musical-space-sm);
margin: 0;
padding: 0;
list-style: none;
}
.musical-articles__pagination a.page-numbers,
.musical-articles__pagination span.page-numbers {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
padding-inline: var(--musical-space-sm);
border-radius: var(--musical-radius-pill);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--musical-text-primary);
text-decoration: none;
box-shadow: inset 0 0 0 1px var(--musical-border);
}
.musical-articles__pagination a.page-numbers:hover {
box-shadow: inset 0 0 0 1px var(--musical-primary-ink);
color: var(--musical-primary-ink);
}
.musical-articles__pagination .page-numbers.current {
background: var(--musical-primary-ink);
box-shadow: none;
color: var(--musical-text-light);
}
.musical-article {
display: flex;
flex-direction: column;
align-items: center;
}
.musical-article > * {
width: 100%;
max-width: var(--musical-article-measure);
}
.musical-article .musical-article__progress {
position: fixed;
inset-inline: 0;
top: calc(var(--musical-header-height) + var(--wp-admin--admin-bar--height, 0px) - 2px);
bottom: auto;
z-index: 501;
width: 100%;
max-width: none;
height: 3px;
border: 0;
background: transparent;
appearance: none;
pointer-events: none;
}
.musical-article .musical-article__progress::-webkit-progress-bar {
background: transparent;
}
.musical-article .musical-article__progress::-webkit-progress-value {
background: linear-gradient(90deg, var(--musical-primary), var(--musical-secondary));
}
.musical-article .musical-article__progress::-moz-progress-bar {
background: linear-gradient(90deg, var(--musical-primary), var(--musical-secondary));
}
.musical-article__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--musical-space-md);
}
.musical-article__back {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
min-height: 44px;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-primary-ink);
text-decoration: none;
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-article__back::before {
content: "";
width: 1.125em;
height: 1.125em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-article__back:hover {
color: var(--musical-secondary-ink);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.musical-article__back:hover::before {
transform: translateX(-3px);
}
.musical-article__back:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-article__title {
margin: 0;
font-family: var(--musical-font-display);
font-size: clamp(1.875rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--musical-text-primary);
text-wrap: balance;
}
.musical-article__lede {
margin: 0;
font-family: var(--musical-font-body);
font-size: 1.25rem;
line-height: 1.55;
color: var(--musical-text-secondary);
text-wrap: pretty;
}
.musical-article__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--musical-space-sm);
row-gap: var(--musical-space-xs);
width: 100%;
margin-block-start: var(--musical-space-sm);
padding-block-start: var(--musical-space-md);
border-block-start: 1px solid var(--musical-border);
font-family: var(--musical-font-body);
font-size: 0.875rem;
line-height: 1.5;
font-variant-numeric: tabular-nums;
color: var(--musical-text-secondary);
}
.musical-article__meta > :first-child {
font-weight: 600;
color: var(--musical-text-primary);
}
.musical-article__topics a {
color: var(--musical-primary-ink);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.musical-article__topics a:hover {
color: var(--musical-secondary-ink);
}
.musical-article > .musical-article__hero {
margin: var(--musical-space-2xl) 0 0;
}
.musical-article__hero img {
display: block;
width: 100%;
height: auto;
border-radius: var(--musical-radius-lg);
}
.musical-article__hero figcaption,
.musical-article__body figcaption {
position: static;
margin-block-start: var(--musical-space-sm);
padding: 0;
background: none;
font-family: var(--musical-font-body);
font-size: 0.75rem;
line-height: 1.4;
letter-spacing: 0.08em;
text-align: start;
color: var(--musical-text-secondary);
}
.musical-article__body {
margin-block-start: var(--musical-space-2xl);
font-family: var(--musical-font-body);
font-size: 1.125rem;
line-height: 1.75;
color: var(--musical-text-primary);
}
.musical-article__body > * {
margin-block: 0;
}
.musical-article__body > * + * {
margin-block-start: 1.25em;
}
.musical-article__body h2,
.musical-article__body h3,
.musical-article__body h4 {
font-family: var(--musical-font-display);
color: var(--musical-text-primary);
text-wrap: balance;
scroll-margin-top: calc(var(--musical-header-height) + var(--musical-space-xl));
}
.musical-article__body h2 {
font-size: 1.75rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.005em;
}
.musical-article__body > h2:not(:first-child) {
margin-block-start: var(--musical-space-3xl);
}
.musical-article__body h3 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
}
.musical-article__body > h3:not(:first-child) {
margin-block-start: var(--musical-space-2xl);
}
.musical-article__body > :is(h2, h3, h4) + * {
margin-block-start: var(--musical-space-sm);
}
.musical-article__body a {
color: var(--musical-primary-ink);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-article__body a:hover {
color: var(--musical-secondary-ink);
text-decoration-thickness: 2px;
}
.musical-article__body a:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
border-radius: 2px;
}
.musical-article__body strong {
font-weight: 600;
}
.musical-article__body :is(ul, ol) {
padding: 0;
list-style: none;
}
.musical-article__body li {
position: relative;
padding-inline-start: 1.75em;
}
.musical-article__body li + li {
margin-block-start: var(--musical-space-sm);
}
.musical-article__body ul > li::before {
content: "";
position: absolute;
inset-inline-start: 0.25em;
top: 0.82em;
width: 0.75em;
height: 3px;
border-radius: var(--musical-radius-pill);
background: var(--musical-primary-ink);
}
.musical-article__body .ap-box--checklist .ap-box__list li::before {
content: "";
margin: 0;
}
.musical-article__body ol {
counter-reset: musical-article-ol;
}
.musical-article__body ol > li {
counter-increment: musical-article-ol;
}
.musical-article__body ol > li::before {
content: counter(musical-article-ol);
position: absolute;
inset-inline-start: 0;
font-family: var(--musical-font-display);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--musical-primary-ink);
}
.musical-article__body blockquote {
margin-inline: 0;
padding-inline-start: var(--musical-space-xl);
border-inline-start: 1px solid var(--musical-border);
font-family: var(--musical-font-display);
font-size: 1.25rem;
line-height: 1.5;
color: var(--musical-text-primary);
}
.musical-article__body blockquote p {
margin: 0;
}
.musical-article__body blockquote cite {
display: block;
margin-block-start: var(--musical-space-sm);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-style: normal;
letter-spacing: normal;
text-transform: none;
color: var(--musical-text-secondary);
opacity: 1;
}
.musical-article__body > figure {
margin-block: var(--musical-space-2xl);
}
.musical-article__body img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--musical-radius-md);
}
.musical-article__body hr {
margin-block: var(--musical-space-2xl);
border: 0;
border-block-start: 1px solid var(--musical-border);
}
.musical-article__foot {
margin-block-start: var(--musical-space-3xl);
padding-block-start: var(--musical-space-lg);
border-block-start: 1px solid var(--musical-border);
}
.musical-article-more {
border-block-start: 1px solid var(--musical-border);
}
.musical-article-more:not(:has(.musical-article-card)) {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.musical-article-card__media img,
.musical-article__back::before {
transition: none;
}
.musical-article-card:hover .musical-article-card__media img,
.musical-article__back:hover::before {
transform: none;
}
}
.musical-star {
--musical-star-rest: var(--musical-text-secondary);
--musical-star-on: var(--musical-primary-ink);
position: relative;
z-index: 2;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--musical-star-rest);
cursor: pointer;
transition:
color var(--musical-duration-quick) var(--musical-easing-out),
transform var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-star[hidden] {
display: none;
}
.musical-star svg {
width: 20px;
height: 20px;
overflow: visible;
pointer-events: none;
}
.musical-star path {
fill: currentcolor;
fill-opacity: 0;
stroke: currentcolor;
stroke-width: 1.75;
stroke-linejoin: round;
transition: fill-opacity var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-star.is-starred {
color: var(--musical-star-on);
}
.musical-star.is-starred path {
fill-opacity: 1;
}
@media (hover: hover) {
.musical-star:hover {
color: var(--musical-star-on);
}
}
.musical-star:active {
transform: scale(0.92);
}
.musical-star:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-artist-header__title {
display: flex;
align-items: center;
justify-content: center;
gap: var(--musical-space-xs);
max-width: 100%;
}
.musical-artist-header__title > :is(h1, h2) {
min-width: 0;
margin: 0;
}
@media (min-width: 48rem) {
.musical-artist-header__title {
padding-inline-start: calc(44px + var(--musical-space-xs));
}
}
.musical-star--header svg {
width: 28px;
height: 28px;
}
.musical-section--dark .musical-star--header {
--musical-star-rest: rgb(245 245 245 / 82%);
--musical-star-on: var(--musical-primary);
}
.musical-section--dark .musical-star--header:focus-visible {
outline-color: var(--musical-primary);
}
.musical-star--tile {
--musical-star-rest: var(--musical-text-light-dim);
--musical-star-on: var(--musical-primary);
position: absolute;
inset-block-start: -13px;
inset-inline-end: -10px;
}
.musical-star--tile::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 50%;
background: #1d1d1d;
box-shadow: 0 0 0 2px rgb(255 255 255 / 85%);
}
.musical-star--tile svg {
position: relative;
width: 14px;
height: 14px;
}
.musical-star--tile:not(.is-starred) {
--musical-star-rest: var(--musical-text-secondary);
--musical-star-on: var(--musical-primary-ink);
}
.musical-star--tile::before {
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-star--tile:not(.is-starred)::before {
background: #fff;
box-shadow: 0 0 0 1px var(--musical-border);
}
.musical-star--tile:focus-visible {
outline-offset: -7px;
}
@media (max-width: 30rem) {
.musical-artist-directory--list .musical-star--row {
--musical-star-rest: var(--musical-text-light-dim);
--musical-star-on: var(--musical-primary);
position: absolute;
inset-block-start: calc(50% - 2.5rem / 2 - 15px);
inset-inline-start: calc(var(--musical-space-sm) + 2.5rem - 32px);
}
.musical-artist-directory--list .musical-star--row::before {
content: "";
position: absolute;
inset: 12px;
border-radius: 50%;
background: #1d1d1d;
box-shadow: 0 0 0 2px rgb(255 255 255 / 85%);
}
.musical-artist-directory--list .musical-star--row svg {
position: relative;
width: 12px;
height: 12px;
}
.musical-artist-directory--list .musical-star--row:focus-visible {
outline-offset: -9px;
}
.musical-artist-directory--list .musical-star--row:not(.is-starred) {
--musical-star-rest: var(--musical-text-secondary);
--musical-star-on: var(--musical-primary-ink);
}
.musical-artist-directory--list .musical-star--row::before {
transition: background-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-artist-directory--list .musical-star--row:not(.is-starred)::before {
background: #fff;
box-shadow: 0 0 0 1px var(--musical-border);
}
}
.musical-player .musical-player__meta .musical-player__artist:has(> .musical-star) {
display: flex;
align-items: center;
overflow: visible;
}
.musical-player .musical-player__meta .musical-player__artist:has(> .musical-star) > a {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.musical-player.is-collapsed .musical-player__meta .musical-player__artist:has(> .musical-star) > a {
white-space: normal;
overflow: visible;
}
.musical-star--player {
--musical-star-rest: rgb(245 245 245 / 65%);
--musical-star-on: var(--musical-primary);
margin-block: -11px;
margin-inline-start: -8px;
}
.musical-star--player svg {
width: 18px;
height: 18px;
}
.musical-player .musical-star:focus-visible {
outline-color: var(--musical-primary);
}
.musical-starred-toggle {
display: inline-flex;
align-items: center;
gap: var(--musical-space-xs);
min-height: calc(48px + 2 * var(--musical-space-xs) + 2px);
padding: 0 var(--musical-space-lg) 0 var(--musical-space-md);
border: 1px solid var(--musical-border);
border-radius: var(--musical-radius-pill);
background: var(--musical-bg-light);
color: var(--musical-text-secondary);
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--musical-duration-quick) var(--musical-easing-out),
border-color var(--musical-duration-quick) var(--musical-easing-out),
color var(--musical-duration-quick) var(--musical-easing-out);
}
@media (min-width: 48rem) {
.musical-starred-toggle {
min-height: calc(44px + 2 * var(--musical-space-xs) + 2px);
}
}
.musical-starred-toggle[hidden] {
display: none;
}
.musical-starred-toggle svg {
flex: none;
width: 18px;
height: 18px;
}
.musical-starred-toggle path {
fill: currentcolor;
fill-opacity: 0;
stroke: currentcolor;
stroke-width: 1.75;
stroke-linejoin: round;
transition: fill-opacity var(--musical-duration-quick) var(--musical-easing-out);
}
@media (hover: hover) {
.musical-starred-toggle:hover {
border-color: var(--musical-text-secondary);
color: var(--musical-text-primary);
}
}
.musical-starred-toggle[aria-pressed="true"] {
border-color: var(--musical-text-primary);
background: var(--musical-text-primary);
color: var(--musical-text-light);
}
.musical-starred-toggle[aria-pressed="true"] svg {
color: var(--musical-primary);
}
.musical-starred-toggle[aria-pressed="true"] path {
fill-opacity: 1;
}
.musical-starred-toggle:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
}
.musical-starred-empty {
display: grid;
gap: var(--musical-space-sm);
max-width: 38rem;
}
.musical-starred-empty > * {
margin: 0;
}
.musical-artist-directory.is-starred-loading > :not(.musical-artist-directory__controls),
html.musical-starred-restoring .musical-artist-directory > :not(.musical-artist-directory__controls) {
visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
.musical-star,
.musical-star path,
.musical-star::before,
.musical-starred-toggle,
.musical-starred-toggle path {
transition: none;
}
.musical-artist-directory--list .musical-star--row::before {
transition: none;
}
.musical-star:active {
transform: none;
}
}
.musical-starred-strip {
display: grid;
gap: var(--musical-space-xs);
width: 100%;
min-width: 0;
margin-block-end: var(--musical-space-xl);
}
.musical-starred-strip[hidden] {
display: none;
}
html.musical-has-stars:not(.musical-strip-released) .musical-starred-strip[hidden]:not([data-musical-strip-settled]) {
display: grid;
visibility: hidden;
}
html.musical-has-stars:not(.musical-strip-released) .musical-starred-strip[hidden]:not([data-musical-strip-settled]) .musical-starred-strip__list {
min-height: calc(4rem + 2 * 1.4 * 0.875rem + 3 * var(--musical-space-sm) + 2 * var(--musical-space-xs));
}
.musical-starred-strip > h2 {
margin: 0;
}
.musical-starred-strip__list {
display: grid;
grid-auto-columns: minmax(5.75rem, 7.5rem);
grid-auto-flow: column;
justify-content: start;
gap: var(--musical-space-xs);
margin: 0;
padding: var(--musical-space-sm) var(--musical-space-sm) var(--musical-space-xs) 0;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-color: var(--musical-border) transparent;
scrollbar-width: thin;
}
.musical-starred-strip__list > li {
min-width: 0;
scroll-snap-align: start;
}
.musical-starred-strip .musical-artist-directory__item {
flex-direction: column;
gap: var(--musical-space-xs);
height: 100%;
padding: var(--musical-space-sm) var(--musical-space-xs);
text-align: center;
}
.musical-starred-strip .musical-artist-directory__portrait {
width: 4rem;
height: 4rem;
}
.musical-starred-strip .musical-artist-directory__text {
align-self: stretch;
min-height: calc(2 * 1.4 * 0.875rem);
}
.musical-starred-strip .musical-artist-directory__name {
display: -webkit-box;
overflow: hidden;
font-size: 0.875rem;
line-height: 1.4;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.musical-starred-strip .musical-artist-directory__name:focus-visible::after {
outline-offset: -2px;
}
.musical-starred-strip .musical-artist-directory__facts,
.musical-starred-strip .musical-artist-directory__stat,
.musical-starred-strip .musical-mark,
.musical-starred-strip .musical-share-btn,
.musical-starred-strip .musical-mix-pick {
display: none;
}
.musical-starred-strip__all {
justify-self: end;
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--musical-font-body);
font-size: 0.875rem;
font-weight: 600;
color: var(--musical-text-secondary);
text-decoration: underline;
text-decoration-color: var(--musical-border);
text-underline-offset: 0.2em;
transition:
color var(--musical-duration-quick) var(--musical-easing-out),
text-decoration-color var(--musical-duration-quick) var(--musical-easing-out);
}
.musical-starred-strip__all:hover {
color: var(--musical-primary-ink);
text-decoration-color: currentColor;
}
.musical-starred-strip__all:focus-visible {
outline: 2px solid var(--musical-primary-ink);
outline-offset: 3px;
border-radius: var(--musical-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
.musical-starred-strip__all {
transition: none;
}
}