html body #app .ha-player{box-sizing:border-box;min-width:0;position:relative;overflow:hidden;padding:30px 24px 20px;border:1px solid #607d88!important;border-radius:18px!important;background:linear-gradient(180deg,#101b25b8,#03080df5),url('world-coast.webp') center/cover!important;color:#f6f9ff!important;font-family:Arial,Helvetica,sans-serif!important}
html body #app .ha-title{margin:0 0 56px!important;min-height:2.8em;overflow-wrap:anywhere;font-size:clamp(19px,3vw,27px)!important;font-weight:750;line-height:1.4!important;color:#fff!important;text-shadow:0 2px 9px #000}
html body #app .ha-timeline{margin-top:12px;background:transparent!important}.ha-times{display:flex;justify-content:space-between;font-size:13px;font-variant-numeric:tabular-nums;color:#d9e4f0!important;margin:0 2px 10px}
html body #app input.ha-seek{display:block;width:100%;height:30px;padding:0;margin:0;accent-color:#fff;cursor:pointer;background:transparent!important}
html body #app .ha-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:transparent!important}
html body #app .ha-controls .ha-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;min-height:44px;height:44px;margin:0;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#f4f8ff!important;font-size:0!important;line-height:1;clip-path:none!important;box-shadow:none!important}
html body #app .ha-button::before{display:block;position:static;background:none!important;font-family:Arial,Helvetica,sans-serif;font-size:26px;line-height:1;color:inherit}
html body #app .ha-prev::before{content:'⏮'}.ha-next::before{content:'⏭'}.ha-repeat::before{content:'↻'}
html body #app .ha-controls .ha-play{width:68px;height:68px;min-height:68px;flex-basis:68px;background:#fff!important;color:#091019!important}
html body #app .ha-play::before{content:'▶';font-size:30px;transform:translateX(2px)}html body #app .ha-play[data-playing=true]::before{content:'Ⅱ';transform:none}
html body #app .ha-repeat[data-enabled=true]{color:#72e5ac!important}
html body #app .ha-controls .ha-button:disabled{opacity:.32!important;cursor:not-allowed}
html body #app .ha-controls .ha-speed{flex:0 0 62px;width:62px;min-width:0;min-height:44px;margin:0;padding:6px 2px!important;background:#071320a6!important;color:#f4f8ff!important;border:1px solid #748393!important;border-radius:9px!important;font:600 14px Arial,Helvetica,sans-serif!important}
html body #app .ha-button:focus-visible,html body #app .ha-speed:focus-visible,html body #app .ha-seek:focus-visible{outline:2px solid #80c9ff!important;outline-offset:3px!important}
@media(hover:hover){html body #app .ha-button:not(:disabled):hover{filter:brightness(1.18);background:#ffffff1c!important}html body #app .ha-play:not(:disabled):hover{background:#d9eeff!important}}
html body #app .ha-status{min-height:1.4em;margin:12px 0 0;font-size:13px;line-height:1.5;color:#cfdce9!important;background:transparent!important}
html body #app .ha-player.is-compact{padding:18px 16px 14px}.ha-player.is-compact .ha-title{margin-bottom:16px!important;min-height:0;font-size:16px!important}
html body #app .lc-playlist-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;background:transparent!important}
.lc-now-playing{min-width:0}.lc-playlist-layout .lc-queue-panel{margin-top:0!important}.lc-playlist-layout .lc-track-list{height:420px!important}.lc-secondary-actions{display:flex;justify-content:flex-end;margin:8px 0}
html body #app .lc-playlist{padding:18px;border-color:#506b7a!important;background:#071019!important}.lc-playlist .ha-legacy-clock,.lc-playlist .ha-legacy-timeline{display:none!important}.lc-playlist-layout .lc-queue-header{background:#152330!important;color:#f1f7ff!important}.lc-playlist-layout .lc-track.is-current{border-color:#80c9ff!important;background:#142d41!important;color:#f1f7ff!important}
@media(max-width:760px){html body #app .lc-playlist-layout{grid-template-columns:minmax(0,1fr);gap:16px}.lc-playlist-layout .lc-track-list{height:300px!important}html body #app .ha-title{margin-bottom:24px!important}html body #app .lc-playlist{padding:12px}html body #app .ha-player{padding:20px 14px 16px}}
@media(max-width:360px){html body #app .ha-controls{gap:0;row-gap:6px}html body #app .ha-controls .ha-play{width:56px;height:56px;min-height:56px;flex-basis:56px}html body #app .ha-controls .ha-button:not(.ha-play){width:44px;flex-basis:44px;min-width:44px}html body #app .ha-controls .ha-speed{width:44px;flex-basis:44px;font-size:12px!important}html body #app .ha-player{padding-inline:10px}}
html body #app .ha-controls .ha-speed{margin-left:auto!important}
html body #app .ha-times,html body #app .ha-times>span{background:transparent!important;color:#d9e4f0!important}
html body #app .lc-playlist>h2{font-size:20px!important;margin:0 0 8px!important}.lc-playlist>p{font-size:13px;margin:6px 0 10px}.lc-playlist .lc-source-filter{display:flex;align-items:center;gap:8px;font-size:14px;flex-wrap:wrap}.lc-playlist .lc-source-filter select{max-width:100%;margin:0}
@media(max-width:760px){.lc-playlist-layout .lc-now-playing{display:contents}.lc-playlist-layout .ha-player{order:0}.lc-playlist-layout .lc-queue-panel{order:1}.lc-playlist-layout .lc-preparation{order:2}.lc-playlist-layout .lc-script-box{order:3}.lc-playlist-layout progress{order:4}.lc-playlist-layout .lc-queue-progress{order:5}.lc-playlist-layout details{order:6}.lc-playlist-layout .lc-preparation{font-size:12px}}
html body #app .ha-controls{display:grid;grid-template-columns:minmax(44px,1fr) minmax(44px,1fr) 68px minmax(44px,1fr) minmax(62px,1fr);justify-items:center}
html body #app .ha-controls .ha-speed{margin-left:0!important;justify-self:end}
html body #app .ha-player.is-compact .ha-title{margin-bottom:16px!important;min-height:0;font-size:16px!important}
@media(max-width:360px){html body #app .ha-controls{display:flex;justify-content:space-between}html body #app .ha-controls .ha-speed{margin-left:auto!important}}
@media(min-width:361px) and (max-width:760px){html body #app .ha-controls{grid-template-columns:minmax(44px,1fr) minmax(44px,1fr) 56px minmax(44px,1fr) minmax(44px,1fr);gap:0}html body #app .ha-controls .ha-play{width:56px;height:56px;min-height:56px}html body #app .ha-controls .ha-speed{width:44px;font-size:12px!important}}

/* Playlist below one player card; transcript belongs to that card. */
html body #app .lc-playlist-layout{grid-template-columns:minmax(0,1fr)!important;gap:16px}
html body #app .lc-playlist-layout .lc-now-playing{display:block!important}
html body #app .lc-playlist-layout .lc-track-list{display:grid;grid-auto-rows:72px;gap:6px;height:322px!important;max-height:322px;overflow-y:auto;overscroll-behavior:contain;padding:8px!important}
html body #app .lc-track-list>li{min-height:0;margin:0!important}
html body #app .lc-track-list .lc-track{box-sizing:border-box;height:100%;min-height:0;margin:0!important;padding:9px 12px}
html body #app .lc-track-copy{min-width:0}html body #app .lc-track-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #app .ha-player>.lc-script-box{margin:16px 0 0;padding:14px 0 0;border:0;border-top:1px solid #405965;border-radius:0;background:transparent!important;color:inherit}
html body #app .ha-player .lc-script-window{height:140px;max-height:140px;overflow-y:auto;overscroll-behavior:contain}
html body #app .lc-playlist [hidden]{display:none!important}

html body #app .ha-controls .ha-speed-cycle{display:flex!important;align-items:center;justify-content:center;text-align:center!important;padding:0!important;background-image:none!important;line-height:1!important;letter-spacing:0!important}
html body #app .ha-controls .ha-speed-cycle::after{display:none!important;content:none!important}


/* Repeat mode is explicit: gray off, lit playlist loop, lit loop with 1. */
html body #app .ha-controls .ha-repeat::before{content:'';width:26px;height:26px;background:currentColor!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10V8a3 3 0 0 1 3-3h15m-4-3 4 3-4 3M21 14v2a3 3 0 0 1-3 3H3m4 3-4-3 4-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10V8a3 3 0 0 1 3-3h15m-4-3 4 3-4 3M21 14v2a3 3 0 0 1-3 3H3m4 3-4-3 4-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html body #app .ha-controls .ha-repeat[data-repeat=off]{color:#8495a0!important}
html body #app .ha-controls .ha-repeat:is([data-repeat=all],[data-repeat=one]){color:#72e5ac!important}
html body #app .ha-controls .ha-repeat::after{content:none!important}
html body #app .ha-controls .ha-repeat[data-repeat=one]::after{content:'1'!important;position:absolute;inset:0;display:grid;place-items:center;background:none!important;box-shadow:none!important;transform:none!important;font:800 11px/1 Arial,Helvetica,sans-serif;color:inherit;pointer-events:none}