@layer components{.coverflow{--cf-size:300px;-webkit-user-select:none;user-select:none;position:relative}@media (width<=560px){.coverflow{--cf-size:170px}}.coverflow-stage{height:calc(var(--cf-size) * 1.3);perspective:calc(var(--cf-size) * 3.6);perspective-origin:50% calc(var(--cf-size) * .5);touch-action:pan-y;cursor:grab;position:relative;overflow:clip;-webkit-mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000);mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000)}.coverflow-stage.is-dragging{cursor:grabbing}.coverflow-item{--t:clamp(-1, var(--d), 1);--a:max(var(--t), calc(var(--t) * -1));top:0;left:calc(50% - var(--cf-size) / 2);width:var(--cf-size);transform:translateX(calc((var(--t) * .62 + (var(--d) - var(--t)) * .2) * var(--cf-size))) translateZ(calc(var(--a) * var(--cf-size) * -.55)) rotateY(calc(var(--t) * -72deg));will-change:transform;position:absolute}.coverflow-link{-webkit-tap-highlight-color:transparent;display:block}.coverflow-link:active{scale:none}.coverflow-art,.coverflow-reflection{aspect-ratio:1;border-radius:3px;display:block;overflow:hidden}.coverflow-art{box-shadow:0 0 0 1px var(--border)}.coverflow-art img,.coverflow-reflection img{object-fit:cover;width:100%;height:100%;display:block}.coverflow.is-contain :is(.coverflow-art,.coverflow-reflection){justify-content:center;align-items:center;display:flex}.coverflow.is-contain :is(.coverflow-art,.coverflow-reflection) img{width:auto;height:auto;max-width:calc(66% * var(--cf-scale,1));max-height:calc(74% * var(--cf-scale,1));object-fit:contain}.coverflow-reflection{opacity:.32;pointer-events:none;transform:scaleY(-1);-webkit-mask-image:linear-gradient(#0000 70%,#000);mask-image:linear-gradient(#0000 70%,#000)}.coverflow-link:focus-visible{outline:none}.coverflow-link.is-front:focus-visible .coverflow-art{outline:2px solid var(--accent);outline-offset:3px}.coverflow-caption{min-height:2.6rem;margin-top:calc(var(--cf-size) * -.12);text-align:center;flex-direction:column;align-items:center;gap:2px;display:flex}.coverflow.is-snug .coverflow-stage{height:calc(var(--cf-size) * 1.25)}.coverflow.is-snug .coverflow-reflection{-webkit-mask-image:linear-gradient(#0000 75%,#000);mask-image:linear-gradient(#0000 75%,#000)}.coverflow.is-snug .coverflow-caption{margin-top:calc(28px - var(--cf-size) * .25);position:relative}.coverflow.is-snug .coverflow-scrub{margin-top:22px;position:relative}.coverflow-title{color:var(--text);font-size:.86rem;font-weight:550;line-height:1.35;display:block}.coverflow-meta{color:var(--muted);font-size:.76rem;line-height:1.4;display:block}.coverflow-caption.is-inline{flex-flow:wrap;justify-content:center;align-items:baseline;column-gap:8px}.coverflow-caption.is-inline .coverflow-meta:empty{display:none}.coverflow-detail{color:var(--muted);font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;flex-wrap:wrap;flex-basis:100%;justify-content:center;margin-top:6px;font-size:.66rem;line-height:1.4;display:flex}.coverflow-detail>span+span:before{content:"";vertical-align:-.05em;background:var(--border);width:1px;height:.8em;margin:0 9px;display:inline-block}@media (width<=560px){.coverflow-detail>span+span:before{margin:0 6px}}.coverflow-caption>span{min-height:1lh}.coverflow-scrub{appearance:none;cursor:pointer;touch-action:manipulation;background:0 0;width:min(320px,70%);height:16px;margin:14px auto 0;display:block}.coverflow-scrub::-webkit-slider-runnable-track{background:var(--border);height:1px}.coverflow-scrub::-moz-range-track{background:var(--border);height:1px}.coverflow-scrub::-webkit-slider-thumb{appearance:none;background:var(--muted);border-radius:999px;width:28px;height:6px;margin-top:-2.5px;transition:background-color .15s,width .15s,height .15s,margin-top .15s}.coverflow-scrub::-moz-range-thumb{background:var(--muted);border:0;border-radius:999px;width:28px;height:6px;transition:background-color .15s,width .15s,height .15s}.coverflow-scrub:is(:hover,:active,:focus-visible)::-webkit-slider-thumb{background:var(--text);width:34px;height:10px;margin-top:-4.5px}.coverflow-scrub:is(:hover,:active,:focus-visible)::-moz-range-thumb{background:var(--text);width:34px;height:10px}.coverflow-scrub:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}}
