/* The music room uses the reference's typefaces, palette and motion curve. */
#music {position:relative;height:100svh;min-height:660px;box-sizing:border-box;padding:74px 4.5vw 150px;color:#f1f1f1;background:transparent;font-family:a,Arial,sans-serif;line-height:1.2;isolation:isolate;overflow:hidden;touch-action:pan-y}
#music>*:not(.music-canvas) {z-index:1}
#music button,#music input,#music select {font:inherit;color:inherit}
#music button {appearance:none;border:0;background:none;cursor:pointer;padding:0;text-align:left}
#music button:focus-visible,#music a:focus-visible,#music input:focus-visible {outline:1px solid #eee;outline-offset:6px}

/* Full-bleed WebGL field; the invisible stage only anchors the figure. */
.music-canvas {position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s cubic-bezier(.19,1,.22,1)}
.music-canvas.is-live {opacity:1}
.music-wave-fallback {background:radial-gradient(ellipse at 66% 55%,#ffffff10,transparent 40%)}
.music-stage {position:absolute;left:31.5%;right:4.5%;top:205px;bottom:270px;pointer-events:none}

/* Reference line reveal: .y_ clips, .y travels. */
#music .y_ {display:block;overflow:hidden}
#music .y {display:block}
#music:not([data-enter=complete]) .y {transform:translate3d(0,110%,0)}

.music-eyebrow {position:relative;font-size:10px;letter-spacing:.045em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.music-eyebrow .y_:last-child {color:#8c9090}
.music-title {position:absolute;left:31.5%;top:89px;right:4.5%;margin:0;font-family:u,Arial,sans-serif;font-weight:600;font-size:clamp(38px,6.4vw,108px);line-height:.88;letter-spacing:-.045em;text-transform:uppercase;z-index:2;pointer-events:none}
.music-title .y {padding:.04em 0 .06em}
.music-title-text {display:block}

.music-art {position:absolute;left:4.5vw;top:156px;width:19vw;max-width:300px;aspect-ratio:1}
.music-art::before {content:'';position:absolute;inset:10px -10px -10px 10px;border:1px solid #ffffff15;transform:translate(4px,4px);transition:transform .8s}
.music-art-frame {position:relative;width:100%;height:100%;overflow:hidden;box-shadow:0 22px 55px #0005;background:#202324}
.music-art img {width:100%;height:100%;object-fit:cover;filter:saturate(.8);transition:filter .8s;position:relative;transform-origin:50% 60%}
.music-art:hover img,.music-art.playing img {filter:saturate(1)}
.music-art img.music-art-outgoing {position:absolute;inset:0;pointer-events:none;z-index:1}
.music-art::after {content:"";position:absolute;inset:-18px;z-index:-1;background:radial-gradient(ellipse at 50% 50%,#ffffff12,transparent 65%);filter:blur(20px);opacity:0;transition:opacity 1.2s}
.music-art.playing::after {opacity:1}

.music-credit {position:absolute;left:4.5vw;top:calc(174px + min(19vw,300px));width:21vw;font-size:10px;line-height:1.65;letter-spacing:.02em;text-transform:uppercase}
.music-credit strong {font-weight:400;color:#aaa}
.music-track-select {position:absolute;left:4.5vw;top:calc(224px + min(19vw,300px));width:21vw;max-height:calc(100svh - 380px - min(19vw,300px));overflow:auto;scrollbar-width:thin;scrollbar-color:#4a4a4a transparent;touch-action:pan-y}
.music-track-select button {display:flex!important;width:100%;justify-content:space-between;gap:12px;padding:8px 0!important;color:#8c9090!important;font-size:11px!important;border-top:1px solid #ffffff14!important;transition:color .25s}
.music-track-select button[aria-current=true],.music-track-select button:hover {color:#fff!important}
.music-track-select button span:first-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.music-cross {position:absolute;font-size:14px;font-weight:300;color:#656869;line-height:1;pointer-events:none}
.music-cross.one {left:32%;top:210px}.music-cross.two {right:4.5%;top:210px}

.music-transport {position:absolute;left:31.5%;right:4.5%;bottom:174px}
.music-now {display:flex;align-items:center;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.045em;min-height:16px}
.music-now [data-track-title] {color:#aaa}
.music-status {font-size:9px;letter-spacing:.03em;color:#969c9e;display:flex;align-items:center;gap:7px}
.music-status::before {content:'';width:4px;height:4px;background:currentColor;border-radius:50%}
.music-status[data-state=playing] {color:#f1f1f1}
.music-status[data-state=playing]::before {background:#fff;box-shadow:0 0 9px #ffffff88;animation:music-pulse 1.6s ease-in-out infinite}
.music-actions {display:flex;align-items:center;gap:20px;margin:19px 0 23px}
#music .music-play {position:relative;width:64px;height:64px;border:1px solid #777;border-radius:50%;display:grid;place-items:center;transition:background .5s,color .5s,border-color .5s,box-shadow .5s,transform .65s cubic-bezier(.22,1,.36,1);flex-shrink:0}
#music .music-play:hover {background:#ffffff0a;color:#fff;border-color:#f1f1f1;box-shadow:0 0 26px #ffffff12;transform:scale(1.035)}
#music.is-playing .music-play {border-color:#d8d8d8;box-shadow:0 0 30px #ffffff14}
.music-play svg {width:18px;height:18px;fill:currentColor}
.music-play .pause-icon {display:none}.music-play[aria-pressed=true] .pause-icon {display:block}.music-play[aria-pressed=true] .play-icon {display:none}
#music .music-skip {display:grid;place-items:center;width:28px;height:40px;transition:opacity .3s}
#music .music-skip:hover {opacity:.6}
.music-skip svg {width:16px;height:16px;fill:currentColor}
.music-link {font-size:10px;margin-left:auto;display:flex;gap:20px;align-items:center;border-bottom:1px solid #ffffff36;padding:9px 0;letter-spacing:.02em;transition:gap .4s cubic-bezier(.19,1,.22,1)}
.music-link:hover {gap:30px}.music-link span:last-child {font-size:18px}
.music-progress {display:flex;align-items:center;gap:16px;font-size:10px;font-variant-numeric:tabular-nums}
.music-progress time {min-width:30px}.music-progress time:last-child {color:#9a9c9d;text-align:right}
#music input[type=range] {appearance:none;cursor:pointer;height:18px;background:transparent;margin:0;touch-action:none;border:none;min-width:0}
#music input[type=range]::-webkit-slider-runnable-track {height:1px;background:linear-gradient(#f1f1f1,#f1f1f1) 0 0/var(--progress,0%) 100% no-repeat,#ffffff25}
#music input[type=range]::-webkit-slider-thumb {appearance:none;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:#eee;transition:transform .2s}
#music input[type=range]:hover::-webkit-slider-thumb {transform:scale(1.5)}
#music input[type=range]::-moz-range-track {height:1px;background:#ffffff35}#music input[type=range]::-moz-range-progress {height:1px;background:#f1f1f1}#music input[type=range]::-moz-range-thumb {width:7px;height:7px;border:0;border-radius:50%;background:#eee}
.music-progress input {flex:1}
.music-volume {display:flex;align-items:center;gap:10px;margin-left:15px;color:#aaa}
.music-volume svg {width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.2}
#music .music-volume input {width:55px;--progress:75%}

.music-rule {position:absolute;left:4.5vw;right:4.5vw;bottom:127px;height:1px;background:#ffffff27;transform-origin:0 50%}
.music-rail {position:absolute;bottom:0;left:4.5vw;right:4.5vw;height:127px;display:flex;gap:24px;align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#494c4d transparent;touch-action:pan-x;overscroll-behavior:contain}
#music .music-release {display:flex;align-items:center;gap:13px;flex:0 0 195px;position:relative;padding:15px 0;height:84px;box-sizing:border-box}
.music-release-cover {display:block;width:62px;height:62px;flex:0 0 auto;overflow:hidden;opacity:.5;transition:opacity .6s,transform .8s cubic-bezier(.19,1,.22,1)}
.music-release img {width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1.12);transition:filter .6s,transform 1.2s cubic-bezier(.19,1,.22,1)}
.music-release-text {display:grid;gap:9px;font-size:10px;text-transform:uppercase;line-height:1.3;opacity:.46;transition:opacity .5s}
.music-release-text small {font-size:9px;color:#b0b2b2}
#music .music-release[aria-current=true] .music-release-cover,#music .music-release:hover .music-release-cover {opacity:1;transform:translateY(-3px)}
#music .music-release[aria-current=true] img,#music .music-release:hover img {filter:grayscale(0);transform:scale(1)}
#music .music-release[aria-current=true] .music-release-text,#music .music-release:hover .music-release-text {opacity:1}
.music-release::after {content:'';position:absolute;top:-21px;left:0;right:0;height:1px;background:#f1f1f1;transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.19,1,.22,1)}
.music-release[aria-current=true]::after {transform:scaleX(1)}

/* Before the entrance runs, everything the room animates stays hidden. */
#music:not([data-enter=complete]) :is(.music-art,.music-track-select button,.music-cross,.music-status,.music-actions>*,.music-progress,.music-release) {opacity:0}
#music:not([data-enter=complete]) .music-rule {transform:scaleX(0)}

@keyframes music-pulse {50% {opacity:.35}}
@media(min-width:1600px) {
 .music-art{top:190px}.music-title{top:110px}.music-credit{top:calc(208px + min(19vw,300px))}.music-track-select{top:calc(258px + min(19vw,300px));max-height:calc(100svh - 414px - min(19vw,300px))}
 .music-cross.one,.music-cross.two{top:244px}.music-stage{top:250px;bottom:250px}
}
/* Compact layout (phones, tablets on the mobile engine, narrow windows): a
   grid that fits any screen height. The stage (wave) takes the free space, so
   nothing overlaps and the player never needs scrolling. Sizes scale with the
   viewport, and the top padding clears the engine's vw-sized navigation. */
 html.music-compact #music{display:grid;--art:clamp(80px,min(20vw,22vh),210px);grid-template-columns:var(--art) minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(110px,1fr) auto auto;grid-template-areas:"eyebrow eyebrow" "title title" "art credit" "art tracks" "stage stage" "transport transport" "rail rail";column-gap:clamp(20px,3.4vw,36px);row-gap:0;height:auto;min-height:max(100svh,560px);padding:max(72px,calc(11.5vw + 22px)) max(22px,5.6vw) 0;align-content:stretch}
 html.music-compact #music>:is(.music-eyebrow,.music-title,.music-art,.music-credit,.music-track-select,.music-stage,.music-cross,.music-transport,.music-rule,.music-rail){position:relative;inset:auto;width:auto;max-width:none;max-height:none;margin:0}
 html.music-compact .music-eyebrow{grid-area:eyebrow;font-size:clamp(9px,1.4vw,12px);margin-bottom:clamp(18px,3vw,32px)!important}
 html.music-compact .music-eyebrow .y_:last-child{font-size:clamp(8px,1.25vw,11px)}
 html.music-compact .music-title{grid-area:title;min-height:min-content;font-size:clamp(30px,min(10.6vw,8vh),96px);line-height:.94;letter-spacing:-.04em;margin-bottom:clamp(14px,2.6vw,30px)!important}
 html.music-compact .music-art{grid-area:art;grid-row:3/5;width:var(--art)!important;align-self:start}
 html.music-compact .music-art::before{inset:5px -5px -5px 5px;transform:none}
 html.music-compact .music-credit{grid-area:credit;font-size:clamp(9px,1.35vw,12px);line-height:1.7;align-self:start;margin-bottom:6px!important}
 html.music-compact .music-track-select{grid-area:tracks;height:calc(var(--art) - 38px - .6vw);max-height:none!important;overflow:auto;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
 html.music-compact .music-track-select button{font-size:clamp(10px,1.4vw,12px)!important;padding:6px 0!important}
 html.music-compact .music-stage{grid-area:stage;min-height:110px}
 html.music-compact .music-cross{grid-area:stage;align-self:start;margin-top:14px!important}
 html.music-compact .music-cross.one{justify-self:start}
 html.music-compact .music-cross.two{justify-self:end}
 html.music-compact .music-transport{grid-area:transport;padding-bottom:clamp(16px,2.4vw,28px)}
 html.music-compact .music-now{font-size:clamp(9px,1.3vw,11px)}
 html.music-compact .music-status{font-size:clamp(8px,1.2vw,10px)}
 html.music-compact .music-actions{gap:14px;margin:14px 0 16px}
 html.music-compact .music-volume{display:none}
 html.music-compact #music .music-play{height:58px;width:58px}
 html.music-compact .music-link{font-size:clamp(9px,1.3vw,11px);gap:14px}
 html.music-compact .music-rule{grid-area:rail;align-self:start;height:1px}
 html.music-compact .music-rail{grid-area:rail;height:clamp(96px,min(13vw,16vh),140px);gap:20px}
 html.music-compact #music .music-release{flex-basis:170px;height:76px}
 html.music-compact .music-release-cover{width:56px;height:56px}
 html.music-compact .music-release::after{top:-15px}
/* Short screens (iPhone SE and similar). */
@media(max-height:700px){
 html.music-compact #music{--art:80px;padding-top:max(64px,calc(11.5vw + 14px));column-gap:16px}
 html.music-compact .music-eyebrow{margin-bottom:14px!important}
 html.music-compact .music-title{margin-bottom:14px!important}
 html.music-compact .music-actions{margin:10px 0 12px}
 html.music-compact #music .music-play{height:50px;width:50px}
 html.music-compact .music-transport{padding-bottom:10px}
 html.music-compact .music-rail{height:92px}
 html.music-compact #music .music-release{height:68px}
 html.music-compact .music-release-cover{width:48px;height:48px}
}
/* Landscape tablets: the vw-sized engine navigation is tall, so tighten. */
@media(orientation:landscape) and (min-width:761px){
 html.music-compact #music{--art:clamp(80px,18vh,180px);padding-top:calc(11.5vw + 6px)}
 html.music-compact .music-eyebrow{margin-bottom:14px!important}
 html.music-compact .music-title{font-size:clamp(30px,7.4vh,80px);margin-bottom:12px!important}
 html.music-compact .music-actions{margin:8px 0 10px}
 html.music-compact .music-transport{padding-bottom:12px}
 html.music-compact .music-rail{height:clamp(90px,13vh,120px)}
}

/* Mobile photos (plain images): edges dissolve into the page like the desktop WebGL planes. */
#ab-i img,#ho-i img {-webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 42%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 58% 56% at 50% 42%,#000 45%,transparent 100%)}
#ho-i img {-webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 38%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 66% at 50% 38%,#000 55%,transparent 100%)}
#ab-i,#ho-i {background-color:transparent!important}


/* Release rail: no scrollbar, edges fade where more releases continue, a drag
   cursor on desktop and snapping for touch swipes. */
#music .music-rail{scrollbar-width:none;cursor:grab;--fade-l:0px;--fade-r:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%)}
#music .music-rail::-webkit-scrollbar{display:none}
#music .music-rail.more-left{--fade-l:64px}
#music .music-rail.more-right{--fade-r:64px}
#music .music-rail.is-dragging{cursor:grabbing}
#music .music-rail.is-dragging .music-release{pointer-events:none}
@media (pointer:coarse){#music .music-rail{cursor:auto;scroll-snap-type:x proximity}#music .music-release{scroll-snap-align:start}}

/* Play button: the same as Explore the music and Start the drive - a white
   disc grows inside the ring, the mark turns dark. */
#music .music-play,#music.is-playing .music-play{border:1px solid #fff;color:#fff;background:none;box-shadow:none;transform:none;transition:color .6s cubic-bezier(.16,1,.3,1)}
#music .music-play::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .6s cubic-bezier(.16,1,.3,1)}
#music .music-play svg{position:relative}
#music .music-play:is(:hover,:focus-visible){color:#1a1a1a;background:none;box-shadow:none;transform:none}
#music .music-play:is(:hover,:focus-visible)::before{transform:scale(1)}

/* The play button at the size of the site's other round play buttons, with a
   small fine mark instead of the large heavy one. */
#music .music-play,html.music-compact #music .music-play{width:48px;height:48px}
#music .music-play svg{width:12px;height:12px}

/* The speaker is a mute button. */
#music .music-mute{display:grid;place-items:center;width:28px;height:28px;margin:-7px -4px -7px -7px;color:inherit;background:none;border:0;padding:0;cursor:pointer;transition:color .3s}
#music .music-mute:hover{color:#fff}
#music .music-mute .mute-off,#music .music-mute[aria-pressed=true] .mute-on{display:none}
#music .music-mute[aria-pressed=true] .mute-off{display:inline}
#music.is-muted .music-volume input{opacity:.35}

/* Track list: no scrollbar. It flashed in while the rows animated in on load;
   the list still scrolls with the wheel and by touch when it is longer. */
#music .music-track-select{scrollbar-width:none}
#music .music-track-select::-webkit-scrollbar{display:none}

/* Phones: a shorter About portrait, cropped from the top so the head stays in
   with room above it. The mask darkens into the page before every edge of
   the box, so the photo's rectangle never shows. */
#ab-i{aspect-ratio:4/3.7!important}
#ab-i img{object-position:50% 0%;-webkit-mask-image:radial-gradient(closest-side at 50% 47%,#000 50%,rgba(0,0,0,.8) 64%,rgba(0,0,0,.45) 80%,rgba(0,0,0,.15) 92%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 47%,#000 50%,rgba(0,0,0,.8) 64%,rgba(0,0,0,.45) 80%,rgba(0,0,0,.15) 92%,transparent 100%)}

/* Upright phones: a larger cover, the track list under it at full width with
   room for about five tracks, and a lower wave. */
@media (max-width:760px) and (orientation:portrait){
html.music-compact #music{--art:32vw;grid-template-rows:auto 22.4vw auto auto minmax(80px,.6fr) auto auto;grid-template-areas:"eyebrow eyebrow" "title title" "art credit" "tracks tracks" "stage stage" "transport transport" "rail rail"}
html.music-compact .music-credit{align-self:stretch;min-height:var(--art);display:flex;flex-direction:column;justify-content:flex-end}
html.music-compact .music-art{align-self:start;height:var(--art)}
html.music-compact #music{padding-left:8vw;padding-right:8vw}
html.music-compact .music-track-select{height:42vw;max-height:42vw!important;margin-top:4vw!important;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
html.music-compact .music-track-select button{font-size:12px!important;padding:8px 0!important}
html.music-compact .music-stage{min-height:80px}
}

@media (max-width:760px) and (orientation:portrait){html.music-compact .music-title{align-self:start}}

/* Mobile home photo: no edge mask - the image already fades into its backdrop. */
#ho-i img{-webkit-mask-image:none!important;mask-image:none!important}
/* Mobile home: the photo's glitch bursts (music.js), hidden between bursts. */
#ho-i{position:relative}
#ho-i .ho-g{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}

/* The eyebrow line is hidden but keeps its space, so nothing below moves. */
#music .music-eyebrow{visibility:hidden}
/* Upright phones: the eyebrow line is removed entirely, so the title moves up
   into its place and the release rail at the bottom comes into view. */
@media (max-width:760px) and (orientation:portrait){html.music-compact #music .music-eyebrow{display:none}}
/* Shorter phone screens (and phones with the browser bars showing): a smaller
   cover and a shorter track list, so the release rail always fits. */
@media (max-width:760px) and (orientation:portrait) and (max-height:820px){
html.music-compact #music{--art:27vw}
html.music-compact .music-track-select{height:31vw;max-height:31vw!important;margin-top:3vw!important}
}
@media (max-width:760px) and (orientation:portrait) and (max-height:700px){
html.music-compact #music{--art:22vw;padding-top:calc(11.5vw + 4px)}
html.music-compact .music-track-select{height:21vw;max-height:21vw!important;margin-top:2vw!important}
html.music-compact .music-stage{min-height:56px}
}