/* Desktop player layout: keep transport controls and time aligned in one row across translations. */
@media (min-width: 768px){
.playback-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:.5rem}
.playback-controls .time{grid-column:auto;justify-self:start;align-self:center}
}
/* Shared opaque themes; settings are applied by languages.js. */
:root{--scale:1;--bg:#000;--fg:#fff;--accent:#79b8ff;--control-bg:#000;--control-fg:#fff;font-size:calc(100% * var(--scale));color-scheme:dark;} *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;background:var(--bg);color:var(--fg);} body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.65;overflow-wrap:anywhere;} a{color:var(--accent);text-decoration:underline;border:0;background:var(--bg);} .container{width:100%;max-width:76rem;padding:1.5rem;margin:0 auto;min-width:0;} header,main,footer,section,article,nav,figure,blockquote{min-width:0;background:var(--bg);color:var(--fg);} header nav ul{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;margin:1rem 0;padding:0;list-style:none;} header nav li{margin:0;padding:0;} header nav a{display:inline;font-size:1.05rem;line-height:1.5;padding:0;font-weight:400;} h1{font-size:2.2rem;line-height:1.25;}h2{line-height:1.4;} .name-intro{margin:.25rem 0;text-align:left;} .name-effect{display:inline-block;transform:none;animation:name-settle 1.2s ease-out 1;} @keyframes name-settle{0%{transform:translateX(1rem) rotate(-8deg);}70%{transform:translateX(.1rem) rotate(1deg);}100%{transform:none;}} figure{margin:1rem 0;}img{display:block;max-width:100%;height:auto;object-fit:contain;} #portrait img{width:min(100%,40rem);height:auto;margin:0;} button,input,select,textarea{font:inherit;color:var(--control-fg);background:var(--control-bg);} button{font-weight:700;line-height:1.35;border:.25rem solid var(--fg);padding:.6rem;min-width:2.75rem;min-height:2.75rem;max-width:100%;overflow-wrap:anywhere;cursor:pointer;} button:disabled{cursor:default;} :focus-visible{outline:.2rem dashed var(--fg);outline-offset:.3rem;} a:focus-visible{outline:.2rem dashed var(--fg);outline-offset:.25rem;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;} .skip-link{position:absolute;left:1rem;top:1rem;z-index:100;transform:translateY(-200%);padding:.5rem;} .skip-link:focus{transform:none;} .font-control-region,.display-panel{margin:1.5rem 0;padding:0;background:var(--bg);} .control-btn-group,.control-row,.theme-contrast-controls{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;} .control-btn-group>button,.theme-contrast-controls>button,.control-row>button,.contrast-control,.language-control,.menu-control{width:12rem;max-width:100%;aspect-ratio:1;position:relative;min-width:0;} .contrast-control>button,.language-control>button,.menu-control>button{width:100%;height:100%;} .menu,.language-menu{position:absolute;left:0;top:calc(100% + .4rem);z-index:30;width:22rem;max-width:calc(100vw - 3rem);max-height:65vh;overflow:auto;list-style:none;margin:0;padding:.5rem;background:var(--bg);color:var(--fg);border:.25rem solid var(--fg);} [hidden]{display:none!important;} .menu li,.language-menu li{list-style:none;padding:0;margin:0;} .menu button,.language-menu button{display:block;width:100%;margin:.25rem 0;text-align:left;aspect-ratio:auto;} [role=menuitemradio][aria-checked=true]{text-decoration:underline double;text-underline-offset:.2em;} [role=menuitemradio][aria-checked=true]::before{content:'✓ ';} .covers-page{font-size:1.2rem;} .covers-page .container{max-width:48rem;} .covers-page h1{margin:1.5rem 0 .75rem;}.covers-page h2{font-size:1.65rem;margin:0 0 .5rem;} .cover-player{width:100%;margin:2rem 0;padding:1rem 0;border-bottom:.125rem solid var(--fg);} .wave{width:100%;height:6rem;min-height:80px;position:relative;border:.125rem solid var(--fg);background:var(--bg);} canvas{display:block;width:100%;height:100%;background:var(--bg);} input.seek{display:block;position:relative;width:100%;height:2rem;margin:.5rem 0;accent-color:var(--fg);background:var(--bg);} .playback-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0;} .time{white-space:nowrap;} ::selection{background:var(--fg);color:var(--bg);} @media(max-width:767px){.container{padding:.75rem;}.covers-page .container{padding:.75rem;}header nav a{font-size:1rem;}header nav ul{gap:.45rem;margin:.5rem 0 .75rem;}.control-btn-group,.control-row,.theme-contrast-controls{gap:.6rem;}.control-btn-group>button,.theme-contrast-controls>button,.control-row>button,.contrast-control,.language-control,.menu-control{width:6.5rem;max-width:100%;}.control-btn-group button,.control-row>button,.menu-control>button{font-size:.8rem;}.menu button,.language-menu button{font-size:1rem;}.playback-controls{flex-direction:column;align-items:flex-start;}.playback-controls button{width:100%;}.wave{height:5rem;}.cover-player{margin:1rem 0;padding:.5rem 0;}} @media(prefers-reduced-motion:reduce){.name-effect{animation:none;}} /* Desktop player layout overrides the shared wrapping flex row. */ @media (min-width: 768px){ .playback-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:.5rem;min-height:calc(5.4em + 1.7rem)} .playback-controls .time{grid-column:auto;justify-self:start;align-self:center} }

@media(min-width:768px){.font-control-region .control-btn-group{flex-direction:row;align-items:stretch;gap:.75rem;width:100%}.font-control-region .control-btn-group>.accessible-btn{flex:1 1 0;width:auto;min-width:0;max-width:none;aspect-ratio:1}.font-control-region .control-btn-group>.theme-contrast-controls{display:contents}.font-control-region .control-btn-group>.theme-contrast-controls>.accessible-btn,.font-control-region .control-btn-group>.theme-contrast-controls>.contrast-control,.font-control-region .control-btn-group>.theme-contrast-controls>.language-control{flex:1 1 0;width:auto;min-width:0;max-width:none;aspect-ratio:1}}
@media(max-width:767px){html,body{max-width:100%}body{border:.25rem solid var(--fg);padding:.5rem}.container{width:100%;max-width:100%;padding:.75rem;margin-left:auto;margin-right:auto}.font-control-region .control-btn-group{width:100%;align-items:center;gap:.6rem}.font-control-region .control-btn-group>.accessible-btn,.font-control-region .control-btn-group>.theme-contrast-controls>.accessible-btn,.font-control-region .control-btn-group>.theme-contrast-controls>.contrast-control,.font-control-region .control-btn-group>.theme-contrast-controls>.language-control{box-sizing:border-box;width:min(100%,18rem);max-width:100%;min-height:3.25rem;height:auto;aspect-ratio:auto}.font-control-region .control-btn-group>.theme-contrast-controls{width:min(100%,18rem);max-width:100%;align-items:stretch;gap:.6rem}.font-control-region .control-btn-group>.accessible-btn,.font-control-region .control-btn-group>.theme-contrast-controls>.accessible-btn,.font-control-region .control-btn-group>.theme-contrast-controls>.contrast-control>button,.font-control-region .control-btn-group>.theme-contrast-controls>.language-control>button{padding:.45rem .65rem;line-height:1.25;overflow-wrap:anywhere}.font-control-region .contrast-control>button,.font-control-region .language-control>button{width:100%;height:auto;min-height:3.25rem}}
@media(min-width:768px){.font-control-region .control-btn-group>.accessible-btn,.font-control-region .control-btn-group>.theme-contrast-controls>.accessible-btn,.font-control-region .control-btn-group>.theme-contrast-controls>.contrast-control,.font-control-region .control-btn-group>.theme-contrast-controls>.language-control{aspect-ratio:auto;height:4.5rem;min-height:4.5rem}.font-control-region .contrast-control>button,.font-control-region .language-control>button{height:100%;min-height:0}}
@media (min-width: 768px){#portrait img{margin-inline:auto}}

/* Extend the approved display-control layout to song-template controls. */
@media (min-width: 768px){
.display-panel .control-row{display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:.75rem;width:100%}
.display-panel .control-row>button,.display-panel .control-row>.menu-control>button{flex:1 1 0;width:auto;min-width:0;max-width:none;aspect-ratio:1}
.display-panel .control-row>.menu-control{display:contents}
}
@media (max-width: 767px){
.menu,.language-menu{max-width:100%}
.display-panel .control-row{width:100%;align-items:center;gap:.6rem}
.display-panel .control-row>button,.display-panel .control-row>.menu-control{box-sizing:border-box;width:min(100%,18rem);max-width:100%;min-height:3.25rem;height:auto;aspect-ratio:auto}
.display-panel .control-row>.menu-control{align-items:stretch;gap:.6rem}
.display-panel .control-row>button,.display-panel .control-row>.menu-control>button{padding:.45rem .65rem;line-height:1.25;overflow-wrap:anywhere}
.display-panel .control-row>.menu-control>button{width:100%;height:auto;min-height:3.25rem}
}
/* Homepage quote accent: use the existing root scheme selectors. */
:root{--quote-bar:#7fa687;}
:root.light-mode{--quote-bar:#466a50;}
:root[data-contrast="black-white"]{--quote-bar:#466a50;}
:root[data-contrast="white-black"]{--quote-bar:#7fa687;}
:root[data-contrast="black-yellow"]{--quote-bar:#746832;}
:root[data-contrast="yellow-black"]{--quote-bar:#b5a163;}
:root[data-contrast="blue-black"]{--quote-bar:#8aaeb0;}
:root[data-contrast="black-blue"]{--quote-bar:#3c5860;}
#press-release blockquote{position:relative;}
@media (min-width: 768px){
@supports (anchor-name: --vrj-language) and (position-anchor: --vrj-language) and (top: anchor(bottom)){
body[data-setlist] #language-trigger{anchor-name:--vrj-language}
body[data-setlist] #language-menu{position:fixed;position-anchor:--vrj-language;left:auto;right:anchor(right);top:anchor(bottom);bottom:.4rem;margin-top:.4rem}
}
}
#press-release blockquote::before{content:"";position:absolute;left:-1.5rem;top:0;bottom:0;width:.5rem;background:var(--quote-bar);}
@media (min-width:768px){
@supports (anchor-name: --vrj-home-language) and (position-anchor: --vrj-home-language) and (top: anchor(bottom)){
body:not(.covers-page) #btn-languages{anchor-name:--vrj-home-language}
body:not(.covers-page) #language-menu{
position:fixed;position-anchor:--vrj-home-language;left:auto;
right:anchor(right);top:anchor(bottom);
position-try-fallbacks:flip-block;margin-top:.4rem;
max-width:min(22rem,calc(100vw - 3rem))}
}
}
/* Anchor the desktop song-page language menu. */
@media (min-width:768px){
  @supports (anchor-name: --vrj-song-language) and (position-anchor: --vrj-song-language) and (top: anchor(bottom)){
    body.covers-page[data-song] #language-trigger{
      anchor-name:--vrj-song-language;
    }
    body.covers-page[data-song] #language-menu{
      position:fixed;
      position-anchor:--vrj-song-language;
      left:auto;
      right:anchor(right);
      top:anchor(bottom);
      position-try-fallbacks:flip-block;
      margin-top:.4rem;
      max-width:min(22rem,calc(100vw - 3rem));
    }
  }
}