.joe{--ink:#eef5ff;--panel:#142a46;--accent:#ffcf4c;background:#08192f;color:var(--ink);padding:clamp(1rem,3vw,2.5rem);font:1rem/1.55 system-ui,sans-serif;border-radius:1rem;max-width:90rem;margin:auto}.joe *{box-sizing:border-box}.joe h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.2;margin:.4rem 0}.joe h2{font-size:1.25rem;margin:0 0 .4rem}.joe h3{font-size:1.1rem}.joe-brand{color:var(--accent);letter-spacing:.12em;font-weight:800}.joe a{color:var(--accent);display:inline-block;margin-right:1rem}.joe button,.joe input,.joe select{font:inherit;border:1px solid #7797bd;border-radius:.4rem;padding:.55rem .75rem}.joe button{background:var(--accent);color:#08192f;font-weight:700;cursor:pointer}.joe button:hover{background:#ffe18d}.joe :focus-visible{outline:3px solid #fff;outline-offset:3px}.joe-filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1rem;margin:1.5rem 0}.joe label{display:grid;gap:.3rem}.joe input,.joe select{min-width:0;width:100%;background:white;color:#08192f}.joe-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(15rem,1fr);gap:1.5rem}.joe-card{display:flex;gap:1rem;background:var(--panel);border:1px solid #526f94;padding:1.1rem;margin-bottom:1rem;border-radius:.6rem}.joe-card p{font-size:.9rem}.joe-card img{width:6rem;height:6rem;object-fit:cover;border-radius:.4rem}.joe-actions{display:flex;flex-wrap:wrap;gap:.5rem}.joe aside{background:var(--panel);padding:1rem;border-radius:.6rem;align-self:start}.joe ol{padding-left:1.5rem}.joe li{margin:.8rem 0}.joe li button{font-size:.9rem;margin:.2rem}.joe-player{position:sticky;bottom:0;background:#203e61;border:1px solid #a1bddc;padding:1rem;border-radius:.6rem;z-index:2;margin-top:1rem}.joe audio{display:block;width:100%;margin:.6rem 0}.joe-access{padding:.75rem;background:var(--panel);border-left:4px solid var(--accent);margin-top:1rem}.joe-text{white-space:pre-wrap}.joe [data-details]{margin-top:1.5rem;overflow-wrap:anywhere}@media(max-width:800px){.joe-filters{grid-template-columns:1fr 1fr}.joe-layout{grid-template-columns:1fr}}@media(max-width:450px){.joe-filters{grid-template-columns:1fr}.joe-card img{width:4rem;height:4rem}.joe-card{padding:.8rem}.joe-player{position:static}}

/* Compact controls with comfortable spacing on smaller screens. */
.joe button{font-size:.85rem;line-height:1.25;padding:.35rem .6rem;min-height:36px;border-radius:.35rem}
.joe-actions{gap:.5rem}
.joe li button{font-size:.85rem;margin:.2rem .25rem .2rem 0}
.joe aside>button{margin:0 .35rem .4rem 0}
.joe-player>button{margin:.15rem .35rem 0 0}
@media(max-width:450px){.joe button{font-size:.8rem;padding:.3rem .55rem;min-height:36px}.joe-card{gap:.65rem}.joe-player{padding:.75rem}}

.joe-view-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .75rem}
.joe [hidden]{display:none!important}
.joe-layout:has(>aside[hidden]),.joe-layout:has(>div[hidden]){grid-template-columns:1fr}
.joe-layout:has(>div[hidden]):has(>aside[hidden]){display:none}

.joe-ambience{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;min-height:12rem;background:#031225;border-radius:.6rem}
.joe-ambience:before,.joe-ambience:after{content:'';position:absolute;inset:-40%;background:radial-gradient(ellipse at 25% 35%,#00cfff,transparent 40%),radial-gradient(ellipse at 75% 65%,#ffae00,transparent 40%),radial-gradient(ellipse at 65% 20%,#ba35ff,transparent 38%);opacity:.85;animation:joe-ambience-drift 18s ease-in-out infinite alternate paused}
.joe-ambience:after{animation-delay:-9s;opacity:.5}
.joe-ambience.is-playing:before,.joe-ambience.is-playing:after{animation-play-state:running}
.joe-ambience:fullscreen{width:100vw;height:100vh;border-radius:0;aspect-ratio:auto}
@keyframes joe-ambience-drift{from{transform:translate(-6%,-4%) rotate(0deg)}to{transform:translate(8%,6%) rotate(80deg)}}
@media(prefers-reduced-motion:reduce){.joe-ambience:before,.joe-ambience:after{animation:none}}

.joe-view-controls:has(select){align-items:center}

.joe-ambience.joe-immersive{position:fixed;inset:0;width:100vw;height:100dvh;z-index:100000;aspect-ratio:auto;border-radius:0}.joe-ambience>button{position:absolute;right:1rem;top:1rem;z-index:2}.joe-ambience:before,.joe-ambience:after{pointer-events:none}.joe-ambience.joe-blank{background:#000}.joe-ambience.joe-blank:before,.joe-ambience.joe-blank:after{display:none}

.joe-saved-playlists{border-bottom:1px solid #526f94;padding-bottom:.65rem;margin-bottom:.65rem}.joe-saved-playlists input,.joe-saved-playlists select{font-size:.85rem;padding:.4rem;margin-bottom:.5rem}.joe-saved-playlists button{margin:0 .4rem .5rem 0}.joe-saved-playlists p{font-size:.85rem}

.joe-ambience.joe-reactive:before,.joe-ambience.joe-reactive:after{opacity:calc(.3 + var(--joe-energy,0)*.7);filter:brightness(calc(.65 + var(--joe-energy,0)*1.1))}.joe-ambience.joe-reactive{box-shadow:inset 0 0 calc(20px + var(--joe-energy,0)*80px) rgba(0,205,255,.4)}@media(prefers-reduced-motion:reduce){.joe-ambience.joe-reactive:before,.joe-ambience.joe-reactive:after{opacity:.65;filter:none}.joe-ambience.joe-reactive{box-shadow:none}}

.joe-view-controls>label{min-width:0;max-width:100%;flex:1 1 12rem}.joe-view-controls select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}.joe-view-controls{max-width:100%;min-width:0}.joe-view-controls>button{flex:0 0 auto}.joe-ambience{max-width:100%}@media(max-width:450px){.joe-view-controls>label{flex-basis:100%}.joe-view-controls select{font-size:.85rem}}

.joe-ambience.joe-lyrics-mode{background:#071322;color:#f7e6aa;height:22rem}
.joe-ambience.joe-lyrics-mode:before,.joe-ambience.joe-lyrics-mode:after{display:none}
.joe-lyric-window{position:absolute;inset:12% 0;overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.joe-lyrics-scroll{box-sizing:border-box;width:min(34rem,84%);margin:0 auto;padding-top:8vh;white-space:pre-line;text-align:left;font-size:clamp(1.05rem,2.4vw,1.8rem);line-height:1.65;will-change:transform}
.joe-ambience.joe-lyrics-mode.joe-immersive{height:100dvh}
@media(max-width:450px){.joe-lyrics-scroll{width:86%;font-size:1.1rem;line-height:1.7}}

.joe .joe-lyrics-title{font-size:1.25em;line-height:1.3;margin:0 0 .5em;color:inherit}.joe .joe-lyrics-credit{font-size:.65em;margin:0 0 2em;color:inherit}.joe-lyrics-body{white-space:pre-line}

.joe-lyrics-scroll{position:relative;transition:transform .45s ease-out;padding-top:1rem}.joe-lyrics-cue{white-space:pre-line;margin:0 0 .75em}.joe .joe-lyrics-title{white-space:normal}.joe .joe-lyrics-credit{white-space:pre-line}.joe-lyric-window{inset:8% 0}
@media(prefers-reduced-motion:reduce){.joe-lyrics-scroll{transition:none}}

.joe-lyrics-scroll{transition:none}

.joe .joe-lyrics-title{font-size:1.75em;font-weight:800;line-height:1.2}

/* Use available screen width at every lyric size. */
.joe-lyric-window .joe-lyrics-scroll{width:calc(100% - 32px)!important;max-width:calc(100% - 32px)!important;min-width:0!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box;}
.joe-lyric-window .joe-lyrics-cue{white-space:normal;overflow-wrap:break-word;}

.joe .joe-lyric-window .joe-lyrics-title{font-size:1.9em!important;font-weight:800;line-height:1.2}

/* Stable lyric geometry: only vertical translation and color change during playback. */
.joe-lyric-window{min-width:0;overflow-x:hidden}.joe-lyric-window .joe-lyrics-cue{width:100%;box-sizing:border-box;font-weight:400!important}.joe-lyric-window .joe-lyrics-cue.joe-singing{font-weight:400!important}

/* Complete intro and synchronized controls in fullscreen. */
.joe-ambience.joe-immersive .joe-lyric-window,.joe-ambience:fullscreen .joe-lyric-window{inset:76px 24px 180px!important;mask-image:none!important}
.joe-lyrics-photo{display:block;width:90%;max-width:760px;height:280px;object-fit:contain;border-radius:10px;margin:0 auto 12px}
.joe-lyrics-photo-source{display:block!important;width:100%;text-align:center;font:600 16px/1.4 system-ui,sans-serif;color:#ffd54f!important;margin:0 0 20px!important}
.joe-lyrics-scroll:has(.joe-lyrics-photo) .joe-lyrics-credit{font-size:16px!important;line-height:1.4!important}
.joe-ambience:fullscreen .jbo-practice-bar,.joe-ambience.joe-immersive .jbo-practice-bar{position:absolute!important;bottom:24px!important;left:50%!important;transform:translateX(-50%)!important;width:min(760px,calc(100% - 48px))!important;z-index:110!important;margin:0!important}
@media(max-width:600px){.joe-ambience.joe-immersive .joe-lyric-window,.joe-ambience:fullscreen .joe-lyric-window{inset:76px 12px 220px!important}.joe-ambience .jbo-practice-bar{width:calc(100% - 24px)!important}}

/* One compact control row, using the existing audio element. */
.joe-ambience.joe-immersive .jbo-practice-bar,.joe-ambience:fullscreen .jbo-practice-bar{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:10px!important}
.joe-ambience .jbo-practice-bar>button{flex:0 0 auto;white-space:nowrap}
.joe-ambience.joe-immersive .jbo-practice-bar>audio,.joe-ambience:fullscreen .jbo-practice-bar>audio{order:10!important;flex:1 1 100%!important;width:100%!important;min-width:220px!important;margin:0!important}
.joe-ambience .jbo-practice-bar .joe-lyric-size-controls{position:static!important;transform:none!important;flex:0 0 auto!important;padding:0!important;background:transparent!important;display:flex!important;gap:6px!important}
@media(max-width:900px){.joe-ambience.joe-immersive .jbo-practice-bar,.joe-ambience:fullscreen .jbo-practice-bar{flex-wrap:wrap!important}.joe-ambience.joe-immersive .jbo-practice-bar>audio,.joe-ambience:fullscreen .jbo-practice-bar>audio{order:10!important;flex-basis:100%!important}.joe-ambience.joe-immersive .joe-lyric-window,.joe-ambience:fullscreen .joe-lyric-window{bottom:170px!important}}
/* Keep the tribute introduction entirely visible on phone screens. */
@media(max-width:600px){
.joe .joe-lyric-window .joe-lyrics-title{font-size:clamp(24px,6vw,32px)!important;line-height:1.15!important}
.joe-lyrics-scroll:has(.joe-lyrics-photo) .joe-lyrics-credit{font-size:14px!important;line-height:1.2!important}
.joe-lyrics-photo-source{font-size:12px!important;line-height:1.25!important;margin-bottom:12px!important}
.joe-ambience .jbo-practice-bar{gap:4px!important;padding:6px!important}
.joe-ambience .jbo-practice-bar button{font-size:12px!important;padding:5px 7px!important;min-height:32px!important}
.joe-ambience .jbo-practice-bar .joe-lyric-size-controls{gap:4px!important}
}

@media(max-width:600px){.joe-lyrics-tribute-label{font-size:16px!important;line-height:1.2!important}.joe-ambience>.joe-lyric-choice{font-size:12px!important;padding:4px!important}.joe-ambience>.joe-lyric-choice select{font-size:12px!important;padding:4px!important;max-width:180px!important;min-height:32px!important}}

/* Anchor playback controls to the viewport throughout fullscreen playback. */
.joe-ambience.joe-immersive .jbo-practice-bar,.joe-ambience:fullscreen .jbo-practice-bar{position:fixed!important;top:auto!important;bottom:max(16px,env(safe-area-inset-bottom))!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;z-index:110!important}