:root {
    --chw-player-height: 88px;
}

.chw-widget {
    --chw-columns: 4;
    --chw-col-width: calc((100% + 20px) / 4 - 20px);
    --chw-gap: 20px;
    --chw-radius: 20px;
    --chw-card-bg: transparent;
    --chw-accent: #8b5cf6;
    --chw-green: #33d17a;
    --chw-text: #f7f7fb;
    --chw-muted: rgba(247, 247, 251, .52);
    --chw-border: rgba(255, 255, 255, .09);
    --chw-border-width: 1px;
    --chw-play-bg: #33d17a;
    --chw-play-bg-hover: #58e493;
    --chw-play-color: #07130c;
    --chw-play-size: 48px;
    --chw-rank-color: #fff;
    position: relative;
    width: 100%;
    color: var(--chw-text);
}

.chw-widget *,
.chw-player * {
    box-sizing: border-box;
}

.chw-items {
    min-width: 0;
}

.chw-layout-grid .chw-items {
    display: grid;
    grid-template-columns: repeat(var(--chw-columns), minmax(0, 1fr));
    gap: var(--chw-gap);
}

.chw-layout-carousel {
    --chw-arrow-offset: 28px;
    padding-inline: 0;
}

.chw-layout-carousel.chw-bleed-left,
.chw-layout-carousel.chw-bleed-right,
.chw-layout-carousel.chw-bleed-full {
    max-width: none;
}

.chw-layout-carousel.chw-bleed-left {
    width: calc(50vw + 50%);
    margin-left: calc(50% - 50vw);
}

.chw-layout-carousel.chw-bleed-right {
    width: calc(50vw + 50%);
}

.chw-layout-carousel.chw-bleed-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.chw-layout-carousel .chw-items {
    display: flex;
    gap: var(--chw-gap);
    overflow-x: auto;
    padding: 2px 2px 12px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.chw-layout-carousel .chw-items::-webkit-scrollbar {
    display: none;
}

.chw-layout-carousel .chw-track-card {
    flex: 0 0 var(--chw-col-width);
    min-width: 0;
    scroll-snap-align: start;
}

.chw-track-card {
    position: relative;
    min-width: 0;
    border-radius: var(--chw-radius);
    background: var(--chw-card-bg);
    transition: transform .22s ease, background-color .22s ease;
}

.chw-layout-grid .chw-track-card,
.chw-layout-carousel .chw-track-card {
    padding: 0;
}

.chw-cover-wrap {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--chw-radius);
    background: #11131a;
    box-shadow: inset 0 0 0 1px var(--chw-border);
}

.chw-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .25s ease;
}

.chw-cover-placeholder {
    background:
        radial-gradient(circle at 30% 20%, rgba(139, 92, 246, .65), transparent 45%),
        linear-gradient(145deg, #151822, #08090e);
}

.chw-track-card:hover .chw-cover {
    transform: scale(1.025);
}

.chw-track-card.is-current .chw-cover-wrap {
    box-shadow: inset 0 0 0 2px var(--chw-green), 0 0 0 1px var(--chw-green);
}

.chw-cover-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(17, 19, 26, .82);
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .01em;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .26);
    backdrop-filter: blur(8px);
}

.chw-layout-chart .chw-cover-badge,
.chw-layout-compact .chw-cover-badge {
    top: 5px;
    right: 5px;
    padding: 4px 6px;
    font-size: 9px;
    letter-spacing: 0;
}


.chw-play {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: var(--chw-play-size);
    height: var(--chw-play-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--chw-play-color);
    background: var(--chw-play-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
    cursor: pointer;
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
    z-index: 4;
}

.chw-track-card:hover .chw-play,
.chw-track-card:focus-within .chw-play,
.chw-track-card.is-current .chw-play,
.chw-layout-hero .chw-play {
    opacity: 1;
    transform: translateY(0);
}

.chw-play:hover {
    background: var(--chw-play-bg-hover);
}

.chw-play svg,
.chw-player button svg,
.chw-player-volume-wrap > svg,
.chw-carousel-arrow svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.chw-pause-icon {
    display: none;
}

.is-playing .chw-play-icon,
.chw-player.is-playing .chw-player-toggle .chw-play-icon {
    display: none;
}

.is-playing .chw-pause-icon,
.chw-player.is-playing .chw-player-toggle .chw-pause-icon {
    display: block;
}

.chw-track-info {
    min-width: 0;
    padding: 13px 2px 2px;
}

.chw-widget .chw-track-title {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    color: var(--chw-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chw-track-title a {
    color: inherit;
    text-decoration: none;
}

.chw-track-artist {
    margin-top: 2px;
    color: rgba(247, 247, 251, .74);
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chw-track-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
    margin-top: 7px;
    color: var(--chw-muted);
    font-size: 12px;
    line-height: 1.35;
}

.chw-track-meta > * + *::before {
    content: "·";
    margin-right: 8px;
    color: rgba(255, 255, 255, .25);
}

.chw-track-meta a {
    color: inherit;
    text-decoration: none;
}

.chw-track-meta a:hover,
.chw-track-title a:hover {
    color: var(--chw-green);
}

.chw-spotify-badge {
    display: inline-flex;
    align-items: center;
    color: #1ed760 !important;
    font-weight: 700;
}

.chw-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border: 2px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    color: var(--chw-rank-color);
    background: color-mix(in srgb, var(--chw-accent) 78%, rgba(5, 6, 10, .92));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.chw-carousel-arrow {
    position: absolute;
    top: calc(50% - 40px);
    z-index: 8;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--chw-border);
    border-radius: 50%;
    color: #fff;
    background: rgba(8, 9, 14, .86);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .26);
    cursor: pointer;
    transform: translateY(-50%);
}

.chw-carousel-prev { left: calc(-1 * var(--chw-arrow-offset)); }
.chw-carousel-next { right: calc(-1 * var(--chw-arrow-offset)); }

.chw-layout-carousel.chw-bleed-left .chw-carousel-prev,
.chw-layout-carousel.chw-bleed-full .chw-carousel-prev {
    left: 10px;
}

.chw-layout-carousel.chw-bleed-right .chw-carousel-next,
.chw-layout-carousel.chw-bleed-full .chw-carousel-next {
    right: 10px;
}

.chw-layout-chart .chw-items,
.chw-layout-compact .chw-items {
    display: grid;
    gap: 8px;
}

.chw-layout-compact .chw-items {
    gap: 4px;
}

.chw-layout-chart,
.chw-layout-chart .chw-items,
.chw-layout-chart .chw-track-card {
    width: 100%;
    max-width: none;
}

.chw-layout-chart .chw-track-card,
.chw-layout-compact .chw-track-card {
    display: grid;
    grid-template-columns: 52px 72px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 5px 18px 5px 8px;
    border: 1px solid var(--chw-border);
    background: var(--chw-card-bg, rgba(255, 255, 255, .035));
}

.chw-layout-chart .chw-track-card:not(.chw-has-rank) {
    grid-template-columns: 72px minmax(0, 1fr);
}

.chw-layout-chart .chw-track-card.chw-has-row-play {
    grid-template-columns: 52px 72px minmax(0, 1fr) 42px;
}

.chw-layout-chart .chw-track-card.chw-has-row-play:not(.chw-has-rank) {
    grid-template-columns: 72px minmax(0, 1fr) 42px;
}

.chw-layout-chart .chw-rank,
.chw-layout-compact .chw-rank {
    position: static;
    min-width: 46px;
    height: auto;
    padding: 0;
    border: 0;
    color: #fff;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 3px 14px color-mix(in srgb, var(--chw-accent) 70%, transparent);
}

.chw-layout-chart .chw-cover-wrap,
.chw-layout-compact .chw-cover-wrap {
    width: 72px;
    height: 72px;
    border-radius: calc(var(--chw-radius) * .65);
}

.chw-layout-chart .chw-track-info,
.chw-layout-compact .chw-track-info {
    padding: 0 62px 0 0;
}

.chw-layout-chart .chw-track-info {
    padding-right: 0;
}

.chw-layout-chart .chw-play,
.chw-layout-compact .chw-play {
    right: 10px;
    bottom: 50%;
    width: 42px;
    height: 42px;
    transform: translateY(50%);
}

.chw-layout-chart .chw-play {
    right: 6px;
    width: 36px;
    height: 36px;
    opacity: 0;
    transform: translateY(calc(50% + 6px));
}

.chw-layout-chart .chw-play-row,
.chw-layout-chart .chw-track-card:hover .chw-play-row,
.chw-layout-chart .chw-track-card:focus-within .chw-play-row,
.chw-layout-chart .chw-track-card.is-current .chw-play-row,
.chw-layout-chart .chw-track-card.is-playing .chw-play-row {
    position: static;
    right: auto;
    bottom: auto;
    justify-self: end;
    width: 36px;
    height: 36px;
    opacity: 1;
    transform: none;
}

.chw-style-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.chw-style-chips a,
.chw-style-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #07130c;
    background: color-mix(in srgb, var(--chw-green) 88%, white);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
}

.chw-layout-chart .chw-track-card:hover .chw-play,
.chw-layout-chart .chw-track-card:focus-within .chw-play,
.chw-layout-chart .chw-track-card.is-current .chw-play,
.chw-layout-chart .chw-track-card.is-playing .chw-play {
    opacity: 1;
    transform: translateY(50%);
}

.chw-layout-chart .chw-track-card.is-playing .chw-play,
.chw-layout-compact .chw-track-card.is-playing .chw-play {
    transform: translateY(50%);
}

.chw-layout-compact .chw-track-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    min-height: 52px;
    padding: 3px 8px 3px 4px;
}

.chw-layout-compact .chw-rank {
    display: none;
}

.chw-layout-compact .chw-cover-wrap {
    width: 46px;
    height: 46px;
    border-radius: calc(var(--chw-radius) * .45);
}

.chw-layout-compact .chw-track-info {
    padding: 0;
}

.chw-layout-compact .chw-track-title {
    font-size: 14px;
    line-height: 1.12;
}

.chw-layout-compact .chw-track-artist {
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.15;
}

.chw-layout-compact .chw-track-meta {
    gap: 2px 7px;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.15;
}

.chw-layout-compact .chw-play {
    right: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    opacity: 0;
    transform: translateY(4px);
}

.chw-layout-compact .chw-track-card:hover .chw-play,
.chw-layout-compact .chw-track-card:focus-within .chw-play,
.chw-layout-compact .chw-track-card.is-current .chw-play,
.chw-layout-compact .chw-track-card.is-playing .chw-play {
    opacity: 1;
    transform: none;
}

.chw-layout-chart .chw-track-card.chw-cover-only {
    grid-template-columns: 52px 72px;
    width: max-content;
    min-height: 0;
    padding-right: 8px;
}

.chw-layout-chart .chw-track-card.chw-cover-only:not(.chw-has-rank) {
    grid-template-columns: 72px;
}

.chw-layout-chart .chw-track-card.chw-cover-only.chw-has-row-play {
    grid-template-columns: 52px 72px 42px;
}

.chw-layout-chart .chw-track-card.chw-cover-only.chw-has-row-play:not(.chw-has-rank) {
    grid-template-columns: 72px 42px;
}

.chw-layout-compact .chw-track-card.chw-cover-only {
    grid-template-columns: 46px;
    width: 46px;
    min-height: 0;
    padding: 0;
}

.chw-layout-hero .chw-items {
    display: grid;
    gap: var(--chw-gap);
}

.chw-layout-hero {
    min-width: 0;
    max-width: 100%;
    container: chw-hero / inline-size;
}

.chw-layout-hero .chw-track-card {
    display: grid;
    grid-template-columns: minmax(0, min(46%, 480px)) minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 4cqi, 54px);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: clamp(12px, 3.5cqi, 42px);
    border: 1px solid var(--chw-border);
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--chw-accent) 26%, transparent), transparent 42%),
        var(--chw-card-bg, rgba(255, 255, 255, .035));
}

.chw-layout-hero .chw-cover-wrap {
    width: 100%;
    max-width: none;
}

.chw-layout-hero .chw-track-info {
    padding: 0;
}

.chw-layout-hero .chw-track-title {
    font-size: clamp(24px, 6cqi, 60px);
    line-height: 1.02;
    white-space: normal;
}

.chw-layout-hero .chw-track-artist {
    margin-top: clamp(4px, 1.2cqi, 12px);
    font-size: clamp(15px, 2.6cqi, 25px);
}

.chw-layout-hero .chw-track-meta {
    margin-top: 18px;
    font-size: 14px;
}

.chw-layout-hero .chw-rank {
    top: 30px;
    left: 30px;
    min-width: 52px;
    height: 52px;
    font-size: 21px;
}

.chw-layout-hero .chw-play {
    width: clamp(42px, 8cqi, 62px);
    height: clamp(42px, 8cqi, 62px);
}

.chw-layout-hero .chw-track-card.chw-cover-only {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

@container chw-hero (max-width: 680px) {
    .chw-layout-hero .chw-track-card {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(12px, 4cqi, 22px);
    }

    .chw-layout-hero .chw-track-title {
        font-size: clamp(24px, 9cqi, 42px);
    }

    .chw-layout-hero .chw-rank {
        top: clamp(18px, 5cqi, 28px);
        left: clamp(18px, 5cqi, 28px);
    }
}

.chw-empty {
    padding: 24px;
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 20px;
    color: rgba(255, 255, 255, .58);
    text-align: center;
}

.chw-track-search {
    --chw-search-bg: rgba(255, 255, 255, .035);
    --chw-search-accent: #33d17a;
    --chw-search-text: #f7f7fb;
    --chw-search-radius: 20px;
    padding: clamp(20px, 4vw, 42px);
    border: 1px solid var(--chw-border);
    border-radius: var(--chw-search-radius);
    color: var(--chw-search-text);
    background: var(--chw-search-bg);
}

.chw-search-heading {
    margin: 0;
    color: inherit;
    font-size: clamp(25px, 3.4vw, 42px);
    line-height: 1.08;
}

.chw-search-description {
    max-width: 720px;
    margin: 9px 0 20px;
    color: color-mix(in srgb, var(--chw-search-text) 65%, transparent);
    font-size: 14px;
    line-height: 1.45;
}

.chw-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
}

.chw-search-form input[type="search"] {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--chw-search-radius);
    outline: none;
    color: var(--chw-search-text);
    background: rgba(4, 6, 10, .6);
    box-shadow: none;
    font: inherit;
}

.chw-search-form input[type="search"]:focus {
    border-color: var(--chw-search-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--chw-search-accent) 22%, transparent);
}

.chw-search-form button {
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--chw-search-radius);
    color: #07130c;
    background: var(--chw-search-accent);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.chw-search-status {
    min-height: 19px;
    margin: 7px 2px 0;
    color: color-mix(in srgb, var(--chw-search-text) 48%, transparent);
    font-size: 11px;
}

.chw-search-results {
    display: grid;
    gap: 6px;
}

.chw-search-result {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--chw-border);
    border-radius: var(--chw-search-radius);
    background: rgba(4, 6, 10, .38);
}

.chw-search-result .chw-cover-wrap {
    width: 54px;
    height: 54px;
    border-radius: var(--chw-search-radius);
}

.chw-search-result .chw-track-info {
    padding: 0;
}

.chw-search-result .chw-track-title {
    font-size: 15px;
    line-height: 1.15;
}

.chw-search-result .chw-track-artist {
    margin-top: 2px;
    font-size: 12px;
}

.chw-search-result .chw-track-meta {
    margin-top: 3px;
    font-size: 10px;
}

.chw-search-play {
    position: static;
    width: 40px;
    height: 40px;
    opacity: 1;
    transform: none;
    background: var(--chw-search-accent);
}

.chw-search-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.chw-search-share {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--chw-search-text) 18%, transparent);
    border-radius: 50%;
    color: color-mix(in srgb, var(--chw-search-text) 72%, transparent);
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
}

.chw-search-share:hover,
.chw-search-share:focus-visible {
    border-color: var(--chw-search-accent);
    outline: none;
    color: var(--chw-search-text);
    background: color-mix(in srgb, var(--chw-search-accent) 16%, transparent);
}

.chw-search-share svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.chw-search-result:hover .chw-search-play,
.chw-search-result:focus-within .chw-search-play,
.chw-search-result.is-current .chw-search-play {
    opacity: 1;
    transform: none;
}

.chw-search-empty {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 13px 15px;
    border: 1px dashed rgba(255, 255, 255, .17);
    border-radius: var(--chw-search-radius);
    color: color-mix(in srgb, var(--chw-search-text) 65%, transparent);
    font-size: 13px;
}

.chw-search-empty[hidden] {
    display: none;
}

.chw-search-empty a,
.chw-search-empty strong {
    color: var(--chw-search-accent);
    text-decoration: none;
}

.chw-player {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(360px, 1.7fr) minmax(150px, 1fr);
    align-items: center;
    gap: 24px;
    min-height: var(--chw-player-height);
    padding: 10px clamp(16px, 3vw, 42px);
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #f8f8fb;
    background: rgba(8, 9, 13, .95);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .3);
    backdrop-filter: blur(22px) saturate(140%);
    transform: translateY(110%);
    transition: transform .28s ease;
}

.chw-player.is-active {
    transform: translateY(0);
}

body.chw-player-is-active {
    padding-bottom: var(--chw-player-height) !important;
}

.chw-player-track {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.chw-player-cover {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 9px;
    object-fit: cover;
    background: #151721;
}

.chw-player-copy {
    display: grid;
    min-width: 0;
}

.chw-player-title,
.chw-player-event {
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chw-player-title {
    font-size: 15px;
    font-weight: 750;
}

.chw-player-artist {
    overflow: hidden;
    margin-top: 2px;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chw-player-event {
    margin-top: 3px;
    color: rgba(255, 255, 255, .42);
    font-size: 11px;
}

.chw-player-transport {
    display: grid;
    gap: 7px;
}

.chw-player-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.chw-player button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    color: rgba(255, 255, 255, .75);
    background: transparent;
    cursor: pointer;
}

.chw-player button:hover {
    color: #fff;
}

.chw-player .chw-player-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #07130c;
    background: #33d17a;
}

.chw-player-progress-row {
    display: grid;
    grid-template-columns: 38px minmax(100px, 1fr) 38px;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .5);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.chw-player input[type="range"] {
    width: 100%;
    height: 4px;
    margin: 0;
    padding: 0;
    accent-color: #33d17a;
    cursor: pointer;
}

.chw-player-volume-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.chw-player-volume-wrap > svg {
    width: 19px;
    color: rgba(255, 255, 255, .55);
}

.chw-player-volume {
    max-width: 120px;
}

@media (max-width: 900px) {
    :root { --chw-player-height: 82px; }
    .chw-player {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
    }
    .chw-player-transport {
        display: contents;
    }
    .chw-player-buttons {
        grid-column: 2;
        grid-row: 1;
    }
    .chw-player-progress-row {
        position: absolute;
        top: -3px;
        right: 0;
        left: 0;
        display: block;
    }
    .chw-player-progress-row span { display: none; }
    .chw-player-volume-wrap { display: none; }
}

@media (max-width: 767px) {
    .chw-widget {
        --chw-columns: 2;
        --chw-col-width: min(74vw, 280px);
        --chw-gap: 14px;
    }
    .chw-layout-carousel .chw-items {
        margin-inline: -2px;
    }
    .chw-carousel-arrow {
        top: 42%;
        width: 34px;
        height: 34px;
    }
    .chw-play {
        right: 10px;
        bottom: 10px;
        width: 42px;
        height: 42px;
        opacity: 1;
        transform: none;
    }
    .chw-track-title { font-size: 15px; }
    .chw-track-artist { font-size: 13px; }
    .chw-track-meta { font-size: 11px; }
    .chw-layout-chart .chw-track-card,
    .chw-layout-compact .chw-track-card {
        grid-template-columns: 38px 58px minmax(0, 1fr);
        gap: 9px;
        min-height: 68px;
        padding: 4px 8px;
    }
    .chw-layout-chart .chw-track-card.chw-has-row-play {
        grid-template-columns: 38px 58px minmax(0, 1fr) 32px;
    }
    .chw-layout-chart .chw-track-card.chw-has-row-play:not(.chw-has-rank) {
        grid-template-columns: 58px minmax(0, 1fr) 32px;
    }
    .chw-layout-chart .chw-cover-wrap,
    .chw-layout-compact .chw-cover-wrap {
        width: 58px;
        height: 58px;
    }
    .chw-layout-chart .chw-track-info,
    .chw-layout-compact .chw-track-info {
        padding-right: 42px;
    }
    .chw-layout-chart .chw-track-info {
        padding-right: 0;
    }
    .chw-layout-chart .chw-play,
    .chw-layout-compact .chw-play {
        right: 5px;
        width: 36px;
        height: 36px;
    }
    .chw-layout-chart .chw-play-row,
    .chw-layout-chart .chw-track-card:hover .chw-play-row,
    .chw-layout-chart .chw-track-card:focus-within .chw-play-row,
    .chw-layout-chart .chw-track-card.is-current .chw-play-row,
    .chw-layout-chart .chw-track-card.is-playing .chw-play-row {
        position: static;
        right: auto;
        bottom: auto;
        width: 30px;
        height: 30px;
        opacity: 1;
        transform: none;
    }
    .chw-layout-chart .chw-play,
    .chw-layout-chart .chw-track-card:hover .chw-play,
    .chw-layout-chart .chw-track-card:focus-within .chw-play,
    .chw-layout-chart .chw-track-card.is-current .chw-play,
    .chw-layout-chart .chw-track-card.is-playing .chw-play {
        right: 4px;
        bottom: 4px;
        width: 30px;
        height: 30px;
        opacity: 1;
        transform: none;
    }
    .chw-layout-chart .chw-rank { font-size: 24px; }
    .chw-layout-compact .chw-track-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
        min-height: 48px;
        padding: 3px 6px 3px 3px;
    }
    .chw-layout-compact .chw-cover-wrap {
        width: 42px;
        height: 42px;
    }
    .chw-layout-compact .chw-track-info { padding-right: 0; }
    .chw-layout-compact .chw-play,
    .chw-layout-compact .chw-track-card:hover .chw-play,
    .chw-layout-compact .chw-track-card:focus-within .chw-play,
    .chw-layout-compact .chw-track-card.is-current .chw-play,
    .chw-layout-compact .chw-track-card.is-playing .chw-play {
        right: 3px;
        bottom: 3px;
        width: 26px;
        height: 26px;
        opacity: 1;
        transform: none;
    }
    .chw-layout-chart .chw-track-card.chw-cover-only {
        grid-template-columns: 38px 58px;
        width: max-content;
    }
    .chw-layout-chart .chw-track-card.chw-cover-only:not(.chw-has-rank) {
        grid-template-columns: 58px;
    }
    .chw-layout-chart .chw-track-card.chw-cover-only.chw-has-row-play {
        grid-template-columns: 38px 58px 32px;
    }
    .chw-layout-chart .chw-track-card.chw-cover-only.chw-has-row-play:not(.chw-has-rank) {
        grid-template-columns: 58px 32px;
    }
    .chw-layout-compact .chw-track-card.chw-cover-only {
        grid-template-columns: 42px;
        width: 42px;
        padding: 0;
    }
    .chw-search-form { grid-template-columns: 1fr; }
    .chw-search-form button { min-height: 46px; }
    .chw-search-result {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 54px;
        padding: 4px;
    }
    .chw-search-result .chw-cover-wrap {
        width: 46px;
        height: 46px;
    }
    .chw-search-play {
        width: 34px;
        height: 34px;
    }
    .chw-search-actions { gap: 5px; }
    .chw-search-share {
        width: 32px;
        height: 32px;
    }
    .chw-layout-hero .chw-track-card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 18px;
    }
    .chw-layout-hero .chw-track-title { font-size: clamp(28px, 10vw, 44px); }
    .chw-layout-hero .chw-rank { top: 28px; left: 28px; }
    .chw-player {
        padding: 9px 10px;
    }
    .chw-player-cover {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }
    .chw-player-buttons { gap: 4px; }
    .chw-player-prev,
    .chw-player-next { display: none !important; }
    .chw-player-title { font-size: 13px; }
    .chw-player-event { display: none; }
}

@media (hover: none) {
    .chw-layout-chart .chw-play,
    .chw-layout-chart .chw-track-card:hover .chw-play,
    .chw-layout-chart .chw-track-card:focus-within .chw-play,
    .chw-layout-chart .chw-track-card.is-current .chw-play,
    .chw-layout-chart .chw-track-card.is-playing .chw-play {
        right: 4px;
        bottom: 4px;
        width: 30px;
        height: 30px;
        opacity: 1;
        transform: none;
    }
    .chw-layout-compact .chw-play,
    .chw-layout-compact .chw-track-card:hover .chw-play,
    .chw-layout-compact .chw-track-card:focus-within .chw-play,
    .chw-layout-compact .chw-track-card.is-current .chw-play,
    .chw-layout-compact .chw-track-card.is-playing .chw-play {
        right: 4px;
        bottom: 4px;
        width: 28px;
        height: 28px;
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chw-widget *,
    .chw-player {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* 0.5.0 layout system: 20px is the Crowd Hits surface default. Circular controls/chips stay circular. */
.chw-widget {
    --chw-radius: 20px;
}

.chw-layout-chart {
    --chw-chart-cover: 72px;
    --chw-chart-gap: 14px;
    --chw-chart-rank-width: 52px;
    --chw-chart-rank-size: 30px;
    --chw-chart-play: 38px;
}

.chw-layout-compact {
    --chw-compact-cover: 52px;
    --chw-compact-gap: 10px;
    --chw-compact-rank-width: 48px;
    --chw-compact-rank-size: 30px;
    --chw-compact-play: 34px;
    --chw-compact-hover-bg: rgba(255,255,255,.035);
}

/* Full chart: keep separate cards, but make every value scalable from Elementor. */
.chw-layout-chart .chw-items {
    gap: var(--chw-gap);
}

.chw-layout-chart .chw-track-card {
    grid-template-columns: var(--chw-chart-rank-width) var(--chw-chart-cover) minmax(0, 1fr);
    gap: var(--chw-chart-gap);
    min-height: calc(var(--chw-chart-cover) + 10px);
    border: var(--chw-border-width) solid var(--chw-border);
    border-radius: var(--chw-radius);
    overflow: hidden;
}

.chw-layout-chart .chw-track-card:not(.chw-has-rank) {
    grid-template-columns: var(--chw-chart-cover) minmax(0, 1fr);
}

.chw-layout-chart .chw-track-card.chw-has-row-play {
    grid-template-columns: var(--chw-chart-rank-width) var(--chw-chart-cover) minmax(0, 1fr) var(--chw-chart-play);
}

.chw-layout-chart .chw-track-card.chw-has-row-play:not(.chw-has-rank) {
    grid-template-columns: var(--chw-chart-cover) minmax(0, 1fr) var(--chw-chart-play);
}

.chw-layout-chart .chw-cover-wrap {
    width: var(--chw-chart-cover);
    height: var(--chw-chart-cover);
    border-radius: min(20px, calc(var(--chw-radius) * .75));
}

.chw-layout-chart .chw-rank {
    min-width: 0;
    width: var(--chw-chart-rank-width);
    font-size: var(--chw-chart-rank-size);
    color: var(--chw-rank-color);
}

.chw-layout-chart .chw-play-row,
.chw-layout-chart .chw-track-card:hover .chw-play-row,
.chw-layout-chart .chw-track-card:focus-within .chw-play-row,
.chw-layout-chart .chw-track-card.is-current .chw-play-row,
.chw-layout-chart .chw-track-card.is-playing .chw-play-row {
    position: static;
    inset: auto;
    width: var(--chw-chart-play);
    height: var(--chw-chart-play);
    opacity: 1;
    transform: none;
    justify-self: end;
}

/* Compact list: one closed surface, table-like rows inside, optional rank as first column. */
.chw-layout-compact .chw-items {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: var(--chw-border-width) solid var(--chw-border);
    border-radius: var(--chw-radius);
    background: var(--chw-card-bg);
}

.chw-layout-compact .chw-track-card,
.chw-layout-compact .chw-track-card.chw-has-row-play {
    grid-template-columns: var(--chw-compact-rank-width) var(--chw-compact-cover) minmax(0, 1fr) var(--chw-compact-play);
    gap: var(--chw-compact-gap);
    min-height: calc(var(--chw-compact-cover) + 8px);
    border: 0;
    border-bottom: var(--chw-border-width) solid var(--chw-border);
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.chw-layout-compact .chw-track-card:not(.chw-has-rank),
.chw-layout-compact .chw-track-card.chw-has-row-play:not(.chw-has-rank) {
    grid-template-columns: var(--chw-compact-cover) minmax(0, 1fr) var(--chw-compact-play);
}

.chw-layout-compact .chw-track-card:last-child {
    border-bottom: 0;
}

.chw-layout-compact .chw-track-card:hover,
.chw-layout-compact .chw-track-card:focus-within,
.chw-layout-compact .chw-track-card.is-current {
    background: var(--chw-compact-hover-bg);
}

.chw-layout-compact .chw-rank {
    display: grid;
    place-items: center;
    position: static;
    width: var(--chw-compact-rank-width);
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--chw-rank-color);
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    font-size: var(--chw-compact-rank-size);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 3px 14px color-mix(in srgb, var(--chw-accent) 70%, transparent);
}

.chw-layout-compact .chw-cover-wrap {
    width: var(--chw-compact-cover);
    height: var(--chw-compact-cover);
    border-radius: min(20px, calc(var(--chw-radius) * .65));
}

.chw-layout-compact .chw-track-info {
    min-width: 0;
    padding: 0;
}

.chw-layout-compact .chw-play-row,
.chw-layout-compact .chw-track-card:hover .chw-play-row,
.chw-layout-compact .chw-track-card:focus-within .chw-play-row,
.chw-layout-compact .chw-track-card.is-current .chw-play-row,
.chw-layout-compact .chw-track-card.is-playing .chw-play-row {
    position: static;
    inset: auto;
    width: var(--chw-compact-play);
    height: var(--chw-compact-play);
    opacity: 1;
    transform: none;
    justify-self: end;
    align-self: center;
}

/* Never animate list play buttons vertically; this fixes the desktop hover jump. */
.chw-layout-chart .chw-play-row,
.chw-layout-compact .chw-play-row {
    transition: background-color .2s ease, box-shadow .2s ease;
}

/* Single-track Elementor widget */
.chw-single-track {
    --chw-single-bg: rgba(255,255,255,.035);
    --chw-single-border: var(--chw-border);
    --chw-single-radius: 20px;
    --chw-single-cover-radius: 20px;
    --chw-single-cover-width: 380px;
    --chw-single-compact-cover: 88px;
    --chw-single-gap: 28px;
    --chw-single-play-size: 64px;
    --chw-single-play-bg: #33d17a;
    --chw-single-play-bg-hover: #58e493;
    --chw-single-play-color: #07130c;
}

.chw-single-shell {
    min-width: 0;
    border: var(--chw-border-width) solid var(--chw-single-border);
    border-radius: var(--chw-single-radius);
    background: var(--chw-single-bg);
}

.chw-single-main {
    display: grid;
    grid-template-columns: minmax(0, var(--chw-single-cover-width)) minmax(0, 1fr);
    align-items: center;
    gap: var(--chw-single-gap);
    min-width: 0;
}

.chw-single-cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--chw-single-cover-radius);
    background: #11131a;
    box-shadow: inset 0 0 0 var(--chw-border-width) var(--chw-border);
}

.chw-single-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chw-single-copy {
    min-width: 0;
}

.chw-single-title {
    margin: 0;
    color: var(--chw-text);
    font-size: clamp(30px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.02;
}

.chw-single-artist {
    margin-top: 7px;
    color: rgba(247,247,251,.74);
    font-size: clamp(16px, 2vw, 24px);
    line-height: 1.2;
}

.chw-single-play,
.chw-single-track .chw-play {
    position: static;
    display: grid;
    place-items: center;
    width: var(--chw-single-play-size);
    height: var(--chw-single-play-size);
    opacity: 1;
    transform: none;
    color: var(--chw-single-play-color);
    background: var(--chw-single-play-bg);
}

.chw-single-track .chw-play:hover {
    transform: none;
    background: var(--chw-single-play-bg-hover);
}

.chw-single-play-inline {
    margin-top: 22px;
}

.chw-single-layout-cover_player .chw-single-cover-wrap .chw-single-play {
    position: absolute;
    right: 18px;
    bottom: 18px;
}

.chw-single-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
}

.chw-single-styles a,
.chw-single-styles span,
.chw-origin-chips > span,
.chw-reaction-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #07130c;
    background: color-mix(in srgb, var(--chw-green) 88%, white);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.chw-reaction-badge {
    margin-bottom: 12px;
    color: #fff;
    background: color-mix(in srgb, var(--chw-accent) 78%, #11131a);
}

.chw-single-reaction-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 7px;
    margin-top: 14px;
    color: var(--chw-muted);
    font-size: 13px;
}

.chw-single-reaction-line a,
.chw-single-reaction-line strong {
    color: var(--chw-text);
    text-decoration: none;
}

.chw-single-reaction-line em {
    font-style: normal;
    opacity: .7;
}

.chw-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 14px;
    color: var(--chw-muted);
    font-size: 13px;
}

.chw-single-meta > * + *::before {
    content: "·";
    margin-right: 9px;
    opacity: .35;
}

.chw-single-meta a {
    color: inherit;
    text-decoration: none;
}

.chw-single-layout-compact .chw-single-shell {
    padding: 10px;
}

.chw-single-layout-compact .chw-single-main {
    grid-template-columns: var(--chw-single-compact-cover) minmax(0, 1fr);
    gap: 14px;
}

.chw-single-layout-compact .chw-single-cover-wrap {
    width: var(--chw-single-compact-cover);
    height: var(--chw-single-compact-cover);
}

.chw-single-layout-compact .chw-single-title {
    font-size: clamp(18px, 3vw, 28px);
}

.chw-single-layout-compact .chw-single-artist {
    font-size: 14px;
}

.chw-single-layout-compact .chw-single-play-inline {
    position: absolute;
    right: 16px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
}

.chw-single-layout-compact .chw-single-copy {
    position: relative;
    padding-right: calc(var(--chw-single-play-size) + 18px);
}

.chw-single-layout-play_only .chw-single-shell {
    display: inline-block;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.chw-origin {
    --chw-origin-bg: rgba(4,6,10,.38);
    --chw-origin-border: var(--chw-border);
    --chw-origin-radius: 20px;
    margin-top: 24px;
    border: var(--chw-border-width) solid var(--chw-origin-border);
    border-radius: var(--chw-origin-radius);
    background: var(--chw-origin-bg);
}

.chw-origin-title {
    margin: 0 0 16px;
    color: var(--chw-text);
    font-size: 22px;
    line-height: 1.15;
}

.chw-origin-section,
.chw-origin-row {
    padding: 12px 0;
    border-top: var(--chw-border-width) solid var(--chw-border);
}

.chw-origin-section:first-of-type,
.chw-origin-row:first-of-type {
    border-top: 0;
}

.chw-origin-row {
    display: grid;
    grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr);
    gap: 16px;
}

.chw-origin-label {
    color: var(--chw-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.chw-origin-value,
.chw-origin-idea,
.chw-origin-lyrics p {
    margin: 0;
    color: var(--chw-text);
    font-size: 14px;
    line-height: 1.5;
}

.chw-origin-value small {
    display: block;
    margin-top: 2px;
    color: var(--chw-muted);
}

.chw-origin-value a {
    color: inherit;
}

.chw-origin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.chw-origin-lyrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    padding-top: 12px;
    border-top: var(--chw-border-width) solid var(--chw-border);
}

.chw-origin-lyrics > div {
    padding: 12px;
    border: var(--chw-border-width) solid var(--chw-border);
    border-radius: 20px;
    background: rgba(255,255,255,.025);
}

.chw-origin-lyrics p {
    margin-top: 6px;
}

@media (max-width: 767px) {
    .chw-layout-chart .chw-track-card,
    .chw-layout-chart .chw-track-card.chw-has-row-play {
        grid-template-columns: var(--chw-chart-rank-width) var(--chw-chart-cover) minmax(0, 1fr) var(--chw-chart-play);
        gap: var(--chw-chart-gap);
        min-height: calc(var(--chw-chart-cover) + 8px);
    }
    .chw-layout-chart .chw-track-card:not(.chw-has-rank),
    .chw-layout-chart .chw-track-card.chw-has-row-play:not(.chw-has-rank) {
        grid-template-columns: var(--chw-chart-cover) minmax(0, 1fr) var(--chw-chart-play);
    }
    .chw-layout-chart .chw-cover-wrap {
        width: var(--chw-chart-cover);
        height: var(--chw-chart-cover);
    }
    .chw-layout-chart .chw-rank { font-size: var(--chw-chart-rank-size); }
    .chw-layout-chart .chw-play-row { width: var(--chw-chart-play); height: var(--chw-chart-play); }

    .chw-layout-compact .chw-track-card,
    .chw-layout-compact .chw-track-card.chw-has-row-play {
        grid-template-columns: var(--chw-compact-rank-width) var(--chw-compact-cover) minmax(0, 1fr) var(--chw-compact-play);
        gap: var(--chw-compact-gap);
        min-height: calc(var(--chw-compact-cover) + 6px);
    }
    .chw-layout-compact .chw-track-card:not(.chw-has-rank),
    .chw-layout-compact .chw-track-card.chw-has-row-play:not(.chw-has-rank) {
        grid-template-columns: var(--chw-compact-cover) minmax(0, 1fr) var(--chw-compact-play);
    }
    .chw-layout-compact .chw-cover-wrap {
        width: var(--chw-compact-cover);
        height: var(--chw-compact-cover);
    }
    .chw-layout-compact .chw-rank { font-size: var(--chw-compact-rank-size); }
    .chw-layout-compact .chw-play-row { width: var(--chw-compact-play); height: var(--chw-compact-play); }

    .chw-single-main {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .chw-single-cover-wrap {
        max-width: min(100%, var(--chw-single-cover-width));
    }
    .chw-single-layout-compact .chw-single-main {
        grid-template-columns: var(--chw-single-compact-cover) minmax(0, 1fr);
    }
    .chw-origin-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

.chw-reaction-mini-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 20px;
    margin-top: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #fff;
    background: color-mix(in srgb, var(--chw-accent) 78%, #11131a);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* Story + fallback badges ------------------------------------------------ */
.chw-badge-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
}
.chw-badge-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.chw-cover-badge {
    gap: 5px;
    padding: 5px 8px;
    background: rgba(16, 18, 25, .84);
    border-color: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .94);
    box-shadow: 0 7px 22px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
    cursor: help;
}
.chw-cover-badge .chw-badge-icon {
    width: 13px;
    height: 13px;
    color: rgba(255, 255, 255, .8);
}

.chw-story-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(245, 69, 108, .94), rgba(139, 92, 246, .94));
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.chw-story-badge:hover,
.chw-story-badge:focus-visible {
    color: #fff !important;
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 11px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.chw-story-badge .chw-badge-icon {
    width: 14px;
    height: 14px;
}
.chw-story-badge.is-inline {
    position: relative;
    inset: auto;
}
.chw-single-play-only-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.chw-layout-chart .chw-story-badge,
.chw-layout-compact .chw-story-badge {
    left: 5px;
    bottom: 5px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 5px;
    justify-content: center;
}
.chw-layout-chart .chw-story-badge-label,
.chw-layout-compact .chw-story-badge-label {
    display: none;
}
.chw-layout-chart .chw-story-badge .chw-badge-icon,
.chw-layout-compact .chw-story-badge .chw-badge-icon {
    width: 13px;
    height: 13px;
}

/* One shared polished tooltip for badge hover/focus. */
.chw-tooltip-popover {
    position: fixed;
    z-index: 999999;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 12px;
    background: rgba(10, 11, 16, .96);
    color: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .42);
    backdrop-filter: blur(14px);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity .12s ease, transform .12s ease;
}
.chw-tooltip-popover.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Crowd Hits Stories ---------------------------------------------------- */
.chw-story-single {
    --chw-story-gap: 24px;
    --chw-story-radius: 20px;
    --chw-story-cover: 190px;
    --chw-story-card-bg: rgba(13, 14, 20, .78);
    --chw-story-border: rgba(255, 255, 255, .09);
    display: grid;
    gap: var(--chw-story-gap);
}
.chw-story-heading {
    display: grid;
    gap: 8px;
}
.chw-story-heading h1 {
    margin: 0;
    color: var(--chw-text);
    font-size: clamp(34px, 6vw, 72px);
    line-height: .98;
}
.chw-story-kicker,
.chw-story-card-badge,
.chw-story-step-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.chw-story-kicker .chw-badge-icon,
.chw-story-card-badge .chw-badge-icon {
    width: 16px;
    height: 16px;
}
.chw-story-event a,
.chw-story-event {
    color: var(--chw-muted);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.chw-story-event a:hover { color: var(--chw-green); }
.chw-story-editorial {
    max-width: 900px;
    color: rgba(247, 247, 251, .82);
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.65;
}
.chw-story-editorial > :first-child { margin-top: 0; }
.chw-story-editorial > :last-child { margin-bottom: 0; }
.chw-story-chain {
    position: relative;
    display: grid;
    gap: 14px;
}
.chw-story-chain::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(245, 69, 108, .8), rgba(139, 92, 246, .45), rgba(255,255,255,.08));
}
.chw-story-track {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.chw-story-connector {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: start center;
    padding-top: 17px;
}
.chw-story-node {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: linear-gradient(135deg, #f5456c, #8b5cf6);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.chw-story-node .chw-badge-icon { width: 16px; height: 16px; }
.chw-story-track.is-origin .chw-story-node {
    background: rgba(16, 18, 25, .96);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.3);
}
.chw-story-track-card {
    display: grid;
    grid-template-columns: var(--chw-story-cover) minmax(0, 1fr);
    gap: clamp(16px, 2.6vw, 30px);
    padding: 18px;
    border: 1px solid var(--chw-story-border);
    border-radius: var(--chw-story-radius);
    background: var(--chw-story-card-bg);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
}
.chw-story-cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--chw-story-radius);
    background: #11131a;
}
.chw-story-cover-wrap > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chw-story-cover-wrap .chw-play {
    opacity: 1;
    transform: none;
}
.chw-story-track-copy {
    min-width: 0;
    align-self: center;
}
.chw-story-step-label { color: rgba(247,247,251,.46); }
.chw-story-track-copy h3 {
    margin: 6px 0 0;
    color: var(--chw-text);
    font-size: clamp(24px, 3vw, 42px);
    line-height: 1.02;
}
.chw-story-track-copy h3 a { color: inherit; text-decoration: none; }
.chw-story-track-copy h3 a:hover { color: var(--chw-green); }
.chw-story-artist { margin-top: 5px; color: rgba(247,247,251,.62); font-weight: 650; }
.chw-story-reaction-on {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: rgba(247,247,251,.62);
    font-size: 12px;
    font-weight: 700;
}
.chw-story-reaction-on .chw-badge-icon { width: 13px; height: 13px; color: #f65b7d; }
.chw-story-reaction-on a { color: #fff; text-decoration: none; }
.chw-story-idea {
    margin: 14px 0 0;
    color: rgba(247,247,251,.78);
    line-height: 1.5;
}
.chw-story-idea strong { color: rgba(247,247,251,.5); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.chw-story-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 13px;
}
.chw-story-styles span {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--chw-green);
    color: #07130c;
    font-size: 11px;
    font-weight: 800;
}
.chw-story-track-meta {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    color: rgba(247,247,251,.45);
    font-size: 12px;
}
.chw-story-track.is-missing .chw-story-track-body {
    min-height: 66px;
    padding: 16px 18px;
    border: 1px dashed var(--chw-story-border);
    border-radius: var(--chw-story-radius);
}
.chw-story-track.is-missing h3 { margin: 4px 0 0; }

.chw-stories-grid {
    --chw-story-columns: 3;
    --chw-story-grid-gap: 20px;
    --chw-story-grid-radius: 20px;
    --chw-story-grid-bg: rgba(13, 14, 20, .82);
    --chw-story-grid-border: rgba(255,255,255,.09);
    display: grid;
    grid-template-columns: repeat(var(--chw-story-columns), minmax(0, 1fr));
    gap: var(--chw-story-grid-gap);
}
.chw-story-card {
    overflow: hidden;
    border: 1px solid var(--chw-story-grid-border);
    border-radius: var(--chw-story-grid-radius);
    background: var(--chw-story-grid-bg);
}
.chw-story-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #11131a;
}
.chw-story-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.chw-story-card:hover .chw-story-card-cover img { transform: scale(1.025); }
.chw-story-card-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(245,69,108,.94), rgba(139,92,246,.94));
    box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.chw-story-card-copy { padding: 18px; }
.chw-story-card h3 { margin: 0; color: var(--chw-text); font-size: 22px; line-height: 1.08; }
.chw-story-card h3 a { color: inherit; text-decoration: none; }
.chw-story-card h3 a:hover { color: var(--chw-green); }
.chw-story-card-event,
.chw-story-card-count { display: block; margin-top: 7px; color: rgba(247,247,251,.48); font-size: 12px; font-weight: 700; }
.chw-story-card p { margin: 12px 0 0; color: rgba(247,247,251,.68); line-height: 1.45; }

@media (max-width: 767px) {
    .chw-story-track-card { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px; }
    .chw-story-track-copy h3 { font-size: 24px; }
    .chw-story-idea { display: none; }
    .chw-story-chain::before { left: 15px; }
    .chw-story-track { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; }
    .chw-story-node { width: 28px; height: 28px; }
    .chw-stories-grid { grid-template-columns: repeat(var(--chw-story-columns), minmax(0, 1fr)); }
}
.chw-reaction-badge,
.chw-reaction-mini-badge { gap: 5px; }
.chw-reaction-badge .chw-badge-icon { width: 13px; height: 13px; }
.chw-reaction-mini-badge .chw-badge-icon { width: 11px; height: 11px; }
.chw-story-cover-wrap .chw-single-play {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 52px;
    height: 52px;
    color: #07130c;
    background: var(--chw-green);
    box-shadow: 0 10px 28px rgba(0,0,0,.34);
}
.chw-story-cover-wrap .chw-single-play:hover { background: #58e493; }


.chw-reaction-badge-link {
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.chw-reaction-badge-link:hover,
.chw-reaction-badge-link:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.chw-reaction-line-badge {
    text-decoration: none;
}


/* 0.6.2 Reaction Line linking */
.chw-reaction-line-badge {
    position: relative;
    z-index: 7;
    pointer-events: auto;
    text-decoration: none;
}
.chw-track-info .chw-reaction-line-badge.is-inline {
    width: max-content;
    margin-top: 7px;
}
.chw-single-copy .chw-reaction-badge-link {
    position: relative;
    z-index: 7;
    pointer-events: auto;
}

/* 0.6.4: keep Reaction Line badges anchored inside cover media.
   0.6.2 made the generic reaction-line badge position:relative so inline links
   were clickable, which unintentionally pulled cover badges into normal flow
   and clipped them in single, carousel, grid and chart covers. */
.chw-cover-wrap > .chw-reaction-line-badge,
.chw-single-cover-wrap > .chw-reaction-line-badge,
.chw-story-cover-wrap > .chw-reaction-line-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 7;
    margin: 0;
}

.chw-layout-chart .chw-cover-wrap > .chw-reaction-line-badge,
.chw-layout-compact .chw-cover-wrap > .chw-reaction-line-badge {
    left: 5px;
    bottom: 5px;
}

.chw-track-info > .chw-reaction-line-badge.is-inline,
.chw-single-copy > .chw-reaction-line-badge.is-inline,
.chw-single-play-only-wrap > .chw-reaction-line-badge.is-inline {
    position: relative;
    inset: auto;
}

/* 0.6.8 shared links/share + compact search story badge */
.chw-story-badge.is-icon-only {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 5px;
    justify-content: center;
}
.chw-story-badge.is-icon-only .chw-badge-icon { width: 13px; height: 13px; }
.chw-search-result .chw-track-title a,
.chw-search-result .chw-track-meta a,
.chw-search-reaction-origin {
    color: inherit;
    text-decoration: none;
}
.chw-search-result .chw-track-title a:hover,
.chw-search-result .chw-track-title a:focus-visible,
.chw-search-result .chw-track-meta a:hover,
.chw-search-result .chw-track-meta a:focus-visible {
    color: var(--chw-search-accent);
    outline: none;
}
.chw-search-reaction-origin { opacity: .82; }
.chw-share-button { flex: 0 0 auto; }
.chw-track-info > .chw-share-button { margin-top: 8px; }
.chw-layout-chart .chw-track-info > .chw-share-button,
.chw-layout-compact .chw-track-info > .chw-share-button { margin-top: 4px; }
.chw-single-share { display:flex; margin-top: 14px; }
.chw-share-button.is-copied { border-color: currentColor; transform: scale(1.04); }