/* Afterglow: complete artwork and readable lyrics with TV-safe margins.
   Archivo and the ink/paper palette continue through the remote-controlled panels. */
@font-face { font-family: "Archivo"; font-weight: 400 900; font-stretch: 62% 125%; src: url(fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-weight: 400 900; font-stretch: 62% 125%; src: url(fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --ink: rgb(18,20,23); --paper: rgb(239,235,227); --paper-2: rgba(239,235,227,.68); --rule: rgba(239,235,227,.28);
  --field-a: rgb(62,66,72); --on-a: var(--paper); --field-b: rgb(38,41,46); --on-b: var(--paper); --ground: var(--ink);
  --face: "Archivo", "Helvetica Neue", Arial, sans-serif; --hair: .19vh;
}
#player { position: fixed; left: 0; top: 0; right: 0; bottom: 0; color: var(--paper); font-family: var(--face); pointer-events: none; }
#player.night { --paper: rgb(196,192,185); --paper-2: rgba(196,192,185,.72); }
#player.night .poster-art img { opacity: .72; }
#player button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }
#player p, #player h1, #player h2, #player h3, #player ol { margin: 0; }
#player ol { padding: 0; }
.player-ground { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--ground); }
#player.has-background .player-ground { opacity: .82; }
#player[data-mode="visuals"] .player-ground, #player[data-mode="track"] .player-ground,
#player[data-mode="visuals"] .poster, #player[data-mode="track"] .poster { display: none; }

/* The listening screen: complete cover, quiet metadata, room for the words. */
.poster { position: absolute; left: 0; top: 0; right: 0; bottom: 0; transition: transform 4s linear; }
.poster-art { position: absolute; left: 6vw; top: 16vh; width: 30vw; height: 30vw; max-height: 56vh; overflow: hidden; }
.poster-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.poster-target, .poster-state { position: absolute; top: 6vh; font-size: 2.2vh; font-weight: 500; color: var(--paper-2); }
.poster-target { left: 6vw; right: 36vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-state { right: 6vw; }
.poster-title { position: absolute; left: 43vw; right: 6vw; top: 22vh; max-height: 30vh; overflow: hidden;
  font-size: 7.6vh; line-height: 1.08; font-weight: 750; font-stretch: 95%; letter-spacing: -.02em; overflow-wrap: break-word; }
.poster-title[data-length="short"] { font-size: 9vh; }
.poster-title[data-length="long"] { font-size: 6.4vh; }
.poster-title[data-length="xlong"] { font-size: 5.2vh; }
.poster-meta { position: absolute; left: 43vw; right: 6vw; top: 57vh; }
.poster-artist { font-size: 3.6vh; line-height: 1.25; font-weight: 500; max-height: 9vh; overflow: hidden; }
.poster-album { font-size: 2.5vh; line-height: 1.3; color: var(--paper-2); margin-top: 1.2vh !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-up-next { position: absolute; left: 43vw; right: 6vw; top: 82vh; display: flex; align-items: baseline; color: var(--paper-2); }
.poster-up-next h2 { flex-shrink: 0; font-size: 2.2vh; font-weight: 500; margin-right: 1vw !important; }
.poster-next { list-style: none; min-width: 0; }
.poster-next li { font-size: 2.2vh; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-next li:not(:first-child), .poster-next span { display: none; }
.poster-next strong { font-weight: 500; }
.poster-progress { position: absolute; left: 6vw; right: 6vw; top: 91vh; display: flex; align-items: center; font-size: 2.2vh; color: var(--paper-2); font-variant-numeric: tabular-nums; }
.progress-track { flex: 1; height: var(--hair); margin: 0 1.25vw; background: var(--rule); }
/* The fill is scaled, not sized: progress.js moves it every frame without layout. */
.progress-track div { height: 100%; background: var(--paper); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0); transform: scaleX(0); will-change: transform; }
#player.controls-open .poster-progress, #player.controls-open .poster-up-next { visibility: hidden; }

.poster-lyrics, .poster-song { display: none; }
#player[data-mode="lyrics"] .poster-title { display: none; }
#player[data-mode="lyrics"] .poster-meta { left: 6vw; right: auto; top: 73vh; width: 30vw; }
#player[data-mode="lyrics"] .poster-song { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 3.4vh; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; overflow-wrap: break-word; }
#player[data-mode="lyrics"] .poster-song[data-length="xlong"] { font-size: 2.8vh; }
#player[data-mode="lyrics"] .poster-artist { margin-top: 1vh !important; font-size: 2.5vh; max-height: 6.2vh; color: var(--paper-2); }
#player[data-mode="lyrics"] .poster-album { display: none; }
#player[data-mode="lyrics"] .poster-lyrics { display: flex; flex-direction: column; justify-content: center; position: absolute; left: 43vw; right: 6vw; top: 18vh; height: 58vh; box-sizing: border-box; }
.lyric-before, .lyric-after { font-size: 3.4vh; line-height: 1.3; font-weight: 500; color: var(--paper-2); min-height: 4.4vh; max-height: 8.9vh; overflow: hidden; }
.lyric-now { margin: 3.6vh 0 !important; padding-bottom: .1em; font-size: 6.4vh; line-height: 1.12; font-weight: 700; letter-spacing: -.015em; max-height: 29vh; overflow: hidden; overflow-wrap: break-word; }
/* Karaoke: words still to come in faded paper, sung words in paper. No transition. */
.lyric-now.karaoke span { color: var(--paper-2); }
.lyric-now.karaoke span.sung { color: var(--paper); }
.lyric-plain { font-size: 4.4vh; line-height: 1.25; font-weight: 600; white-space: pre-line; max-height: 40vh; overflow: hidden; }
.lyric-note { margin-top: 2vh !important; font-size: 2.8vh; line-height: 1.4; color: var(--paper-2); max-width: 36ch; }
/* Lyrics over Visuals + track: a screen-sized layer (the OLED drift and Dim track info act on it)
   holding One line (the track card's corner) or Stage (centred, large). lyric-overlay.js places
   the line top or bottom: at Bottom above the track card while it shows. --s is the Size. */
.lyric-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; --s: 1; transition: transform 4s linear; }
.lyric-overlay[data-size="small"] { --s: .8; }
.lyric-overlay[data-size="large"] { --s: 1.25; }
.lyric-overlay:not(.has-line), #player[data-mode="visuals"] .lyric-overlay { display: none; }
/* Hidden, not removed, under a sheet: it keeps its size, so it shows in place the moment the sheet closes. */
.controls-open .lyric-overlay, .panel-open .lyric-overlay, .sheet-open .lyric-overlay { visibility: hidden; }
.lyric-overlay-line { position: absolute; z-index: 0; left: 5vw; max-width: calc(60vw * var(--s)); box-sizing: border-box; padding: calc(1.4vh * var(--s)) calc(1.4vw * var(--s));
  font-size: calc(4vh * var(--s)); line-height: 1.15; font-weight: 700; color: var(--paper); overflow-wrap: break-word; }
.lyric-overlay[data-kind="stage"] .lyric-overlay-line { left: 0; right: 0; margin: 0 auto !important; width: -webkit-fit-content; width: fit-content; max-width: 70vw; padding: calc(2vh * var(--s)) calc(2.2vw * var(--s));
  font-size: calc(7.4vh * var(--s)); line-height: 1.05; font-weight: 800; font-stretch: 82%; letter-spacing: -.015em; text-align: center; }
/* Box: the flat ink field. Shade: a full-width band of the ground, 2.2x the text block (so it scales with Size),
   fading out above and below; one vertical gradient, clipped to the screen by the layer. None: text only, with a soft dark edge. */
.lyric-overlay[data-background="box"] .lyric-overlay-line { background: rgba(18,20,23,.9); }
.lyric-overlay[data-background="shade"] .lyric-overlay-line::before { content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -60%; bottom: -60%;
  background: linear-gradient(to bottom, rgba(18,20,23,0), rgba(18,20,23,.82) 30%, rgba(18,20,23,.82) 70%, rgba(18,20,23,0)); }
.lyric-overlay[data-background="shade"] .lyric-overlay-line { text-shadow: 0 0 .4vh rgba(18,20,23,.7); }
.lyric-overlay[data-background="none"] .lyric-overlay-line { text-shadow: 0 0 .3vh rgba(18,20,23,.95), 0 .2vh 1.6vh rgba(18,20,23,.85), 0 0 3.2vh rgba(18,20,23,.5); }
/* Controls, Browse, a panel or Settings open: the track card steps aside. */
.sheet-open #track { visibility: hidden; }

/* Controls: a ruled strip at the top, a transport band at the bottom. */
.player-nav, .player-controls { display: none; position: absolute; left: 0; right: 0; z-index: 2; background: var(--ground); pointer-events: auto; }
.controls-open .player-nav, .controls-open .player-controls { display: flex; }
.player-nav { top: 0; height: 10vh; padding: 0 5vw; align-items: stretch; border-bottom: var(--hair) solid var(--rule); }
.player-nav button { margin-right: 1.25vw; padding: 0 1.4vw; font-size: 2.6vh !important; font-weight: 700; position: relative; }
#player .player-nav button.current::before, #player .chosen > span:first-child::before, #player .browse-cats button.chosen::before, #player .browse-added .browse-words span::before {
  content: ""; display: inline-block; width: 2.2vh; height: 2.2vh; margin-right: .7vw; vertical-align: -.25vh; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5l5.5 5.5L20.5 6' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }
.player-controls { bottom: 0; height: 24vh; padding: 0 5vw; box-sizing: border-box; flex-direction: column; justify-content: center; border-top: var(--hair) solid var(--rule); }
.control-heading { display: flex; align-items: baseline; font-size: 2.4vh; margin-bottom: 2vh; }
.control-track { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.control-time { margin-left: 2vw; color: var(--paper-2); font-variant-numeric: tabular-nums; }
.transport { display: flex; }
.transport button { width: 10vw; min-height: 11vh; margin-right: 1.25vw; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 1.6vh 1vw; box-sizing: border-box; font-size: 2vh !important; font-weight: 600; border-top: var(--hair) solid var(--rule) !important; text-align: left; }
.transport button:last-child { margin-right: 0; }
.transport svg { width: 3.6vh; height: 3.6vh; display: block; }

/* One state vocabulary: focus inverts to paper on ink, chosen ticks, disabled steps back. */
#player button.selected { background: var(--paper); color: var(--ink); outline: none; }
#player button:focus { outline: none; } /* the browser's focus never shows on its own: .selected is the one highlight */
#player button:disabled { opacity: .45; cursor: default; }
#player button.selected:disabled { background: var(--rule); color: var(--paper); }

/* Panels: a full-height sheet over the right zone from 34.16vw; the artwork column stays. */
.player-panel { display: none; position: absolute; z-index: 2; left: 34.16vw; right: 0; top: 0; bottom: 0; padding: 6vh 5vw 4vh 1.26vw; box-sizing: border-box; background: var(--ground); pointer-events: auto; flex-direction: column; }
.panel-open .player-panel { display: flex; }
.player-panel header { padding-bottom: 2vh; border-bottom: var(--hair) solid var(--rule); }
.player-panel h2 { font-size: 6vh; line-height: 1; font-weight: 820; font-stretch: 82%; letter-spacing: -.015em; }
.panel-note { margin-top: 1.2vh !important; font-size: 2.2vh; color: var(--paper-2); }
.panel-items { padding-top: 1vh; }
/* A list longer than its sheet (scroll-cue.js): the ground fades over the edge row, with "More" and a chevron
   under the values column. The scrollbar stays. */
.scroll-frame { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroll-frame > .panel-items, .scroll-frame > .browse-list, .scroll-frame > .menu-rows { flex: 1; min-height: 0; overflow-y: auto; }
.scroll-cue { display: none; position: absolute; z-index: 1; left: 0; right: 0; height: 8vh; padding: 0 1vw .4vh; box-sizing: border-box; justify-content: flex-end; pointer-events: none; color: var(--paper-2); }
.scroll-cue-down { bottom: 0; align-items: flex-end; background: linear-gradient(to bottom, rgba(18,20,23,0), rgba(18,20,23,.8) 40%, var(--ground) 60%); }
.scroll-cue-up { top: 0; align-items: flex-start; padding: .4vh 1vw 0; background: linear-gradient(to top, rgba(18,20,23,0), rgba(18,20,23,.8) 40%, var(--ground) 60%); }
.more-below > .scroll-cue-down, .more-above > .scroll-cue-up { display: flex; }
.scroll-cue-label { display: flex; align-items: center; font-size: 2.2vh; font-weight: 800; letter-spacing: .02em; }
.scroll-cue-label svg { width: 2.6vh; height: 2.6vh; margin-left: .4vw; }
.panel-items h3 { font-size: 2.2vh; font-weight: 800; letter-spacing: .02em; color: var(--paper-2); margin: 3vh 0 .6vh !important; }
.player-option { width: 100%; min-height: 7vh; display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 1.2vh 1vw; box-sizing: border-box; font-size: 2.6vh !important; font-weight: 600; border-bottom: var(--hair) solid var(--rule) !important; }
/* The label keeps its words (up to 70% of the row); the value takes the rest and is cut first. */
.player-option span:first-child { flex: 1 0 auto; max-width: 70%; margin-right: 1vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-option span:last-child { flex: 0 1 auto; min-width: 0; font-size: 2.2vh; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Details: the back of the poster, over the title and fields; the artwork stays. */
#player[data-panel="details"] .player-panel h2 { font-size: 9vh; line-height: .92; padding-bottom: .16em; max-height: 20vh; overflow: hidden; }
.details-facts { display: flex; flex-wrap: wrap; margin: 2vh 0 3vh; }
.details-facts dt { width: 20%; padding: 1.6vh 0; font-size: 2.2vh; font-weight: 800; color: var(--paper-2); border-bottom: var(--hair) solid var(--rule); }
.details-facts dd { width: 80%; margin: 0; padding: 1.6vh 0; font-size: 3vh; font-weight: 600; border-bottom: var(--hair) solid var(--rule); }
.details-facts dd:nth-of-type(2), .details-facts dd:nth-of-type(3) { font-variant-numeric: tabular-nums; }

/* Browse: categories in columns 1–3, the list or an item's actions in 4–12. */
.player-browse { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; padding: 6vh 5vw 4vh; box-sizing: border-box; background: var(--ground); pointer-events: auto; flex-direction: column; }
#player[data-panel="browse"] .player-browse { display: flex; }
#player[data-panel="browse"] .player-panel { display: none; }
.player-browse header { padding-bottom: 2vh; border-bottom: var(--hair) solid var(--rule); }
.player-browse h2 { font-size: 9vh; line-height: .92; font-weight: 820; font-stretch: 80%; letter-spacing: -.02em; }
.browse-body { flex: 1; display: flex; min-height: 0; }
.browse-cats, .browse-list { list-style: none; }
.browse-cats { width: 21.56vw; margin-right: 1.25vw !important; padding-top: 2vh !important; }
.browse-cats button { width: 100%; min-height: 6.4vh; padding: 0 1vw; text-align: left; font-size: 2.6vh !important; font-weight: 700; border-bottom: var(--hair) solid var(--rule) !important; }
.browse-main { flex: 1; display: flex; flex-direction: column; min-height: 0; padding-top: 2vh; }
.browse-title { font-size: 4.4vh; font-weight: 820; font-stretch: 84%; padding: 0 0 1.4vh !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-list { padding-bottom: 1vh !important; }
.browse-row { width: 100%; min-height: 9.4vh; display: flex; align-items: center; padding: 1vh 1vw 1vh 0; box-sizing: border-box; text-align: left; border-bottom: var(--hair) solid var(--rule) !important; }
.browse-thumb { width: 7.4vh; height: 7.4vh; flex-shrink: 0; margin-right: 1.25vw; background: var(--field-b); overflow: hidden; }
.browse-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.browse-words { flex: 1; min-width: 0; }
.browse-words strong { display: block; font-size: 2.8vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-words span { display: block; margin-top: .4vh; font-size: 2.1vh; font-weight: 500; color: var(--paper-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-added .browse-words span { color: var(--paper); font-weight: 700; }
.selected .browse-words span { color: inherit; }
.browse-action, .browse-status { min-height: 8vh; padding-left: 1vw; }
.browse-action strong { font-size: 2.6vh; font-weight: 600; }
.browse-status strong { font-weight: 600; }
/* Search: a ruled text row above the results; focus inverts it like any row. */
.browse-search { min-height: 9.4vh; display: flex; align-items: center; padding: 0 1vw; box-sizing: border-box; border-bottom: var(--hair) solid var(--rule); cursor: text; }
.browse-search-icon svg { width: 3.6vh; height: 3.6vh; display: block; margin-right: 1.25vw; }
.browse-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; padding: 0; color: inherit; font: inherit; font-size: 3.4vh; font-weight: 700; }
.browse-input::placeholder { color: var(--paper-2); opacity: 1; }
.browse-search.selected { background: var(--paper); color: var(--ink); outline: none; }
.browse-search.selected .browse-input::placeholder { color: inherit; }
.browse-group { padding: 3vh 0 .8vh 1vw; font-size: 2.2vh; font-weight: 800; letter-spacing: .02em; color: var(--paper-2); border-bottom: var(--hair) solid var(--rule); }
.browse-hint { padding: 2.4vh 1vw; font-size: 2.6vh; font-weight: 600; line-height: 1.3; color: var(--paper-2); }
.player-error { position: absolute; left: 35.42vw; right: 5vw; top: 2vh; padding: 1vh 1vw; font-size: 2.4vh; font-weight: 600; background: var(--paper); color: var(--ink); }
.player-error:empty { display: none; }

/* Idle: what was played recently, set as a poster while nothing plays. Below
   the player's sheets (z 2) and menu; drifts with the picture; dims at rest. */
#idle { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; background: var(--ink); color: var(--paper); font-family: var(--face); transition: transform 4s linear; }
#idle.shown { display: block; }
#idle.night { --paper: rgb(196,192,185); --paper-2: rgba(196,192,185,.72); }
#idle.night .idle-art img { opacity: .72; }
#idle.rest { opacity: .35; }
#idle p, #idle h1, #idle ol { margin: 0; padding: 0; }
#idle::before { content: ""; position: absolute; left: 35.42vw; right: 5vw; top: 10.5vh; border-top: var(--hair) solid var(--rule); }
.idle-art { position: absolute; left: 6vw; top: 16vh; width: 30vw; height: 30vw; max-height: 56vh; overflow: hidden; }
.idle-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.idle-target, .idle-state { position: absolute; top: 6vh; font-size: 2.2vh; font-weight: 500; letter-spacing: .01em; color: var(--paper-2); }
.idle-target { left: 35.42vw; right: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idle-state { right: 5vw; }
.idle-title { position: absolute; left: 35.42vw; right: 5vw; top: 13vh; height: 46vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: .24em; box-sizing: border-box;
  font-size: 13.6vh; line-height: .9; font-weight: 820; font-stretch: 80%; letter-spacing: -.02em; overflow-wrap: break-word; }
.idle-title[data-length="short"] { font-size: 18vh; line-height: .86; }
.idle-title[data-length="long"] { font-size: 9.8vh; line-height: .92; }
.idle-title[data-length="xlong"] { font-size: 7.4vh; line-height: .95; }
.idle-field { position: absolute; top: 62vh; left: 35.42vw; width: 36.77vw; height: 23vh; box-sizing: border-box; padding: 2.6vh 1.4vw; overflow: hidden; background: var(--field-a); color: var(--on-a); }
#idle.neutral { --field-a: rgb(62,66,72); --on-a: var(--paper); --field-b: rgb(38,41,46); --on-b: var(--paper); }
.idle-detail { font-size: 4vh; line-height: 1.1; font-weight: 750; font-stretch: 88%; max-height: 8.8vh; overflow: hidden; }
.idle-hint { margin-top: 1.4vh !important; font-size: 2.6vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idle-strip { position: absolute; left: 35.42vw; right: 5vw; top: 87vh; display: flex; list-style: none; }
.idle-strip li { margin-right: .9vw; }
.idle-tile { display: block; width: 4.9vw; height: 4.9vw; padding: .5vh; box-sizing: border-box; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.idle-tile img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--field-b); }
.idle-tile.selected { background: var(--paper); color: var(--ink); outline: none; }
.idle-word { display: flex; align-items: flex-end; height: 100%; box-sizing: border-box; padding: .4vh .3vw; font-size: 1.9vh; font-weight: 700; border-top: var(--hair) solid var(--rule); }
.idle-tile.selected .idle-word { border-top-color: transparent; }

#menu { z-index: 3; }
.menu-body { height: 100%; display: flex; flex-direction: column; }
#menu h2 { flex-shrink: 0; margin: 0 0 1vh; padding-bottom: 2vh; font-size: 9vh; line-height: .92; font-weight: 820; font-stretch: 80%; letter-spacing: -.02em; border-bottom: var(--hair) solid var(--rule); }
#menu h3 { margin: 3.4vh 0 .6vh; font-size: 2.2vh; font-weight: 800; letter-spacing: .02em; color: var(--paper-2); }
/* About: the wordmark over the label column, the version in the values column; quiet, at the list's end.
   No taller than a row, so the row of context scroll-cue.js keeps below the last row shows all of it. */
.menu-about { display: flex; justify-content: space-between; align-items: flex-end; padding: 2.4vh 1vw .6vh; }
.menu-about img { display: block; width: 14.96vh; height: 3vh; }
.menu-about span { margin-bottom: .3vh; font-size: 2vh; font-weight: 500; color: var(--paper-2); font-variant-numeric: tabular-nums; }
.sync-figure { padding: 6.4vh 1vw 1vh; border-bottom: var(--hair) solid var(--rule); }
.sync-scale { position: relative; height: 5vh; border-top: var(--hair) solid var(--rule); margin: 0 1vw; top: 2.4vh; }
.sync-mark { position: absolute; top: -1.6vh; width: .5vw; height: 3.2vh; margin-left: -.25vw; background: var(--paper); }
.sync-speakers { background: var(--paper-2); }
.sync-picture { background: var(--field-a); outline: var(--hair) solid var(--paper); }
.sync-mark em { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 2vh; font-weight: 700; }
.sync-mark.above em { bottom: 3.8vh; }
.sync-mark.below em { top: 3.8vh; }
.sync-ends { display: flex; justify-content: space-between; margin: 4.6vh 0 0 !important; font-size: 1.9vh; font-weight: 600; color: var(--paper-2); }
#login, #scan, #toast { z-index: 4; }
#hint { z-index: 2; cursor: pointer; }
::selection { background: var(--paper); color: var(--ink); }
::-webkit-scrollbar { width: .5vw; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); }
@media (max-aspect-ratio: 4/3) {
  .poster-art, .idle-art { width: 30vw; height: 30vw; }
  .poster-title { font-size: 6vw; } .poster-title[data-length="long"] { font-size: 5vw; }
  .lyric-now { font-size: 5.4vw; }
  .player-panel { left: 20vw; } .transport button { width: 12vw; margin-right: .8vw; }
}

/* Details: Scan to save, a flat paper square beside the facts (share-link.js). */
.details-top { display: flex; align-items: flex-start; }
.details-top .details-facts { flex: 1; min-width: 0; }
.share-block { flex-shrink: 0; width: 26vh; margin: 2vh 0 3vh 2.5vw; }
.share-code { display: block; width: 26vh; height: 26vh; }
.share-label { margin-top: 1.4vh !important; font-size: 2.2vh; font-weight: 700; line-height: 1.25; }
.share-service { margin-top: .4vh !important; font-size: 2.2vh; font-weight: 500; color: var(--paper-2); }

/* Check my setup (setup-view.js): a sheet where Settings sits. A failed row
   says so in bold paper with its next step beneath; nothing takes a colour. */
#setup { display: none; position: fixed; z-index: 3; left: 34.16vw; right: 0; top: 0; bottom: 0; box-sizing: border-box; padding: 6vh 5vw 4vh 1.26vw; background: var(--ground); color: var(--paper); font-family: var(--face); font-size: 2.5vh; }
.setup-body { height: 100%; display: flex; flex-direction: column; }
#setup h2 { flex-shrink: 0; margin: 0; font-size: 9vh; line-height: .92; font-weight: 820; font-stretch: 80%; letter-spacing: -.02em; }
.setup-note { flex-shrink: 0; margin: 1.2vh 0 0; padding-bottom: 2vh; font-size: 2.6vh; font-weight: 600; color: var(--paper-2); border-bottom: var(--hair) solid var(--rule); }
.scroll-frame > .setup-rows { flex: 1; min-height: 0; overflow-y: auto; }
.setup-row { padding: 1.5vh 1vw; border-bottom: var(--hair) solid var(--rule); }
.setup-line { display: flex; justify-content: space-between; line-height: 1.3; font-weight: 600; }
.setup-line span:last-child { margin-left: 2vw; text-align: right; white-space: nowrap; font-weight: 500; color: var(--paper-2); font-variant-numeric: tabular-nums; }
.setup-row.fail .setup-line span:last-child, .setup-row.busy .setup-line span:last-child { color: inherit; font-weight: 800; }
.setup-next { margin: .5vh 0 0; font-size: 2.2vh; font-weight: 500; line-height: 1.35; color: var(--paper-2); }
.setup-row.again { margin-top: 2vh; font-weight: 700; }
.setup-row.focus { background: var(--paper); color: var(--ink); }
.setup-row.focus .setup-line span:last-child, .setup-row.focus .setup-next { color: var(--ink); }
#message .setup-offer { display: block; margin-top: 1.4vh; font-size: 2.2vh; color: var(--paper-2); }