/* The CD housing stays fixed; each collection chooses its own stereo display. */
.home-music.window {
    --music-ink: #15200f;
    --music-display: #c9d3ac;
    --music-detail: #3b4b2d;
    --music-line: #839365;
    box-sizing: border-box;
    height: 132px;
    flex: 0 0 132px;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 2px solid;
    border-color: #fff #555 #555 #fff;
    background: var(--w98-gray);
    box-shadow: 0 0 0 1px #808080;
    color: #151515;
}
.home-music [hidden], .home-music-player [hidden] { display: none !important; }
.home-music-bar { flex: 0 0 20px; box-sizing: border-box; gap: 5px; }
.home-music-bar .window-title { margin: 0; padding: 0; font-size: 11px; font-weight: normal; }
.home-music-source { font: 11px 'PixelOperatorMono', monospace; letter-spacing: 1px; }
.home-music-stage { min-height: 0; flex: 1; padding: 5px 8px 0; }
.home-music-entry { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; min-width: 0; height: 100%; box-sizing: border-box; }
.home-music-art { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
.home-music-cover, .home-music-pixel-cover { display: block; box-sizing: border-box; width: 60px; height: 60px; max-width: 100%; object-fit: contain; background: #222; border: 1px solid; border-color: #fff #777 #777 #fff; box-shadow: 1px 1px 0 #404040; image-rendering: auto; }
.home-music-pixel-cover { display: none; }
.home-music .home-music-art.has-cover > span { display: none; }
.home-music-disc { display: block; position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #7f848a; background: conic-gradient(#e3e7dd, #8e9caa 15%, #f6f5c9 26%, #e4f1ed 35%, #929bac 50%, #f4e2f4 65%, #f7fff0 78%, #939da9 90%, #e3e7dd); box-shadow: inset 0 0 0 4px #ffffff60, 1px 2px 0 #0004; }
.home-music-disc::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; border: 1px solid #8a8f87; background: #c0c0c0; box-shadow: 0 0 0 5px #e8eadc88; }
.home-music-display { display: grid; grid-template-columns: minmax(0, 1fr) 82px; min-width: 0; padding: 4px 6px; border: 3px solid; border-color: #353a31 #e9e9dd #e9e9dd #353a31; background: var(--music-display); background-image: radial-gradient(#27381816 .6px, transparent .8px); background-size: 3px 3px; color: var(--music-ink); font-family: 'PixelOperatorMono', monospace; box-shadow: inset 0 0 0 1px var(--music-line); }
.home-music-copy { min-width: 0; align-self: center; }
.home-music-kind { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; font-size: 11px; line-height: 12px; letter-spacing: 1px; white-space: nowrap; }
.home-music-badge { display: inline-block; padding: 1px 3px 0; color: var(--music-display); background: var(--music-ink); font-weight: bold; }
.home-music-format { overflow: hidden; text-overflow: ellipsis; color: var(--music-detail); font-size: 11px; }
.home-music-title, .home-music-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-music-title { margin: 0; font-size: 24px; line-height: 23px; font-weight: bold; }
.home-music-detail { margin: 2px 0 0; font-size: 12px; line-height: 13px; color: var(--music-detail); }
.home-music-ascii { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 7px; border-left: 1px dashed var(--music-line); color: var(--music-detail); }
.home-music-ascii > span { font-size: 11px; line-height: 12px; letter-spacing: 1px; }
.home-music-ascii pre { margin: 1px 0 0; font: 11px/11px 'PixelOperatorMono', monospace; white-space: pre; }
.home-music-footer { height: 31px; flex: 0 0 31px; box-sizing: border-box; display: flex; align-items: center; padding: 3px 8px; }
.home-music-controls { display: flex; align-items: center; gap: 3px; }
.home-music .button-98, .home-music-track-play { min-width: 28px; height: 23px; padding: 1px 5px 3px; border-width: 2px; border-color: #fafafa #555 #555 #fafafa; box-shadow: inset 0 -3px #999, 0 1px #555; background: linear-gradient(#e4e4e4 0 65%, #bcbcbc 65%); color: #222; font-size: 11px; font-family: 'PixelOperatorMono', monospace; }
.home-music .button-98:active, .home-music .button-98[aria-pressed="false"], .home-music-track-play[aria-pressed="true"] { border-color: #555 #e5e5e5 #e5e5e5 #555; box-shadow: inset 0 2px #777; padding-top: 3px; padding-bottom: 1px; background: #b5b5b5; }
#home-music-auto { min-width: 46px; }
#home-music-position { min-width: 36px; text-align: center; font: 12px 'PixelOperatorMono', monospace; }
.home-music-shelf { overflow: hidden; white-space: nowrap; max-width: calc(100% - 110px); font: 11px 'PixelOperatorMono', monospace; color: #444; letter-spacing: .5px; }
.home-music-controls:not([hidden]) + .home-music-shelf { display: none; }
.home-music-actions { position: absolute; bottom: 4px; right: 8px; display: flex; align-items: center; gap: 3px; }
.home-music .home-music-listen { gap: 5px; padding-left: 7px; padding-right: 7px; }
.home-music-listen:not([hidden]) + .home-music-link .home-music-external-label { display: none; }
.home-music .home-music-link { min-width: 25px; color: #000070; text-decoration: none; }
.home-music :focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }
.home-music-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.home-music-dither { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; z-index: 2; }
.home-music-stage > .home-music-dither { inset: 25px 8px 31px; width: calc(100% - 16px); height: calc(100% - 56px); }

/* Amber glass: a segmented readout in the same silver housing. */
.home-music[data-display-style="amber"], .home-music-player[data-display-style="amber"] { --music-ink: #ffd67c; --music-display: #281e10; --music-detail: #e3b768; --music-line: #745628; }
.home-music[data-display-style="amber"] .home-music-display, .home-music-player[data-display-style="amber"] .home-music-display { border-color: #34302a #e0ddd4 #e0ddd4 #34302a; background-image: repeating-linear-gradient(0deg, #0003 0 1px, transparent 1px 3px); }
.home-music[data-display-style="amber"] .home-music-title, .home-music-player[data-display-style="amber"] .home-music-title { text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 3px #ffd67c66; }
.home-music[data-display-style="amber"] .home-music-ascii, .home-music-player[data-display-style="amber"] .home-music-ascii { border-left-style: solid; }

/* Pixel deck: cover and lettering share one phosphor screen. */
.home-music[data-display-style="pixel"], .home-music-player[data-display-style="pixel"] { --music-ink: #cff4a9; --music-display: #101c11; --music-detail: #a6c88a; --music-line: #48643b; }
.home-music[data-artwork-in-display="true"] .home-music-entry { grid-template-columns: 56px minmax(0, 1fr); gap: 6px; padding: 3px 6px; border: 3px solid; border-color: #353a31 #e9e9dd #e9e9dd #353a31; background: var(--music-display); box-shadow: inset 0 0 0 1px var(--music-line); }
.home-music[data-artwork-in-display="true"] .home-music-display { border: 0; box-shadow: none; padding: 0; background: transparent; }
.home-music[data-artwork-in-display="true"] .home-music-cover, .home-music[data-artwork-in-display="true"] .home-music-pixel-cover { width: 54px; height: 54px; border: 0; box-shadow: none; filter: grayscale(1) sepia(1) hue-rotate(32deg) saturate(1.4) contrast(1.35); }
.home-music[data-artwork-in-display="true"][data-display-style="amber"] .home-music-art { filter: sepia(1) saturate(1.6); }
.home-music[data-artwork-in-display="true"] .home-music-pixel-cover:not([hidden]) { display: block; image-rendering: pixelated; }
.home-music[data-artwork-in-display="true"] .home-music-art:has(.home-music-pixel-cover:not([hidden])) .home-music-cover { display: none; }
.home-music[data-artwork-in-display="true"] .home-music-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #101c1140 0 1px, transparent 1px 3px); }
.home-music[data-display-style="pixel"] .home-music-title, .home-music-player[data-display-style="pixel"] .home-music-title { letter-spacing: .5px; }

.home-music-player.window { position: fixed; inset: 0; width: min(720px, calc(100vw - 12px)); height: 640px; max-width: calc(100vw - 12px); max-height: calc(100dvh - 16px); box-sizing: border-box; margin: auto; padding: 0; overflow: hidden; color: #111; background: var(--w98-gray); border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 2px 2px 0 #000; }
.home-music-player:not([open]) { display: none; }
.home-music-player::backdrop { background: #0009; }
.home-music-player > .window-bar { flex: 0 0 22px; gap: 5px; }
.home-music-player .window-title { margin: 0; padding: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.home-music-player .window-buttons { flex-shrink: 0; }
.home-music-player-body { min-height: 0; flex: 1; padding: 8px; display: grid; grid-template-rows: 78px 240px minmax(0, 1fr) auto minmax(34px, auto); gap: 8px; overflow: hidden; }
.home-music-player-media { grid-row: 2; position: relative; min-width: 0; height: 240px; background: #181818; }

#home-music-player-frame { height: 240px; display: flex; align-items: center; background: #181818; }
#home-music-player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.home-music-player[data-provider="spotify"] #home-music-player-frame iframe { height: 152px; }

.home-music-now-playing { grid-row: 1; margin: 0; min-width: 0; }
.home-music-player-queue { grid-row: 3; min-height: 0; overflow-y: auto; border: 2px solid; border-color: #777 #fff #fff #777; background: #eceee4; scrollbar-width: thin; }
.home-music-track-list { margin: 0; padding: 0; list-style: none; }
.home-music-track { display: grid; grid-template-columns: 42px 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-bottom: 1px solid #b5b5ac; color: #171717; }
.home-music-track-art { display: block; width: 42px; height: 42px; box-sizing: border-box; overflow: hidden; border: 1px solid #909585; background: #d6d9ce url('/static/sprites/cd_drive-5.png') center / 22px no-repeat; }
.home-music-track-art img { display: block; width: 100%; height: 100%; object-fit: contain; background: #181818; }
.home-music-track:last-child { border-bottom: 0; }
.home-music-track:nth-child(even) { background: #e2e6d8; }
.home-music-track:has([aria-pressed="true"]) { background: #cbd7b6; }
.home-music-track-play { width: 30px; min-height: 30px; padding: 2px; }
.home-music-track-copy { display: flex; min-width: 0; flex-direction: column; gap: 1px; font-family: 'PixelOperatorMono', monospace; }
.home-music-track-title { font-size: 17px; font-weight: bold; line-height: 20px; color: #172410; }
.home-music-track-artist { color: #59604e; font-size: 13px; line-height: 16px; letter-spacing: .4px; }
.home-music-track-source { font-size: 11px; color: #000080; white-space: nowrap; }
.home-music-player-footer { grid-row: 5; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
#home-music-player-status { min-width: 0; overflow-wrap: anywhere; margin: 0; font: 12px/1.2 'PixelOperatorMono', monospace; }
#home-music-player-open { flex-shrink: 0; font-size: 11px; color: #000080; }
.home-music-player :focus-visible { outline: 2px dotted #000080; outline-offset: 2px; }

/* Keep the longest welcome tab readable in the existing fixed grid cell. */
.home-welcome:has(.home-music) #home-welcome-pane-work ul { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 0; margin: 6px 0; list-style: none; }
.home-welcome:has(.home-music) #home-welcome-pane-work li::before { content: "> "; }
.home-welcome:has(.home-music) .home-welcome-term-idle { margin-top: 4px !important; }
@media (max-width: 900px) {
    .home-music.window { margin: 0 8px; }
}
@media (min-width: 601px) and (max-width: 760px) {
    .home-welcome:has(.home-music) { gap: 4px; }
    .home-welcome:has(.home-music) .home-welcome-head { flex-wrap: nowrap; gap: 6px; }
    .home-welcome:has(.home-music) .home-welcome-heading { min-width: 0; }
    .home-welcome:has(.home-music) .home-welcome-title { font-size: 2rem; white-space: nowrap; }
    .home-music.window { height: 84px; flex-basis: 84px; }
    .home-music-entry { grid-template-columns: 24px minmax(0, 1fr); gap: 5px; }
    .home-music-art { width: 24px; height: 24px; }
    .home-music-cover { width: 24px; height: 24px; }
    .home-music .home-music-detail, .home-music .home-music-format, .home-music .home-music-ascii { display: none; }
    .home-music-disc { width: 21px; height: 21px; }
    .home-music-disc::after { inset: 7px; box-shadow: none; }
    .home-music .home-music-display { display: block; padding: 0 4px; border-width: 2px; }
    .home-music .home-music-copy { display: flex; align-items: center; gap: 6px; height: 100%; }
    .home-music .home-music-kind { flex: 0 0 auto; margin: 0; letter-spacing: 0; }
    .home-music .home-music-title { font-size: 19px; line-height: 21px; }
    .home-music-stage { padding-top: 3px; }
    .home-music-stage > .home-music-dither { top: 23px; height: calc(100% - 54px); }
    .home-music[data-artwork-in-display="true"] .home-music-entry { grid-template-columns: 20px minmax(0, 1fr); padding: 0 3px; gap: 5px; border-width: 2px; }
    .home-music[data-artwork-in-display="true"] .home-music-art { width: 20px; height: 20px; }
    .home-music[data-artwork-in-display="true"] .home-music-cover, .home-music[data-artwork-in-display="true"] .home-music-pixel-cover { width: 20px; height: 20px; }
}
@media (max-width: 460px) {
    .home-music-entry { grid-template-columns: 44px minmax(0, 1fr); gap: 6px; }
    .home-music-cover { width: 44px; height: 44px; }
    .home-music-disc { width: 40px; height: 40px; }
    .home-music-disc::after { inset: 15px; }
    .home-music-display { grid-template-columns: minmax(0, 1fr); padding: 4px 5px; }
    .home-music-ascii { display: none; }
    .home-music-title { font-size: 21px; }
    .home-music-kind { gap: 4px; letter-spacing: 0; }
    .home-music-stage { padding-left: 6px; padding-right: 6px; }
    .home-music-actions { right: 6px; }
    .home-music-footer { padding-left: 6px; }
    .home-music-controls { gap: 2px; }
    .home-music .button-98 { min-width: 25px; padding-left: 3px; padding-right: 3px; }
    #home-music-position { min-width: 31px; }
    #home-music-auto { min-width: 43px; }
    .home-music[data-artwork-in-display="true"] .home-music-entry { grid-template-columns: 44px minmax(0, 1fr); padding: 3px 4px; gap: 6px; }
    .home-music[data-artwork-in-display="true"] .home-music-cover, .home-music[data-artwork-in-display="true"] .home-music-pixel-cover { width: 42px; height: 42px; }
    .home-music-track { grid-template-columns: 38px 30px minmax(0, 1fr); gap: 5px 7px; padding: 7px 6px; }
    .home-music-track-art { width: 38px; height: 38px; grid-row: span 2; }
    .home-music-track-source { grid-column: 3; justify-self: start; }
    .home-music-track-play { grid-row: span 2; }
}

.home-music-player { --music-ink: #15200f; --music-display: #c9d3ac; --music-detail: #3b4b2d; --music-line: #839365; }
.home-music-display:has(.home-music-ascii[hidden]) { grid-template-columns: minmax(0, 1fr); }
#home-music-player-placeholder { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #c1cbb5; font: 15px 'PixelOperatorMono', monospace; }
#home-music-player-notice { grid-row: 4; margin: 0; font: 12px/1.2 'PixelOperatorMono', monospace; }
#home-music-player-retry { font-size: 12px; }
[data-music-marquee] { min-width: 0; display: block; overflow: hidden; white-space: nowrap; text-overflow: clip; }
[data-music-marquee-text] { display: inline-block; width: max-content; max-width: none; vertical-align: top; }
[data-music-marquee].is-overflowing > [data-music-marquee-text] { animation: music-marquee var(--music-scroll-duration, 12s) linear infinite alternate; }
[data-music-marquee]:hover > [data-music-marquee-text] { animation-play-state: paused; }
@keyframes music-marquee { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--music-scroll-distance)); } }
@media (prefers-reduced-motion: reduce) { [data-music-marquee].is-overflowing > [data-music-marquee-text] { animation: none; } }
@media (max-height: 600px) { .home-music-player-body { grid-template-rows: 78px 240px 180px auto minmax(34px, auto); overflow-y: auto; } }