.album{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);padding:12px 0 70px;align-items:start}.album-art img{display:block;width:100%;height:auto;border:1px solid #ffffff15}.album-art .micro{margin:20px 0 12px}.album-art>a{font-size:13px;color:#bbc6bf}.album-music>h2{font-size:clamp(30px,3vw,44px);font-weight:300;margin:8px 0 24px}.album-music>.micro{margin-top:0}.player{padding:18px;background:#111a1e;border:1px solid #293437}.player>p:first-child{margin:0 0 14px;font-size:14px;color:#e6e6d6}audio{width:100%;display:block;height:40px;color-scheme:dark}.transport{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.transport button{font-size:12px;padding:8px}.transport #play-album{border:1px solid #829180;padding:8px 16px}.transport button:disabled{opacity:.35;cursor:default}#audio-status{font-size:12px;color:#dfb987;margin:0}#audio-status:not(:empty){margin-top:12px}.track-list{list-style:none;padding:0;margin:20px 0 0}.track{width:100%;display:flex;align-items:center;gap:18px;padding:13px 10px;text-align:left;border-bottom:1px solid #253033;font-size:14px}.track-number{font:11px monospace;color:#7f9395}.track-title{flex:1}.track-state{font-size:10px;color:#a9ba9f}.track:hover,.track[aria-current=true]{background:#182224}.track[aria-current=true] .track-title{color:#dbe7c4}@media(max-width:760px){.album{grid-template-columns:1fr;gap:30px}.album-art{max-width:480px;width:100%;margin:auto}.album-music>h2{margin-bottom:20px}}
.album-music>h2{margin-bottom:6px}.album-subtitle{color:#a9b99f;margin:0 0 24px;font-size:16px}.player{background:linear-gradient(135deg,#1b282b,#0c1317);border-color:#41504b;box-shadow:0 16px 45px #0003}.seek-row{display:flex;align-items:center;gap:12px;font:11px monospace;color:#afbab3}.seek-row input{flex:1;min-width:0}input[type=range]{accent-color:#c4d2b2;cursor:pointer;height:24px}.transport{margin-top:18px}.transport #play-album{min-width:108px;border-radius:3px;background:#c4d2b2;color:#111b19;font-weight:600;padding:12px 24px}.volume{display:flex;gap:14px;align-items:center;justify-content:flex-end;font:10px monospace;color:#aebbb2;margin-top:16px}.volume input{width:90px}.album-description{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,7vw,100px);padding:50px 0 70px;border-top:1px solid #2b3635}.album-description h2{font-size:32px;font-weight:300;margin:12px 0 24px}.album-description h3{font-size:15px;font-weight:500;color:#dde4d8;margin:30px 0 12px}.album-description aside>h3:first-child{margin-top:0}.album-description p,.album-description li{font-size:15px;line-height:1.9;color:#aeb9b9}.album-description ul{padding-left:18px}.album-credits{border-top:1px solid #2b3635;margin-top:30px;padding-top:6px}@media(max-width:760px){.album-description{grid-template-columns:1fr;padding-top:30px}}
#album-audio{display:none}
/* Balance the album cover with a matching-height listening panel. */
@media(min-width:761px){
.album{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.album-art{position:relative}
.album-music{height:var(--album-cover-size,480px);display:flex;flex-direction:column;min-height:0}
.album-music>.micro{margin-bottom:4px}
.album-music>h2{font-size:32px;margin:0 0 4px}
.album-subtitle{margin-bottom:14px}
.album-music .player{flex:none;padding:12px 16px}
.album-music .transport{margin-top:8px}
.album-music .volume{margin-top:6px}
.album-music .track-list{flex:1;min-height:0;overflow-y:auto;margin:12px 0 0;scrollbar-width:thin;scrollbar-color:#52635b #111a1e}
.album-music .track{padding:11px 10px}
}
/* Compact transport strip and complete, unscrolled album sequence. */
.album{grid-template-columns:minmax(0,500px) minmax(0,440px);gap:clamp(28px,4vw,60px)}
.album-music{height:auto;min-height:var(--album-cover-size,0px);display:flex;flex-direction:column}
.album-music>.micro{margin:0 0 4px}.album-music>h2{font-size:30px;margin:0 0 3px}.album-subtitle{font-size:13px;margin:0 0 12px}
.album-music .player{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:8px 12px;box-shadow:none;flex:none}
.player #now-playing{grid-column:1/-1;font-size:11px;margin:0 0 3px}
.player .seek-row{grid-column:1/-1;font-size:10px;gap:8px;height:18px}
.player input[type=range]{height:16px}
.album-music .transport{justify-content:flex-start;gap:5px;margin:3px 0 0}
.transport button,.transport #play-album{min-width:28px;height:26px;padding:3px 6px;border:0;background:none;color:#dce5d6;font-size:12px;border-radius:0}
.album-music .volume{margin:3px 0 0;gap:7px;font-size:9px}.volume input{width:58px}
#audio-status{grid-column:1/-1}
.album-music .track-list{overflow:visible;flex:1;display:flex;flex-direction:column;margin:10px 0 0;min-height:0}
.track-list li{display:flex;flex:1}
.album-music .track{padding:6px 9px;min-height:29px;font-size:12px;gap:12px}
@media(max-width:760px){.album{grid-template-columns:1fr}.album-music{min-height:0}.album-music .track{min-height:40px}.album-music .track-list{flex:none}.transport button,.transport #play-album{height:36px;min-width:36px}}
/* Album art, controls and tracks share a single listening card. */
.album{display:block;padding:12px 0 55px}
.album-music{width:min(100%,660px);height:auto;min-height:0;padding:24px;background:linear-gradient(145deg,#182125,#0d1417);border:1px solid #ffffff12;border-radius:16px;box-shadow:0 20px 50px #0003}
.player-header{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start;margin-bottom:20px}
.player-cover{display:block;width:150px;height:150px;object-fit:contain;border-radius:6px}
.player-heading{min-width:0}.player-heading>.micro{margin:0 0 5px;font-size:9px}.player-heading>h2{font-size:27px;font-weight:400;margin:0 0 5px}.player-heading .album-subtitle{margin-bottom:12px}
.album-music .player{padding:0;border:0;background:none;box-shadow:none}
.album-music .track-list{margin:0;display:block;overflow:visible}
.track-list li{display:block}
.album-music .track{min-height:35px;padding:8px 10px;border-bottom:1px solid #ffffff09;border-radius:4px;font-size:13px}
.track:hover,.track[aria-current=true]{background:#ffffff07}
.album-project-link{display:inline-block;font-size:12px;color:#b7c5ad;margin:20px 10px 0}
@media(max-width:500px){.album-music{padding:16px}.player-header{grid-template-columns:100px minmax(0,1fr);gap:14px}.player-cover{width:100px;height:100px}.player-heading>h2{font-size:21px}.player-heading>.micro{display:none}.album-music .volume{grid-column:1/-1;justify-content:flex-start}.album-music .track{min-height:40px}}
/* Place the album notes alongside the listening card. */
.album-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:start;padding:12px 0 64px}
.album-layout .album{padding:0;min-width:0}.album-layout .album-music{width:100%}
.album-layout .album-description{display:block;padding:0;border:0;min-width:0}
.album-layout .album-description>div>.micro{margin-top:0}.album-layout .album-description h2{margin-top:8px}
.album-layout .album-description aside{margin-top:30px}
@media(max-width:1050px){.album-layout{grid-template-columns:1fr}.album-layout .album{max-width:660px}.album-layout .album-description{max-width:760px}}

.demo-main .album-layout{padding-top:38px}

.player-credits{padding:16px 10px 0;color:#aeb9b9;font-size:12px;line-height:1.8}.player-credits p{margin:0 0 10px}

.player-credits{padding-left:0;padding-right:0}
.album-feature-cover{margin:28px 0 0;width:100%}
.album-feature-cover img{display:block;width:100%;height:auto;border:1px solid #293638;border-radius:4px;box-shadow:0 14px 36px #0004}

.player-credits{display:grid;grid-template-columns:1fr 2fr;gap:16px 24px;padding-top:22px;line-height:1.6}
.player-credits .credit-label{display:block;margin-bottom:5px;color:#89979e;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.player-credits .credit-detail p{margin:0;font-size:13px;color:#c1c9cc}
.credit-separator{padding:0 5px;color:#75838a}
.player-credits .credit-rights{grid-column:1/-1;margin:0;color:#89979e;font-size:11px}
@media(max-width:500px){.player-credits{grid-template-columns:1fr;gap:14px}}

.player-credits{grid-template-columns:minmax(130px,.8fr) minmax(0,2fr)}
.player-credits .credit-detail .credit-rights{display:inline-block;margin-left:12px;white-space:nowrap;color:#89979e;font-size:11px}
@media(max-width:500px){.player-credits{grid-template-columns:1fr}}

/* Frame the complete album story alongside the listening card. */
.album-layout .album-description{padding:28px 30px;background:linear-gradient(145deg,#141e21,#0b1215);border:1px solid #304044;border-radius:16px;box-shadow:0 16px 40px #0003}
.album-layout .album-description aside>p:last-child{margin-bottom:0}
@media(max-width:600px){.album-layout .album-description{padding:24px 20px}}

/* Use drawn icons on phones so iOS cannot substitute blue emoji. */
@media(max-width:760px){
 .player-header{grid-template-columns:80px minmax(0,1fr);gap:4px 16px;align-items:center;margin-bottom:20px}
 .player-header .player-cover{width:80px;height:80px;grid-row:1/3}
 .player-heading{display:contents}
 .player-heading>.micro{display:none}
 .player-heading>h2{grid-column:2;margin:0;align-self:end;font-size:24px}
 .player-heading .album-subtitle{grid-column:2;margin:0;align-self:start}
 .album-music .player{grid-column:1/-1;grid-template-columns:1fr;margin-top:18px;gap:10px}
 .player #now-playing{font-size:13px;margin:0}
 .player .seek-row{height:28px}
 .album-music .transport{grid-column:1/-1;justify-content:center;gap:24px;margin:0}
 .transport button,.transport #play-album{position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;min-width:48px;padding:0;font-size:0;border-radius:50%;border:1px solid #ffffff24;background:#ffffff06}
 .transport #play-album{width:56px;height:56px;background:linear-gradient(145deg,#344349,#1c292e);color:#e5ebdf;border:1px solid #9fac9970;box-shadow:inset 0 1px 0 #ffffff12,0 4px 12px #0003}
 .transport button::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
 .transport #play-album[aria-label="Play"]::before{margin-left:1px}
 .transport #play-album:active{background:#40514b}
 .transport button::before,.track-state::before{content:"";display:block;width:18px;height:20px;background:currentColor;clip-path:polygon(10% 0,100% 50%,10% 100%)}
 .transport #previous::before{clip-path:polygon(0 0,15% 0,15% 45%,100% 0,100% 100%,15% 55%,15% 100%,0 100%)}
 .transport #next::before{clip-path:polygon(0 0,85% 45%,85% 0,100% 0,100% 100%,85% 100%,85% 55%,0 100%)}
 .transport #play-album[aria-label="Pause"]::before,.track[data-playing="true"] .track-state::before{clip-path:polygon(10% 0,40% 0,40% 100%,10% 100%,10% 0,60% 0,90% 0,90% 100%,60% 100%,60% 0)}
 .album-music .volume{grid-column:1/-1;justify-content:center;margin:0;gap:12px;font-size:10px}
 .album-music .volume input{width:100px;min-height:28px}
 .album-music .track{gap:12px;min-height:48px}
 .track-state{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;font-size:0}
 .track-state::before{width:10px;height:12px}
 .transport button:focus-visible,.track:focus-visible{outline:2px solid #c4d2b2;outline-offset:3px}
}