.beats-page{--beats-line: color-mix(in oklab, var(--text-base) 12%, transparent);--beats-line-strong: color-mix(in oklab, var(--text-base) 30%, transparent);--beats-wave-base: var(--waveform-bar);--beats-wave-progress: var(--waveform-progress);--beats-wave-empty: var(--waveform-empty);--beats-skeleton-base: color-mix(in srgb, var(--text-base) 15%, transparent);--beats-skeleton-sheen: color-mix(in srgb, var(--text-base) 16%, transparent);--beats-skeleton-duration: 1.35s;--beats-player-wave-height: 32px;--beats-player-icon-size: 18px;--beats-row-grid-template: 2.5rem auto 10rem auto 4.9rem auto 3.1rem auto minmax(0, 1fr);--beats-row-grid-gap: .42rem;min-width:240px;max-width:var(--site-page-max-width);margin:0 auto;padding:2rem 1rem 7rem}:root.light .beats-page{--beats-skeleton-base: color-mix(in srgb, var(--text-strong) 10%, transparent);--beats-skeleton-sheen: color-mix(in srgb, var(--text-strong) 18%, transparent)}.beats-header{margin-bottom:1rem}.beats-kicker{display:inline-block;margin:.2rem 0 0;font-family:var(--font-heading);color:var(--text-muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:color var(--transition-fast)}.beats-kicker:hover{color:var(--text-base)}.beats-loading,.beats-empty{font-family:var(--font-heading);font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.beats-loading-skeleton{display:flex;flex-direction:column;gap:0}.beats-skeleton-row{min-height:48px;border-bottom:1px solid var(--beats-line);padding:.54rem .28rem;display:grid;grid-template-columns:2.2rem minmax(0,1fr);align-items:center;gap:.35rem .75rem}.beats-skeleton-chip,.beats-skeleton-line{display:block;border-radius:2px;background:var(--beats-skeleton-base);position:relative;overflow:hidden}.beats-skeleton-chip:after,.beats-skeleton-line:after{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,var(--beats-skeleton-sheen) 50%,transparent 100%);animation:beats-skeleton-shimmer var(--beats-skeleton-duration) ease-in-out infinite}.beats-skeleton-row:nth-child(3n+2) .beats-skeleton-chip:after,.beats-skeleton-row:nth-child(3n+2) .beats-skeleton-line:after{animation-delay:.12s}.beats-skeleton-row:nth-child(3n) .beats-skeleton-chip:after,.beats-skeleton-row:nth-child(3n) .beats-skeleton-line:after{animation-delay:.24s}.beats-skeleton-chip{width:1.6rem;height:.55rem}.beats-skeleton-line-main{width:min(68%,420px);height:.7rem}.beats-skeleton-line-meta{grid-column:2;width:min(40%,240px);height:.5rem}@keyframes beats-skeleton-shimmer{to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.beats-skeleton-chip:after,.beats-skeleton-line:after{animation:none;transform:none;background:none}}.beats-search-wrap{margin-bottom:.55rem}.beats-search-label{display:block;font-size:.8rem;font-weight:500;color:var(--text-muted);margin-bottom:.35rem}.beats-search{font-family:var(--font-heading);width:100%;border:0;border-bottom:1px solid var(--beats-line);border-radius:0;background:transparent;color:var(--text-base);padding:.44rem 0;font-size:.78rem;letter-spacing:.02em;outline:none;transition:border-color var(--transition-fast);min-height:44px}.beats-search:focus{border-color:var(--beats-line-strong)}.beats-list{display:flex;flex-direction:column;gap:0;min-height:calc(var(--beats-rows, 23) * 48px)}.beats-columns{display:grid;grid-template-columns:var(--beats-row-grid-template);gap:var(--beats-row-grid-gap);align-items:center;padding:0 .28rem .25rem;border-bottom:1px solid var(--beats-line);margin-bottom:.15rem}.beats-col,.beats-col-index{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);line-height:1;white-space:nowrap}.beats-col-index{text-align:right}.beats-col-sep{color:color-mix(in oklab,var(--text-base) 28%,transparent);font-size:.7rem;line-height:1;text-align:center;user-select:none}.beats-row{--beats-row-progress: 0%;border-bottom:1px solid var(--beats-line);padding:.54rem .28rem;transition:background-color var(--transition-fast);cursor:pointer;min-height:44px}.beats-row:hover{background:color-mix(in oklab,var(--surface-raised) 90%,black 10%)}.beats-row.is-active{background:color-mix(in oklab,var(--accent) 14%,var(--surface-raised) 86%)}.beats-row.is-active .beats-item,.beats-row.is-active .beats-item-index{color:color-mix(in oklab,var(--accent) 65%,var(--text-base) 35%)}.beats-row-main{display:grid;grid-template-columns:var(--beats-row-grid-template);gap:var(--beats-row-grid-gap);align-items:center}.beats-item{font-size:.72rem;color:var(--text-muted);letter-spacing:.03em;text-transform:lowercase;white-space:nowrap;line-height:1}.beats-item-index{font-size:.63rem;letter-spacing:.1em;color:var(--text-muted);text-transform:none;text-align:right}.beats-item-genre{max-width:100%;overflow:hidden;text-overflow:ellipsis}.beats-sep{color:color-mix(in oklab,var(--text-base) 28%,transparent);font-size:.7rem;line-height:1;text-align:center;user-select:none}.beats-row-waveform{display:flex;align-items:center;min-width:0;width:100%}.beats-waveform-wrap{flex:1 1 auto;width:100%;min-height:var(--beats-player-wave-height);min-width:0;border-bottom:0;padding-bottom:0;cursor:pointer}.beats-waveform-wrap audio{display:none}.beats-static-wave{position:relative;width:100%;height:var(--beats-player-wave-height);pointer-events:none}.beats-static-wave-img{display:block;width:100%;height:100%;color:var(--beats-wave-base)}.beats-static-wave-svg{display:block;width:100%;height:100%}.beats-static-wave-path{fill:none;stroke:var(--beats-wave-base);stroke-width:1.1;stroke-linecap:round;vector-effect:non-scaling-stroke}.beats-wave-mask-layer{position:absolute;inset:0;background:var(--beats-wave-base);-webkit-mask-image:var(--wave-mask-url, none);mask-image:var(--wave-mask-url, none);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.beats-wave-mask-layer--played{background:var(--beats-wave-progress);clip-path:inset(0 calc(100% - var(--beats-row-progress, 0%)) 0 0)}.beats-static-wave-progress-wrap{position:absolute;inset:0 auto 0 0;width:var(--beats-row-progress, 0%);overflow:hidden}.beats-static-wave-path.played{stroke:var(--beats-wave-progress)}.beats-static-wave-empty{width:100%;height:1px;background:var(--beats-wave-empty)}.beats-retry{align-self:flex-start;margin-top:.45rem;border:1px solid var(--beats-line-strong);background:transparent;color:var(--text-muted);padding:.34rem .62rem;font-family:var(--font-heading);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;cursor:pointer}.beats-retry:hover{border-color:var(--accent);color:var(--accent)}.mono{font-family:var(--font-heading)}.beats-player{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);width:min(600px,calc(100% - 2rem));z-index:90}.beats-player-inner{display:flex;align-items:center;gap:1.25rem;height:72px;padding:0 1.5rem 0 .75rem;background:var(--surface-base);border:none;border-radius:0;width:100%;box-sizing:border-box}.beats-player-play{width:var(--beats-player-wave-height);height:var(--beats-player-wave-height);min-width:var(--beats-player-wave-height);align-self:center;flex-shrink:0;border-radius:50%;border:1.5px solid var(--player-control-fg);background:transparent;color:var(--player-control-fg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s;padding:0;line-height:0}.beats-player-play:active{transform:scale(.95)}.beats-player-play .spinner{display:none;width:16px;height:16px;border:2px solid var(--border-muted);border-top-color:var(--player-control-fg);border-radius:50%;animation:beats-spin .8s linear infinite}@keyframes beats-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.beats-player-play .spinner{animation:none}}.beats-player-play.is-loading .spinner{display:block}.beats-player-play.is-loading svg{display:none}.beats-player-play .icon-pause,.beats-player-play.is-playing .icon-play{display:none}.beats-player-play.is-playing .icon-pause{display:block}.beats-player-play svg{width:var(--beats-player-icon-size);height:var(--beats-player-icon-size);display:block;flex:0 0 auto}.beats-player-waveform-wrap{flex:1;height:var(--beats-player-wave-height);position:relative;min-width:0}.beats-player-waveform{width:100%;height:100%;cursor:pointer;touch-action:none;display:flex;align-items:center}.beats-player-waveform .beats-static-wave{width:100%;height:100%}.beats-player-waveform .beats-static-wave-img,.beats-player-waveform .beats-static-wave-svg{height:100%}.beats-player-waveform audio{display:none}.beats-player-time{position:absolute;right:0;bottom:-18px;font-family:var(--font-mono);font-size:10px;color:var(--player-control-muted);letter-spacing:.05em}.beats-player-info{flex-shrink:0;width:var(--beats-player-wave-height);height:var(--beats-player-wave-height);min-width:var(--beats-player-wave-height);align-self:center;padding:0;border:1.5px solid var(--player-control-fg);border-radius:50%;background:transparent;color:var(--player-control-fg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s;line-height:0}.beats-player-info:active{transform:scale(.95)}.beats-player-info svg{width:var(--beats-player-icon-size);height:var(--beats-player-icon-size);flex:0 0 auto}.beats-toast{position:fixed;bottom:4.2rem;left:50%;transform:translate(-50%) translateY(1rem);padding:.53rem 1rem;font-family:var(--font-heading);font-size:.67rem;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in oklab,var(--surface-overlay) 70%,black 30%);border:1px solid var(--beats-line-strong);border-radius:999px;color:var(--text-base);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:100}.beats-toast.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}:root.theme-transition .beats-page,:root.theme-transition .beats-page *,:root.theme-transition .beats-page *:before,:root.theme-transition .beats-page *:after{transition:none}@media(min-width:769px){.beats-page{--beats-row-grid-template: 2.7rem auto 10.4rem auto 5.2rem auto 3.4rem auto minmax(0, 1fr);--beats-row-grid-gap: .62rem}.beats-kicker{font-size:.9rem}.beats-loading,.beats-empty{font-size:.92rem}.beats-search{font-size:.88rem}.beats-item{font-size:.82rem}.beats-item-index{font-size:.72rem}.beats-sep{font-size:.78rem}.beats-row{padding:.72rem .4rem}.beats-row-main{row-gap:.36rem}.beats-item{line-height:1.22}.beats-row-waveform{margin-top:.2rem}.beats-waveform-wrap{min-height:var(--beats-player-wave-height)}.beats-static-wave{height:var(--beats-player-wave-height)}}@media(max-width:768px){.beats-columns{display:none}.beats-page{--beats-player-wave-height: 26px;--beats-player-icon-size: 15px}.beats-page{padding:1.4rem .88rem 7rem}.beats-kicker{font-size:.74rem;text-align:center}.beats-search-wrap{margin-bottom:1.52rem}.beats-search{font-family:var(--font-body);font-style:italic;text-align:center;border:0;border-bottom:1px solid var(--beats-line-strong);border-radius:0;padding:.5rem .1rem;background:transparent;color:color-mix(in oklab,var(--text-base) 86%,var(--accent) 14%);letter-spacing:.01em}.beats-search::placeholder{font-style:italic;color:color-mix(in oklab,var(--text-muted) 82%,var(--accent) 18%);opacity:1}.beats-row-main{grid-template-columns:max-content minmax(0,1fr) auto auto auto;gap:.7rem .18rem}.beats-sep{display:none}.beats-row-main .beats-item-bpm+.beats-sep{display:block;grid-column:4}.beats-item-index{grid-column:1;text-align:left}.beats-item-genre{grid-column:2;max-width:none;min-width:0}.beats-item-bpm{grid-column:3}.beats-item-key{grid-column:5}.beats-row-waveform{grid-column:1 / -1;grid-row:2;margin-top:.16rem;min-height:calc(var(--beats-player-wave-height) + 4px)}.beats-waveform-wrap{padding-top:2px;padding-bottom:2px;box-sizing:content-box;min-height:var(--beats-player-wave-height);height:calc(var(--beats-player-wave-height) + 4px);flex:0 0 auto}.beats-static-wave{height:var(--beats-player-wave-height);min-height:var(--beats-player-wave-height)}.beats-player{bottom:.25rem;width:calc(100% - 1.5rem);transition:bottom .15s ease-out}.beats-player-inner{gap:.75rem;padding:0 1rem 0 .75rem;background:var(--surface-base)}.beats-retry{min-height:44px;padding-top:.5rem;padding-bottom:.5rem}}