#music .sectionTop{position:relative;align-items:center;gap:24px}
#music .sectionIcon{display:none}
#music .sectionTop>div:first-child{flex:1}
.jukeboxStage{display:flex;align-items:center;justify-content:center;gap:14px;flex:1.4;min-width:0;color:#dfbd8b}
.jukeboxArt{display:block;width:210px;max-width:50%;height:auto;flex-shrink:0;overflow:visible}
.jukeboxCaption{max-width:200px;min-width:0}
.jukeboxName{font-family:Georgia,serif;font-size:21px;color:#ecd7b6}
.section .jukeboxStatus{font-size:12px;line-height:1.6;color:#c6b49c;overflow-wrap:anywhere;margin:10px 0}
.jukeboxPause{padding:7px 10px;color:#c9dded;border:1px solid #6d7e84;background:#18211f;border-radius:4px;font-size:11px;cursor:pointer}
.jbArm{transform-origin:150px 98px;transform-box:view-box}
.jbCarried,.jbLoaded{opacity:0}
.jbLights{color:#daaa6c}
.isSelecting .jbArm{animation:jbLoad 2.6s ease-in-out both}
.isSelecting .jbCarried{animation:jbCarry 2.6s linear both}
.isSelecting .jbLoaded{animation:jbAppear 2.6s linear both}
.isSelecting .jbSpin{transform-origin:187px 166px;transform-box:view-box;animation:jbTurn 4s linear 1.7s infinite}
.isSelecting .jbLights{animation:jbColour 9s ease-in-out 2.6s infinite;filter:drop-shadow(0 0 3px currentColor)}
.animationPaused *{animation-play-state:paused!important}
@keyframes jbLoad{0%,10%{transform:rotate(0deg)}55%,72%{transform:rotate(-74deg)}100%{transform:rotate(0deg)}}
@keyframes jbCarry{0%,8%{opacity:0}9%,64%{opacity:1}65%,100%{opacity:0}}
@keyframes jbAppear{0%,64%{opacity:0}65%,100%{opacity:1}}
@keyframes jbTurn{to{transform:rotate(360deg)}}
@keyframes jbColour{0%,100%{fill:#e7b56d;color:#e7b56d}25%{fill:#79c5ce;color:#79c5ce}50%{fill:#c8a0da;color:#c8a0da}75%{fill:#d99d90;color:#d99d90}}
@media(max-width:850px){#music .sectionTop{min-height:0;flex-wrap:wrap}.jukeboxStage{flex:1}.jukeboxArt{width:155px}.jukeboxName{font-size:18px}}
@media(max-width:600px){#music .sectionTop>div:first-child{flex-basis:100%}.jukeboxStage{flex-basis:100%;justify-content:center}.jukeboxArt{width:150px;max-width:45%}.jukeboxCaption{max-width:175px}.jukeboxName{font-size:20px}}
@media(prefers-reduced-motion:reduce){.jukeboxStage *{animation:none!important}.isSelecting .jbLoaded{opacity:1}.isSelecting .jbLights{fill:#87c4c7;color:#87c4c7}.jukeboxPause{display:none}}
@media(min-width:851px){#music .sectionTop>div:first-child{flex:0 1 32%}.jukeboxStage{flex:0 0 250px;flex-direction:column;gap:0}.jukeboxArt{width:170px;max-width:100%}.jukeboxCaption{max-width:250px;text-align:center}.jukeboxName{font-size:18px}.section .jukeboxStatus{margin:5px 0 8px}#music .sectionTop{padding-top:0;padding-bottom:22px}}
/* Selected-song player area: the jukebox and player occupy separate columns. */
#music .sectionTop{min-height:0}#music .sectionTop>div:first-child{flex:1}
.track:has(.trackMediaArea){flex-wrap:wrap}
.trackMediaArea{flex:0 0 100%;width:100%;min-width:0;display:grid;grid-template-columns:minmax(200px,1fr) minmax(280px,1.15fr);gap:24px;align-items:center;margin-top:14px;padding-top:22px;border-top:1px solid #76563466}
.trackMediaArea .jukeboxStage{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;width:100%;flex:auto}
.trackMediaArea .jukeboxArt{width:270px;max-width:100%;filter:drop-shadow(0 12px 12px #0006)}
.trackMediaArea .jukeboxCaption{max-width:280px;text-align:center}
.trackMediaArea .jukeboxName{font-size:19px}
.track .jukeboxPause{width:auto;height:auto;border-radius:4px;padding:8px 12px;font-size:12px;line-height:1.4}
.trackMediaArea #musicDock{position:static;inset:auto;width:100%;max-width:100%;max-height:none;margin:0;box-sizing:border-box;z-index:auto;box-shadow:none;background:#151411;border-color:#65482d;overflow:hidden}
.trackMediaArea #musicDock iframe{max-width:100%;display:block}
.trackMediaArea #musicDock .dockYouTube{height:auto;aspect-ratio:16/9}
.trackMediaArea #musicDock h3{overflow-wrap:anywhere}
.track #musicDock>button{width:auto;height:auto;border-radius:5px;padding:8px 12px;font-size:13px}
@media(max-width:700px){.trackMediaArea{grid-template-columns:minmax(0,1fr);gap:18px}.trackMediaArea .jukeboxArt{width:220px}.trackMediaArea #musicDock{max-height:none}.trackMediaArea .jukeboxStage{flex-basis:auto}}
.jbRealLights{opacity:0;mix-blend-mode:screen}
.isSelecting .jbRealLights{opacity:.68;filter:drop-shadow(0 0 7px currentColor);animation:jbRGB 9s ease-in-out 2.6s infinite;animation-fill-mode:backwards}
@keyframes jbRGB{0%,100%{fill:#ff2525;color:#ff2525}33%{fill:#20ed55;color:#20ed55}66%{fill:#2873ff;color:#2873ff}}
@media(prefers-reduced-motion:reduce){.isSelecting .jbRealLights{animation:none!important;fill:#6faeff;opacity:.35}}

/* Chasing bulbs follow the cabinet frame; slow fades, no strobe. */
.jbBulb{fill:#64533a;stroke:#d7c5a3;stroke-width:.6;opacity:.35;transform-box:fill-box;transform-origin:center}
.isSelecting .jbBulb{animation:jbBulbChase 3.6s ease-in-out infinite;animation-delay:var(--bulb-delay);fill:var(--bulb-color);filter:drop-shadow(0 0 3px var(--bulb-color)) drop-shadow(0 0 5px var(--bulb-color))}
.jbBulb0{--bulb-color:#ff403a}.jbBulb1{--bulb-color:#45ff70}.jbBulb2{--bulb-color:#4e9dff}
@keyframes jbBulbChase{0%,100%{opacity:.22}35%,55%{opacity:1}80%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.isSelecting .jbBulb{animation:none!important;opacity:.8;fill:var(--bulb-color)}}

/* Six-position pattern advances one bulb counterclockwise per 650 ms. */
.isSelecting .jbBulb{animation-name:jbStepLeft;animation-duration:3.9s;animation-timing-function:steps(1,end);animation-delay:var(--bulb-delay);filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 0 5px currentColor)}
@keyframes jbStepLeft{0%,100%{fill:#ff403a;color:#ff403a;opacity:1}16.6667%{fill:#ff403a;color:#ff403a;opacity:.15}33.3333%{fill:#45ff70;color:#45ff70;opacity:1}50%{fill:#45ff70;color:#45ff70;opacity:.15}66.6667%{fill:#4e9dff;color:#4e9dff;opacity:1}83.3333%{fill:#4e9dff;color:#4e9dff;opacity:.15}}
@media(prefers-reduced-motion:reduce){.isSelecting .jbBulb{animation:none!important;fill:var(--bulb-color);opacity:.8}}
/* Articulated mechanism: movement is coordinated by one pauseable timeline. */
.isSelecting .jbLoaded,.isSelecting .jbSpin{animation:none!important;transform-origin:0 0;transform-box:view-box}
.jbMovingRecord{filter:drop-shadow(1px 3px 2px #0008)}

/* Realism pass: photographic contrast, glass reflections and softer mechanical materials. */
.jukeboxArt{filter:drop-shadow(0 18px 20px #000b) saturate(.78) contrast(1.08)}
.jukeboxArt image{filter:saturate(.82) contrast(1.1) brightness(.92)}
.jbMechanismArm,.jbTonearm{filter:drop-shadow(1px 2px 2px #000b)}
.jbLink{stroke-width:4.2;stroke-opacity:.92}
.jbLinkShadow{stroke-width:7;stroke-opacity:.45}
.jbVinylFace{filter:drop-shadow(0 2px 2px #000c)}
.jbLoaded{filter:drop-shadow(0 2px 3px #000c)}
.jukeboxArt .jbRealLights{mix-blend-mode:screen;opacity:.52}
.jukeboxArt .jbLightString{filter:drop-shadow(0 0 2px currentColor)}

/* Extruded treble clef, rotating around its vertical axis. */
#music .sectionIcon.clefScene{display:grid;place-items:center;width:100px;height:140px;flex:0 0 100px;perspective:650px;overflow:visible}
.clefRotor{position:relative;display:block;width:90px;height:130px;transform-style:preserve-3d;animation:clefRotate 12s linear infinite}
.clefRotor span{position:absolute;inset:0;display:grid;place-items:center;font-family:"Segoe UI Symbol","Noto Music",serif;font-size:112px;line-height:1;color:#795027;transform:translateZ(var(--depth));backface-visibility:visible;text-shadow:0 1px 1px #f9db9b}
.clefRotor span:first-child,.clefRotor span:last-child{color:#dfbd79;text-shadow:1px 1px 0 #fff0c8,-1px -1px 0 #654122,0 3px 4px #0008}
@keyframes clefRotate{from{transform:rotateX(-8deg) rotateY(0deg)}to{transform:rotateX(-8deg) rotateY(360deg)}}
@media(max-width:600px){#music .sectionIcon.clefScene{width:72px;flex-basis:72px;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.clefRotor{animation:none;transform:rotateY(-20deg)}}