.homepage-chart-card{cursor:pointer;border-radius:20px;flex-direction:column;flex-shrink:0;width:280px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:visible}.homepage-chart-card.hovered{z-index:10;transform:translateY(-8px)}.homepage-chart-card:hover{z-index:20}.card-inner{background:#060a148c;border:1px solid #38bdf81f;border-radius:20px;flex-direction:column;width:100%;transition:border-color .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden}.card-inner:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(#0000 0%,#040812eb 100%);border-radius:0 0 20px 20px;height:160px;position:absolute;bottom:0;left:0;right:0}.homepage-chart-card.hovered .card-inner{border-color:#38bdf866;box-shadow:0 20px 48px -8px #000000b3}.card-ambience{filter:blur(40px)saturate(1.8)brightness(.35);opacity:.7;z-index:0;pointer-events:none;will-change:auto;background-position:50%;background-size:cover;transition:opacity .4s,filter .4s;position:absolute;inset:-20px}@media (max-width:768px){.card-ambience{display:none}}.homepage-chart-card.hovered .card-ambience{opacity:1;filter:blur(35px)saturate(2.2)brightness(.4)}.card-image-container{aspect-ratio:1;z-index:1;flex-shrink:0;width:100%;position:relative;overflow:visible}.card-cover{object-fit:cover;border-radius:0;width:100%;height:100%;transition:transform .4s;display:block;overflow:hidden}.homepage-chart-card.hovered .card-cover{transform:scale(1.05)}.card-cover.placeholder{color:#64748b;background:linear-gradient(135deg,#1e293b,#0f172a);justify-content:center;align-items:center;width:100%;height:100%;font-size:.8rem;display:flex}.card-visualizer-container{z-index:5;pointer-events:none;opacity:0;background:linear-gradient(#0000 0%,#060a14b3 100%);height:52px;transition:opacity .3s;position:absolute;bottom:0;left:0;right:0}.card-visualizer-container.active{opacity:1}.card-visualizer{width:100%;height:100%;display:block;position:absolute;bottom:0;left:0}.card-overlay{aspect-ratio:1;opacity:0;z-index:10;pointer-events:none;background:#00000073;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;top:0;left:0;right:0}.card-overlay.visible{opacity:1;pointer-events:auto}.play-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#38bdf8 0%,#0284c7 100%);border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;display:flex;box-shadow:0 8px 20px #0284c766}.play-btn:hover{transform:scale(1.1);box-shadow:0 12px 28px #0284c799}.play-btn.playing{background:linear-gradient(135deg,#0284c7 0%,#0369a1 100%)}.play-btn-triangle{border:9px solid #0000;border-left:16px solid #fff;border-right-width:0;width:0;height:0;margin-left:3px;display:block}.play-btn-pause{align-items:center;gap:5px;display:flex}.play-btn-pause span{background:#fff;border-radius:2px;width:4px;height:18px;display:block}.play-btn-spinner{border:2.5px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite card-spin;display:block}@keyframes card-spin{to{transform:rotate(360deg)}}.level-badge{color:#38bdf8;z-index:6;background:#0a0f1ceb;border:1px solid #38bdf840;border-radius:10px;padding:4px 10px;font-size:.75rem;font-weight:700;position:absolute;top:12px;right:12px}.card-content{z-index:3;background:0 0;flex-direction:column;gap:5px;padding:12px 14px 14px;display:flex;position:relative}.card-title{color:#f1f5f9;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1rem;font-weight:700;overflow:hidden}.footer-row{color:#ffffffa6;align-items:center;gap:5px;font-size:.78rem;display:flex;overflow:hidden}.footer-row.muted{color:#ffffff61;font-size:.72rem}.truncate{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.author-link-wrapper{flex:1;min-width:0;position:relative;overflow:hidden}.footer-label{white-space:nowrap;flex-shrink:0}.author-link{color:#38bdf8;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;transition:color .2s;display:block;overflow:hidden}.author-link:hover{color:#7dd3fc}.author-popout{z-index:50;pointer-events:none;background:#080c18f5;border:1px solid #38bdf840;border-radius:14px;width:200px;animation:.2s cubic-bezier(.4,0,.2,1) forwards popout-in;position:absolute;bottom:0;left:calc(100% + 8px);overflow:hidden;box-shadow:0 8px 32px #000000b3}.author-popout.author-popout-left{left:auto;right:calc(100% + 8px)}@keyframes popout-in{0%{opacity:0;transform:scale(.94)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}.author-popout-banner{background-color:#38bdf814;background-position:50%;background-size:cover;width:100%;height:70px;position:relative}.author-popout-body{background:linear-gradient(90deg,#080c18b3 0%,#080c184d 100%);align-items:center;gap:8px;padding:0 12px;display:flex;position:absolute;inset:0}.author-popout-avatar{object-fit:cover;background:#1e293b;border:2px solid #38bdf880;border-radius:50%;flex-shrink:0;width:32px;height:32px}.author-popout-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 4px #000c;font-size:.82rem;font-weight:600;overflow:hidden}.card-stats-panel{z-index:20;pointer-events:none;clip-path:inset(0 100% 0 0 round 0 16px 16px 0);opacity:0;background:#060a14f5;border:1px solid #38bdf81f;border-left:none;border-radius:0 16px 16px 0;flex-direction:column;gap:6px;padding:12px 12px 12px 10px;transition:clip-path .3s cubic-bezier(.4,0,.2,1),opacity .25s,border-color .3s;display:flex;position:absolute;top:50%;left:calc(100% - 1px);transform:translateY(-50%)}.homepage-chart-card.hovered .card-stats-panel{clip-path:inset(0 0% 0 0 round 0 16px 16px 0);opacity:1;pointer-events:auto;border-color:#38bdf866}.card-stats-panel.panel-left{clip-path:inset(0 0 0 100% round 16px 0 0 16px);border-left:1px solid #38bdf81f;border-right:none;border-radius:16px 0 0 16px;padding:12px 10px 12px 12px;left:auto;right:calc(100% - 1px)}.homepage-chart-card.hovered .card-stats-panel.panel-left{clip-path:inset(0 0 0 0% round 16px 0 0 16px);opacity:1;pointer-events:auto;border-color:#38bdf866}.stat-item{white-space:nowrap;border-radius:8px;align-items:center;gap:7px;min-width:64px;padding:5px 8px;font-size:.8rem;font-weight:600;display:flex}.stat-likes{color:#f87171;background:#f8717126}.stat-comments{color:#60a5fa;background:#60a5fa26}.stat-date{color:#94a3b8;background:#94a3b81f}body.light-mode .card-inner{background:#ffffffe0;border-color:#0f172a1a}body.light-mode .card-ambience{filter:blur(32px)saturate(1.2)brightness(.8);opacity:.2}body.light-mode .card-content{background:linear-gradient(#fff6 0%,#fffffff7 40%)}body.light-mode .card-title{color:#0f172a}body.light-mode .footer-row{color:#475569}body.light-mode .footer-row.muted{color:#94a3b8}body.light-mode .level-badge{color:var(--primary-accent);background:#ffffffe0;border-color:#0f172a1f}body.light-mode .card-stats-panel{background:#fffffff2;border-color:#0f172a1a}body.light-mode .card-inner:after{background:linear-gradient(#0000 0%,#fffffff2 100%)}body.light-mode .homepage-chart-card.hovered .card-inner{border-color:#38bdf859;box-shadow:0 20px 48px -8px #0000001f}body.light-mode .author-popout-name{color:#0f172a}.card-mobile-stats{display:none}@media (max-width:768px){.homepage-chart-card{width:200px}.card-stats-panel{display:none}.card-mobile-stats{flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px;display:flex}.card-overlay{background:#0000004d}.card-overlay .play-btn{opacity:1;width:44px;height:44px}}.mobile-stat{border-radius:6px;align-items:center;gap:3px;padding:2px 6px;font-size:.7rem;font-weight:600;display:flex}.mobile-stat-likes{color:#f87171;background:#f8717126}.mobile-stat-comments{color:#60a5fa;background:#60a5fa26}.mobile-stat-date{color:#94a3b8;background:#94a3b81a}@media (prefers-reduced-motion:reduce){.homepage-chart-card,.card-inner,.card-ambience,.card-cover,.card-overlay,.card-stats-panel{transition:none}}