:root {
    --musiclab-nav-height: 68px;
    --musiclab-paper: #f8f5ed;
    --musiclab-muted: rgba(248, 245, 237, 0.7);
    --musiclab-rule: rgba(255, 255, 255, 0.28);
    --musiclab-panel: rgba(7, 10, 15, 0.62);
    --musiclab-accent: #9dc7de;
}

html {
    background: #07090d;
}

body.musiclab-page {
    height: 100vh;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    color: var(--musiclab-paper);
    background: #07090d;
    color-scheme: dark;
}

body.musiclab-page .site-nav {
    position: relative;
    border-bottom-color: rgba(255, 255, 255, 0.12);
    background: rgba(7, 9, 13, 0.96);
    color: var(--musiclab-paper);
}

body.musiclab-page .site-nav .nav-logo,
body.musiclab-page .site-nav .nav-link,
body.musiclab-page .site-nav .nav-search,
body.musiclab-page .site-nav .nav-cta,
body.musiclab-page .site-nav .nav-toggle {
    color: rgba(248, 245, 237, 0.78);
}

body.musiclab-page .site-nav .nav-logo,
body.musiclab-page .site-nav .nav-link:hover,
body.musiclab-page .site-nav .nav-search:hover,
body.musiclab-page .site-nav .nav-cta:hover,
body.musiclab-page .site-nav .nav-link[aria-current="page"] {
    color: #ffffff;
}

body.musiclab-page .site-nav .nav-cta {
    border-color: rgba(255, 255, 255, 0.34);
}

body.musiclab-page .site-nav .nav-toggle-icon span {
    background: var(--musiclab-paper);
}

body.musiclab-page .site-nav .nav-search kbd {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    color: var(--musiclab-muted);
}

body.musiclab-page .site-nav ~ main::before,
body.musiclab-page .site-nav ~ main::after {
    display: none;
}

.musiclab-app {
    position: relative;
    height: calc(100vh - var(--musiclab-nav-height));
    height: calc(100svh - var(--musiclab-nav-height));
    min-height: 22rem;
    overflow: hidden;
    isolation: isolate;
    background: #07090d;
}

.musiclab-brand {
    position: absolute;
    z-index: 20;
    top: max(1.15rem, env(safe-area-inset-top));
    right: max(1.4rem, env(safe-area-inset-right));
    left: max(1.4rem, env(safe-area-inset-left));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: none;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.72);
}

.musiclab-brand h1,
.musiclab-brand p {
    margin: 0;
    color: var(--musiclab-paper);
}

.musiclab-brand h1 {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    font-weight: 650;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.musiclab-brand .musiclab-kicker {
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.musiclab-brand .musiclab-kicker {
    margin-bottom: 0.3rem;
    color: var(--musiclab-accent);
}

/* .musiclab-brand is pointer-events: none so the overlay never blocks feed
   swipes; the Albums button and switcher re-enable explicitly, and so must
   this link or it is dead to clicks on every browser. */
.musiclab-brand a {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    pointer-events: auto;
}

.musiclab-brand a:focus-visible {
    outline: 2px solid var(--musiclab-accent);
    outline-offset: 2px;
}

.musiclab-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.musiclab-albums-button {
    min-height: 44px;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--musiclab-rule);
    border-radius: 999px;
    background: #07090d;
    color: var(--musiclab-paper);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    pointer-events: auto;
}

.musiclab-albums-button:disabled {
    opacity: 0.5;
    cursor: wait;
}

.musiclab-albums {
    box-sizing: border-box;
    width: min(52rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0 1.25rem 1.25rem;
    border: 1px solid var(--musiclab-rule);
    border-radius: 1rem;
    color: var(--musiclab-paper);
    background: #07090d;
    overscroll-behavior: contain;
}

.musiclab-albums::backdrop {
    background: rgba(7, 9, 13, 0.85);
}

.musiclab-albums-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    background: #07090d;
}

.musiclab-albums-header h2 {
    margin: 0;
    font-family: ui-serif, Georgia, Cambria, serif;
    font-size: clamp(1.25rem, 4vw, 1.8rem);
    color: var(--musiclab-paper);
}

.musiclab-albums-header p {
    margin: 0.25rem 0 0;
    color: var(--musiclab-muted);
    font-size: 0.85rem;
}

.musiclab-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.8rem;
}

.musiclab-album-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--musiclab-rule);
    border-radius: 0.55rem;
    background: var(--musiclab-panel);
    color: var(--musiclab-paper);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.musiclab-album-card[aria-current="true"] {
    border-color: var(--musiclab-accent);
    box-shadow: inset 0 0 0 2px var(--musiclab-accent);
}

.musiclab-album-card img,
.musiclab-album-mix {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

.musiclab-album-mix {
    box-sizing: border-box;
    padding: 1rem;
    background: var(--musiclab-accent);
    color: #07090d;
    font-family: ui-serif, Georgia, Cambria, serif;
    font-size: 2rem;
    line-height: 1.1;
}

.musiclab-album-title {
    padding: 0.7rem 0.75rem 0;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.musiclab-album-count {
    padding: 0.3rem 0.75rem 0.75rem;
    color: var(--musiclab-muted);
    font-size: 0.8rem;
}

.musiclab-album-card:hover,
.musiclab-albums-button:hover {
    border-color: var(--musiclab-accent);
}

.musiclab-album-card:focus-visible,
.musiclab-albums-button:focus-visible {
    outline: 2px solid var(--musiclab-accent);
    outline-offset: 3px;
}

@media (max-width: 520px) {
    .musiclab-heading { width: 100%; justify-content: space-between; }
    .musiclab-albums { padding: 0 0.8rem 0.8rem; }
    .musiclab-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .musiclab-album-title { font-size: 0.85rem; }
}

.musiclab-collection-switcher {
    display: flex;
    max-width: min(60vw, 30rem);
    padding: 0.2rem;
    gap: 0.15rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(7, 10, 15, 0.72);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.22);
    pointer-events: auto;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.musiclab-collection-switcher::-webkit-scrollbar {
    display: none;
}

.musiclab-collection-button {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0.48rem 0.72rem;
    gap: 0.45rem;
    align-items: center;
    border: 0;
    border-radius: 999px;
    color: rgba(248, 245, 237, 0.68);
    background: transparent;
    font: inherit;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    scroll-snap-align: center;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease;
}

.musiclab-collection-button > span:first-child {
    max-width: min(16rem, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
}

.musiclab-collection-button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.musiclab-collection-button.is-active {
    color: #0b1016;
    background: var(--musiclab-paper);
}

.musiclab-collection-button:focus-visible {
    outline: 3px solid var(--musiclab-accent);
    outline-offset: 3px;
}

.musiclab-collection-count {
    display: inline-grid;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.24rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.58rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.72;
}

.musiclab-feed {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-behavior: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    touch-action: pan-y;
}

.musiclab-feed::-webkit-scrollbar {
    display: none;
}

.musiclab-feed:focus-visible {
    outline: 3px solid var(--musiclab-accent);
    outline-offset: -3px;
}

.musiclab-track {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 22rem;
    margin: 0;
    padding: 0;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #0b0f16;
}

.musiclab-track::before,
.musiclab-track::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}

.musiclab-track::before {
    background:
        linear-gradient(180deg, rgba(4, 7, 11, 0.66) 0%, transparent 28%, transparent 46%, rgba(4, 7, 11, 0.88) 100%),
        linear-gradient(90deg, rgba(4, 7, 11, 0.34), transparent 48%, rgba(4, 7, 11, 0.18));
}

.musiclab-track::after {
    opacity: 0.18;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.musiclab-artwork {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.025);
    filter: saturate(0.9) contrast(1.04) brightness(0.82);
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 600ms ease;
}

.musiclab-track.is-active .musiclab-artwork {
    transform: scale(1);
    filter: saturate(1) contrast(1.03) brightness(0.9);
}

.musiclab-artwork-fit-contain {
    object-fit: contain;
    transform: scale(0.965);
}

.musiclab-track.is-active .musiclab-artwork-fit-contain {
    transform: scale(0.985);
}

.musiclab-track.is-artwork-missing {
    background:
        radial-gradient(circle at 24% 28%, rgba(111, 143, 168, 0.42), transparent 32%),
        radial-gradient(circle at 76% 62%, rgba(216, 166, 97, 0.2), transparent 30%),
        #0b0f16;
}

.musiclab-track.is-artwork-missing .musiclab-artwork {
    display: none;
}

.musiclab-track-content {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(calc(100% - 3rem), 72rem);
    margin: auto auto 0;
    padding: 7.5rem 0 max(2rem, calc(1.25rem + env(safe-area-inset-bottom)));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem 3rem;
    align-items: end;
}

.musiclab-track-copy {
    max-width: 43rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.82);
}

.musiclab-track-number,
.musiclab-track-collection,
.musiclab-track-description,
.musiclab-track-title,
.musiclab-source,
.musiclab-status,
.musiclab-swipe-hint {
    margin: 0;
}

.musiclab-track-number {
    margin-bottom: 0.6rem;
    color: var(--musiclab-accent);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.musiclab-track-title {
    max-width: 12ch;
    color: #ffffff;
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
    font-size: clamp(2.65rem, 7vw, 6.3rem);
    font-weight: 640;
    line-height: 0.88;
    letter-spacing: -0.055em;
}

.musiclab-track-collection {
    margin-top: 1rem;
    color: rgba(248, 245, 237, 0.72);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.musiclab-track-description {
    max-width: 36rem;
    margin-top: 0.75rem;
    color: var(--musiclab-paper);
    font-size: clamp(0.94rem, 1.4vw, 1.1rem);
    line-height: 1.5;
}

.musiclab-source {
    margin-top: 0.75rem;
    font-size: 0.78rem;
}

.musiclab-source span,
.musiclab-disclosure {
    color: rgba(248, 245, 237, 0.72);
}

.musiclab-disclosure::before {
    content: " · ";
}

.musiclab-source a {
    color: rgba(248, 245, 237, 0.72);
    text-decoration-color: rgba(248, 245, 237, 0.34);
    text-underline-offset: 0.2em;
}

.musiclab-source a:hover,
.musiclab-source a:focus-visible {
    color: #ffffff;
}

.musiclab-player {
    width: min(29rem, 42vw);
    padding: 1rem 1.1rem 0.95rem;
    border: 1px solid var(--musiclab-rule);
    border-radius: 0.45rem;
    background: var(--musiclab-panel);
    box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.musiclab-progress-wrap {
    display: grid;
    grid-template-columns: 3.2rem minmax(5rem, 1fr) 3.2rem;
    gap: 0.65rem;
    align-items: center;
}

.musiclab-time {
    color: rgba(248, 245, 237, 0.7);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
}

.musiclab-time:last-child {
    text-align: right;
}

.musiclab-range {
    width: 100%;
    height: 1.8rem;
    margin: 0;
    accent-color: var(--musiclab-paper);
    cursor: pointer;
}

.musiclab-range:focus-visible {
    outline: 2px solid var(--musiclab-accent);
    outline-offset: 2px;
}

.musiclab-transport {
    display: grid;
    margin-top: 0.45rem;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
}

.musiclab-primary-controls,
.musiclab-volume-controls {
    display: flex;
    align-items: center;
}

.musiclab-primary-controls {
    gap: 0.5rem;
    justify-content: center;
}

.musiclab-volume-controls {
    min-width: 7rem;
    gap: 0.45rem;
    justify-content: flex-end;
}

.musiclab-control {
    display: inline-grid;
    width: 2.65rem;
    min-width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: var(--musiclab-paper);
    background: rgba(255, 255, 255, 0.08);
    font: inherit;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.musiclab-control:hover {
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.15);
}

.musiclab-control:focus-visible {
    outline: 3px solid var(--musiclab-accent);
    outline-offset: 2px;
}

.musiclab-control:active {
    transform: scale(0.94);
}

.musiclab-control:disabled {
    opacity: 0.32;
    cursor: default;
}

.musiclab-control-primary {
    width: 3.5rem;
    min-width: 3.5rem;
    height: 3.5rem;
    border-color: var(--musiclab-paper);
    color: #0b1016;
    background: var(--musiclab-paper);
    font-size: 1.15rem;
}

.musiclab-control-primary:hover {
    border-color: #ffffff;
    background: #ffffff;
}

.musiclab-volume {
    width: 4.6rem;
}

.musiclab-status-row {
    display: flex;
    min-height: 1.1rem;
    margin-top: 0.45rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.musiclab-status,
.musiclab-swipe-hint {
    color: rgba(248, 245, 237, 0.62);
    font-size: 0.7rem;
    line-height: 1.35;
}

.musiclab-status[data-state="error"] {
    color: #ffd1bc;
}

.musiclab-swipe-hint {
    text-align: right;
    white-space: nowrap;
}

.musiclab-loading,
.musiclab-empty {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 22rem;
    padding: 2rem;
    place-content: center;
    justify-items: center;
    color: var(--musiclab-paper);
    text-align: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(111, 143, 168, 0.24), transparent 38%),
        #07090d;
}

.musiclab-loading p,
.musiclab-empty p {
    max-width: 34rem;
    margin: 0.8rem 0 0;
    color: var(--musiclab-muted);
}

.musiclab-empty h2 {
    margin: 0;
    color: var(--musiclab-paper);
    font-family: ui-serif, Georgia, Cambria, serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.musiclab-empty a {
    color: var(--musiclab-accent);
}

.musiclab-loading-mark {
    width: 2.8rem;
    height: 2.8rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--musiclab-paper);
    border-radius: 50%;
    animation: musiclab-spin 900ms linear infinite;
}

.musiclab-noscript {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    padding: 2rem;
    place-content: center;
    color: #17212b;
    text-align: center;
    background: #f3f0e8;
}

.musiclab-noscript h2,
.musiclab-noscript p {
    max-width: 36rem;
}

.musiclab-noscript a {
    color: #24567a;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes musiclab-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
    :root {
        --musiclab-nav-height: 60px;
    }

    body.musiclab-page .site-nav .top-nav-links {
        border-top-color: rgba(255, 255, 255, 0.14);
        background: rgba(7, 9, 13, 0.98);
    }

    body.musiclab-page .site-nav .nav-link,
    body.musiclab-page .site-nav .nav-search,
    body.musiclab-page .site-nav .nav-cta {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }

    .musiclab-brand {
        top: 0.9rem;
        right: 1rem;
        left: 1rem;
    }

    .musiclab-collection-switcher {
        max-width: 68vw;
    }

    .musiclab-collection-button {
        padding: 0.42rem 0.58rem;
        gap: 0.32rem;
        font-size: 0.61rem;
        letter-spacing: 0.055em;
    }

    .musiclab-collection-count {
        min-width: 1.1rem;
        height: 1.1rem;
        font-size: 0.54rem;
    }

    .musiclab-track-content {
        width: min(calc(100% - 2rem), 40rem);
        padding-top: 6rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .musiclab-track-copy {
        max-width: min(100%, 32rem);
    }

    .musiclab-track-title {
        max-width: 10ch;
        font-size: clamp(2.65rem, 13vw, 4.7rem);
    }

    .musiclab-track-description {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .musiclab-player {
        width: auto;
        padding: 0.85rem 0.85rem 0.75rem;
    }

    .musiclab-transport {
        grid-template-columns: 1fr auto;
    }

    .musiclab-primary-controls {
        justify-content: flex-start;
    }

    .musiclab-volume-controls {
        min-width: 0;
    }

    .musiclab-volume {
        display: none;
    }

    .musiclab-source {
        display: none;
    }
}

@media (max-width: 520px) {
    .musiclab-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .musiclab-collection-switcher {
        max-width: 100%;
    }
}

@media (max-width: 420px), (max-height: 700px) {
    .musiclab-track-content {
        gap: 0.65rem;
    }

    .musiclab-track-number {
        margin-bottom: 0.35rem;
    }

    .musiclab-track-title {
        font-size: clamp(2.25rem, 11vw, 3.35rem);
    }

    .musiclab-track-collection {
        margin-top: 0.6rem;
    }

    .musiclab-track-description {
        margin-top: 0.45rem;
        font-size: 0.88rem;
    }

    .musiclab-player {
        padding: 0.65rem 0.7rem 0.55rem;
    }

    .musiclab-control {
        width: 2.35rem;
        min-width: 2.35rem;
        height: 2.35rem;
    }

    .musiclab-control-primary {
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
    }

    .musiclab-status-row {
        margin-top: 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .musiclab-feed {
        scroll-behavior: auto;
    }

    .musiclab-artwork,
    .musiclab-control {
        transition: none;
    }

    .musiclab-collection-button {
        transition: none;
    }

    .musiclab-loading-mark {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.2);
    }
}

@media print {
    body.musiclab-page {
        height: auto;
        overflow: visible;
        color: #111111;
        background: #ffffff;
    }

    body.musiclab-page .site-nav,
    .musiclab-brand,
    .musiclab-player {
        display: none !important;
    }

    .musiclab-app,
    .musiclab-feed {
        height: auto;
        overflow: visible;
    }

    .musiclab-track {
        height: auto;
        min-height: 0;
        break-inside: avoid;
        background: #ffffff;
    }

    .musiclab-artwork,
    .musiclab-track::before,
    .musiclab-track::after {
        display: none;
    }

    .musiclab-track-content {
        display: block;
        width: auto;
        padding: 1rem 0;
        color: #111111;
        border-bottom: 1px solid #cccccc;
    }

    .musiclab-track-title,
    .musiclab-track-number,
    .musiclab-track-collection,
    .musiclab-track-description,
    .musiclab-source a {
        color: #111111;
        text-shadow: none;
    }
}