.dlp{--dlp-fg: #fff;--dlp-bg: #000;--dlp-hover: rgba(255, 255, 255, .08);--dlp-line: rgba(255, 255, 255, .12);--dlp-progress: 0;--dlp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:relative;isolation:isolate;overflow:hidden;display:block;padding:24px 12px 16px;border-radius:6px;background:#120a07;color:var(--dlp-fg);-webkit-font-smoothing:antialiased}.dlp:before{content:"";position:absolute;top:-60px;right:-60px;bottom:-60px;left:-60px;z-index:-2;background:var(--dlp-art, none) center / cover;filter:blur(48px) saturate(1.4) brightness(.62);opacity:.85}.dlp:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(180deg,#00000059,#000000b3),var(--dlp-grain);background-size:auto,160px;pointer-events:none}@media screen and (min-width:750px){.dlp{padding:40px 32px 28px}}.dlp__head{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:0 8px}.dlp__art{flex:none;width:64px;height:64px;object-fit:cover;border-radius:3px;box-shadow:0 8px 24px #0006}.dlp__kicker{margin:0;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}.dlp__heading{margin:4px 0 0;color:inherit;font-size:20px;font-weight:500;letter-spacing:0;line-height:1.2}@media screen and (min-width:750px){.dlp__art{width:80px;height:80px}.dlp__heading{font-size:24px}}.dlp__list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--dlp-line)}.dlp__track{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"btn info bpm" "btn wf wf";align-items:center;gap:10px 14px;min-height:60px;padding:12px 8px;border-top:1px solid var(--dlp-line);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .3s ease,color .3s ease}.dlp__track:not(:has(.dlp__wf)){grid-template-areas:"btn info bpm"}@media screen and (min-width:750px){.dlp__track,.dlp__track:not(:has(.dlp__wf)){grid-template-columns:40px minmax(200px,1fr) 64px minmax(0,1.5fr);grid-template-areas:"btn info bpm wf";gap:20px;padding:10px 16px}}.dlp__track[data-more]{display:none}.dlp[data-expanded] .dlp__track[data-more]{display:grid}@media(hover:hover){.dlp__track:hover{background-color:var(--dlp-hover);color:#ffffffb8}}.dlp__track:active{background-color:var(--dlp-hover)}.dlp__track[data-state=playing],.dlp__track[data-state=loading]{color:var(--dlp-fg)}.dlp__btn{grid-area:btn;position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;margin:0;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:transparent;color:var(--dlp-fg);cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}.dlp__btn:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px}.dlp__btn:active{transform:scale(.92)}.dlp__btn:focus-visible{outline:2px solid var(--dlp-fg);outline-offset:3px}.dlp__btn:disabled{opacity:.3;cursor:not-allowed}.dlp__icon{grid-area:1 / 1;width:14px;height:14px;fill:currentColor}.dlp__icon--stop,.dlp__spinner{display:none}.dlp__track[data-state=playing] .dlp__btn,.dlp__track[data-state=loading] .dlp__btn{background:var(--dlp-fg);border-color:var(--dlp-fg);color:var(--dlp-bg)}.dlp__track[data-state=playing] .dlp__icon--play,.dlp__track[data-state=loading] .dlp__icon--play{display:none}.dlp__track[data-state=playing] .dlp__icon--stop{display:block}.dlp__track[data-state=loading] .dlp__spinner{display:block;grid-area:1 / 1;width:14px;height:14px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:dlp-spin .7s linear infinite}@keyframes dlp-spin{to{transform:rotate(360deg)}}.dlp__info{grid-area:info;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}.dlp__title{margin-right:2px;font-size:16px;font-weight:500;line-height:1.3}.dlp__tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:.9}.dlp__bpm{grid-area:bpm;display:flex;flex-direction:column;align-items:flex-end;line-height:1}@media screen and (min-width:750px){.dlp__bpm{align-items:center}}.dlp__bpm b{font-size:22px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}.dlp__bpm span{margin-top:4px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:9px;letter-spacing:.12em;opacity:.55}.dlp__wf{grid-area:wf;position:relative;height:34px}.dlp__wf svg{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}.dlp__wf-base{fill:currentColor;opacity:.28}.dlp__wf-fill{fill:var(--dlp-fg);clip-path:inset(0 calc((1 - var(--dlp-progress)) * 100%) 0 0)}.dlp__track[data-state=stopped] .dlp__wf-fill{clip-path:inset(0 100% 0 0)}.dlp__progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--dlp-fg);transform:scaleX(var(--dlp-progress));transform-origin:left;opacity:0;pointer-events:none}.dlp__track[data-state=playing]:not(:has(.dlp__wf)) .dlp__progress{opacity:1}.dlp__more{display:block;margin:16px auto 0;padding:10px 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:var(--dlp-fg);font:inherit;font-size:14px;cursor:pointer;transition:background-color .2s ease,color .2s ease}.dlp__more:hover{background:var(--dlp-fg);color:var(--dlp-bg)}.dlp__legend{display:grid;gap:16px 24px;margin:24px 0 0;padding:20px 8px 4px;border-top:1px solid var(--dlp-line)}@media screen and (min-width:750px){.dlp__legend{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:24px 16px 4px}}.dlp__legend-item dt{margin:0 0 8px}.dlp__legend-item dd{margin:0;color:#ffffffb8;font-size:13.5px;line-height:1.5}@media(prefers-reduced-motion:reduce){.dlp__track,.dlp__btn{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/50/assets/drum-loop-player.css.map */