.beat-player{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;gap:1.25rem;margin-top:.5rem;display:grid}.beat-now{isolation:isolate;background:#140f11;border:1px solid #4a3639;border-radius:16px;grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:center;gap:1.5rem;padding:1.5rem;display:grid;position:relative;overflow:hidden}.beat-now:before{content:"";z-index:-1;background:radial-gradient(circle at 75% 25%,hsl(var(--accent)/.28),transparent 55%);opacity:.55;transition:opacity .4s;position:absolute;inset:-30%}.beat-now.is-playing:before{opacity:1}.beat-now__art{aspect-ratio:1;background:#211719;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 22px 50px #000a}.beat-now__art img,.beat-now__art .beat-cover-fallback{object-fit:cover;width:100%;height:100%;display:block}.beat-now__eq{opacity:0;background:#000a;border-radius:6px;align-items:flex-end;gap:3px;height:22px;padding:4px 6px;transition:opacity .2s;display:flex;position:absolute;bottom:10px;left:10px}.beat-now.is-playing .beat-now__eq{opacity:1}.beat-now__eq i{background:hsl(var(--accent));transform-origin:bottom;border-radius:2px;width:3px;height:100%;animation:.9s ease-in-out infinite beat-eq;display:block}.beat-now__eq i:nth-child(2){animation-delay:-.3s}.beat-now__eq i:nth-child(3){animation-delay:-.6s}.beat-now__eq i:nth-child(4){animation-delay:-.15s}.beat-now:not(.is-playing) .beat-now__eq i{animation-play-state:paused}@keyframes beat-eq{0%,to{transform:scaleY(.25)}50%{transform:scaleY(1)}}.beat-now__body{flex-direction:column;gap:.35rem;min-width:0;display:flex}.beat-now__label{letter-spacing:.12em;color:#e08a90;font-size:.72rem}.beat-now__title{color:#f6ebe3;text-align:right;overflow-wrap:anywhere;font-size:1.75rem;font-weight:600;line-height:1.15}.beat-now__meta{color:#b8a49f;font-size:.82rem}.beat-now__progress{align-items:center;gap:.6rem;margin-top:.7rem;display:flex}.beat-now__time{font-variant-numeric:tabular-nums;color:#a8918c;text-align:center;min-width:2.4rem;font-size:.72rem}.beat-now__progress input{appearance:none;cursor:pointer;background:0 0;flex:1;height:22px}.beat-now__progress input::-webkit-slider-runnable-track{background:linear-gradient(90deg,hsl(var(--accent)) var(--beat-progress,0%),#3d2c2f var(--beat-progress,0%));border-radius:99px;height:4px}.beat-now__progress input::-moz-range-track{background:linear-gradient(90deg,hsl(var(--accent)) var(--beat-progress,0%),#3d2c2f var(--beat-progress,0%));border-radius:99px;height:4px}.beat-now__progress input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;box-shadow:0 0 0 4px hsl(var(--accent)/.35);background:#fff;border-radius:50%;margin-top:-5px}.beat-now__progress input::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:14px;height:14px}.beat-now__progress input:disabled{cursor:default;opacity:.6}.beat-now__controls{justify-content:center;align-items:center;gap:1rem;margin-top:.4rem;display:flex}.beat-now__skip{color:#e7d6cf;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:background-color .2s;display:inline-flex}.beat-now__skip:hover{background:#ffffff14}.beat-now__toggle{background:hsl(var(--accent));color:#fff;width:64px;height:64px;box-shadow:0 12px 30px hsl(var(--accent)/.4);border-radius:50%;justify-content:center;align-items:center;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s;display:inline-flex}.beat-now__toggle svg{fill:currentColor}.beat-now__toggle:active{transform:scale(.95)}@media (hover:hover) and (pointer:fine){.beat-now__toggle:hover{background:hsl(var(--accent)/.9)}}.beat-now__buy{color:#140f11;background:#f6ebe3;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;min-height:48px;margin-top:.8rem;padding:0 1.2rem;font-size:.92rem;font-weight:700;transition:background-color .2s;display:inline-flex}.beat-now__buy:hover{background:#fff}.beat-spinner{border:2.5px solid #fff6;border-top-color:#fff;border-radius:50%;width:22px;height:22px;animation:.8s linear infinite beat-spin}@keyframes beat-spin{to{transform:rotate(360deg)}}.beat-list-panel{background:#110d0e;border:1px solid #3a2a2d;border-radius:16px;flex-direction:column;min-width:0;display:flex;overflow:hidden}.beat-list-panel__head{color:#f1e5db;border-bottom:1px solid #2c2022;padding:.9rem 1.1rem;font-size:.85rem;font-weight:600}.beat-list-panel__head span{color:#9d8580;font-weight:400}.beat-rows{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#5a4044 transparent;max-height:420px;margin:0;padding:.4rem;list-style:none;overflow-y:auto}.beat-row{border-radius:10px;align-items:center;gap:.4rem;transition:background-color .2s;display:flex}.beat-row:hover{background:#1b1416}.beat-row.is-active{background:#24171a}.beat-row__main{text-align:right;border-radius:10px;flex:1;align-items:center;gap:.85rem;min-width:0;min-height:68px;padding:.45rem .6rem;display:flex}.beat-row__art{background:#211719;border-radius:8px;flex-shrink:0;width:52px;height:52px;position:relative;overflow:hidden}.beat-row__art img,.beat-row__art .beat-cover-fallback{object-fit:cover;width:100%;height:100%;display:block}.beat-row__icon{color:#fff;opacity:0;background:#0008;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;inset:0}.beat-row__icon svg{fill:currentColor}.beat-row.is-active .beat-row__icon{opacity:1}@media (hover:hover) and (pointer:fine){.beat-row:hover .beat-row__icon{opacity:1}}@media (hover:none){.beat-row__icon{opacity:1;background:#0006}}.beat-row__text{flex-direction:column;flex:1;gap:.15rem;min-width:0;display:flex}.beat-row__text strong{color:#f1e5db;white-space:nowrap;text-overflow:ellipsis;text-align:right;font-size:.95rem;font-weight:600;overflow:hidden}.beat-row.is-active .beat-row__text strong{color:#ffb9bd}.beat-row__text small{color:#a8918c;font-size:.74rem}.beat-row__index{font-variant-numeric:tabular-nums;color:#a8918d;font-size:.7rem}.beat-row__buy{color:#f1e5db;border:1px solid #5a4044;border-radius:999px;flex-shrink:0;align-items:center;gap:.35rem;min-height:40px;margin-inline-end:.4rem;padding:0 .8rem;font-size:.78rem;font-weight:600;transition:border-color .2s,background-color .2s;display:inline-flex}.beat-row__buy:hover{border-color:hsl(var(--accent));background:hsl(var(--accent)/.15)}.beat-cover-fallback{color:#ffd3d4;text-transform:uppercase;background:linear-gradient(135deg,#5a1f27,#1b1214);justify-content:center;align-items:center;font-size:1.1rem;font-weight:700;display:flex!important}.beat-more{text-align:center;flex-direction:column;align-items:center;gap:.6rem;margin-top:2rem;display:flex}.beat-more__link{color:#ffd3d4;border:1px solid #e1848c;border-radius:999px;align-items:center;gap:.7rem;min-height:48px;padding:0 1.6rem;font-size:.95rem;font-weight:600;transition:background-color .2s;display:inline-flex}.beat-more__link:hover{background:#e1848c1f}.beat-more p{color:#9d8580;font-size:.75rem}@media (width<=1000px){.beat-player{grid-template-columns:1fr}.beat-rows{max-height:360px}}@media (width<=560px){.beat-now{grid-template-columns:96px minmax(0,1fr);align-items:start;gap:1rem;padding:1rem}.beat-now__title{font-size:1.25rem}.beat-now__progress,.beat-now__controls,.beat-now__buy{grid-column:1/-1}.beat-now__body{display:contents}.beat-now__label,.beat-now__title,.beat-now__meta{grid-column:2}.beat-now__art{grid-row:1/span 3}.beat-now__controls{margin-top:0}.beat-row__buy{padding:0 .65rem}}@media (prefers-reduced-motion:reduce){.beat-now__eq i,.beat-spinner{animation:none}.beat-now__toggle{transition:none}}.beat-player--open{align-items:start}.beat-player--open .beat-rows{max-height:none;overflow:visible}.beat-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.5rem;padding:0;list-style:none;display:grid}.beat-steps li{background:#120e0f;border:1px solid #3a2a2d;border-radius:14px;align-items:flex-start;gap:.9rem;padding:1.1rem 1.2rem;display:flex}.beat-steps__num{background:hsl(var(--accent)/.15);color:#ffb9bd;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;font-size:.85rem;font-weight:700;display:inline-flex}.beat-steps strong{color:#f1e5db;margin-bottom:.2rem;font-size:.98rem;display:block}.beat-steps p{color:#b6a09b;font-size:.82rem;line-height:1.65}@media (width<=767px){.beat-steps{grid-template-columns:1fr}}
