.music-page-root{z-index:1;position:relative;overflow:visible}.music-feed-bg{z-index:0;background:radial-gradient(ellipse 100% 60% at 50% 0%, rgba(var(--ambient-r,102), var(--ambient-g,181), var(--ambient-b,255), .3), transparent 70%), radial-gradient(ellipse 80% 50% at 80% 80%, rgba(var(--ambient-r,102), var(--ambient-g,181), var(--ambient-b,255), .22), transparent 65%), radial-gradient(ellipse 70% 40% at 20% 100%, rgba(var(--ambient-r,102), var(--ambient-g,181), var(--ambient-b,255), .16), transparent 60%);position:fixed;inset:0}.music-feed-bg:after{content:"";background:radial-gradient(circle at 50% 50%, transparent 0%, var(--background-color-primary,#07090d) 100%);opacity:.72;position:absolute;inset:0}.music-feed-container{--music-bg:var(--background-color-primary,#07090d);--music-surface:var(--background-color-secondary,#0f141d);--music-border:var(--border-default,#bed6ff3d);--music-text-primary:var(--text-color-primary,#f4f8ff);--music-text-secondary:var(--text-color-secondary,#b9c4d9);--music-text-tertiary:var(--text-tertiary,#8b95aa);--music-glass:var(--glass,#0b101899);z-index:1;width:100vw;height:100vh;color:var(--music-text-primary);font-family:var(--font-ui,var(--font-inter,sans-serif));background:0 0;position:relative;overflow:hidden}.music-feed-container,.music-feed-container *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}.music-collection-wrapper{z-index:2;background:0 0;position:relative;overflow:visible}.slider-root{--dynamic-number-of-slides:1;--config-slide-grid-size:4;--config-next-slide-column-offset:3;--config-next-slide-row-offset:2;--config-slide-gap:28px;--config-canvas-height:var(--global-content-available-screen-height);--config-slide-size:min(calc(100vw - 80px), calc(var(--config-canvas-height) - 20vh));--helper-slide-gap-overall-width:calc(var(--config-slide-gap) * (var(--config-slide-grid-size) - 1));--helper-non-active-space-width:calc((100vw - var(--config-slide-size)) / 2);--helper-non-active-space-height:calc((var(--config-canvas-height) - var(--config-slide-size)) / 2);width:100%;height:var(--config-canvas-height);position:relative}.slider-root:before{content:"";z-index:10;width:var(--helper-non-active-space-width);pointer-events:none;background:linear-gradient(90deg,#000,#0003 40%,#0000);height:100%;position:absolute;top:0;left:0;-webkit-mask-image:linear-gradient(#000 70%,#0000 100%);mask-image:linear-gradient(#000 70%,#0000 100%)}.canvasesWrapper{display:grid}.canvasWrapper{width:100%;height:var(--config-canvas-height);grid-area:1/1/1/1;position:relative}.canvasVisible{z-index:1;pointer-events:none;overflow:hidden}.canvasVisible:before{content:"";z-index:5;pointer-events:none;background:linear-gradient(to right, var(--music-bg), #0a0a0c40 55%, transparent);width:clamp(48px,12vw,260px);height:100%;position:absolute;top:0;left:0}.canvasVisible .card,.canvasVisible a,.canvasVisible button,.canvasVisible input{pointer-events:auto}.canvasOrchestrator{scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;z-index:10;-ms-overflow-style:none;scrollbar-width:none;overflow:scroll hidden}.canvasOrchestrator::-webkit-scrollbar{display:none}.canvasGrid{gap:var(--config-slide-gap);padding:var(--helper-non-active-space-height) var(--helper-non-active-space-width);grid-template-columns:repeat(calc(var(--dynamic-number-of-slides) * var(--config-slide-grid-size) - (var(--dynamic-number-of-slides) - 1) * -1 * (var(--config-next-slide-column-offset) - var(--config-slide-grid-size))), calc((var(--config-slide-size) - var(--helper-slide-gap-overall-width)) / var(--config-slide-grid-size)));grid-template-rows:repeat(calc(var(--dynamic-number-of-slides) * var(--config-slide-grid-size) - (var(--dynamic-number-of-slides) - 1) * -1 * (var(--config-next-slide-row-offset) - var(--config-slide-grid-size))), calc((var(--config-slide-size) - var(--helper-slide-gap-overall-width)) / var(--config-slide-grid-size)));margin:0;list-style:none;display:inline-grid}.slide-positioner{grid-row:calc(var(--dynamic-slide-index) * var(--config-next-slide-row-offset) + 1) / span var(--config-slide-grid-size);grid-column:calc(var(--dynamic-slide-index) * var(--config-next-slide-column-offset) + 1) / span var(--config-slide-grid-size)}.visible-slide{z-index:calc(var(--dynamic-number-of-slides) - var(--dynamic-slide-index));will-change:transform;transform:translateZ(0)}.visible-slide,.visible-slide *{pointer-events:none;-webkit-user-select:none;user-select:none}.orchestrator-slide-x{scroll-snap-align:center;width:var(--config-slide-size);height:var(--config-slide-size);touch-action:pan-x;background:0 0;border:0;outline:0}.orchestrator-slide-x:not(.is-active){pointer-events:none}.convergeWrapper{will-change:transform;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.showcase-slide-inner{width:var(--config-slide-size);height:var(--config-slide-size);transform-style:preserve-3d;will-change:transform;position:relative}.slide{justify-content:center;align-items:center;width:100%;min-width:0;height:100%;padding:0;display:flex}.card{--cvr-rds:var(--r-md,6px);background:var(--music-glass);border:1px solid var(--music-border);border-radius:var(--cvr-rds);-webkit-backdrop-filter:blur(20px);flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.card-cover{background:var(--music-surface);flex:1;width:100%;position:relative;overflow:hidden}.card-cover img{-o-object-fit:cover;object-fit:cover;z-index:2;width:100%;height:100%;transition:transform .42s,filter .28s;position:relative}.visible-slide[data-active="1"] .card-cover img{transform:scale(1.01)}.cover-placeholder{width:100%;height:100%;color:var(--music-text-tertiary);place-items:center;display:grid}.card-glow{opacity:.5;filter:blur(48px);will-change:filter, opacity, transform;pointer-events:none;z-index:0;border-radius:50%;position:absolute;inset:-36px;transform:translate(0,0)}.card-info{z-index:2;padding:clamp(10px, 2.8vw, var(--global-container-padding,16px));background:color-mix(in srgb, var(--music-glass) 88%, transparent);border-top:1px solid color-mix(in srgb, var(--music-border) 70%, transparent);-webkit-backdrop-filter:blur(8px);position:absolute;bottom:0;left:0;right:0}.card-title{color:var(--music-text-primary);letter-spacing:-.02em;margin:0 0 .375rem;font-size:clamp(1rem,4vw,1.2rem);line-height:1.25;text-decoration:none;display:block}.card-meta{color:var(--music-text-secondary);flex-wrap:wrap;align-items:center;gap:.375rem;margin-bottom:.5rem;font-size:10px;display:flex;font-family:monospace, var(--font-mono,"Fira Mono", monospace)!important}.card-meta span{align-items:center;gap:.25rem;display:inline-flex}.badge{border-radius:var(--r-sm,4px);border:1px solid color-mix(in srgb, var(--music-border) 70%, transparent);background:color-mix(in srgb, var(--music-glass) 62%, transparent);text-transform:uppercase;letter-spacing:.025em;font-family:var(--font-mono,"Fira Mono", monospace);align-items:center;padding:.1875rem .4375rem;font-size:10px;font-weight:400;line-height:1;display:inline-flex}.divider{color:var(--music-text-tertiary)}.audio-status{border-top:1px solid color-mix(in srgb, var(--music-border) 70%, transparent);margin-top:.5rem;padding-top:.5rem;overflow:hidden}.status-indicator{color:var(--music-text-secondary);align-items:center;gap:.375rem;font-size:12px;display:flex}.status-indicator span:first-child{background:var(--music-text-tertiary);background:var(--music-text-tertiary);border-radius:50%;width:6px;height:6px}.status-indicator span.active{background:#22c55e;animation:2s ease-in-out infinite pulse;box-shadow:0 0 8px #22c55e99}.card-accent{z-index:11;width:100%;height:4px;transition:opacity .5s,box-shadow .5s,background .5s}.showcase-inner-border{top:var(--cvr-rds,6px);width:4px;height:calc(100% - (var(--cvr-rds,6px) * 2));transform-origin:0;background:var(--dynamic-color,#1b1b1b);pointer-events:none;position:absolute;right:-4px;transform:rotateY(90deg)}.showcase-inner-drop-shadow{z-index:-1;filter:blur(12px);pointer-events:none;background:#0000008c;position:absolute;inset:0}.showcase-inner-inset-shadow{z-index:10;pointer-events:none;opacity:0;background:radial-gradient(at 75% 75%,#000 0%,#000c 10%,#0003 100%),linear-gradient(#0000 20%,#00000080 40%,#000 70% 100%);position:absolute;inset:0}.indicator-slider{left:50%;bottom:calc((var(--config-canvas-height) - var(--config-slide-size)) / 4);z-index:50;width:min(var(--config-slide-size), calc(100vw - 2 * var(--global-container-padding,16px)));position:absolute;overflow:hidden;transform:translate(-50%)}.indicator-root{touch-action:pan-x;width:100%;height:32px;position:relative}.indicator-root:before{content:"";background:color-mix(in srgb, var(--music-text-primary) 30%, transparent);width:100%;height:1px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.thumb-indicator{height:8px;width:calc(100% / var(--ci-dynamic-number-of-slides,1));background:var(--music-text-primary);transform-origin:50%;touch-action:none;will-change:transform;cursor:grab;border-radius:24px;position:absolute;top:calc(50% - 4px);left:0}.thumb-indicator:active{cursor:grabbing}@media (min-width:1000px){.card-info{-webkit-backdrop-filter:blur(10px);padding:1.25rem}.card-title{margin-bottom:.5rem;font-size:clamp(1.1rem,1.5vw,1.3rem)}.card-meta{gap:.5rem;margin-bottom:.625rem}.badge{padding:.25rem .5rem}.audio-status{margin-top:.625rem;padding-top:.625rem}.status-indicator{gap:.5rem}.status-indicator span:first-child{width:6px;height:6px}.slider-root{--config-slide-size:max(30vw, calc(var(--config-canvas-height) - 30vh));--config-slide-gap:48px;--config-next-slide-column-offset:4;--config-next-slide-row-offset:2;--config-canvas-height:var(--global-content-available-screen-height)}.slider-root:before{background:linear-gradient(90deg,#000,#000 20%,#0000004d 80%,#0000)}.canvasVisible:before{background:linear-gradient(to right, var(--music-bg), #0a0a0c8c 35%, #0a0a0c33 70%, transparent);width:clamp(80px,18vw,360px);-webkit-mask-image:linear-gradient(#000 70%,#0000 100%);mask-image:linear-gradient(#000 70%,#0000 100%)}.indicator-slider{width:min(600px,34vw)}}@media (prefers-reduced-motion:reduce){.showcase-slide-inner,.convergeWrapper,.canvasGrid,.thumb-indicator,.card-cover img,.card-glow,.status-indicator span.active{will-change:auto!important;transition:none!important;animation:none!important}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}