.char-bands-viewport.svelte-17bf1h7{position:relative;overflow:clip visible}.char-bands.svelte-17bf1h7{will-change:transform;width:max-content;height:100%}.char-bands.svelte-17bf1h7>.char-strip:where(.svelte-17bf1h7){flex-direction:column;flex:none;justify-content:flex-end;align-items:center;width:clamp(160px,18vw,240px);text-decoration-line:none;display:flex;position:relative}.band-art.svelte-17bf1h7{pointer-events:none;object-fit:cover;object-position:top;transform-origin:50% calc(100% - .5px);width:100%;height:100%;transition:transform .4s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}.char-band.svelte-17bf1h7:before{content:"";pointer-events:none;inset-inline:0;z-index:1;opacity:.4;background:radial-gradient(ellipse 80% 70% at center bottom, var(--strip-accent), transparent);height:50%;position:absolute;bottom:-10%}.band-label.svelte-17bf1h7{inset-inline:0;z-index:2;padding-top:calc(var(--spacing) * 16);padding-bottom:calc(var(--spacing) * 6);text-align:center;opacity:0;text-shadow:0 2px 8px #000c;background:linear-gradient(#0000 0%,oklch(13.5% .028 318/.85) 100%);flex-direction:column;align-items:center;transition:opacity .3s;display:flex;position:absolute;bottom:0}.char-strip.svelte-17bf1h7:hover .band-label:where(.svelte-17bf1h7){opacity:1}.band-name.svelte-17bf1h7{font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-weight:var(--font-weight-semibold);color:#fff}.band-chips.svelte-17bf1h7{margin-top:calc(var(--spacing) * 1.5);gap:var(--spacing);display:flex}.band-chip.svelte-17bf1h7{padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * .5);font-size:var(--text-xs);line-height:var(--text-xs--line-height);font-weight:var(--font-weight-medium);color:#ffffffbf;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));background-color:#ffffff1f;border-radius:2147483647px}.char-band.svelte-17bf1h7:after{content:"";pointer-events:none;z-index:3;border-radius:var(--radius-xl);border:1px solid color-mix(in oklab, var(--strip-accent) 55%, transparent);opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}.char-band.svelte-17bf1h7{background-color:var(--background);width:100%;height:100%;transition:width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1),border-radius .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.char-strip.svelte-17bf1h7:after{content:"";pointer-events:none;z-index:4;background-color:#0000;transition:background-color .5s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}@media (hover:hover) and (width>=768px){.char-bands.svelte-17bf1h7>.char-strip:where(.svelte-17bf1h7):hover{z-index:20}.char-strip.svelte-17bf1h7:hover .char-band:where(.svelte-17bf1h7){border-radius:var(--radius-xl);width:calc(max(75vh,300px)/2.12121);height:110%;box-shadow:0 10px 20px -5px oklch(4% .02 318/.4),0 25px 50px -12px oklch(4% .02 318/.5)}.char-bands.svelte-17bf1h7:hover>.char-strip:where(.svelte-17bf1h7):not(:hover):after{background-color:#00000080}.char-strip.svelte-17bf1h7:hover .band-art:where(.svelte-17bf1h7){transform:scale(1.04)}.char-strip.svelte-17bf1h7:hover .char-band:where(.svelte-17bf1h7):after{opacity:1}}@media (width<=767.98px){.char-bands.svelte-17bf1h7>.char-strip:where(.svelte-17bf1h7){content-visibility:auto;contain-intrinsic-size:auto calc(max(75vh, 300px) * 576 / 1344) auto 100%;width:calc(max(75vh,300px)/2.33333)}.char-bands.svelte-17bf1h7>.char-strip:where(.svelte-17bf1h7):nth-child(-n+3){content-visibility:visible}.band-label.svelte-17bf1h7{opacity:1}.band-chips.svelte-17bf1h7{display:none}.char-bands-viewport.svelte-17bf1h7{scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;overflow:auto hidden}.char-bands-viewport.svelte-17bf1h7::-webkit-scrollbar{display:none}.char-bands.svelte-17bf1h7{will-change:auto}}