* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Oswald', sans-serif;
    height: 100%;
    overflow: hidden;
    background: var(--pl3-color-bg-base);
    color: var(--pl3-color-text);
    background:
        radial-gradient(1200px 600px at 20% 10%, rgba(var(--pl3-rgb-accent-blue), 0.18), transparent 60%),
        radial-gradient(900px 500px at 80% 30%, rgba(var(--pl3-rgb-accent-purple), 0.16), transparent 55%),
        radial-gradient(900px 520px at 25% 85%, rgba(var(--pl3-rgb-accent-red), 0.18), transparent 60%),
        linear-gradient(180deg, var(--pl3-color-bg-top) 0%, var(--pl3-color-bg-base) 100%);
}

:root {
    /* ===== Website color palette ===== */
    --pl3-rgb-bg-base: 5, 7, 17;
    --pl3-rgb-bg-top: 6, 9, 20;
    --pl3-rgb-surface-nav: 7, 14, 35;
    --pl3-rgb-white: 255, 255, 255;
    --pl3-rgb-black: 0, 0, 0;
    --pl3-rgb-accent-blue: 31, 111, 235;
    --pl3-rgb-accent-purple: 140, 70, 255;
    --pl3-rgb-accent-red: 239, 68, 68;
    --pl3-rgb-accent-cyan: 84, 198, 255;
    --pl3-rgb-accent-violet: 141, 107, 255;
    --pl3-rgb-accent-pink: 255, 79, 136;
    --pl3-color-text: rgb(var(--pl3-rgb-white));
    --pl3-color-text-strong: rgb(var(--pl3-rgb-white));
    --pl3-color-bg-base: rgb(var(--pl3-rgb-bg-base));
    --pl3-color-bg-top: rgb(var(--pl3-rgb-bg-top));
    --pl3-color-accent-cyan: rgb(var(--pl3-rgb-accent-cyan));
    --pl3-color-accent-violet: rgb(var(--pl3-rgb-accent-violet));
    --pl3-color-accent-pink: rgb(var(--pl3-rgb-accent-pink));
    --pl3-color-white-00: rgba(var(--pl3-rgb-white), 0);
    --pl3-color-white-02: rgba(var(--pl3-rgb-white), 0.02);
    --pl3-color-white-04: rgba(var(--pl3-rgb-white), 0.04);
    --pl3-color-white-06: rgba(var(--pl3-rgb-white), 0.06);
    --pl3-color-white-08: rgba(var(--pl3-rgb-white), 0.08);
    --pl3-color-white-10: rgba(var(--pl3-rgb-white), 0.10);
    --pl3-color-white-12: rgba(var(--pl3-rgb-white), 0.12);
    --pl3-color-white-14: rgba(var(--pl3-rgb-white), 0.14);
    --pl3-color-white-16: rgba(var(--pl3-rgb-white), 0.16);
    --pl3-color-white-18: rgba(var(--pl3-rgb-white), 0.18);
    --pl3-color-white-22: rgba(var(--pl3-rgb-white), 0.22);
    --pl3-color-white-24: rgba(var(--pl3-rgb-white), 0.24);
    --pl3-color-white-28: rgba(var(--pl3-rgb-white), 0.28);
    --pl3-color-white-30: rgba(var(--pl3-rgb-white), 0.30);
    --pl3-color-white-38: rgba(var(--pl3-rgb-white), 0.38);
    --pl3-color-white-55: rgba(var(--pl3-rgb-white), 0.55);
    --pl3-color-white-60: rgba(var(--pl3-rgb-white), 0.60);
    --pl3-color-white-62: rgba(var(--pl3-rgb-white), 0.62);
    --pl3-color-white-68: rgba(var(--pl3-rgb-white), 0.68);
    --pl3-color-white-70: rgba(var(--pl3-rgb-white), 0.70);
    --pl3-color-white-88: rgba(var(--pl3-rgb-white), 0.88);
    --pl3-color-white-92: rgba(var(--pl3-rgb-white), 0.92);
    --pl3-color-white-94: rgba(var(--pl3-rgb-white), 0.94);
    --pl3-color-white-96: rgba(var(--pl3-rgb-white), 0.96);
    --pl3-color-white-98: rgba(var(--pl3-rgb-white), 0.98);
    --pl3-color-white-99: rgba(var(--pl3-rgb-white), 0.99);
    --pl3-color-black-25: rgba(var(--pl3-rgb-black), 0.25);
    --pl3-color-black-35: rgba(var(--pl3-rgb-black), 0.35);

    /* ===== PL3 (p_listen3) tuning knobs ===== */
    --pl3-part-pad-x: 6px;
    --pl3-part-pad-y: 6px;
    --pl3-card-radius: 18px;
    --pl3-tile-radius: 14px;
    --pl3-gap-md: 7px;
    --pl3-gap-sm: 6px;
    --pl3-tab-nav-gap: 4px;
    --pl3-tab-nav-inline-offset: var(--pl3-tile-radius);
    --pl3-tab-nav-top-width: calc(100% - (var(--pl3-tab-nav-inline-offset) * 2));

    /* 3-screen section split (unitless numbers out of 100). These should sum to 100. */
    --pl3-section-header: 17;
    --pl3-section-highlight: 40;
    --pl3-section-gallery: 36;

    /* Derived percentages for grid usage */
    --pl3-section-header-pct: calc(var(--pl3-section-header) * 1%);
    --pl3-section-highlight-pct: calc(var(--pl3-section-highlight) * 1%);
    --pl3-section-gallery-pct: calc(var(--pl3-section-gallery) * 1%);

    /* Tablet split layout */
    --pl3-tablet-header: 31;
    --pl3-tablet-highlight-column: 56;
    --pl3-tablet-gallery-column: 44;
    --pl3-tablet-card-max-w: 1100px;
    --pl3-tablet-header-pct: calc(var(--pl3-tablet-header) * 1%);
    --pl3-tablet-highlight-col-w:
        calc((100% - var(--pl3-split-gap)) * (var(--pl3-tablet-highlight-column) / 100));
    --pl3-tablet-gallery-col-w:
        calc((100% - var(--pl3-split-gap)) * (var(--pl3-tablet-gallery-column) / 100));

    /* Gallery layout */
    --pl3-gallery-pill-gap: 4px;
    --pl3-gallery-max-count: 4;
    --pl3-gallery-rows: 2;
    --pl3-gallery-scale: 0.93;
    --pl3-gallery-row-overlap-factor: 0.22;
    --pl3-gallery-hex-ratio: 0.8660254;
    --pl3-gallery-unit-min: 4.45rem;
    --pl3-gallery-unit-max: 8.7rem;
    --pl3-gallery-col-gap: clamp(0.08rem, 0.24cqw, 0.16rem);
    --pl3-gallery-pad-inline: clamp(0.08rem, 0.35cqw, 0.24rem);
    --pl3-gallery-pad-block-start: clamp(0.05rem, 0.2cqh, 0.16rem);
    --pl3-gallery-pad-block-end: clamp(0.04rem, 0.18cqh, 0.14rem);
    --pl3-gallery-art-pad: clamp(0.22rem, 0.8cqw, 0.5rem);
    --pl3-gallery-hover-lift: 0.32rem;
    --pl3-gallery-hover-scale: 1.08;
    --pl3-gallery-active-scale: 1.14;
    --pl3-gallery-img-sat: 0.92;
    --pl3-gallery-img-zoom: 1.08;
    --pl3-gallery-shell-bg: linear-gradient(180deg, var(--pl3-color-white-99), rgba(244, 242, 246, 0.98));
    --pl3-gallery-shell-border: rgba(18, 16, 30, 0.08);
    --pl3-gallery-shell-highlight: var(--pl3-color-white-70);
    --pl3-gallery-shell-active: rgba(255, 221, 170, 0.78);
    --pl3-gallery-shadow: none;
    --pl3-gallery-shadow-hover: none;
    --pl3-gallery-shadow-active: none;

    /* Grid section gap */
    --pl3-split-gap: 2.2vh;

    /* Viewport-based dimensions */
    --pl3-viewport-h: 100vh;
    --pl3-preview-top-offset: 18vh;
    --pl3-preview-max-h: 52vh;
    --pl3-modal-top-offset: 0px;
    --pl3-modal-max-h: 75vh;
    --pl3-viewport-bottom-space: 0px;
    --pl3-gallery-visible-h: calc(var(--pl3-viewport-h) * (var(--pl3-section-gallery) / 100) + var(--pl3-split-gap));
    --pl3-viewport-h-buffer: calc(var(--pl3-viewport-h) - 5vh);
    --pl3-group-card-h: calc(var(--pl3-viewport-h-buffer) - var(--pl3-gallery-visible-h));
    --pl3-group-modal-bottom-gap: calc(var(--pl3-gallery-visible-h) + var(--pl3-viewport-bottom-space) + 14vh);
    --pl3-share-top-offset: 22vh;

    /* ── Navigation bar ── */
    --pl3-nav-h: 44px;
    --pl3-nav-pad-x: 14px;
    --pl3-nav-bg: rgba(var(--pl3-rgb-surface-nav), 0.88);
    --pl3-nav-border: var(--pl3-color-white-10);
    --pl3-nav-blur: 8px;
    --pl3-nav-brand-size: 1.05rem;

    /* ── Pill max widths ── */
    --pl3-pill-listen-max-w: 200px;
    --pl3-pill-follow-max-w: 180px;
    --pl3-pill-playlist-max-w: 140px;
    --pl3-pill-h: 30px;

    /* ── Focus panel art size ── */
    --pl3-focus-art-size: 150px;

    /* ── Panel outer / inner padding ── */
    --pl3-panel-pad-x: 0px;
    --pl3-panel-inner-pad-top: clamp(12px, calc(8px + 1.2vw), 16px);
    --pl3-panel-inner-pad-x: clamp(4px, calc(2px + 0.9vw), 5px);
    --pl3-panel-inner-pad-y: clamp(8px, calc(5px + 1.4vw), 10px);
    --pl3-panel-inner-pad-bottom: calc(var(--pl3-panel-close-h) / 2 + 4px);
    --pl3-panel-inner-gap: 8px;
    --pl3-panel-shell-border: var(--pl3-color-white-16);
    --pl3-panel-shell-bg:
        radial-gradient(130% 120% at 18% 0%, rgba(89, 123, 255, 0.45), rgba(6, 16, 41, 0.55) 52%),
        linear-gradient(180deg, rgba(10, 19, 48, 0.92), rgba(7, 14, 35, 0.9));
    --pl3-panel-shell-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    --pl3-panel-shell-detail-border: rgba(203, 164, 255, 0.24);
    --pl3-panel-shell-detail-bg:
        radial-gradient(165% 145% at 4% 2%, rgba(116, 86, 255, 0.74), rgba(89, 33, 187, 0.48) 34%, rgba(16, 14, 55, 0.18) 72%),
        radial-gradient(120% 110% at 100% 100%, rgba(233, 87, 171, 0.18), rgba(9, 10, 31, 0) 56%),
        linear-gradient(180deg, rgba(34, 20, 88, 0.98), rgba(10, 11, 36, 0.97));
    --pl3-panel-shell-detail-shadow: 0 24px 56px rgba(33, 8, 86, 0.34);
    --pl3-panel-detail-origin-x: 50%;
    --pl3-panel-detail-origin-y: 22%;
    --pl3-panel-detail-scale-x: 0.42;
    --pl3-panel-detail-scale-y: 0.18;

    /* ── Panel art dock ── */
    --pl3-panel-art-dock-size: clamp(98px, calc(22vw + 28px), 118px);

    /* ── Shared pill/button height (design for 320px default) ── */
    --pl3-btn-h: var(--pl3-pill-h);

    /* ── Panel bottom close button ── */
    --pl3-panel-close-h: var(--pl3-btn-h);
    --pl3-panel-close-w: var(--pl3-btn-h);
    --pl3-panel-close-radius: 999px;
    --pl3-panel-close-font: 1.12rem;
    --pl3-panel-close-bg: linear-gradient(180deg, var(--pl3-color-white-98), rgba(247, 234, 238, 0.98));
    --pl3-panel-close-border: rgba(var(--pl3-rgb-white), 0.76);
    --pl3-panel-close-hover-bg: linear-gradient(180deg, rgba(255, 250, 251, 1), rgba(244, 221, 228, 0.98));
    --pl3-panel-footer-pad-x: 8px;
    --pl3-panel-footer-pad-bottom: 10px;

    /* ── Share button on top of art (panel + version screens) ── */
    --pl3-art-share-size: clamp(24px, calc(5vw + 8px), 28px);
    --pl3-art-share-offset: 8px;
    --pl3-art-share-radius: 999px;
    --pl3-art-share-bg: rgba(21, 7, 183, 0.52);
    --pl3-art-share-border: var(--pl3-color-white-18);
    --pl3-art-share-font: 0.75rem;
    --pl3-art-share-hover-bg: rgba(0, 0, 0, 0.74);

    /* ── 320px baseline version-row controls ──
         Change these values first if you want to tune mobile density.
         The scale step moves from 0 at 320px to 1 at 360px. */
    --pl3-mobile-min-width: 320;
    --pl3-mobile-max-width: 360;
    --pl3-mobile-fluid-step: clamp(0, calc((100vw - (var(--pl3-mobile-min-width) * 1px)) / ((var(--pl3-mobile-max-width) - var(--pl3-mobile-min-width)) * 1px)), 1);

    /* Right-side info/back circle */
    --pl3-info-btn-size: calc(28px + 2px * var(--pl3-mobile-fluid-step));

    /* Left art square inside each version row */
    --pl3-version-art-size: calc(64px + 4px * var(--pl3-mobile-fluid-step));

    /* Platform circles in the row */
    --pl3-version-platform-size: calc(30px + 2px * var(--pl3-mobile-fluid-step));
    --pl3-version-platform-icon-size: calc(15px + 1px * var(--pl3-mobile-fluid-step));
    --pl3-version-detail-platform-size: calc(var(--pl3-version-platform-size) + 1px);
    --pl3-version-detail-platform-icon-size: calc(var(--pl3-version-platform-icon-size) + 1px);
    --pl3-version-platform-gap: calc(7px + 1px * var(--pl3-mobile-fluid-step));
    --pl3-version-platform-count: 5;

    /* Row structure spacing */
    --pl3-version-row-gap: calc(5px + 1px * var(--pl3-mobile-fluid-step));
    --pl3-version-row-pad: calc(6px + 1px * var(--pl3-mobile-fluid-step));

    /* ── Version card visuals ── */
    --pl3-version-card-border: var(--pl3-color-white-16);
    --pl3-version-card-bg:
        radial-gradient(140% 150% at 0% 0%, rgba(105, 86, 255, 0.34), rgba(74, 33, 164, 0.24) 36%, rgba(19, 18, 57, 0) 76%),
        linear-gradient(135deg, rgba(43, 31, 99, 0.92), rgba(23, 19, 62, 0.9));
    --pl3-version-card-hover-bg:
        radial-gradient(140% 150% at 0% 0%, rgba(127, 100, 255, 0.46), rgba(96, 40, 192, 0.3) 38%, rgba(24, 21, 71, 0) 76%),
        linear-gradient(135deg, rgba(54, 39, 122, 0.96), rgba(29, 24, 78, 0.94));
    --pl3-version-card-shadow: 0 10px 24px rgba(24, 6, 58, 0.22);
    --pl3-version-square-bg:
        linear-gradient(180deg, rgba(149, 104, 255, 0.5), rgba(78, 31, 171, 0.28));
    --pl3-version-square-border: rgba(210, 172, 255, 0.22);
    --pl3-version-detail-bg:
        radial-gradient(160% 140% at 0% 0%, rgba(137, 98, 255, 0.52), rgba(88, 38, 177, 0.32) 38%, rgba(11, 17, 48, 0) 72%),
        linear-gradient(180deg, rgba(41, 22, 99, 0.74), rgba(17, 10, 45, 0.36));
    --pl3-version-stage-bg:
        radial-gradient(140% 120% at 18% 0%, rgba(130, 93, 255, 0.34), rgba(68, 31, 149, 0.18) 40%, rgba(9, 12, 33, 0.08) 80%),
        linear-gradient(180deg, rgba(13, 15, 42, 0.26), rgba(8, 9, 26, 0.2));
}

@supports (height: 100dvh) {
    :root {
        --pl3-viewport-h: 100dvh;
    }
}

#p_listen3.PL3-section {
    height: var(--pl3-viewport-h);
    box-sizing: border-box;

    overflow: hidden;
}

#p_listen3 {
    --pl3-available-h: var(--pl3-viewport-h);
    --pl3-header-h: calc(var(--pl3-available-h) * (var(--pl3-section-header) / 100));
    --pl3-highlight-h: calc(var(--pl3-available-h) * (var(--pl3-section-highlight) / 100));
    --pl3-hero-img-size: min(30vw, calc(var(--pl3-header-h) * 0.7));
}

.PL3-wrap {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
}

.PL3-card {
    width: 100%;
    height: 100%;
    border-radius: var(--pl3-card-radius);
    border: none;
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
}

.PL3-split {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: var(--pl3-split-gap);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "header"
        "highlight"
        "gallery";
    grid-template-rows:
        minmax(0, var(--pl3-section-header-pct)) minmax(0, var(--pl3-section-highlight-pct)) minmax(0, var(--pl3-section-gallery-pct));
}

.PL3-part {
    position: relative;
    padding: var(--pl3-part-pad-y) var(--pl3-part-pad-x);
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

html.pl3-js .PL3-section--preload .PL3-nav,
html.pl3-js .PL3-section--preload .PL3-heroRow,
html.pl3-js .PL3-section--preload .PL3-heroTitle,
html.pl3-js .PL3-section--preload .PL3-heroBtn,
html.pl3-js .PL3-section--preload .PL3-heroSlogan,
html.pl3-js .PL3-section--preload .PL3-tabs,
html.pl3-js .PL3-section--preload .PL3-galleryHeader,
html.pl3-js .PL3-section--preload .PL3-galleryGhostHex,
html.pl3-js .PL3-section--preload .PL3-galleryItemBtn,
html.pl3-js .PL3-section--preload .PL3-galleryImg {
    will-change: transform, opacity;
}

html.pl3-js .PL3-section--preload .PL3-nav {
    opacity: 0;
    transform: translateY(-24px);
}

html.pl3-js .PL3-section--preload .PL3-heroRow {
    opacity: 0;
    transform: scale(1.04);
    filter: saturate(0.82) blur(10px);
}

html.pl3-js .PL3-section--preload .PL3-heroTitle {
    opacity: 0;
    transform: translateX(-22px);
}

html.pl3-js .PL3-section--preload .PL3-heroBtn {
    opacity: 0;
    transform: translateY(-18px);
}

html.pl3-js .PL3-section--preload .PL3-heroSlogan,
html.pl3-js .PL3-section--preload .PL3-tabs,
html.pl3-js .PL3-section--preload .PL3-galleryHeader {
    opacity: 0;
    transform: translateY(28px);
}

html.pl3-js .PL3-section--preload .PL3-galleryGhostHex,
html.pl3-js .PL3-section--preload .PL3-galleryItemBtn {
    opacity: 0;
    transform: translateY(38px) scale(0.96);
}

html.pl3-js .PL3-section--preload .PL3-galleryImg {
    opacity: 0;
    transform: scale(1.08);
}

.PL3-part--header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
}

.PL3-part--buttons {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    flex-wrap: wrap;
    align-content: center;
}

.PL3-part--highlight {
    grid-area: highlight;
    display: flex;
    align-items: stretch;
    min-height: 0;
    justify-content: center;
    padding: var(--pl3-part-pad-y) var(--pl3-part-pad-x);
}

/* ===== Tabbed carousel (highlight area) ===== */

.PL3-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    gap: 0;
    min-height: 0;
}

.PL3-tabNav {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    width: var(--pl3-tab-nav-top-width);
    max-width: 100%;
    gap: var(--pl3-tab-nav-gap);
    z-index: 1;
    justify-content: flex-start;
    padding-top: 0;
    align-self: center;
}

.PL3-tabBtn {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--pl3-pill-h);
    height: var(--pl3-pill-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pl3-color-white-04);
    border: 1px solid var(--pl3-color-white-10);
    border-bottom: 1px solid var(--pl3-color-white-10);
    border-radius: 8px 8px 0 0;
    color: var(--pl3-color-white-30);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    padding: 4px 5px;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
    position: relative;
    z-index: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.PL3-tabBtn:hover:not([aria-selected="true"]) {
    background: var(--pl3-color-white-08);
    color: var(--pl3-color-white-60);
}

.PL3-tabBtn[aria-selected="true"] {
    background:
        radial-gradient(160% 140% at 0% 0%, rgba(167, 94, 255, 0.72), rgba(102, 32, 210, 0.52) 40%, rgba(30, 12, 74, 0.92) 100%),
        linear-gradient(180deg, rgba(128, 48, 220, 0.88), rgba(74, 18, 168, 0.90));
    border-color: rgba(190, 130, 255, 0.38);
    border-bottom-color: transparent;
    /* merges into panel */
    color: var(--pl3-color-text-strong);
    text-shadow: 0 0 10px rgba(210, 160, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(220, 170, 255, 0.22);
    margin-bottom: -1px;
    z-index: 2;
}

.PL3-tabPanels {
    max-height: 300px;
    flex: 1;
    min-width: 0;
    min-height: 0;

    background:
        radial-gradient(160% 130% at 0% 0%, rgba(146, 72, 255, 0.72), rgba(88, 22, 196, 0.68) 42%, rgba(6, 9, 28, 0) 75%),
        radial-gradient(120% 110% at 100% 100%, rgba(15, 43, 227, 0.74), rgba(28, 8, 8, 0.5) 60%),
        linear-gradient(180deg, rgba(211, 15, 15, 0.96), rgba(28, 8, 8, 0.97));
    border: 1px solid rgba(180, 110, 255, 0.28);
    border-radius: var(--pl3-tile-radius);
    box-shadow: inset 0 0 28px rgba(120, 50, 220, 0.12), 0 0 22px rgba(100, 30, 200, 0.14);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.PL3-tabPanel {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.PL3-tabPanel[hidden] {
    display: none;
}

/* ===== Focus panel ===== */

/* Panel fills the tab panel, centers the layout block */
#PL3-tabPanel-release:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    box-sizing: border-box;
}

/* Vertical stack: header sits above the art+buttons row */
.PL3-focusLayout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.PL3-focusHeader {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pl3-color-white-90, #fff);
}

/* Side-by-side: art on left, buttons on right */
.PL3-focusBody {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

/* art size controlled by --pl3-focus-art-size */
.PL3-focusArtCol {
    flex: 0 0 var(--pl3-focus-art-size);
    width: var(--pl3-focus-art-size);
    height: var(--pl3-focus-art-size);
}

.PL3-focusArtWrap {
    position: relative;
    width: var(--pl3-focus-art-size);
    height: var(--pl3-focus-art-size);
    border-radius: var(--pl3-tile-radius, 8px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.PL3-focusArtImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.18s ease;
}

.PL3-focusArtProgress {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

[data-pl3-audio-player].is-playing .PL3-focusArtImg {
    transform: scale(1.02);
}

/* Buttons column: narrower than the art */
.PL3-focusLinksCol {
    flex: 0 0 auto;
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Pills: exact same height as Stream/Follow/Shop buttons (--pl3-pill-h = 30px) */
.PL3-focusPill {
    width: 100%;
    max-width: var(--pl3-focus-art-size);
    height: var(--pl3-pill-h);
    min-height: var(--pl3-pill-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    border: none;
    color: #fff;
    font-family: "Tom Oswald", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    padding: 0 11px;
    white-space: nowrap;
    text-decoration: none;
    transition: filter 0.2s ease;
    background: linear-gradient(135deg, rgb(83 5 211 / 81%) 0%, rgb(133 6 255 / 66%) 100%);
}

.PL3-focusPill:hover {
    filter: brightness(1.15);
}

.PL3-focusPill--play {
    background: linear-gradient(135deg, rgb(45 51 218 / 93%) 0%, #065fd4 100%);
}

/* ===== About panel ===== */
#PL3-tabPanel-about {
    padding: 0;
    background: #090914;
}

.opahifi-cycle {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.cycle-grid {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    background: var(--pl3-color-white-10);
}

.cycle-arrow {
    --cycle-arrow-size: clamp(22px, 5vw, 32px);
    position: absolute;
    z-index: 2;
    width: var(--cycle-arrow-size);
    height: var(--cycle-arrow-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--pl3-color-white-14);
    background:
        radial-gradient(circle at 30% 28%, var(--pl3-color-white-18), var(--pl3-color-white-00) 42%),
        linear-gradient(180deg, rgba(14, 17, 37, 0.94), rgba(5, 7, 18, 0.9));
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 var(--pl3-color-white-08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    will-change: transform, filter, box-shadow, border-color, opacity;
    opacity: 0.42;
    filter: brightness(0.62) saturate(0.62);
}

.cycle-arrowIcon {
    width: 78%;
    height: 78%;
    fill: none;
    transform: rotate(var(--cycle-arrow-rotation, 0deg));
    transform-origin: 50% 50%;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.34));
    opacity: 0.7;
}

.cycle-arrowTrail,
.cycle-arrowHead {
    stroke: var(--pl3-color-white-96);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cycle-arrowTrail {
    opacity: 0.82;
}

.cycle-arrowDot {
    fill: rgba(var(--pl3-rgb-white), 0.56);
}

.cycle-arrow--top {
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    --cycle-arrow-rotation: 0deg;
}

.cycle-arrow--right {
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    --cycle-arrow-rotation: 90deg;
}

.cycle-arrow--bottom {
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    --cycle-arrow-rotation: 180deg;
}

.cycle-arrow--left {
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    --cycle-arrow-rotation: 270deg;
}

.cycle-pillar {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    color: var(--pl3-color-text);
    filter: brightness(0.46) saturate(0.72) contrast(0.95);
    box-shadow:
        inset 0 0 0 999px rgba(3, 5, 18, 0.34),
        inset 0 1px 0 var(--pl3-color-white-04);
    will-change: filter, box-shadow;
}

.cycle-pillar--pulse {
    background: linear-gradient(180deg, #4362d8 0%, #263b98 100%);
}

.cycle-pillar--power {
    background: linear-gradient(180deg, #5f30b6 0%, #5d369a 100%);
}

.cycle-pillar--people {
    background: linear-gradient(180deg, #cb1111 0%, #7a294b 100%);
}

.cycle-pillar--party {
    background: linear-gradient(180deg, #d60cd6 0%, #7f1089 100%);
}

.cycle-pillarInner {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 8px 5px;
    box-sizing: border-box;
    align-items: center;
}

.cycle-pillarInner h3 {
    margin: 0;
    font-size: clamp(1.45rem, 1.06rem + 1.28vw, 1.9rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #d7dbe7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.cycle-pillarInner p {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-family: "Tom Oswald", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(0.62rem, 0.57rem + 0.2vw, 0.74rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.92);
    text-wrap: pretty;
    overflow-wrap: normal;
}

.cycle-pillarInner p span {
    display: block;
    padding-top: 0;
    border-top: 0;
}

.PL3-tabPlaceholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
}

.PL3-tabPlaceholder i {
    font-size: 1.5rem;
    opacity: 0.45;
}

/* ===== Video tab grid ===== */

.PL3-videoGrid {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.PL3-videoCard {
    --pl3-video-btn-bottom: 8px;
    --pl3-video-btn-height: var(--pl3-pill-h);
    --pl3-video-fg-width: clamp(112px, 38vw, 156px);
    --pl3-video-fg-offset-x: 0px;
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    padding: 8px 4px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    transition: filter 140ms ease, transform 220ms ease;
}

.PL3-videoCard--meet {
    --pl3-video-fg-offset-x: 8px;
}

.PL3-videoCard:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.PL3-videoCard+.PL3-videoCard {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.PL3-videoScene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.PL3-videoThumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    will-change: transform, opacity;
}

.PL3-videoThumb--bg {
    object-fit: cover;
    object-position: center center;
    transform: scale(1.06);
    filter: saturate(0.96) contrast(1.02);
}

.PL3-videoThumb--fg {
    inset: auto auto 100% 50%;
    width: var(--pl3-video-fg-width);
    height: auto;
    margin-left: calc((var(--pl3-video-fg-width) * -0.5) + var(--pl3-video-fg-offset-x));
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center bottom;
    transform: scale(1.02);
}

.PL3-videoCard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 9, 28, 0.78) 0%, rgba(6, 9, 28, 0) 45%, rgba(6, 9, 28, 0.6) 100%);
    pointer-events: none;
}

.PL3-videoWatchBtn {
    position: absolute;
    left: 50%;
    bottom: var(--pl3-video-btn-bottom);
    transform: translateX(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: var(--pl3-video-btn-height);
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
    overflow: visible;
}

.PL3-videoWatchBtn i {
    font-size: 9px;
}

.PL3-videoWatchBtnLabel {
    display: block;
    line-height: 1;
    text-align: center;
}

.PL3-videoWatchBtn:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateX(-50%) translateY(-1px);
}

.PL3-videoCard:hover .PL3-videoThumb--bg,
.PL3-videoCard:focus-visible .PL3-videoThumb--bg {
    transform: scale(1.1);
}

.PL3-videoCard:hover .PL3-videoThumb--fg,
.PL3-videoCard:focus-visible .PL3-videoThumb--fg {
    transform: scale(1.04);
}

.PL3-part--gallery {
    grid-area: gallery;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--pl3-gallery-pill-gap);
}

.PL3-galleryHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    position: relative;
    overflow: visible;
}

.PL3-subTitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.72rem;
    font-weight: 800;
    line-height: 0.8;
    align-self: flex-start;
}

.PL3-gallery {
    container-type: size;
    flex: 1 1 0%;
    min-height: 0;
    --pl3-gallery-inline-room:
        calc(100cqw - (2 * var(--pl3-gallery-pad-inline)) - ((var(--pl3-gallery-max-count) - 1) * var(--pl3-gallery-col-gap)));
    --pl3-gallery-block-room:
        calc(100cqh - var(--pl3-gallery-pad-block-start) - var(--pl3-gallery-pad-block-end));
    --pl3-gallery-unit-from-inline: calc(var(--pl3-gallery-inline-room) / var(--pl3-gallery-max-count));
    --pl3-gallery-item-h-from-block:
        calc(var(--pl3-gallery-block-room) / (var(--pl3-gallery-rows) - ((var(--pl3-gallery-rows) - 1) * var(--pl3-gallery-row-overlap-factor))));
    --pl3-gallery-unit-from-block:
        calc(var(--pl3-gallery-item-h-from-block) * var(--pl3-gallery-hex-ratio));
    --pl3-gallery-unit:
        clamp(var(--pl3-gallery-unit-min), min(var(--pl3-gallery-unit-from-inline), var(--pl3-gallery-unit-from-block)), var(--pl3-gallery-unit-max));
    --pl3-gallery-item-h: calc(var(--pl3-gallery-unit) / var(--pl3-gallery-hex-ratio));
    --pl3-gallery-row-overlap: calc(var(--pl3-gallery-item-h) * var(--pl3-gallery-row-overlap-factor));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding:
        var(--pl3-gallery-pad-block-start) var(--pl3-gallery-pad-inline) var(--pl3-gallery-pad-block-end);
    overflow: visible;
    isolation: isolate;
    transform: scale(var(--pl3-gallery-scale));
    transform-origin: center top;
}

.PL3-galleryRow {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: var(--pl3-gallery-item-h);
    gap: var(--pl3-gallery-col-gap);
    inline-size: min(100%,
            calc((var(--pl3-gallery-unit) * var(--pl3-gallery-row-slot-count, var(--pl3-gallery-max-count))) + ((var(--pl3-gallery-row-slot-count, var(--pl3-gallery-max-count)) - 1) * var(--pl3-gallery-col-gap))));
    margin-inline: auto;
    overflow: visible;
}

.PL3-galleryRow+.PL3-galleryRow {
    margin-top: calc(var(--pl3-gallery-row-overlap) * -1);
}

.PL3-galleryGhostRack {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: var(--pl3-gallery-item-h);
    gap: var(--pl3-gallery-col-gap);
    inline-size: min(100%,
            calc((var(--pl3-gallery-unit) * 3) + (2 * var(--pl3-gallery-col-gap))));
    margin-inline: auto;
    overflow: visible;
}

.PL3-galleryGhostRack+.PL3-galleryRow {
    margin-top: calc(var(--pl3-gallery-row-overlap) * -1);
}

.PL3-galleryGhostHex {
    position: relative;
    inline-size: var(--pl3-gallery-unit);
    aspect-ratio: calc(sqrt(3) / 2);
    border-radius: 1rem;
    clip-path: polygon(50% 0, 150% 50%, 50% 100%, -50% 50%);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 239, 244, 0.92)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.04));
    box-shadow:
        inset 0 0 0 1px rgba(20, 17, 31, 0.08),
        inset 0 -0.8rem 1.15rem rgba(0, 0, 0, 0.06),
        inset 0 0.35rem 0.8rem rgba(255, 255, 255, 0.44);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0) scale(1);
    transform-origin: 50% 50%;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}

.PL3-galleryGhostHex--spacer {
    visibility: hidden;
    pointer-events: none;
}

.PL3-galleryGhostHex::before,
.PL3-galleryGhostHex::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.PL3-galleryGhostHex::before {
    inset: 0.2rem;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: inherit;
}

.PL3-galleryGhostHex::after {
    inset: 30% 24%;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(131, 99, 255, 0.22) 0%, rgba(131, 99, 255, 0.08) 44%, rgba(131, 99, 255, 0) 70%);
    filter: blur(2px);
}

.PL3-galleryGhostHex--playlist {
    box-shadow: var(--pl3-gallery-shadow);
    perspective: 1200px;
}

.PL3-galleryGhostHex--playlist:hover,
.PL3-galleryGhostHex--playlist:focus-within {
    transform: translateY(calc(var(--pl3-gallery-hover-lift) * -1)) scale(var(--pl3-gallery-hover-scale));
    box-shadow: var(--pl3-gallery-shadow-hover);
    z-index: 2;
}

.PL3-galleryGhostHex--expanded {
    z-index: 4;
}

.PL3-galleryGhostPlaylistCard {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.PL3-galleryGhostHex--expanded .PL3-galleryGhostPlaylistCard {
    transform: rotateY(180deg);
}

.PL3-galleryGhostPlaylistBtn {
    position: absolute;
    inset: 5px;
    display: block;
    width: auto;
    height: auto;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.PL3-galleryGhostPlaylistBtn:focus-visible {
    outline: none;
}

.PL3-galleryGhostPlaylistLabel {
    position: absolute;
    top: 1.2rem;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    font-family: 'Oswald', sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
    color: rgba(31, 23, 41, 0.92);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.PL3-galleryGhostPlaylistImg {
    width: 100%;
    height: 100%;
    display: block;
    padding: 2.2rem 0.75rem 0rem;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(17, 9, 33, 0.12));
    transform: scale(1);
    transition: transform 320ms ease, filter 220ms ease, opacity 220ms ease;
}

.PL3-galleryGhostHex--playlist:hover .PL3-galleryGhostPlaylistImg,
.PL3-galleryGhostHex--playlist:focus-within .PL3-galleryGhostPlaylistImg {
    transform: scale(var(--pl3-gallery-img-zoom));
    filter: drop-shadow(0 10px 20px rgba(17, 9, 33, 0.18));
}

.PL3-galleryGhostHex--expanded .PL3-galleryGhostPlaylistImg,
.PL3-galleryGhostHex--expanded .PL3-galleryGhostPlaylistLabel {
    opacity: 0;
}

.PL3-galleryGhostPlaylistBack {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 0.7rem 0.85rem;
    background: linear-gradient(180deg, rgb(202 21 21 / 98%), rgb(99 44 181 / 95%)), linear-gradient(180deg, rgb(35 2 2 / 36%), rgb(72 31 200));
    transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    z-index: 1;
}

.PL3-galleryGhostHex--expanded .PL3-galleryGhostPlaylistBack {
    pointer-events: auto;
}

.PL3-galleryGhostPlaylistBackTitle {
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    color: rgba(31, 23, 41, 0.86);
    text-transform: uppercase;
    white-space: nowrap;
}

.PL3-galleryGhostPlaylistBackRow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    flex-wrap: nowrap;
    max-width: none;
}

.PL3-galleryGhostPlaylistLink {
    width: 1.92rem;
    height: 1.92rem;
    background: rgba(74, 29, 47, 0.08);
    border-color: rgba(74, 29, 47, 0.14);
}

.PL3-galleryGhostPlaylistLink:hover,
.PL3-galleryGhostPlaylistLink:focus-visible {
    background: rgba(74, 29, 47, 0.14);
    border-color: rgba(74, 29, 47, 0.24);
}

.PL3-galleryItemBtn[hidden] {
    display: none;
}

.PL3-galleryItemBtn {
    position: relative;
    inline-size: var(--pl3-gallery-unit);
    display: block;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: var(--pl3-gallery-shell-bg);
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    aspect-ratio: calc(sqrt(3) / 2);
    margin: 0;
    clip-path: polygon(50% 0, 150% 50%, 50% 100%, -50% 50%);
    transform: translateY(0) scale(1);
    transform-origin: 50% 50%;
    box-shadow: var(--pl3-gallery-shadow);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, filter 220ms ease, opacity 180ms ease;
    isolation: isolate;
    z-index: 0;
}

.PL3-galleryItemBtn::before,
.PL3-galleryItemBtn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.PL3-galleryItemBtn::before {
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.06) 100%);
    box-shadow:
        inset 0 0 0 1px var(--pl3-gallery-shell-border),
        inset 0 -0.8rem 1.35rem rgba(0, 0, 0, 0.08),
        inset 0 0.4rem 0.9rem rgba(255, 255, 255, 0.52);
}

.PL3-galleryItemBtn::after {
    inset: 0.2rem;
    z-index: 2;
    border: 1px solid var(--pl3-gallery-shell-highlight);
    opacity: 0;
    transition: opacity 220ms ease, border-color 220ms ease;
}

.PL3-galleryImg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    padding: var(--pl3-gallery-art-pad);
    object-fit: contain;
    object-position: var(--pl3-gallery-art-pos, 50% 100%);
    filter: saturate(var(--pl3-gallery-img-sat)) contrast(1.02);
    transform: scale(1);
    transition: transform 320ms ease, filter 220ms ease;
}

.PL3-galleryItemBtn:hover,
.PL3-galleryItemBtn:focus-visible {
    transform: translateY(calc(var(--pl3-gallery-hover-lift) * -1)) scale(var(--pl3-gallery-hover-scale));
    box-shadow: var(--pl3-gallery-shadow-hover);
    z-index: 2;
}

.PL3-galleryItemBtn:hover::after,
.PL3-galleryItemBtn:focus-visible::after {
    opacity: 1;
}

.PL3-galleryItemBtn:hover .PL3-galleryImg,
.PL3-galleryItemBtn:focus-visible .PL3-galleryImg {
    transform: scale(var(--pl3-gallery-img-zoom));
    filter: saturate(1.02) contrast(1.05);
}

.PL3-galleryItemBtn:focus-visible {
    outline: none;
}

.PL3-galleryItemBtn.PL3-galleryItemBtn--active {
    transform: translateY(calc(var(--pl3-gallery-hover-lift) * -0.5)) scale(var(--pl3-gallery-active-scale));
    box-shadow: var(--pl3-gallery-shadow-active);
    filter: brightness(1.06);
    z-index: 3;
}

.PL3-galleryItemBtn.PL3-galleryItemBtn--active::after {
    opacity: 1;
    border-color: var(--pl3-gallery-shell-active);
}

.PL3-galleryItemBtn.PL3-artHost--detached,
.PL3-galleryItemBtn.PL3-artHost--detached:hover,
.PL3-galleryItemBtn.PL3-artHost--detached:focus-visible,
.PL3-galleryItemBtn.PL3-artHost--detached.PL3-galleryItemBtn--active {
    opacity: 1;
    pointer-events: none;
    box-shadow: var(--pl3-gallery-shadow);
    filter: none;
    transform: translateY(0) scale(1);
    z-index: 0;
}

.PL3-galleryItemBtn.PL3-artHost--detached::after {
    opacity: 0;
}

.PL3-part--gallery .PL3-gallery.PL3-gallery--locked .PL3-galleryItemBtn {
    pointer-events: none;
    cursor: default;
}

.PL3-part--gallery .PL3-gallery .PL3-galleryItemBtn:disabled {
    opacity: 1;
}

.PL3-part--gallery .PL3-gallery.PL3-gallery--locked .PL3-galleryItemBtn:not(.PL3-galleryItemBtn--active) {
    filter: saturate(0.68) brightness(0.72) contrast(0.92);
}

.PL3-playlistPillWrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    flex: 0 0 auto;
    width: var(--pl3-pill-playlist-max-w);
    overflow: visible;
    height: var(--pl3-pill-h);
}

.PL3-playlistPill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: 100%;
    padding: 0 14px;
    border: 1px solid var(--pl3-color-white-18);
    border-radius: 999px;
    background: var(--pl3-color-black-25);
    color: var(--pl3-color-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: none;
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
    overflow: hidden;
    white-space: nowrap;
    max-width: 120px;
    height: var(--pl3-pill-h);
}

.PL3-playlistPill:hover {
    background: var(--pl3-color-black-35);
    border-color: var(--pl3-color-white-28);
    transform: translateY(-1px);
}

.PL3-playlistPill:focus-visible {
    outline: 2px solid var(--pl3-color-white-70);
    outline-offset: 2px;
}

.PL3-playlistPill.PL3-playlistPill--expanded {
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--pl3-pill-playlist-max-w);
    transform: translateY(-50%);
    justify-content: flex-start;
    z-index: 8;
    height: var(--pl3-pill-h);
    overflow: visible;
}

.PL3-playlistPillLabel {
    display: inline;
}

.PL3-playlistPillPlayIcon {
    font-size: 14px;
    margin-right: 6px;
    vertical-align: middle;
    opacity: 0.9;
}

.PL3-playlistPlayText {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 12px;
}

.PL3-playlistListText {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 12px;
}

.PL3-playlistTheText {
    font-family: 'Great Vibes', cursive;
    font-style: italic;
    font-size: 15px;
    line-height: 1;
    margin: 0 2px;
}

.PL3-playlistPill--expanded .PL3-playlistPillLabel {
    display: none;
}

.PL3-playlistPillIcons {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    position: relative;
}

.PL3-playlistPill.PL3-playlistPill--expanded .PL3-playlistPillIcons {
    display: inline-flex;
}

.PL3-playlistPill.PL3-playlistPill--expanded:hover {
    transform: translateY(calc(-50% - 1px));
}

.PL3-playlistPillPrefix {
    position: absolute;
    left: 5px;
    bottom: 100%;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 8px 16px rgba(10, 4, 24, 0.32);
    color: var(--pl3-color-white-92);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.PL3-playlistPillLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgb(40 25 162 / 94%);
    border: 1px solid var(--pl3-color-white-88);
    box-shadow: 0 8px 16px rgba(15, 11, 38, 0.18);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.PL3-playlistPillLink:hover,
.PL3-playlistPillLink:focus-visible {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 10px 20px rgba(15, 11, 38, 0.24);
    background: var(--pl3-color-text);
}

.PL3-playlistPill .PL3-heroBtn-close {
    margin-left: 5px;
    padding-left: 5px;
    border-left-color: rgba(74, 29, 47, 0.18);
    color: var(--pl3-color-white-94);
}

.PL3-playlistPillIcon {
    width: 16px;
    height: 16px;
    display: block;
}

.PL3-playlistPillIcon--amazon {
    width: auto;
    height: auto;
    font-size: 16px;
    color: #4a1d2f;
}

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

.PL3-heroRow {
    position: relative;
    display: flex;
    gap: var(--pl3-gap-md);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    background-image:
        linear-gradient(180deg, rgba(5, 7, 17, 0.28), rgba(5, 7, 17, 0.62)),
        url("img/opa/cover.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.PL3-heroImgWrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 0;
    max-height: 100%;
}

.PL3-heroImg {
    width: var(--pl3-hero-img-size);
    height: var(--pl3-hero-img-size);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 15px;
}

.PL3-heroText {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    text-align: center;
    margin-left: 5%;
}

.PL3-heroTitle {
    color: #fff;
    font-size: clamp(1rem, 13.5vw, 1.5rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.02em;
}

.PL3-heroSlogan {
    color: #fff;
    position: relative;
    /* left: -12px; */
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.02;
    margin-top: 4px;
}

.PL3-btnRow {
    width: 100%;

    display: flex;
    flex-direction: row;
    gap: var(--pl3-gap-sm);
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center
}

/* Buttons: use Tom Oswald if available, fall back to system sans-serif */
.PL3-heroBtn,
.PL3-tabBtn,
.PL3-playlistPill,
.PL3-groupPanelShareBtn,
.PL3-groupPanelCloseBtn,
button {
    font-family: "Tom Oswald", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.PL3-heroBtn,
.PL3-playlistPill,
.PL3-videoWatchBtn {
    min-height: var(--pl3-pill-h);
    height: var(--pl3-pill-h);
}

.PL3-heroBtn {
    border-radius: 999px;
    border: none;
    color: #fff;
    font-size: clamp(10px, 2.6vw, 12px);
    font-weight: 900;
    cursor: pointer;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 11px;
    white-space: nowrap;
    transition: filter 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.PL3-heroBtn[data-pl3-action="listen"] {
    background: linear-gradient(135deg, rgb(45 51 218 / 93%) 0%, #065fd4 100%);
}

.PL3-heroBtn[data-pl3-action="follow"] {
    background: linear-gradient(135deg, rgb(83 5 211 / 81%) 0%, rgb(133 6 255 / 66%) 100%);
}

.PL3-heroBtn[data-pl3-action="contact"],
.PL3-heroBtn[data-pl3-action="shop"] {
    background: linear-gradient(135deg, rgb(255 0 0 / 49%) 0%, #e1002d 100%);
}

.PL3-heroBtn:hover {
    filter: brightness(1.15);
}

.PL3-heroBtn.PL3-heroBtn--expanded {
    flex: 1 1 auto;
    padding: 0 8px;
    gap: 5px;
}

.PL3-heroBtn[data-pl3-action="listen"].PL3-heroBtn--expanded {
    max-width: var(--pl3-pill-listen-max-w);
}

.PL3-heroBtn[data-pl3-action="follow"].PL3-heroBtn--expanded {
    max-width: var(--pl3-pill-follow-max-w);
}

.PL3-heroBtn.PL3-heroBtn--collapsed {
    display: none;
}

.PL3-heroBtn--expanded .PL3-heroBtn-text {
    display: none;
}

/* Icon row */
.PL3-heroBtn-icons {
    display: none;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.PL3-heroBtn--expanded .PL3-heroBtn-icons {
    display: flex;
}

/* 25px circle per icon link */
.PL3-heroBtn-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    text-decoration: none;
    transition: transform 0.16s ease, background 0.16s ease;
}

.PL3-heroBtn-icons a:hover,
.PL3-heroBtn-icons a:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.26);
}

.PL3-heroBtn-icon {
    width: 14px;
    height: 14px;
    display: block;
    object-fit: contain;
}

.PL3-heroBtn-icon.fa-amazon {
    width: auto;
    height: auto;
    font-size: 14px;
    color: #fff;
}

/* X close: plain text, right-aligned, separator line */
.PL3-heroBtn-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 2px 0 8px;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.80);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}

.PL3-heroBtn-close:hover {
    color: #fff;
}

/* ===== Preview Video Modal ===== */
#PL3-preview-modal[hidden] {
    display: none;
}

#PL3-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
}

#PL3-preview-modal .PL3-previewOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.20s ease;
}

#PL3-preview-modal.PL3-preview--open .PL3-previewOverlay {
    opacity: 1;
}

#PL3-preview-modal .PL3-previewPanel {
    position: relative;
    width: min(86vw, 360px);
    margin: var(--pl3-preview-top-offset) auto 0;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

#PL3-preview-modal.PL3-preview--open .PL3-previewPanel {
    opacity: 1;
    transform: translateY(0);
}

#PL3-preview-modal .PL3-previewInner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#PL3-preview-modal.PL3-preview--open .PL3-previewInner {
    animation: PL3-previewInnerWiggle 520ms ease both;
}

@keyframes PL3-previewInnerWiggle {
    0% {
        transform: translateX(0);
    }

    60% {
        transform: translateX(0);
    }

    72% {
        transform: translateX(-4px);
    }

    84% {
        transform: translateX(3px);
    }

    100% {
        transform: translateX(0);
    }
}

#PL3-preview-modal .PL3-previewHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#PL3-preview-modal .PL3-previewHeaderActions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#PL3-preview-modal .PL3-previewTitle {
    font-weight: 900;
    font-size: 1.7rem;
}


#PL3-preview-modal .PL3-previewSound {
    height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.98);
    cursor: pointer;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#PL3-preview-modal .PL3-previewSound:hover {
    background: rgba(255, 255, 255, 0.12);
}

#PL3-preview-modal .PL3-previewClose {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.98);
    cursor: pointer;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
}

#PL3-preview-modal .PL3-previewClose:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Shorts-friendly aspect ratio */
#PL3-preview-modal .PL3-previewFrame {
    width: min(100%, 300px);
    aspect-ratio: 9 / 16;
    max-height: var(--pl3-preview-max-h);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    margin: 0 auto;
}

#PL3-preview-modal .PL3-previewFrame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

#PL3-art-zoom-modal[hidden] {
    display: none;
}

#PL3-art-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
}

#PL3-art-zoom-modal .PL3-artZoomOverlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 7, 18, 0.84);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.22s ease;
}

#PL3-art-zoom-modal.PL3-artZoom--open .PL3-artZoomOverlay {
    opacity: 1;
}

#PL3-art-zoom-modal .PL3-artZoomPanel {
    position: relative;
    width: min(94vw, 760px);
    margin: 20px auto 0;
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

#PL3-art-zoom-modal.PL3-artZoom--open .PL3-artZoomPanel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#PL3-art-zoom-modal .PL3-artZoomInner {
    position: relative;
    padding: 52px 14px 14px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at top, rgba(93, 108, 255, 0.16), transparent 56%),
        linear-gradient(180deg, rgba(13, 21, 48, 0.98), rgba(5, 9, 22, 0.96));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.52);
}

#PL3-art-zoom-modal .PL3-artZoomImage {
    display: block;
    width: 100%;
    max-width: min(86vw, 700px);
    max-height: calc(100vh - 120px);
    margin: 0 auto;
    object-fit: contain;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.26);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
}

#PL3-art-zoom-modal .PL3-artZoomClose {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.98);
    cursor: pointer;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
}

#PL3-art-zoom-modal .PL3-artZoomClose:hover,
#PL3-art-zoom-modal .PL3-artZoomClose:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}

/* ===== Always-visible navigation bar ===== */
.PL3-nav {
    position: relative;
    inset: auto;
    flex: 0 0 var(--pl3-nav-h);
    height: var(--pl3-nav-h);
    z-index: 50;
    background: var(--pl3-nav-bg);
    border-bottom: 1px solid var(--pl3-nav-border);
    -webkit-backdrop-filter: blur(var(--pl3-nav-blur));
    backdrop-filter: blur(var(--pl3-nav-blur));
    display: flex;
    align-items: center;
}

.PL3-navInner {
    width: 100%;
    padding: 0 var(--pl3-nav-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.PL3-navBrand {
    font-size: var(--pl3-nav-brand-size);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Nav pill row layout */
.PL3-navInner .PL3-btnRow {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    gap: 5px;
    width: auto;
}

.PL3-navInner .PL3-btnRow:has(.PL3-heroBtn--expanded) {
    gap: 0;
}

/* ===== Group Top Panel ===== */
.PL3-card {
    position: relative;
}

.PL3-groupPanel {
    position: absolute;
    top: var(--pl3-nav-h);
    left: 0;
    right: 0;
    bottom: var(--pl3-gallery-visible-h);
    z-index: 20;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
}

.PL3-groupPanel.PL3-groupPanel--open {
    transform: translateY(0%);
    opacity: 1;
    pointer-events: auto;
}

.PL3-groupPanelInner {
    position: relative;
    height: 100%;
    border-radius: 0 0 16px 16px;
    border: 1px solid var(--pl3-panel-shell-border);
    border-left: 0;
    border-right: 0;
    background: var(--pl3-panel-shell-bg);
    box-shadow: var(--pl3-panel-shell-shadow);
    backdrop-filter: blur(9px);
    overflow: visible;
    display: flex;
    padding: var(--pl3-panel-inner-pad-y) 10px var(--pl3-panel-inner-pad-bottom);

    flex-direction: column;
    gap: var(--pl3-panel-inner-gap);
    transition: background 0.34s ease, box-shadow 0.34s ease, border-color 0.34s ease;
    isolation: isolate;
}

.PL3-groupPanelInner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pl3-panel-shell-detail-bg);
    transform-origin: var(--pl3-panel-detail-origin-x) var(--pl3-panel-detail-origin-y);
    transform: scale(var(--pl3-panel-detail-scale-x), var(--pl3-panel-detail-scale-y));
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.34s ease;
    pointer-events: none;
    z-index: 0;
}

.PL3-groupPanelInner>* {
    position: relative;
    z-index: 1;
}

.PL3-groupPanelInner--detail {
    border-color: var(--pl3-panel-shell-detail-border);
    box-shadow: var(--pl3-panel-shell-detail-shadow);
}

.PL3-groupPanelInner--detail::before {
    transform: scale(1, 1);
    opacity: 1;
}

.PL3-groupPanelTop {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

.PL3-groupPanelGroupMeta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    flex: 1 1 auto;
    padding-right: calc(var(--pl3-art-share-size) + 8px);
}

.PL3-groupPanelGroupTitle {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: clamp(1.18rem, calc(1rem + 2.2vw), 1.7rem);
    font-weight: 800;
    line-height: 0.95;
    color: rgba(255, 255, 255, 0.96);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.PL3-groupPanelGroupTitleLine {
    display: block;
}

.PL3-groupPanelGroupCount {
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

/* Art dock wrapper — provides the square container and anchors the share button */
.PL3-groupPanelArtDockWrap {
    position: relative;
    flex-shrink: 0;
    width: var(--pl3-panel-art-dock-size);
    aspect-ratio: 1 / 1;
}

/* Share button: soft-pill positioned at bottom-left corner of the art */
.PL3-groupPanelShareBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pl3-art-share-size);
    height: var(--pl3-art-share-size);
    border-radius: var(--pl3-art-share-radius);
    background: var(--pl3-art-share-bg);
    border: 1px solid var(--pl3-art-share-border);
    color: rgba(255, 255, 255, 0.80);
    font-size: var(--pl3-art-share-font);
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}

.PL3-groupPanelShareBtn:hover,
.PL3-groupPanelShareBtn:focus-visible {
    background: var(--pl3-art-share-hover-bg);
    color: #fff;
}

.PL3-groupPanelShareBtn--copied {
    background: rgba(80, 220, 130, 0.30);
    border-color: rgba(80, 220, 130, 0.55);
    color: #6effa8;
}

/* Share button sits on top of art inside the wrapper */
.PL3-groupPanelArtDockWrap .PL3-groupPanelShareBtn {
    position: absolute;
    bottom: var(--pl3-art-share-offset);
    left: var(--pl3-art-share-offset);
    z-index: 130;
}

.PL3-groupPanelArtDock {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    overflow: visible;
}

/* Panel footer — close button overflows the bottom edge */
.PL3-groupPanelFooter {
    position: absolute;
    bottom: calc(var(--pl3-panel-close-h) / -2);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}

.PL3-groupPanelCloseBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--pl3-panel-close-h);
    width: var(--pl3-panel-close-w);
    border-radius: var(--pl3-panel-close-radius);
    background: var(--pl3-panel-close-bg);
    border: 1px solid var(--pl3-panel-close-border);
    color: #c81f3f;
    font-size: var(--pl3-panel-close-font);
    font-weight: 900;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s, color 0.16s, box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    white-space: nowrap;
    box-shadow:
        0 10px 18px rgba(17, 12, 42, 0.24),
        0 2px 6px rgba(136, 18, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -2px 5px rgba(198, 44, 79, 0.08);
    opacity: 0;
    transform: scale(0.72);
    pointer-events: none;
}

.PL3-groupPanelCloseBtn::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
    opacity: 0.9;
    pointer-events: none;
}

.PL3-groupPanelCloseBtn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.PL3-groupPanelCloseBtn span {
    position: relative;
    z-index: 1;
    transform: translateY(-1px) scaleX(1.06);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.PL3-groupPanelCloseBtn:hover {
    background: var(--pl3-panel-close-hover-bg);
    border-color: rgba(255, 255, 255, 1);
    color: #a51434;
    box-shadow:
        0 12px 22px rgba(17, 12, 42, 0.28),
        0 4px 12px rgba(136, 18, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -2px 5px rgba(198, 44, 79, 0.12);
    transform: translateY(-1px) scale(1.03);
}

.PL3-groupPanelCloseBtn:focus-visible {
    outline: none;
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.2),
        0 0 0 4px rgba(207, 31, 46, 0.26),
        0 10px 20px rgba(17, 12, 42, 0.28);
}

.PL3-groupPanel.PL3-groupPanel--closeReady .PL3-groupPanelCloseBtn {
    animation: PL3-panelCloseBtnPop 0.34s cubic-bezier(0.2, 1.35, 0.42, 1) forwards;
    pointer-events: auto;
}

@keyframes PL3-panelCloseBtnPop {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }

    68% {
        opacity: 1;
        transform: scale(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.PL3-groupPanelMeta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.PL3-groupPanelVersions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-direction: column;
    overflow: auto;
    padding-right: 0;
}

.PL3-groupVersionItem {
    display: grid;
    grid-template-columns: var(--pl3-version-art-size) minmax(0, 1fr) var(--pl3-info-btn-size);
    column-gap: var(--pl3-version-row-gap);
    align-items: center;
    border-radius: 10px;
    border: 1px solid var(--pl3-version-card-border);
    background: var(--pl3-version-card-bg);
    box-shadow: var(--pl3-version-card-shadow);
    padding: var(--pl3-version-row-pad);
    cursor: pointer;
    transition: opacity 0.12s, background 0.15s, box-shadow 0.15s, border-color 0.15s;
    overflow: hidden;
    position: relative;
}

.PL3-groupVersionItem:hover {
    background: var(--pl3-version-card-hover-bg);
    border-color: rgba(215, 183, 255, 0.28);
    box-shadow: 0 14px 28px rgba(37, 10, 87, 0.3);
}

.PL3-groupVersionItem:active {
    opacity: 0.7;
}

/* Art wrapper: provides positioning context for the share-on-art button */
.PL3-groupVersionArtWrap {
    position: relative;
    flex-shrink: 0;
    width: var(--pl3-version-art-size);
    height: var(--pl3-version-art-size);
    margin-right: 0;
    align-self: center;
    border-radius: 10px;
    padding: 3px;
    background: var(--pl3-version-square-bg);
    box-shadow: inset 0 0 0 1px var(--pl3-version-square-border);
}

.PL3-groupVersionArt {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

/* Name + tray column, sits to the right of the art */
.PL3-groupVersionBody {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 6px;
    justify-content: flex-end;
    padding: 1px 0;
}

.PL3-groupVersionName {
    min-width: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.PL3-groupVersionTray {
    display: grid;
    grid-template-columns: repeat(var(--pl3-version-platform-count), var(--pl3-version-platform-size));
    grid-auto-rows: var(--pl3-version-platform-size);
    gap: var(--pl3-version-platform-gap);
    align-items: center;
    margin-top: auto;
    justify-content: start;
    width: calc(var(--pl3-version-platform-count) * var(--pl3-version-platform-size) + (var(--pl3-version-platform-count) - 1) * var(--pl3-version-platform-gap));
    max-width: 100%;
}

.PL3-groupVersionInfoBtn {
    flex: 0 0 var(--pl3-info-btn-size);
    width: var(--pl3-info-btn-size);
    height: var(--pl3-info-btn-size);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(166, 94, 255, 0.28), rgba(83, 30, 163, 0.16));
    border: 1px solid rgba(226, 195, 255, 0.22);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    align-self: center;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    position: relative;
    overflow: hidden;
}

.PL3-groupVersionInfoGlyph {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.PL3-groupVersionInfoGlyph--info {
    opacity: 1;
    transform: translateX(0);
}

.PL3-groupVersionInfoGlyph--back {
    opacity: 0;
    transform: translateX(5px);
}

.PL3-groupVersionPlatform {
    width: var(--pl3-version-platform-size);
    height: var(--pl3-version-platform-size);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex: 0 0 auto;
    touch-action: manipulation;
}

.PL3-groupVersionPlatform:hover {
    background: rgba(255, 255, 255, 0.2);
}

.PL3-groupVersionPlatform--disabled {
    opacity: 0.34;
    pointer-events: none;
}

.PL3-groupVersionPlatformIcon {
    width: var(--pl3-version-platform-icon-size);
    height: var(--pl3-version-platform-icon-size);
    display: block;
    font-size: var(--pl3-version-platform-icon-size);
    line-height: 1;
}

.PL3-groupVersionEmpty {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.75);
    padding: 8px 4px;
}

.PL3-groupPanelEdgeClose {
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(22, 35, 83, 0.98), rgba(9, 18, 44, 0.96));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    z-index: 140;
}

.PL3-groupPanelEdgeClose:hover {
    filter: brightness(1.14);
}

.PL3-groupArtInPanel {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    object-fit: cover;
    transform: none;
    box-shadow: none;
    border-radius: 14px;
    cursor: default;
    position: relative;
    z-index: 120;
}

.PL3-groupArtInPanel:hover,
.PL3-groupArtInPanel:focus-visible {
    transform: none;
    box-shadow: none;
    filter: none;
}

.PL3-groupArtInPanel--expandable {
    cursor: zoom-in;
    outline: none;
}

.PL3-groupPanelArtDock:hover .PL3-groupArtInPanel--expandable,
.PL3-groupArtInPanel--expandable:focus-visible {
    filter: brightness(1.05);
}

.PL3-part--gallery {
    overflow: visible;
    z-index: 40;
    position: relative;
}

.PL3-section {
    overflow-x: hidden;
}


/* ===== In-Panel Song Detail (replaces overlay) ===== */

/* In detail mode the panel keeps two rows:
   row 1 = art left + info column right
   row 2 = full-width lyrics */
.PL3-groupPanelInner--detail .PL3-groupPanelVersions {
    display: none;
}

.PL3-groupPanelInner--detail {
    gap: 0;
}

.PL3-groupPanelInner--detail .PL3-groupPanelTop {
    flex-wrap: nowrap;
    align-items: flex-start;
    padding-bottom: 6px;
}

.PL3-groupPanelInner--detail .PL3-groupPanelGroupMeta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    order: 2;
    flex: 1 1 auto;
    min-height: var(--pl3-panel-art-dock-size);
    padding-right: calc(var(--pl3-btn-h) + 8px);
    padding-top: 2px;
}

.PL3-groupPanelInner--detail .PL3-groupPanelGroupCount {
    display: none;
}

.PL3-groupPanelInner--detail .PL3-groupPanelGroupTitle {
    font-size: 1.4rem;
    line-height: 1.02;
    width: 100%;
}

.PL3-groupPanelSongDetail {
    display: none;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 0;
    padding: 2px 0 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    position: static;
}

.PL3-groupPanelInner--detail .PL3-groupPanelSongDetail {
    display: flex;
    order: 0;
    flex: 1 1 auto;
    width: 100%;
}

.PL3-groupPanelSongDetail .PL3-groupVersionBody {
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 0;
}

.PL3-groupPanelSongDetailControls {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    z-index: 2;
}

.PL3-groupPanelSongDetailControls .PL3-groupVersionInfoBtn {
    width: var(--pl3-btn-h);
    height: var(--pl3-btn-h);
    flex-basis: var(--pl3-btn-h);
    margin-left: 0;
    pointer-events: auto;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.PL3-groupVersionInfoBtn--back {
    border-color: rgba(226, 195, 255, 0.24);
    background: linear-gradient(180deg, rgba(172, 99, 255, 0.28), rgba(83, 30, 163, 0.18));
    color: rgba(255, 255, 255, 0.9);
}

.PL3-groupVersionInfoBtn--back .PL3-groupVersionInfoGlyph--info {
    opacity: 0;
    transform: translateX(-5px);
}

.PL3-groupVersionInfoBtn--back .PL3-groupVersionInfoGlyph--back {
    opacity: 1;
    transform: translateX(0);
}

.PL3-groupVersionInfoBtn--back:hover,
.PL3-groupVersionInfoBtn--back:focus-visible {
    background: linear-gradient(180deg, rgba(192, 123, 255, 0.34), rgba(99, 38, 188, 0.24));
    transform: translateX(-1px);
}

.PL3-groupPanelSongDetail .PL3-groupVersionName {
    font-size: 1rem;
    line-height: 1.1;
    margin-top: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.PL3-groupPanelSongDetail .PL3-groupVersionTray {
    grid-template-columns: repeat(var(--pl3-version-platform-count), var(--pl3-version-detail-platform-size));
    grid-auto-rows: var(--pl3-version-detail-platform-size);
    gap: var(--pl3-version-platform-gap);
    justify-content: start;
    margin-top: auto;
    width: calc(var(--pl3-version-platform-count) * var(--pl3-version-detail-platform-size) + (var(--pl3-version-platform-count) - 1) * var(--pl3-version-platform-gap));
}

.PL3-groupPanelSongDetail .PL3-groupVersionPlatform {
    width: var(--pl3-version-detail-platform-size);
    height: var(--pl3-version-detail-platform-size);
}

.PL3-groupPanelSongDetail .PL3-groupVersionPlatformIcon {
    width: var(--pl3-version-detail-platform-icon-size);
    height: var(--pl3-version-detail-platform-icon-size);
    font-size: var(--pl3-version-detail-platform-icon-size);
}

.PL3-groupPanelSongStage {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.PL3-groupPanelInner--detail .PL3-groupPanelSongStage {
    display: block;
}

/* ===== Lyrics Scroll ===== */
.PL3-lyricsStage {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 45vh;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: var(--pl3-version-stage-bg);
    transition: flex-basis 0.3s ease, opacity 0.3s ease;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

.PL3-groupPanelInner--detail .PL3-lyricsStage {
    background: transparent;
}

.PL3-lyricsStage--collapsed {
    flex: 0 0 0px;
    opacity: 0;
    min-height: 0;
    overflow: hidden;
}

.PL3-lyricsScroller {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 28px;
    overflow-y: auto;
    scrollbar-width: none;
}

.PL3-lyricsScroller::-webkit-scrollbar {
    display: none;
}

.PL3-lyricsTrack {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 4px;
    width: 20px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    touch-action: none;
}

.PL3-lyricsThumb {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    cursor: grab;
    touch-action: none;
}

.PL3-lyricsThumbImg {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    display: block;
    pointer-events: none;
    user-select: none;
}

.PL3-lyricsContent {
    padding: 14px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.PL3-lyricsLine {
    margin: 0;
    padding: 3px 0;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.PL3-lyricsLine--blank {
    height: 10px;
    padding: 0;
}


@media (min-width: 361px) {
    :root {
        --pl3-part-pad-x: 8px;
        --pl3-part-pad-y: 8px;
        --pl3-gap-sm: 8px;
        --pl3-gap-md: 9px;
        --pl3-panel-pad-x: 4px;
        --pl3-panel-inner-pad-x: 6px;
        --pl3-panel-art-dock-size: 132px;
    }

    .PL3-card {
        width: 360px;
    }


    .PL3-groupPanelInner {
        border-left: 1px solid rgba(255, 255, 255, 0.16);
        border-right: 1px solid rgba(255, 255, 255, 0.16);
        padding: var(--pl3-panel-inner-pad-y) var(--pl3-panel-inner-pad-x) var(--pl3-panel-inner-pad-bottom);
    }
}


@media (min-width: 375px) {

    .PL3-card {
        width: 374px;
    }
}


@media (min-width: 425px) {
    .PL3-card {
        width: 400px;
    }
}


@media (min-width: 768px) {
    :root {
        --pl3-part-pad-x: 10px;
        --pl3-part-pad-y: 10px;
        --pl3-gap-md: 10px;
        --pl3-gap-sm: 8px;
        --pl3-tablet-panel-band-h: 3.25rem;
        --pl3-tablet-highlight-column: 50;
        --pl3-tablet-gallery-column: 50;
        --pl3-section-header: 19;
        --pl3-section-highlight: 37;
        --pl3-section-gallery: 37;
        --pl3-split-gap: 2.6vh;
        --pl3-panel-art-dock-size: 148px;
        --pl3-version-art-size: 58px;
        --pl3-version-platform-size: 23px;
        --pl3-version-platform-icon-size: 17px;
        --pl3-version-detail-platform-size: 28px;
        --pl3-version-detail-platform-icon-size: 20px;
        --pl3-version-platform-gap: 16px;
        --pl3-gallery-pill-gap: 10px;
        --pl3-gallery-unit-max: 8rem;
        --pl3-gallery-pad-block-start: 0.48rem;
        --pl3-gallery-pad-block-end: 0.08rem;
        --pl3-highlight-panel-max-h: 37vh;
        --pl3-gallery-panel-max-h: clamp(440px, 64vh, 680px);
    }

    .PL3-card {
        width: min(96vw, var(--pl3-tablet-card-max-w));
    }

    .PL3-split {
        grid-template-columns:
            minmax(0, var(--pl3-tablet-highlight-col-w)) minmax(0, var(--pl3-tablet-gallery-col-w));
        grid-template-rows:
            minmax(0, var(--pl3-tablet-header-pct)) minmax(0, 1fr);
        grid-template-areas:
            "header header"
            "highlight gallery";
    }


    .PL3-subTitle {
        font-size: 1.6rem;
        position: absolute;
        bottom: -3.5rem;
        letter-spacing: -0.02em;
    }

    .PL3-heroImgWrap {
        padding: 18px 0;
    }

    .PL3-heroImg {
        width: clamp(100px, 15vw, 140px);
        height: clamp(100px, 15vw, 140px);
    }

    .PL3-heroText {
        margin-left: 15%;
    }

    .PL3-heroSlogan {
        font-size: 2.3rem;
        font-weight: 500;
        line-height: 1.05;
    }

    .PL3-btnRow {
        width: 95%;
    }

    .PL3-heroBtn {
        padding: 0 12px;
    }

    .PL3-groupPanel {
        top: var(--pl3-nav-h);
        left: 0;
        right: calc(var(--pl3-tablet-gallery-col-w) + var(--pl3-split-gap));
        bottom: 0;
    }

    .PL3-groupPanelInner {
        gap: 12px;
        padding: 20px;
        border-radius: 0 0 var(--pl3-card-radius) var(--pl3-card-radius);
        border-left: 1px solid var(--pl3-panel-shell-border);
        border-right: 1px solid var(--pl3-panel-shell-border);
        background:
            radial-gradient(130% 120% at 18% 0%, rgba(89, 123, 255, 0.34), rgba(6, 16, 41, 0.96) 52%),
            linear-gradient(180deg, rgba(10, 19, 48, 0.99), rgba(7, 14, 35, 0.985));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .PL3-groupPanelTop {
        padding-right: calc(var(--pl3-panel-close-w) + 16px);
    }

    .PL3-groupPanelFooter {
        top: 0;
        right: calc(-0.8 * var(--pl3-panel-close-w));
        bottom: auto;
        left: auto;
        transform: none;
    }

    .PL3-groupPanelInner--detail .PL3-groupPanelGroupTitle {
        font-size: 1.7rem;
        line-height: 1.02;
        width: 100%;
    }

    .PL3-galleryHeader {
        min-height: var(--pl3-tablet-panel-band-h);
        position: relative;
        z-index: 2;
        align-items: flex-end;
        margin-bottom: 0;
    }

    .PL3-tabNav {
        min-height: var(--pl3-tablet-panel-band-h);
        align-items: flex-end;
    }

    .PL3-gallery {
        justify-content: flex-start;
        overflow-x: visible;
        overflow-y: hidden;
        position: relative;
        z-index: 1;
        margin-top: 0;
    }

    .PL3-part--highlight {
        align-self: start;
        height: min(100%, var(--pl3-gallery-panel-max-h));
        min-width: 0;
    }

    .PL3-part--gallery {
        align-self: start;
        height: min(100%, var(--pl3-gallery-panel-max-h));
        gap: 0;
    }


    .PL3-focusHeader {
        font-size: 1.5rem;
    }

    .PL3-galleryGhostPlaylistImg {
        padding: 2rem 0.75rem 0.6rem;
    }


}


@media (min-width: 1024px) {
    .PL3-heroSlogan {
        left: 30px;
        font-size: 2.75rem;
    }

    .PL3-focusHeader {
        font-size: 2rem;
    }

    #PL3-tabPanel-release {
        --pl3-focus-art-size: 200px;
    }

    .PL3-focusArtCol {
        flex: 0 0 var(--pl3-focus-art-size);
        width: var(--pl3-focus-art-size);
        height: var(--pl3-focus-art-size);
    }

    .PL3-focusArtWrap {
        width: var(--pl3-focus-art-size);
        height: var(--pl3-focus-art-size);
    }

    .PL3-focusLinksCol {
        width: 160px;
    }

    .PL3-subTitle {
        font-size: 2.1rem;
        position: absolute;
        bottom: -5rem;
    }

    .PL3-tabPanels {
        max-height: 350px;
    }

    .PL3-galleryGhostPlaylistImg {
        padding: 3rem 0.75rem 0.6rem;
    }

}


@media (prefers-reduced-motion: reduce) {

    .cycle-pillar,
    .cycle-arrow {
        animation: none !important;
    }
}