
.website-home{position:fixed;left:12px;top:12px;z-index:9;color:#d5bd79;font-size:11px;text-decoration:none}.rail{padding-top:42px;overflow-y:auto}.rail .mark{margin-bottom:10px}#content{padding-top:24px}.topline{gap:12px;flex-wrap:wrap}.edition{font-size:10px}.dock{max-height:calc(100vh - 48px);overflow-y:auto}.row{overscroll-behavior-x:contain}.search-keyboard{display:none}.search-box{width:100%;font:inherit;color:#eee;background:#14251b;border:1px solid #6d775c;border-radius:8px;padding:16px}.tv-control:focus:not(:focus-visible){outline:0;box-shadow:none;transform:none}.tv-control:focus-visible{outline:2px solid #edc878;outline-offset:3px}.artist-track-list{max-height:none!important}.tile:hover{border-color:#dbbb74}.track:hover{background:#253b2a}
@media(max-width:1100px){#content{padding:25px 365px 70px 25px;margin-left:88px}.rail{width:88px}.nav button{width:70px}.dock{width:320px;right:16px}.brand{font-size:18px}.hero-art{width:30%}.hero-copy{padding:20px}.track-list{grid-template-columns:1fr}.dock-head{flex-wrap:wrap}}
@media(max-width:760px){body{overflow:auto}.website-home{position:absolute;top:12px;left:16px}.rail{position:relative;width:100%;height:auto;flex-direction:row;padding:40px 12px 8px;border-right:0;overflow:visible}.rail .mark{display:none}.nav{flex-direction:row;overflow-x:auto;width:100%;padding:5px;gap:4px}.nav button{flex:0 0 70px;min-height:52px}.nav .symbol{font-size:17px}.nav-label{font-size:9px}#content{margin:0;height:auto;overflow:visible;padding:20px 16px 25px}.topline{margin-bottom:18px}.edition{display:none}.hero{min-height:190px}.hero-copy h1{font-size:28px}.hero-copy p{font-size:14px}.hero-art{width:28%}.dock{position:sticky;bottom:0;right:auto;width:100%;max-height:none;border-radius:16px 16px 0 0;padding:10px 14px;box-shadow:0 -10px 35px #0009}.dock #youtube-player{width:200px;min-height:112px;float:left;margin:0 12px 8px 0}.dock-footer{min-height:112px}.play-meta strong{font-size:14px}.transport{flex-wrap:wrap}.transport button{padding:7px;font-size:11px}.dock-head{margin-bottom:8px}.dock-head span{font-size:9px}.shuffle-bar{clear:both}.lyrics-scroll{max-height:120px}.tile{flex:0 0 165px}.artist-head{gap:15px}.hero-cover{width:110px;height:140px}.track-list{grid-template-columns:1fr}body.cinema .dock #youtube-player{float:none;margin:0;width:100%;min-height:0}body.cinema .dock-footer{min-height:0}body.cinema .rail{display:none}.now-cover{width:100%;max-width:350px}.brand{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Replace the TV viewport sizing with a browser layout. */
.rail{top:0;bottom:0;left:0;width:88px;padding:44px 8px 15px;background:#0b140e;gap:12px}.rail .mark{width:42px;height:42px}.nav button{width:70px;height:auto;min-height:48px;font-size:9px}.nav button .symbol{font-size:18px;line-height:22px}#content{margin-left:88px;width:calc(100% - 88px);padding:28px 405px 60px 30px}.topline{height:auto;min-height:32px;margin-bottom:22px}.cta{padding:11px 15px;font-size:13px}.track{min-height:48px;padding:8px}.track .source{font-size:11px}.dock{width:350px;right:22px;bottom:22px}.dock-head button{font-size:11px;padding:7px}.transport button{font-size:12px;padding:9px 4px}.track-add,.track-remove,.favorite-star{min-height:40px}.tile strong{font-size:15px}.tile small{font-size:11px}.hero{height:auto;min-height:200px}.hero-panel{min-height:200px}.hero-copy{padding:20px}
@media(max-width:1100px) and (min-width:761px){#content{padding-right:355px;padding-left:22px}.dock{width:310px;right:16px}.topline .edition{display:none}}
@media(max-width:760px){.rail{position:relative;top:auto;bottom:auto;left:auto;width:100%;padding:38px 12px 8px;display:block}.nav{margin:0}.nav button{height:auto;min-height:52px;width:70px}.rail .mark{display:none}#content{margin:0;width:100%;height:auto;overflow:visible;padding:20px 16px 25px}.dock{position:sticky;right:auto;bottom:0;width:100%;padding:10px 12px;max-height:none}.hero-panel{min-height:190px}.hero{min-height:190px}.hero-copy{padding:16px}.topline{margin-bottom:18px}.track{min-height:48px}.dock #youtube-player{width:200px;min-height:113px;float:left}.transport .seek{flex-basis:32px}.transport button{font-size:10px}.dock-head button{padding:5px;font-size:10px}.dock-footer{min-height:120px}body.cinema .dock{position:fixed;width:100%;padding:15px}body.cinema #youtube-player{width:100%;float:none}}
@media(max-width:760px){#content{padding-bottom:440px}.dock{position:fixed;bottom:0;max-height:55vh;overflow-y:auto}.dock #youtube-player{width:100%;min-height:200px;float:none;margin:0}.dock-footer{min-height:0}.transport button{font-size:12px}.play-meta{padding:9px 0}.dock-head{flex-wrap:nowrap}.lyrics-scroll{max-height:120px}body.cinema .dock{max-height:none}body.cinema #youtube-player{min-height:0}}

/* 3.6.01: mobile browsing uses the document scroll, without TV focus layers. */
#mobile-player-toggle{display:none}
@media(max-width:760px){
 html{height:auto;overflow-y:auto;overflow-x:hidden;touch-action:pan-y}
 body:not(.cinema){height:auto;min-height:100dvh;overflow:visible;}
 body:not(.cinema) #content{height:auto;min-height:0;max-height:none;overflow:visible;padding-bottom:160px;}
 body:not(.cinema) .rail{position:relative;inset:auto;height:auto;}
 body:not(.cinema) .dock{position:fixed;inset:auto 0 0;width:100%;height:auto;max-height:none;overflow:visible;z-index:30;padding:8px 12px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -5px 24px #0008;}
 body:not(.cinema) #mobile-player-toggle{display:block;margin-right:auto;min-height:36px;font-size:12px;}
 body:not(.cinema) .dock-head{margin:0 0 4px;min-height:36px;}
 body:not(.cinema) .dock-head>span,body:not(.cinema) #lyrics-toggle,body:not(.cinema) #cinema-toggle,body:not(.cinema) #favorite-current{display:none;}
 body:not(.cinema) .dock #youtube-player,body:not(.cinema) .dock .shuffle-bar,body:not(.cinema) .dock .lyrics-panel,body:not(.cinema) .dock #status{display:none;}
 body:not(.cinema) .dock-footer{display:flex;align-items:center;gap:12px;min-height:44px;}
 body:not(.cinema) .play-meta{flex:1;min-width:0;padding:0;}
 body:not(.cinema) .play-meta strong{font-size:13px;line-height:1.3;}
 body:not(.cinema) .play-meta small{font-size:11px;margin-top:3px;}
 body:not(.cinema) .transport{flex:0 0 118px;flex-wrap:nowrap;}
 body:not(.cinema) .transport .seek{display:none;}
 body:not(.cinema) .transport button{min-height:40px;padding:7px 5px;font-size:12px;}
 body:not(.cinema) .dock .player-recovery{min-height:0;margin:0;}
 body:not(.cinema) .dock.mobile-expanded{max-height:75dvh;overflow-y:auto;}
 body:not(.cinema) .dock.mobile-expanded #youtube-player{display:block;width:100%;height:auto;min-height:200px;aspect-ratio:16/9;float:none;}
 body:not(.cinema) .dock.mobile-expanded .shuffle-bar{display:flex;}
 body:not(.cinema) .dock.mobile-expanded #status{display:block;}
 body:not(.cinema) .dock.mobile-expanded #cinema-toggle,body:not(.cinema) .dock.mobile-expanded #lyrics-toggle{display:block;}
 body:not(.cinema) .dock.mobile-expanded .lyrics-panel{display:flex;}
 body:not(.cinema) .dock.mobile-expanded.lyrics-hidden .lyrics-panel{display:none;}
 body:not(.cinema) .dock.mobile-expanded .dock-footer{margin:10px 0;}
 .tv-control.focused{outline:none!important;box-shadow:none!important;transform:none!important;position:static!important;z-index:auto!important;}
 .tv-control:focus:not(:focus-visible){outline:none!important;box-shadow:none!important;transform:none!important;position:static!important;z-index:auto!important;}
 .tv-control:focus-visible{outline:2px solid #edc878;outline-offset:2px;}
 .row{touch-action:pan-x pan-y;}
 .dock-head{gap:6px;flex-wrap:wrap;}
}
/* 3.6.02: balanced desktop columns and a player that hugs its content. */
.dock.lyrics-hidden .lyrics-panel,.lyrics-panel[hidden]{display:none!important;}
@media(min-width:761px){
 :root{--web-player-width:calc((100vw - 136px)*.49);}
 body:not(.cinema) #content{margin-left:88px;width:calc(100% - 88px);height:100dvh;overflow-y:auto;padding:28px calc(var(--web-player-width) + 48px) 55px 24px;}
 body:not(.cinema) .dock{inset:24px 24px auto auto;width:var(--web-player-width);height:auto;max-height:calc(100dvh - 48px);overflow-y:auto;padding:14px;display:flex;flex-direction:column;}
 body:not(.cinema) .dock.lyrics-hidden{height:auto;bottom:auto;}
 body:not(.cinema) .dock:not(.lyrics-hidden){height:auto;bottom:auto;}
 body:not(.cinema) #youtube-player{width:100%;max-width:none;aspect-ratio:16/9;height:auto;min-height:200px;align-self:stretch;}
 body:not(.cinema) .dock-head{height:auto;min-height:36px;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
 body:not(.cinema) .dock-head button{font-size:12px;padding:8px 10px;}
 body:not(.cinema) .dock-head #lyrics-toggle{font-size:12px;padding:8px 10px;}
 body:not(.cinema) .play-meta strong{font-size:20px;}
 body:not(.cinema) .play-meta small{font-size:12px;line-height:1.5;}
 body:not(.cinema) .transport button{min-height:44px;font-size:14px;}
 body:not(.cinema) .shuffle-bar button{min-height:36px;font-size:12px;}
 body:not(.cinema) .lyrics-panel{flex:0 0 auto;min-height:0;max-height:26dvh;}
 body:not(.cinema) .lyrics-scroll{max-height:22dvh;flex:1;}
 .track-list{grid-template-columns:1fr;}
 .topline .edition{display:none;}
 .hero-copy h1{font-size:28px;}
 .hero{height:220px;min-height:220px;}
 .hero-panel{height:220px;min-height:220px;}
 .hero-art{object-fit:cover;width:36%;}
 .tv-control.focused{z-index:auto;}
}
/* 3.6.03: use the catalogue space and stop accidental pull-to-refresh. */
html,body{overscroll-behavior-y:none;}
#content{overscroll-behavior-y:contain;}
@media(min-width:761px){
 .tile{flex:0 0 210px;width:210px;}
 .tile strong{font-size:17px;line-height:1.35;}
 .tile small{font-size:12px;}
 .track{min-height:62px;padding:10px 12px;}
 .track .title{font-size:16px;}
 .track .source{font-size:12px;margin-top:4px;}
 .track .number,.track .time{font-size:12px;}
 .track-add,.track-remove,.favorite-star{min-height:48px;min-width:36px;}
 h2{font-size:22px;margin:24px 0 12px;}
 .row{gap:14px;padding-bottom:18px;}
 .artist-head{min-height:175px;padding:15px;}
 .hero-cover{width:120px;height:150px;}
 .now-cover{width:min(65%,380px);}
 .track-thumb{width:62px;height:45px;}
}

#website-frame{width:100%;height:calc(100vh - 45px);min-height:600px;border:0;background:#0a100e}.track-description{white-space:pre-wrap}.lyrics-head button[hidden]{display:none}.search-box{font-size:18px;touch-action:manipulation}@media(max-width:760px){#website-frame{height:calc(100dvh - 180px);min-height:350px}}

/* 3.6.12: fullscreen must not inherit the normal dock height limit. */
body.cinema{height:100dvh;overflow:hidden;}
body.cinema .dock{position:fixed;inset:0;width:100%;height:100dvh;max-height:none;min-height:0;overflow:hidden;border:0;border-radius:0;padding:0;}
body.cinema .dock #youtube-player{inset:0;margin:0;float:none;width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;}
body.cinema .dock-footer{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom));}
body.cinema .dock-head{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));}
body.cinema #mobile-player-toggle{display:none;}
@supports not(height:100dvh){body.cinema,body.cinema .dock{height:100vh;}}

.video-volume-control{display:flex;align-items:center;gap:9px;color:#d9c99b;font-size:12px;margin:8px 0}.video-volume-control input{width:130px;accent-color:#e0ba70}.video-volume-control output{min-width:35px}body.cinema .video-volume-control{display:none}@media(max-width:760px){body:not(.cinema) .dock:not(.mobile-expanded) .video-volume-control{display:none}.dock.mobile-expanded .dock-footer{flex-wrap:wrap}.video-volume-control{flex-basis:100%}}

/* 3.6.12: close the player and return all viewport space to the website. */
#close-player{min-width:36px;min-height:36px;flex-shrink:0;}
body.player-closed{height:100dvh;overflow:hidden;}
body.player-closed #dock,body.player-closed .rail,body.player-closed .website-home,body.player-closed .topline{display:none!important;}
body.player-closed #content{position:fixed;inset:0;margin:0;width:100%;height:100dvh;min-height:0;padding:0;overflow:hidden;}
body.player-closed #screen{margin:0;padding:0;width:100%;height:100%;}
body.player-closed #website-frame{display:block;width:100%;height:100%;min-height:0;border:0;}
