.fan{--card-w:18rem}.fan-list{scroll-snap-type:x mandatory;scrollbar-width:thin;gap:1rem;margin-inline:-1.25rem;padding:1.25rem 1.25rem 1.5rem;scroll-padding-inline:1.25rem;display:flex;overflow-x:auto}.fan-item{flex:0 0 min(75vw, var(--card-w));scroll-snap-align:start}.fan-card{aspect-ratio:4/5;text-align:left;cursor:zoom-in;background:#fff;border-radius:.375rem;width:100%;transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .25s;display:block;position:relative;box-shadow:0 0 0 1px #17140f1a,0 24px 50px -30px #17140f73}.fan-img{border-radius:inherit;object-fit:cover;object-position:top left;width:100%;height:100%;display:block}.fan-card:after{content:"";background:var(--color-brand-strong);opacity:0;border:2px solid #fff;width:10px;height:10px;transition:opacity .15s;position:absolute;bottom:-5px;right:-5px}.fan-card:hover,.fan-item.is-active .fan-card{box-shadow:0 0 0 2px var(--color-brand), 0 40px 70px -30px #17140f8c}.fan-card:hover:after,.fan-item.is-active .fan-card:after{opacity:1}.fan-card:focus-visible{outline:3px solid var(--color-ink);outline-offset:4px}.fan-card .fan-kind{position:absolute;top:-.7rem;left:.75rem;box-shadow:0 2px 6px -2px #17140f73}.fan-label{color:var(--color-ink);margin-top:.75rem;font-size:.9375rem;font-weight:600;line-height:1.35;display:block}.fan-caption{display:none}.fan-hint{text-align:center;font-family:var(--font-mono);color:var(--color-muted);margin-top:.25rem;font-size:.75rem}@media (width>=1024px){.fan{--step-x-fit:min(var(--step-x), (100vw - 43.5rem) / var(--gaps))}.fan-label,.fan-hint{display:none}.fan-caption{border:1px solid var(--color-line);background:var(--color-surface);border-radius:.375rem;align-items:stretch;max-width:52rem;margin:2.5rem auto 0;font-size:.9375rem;display:flex;box-shadow:0 10px 30px -24px #17140f66}.fan-caption-ref,.fan-caption-fx{border-right:1px solid var(--color-line);font-family:var(--font-mono);color:var(--color-muted);align-items:center;padding:.6rem .85rem;font-size:.8125rem;display:flex}.fan-caption-ref{min-width:5.5rem;color:var(--color-ink);justify-content:center}.fan-caption-fx{font-style:italic}.fan-caption-body{white-space:nowrap;flex:1;align-items:baseline;gap:.6rem;min-width:0;padding:.6rem .9rem;display:flex}.fan-caption-hint{font-family:var(--font-mono);color:var(--color-muted);font-size:.8125rem}.fan-caption-title{color:var(--color-ink);font-weight:700}.fan-caption-text{text-overflow:ellipsis;min-width:0;color:var(--color-muted);overflow:hidden}.fan-caption.is-showing .fan-caption-hint,.fan-caption:not(.is-showing) .fan-caption-title,.fan-caption:not(.is-showing) .fan-caption-text{display:none}.fan-list{height:31rem;margin:0;padding:0;display:block;position:relative;overflow:visible}.fan-item{width:var(--card-w);transform-origin:50% 140%;transform:translateX(-50%) rotate(calc(var(--o) * 1.2deg));transition:transform .75s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 45ms);position:absolute;bottom:1.5rem;left:50%}.fan.is-open .fan-item{transform:translateX(-50%) translateX(calc(var(--o) * var(--step-x-fit) + var(--push,0) * 2.25rem)) rotate(calc(var(--o) * var(--step-a)))}.fan.is-open .fan-item.is-active{z-index:20;transition-delay:0s}.fan .fan-item.is-active .fan-card{transform:translateY(-1.75rem)scale(1.05)}.fan.is-open .fan-item[style*=--push]{transition-delay:0s}}@media (prefers-reduced-motion:reduce){.fan-item,.fan-card{transition:none!important}}.fan-dialog{border-radius:var(--radius-panel);background:var(--color-surface);width:min(68rem,100vw - 2rem);max-height:calc(100dvh - 2rem);color:var(--color-ink);border:0;margin:auto;padding:0;box-shadow:0 40px 100px -20px #00000080}.fan-dialog::backdrop{backdrop-filter:blur(3px);background:#17140fb8}.fan-dialog-inner{flex-direction:column;max-height:calc(100dvh - 2rem);display:flex}.fan-dialog-top{border-bottom:1px solid var(--color-line);align-items:center;gap:.75rem;padding:.75rem .75rem .75rem 1.25rem;display:flex}.fan-close,.fan-nav{border:1px solid var(--color-line);border-radius:var(--radius-btn);width:2.75rem;height:2.75rem;color:var(--color-ink);background:var(--color-surface);place-items:center;display:grid}.fan-close:hover,.fan-nav:hover{border-color:var(--color-ink)}.fan-close svg,.fan-nav svg{width:1.25rem;height:1.25rem}.fan-dialog-img{background:var(--color-paper);flex:1;min-height:0;padding:1.25rem;overflow:auto}.fan-dialog-img img{object-fit:contain;background:#fff;border-radius:.25rem;max-width:100%;max-height:68dvh;margin:0 auto;display:block;box-shadow:0 0 0 1px #17140f14,0 18px 40px -24px #17140f73}.fan-dialog-foot{border-top:1px solid var(--color-line);justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1rem 1.25rem 1.25rem;display:flex}
