.bt-dashboard{position:relative}.bt-dashboard{--dj-columns:var(--dj-total-songs);--dj-icon-size:60px}@media (max-width:600px){.bt-dashboard{--dj-columns:1;--dj-icon-size:50px}}.bt-dashboard .bt-jukebox-dash-frame{aspect-ratio:1111.83/507.79;width:100%;position:relative}@media (max-width:600px){.bt-dashboard .bt-jukebox-dash-frame{display:none}}.bt-dashboard .bt-jukebox-dash-frame-mobile{aspect-ratio:306.67/370.67;width:100%;display:none;position:relative}@media (max-width:600px){.bt-dashboard .bt-jukebox-dash-frame-mobile{display:block}}.bt-dashboard .bt-jukebox-window-bg{background:#333;width:59.21%;height:36.69%;position:absolute;top:22.89%;left:20.88%}@media (max-width:600px){.bt-dashboard .bt-jukebox-window-bg{width:44.93%;height:45.35%;top:18.73%;left:26.78%}}.bt-dashboard .bt-dj-inner-track{z-index:10;width:59.21%;height:36.69%;position:absolute;top:22.89%;left:20.88%;overflow:hidden}@media (max-width:600px){.bt-dashboard .bt-dj-inner-track{width:44.93%;height:45.35%;top:18.73%;left:26.78%}}.bt-dashboard .bt-dj-inner-track .bt-dj-track{grid-auto-flow:column;grid-auto-columns:calc(100% / var(--dj-columns));width:100%;height:100%;display:grid}.bt-dashboard .bt-dj-inner-track .bt-dj-track .bt-dj-container{position:relative}.bt-dashboard .bt-dj-inner-track .bt-dj-track .bt-dj-container .bt-dj-image{object-fit:contain;filter:brightness(0)invert();opacity:.5;height:100%}.bt-dashboard .bt-dj-inner-track .bt-dj-track .bt-dj-container .bt-dj-image-active{filter:drop-shadow(-2px -2px #0003)drop-shadow(2px 2px #000c);opacity:1}.bt-dashboard .bt-jukebox-controls{gap:20px;display:grid;position:absolute;top:20%;right:5%}@media (max-width:600px){.bt-dashboard .bt-jukebox-controls{top:unset;right:unset;grid-template-columns:1fr 1fr;bottom:3%;left:50%;transform:translate(-50%)}}.bt-dashboard .bt-jukebox-controls .bt-jukebox-button{position:relative}.bt-dashboard .bt-jukebox-controls .bt-jukebox-knob{width:90px;display:block}@media (max-width:600px){.bt-dashboard .bt-jukebox-controls .bt-jukebox-knob{width:75px}}.bt-dashboard .bt-jukebox-controls .bt-jukebox-icon{cursor:pointer;place-items:center;display:grid;position:absolute;inset:0}.bt-dashboard .bt-jukebox-controls .bt-jukebox-icon svg{width:var(--dj-icon-size);height:var(--dj-icon-size)}.bt-dashboard .bt-jukebox-eq{width:58.21%;height:36.69%;position:absolute;top:22.69%;left:21.38%}@media (max-width:600px){.bt-dashboard .bt-jukebox-eq{width:44.93%;height:45.35%;top:18.73%;left:26.78%}}.bt-dashboard .bt-jukebox-progress{width:40%;position:absolute;top:75%;left:30%}@media (max-width:600px){.bt-dashboard .bt-jukebox-progress{width:50%;top:65%;left:50%;transform:translate(-50%)}}.bt-dashboard .butterfly{z-index:5;transform-origin:50%;width:150px;position:absolute}.bt-dashboard .butterfly.instance01{filter:drop-shadow(2px 4px 3px #00000040);top:6px;left:-6px;transform:rotate(135deg)}.bt-dashboard .butterfly.instance02{filter:drop-shadow(2px 4px 3px #00000040);bottom:10%;right:0;transform:rotate(-45deg)}@media (max-width:600px){.bt-dashboard .butterfly.instance02{bottom:15%;right:-12px}}
.bt-jukebox-container{border-radius:var(--r-lg);background-position:right 20px bottom;background-repeat:no-repeat;background-size:auto,cover;padding:0 auto;position:relative;overflow:hidden}.bt-jukebox-header{text-align:center}.bt-jukebox-header .bt-jukebox-genre{color:var(--bw-teal);font-family:var(--font-display);letter-spacing:.05em;margin:10px 0;font-size:32px;font-weight:400;line-height:1}@media (max-width:600px){.bt-jukebox-header .bt-jukebox-genre{font-size:24px}}.bt-jukebox-body{padding:10px 18px;position:relative}@media (max-width:600px){.bt-jukebox-body{padding:10px 0 20px}}.bt-jukebox-track-list{padding:0 20px 20px}.bt-jukebox-track-list .bt-jukebox-tracks{grid-template-columns:repeat(3,1fr);display:grid}@media (max-width:600px){.bt-jukebox-track-list .bt-jukebox-tracks{grid-template-columns:1fr}}.bt-jukebox-vinyl{grid-template-columns:1fr;justify-items:center;gap:5px;display:grid}.bt-jukebox-vinyl-chrome{border:4px solid var(--bg-elevated);border-radius:50%;flex-shrink:0;width:184px;height:184px;overflow:hidden;box-shadow:0 6px 22px #00000075,inset 0 2px 4px #ffffffad,0 0 0 2.5px #f0a50050}.bt-jukebox-vinyl-accent{background:#000;width:100%;height:100%;position:relative}.bt-vinyl-disc{border-radius:50%;width:100%;height:100%;animation:3.5s linear infinite paused vspin;position:relative;overflow:hidden}.bt-vinyl-disc:before{content:"";background:repeating-radial-gradient(circle,#0000 0 5px,#fff3 5px,#99999980 6.5px);border-radius:50%;position:absolute;inset:0}.bt-vinyl-disc .spin{animation:3.5s linear infinite vspin}.bt-vinyl-disc .glow{animation:2s ease-in-out infinite pglow}.bt-jukebox-record{color:#fff;background:#000;place-items:center;width:100%;height:100%;display:grid}.bt-jukebox-record .record-inner{width:50%;height:50%;font-family:var(--font-body);background:red;border-radius:50%;place-items:center;padding:10px;font-size:18px;display:grid}.bt-jukebox-record .record-inner .flip-vertical{transform:scaleY(-1)}.bt-jukebox-buttons{text-align:center}.bt-jukebox-buttons .bt-jukebox-button{cursor:pointer}.bt-jukebox-dashboard{min-width:0}
.tracks-col{grid-template-columns:1fr;gap:8px;display:grid}.trk{cursor:pointer;text-align:left;background:linear-gradient(158deg,#183838 0%,#102c2c 100%);border:2px solid #244545;border-radius:10px;outline:none;align-items:center;gap:8px;width:100%;padding:8px 10px 8px 12px;transition:border-color .12s,background .12s,box-shadow .12s;display:flex;box-shadow:inset 0 1px #ffffff0d,0 2.5px #071717}.trk:hover{background:linear-gradient(158deg,#1e4545 0%,#153838 100%);border-color:#4abfbf80}.trk:focus-visible{box-shadow:0 0 0 2px var(--bw-amber)}.trk.on{border-color:#f0a500;box-shadow:inset 0 1px #ffffff12,0 2.5px #071717,0 0 16px #f0a50042,inset 0 0 20px #f0a5000e}.trk.on:focus-visible{box-shadow:inset 0 1px 0 #ffffff12, 0 2.5px 0 #071717, 0 0 16px #f0a50042, inset 0 0 20px #f0a5000e, 0 0 0 2px var(--bw-cream)}.trk-pip{background:#244545;border:1.5px solid #336060;border-radius:50%;flex-shrink:0;width:16px;height:16px;transition:all .15s}.trk.on .trk-pip{background:#f0a500;border-color:#ffcf50;box-shadow:0 0 6px #f0a500eb,0 0 14px #f0a50066}.trk-info{flex:1;min-width:0}.trk-code{text-transform:uppercase;letter-spacing:.18em;color:#3a8a8a;margin-bottom:2px;font-size:18px;font-weight:700;line-height:1;transition:color .12s}.trk-code.desktop{display:inline-block}@media (max-width:600px){.trk-code.desktop{display:none}}.trk-code.mobile{display:none}@media (max-width:600px){.trk-code.mobile{display:inline-block}}.trk.on .trk-code{color:#f0a500}.trk-title{font-family:var(--font-display);color:#beb69c;white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:1.2;transition:color .12s;overflow:hidden}.trk.on .trk-title{color:#f5edd6}
.v-prog{flex-direction:column;gap:4px;width:100%;padding:10px 18px 0;display:flex}.v-rail{cursor:pointer;background:#1a4a4a1f;border:1.5px solid #1a4a4a33;border-radius:999px;width:100%;height:10px;overflow:hidden}.v-rail:focus-visible{box-shadow:0 0 0 2px var(--bw-amber)}.v-fill{background:linear-gradient(90deg, var(--bw-teal), var(--bw-amber));border-radius:999px;width:0%;height:100%;transition:width .8s linear}.v-time{color:var(--bw-teal);letter-spacing:.04em;justify-content:space-between;font-size:12px;font-weight:700;display:flex}
.jb-eq{align-items:flex-end;gap:2.5px;height:0;padding:0 1px 1px;transition:height .75s;display:flex;position:relative;overflow:hidden}.jb-eq.playing{height:52px}.jb-eq .jb-eq:after{content:"";pointer-events:none;position:absolute;inset:0}.jb-eq .eq-bar{background:linear-gradient(to top, var(--bw-violet) 0%, var(--bw-teal) 18%, var(--bw-amber) 55%, var(--bw-burnt) 100% );border-radius:2px 2px 0 0;flex:1;height:0;transition:height .12s;box-shadow:0 0 4px #4abfbf4d}
.bt-jukebox-tease{position:relative;overflow:hidden}@media (max-width:600px){.bt-jukebox-tease{background-position:right 20px bottom 20px;background-size:90%,cover}}.jb-body{grid-template-columns:1.5fr 1fr;align-items:start;gap:20px;display:grid;position:relative}@media (max-width:600px){.jb-body{grid-template-columns:1fr}}.vinyl-col{grid-template-columns:1fr;justify-items:center;gap:5px;display:grid}.vinyl-chrome{border:4px solid var(--bg-elevated);border-radius:50%;flex-shrink:0;width:184px;height:184px;overflow:hidden;box-shadow:0 6px 22px #00000075,inset 0 2px 4px #ffffffad,0 0 0 2.5px #f0a50050}.vinyl-accent{position:relative}.vinyl-disc{border-radius:50%;width:100%;height:100%;animation:3.5s linear infinite paused vspin;position:relative;overflow:hidden}.vinyl-disc:before{content:"";background:repeating-radial-gradient(circle,#0000 0 5px,#ffffff07 5px,#3333331a 6.5px);border-radius:50%;position:absolute;inset:0}.spin{animation:3.5s linear infinite vspin}.glow{animation:2s ease-in-out infinite pglow}.cb{z-index:10;cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cb svg{fill:var(--bw-cream);opacity:.3}