/* Máquina musical de época. As superfícies de latão, cromo e madeira são materiais,
   enquanto petróleo, vermelho de voz e marfim continuam assinando a experiência. */
#jukebox-dialog{--jb-brass:#c4a574;--jb-brass-light:#f4dfb3;--jb-blue:#133b57;--jb-red:#de4c2f;--jb-paper:#f5eee2;--dial-angle:-65deg;--volume-angle:-54deg;width:min(1100px,96vw);max-width:1100px;max-height:96svh;height:auto;min-height:0;margin:auto;padding:0;border:0;background:transparent;color:var(--jb-paper);box-shadow:none;overflow:auto;scrollbar-width:thin;scrollbar-color:#c4a57477 transparent;overscroll-behavior:contain}
#jukebox-dialog::backdrop{background:radial-gradient(ellipse at 64% 43%,#123a4dca,#04151fee 75%);backdrop-filter:blur(15px)}
#jukebox-dialog .jb-experience{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(250px,.85fr) minmax(300px,1fr);gap:30px;align-items:center;padding:20px 52px 22px 32px;isolation:isolate}
#jukebox-dialog .jb-experience:before{content:'';position:absolute;left:33%;right:-5%;top:10%;bottom:3%;border-radius:50%;background:radial-gradient(ellipse,#de4c2f12,transparent 67%);pointer-events:none;z-index:-1}
#jukebox-dialog .jb-close{position:absolute;z-index:9;right:5px;top:7px;display:grid;place-items:center;width:36px;height:36px;border:1px solid #f5eee259;border-radius:50%;background:#071f2eaa;color:var(--jb-paper);font:300 28px/1 DM,Arial,sans-serif;transition:background .2s,transform .2s}
#jukebox-dialog .jb-close:hover{background:#194359;transform:rotate(8deg)}
#jukebox-dialog .jb-welcome{max-width:355px;padding-bottom:15px}
#jukebox-dialog .jb-eyebrow{display:flex;align-items:center;gap:10px;font:750 10px/1.5 DM,Arial,sans-serif;letter-spacing:.18em;color:#f5eee2c5}
#jukebox-dialog .jb-eyebrow>span{width:25px;height:3px;background:var(--jb-red)}
#jukebox-dialog .jb-welcome h2{font-family:Archivo,Arial,sans-serif;font-size:clamp(37px,4.2vw,58px);line-height:1.03;letter-spacing:-.05em;margin:25px 0 20px;outline:none;color:var(--jb-paper)}
#jukebox-dialog .jb-welcome h2 br{display:block}
#jukebox-dialog .jb-volume-group{display:flex}
#jukebox-dialog [data-jukebox-volume],#jukebox-dialog [data-jukebox-selector]{display:block}
#jukebox-dialog .jb-introduction{font-size:16px;line-height:1.7;color:#f5eee2cb;max-width:30ch}
#jukebox-dialog .jb-welcome-rule{display:flex;align-items:center;gap:12px;width:180px;margin:25px 0 20px;color:var(--jb-brass);font-size:19px}
#jukebox-dialog .jb-welcome-rule i{height:1px;background:linear-gradient(90deg,#c4a57412,#c4a57499);flex:1}
#jukebox-dialog .jb-welcome-rule i:last-child{transform:rotate(180deg)}
#jukebox-dialog .jb-collection{font-size:11px;line-height:1.6;letter-spacing:.045em;color:#f5eee2a1}
#jukebox-dialog .jb-collection>span{margin:0 5px;color:var(--jb-brass)}
#jukebox-dialog .jb-status{font-size:12px;line-height:1.65;margin:20px 0 0;padding-left:13px;border-left:2px solid var(--jb-brass);color:#f5eee2ba;max-width:36ch;min-height:60px}
#jukebox-dialog .jb-actions{display:grid;gap:16px;align-items:start;justify-content:start;margin-top:24px}
#jukebox-dialog .jb-enter{display:flex;justify-content:space-between;align-items:center;gap:32px;min-width:225px;padding:14px 18px;border:1px solid var(--jb-paper);border-radius:2px;background:var(--jb-paper);color:var(--jb-blue);font:800 13px/1.4 DM,Arial,sans-serif;box-shadow:0 3px 0 #bea982;transition:transform .2s,background .2s}
#jukebox-dialog .jb-enter:hover{background:#fff8eb;transform:translateY(-2px)}
#jukebox-dialog .jb-enter:active{transform:translateY(2px);box-shadow:0 1px 0 #bea982}
#jukebox-dialog .jb-enter>span{font-size:20px;line-height:1}
#jukebox-dialog .jb-silent{justify-self:start;font:650 12px/1.5 DM,Arial,sans-serif;color:#f5eee2c9;border:0;border-bottom:1px solid #f5eee26a;padding:4px 0;background:none}
#jukebox-dialog .jb-silent:hover{color:#fff}
#jukebox-dialog .jb-credit{font-size:10px;line-height:1.5;margin-top:20px;color:#f5eee29c}
#jukebox-dialog .jb-machine-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:4px}
#jukebox-dialog .jb-floor-shadow{position:absolute;left:1%;right:1%;height:7%;bottom:-1%;border-radius:50%;background:#0008;filter:blur(12px);transform:scaleX(1.1)}
#jukebox-dialog .jb-machine{position:relative;width:min(430px,calc(67svh - 43px));aspect-ratio:430/640;min-width:300px;container-type:inline-size;isolation:isolate;color:var(--jb-blue);filter:drop-shadow(14px 18px 15px #0005)}
#jukebox-dialog .jb-machine *{box-sizing:border-box}
#jukebox-dialog .jb-cabinet{position:absolute;inset:0 0 5%;border-radius:48% 48% 7% 7% / 32% 32% 5% 5%;border:5px solid #2e2018;background:repeating-linear-gradient(91deg,#261b16 0,#483023 7px,#38271d 10px,#2b2019 15px);box-shadow:inset 4px 4px 0 #c4a57444,inset -5px -4px 0 #0d1115,0 8px 0 #061a25;z-index:0}
#jukebox-dialog .jb-arch-brass{position:absolute;left:2%;right:2%;top:1.4%;bottom:15.5%;border-radius:49% 49% 5% 5% / 35% 35% 4% 4%;background:linear-gradient(90deg,#6d4a21 0,#d8bc7d 4%,#fff0bc 7%,#947139 11%,#b9975e 87%,#e9d396 94%,#75552f 100%);box-shadow:inset 0 0 0 1px #fff0bd88,0 0 0 2px #111e26;z-index:1}
#jukebox-dialog .jb-arch-light{position:absolute;left:5.7%;right:5.7%;top:3.5%;bottom:18%;border:11px solid #f3cd89;border-width:2.55cqw;border-radius:49% 49% 4% 4% / 34% 34% 3% 3%;background:linear-gradient(90deg,#de4c2f,#f4d7a1 4%,#de4c2f 9%,#d7462a 90%,#f4d7a1 97%,#de4c2f);box-shadow:0 0 10px #ef9b4644,inset 0 0 8px #f9e5b3,0 0 0 3px #832e22;z-index:2}
#jukebox-dialog .jb-arch-light:before{content:'';position:absolute;inset:-3px;border:1px solid #fff0ca99;border-radius:inherit;box-shadow:inset 3px 0 3px #ffe5aa88,inset -3px 0 3px #f7a95a66}
#jukebox-dialog .jb-inner-case{position:absolute;left:12%;right:12%;top:6.5%;bottom:17%;border:3px solid #31241c;border-radius:48% 48% 3% 3% / 29% 29% 2% 2%;background:linear-gradient(105deg,#0b2838,#19465c 45%,#0a2b3f);box-shadow:inset 4px 2px 10px #0006,0 0 0 2px #a37c44;z-index:3}
#jukebox-dialog .jb-dome{position:absolute;left:13.5%;right:13.5%;top:7.5%;height:25.5%;border:1px solid #d9bf8a88;border-radius:49% 49% 7% 7% / 76% 76% 7% 7%;background:radial-gradient(ellipse at 50% 70%,#46747844,transparent 70%),linear-gradient(110deg,#082b3d,#183f4d 55%,#0a293a);overflow:hidden;z-index:4}
#jukebox-dialog .jb-dome-reflection{position:absolute;inset:0;background:linear-gradient(115deg,transparent 8%,#fff1c90d 9% 16%,transparent 17% 71%,#fff1c909 72% 79%,transparent 80%);pointer-events:none;z-index:3}
#jukebox-dialog .jb-machine-logo{position:absolute;left:29%;top:12%;width:42%;height:27%;object-fit:contain;z-index:3;filter:drop-shadow(0 2px 0 #0003);max-width:none}
#jukebox-dialog .jb-meter{position:absolute;left:5%;right:5%;top:38%;height:60%}
#jukebox-dialog .jb-meter-face{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:#f5eee2c9;stroke:none}
#jukebox-dialog .jb-meter-face line{stroke:#d8bd83;stroke-width:1.3}
#jukebox-dialog .jb-meter-face text{font:600 10px DM,Arial,sans-serif;stroke:none;text-anchor:middle;dominant-baseline:middle;letter-spacing:.035em}
#jukebox-dialog .jb-meter-arc{fill:none;stroke:#c2a57088;stroke-width:1.4}
#jukebox-dialog .jb-dial-pointer{position:absolute;left:50%;bottom:8%;height:69%;width:2px;background:linear-gradient(#fff1d9 0 12%,#de4c2f 12% 100%);transform-origin:50% 100%;transform:translateX(-50%) rotate(var(--dial-angle));transition:transform .55s cubic-bezier(.2,.75,.2,1);box-shadow:1px 1px 2px #0005;z-index:3}
#jukebox-dialog .jb-dial-pointer i{position:absolute;top:-4px;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid #f5eee2}
#jukebox-dialog .jb-dial-pivot{position:absolute;left:50%;bottom:4%;width:7%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#e5c894 0 23%,#6b512f 28% 45%,#d9bc85 48% 58%,#382f25 62%);transform:translateX(-50%);z-index:4}
#jukebox-dialog .jb-chrome-cap{position:absolute;top:30%;height:6.7%;width:17%;background:linear-gradient(#e4e5d7 0 6%,#769694 8% 17%,#e0e3d2 19% 26%,#30545d 28% 40%,#d7d7bd 42% 48%,#7a9693 51% 66%,#f0ecd8 69% 76%,#375962 81% 100%);border:1px solid #d2c59b;border-radius:4px;box-shadow:1px 4px 0 #0a2836,0 -3px 0 #754526;z-index:5}
#jukebox-dialog .jb-chrome-cap:before{content:'';position:absolute;left:10%;right:10%;top:45%;height:18%;background:var(--jb-red);box-shadow:0 1px 0 #f5eee255}
#jukebox-dialog .cap-left{left:0;transform:skewY(-3deg)}#jukebox-dialog .cap-right{right:0;transform:skewY(3deg)}
#jukebox-dialog .jb-marquee{position:absolute;left:13%;right:13%;top:29%;height:14%;padding:1.5% 3% 1%;background:linear-gradient(110deg,#f5eee2,#e4d7bd);border:3px solid #ba9a5f;border-radius:9px;box-shadow:0 0 0 2px #4c3c27,inset 0 0 0 1px #fff8e7,inset 0 3px 7px #9b7a3a22,0 7px 9px #00192455;z-index:6;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
#jukebox-dialog .jb-marquee-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:4px;font:800 10px/1 DM,Arial,sans-serif;font-size:2.25cqw;color:#6c5434;letter-spacing:.035em;margin-bottom:4px}
#jukebox-dialog .jb-marquee-top small{font-size:6.5px;font-size:1.45cqw;font-weight:700;letter-spacing:.13em;white-space:nowrap}
#jukebox-dialog .jb-marquee h3{font-family:Georgia,'Times New Roman',serif;font-size:19px;font-size:clamp(14px,4.4cqw,19px);line-height:1.08;letter-spacing:-.025em;font-weight:700;color:#183b4e;max-width:100%;margin:0;min-height:2.16em;display:flex;align-items:center;justify-content:center;text-wrap:balance}
#jukebox-dialog .jb-marquee>p{font:750 8px/1.15 DM,Arial,sans-serif;font-size:clamp(6px,1.8cqw,8px);letter-spacing:.1em;margin:3px 0 0;color:#7e4f31;text-transform:uppercase;max-width:100%}
#jukebox-dialog .jb-song-rack{position:absolute;top:44.5%;left:16%;right:16%;height:26%;display:grid;grid-template-rows:repeat(7,minmax(0,1fr));gap:2px;padding:3px;border:1px solid #ccba92;background:#071f2a;box-shadow:inset 0 2px 5px #0006,0 0 0 2px #142e38;z-index:5}
#jukebox-dialog .jb-song-key{position:relative;display:flex;align-items:center;gap:0;width:100%;min-width:0;padding:0;border:1px solid #c1bba5;border-radius:1px;color:#173b4b;background:linear-gradient(#fff7e6,#e5dcc9);text-align:left;box-shadow:0 1px 0 #0c202a;transition:filter .15s,transform .15s,background .15s;overflow:hidden}
#jukebox-dialog .jb-song-key:hover{filter:brightness(1.09);transform:translateX(2px)}
#jukebox-dialog .jb-song-key:active{transform:translateY(1px);box-shadow:none}
#jukebox-dialog .jb-song-key[aria-pressed=true]{background:linear-gradient(#f9e0af,#ebc588);border-color:#fff0c9;box-shadow:inset 0 0 0 1px #a25d2c88,0 0 7px #e9b45c45}
#jukebox-dialog .jb-key-code{width:11%;align-self:stretch;display:grid;place-items:center;flex:none;background:linear-gradient(90deg,#194052,#0e2c3e);color:var(--jb-paper);font:750 9px/1 DM,Arial,sans-serif;font-size:clamp(7px,2.1cqw,9px);border-right:1px solid #ac8e5a;text-shadow:0 1px #0008}
#jukebox-dialog .jb-song-key[aria-pressed=true] .jb-key-code{background:linear-gradient(#de4c2f,#aa381f)}
#jukebox-dialog .jb-key-paper{min-width:0;flex:1;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 3%}
#jukebox-dialog .jb-key-paper strong{font:700 10px/1.1 Georgia,'Times New Roman',serif;font-size:clamp(8px,2.45cqw,10.5px);letter-spacing:-.01em;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#jukebox-dialog .jb-key-paper small{font:750 6px/1.1 DM,Arial,sans-serif;font-size:clamp(5.4px,1.5cqw,6.5px);letter-spacing:.025em;text-transform:uppercase;text-align:right;max-width:32%}
#jukebox-dialog .jb-key-lamp{width:4px;height:4px;border-radius:50%;margin-right:5px;background:#8f8a6a;box-shadow:inset 0 1px 1px #0004;flex:none}
#jukebox-dialog .jb-song-key[aria-pressed=true] .jb-key-lamp{background:#e06731;box-shadow:0 0 4px #ffb557}
#jukebox-dialog .jb-control-deck{position:absolute;top:72%;left:15%;right:15%;height:11%;display:grid;grid-template-columns:1fr 1.8fr 1fr;align-items:start;gap:4%;z-index:6;color:#e0c999}
#jukebox-dialog .jb-knob-group{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;cursor:ew-resize;min-width:0}
#jukebox-dialog .jb-knob-label{font:700 6px/1.1 DM,Arial,sans-serif;font-size:clamp(6px,1.5cqw,7px);letter-spacing:.13em}
#jukebox-dialog .jb-rotary-knob{position:relative;display:block;width:11.5cqw;height:11.5cqw;max-width:50px;max-height:50px;min-width:35px;min-height:35px;border-radius:50%;isolation:isolate}
#jukebox-dialog .jb-knob-ring{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#c8d0bf 0deg 7deg,#637a77 7deg 13deg);box-shadow:0 2px 4px #0007,0 0 0 1px #bdaf8c}
#jukebox-dialog .jb-knob-core{position:absolute;inset:11%;border-radius:50%;background:radial-gradient(circle at 34% 25%,#e7dfc7,#a4b1a3 55%,#5f7671 90%);border:1px solid #b5bdab;box-shadow:inset 0 0 0 2px #dfe3ce77,1px 2px 3px #09212c66}
#jukebox-dialog .jb-knob-core i{position:absolute;left:48%;top:8%;width:4%;height:36%;min-width:2px;border-radius:1px;background:#183d4e;transform-origin:50% 116%;box-shadow:0 1px 0 #f5eee277}
#jukebox-dialog .jb-selector-indicator{transform:rotate(var(--dial-angle))}
#jukebox-dialog .jb-volume-indicator{transform:rotate(var(--volume-angle))}
#jukebox-dialog .jb-rotary-knob input{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:.001;cursor:ew-resize;touch-action:pan-y}
#jukebox-dialog .jb-rotary-knob:focus-within{outline:2px solid var(--jb-paper);outline-offset:4px}
#jukebox-dialog .jb-knob-ends{display:flex;justify-content:space-between;width:100%;max-width:50px;font:650 6px/1 DM,Arial,sans-serif;font-size:clamp(6px,1.5cqw,7px)}
#jukebox-dialog .jb-knob-ends i{font-style:normal}
#jukebox-dialog .jb-play-group{display:flex;flex-direction:column;align-items:center;min-width:0;padding-top:9px}
#jukebox-dialog .jb-transport{display:flex;align-items:center;justify-content:center;gap:5px;width:100%}
#jukebox-dialog .jb-skip{width:18px;height:24px;flex:none;border:1px solid #a7af98;border-radius:3px;background:linear-gradient(#e7dec6,#80988e);color:#17394a;font:700 24px/1 Georgia,serif;padding:0;box-shadow:0 2px 0 #061f2d;transition:filter .2s}
#jukebox-dialog .jb-skip:hover{filter:brightness(1.15)}
#jukebox-dialog .jb-play{display:grid;place-items:center;width:12cqw;height:12cqw;min-width:36px;min-height:36px;max-width:53px;max-height:53px;border-radius:50%;border:4px solid #c7c6a6;background:radial-gradient(circle at 37% 25%,#f27d51,#de4c2f 48%,#a53220 85%);box-shadow:0 0 0 1px #6c765f,inset 0 0 0 1px #f7bc7c,0 4px 0 #08202b,0 5px 7px #0005;color:#fff2d9;padding:0;transition:filter .2s,transform .15s;flex:none}
#jukebox-dialog .jb-play>[data-play-icon]{font-size:18px;font-size:4.1cqw;line-height:1;margin-left:2px;filter:drop-shadow(0 1px 0 #762a22)}
#jukebox-dialog .jb-play:not(:disabled):hover{filter:brightness(1.12)}
#jukebox-dialog .jb-play:not(:disabled):active{transform:translateY(2px);box-shadow:0 0 0 1px #6c765f,inset 0 0 0 1px #f7bc7c,0 2px 0 #08202b}
#jukebox-dialog .jb-play:disabled{filter:saturate(.6) brightness(.8);cursor:not-allowed;opacity:.8}
#jukebox-dialog .jb-play-caption{font:700 6px/1.1 DM,Arial,sans-serif;font-size:clamp(6px,1.5cqw,7px);letter-spacing:.11em;margin-top:6px}
#jukebox-dialog .jb-speaker{position:absolute;left:17%;right:17%;top:84%;height:6.6%;border:3px solid #a78b55;border-radius:40%;background-color:#173744;background-image:repeating-linear-gradient(45deg,transparent 0 3px,#d3bd8659 3px 4px,transparent 4px 7px),repeating-linear-gradient(-45deg,transparent 0 3px,#d3bd8659 3px 4px,transparent 4px 7px);box-shadow:inset 0 0 9px #000b,0 0 0 1px #e7c98a66;z-index:5;display:flex;align-items:center;justify-content:center}
#jukebox-dialog .jb-speaker-medallion{width:23%;height:79%;border-radius:50%;border:1px solid #e2c896;background:linear-gradient(#bfac72,#7b693e);box-shadow:0 2px 3px #0004;display:flex;align-items:center;justify-content:center;gap:7%;padding:3%}
#jukebox-dialog .jb-speaker-medallion i{width:7%;height:40%;background:#133b57;border-radius:30%}
#jukebox-dialog .jb-speaker-medallion i:nth-child(2){height:80%}
#jukebox-dialog .jb-source-note{position:absolute;top:91.2%;left:16%;right:16%;z-index:6;color:#d1b482;text-align:center;font:600 5px/1.1 DM,Arial,sans-serif;font-size:clamp(5px,1.35cqw,6px);letter-spacing:.18em;max-width:none}
#jukebox-dialog .jb-bottom-rail{position:absolute;bottom:4.2%;left:3%;right:3%;height:2.8%;border:1px solid #4e675f;border-radius:4px;background:linear-gradient(#6c7c6d,#b5bba0 30%,#d2ceb0 50%,#61756d 80%);box-shadow:0 4px 0 #0a1a20;z-index:6}
#jukebox-dialog .jb-foot{position:absolute;bottom:0;width:19%;height:5%;background:linear-gradient(90deg,#5d6859,#bfc2a3 35%,#c8c7a8 60%,#4d655b);border-radius:0 0 3px 3px;border:1px solid #57675b;box-shadow:inset 0 -4px 0 #36504e,0 3px 0 #051f2a;z-index:5}
#jukebox-dialog .foot-left{left:6%}#jukebox-dialog .foot-right{right:6%}
#jukebox-dialog .jb-mobile-panel{display:none}
/* O atalho mantém a silhueta física da máquina mesmo com a janela fechada. */
.jukebox-dock.jukebox-retro-dock{border:1px solid #d3c09a;background:linear-gradient(120deg,#fff7e8,#e5d7bd);box-shadow:0 3px 0 #a68d62,0 8px 22px #06172355;padding:9px 15px;color:#133b57;gap:11px}
.jukebox-retro-dock .jb-dock-icon{position:relative;width:23px;height:30px;border:2px solid #133b57;border-radius:50% 50% 3px 3px/40% 40% 3px 3px;background:linear-gradient(#de4c2f 0 29%,#f5eee2 30% 44%,#133b57 45%);box-shadow:inset 0 0 0 2px #e3bc7c;flex:none}
.jukebox-retro-dock .jb-dock-icon:before{content:'';position:absolute;top:46%;left:18%;right:18%;height:3px;background:#f5eee2;box-shadow:0 5px 0 #f5eee2}
.jukebox-retro-dock .jb-dock-icon i{position:absolute;left:30%;right:30%;bottom:10%;height:4px;border-radius:50%;background:#de4c2f;box-shadow:0 0 4px #de4c2f66}
.music-playing .jukebox-retro-dock .jb-dock-icon i{box-shadow:0 0 7px #de4c2f}
.music-playing #jukebox-dialog .jb-arch-light{box-shadow:0 0 15px #ef9b4670,inset 0 0 8px #fff2ce,0 0 0 3px #832e22}
#jukebox-dialog button:focus-visible{outline:2px solid #fff2cd;outline-offset:4px}
#jukebox-dialog .jb-song-key:focus-visible{outline-color:#ffdda0;outline-offset:1px;z-index:3}
@media(min-width:1500px){#jukebox-dialog .jb-experience{gap:65px;padding-right:55px}#jukebox-dialog .jb-machine{width:470px}#jukebox-dialog .jb-welcome{max-width:390px}}
@media(max-width:900px) and (min-width:701px){#jukebox-dialog .jb-experience{grid-template-columns:minmax(200px,.85fr) minmax(280px,1fr);padding:20px 38px 20px 22px;gap:15px}#jukebox-dialog .jb-welcome h2{font-size:39px}#jukebox-dialog .jb-introduction{font-size:14px}#jukebox-dialog .jb-machine{min-width:280px}#jukebox-dialog .jb-enter{min-width:200px;font-size:12px}}
@media(max-width:700px){
 #jukebox-dialog{width:100%;max-width:100%;max-height:100svh;height:100svh;margin:0;background:radial-gradient(ellipse at 50% 45%,#173e4e,#061e2c 80%);border-radius:0}
 #jukebox-dialog .jb-experience{display:flex;flex-direction:column;align-items:center;gap:0;padding:19px 15px 25px;min-height:100%;}
 #jukebox-dialog .jb-experience:before{display:none}
 #jukebox-dialog .jb-close{position:fixed;right:13px;top:13px;width:32px;height:32px;font-size:25px;z-index:20;background:#08222edd}
 #jukebox-dialog .jb-welcome{display:contents;padding:0;max-width:none}
 #jukebox-dialog .jb-eyebrow{order:0;align-self:flex-start;font-size:8px;letter-spacing:.12em;margin:0 44px 0 3px}
 #jukebox-dialog .jb-eyebrow>span{width:18px}
 #jukebox-dialog .jb-welcome h2{order:1;align-self:flex-start;font-size:30px;line-height:1.05;margin:13px 40px 0 3px;letter-spacing:-.045em}
 #jukebox-dialog .jb-welcome h2 br{display:none}
 #jukebox-dialog .jb-introduction{order:2;align-self:flex-start;font-size:11px;line-height:1.5;max-width:35ch;margin:9px 3px 13px;color:#f5eee2b5}
 #jukebox-dialog .jb-introduction br{display:none}
 #jukebox-dialog .jb-welcome-rule,#jukebox-dialog .jb-collection{display:none}
 #jukebox-dialog .jb-machine-wrap{order:3;width:100%;padding-bottom:0}
 #jukebox-dialog .jb-machine{width:min(345px,91vw);min-width:0;filter:drop-shadow(7px 10px 11px #0005)}
 #jukebox-dialog .jb-floor-shadow{height:5%;bottom:-1%;left:7%;right:7%}
 #jukebox-dialog .jb-mobile-panel{order:4;display:block;max-width:340px;width:100%;margin:18px auto 0;padding:14px 15px 7px;border:1px solid #c4a57466;border-radius:5px;background:linear-gradient(120deg,#234656aa,#102c3dcc);box-shadow:inset 0 1px 0 #f5eee209,0 5px 12px #0002}
 #jukebox-dialog .jb-mobile-picker{display:flex;flex-direction:column;gap:8px}
 #jukebox-dialog .jb-mobile-picker>span{font:750 10px/1.4 DM,Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#dec69a}
 #jukebox-dialog .jb-mobile-picker select{display:block;width:100%;max-width:100%;height:46px;min-height:46px;border:1px solid #c4a574;border-radius:3px;padding:0 30px 0 10px;font:650 12px/1.4 DM,Arial,sans-serif;color:#133b57;background:#f5eee2;cursor:pointer;box-shadow:0 2px 0 #94784a}
 #jukebox-dialog .jb-mobile-picker select:focus-visible{outline:2px solid #ffdda0;outline-offset:4px}
 #jukebox-dialog .jb-mobile-transport{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:15px}
 #jukebox-dialog .jb-mobile-skip{display:grid;place-items:center;min-width:44px;min-height:44px;width:44px;height:44px;border:1px solid #a7af98;border-radius:5px;background:linear-gradient(#e7dec6,#80988e);color:#17394a;font:700 33px/1 Georgia,serif;padding:0;box-shadow:0 3px 0 #061f2d}
 #jukebox-dialog .jb-mobile-skip>span{transform:translateY(-2px)}
 #jukebox-dialog .jb-mobile-play{display:flex;align-items:center;justify-content:center;gap:9px;min-width:114px;min-height:46px;border:2px solid #d2c6a0;border-radius:24px;background:linear-gradient(#ed7147,#de4c2f 52%,#b33a23);box-shadow:inset 0 1px 0 #ffcf9966,0 3px 0 #08202b;color:#fff2d9;font:800 11px/1.2 DM,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
 #jukebox-dialog .jb-mobile-play>[data-play-icon]{font-size:16px;letter-spacing:0}
 #jukebox-dialog .jb-mobile-play:disabled{filter:saturate(.6) brightness(.8);opacity:.8;cursor:not-allowed}
 #jukebox-dialog .jb-mobile-volume{display:flex;align-items:center;gap:14px;min-height:44px;margin-top:6px;font:650 10px/1.3 DM,Arial,sans-serif;color:#d5c29e;letter-spacing:.04em}
 #jukebox-dialog .jb-mobile-volume input{display:block;min-height:44px;height:44px;min-width:0;flex:1;margin:0;accent-color:#de4c2f;cursor:ew-resize;touch-action:pan-y}
 #jukebox-dialog .jb-status{order:5;min-height:0;max-width:340px;width:100%;align-self:center;font-size:11px;line-height:1.5;margin:20px 0 0;padding-left:10px}
 #jukebox-dialog .jb-actions{order:6;display:flex;flex-direction:column;align-items:center;gap:15px;width:100%;margin-top:18px}
 #jukebox-dialog .jb-enter{width:100%;max-width:340px;min-width:0;padding:13px 17px;font-size:12px;min-height:45px}
 #jukebox-dialog .jb-silent{align-self:center;font-size:11px}
 #jukebox-dialog .jb-credit{order:7;font-size:9px;max-width:340px;width:100%}
 #jukebox-dialog .jb-key-paper strong{font-size:10px;max-width:72%}
 #jukebox-dialog .jb-key-paper small{font-size:6px}
 .jukebox-dock.jukebox-retro-dock{right:14px;bottom:15px;padding:8px 12px}
}
@media(max-width:700px) and (max-height:740px){
 #jukebox-dialog .jb-experience{padding-top:17px}
 #jukebox-dialog .jb-welcome h2{font-size:28px;margin-top:10px}
 #jukebox-dialog .jb-introduction{font-size:10px;max-width:36ch;margin-bottom:9px}
 #jukebox-dialog .jb-machine{width:min(315px,88vw)}
 #jukebox-dialog .jb-status{margin-top:17px}
}
@media(prefers-reduced-motion:reduce){#jukebox-dialog *,#jukebox-dialog *:before,#jukebox-dialog *:after{transition:none!important;animation:none!important}}
body.reduce-motion #jukebox-dialog *,body.reduce-motion #jukebox-dialog *:before,body.reduce-motion #jukebox-dialog *:after{transition:none!important;animation:none!important}