/* #region styles module */
/*
	The look around the films: a dark, quiet frame of frosted glass and warm brass, so the films carry the color.
	- Every text sits light on dark glass, never dark over a dark film.
*/
/* #endregion */




/* #region Foundations */
:root
{
	--night: #08080c;
	--glass: rgba(14, 13, 20, 0.62);
	--glass-edge: rgba(226, 190, 120, 0.22);
	--brass: #d9b26a;
	--brass-bright: #f3d595;
	--ink: #f1ece2;
	--ink-soft: rgba(241, 236, 226, 0.72);
	/* - The widest the player's bar grows, and how much a large screen zooms it. */
	--bar-most: 1480px;
	--bar-zoom: 1;
	--ink-faint: rgba(241, 236, 226, 0.48);
	--title-face: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
	--body-face: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after
{
	box-sizing: border-box;
}

html,
body
{
	margin: 0;
	height: 100%;
	background: var(--night);
	color: var(--ink);
	font-family: var(--body-face);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

#stage
{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

#overlay
{
	position: fixed;
	inset: 0;
	pointer-events: none;
}

#overlay > *
{
	pointer-events: auto;
}

.glass
{
	background: var(--glass);
	border: 1px solid var(--glass-edge);
	border-radius: 18px;
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

h1,
h2
{
	font-family: var(--title-face);
	font-weight: 400;
	color: var(--brass-bright);
	margin: 0 0 8px;
	text-wrap: balance;
}

/* Selected text is highlighted in the album's brass. */
::selection
{
	background: rgba(217, 178, 106, 0.85);
	color: #1a1208;
}

/* Paragraphs wrap without leaving a lone word on their last line. */
p
{
	text-wrap: pretty;
}
/* #endregion */




/* #region The Instrument Lab */
.lab-panel
{
	position: absolute;
	left: 20px;
	top: 20px;
	width: min(780px, calc(100vw - 40px));
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 20px 22px;
	/* Its scrollbar is a thin brass thread, as the album's track list's is. */
	scrollbar-width: thin;
	scrollbar-color: rgba(217, 178, 106, 0.35) transparent;
}

/* The Lab wears the album's brass gear beside its title. */
.lab-head
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.lab-head h1
{
	margin: 0;
}

.lab-head .mark
{
	width: 38px;
	height: 38px;
}

.lab-panel h2
{
	font-size: 18px;
	margin-top: 16px;
}

.lab-panel p
{
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 10px;
}

.lab-row
{
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.lab-button
{
	font: 500 14px var(--body-face);
	color: var(--night);
	background: var(--brass);
	border: none;
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.2s ease;
}

.lab-button:hover
{
	background: var(--brass-bright);
}

.lab-button:active
{
	transform: scale(0.95);
}

/* Each readout, an octave's name, the sync check's clock, or a picture setting's value, sits in a small brass-rimmed window, as a dial on an instrument does. */
.lab-readout,
.picture-value
{
	min-width: 3.4em;
	padding: 3px 9px;
	border: 1px solid rgba(217, 178, 106, 0.4);
	border-radius: 999px;
	background: rgba(8, 8, 12, 0.5);
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--brass-bright);
	font-size: 13px;
}
/* #endregion */




/* #region The voice bench */
/* Each family's heading stays pinned at the top of the panel while its voices scroll beneath it. */
[data-bench] > h2
{
	position: sticky;
	top: -20px;
	z-index: 2;
	margin: 0 -22px;
	padding: 16px 22px 9px;
	background: rgba(14, 13, 20, 0.96);
	/* A family's name is set as a small spaced eyebrow, a step below the panel's own section headings. */
	font-family: var(--body-face);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brass);
}

.lab-voice
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 0;
	border-top: 1px solid rgba(226, 190, 120, 0.1);
}

/* The row under the pointer lifts a little, so the voice being played is easy to follow. */
.lab-voice:hover
{
	background: linear-gradient(90deg, rgba(226, 190, 120, 0.07), rgba(226, 190, 120, 0));
}

.lab-voice-title
{
	flex: 0 0 104px;
	font-size: 14px;
	color: var(--ink);
}

/* A kit's drums wrap in their own column beside the kit's name. */
.lab-drums
{
	display: flex;
	flex: 1 1 0;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

/* A kit's name sits level with its first line of drums, and on a narrow screen it takes a line of its own above them. */
.lab-kit
{
	align-items: flex-start;
}

.lab-kit .lab-voice-title
{
	padding-top: 4px;
}

@media (max-width: 560px)
{
	.lab-kit .lab-voice-title
	{
		flex-basis: 100%;
		padding-top: 0;
	}
}

.lab-voice .lab-button
{
	padding: 5px 11px;
	font-size: 12px;
}

/* The Groove, which plays the whole kit, is drawn in outline, apart from the single drums. */
.lab-voice .lab-button.lab-groove
{
	background: transparent;
	color: var(--brass-bright);
	box-shadow: inset 0 0 0 1px var(--brass);
}

/* Each family of drums wears its own shade of metal, so a long kit reads at a glance: brass drumheads, pale gold cymbals, copper toms, and bronze hand percussion. */
.lab-drums .lab-button[data-family="metal"]
{
	background: #ecd394;
}

.lab-drums .lab-button[data-family="tom"]
{
	background: #d4955a;
}

.lab-drums .lab-button[data-family="hand"]
{
	background: #bea173;
}

.lab-drums .lab-button[data-family]:hover
{
	filter: brightness(1.12);
}

/* An octave's controls stay together: the shift down, the keyboard, the shift up, and the octave's name. */
.lab-octave
{
	display: flex;
	align-items: center;
	gap: 6px;
}

/* A little piano: the black keys sit narrower and shorter over the meeting of the white keys, as on a real keyboard. */
.lab-keys
{
	display: flex;
	align-items: flex-start;
	gap: 1px;
}

.lab-key
{
	position: relative;
	width: 15px;
	height: 36px;
	border: none;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(180deg, #fbf3e4, var(--ink));
	cursor: pointer;
	transition: transform 0.08s ease, background 0.15s ease;
}

.lab-key.dark
{
	z-index: 1;
	width: 10px;
	height: 22px;
	margin: 0 -5.5px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(180deg, #2b2622, #0d0b0a);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

/* A key under the pointer warms toward brass before it is pressed. */
.lab-key:hover
{
	background: linear-gradient(180deg, #fbe9bf, #e0b765);
}

.lab-key.dark:hover
{
	background: linear-gradient(180deg, #4a3c2c, #1c150e);
}

.lab-key:active,
.lab-key.dark:active
{
	transform: translateY(2px);
	background: var(--brass-bright);
}

.lab-key:disabled
{
	opacity: 0.2;
	cursor: default;
}
/* #endregion */




/* #region The stage and shared controls */
#stage
{
	opacity: 0;
	transition: opacity 1.4s ease;
}

#stage.is-ready
{
	opacity: 1;
}

body.is-idle,
body.is-idle #stage
{
	cursor: none;
}

.glass-deep
{
	background: linear-gradient(160deg, rgba(20, 17, 24, 0.78), rgba(9, 8, 12, 0.82));
	border: 1px solid rgba(226, 190, 120, 0.2);
	border-radius: 22px;
	backdrop-filter: blur(18px) saturate(1.25);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 236, 200, 0.06);
}

.icon
{
	width: 22px;
	height: 22px;
	flex: none;
}

button
{
	font: inherit;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

button:focus-visible,
.timeline:focus-visible,
.brass-slider:focus-visible
{
	outline: 2px solid var(--brass-bright);
	outline-offset: 3px;
}

.primary-button,
.secondary-button
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	padding: 13px 26px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.primary-button
{
	border: none;
	color: #1a1208;
	background: linear-gradient(180deg, #f6dc9c, #d4a24c 60%, #b8862f);
	box-shadow: 0 6px 22px rgba(217, 178, 106, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.primary-button:hover
{
	filter: brightness(1.08);
	box-shadow: 0 8px 30px rgba(217, 178, 106, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.secondary-button
{
	border: 1px solid rgba(226, 190, 120, 0.35);
	background: rgba(255, 240, 210, 0.04);
	color: var(--ink);
}

.secondary-button:hover
{
	background: rgba(255, 240, 210, 0.1);
}

.primary-button:active,
.secondary-button:active
{
	transform: scale(0.95);
}
/* #endregion */




/* #region The album screen */
.album
{
	position: absolute;
	left: 28px;
	top: 28px;
	/* The card holds its contents and no more, so a tall screen shows the film below it rather than an empty stretch of glass; a short one caps it, and the track list scrolls. */
	max-height: calc(100% - 56px);
	width: min(470px, calc(100vw - 56px));
	padding: 34px 30px 26px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateX(-18px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.album.is-shown
{
	opacity: 1;
	transform: none;
}

.album-head
{
	text-align: center;
	margin-bottom: 22px;
}

.mark
{
	width: 58px;
	height: 58px;
	animation: mark-turn 40s linear infinite;
	filter: drop-shadow(0 0 14px rgba(217, 178, 106, 0.35));
}

@keyframes mark-turn
{
	to
	{
		transform: rotate(360deg);
	}
}

.album-title
{
	font-family: var(--title-face);
	font-size: 40px;
	letter-spacing: 0.08em;
	margin: 10px 0 4px;
	background: linear-gradient(180deg, #fbe8bb, #d9a956 70%, #a8762a);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.album-tagline
{
	margin: 0;
	text-wrap: balance;
	color: var(--ink-soft);
	font-size: 15px;
	letter-spacing: 0.04em;
}

.tracks
{
	list-style: none;
	margin: 0 -12px;
	padding: 0 12px;
	/* While more of the list waits below, its foot fades out, so a track cut off by the card's edge reads as more to scroll to. */
	animation: tracks-foot linear both;
	animation-timeline: scroll(self);
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(217, 178, 106, 0.35) transparent;
}

@keyframes tracks-foot
{
	from,
	98%
	{
		mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
	}

	to
	{
		mask-image: none;
	}
}

.track
{
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 34px 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: baseline;
	text-align: left;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 14px;
	padding: 12px 14px;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.track:hover,
.track.is-focused
{
	background: linear-gradient(90deg, rgba(217, 178, 106, 0.14), rgba(217, 178, 106, 0.03));
	border-color: rgba(226, 190, 120, 0.25);
	transform: translateX(4px);
}

.track:active
{
	transform: translateX(4px) scale(0.98);
}

.track-number
{
	grid-row: span 2;
	font-family: var(--title-face);
	font-size: 22px;
	color: var(--brass);
	text-align: center;
}

.track-title
{
	font-family: var(--title-face);
	font-size: 20px;
	color: var(--ink);
}

.track-length
{
	font-variant-numeric: tabular-nums;
	color: var(--ink-faint);
	font-size: 13px;
}

.track-liner
{
	grid-column: 2 / span 2;
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.45;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, margin-top 0.35s ease;
}

/* The focused track wears a thin brass bar at its left edge. */
.track.is-focused::before
{
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 2px;
	background: linear-gradient(180deg, #f3d595, #b8862f);
	box-shadow: 0 0 10px rgba(243, 213, 149, 0.45);
}

.track.is-focused .track-liner
{
	max-height: 5.5em;
	opacity: 1;
	margin-top: 4px;
}

.album-actions
{
	display: flex;
	justify-content: center;
	margin: 0 0 18px;
}

.play-all-length
{
	font-weight: 500;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* The album's dedication is signed in the title face, between two fine brass rules. */
.album-foot
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	text-align: center;
	color: rgba(217, 178, 106, 0.62);
	font-family: var(--title-face);
	font-size: 13px;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.album-foot::before,
.album-foot::after
{
	content: '';
	width: 26px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(217, 178, 106, 0.5));
}

.album-foot::after
{
	transform: scaleX(-1);
}
/* #endregion */




/* #region The player's bar */
.player-bar
{
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	/* On a very wide screen the bar keeps a comfortable width, centered, so its controls stay within reach of each other. */
	max-width: var(--bar-most);
	margin: 0 auto;
	padding: 8px 16px 12px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.player-bar.is-shown
{
	opacity: 1;
	transform: none;
}

.timeline
{
	position: relative;
	height: 22px;
	display: flex;
	align-items: center;
	cursor: pointer;
	touch-action: none;
}

.timeline-track
{
	position: relative;
	width: 100%;
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 240, 210, 0.14);
	transition: height 0.2s ease;
}

.timeline:hover .timeline-track,
.timeline.is-dragging .timeline-track
{
	height: 6px;
}

.timeline-fill
{
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #b8862f, #f3d595);
	transform-origin: left center;
	transform: scaleX(0);
	box-shadow: 0 0 12px rgba(243, 213, 149, 0.45);
}

.timeline-marks
{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.timeline-mark
{
	position: absolute;
	top: -3px;
	width: 2px;
	height: calc(100% + 6px);
	border-radius: 2px;
	background: rgba(255, 240, 210, 0.42);
	transform: translateX(-1px);
}

.timeline-knob
{
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff4d6, #d9b26a 60%, #a8762a);
	box-shadow: 0 0 14px rgba(243, 213, 149, 0.7);
	transform: translate(-50%, -50%) scale(0.6);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.timeline:hover .timeline-knob,
.timeline.is-dragging .timeline-knob,
.timeline:focus-visible .timeline-knob
{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.timeline-tip
{
	position: absolute;
	bottom: 26px;
	transform: translateX(-50%);
	padding: 5px 10px;
	border-radius: 8px;
	background: rgba(10, 9, 14, 0.9);
	border: 1px solid rgba(226, 190, 120, 0.25);
	font-size: 12px;
	white-space: nowrap;
	color: var(--ink);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.timeline:hover .timeline-tip,
.timeline.is-dragging .timeline-tip
{
	opacity: 1;
}

.player-row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}

.player-group
{
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.player-middle
{
	flex: 1;
	justify-content: center;
	text-align: center;
}

.player-label
{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.player-piece
{
	font-family: var(--title-face);
	font-size: 17px;
	color: var(--brass-bright);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.player-section
{
	font-size: 12px;
	color: var(--ink-soft);
	letter-spacing: 0.06em;
}

.player-clock
{
	margin-left: 8px;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--ink-soft);
	white-space: nowrap;
}

.control
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 42px;
	height: 42px;
	padding: 0 9px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.control:hover
{
	background: rgba(255, 240, 210, 0.09);
	color: var(--brass-bright);
}

.control:active
{
	transform: scale(0.9);
}

.control:disabled
{
	opacity: 0.3;
	cursor: default;
}

.control-play
{
	width: 50px;
	height: 50px;
	color: #1a1208;
	background: linear-gradient(180deg, #f6dc9c, #d4a24c 60%, #b8862f);
	box-shadow: 0 4px 18px rgba(217, 178, 106, 0.32);
}

.control-play:hover
{
	color: #1a1208;
	background: linear-gradient(180deg, #fbe6b4, #e0b05a 60%, #c49238);
}

.control-wide span
{
	font-size: 13px;
	font-weight: 500;
}

.brass-slider
{
	--share: 0.8;
	height: 22px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.brass-slider::-webkit-slider-runnable-track
{
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, #d9b26a calc(var(--share) * 100%), rgba(255, 240, 210, 0.16) calc(var(--share) * 100%));
}

.brass-slider::-moz-range-track
{
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, #d9b26a calc(var(--share) * 100%), rgba(255, 240, 210, 0.16) calc(var(--share) * 100%));
}

.brass-slider::-webkit-slider-thumb
{
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff4d6, #d9b26a 60%, #a8762a);
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.brass-slider::-moz-range-thumb
{
	width: 14px;
	height: 14px;
	border: none;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff4d6, #d9b26a 60%, #a8762a);
}

/* Under the pointer, a slider's knob swells a little and glows, as the timeline's does. */
.brass-slider:hover::-webkit-slider-thumb
{
	transform: scale(1.15);
	box-shadow: 0 0 10px rgba(217, 178, 106, 0.65);
}

.brass-slider:active::-webkit-slider-thumb
{
	transform: scale(1.25);
}

.volume-slider
{
	width: 92px;
	margin-right: 6px;
}

.bar-panel
{
	position: absolute;
	left: 0;
	bottom: calc(100% + 10px);
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bar-panel.is-open
{
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* The panels open over the film itself, often over its brightest light, so their glass is deeper than the bar's and their words always read. */
.bar-panel.glass-deep
{
	background: linear-gradient(160deg, rgba(20, 17, 24, 0.93), rgba(9, 8, 12, 0.95));
}

.quality-panel
{
	gap: 2px;
	padding: 6px;
}

.quality-choice
{
	display: grid;
	grid-template-columns: 10px auto;
	column-gap: 12px;
	align-items: center;
	padding: 8px 16px 8px 12px;
	border: none;
	border-radius: 11px;
	background: transparent;
	color: var(--ink-soft);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.quality-choice:hover,
.quality-choice:focus-visible
{
	outline: none;
	background: rgba(255, 240, 210, 0.08);
	color: var(--ink);
}

/* - The mark: a brass ring that fills and glows on the tier in use. */
.quality-choice::before
{
	content: '';
	grid-row: span 2;
	width: 8px;
	height: 8px;
	border: 1.5px solid rgba(217, 178, 106, 0.45);
	border-radius: 50%;
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* - The tier in use shines brass, and so does the tier Auto is choosing now, whose mark stays unfilled. */
.quality-choice[aria-checked='true'],
.quality-choice.is-auto-choice
{
	color: var(--brass-bright);
}

.quality-choice[aria-checked='true']::before
{
	border-color: var(--brass);
	background: var(--brass);
	box-shadow: 0 0 10px rgba(217, 178, 106, 0.7);
}

.quality-name
{
	font-size: 14px;
	font-weight: 600;
}

/* - The tag beside Auto naming the tier Auto is choosing now, shown while Auto is the setting. */
.quality-now
{
	display: none;
	margin-left: 8px;
	padding: 1px 8px;
	border: 1px solid rgba(217, 178, 106, 0.35);
	border-radius: 999px;
	background: rgba(217, 178, 106, 0.14);
	color: var(--brass-bright);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	vertical-align: 1px;
}

.quality-now.is-shown
{
	display: inline-block;
}

.quality-detail
{
	font-size: 12px;
	color: var(--ink-faint);
	white-space: nowrap;
}

.picture-panel
{
	gap: 8px;
	padding: 12px 18px;
}

.picture-row
{
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
}

.picture-row span
{
	width: 44px;
}

.picture-row .brass-slider
{
	width: 150px;
}

.picture-value
{
	min-width: 4.6em;
	padding: 3px 6px;
}
/* #endregion */




/* #region Cards */
.title-card
{
	position: absolute;
	/* A title card lines up with the bar's left edge once a very wide screen centers the bar. */
	left: max(clamp(24px, 6vw, 90px), calc((100vw - var(--bar-most) * var(--bar-zoom)) / 2 + 16px * var(--bar-zoom)));
	bottom: clamp(110px, 16vh, 180px);
	display: flex;
	flex-direction: column;
	gap: 4px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#overlay > .title-card
{
	pointer-events: none;
}

.title-card.is-shown
{
	opacity: 1;
	transform: none;
}

/* A soft shadow pools behind the title, so it reads even over the film's brightest light, and fades in and out with it. */
.title-card::before
{
	content: "";
	position: absolute;
	inset: -70px -140px -60px -90px;
	z-index: -1;
	background: radial-gradient(ellipse at 38% 58%, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.34) 48%, transparent 74%);
	pointer-events: none;
}

.title-card-number
{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--title-face);
	font-size: 18px;
	letter-spacing: 0.4em;
	color: var(--brass-bright);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

/* A fine brass rule runs on from the numeral, fading as it goes. */
.title-card-number::after
{
	content: "";
	width: 56px;
	height: 1px;
	background: linear-gradient(90deg, var(--brass-bright), rgba(243, 213, 149, 0));
}

.title-card-title
{
	font-family: var(--title-face);
	font-size: clamp(44px, 8vw, 92px);
	line-height: 1;
	color: #fff6e6;
	letter-spacing: 0.03em;
	text-shadow: 0 4px 40px rgba(0, 0, 0, 0.75), 0 0 60px rgba(217, 178, 106, 0.25);
	/* A long title that wraps breaks into balanced lines. */
	text-wrap: balance;
}

.button-card
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(520px, calc(100vw - 40px));
	padding: 34px 32px 30px;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, -46%);
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.button-card.is-shown
{
	opacity: 1;
	transform: translate(-50%, -50%);
}

/* The closing card sits low, under the cathedral's lit front, so the album's last view shows its rose and open doors above the card. */
.closing-card
{
	top: auto;
	bottom: max(28px, 6vh);
	transform: translate(-50%, 4%);
}

.closing-card.is-shown
{
	transform: translate(-50%, 0);
}

/* A card that carries the album's mark shows it above its words. */
.button-card .mark
{
	width: 46px;
	height: 46px;
	margin-bottom: 10px;
}

.button-card-eyebrow
{
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brass);
}

.button-card-heading
{
	font-family: var(--title-face);
	font-size: 38px;
	margin: 0 0 10px;
	color: #fff6e6;
}

.button-card-line
{
	margin: 0 auto 24px;
	max-width: 400px;
	color: var(--ink-soft);
	line-height: 1.5;
}

.button-card-row
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.loader
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	/* The loader takes the width of its line, so a long line stays on one row rather than wrapping at half the screen. */
	width: max-content;
	max-width: calc(100vw - 40px);
	text-align: center;
	opacity: 0;
	transition: opacity 0.4s ease;
}

#overlay > .loader,
#overlay > .curtain
{
	pointer-events: none;
}

.loader.is-shown
{
	opacity: 1;
}

/* While a shared link's card waits for its Play, the loader waits just below the card rather than over its words. */
.start-card.is-shown ~ .loader
{
	top: calc(50% + 228px);
}

.loader-ring
{
	width: 76px;
	height: 76px;
	transform: rotate(-90deg);
}

.loader-track
{
	fill: none;
	stroke: rgba(255, 240, 210, 0.12);
	stroke-width: 3;
}

.loader-fill
{
	fill: none;
	stroke: #e2bd78;
	stroke-width: 3;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.35s ease;
	filter: drop-shadow(0 0 6px rgba(243, 213, 149, 0.6));
}

.loader-line
{
	margin: 0;
	font-family: var(--title-face);
	font-size: 17px;
	color: var(--ink-soft);
	letter-spacing: 0.04em;
}

.curtain
{
	position: fixed;
	inset: 0;
	background: #000;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.curtain.is-closed
{
	opacity: 1;
}
/* #endregion */




/* #region Reduced motion */
/* - When the device asks for reduced motion, the interface's movement settles to quick fades, and the mark stops turning. */
@media (prefers-reduced-motion: reduce)
{
	*,
	*::before,
	*::after
	{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.15s !important;
	}

	.album,
	.track:hover,
	.track.is-focused
	{
		transform: none;
	}
}
/* #endregion */




/* #region Large screens */
/* - On a large, sharp screen, such as a 1440p monitor, the album card, the player's bar, the cards, the loader, and the Instrument Lab's panel grow with it, so their words and controls read at the size they read on a laptop. */
@media (min-width: 1800px) and (min-height: 1000px)
{
	:root
	{
		--bar-zoom: 1.3;
	}

	.album,
	.player-bar,
	.button-card,
	.loader,
	.lab-panel
	{
		zoom: 1.3;
	}

	/* - The zoomed Lab panel keeps its height within the screen. */
	.lab-panel
	{
		max-height: calc((100vh - 40px) / 1.3);
	}
}
/* #endregion */




/* #region Middling widths */
/* - Where the bar grows tight, its buttons keep their icons and drop their words, so the piece's name keeps its room in the middle. */
@media (max-width: 1000px)
{
	.control-wide span
	{
		display: none;
	}
}
/* #endregion */




/* #region Phones */
@media (max-width: 760px)
{
	.album
	{
		left: 10px;
		right: 10px;
		top: auto;
		bottom: 10px;
		width: auto;
		max-height: 64vh;
		padding: 22px 16px 16px;
		transform: translateY(18px);
	}

	.album-head
	{
		margin-bottom: 12px;
	}

	.mark
	{
		width: 40px;
		height: 40px;
	}

	.album-title
	{
		font-size: 30px;
	}

	/* A shared link's card stands tall on a phone, so the loader waits near the foot of the screen, below it. */
	.start-card.is-shown ~ .loader
	{
		top: auto;
		bottom: 6vh;
		transform: translate(-50%, 0);
	}

	/* The album card fills the lower part of a phone, so the loader sits in the space above it, where the film arrives. */
	.album.is-shown ~ .loader
	{
		top: 18vh;
	}

	.player-bar
	{
		left: 8px;
		right: 8px;
		bottom: 8px;
		padding: 6px 10px 10px;
	}

	.player-middle,
	.volume-slider,
	.control-wide span,
	.player-clock
	{
		display: none;
	}

	.player-group
	{
		gap: 0;
	}
	
	.control
	{
		min-width: 40px;
		height: 44px;
		padding: 0 6px;
	}
}
/* #endregion */




/* #region Short screens */
/* - On a short screen, such as a phone turned sideways, the album card sets its title beside its track list, so the list keeps its room, the loader waits in the corner beside the card, and a film's title card sits smaller and higher, clear of the player's bar. */
@media (max-height: 540px) and (min-width: 600px)
{
	.album
	{
		left: 12px;
		right: auto;
		top: 12px;
		bottom: 12px;
		width: min(560px, calc(100vw - 24px));
		max-height: none;
		padding: 18px 14px 14px 20px;
		display: grid;
		grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
		grid-template-rows: 1fr auto auto;
		grid-template-areas: "head tracks" "actions tracks" "foot tracks";
		column-gap: 14px;
		transform: translateX(-18px);
	}

	.album-head
	{
		grid-area: head;
		align-self: end;
		margin-bottom: 14px;
	}

	.mark
	{
		width: 40px;
		height: 40px;
	}

	.album-title
	{
		font-size: 28px;
	}

	.album-tagline
	{
		font-size: 13px;
	}

	.album-actions
	{
		grid-area: actions;
		margin: 0;
	}

	.tracks
	{
		grid-area: tracks;
		margin: 0;
		padding: 0 4px 0 0;
	}

	.track
	{
		padding: 9px 12px;
	}

	.album-foot
	{
		grid-area: foot;
		padding-top: 12px;
		font-size: 12px;
	}

	/* - In the narrow column, the dedication keeps to one line without its rules. */
	.album-foot::before,
	.album-foot::after
	{
		display: none;
	}

	.album.is-shown ~ .loader
	{
		left: auto;
		right: 16px;
		top: auto;
		bottom: 16px;
		transform: none;
		max-width: calc(100vw - min(560px, calc(100vw - 24px)) - 44px);
	}

	.title-card
	{
		bottom: 136px;
	}

	.title-card-title
	{
		font-size: clamp(34px, 12vh, 52px);
	}
}
/* #endregion */