.tidi-player{--tp-bg:#0b1726;--tp-ink:#eff7ff;--tp-muted:#9aafc3;--tp-line:#c0e6ff20;--tp-accent:#9ddfff;--tp-accent-ink:#0a2134;position:relative;isolation:isolate;box-sizing:border-box;width:100%;max-width:560px;min-width:0;overflow:hidden;padding:23px;border:1px solid var(--tp-line);border-radius:28px;background:radial-gradient(ellipse at 50% -18%,#7fcfff20,transparent 57%),linear-gradient(155deg,#162a3d,#0a1421 69%);color:var(--tp-ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;box-shadow:0 20px 55px #02091426}
.tidi-player *{box-sizing:border-box}.tp-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}.tp-brand{display:flex;align-items:center;gap:10px;margin:0;color:var(--tp-ink)}.tp-brand>img{display:block;flex:0 0 31px;width:31px;height:31px;border-radius:9px}.tp-brand-copy{display:flex;align-items:baseline;gap:9px}.tp-wordmark{font-size:22px;font-weight:740;letter-spacing:-1px;line-height:1}.tp-brand-kind{color:var(--tp-muted);font-size:8px;letter-spacing:2.6px;font-weight:600}.tp-metadata{min-width:0;text-align:center}.tp-cover{position:relative;display:grid;place-items:center;width:min(76%,248px);aspect-ratio:1;margin:0 auto 25px;border-radius:23px;overflow:hidden;background:radial-gradient(circle at 70% 23%,#a2e8ff25,transparent 49%),linear-gradient(145deg,#294866,#112335);color:var(--tp-accent);box-shadow:0 18px 35px #030c1838,inset 0 1px 0 #e1f7ff17}.tp-cover-note{display:grid;place-items:center;width:44%;height:44%;border:1px solid #b5eaff29;border-radius:25%;background:#9addff08}.tp-cover-note svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.tp-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.tp-copy{min-width:0}.tp-title{margin:0;color:var(--tp-ink);font-size:24px;font-weight:650;line-height:1.35;letter-spacing:-.6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-artist{margin:6px 0 0;color:var(--tp-muted);font-size:13px;line-height:1.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-status{display:flex;align-items:center;justify-content:center;gap:7px;margin:16px 0 0;min-height:18px;color:var(--tp-muted);font-size:10px;letter-spacing:.2px}.tp-status:before{content:"";width:4px;height:4px;border-radius:50%;background:var(--tp-muted)}.tidi-player[data-playback=playing] .tp-status:before{background:var(--tp-accent);box-shadow:0 0 9px #9ddfff8c}.tp-seek-row{display:grid;grid-template-columns:33px minmax(0,1fr) 33px;align-items:center;gap:9px;margin-top:13px}.tp-time{color:var(--tp-muted);font-size:10px;font-variant-numeric:tabular-nums;text-align:center}.tidi-player input[type=range]{display:block;min-width:0;width:100%;height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;accent-color:var(--tp-accent);cursor:pointer}.tidi-player input[type=range]:disabled{cursor:default;opacity:.35}.tp-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:12px}.tp-control{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--tp-ink);font:inherit;cursor:pointer;touch-action:manipulation}.tp-control>svg{display:block;width:24px;height:24px;pointer-events:none;fill:currentColor;stroke:none}.tp-mode{color:var(--tp-muted);background:#addfff08}.tp-mode>svg,.tp-shuffle>svg,.tp-repeat>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.tp-mode>svg{width:21px;height:21px}.tp-play{width:70px;height:70px;flex-basis:70px;color:var(--tp-accent-ink);background:linear-gradient(135deg,#d5f2ff,var(--tp-accent));box-shadow:0 7px 25px #6cc8fc24,inset 0 1px 0 #fff9}.tp-play>svg{width:28px;height:28px}.tp-play[data-glyph=play]>svg{transform:translateX(1px)}.tp-play--loading>svg{fill:none;stroke:currentColor;stroke-width:1.8;animation:tp-spin 1s linear infinite}.tp-control:disabled{opacity:.3;cursor:default;box-shadow:none}.tp-modes{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:7px}.tp-shuffle,.tp-repeat{color:var(--tp-muted)}.tp-shuffle[aria-pressed=true],.tp-repeat[aria-pressed=true]{color:var(--tp-accent);background:#9ddfff10}.tp-repeat{position:relative}.tp-repeat-one{display:none;position:absolute;inset:0;align-items:center;justify-content:center;pointer-events:none;font-size:8px;font-weight:750}.tp-repeat[data-repeat=one] .tp-repeat-one{display:flex}.tp-volume-row{margin-top:7px}.tp-volume-label{display:flex;align-items:center;gap:11px;margin:0;color:var(--tp-muted);font-size:10px}.tp-volume-label>svg{flex:0 0 15px;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tp-volume-label input{flex:1}.tp-volume-note{margin:0;color:var(--tp-muted);font-size:10px;line-height:1.7}.tp-error{margin:15px 0 0;color:#efbbc6;font-size:12px;line-height:1.8;overflow-wrap:anywhere}.tp-queue{margin-top:16px;padding-top:3px;border-top:1px solid var(--tp-line)}.tp-queue-summary{display:flex;align-items:center;gap:10px;min-height:48px;color:var(--tp-muted);font-size:12px;cursor:pointer;list-style:none}.tp-queue-summary::-webkit-details-marker{display:none}.tp-queue-summary>svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.tp-queue-summary:after{content:"+";margin-left:auto;font-size:18px;font-weight:400}.tp-queue[open] .tp-queue-summary:after{content:"−"}.tp-queue-list{list-style:none;margin:2px 0 0;padding:0;max-height:240px;overflow:auto;overscroll-behavior:contain}.tp-queue-item{margin:0;padding:0}.tp-queue-track{display:flex;align-items:center;gap:11px;width:100%;min-height:58px;padding:8px;border:0;border-radius:12px;background:transparent;text-align:left;color:var(--tp-ink);cursor:pointer;font:inherit}.tp-queue-track--selected{background:#9ddfff0e}.tp-queue-track:disabled{opacity:.4;cursor:default}.tp-queue-number{flex:0 0 23px;color:var(--tp-muted);text-align:center;font-size:10px;font-variant-numeric:tabular-nums}.tp-queue-copy{display:block;min-width:0;flex:1}.tp-queue-title,.tp-queue-artist{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-queue-title{font-size:12px;font-weight:550;line-height:1.7}.tp-queue-artist{color:var(--tp-muted);font-size:10px;line-height:1.8}.tp-keyboard-hint{margin:16px 0 0;color:var(--tp-muted);font-size:9px;letter-spacing:.2px;text-align:center;opacity:.75}.tp-mini-progress{display:none}.tidi-player:focus-visible,.tidi-player button:focus-visible,.tidi-player input:focus-visible,.tp-queue-summary:focus-visible{outline:2px solid var(--tp-accent);outline-offset:3px}.tidi-player [hidden]{display:none!important}
/* Compact controls stay reachable while the host keeps the player docked. */
.tidi-player--compact{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;align-items:center;gap:8px;padding:10px 12px;border-radius:20px;max-width:none}
.tidi-player--compact .tp-header{display:none}
.tidi-player--compact .tp-metadata{grid-column:1;grid-row:1;display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;text-align:left;border-radius:11px;cursor:pointer;touch-action:manipulation}
.tidi-player--compact .tp-cover{width:40px;height:40px;flex:0 0 40px;aspect-ratio:auto;margin:0;border-radius:10px;box-shadow:none}
.tidi-player--compact .tp-copy{flex:1;min-width:0}
.tidi-player--compact .tp-title{font-size:13px;letter-spacing:0;line-height:1.5}
.tidi-player--compact .tp-artist{margin-top:1px;font-size:10px;line-height:1.6}
.tidi-player--compact .tp-controls{display:contents}
.tidi-player--compact .tp-play{grid-column:2;grid-row:1;width:44px;height:44px;box-shadow:none}
.tidi-player--compact .tp-play>svg{width:21px;height:21px}
.tidi-player--compact .tp-next{grid-column:3;grid-row:1;display:grid;width:44px;height:44px}
.tidi-player--compact .tp-previous,.tidi-player--compact .tp-seek-row,.tidi-player--compact .tp-modes,.tidi-player--compact .tp-volume-row,.tidi-player--compact .tp-queue,.tidi-player--compact .tp-keyboard-hint{display:none}
.tidi-player--compact .tp-status{position:absolute;inset:auto;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tidi-player--compact .tp-error{grid-column:1/-1;margin:2px 0 4px;font-size:10px}
.tidi-player--compact .tp-mini-progress{display:block;grid-column:1/-1;width:100%;height:2px;margin:0;border:0;border-radius:0;overflow:hidden;color:var(--tp-accent);accent-color:var(--tp-accent);background:var(--tp-line)}
.tp-mini-progress::-webkit-progress-bar{background:var(--tp-line)}.tp-mini-progress::-webkit-progress-value{background:var(--tp-accent)}.tp-mini-progress::-moz-progress-bar{background:var(--tp-accent)}
.tidi-player--compact .tp-metadata:focus-visible{outline:2px solid var(--tp-accent);outline-offset:3px}
[data-theme=light] .tidi-player,.tidi-player[data-theme=light]{--tp-bg:#edf7ff;--tp-ink:#12304d;--tp-muted:#5b7690;--tp-line:#456e9226;--tp-accent:#99d3f3;--tp-accent-ink:#0a2a43;background:radial-gradient(ellipse at 50% -18%,#fff,transparent 64%),linear-gradient(145deg,#f9fdff,#dfedf8);color-scheme:light;box-shadow:0 16px 38px #244d7410}[data-theme=light] .tp-cover,.tidi-player[data-theme=light] .tp-cover{background:radial-gradient(circle at 70% 23%,#d9f4ff,transparent 56%),linear-gradient(145deg,#b2d6ef,#74a5ca);color:#244e70;box-shadow:0 13px 27px #234f7319}[data-theme=light] .tp-cover-note,.tidi-player[data-theme=light] .tp-cover-note{border-color:#f6fcff75;background:#fff2}[data-theme=light] .tp-error,.tidi-player[data-theme=light] .tp-error{color:#a72e4a}
@media(max-width:350px){.tidi-player{padding:18px;border-radius:23px}.tp-header{margin-bottom:22px}.tp-title{font-size:20px}.tp-cover{width:82%;margin-bottom:22px;border-radius:19px}.tp-controls{gap:19px}.tp-play{width:66px;height:66px;flex-basis:66px}.tidi-player--compact{padding:12px;gap:8px;border-radius:19px}.tidi-player--compact .tp-play{width:44px;height:44px}.tidi-player--compact .tp-title{font-size:12px}}
@media(hover:none){.tp-keyboard-hint{display:none}}@media(hover:hover){.tp-control:not(.tp-play):hover:not(:disabled),.tp-queue-track:hover:not(:disabled){background:#91d6ff14}}@keyframes tp-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.tidi-player *{scroll-behavior:auto}.tp-play--loading>svg{animation:none}}

/* The expanded transport fits short phones; secondary options can scroll below. */
.tidi-player:not(.tidi-player--compact){overflow:visible}
.tp-header{position:sticky;top:0;z-index:2;padding:8px 0 10px;margin-top:-8px;margin-bottom:16px;background:linear-gradient(var(--tp-bg) 78%,transparent)}
.tp-cover{width:min(76%,226px);width:min(76%,clamp(128px,26dvh,226px));margin-bottom:18px}
.tidi-player[data-volume-control=hardware] .tp-volume-label{display:none}
.tidi-player[data-volume-control=hardware] .tp-volume-note{padding-top:7px}
@media(max-height:700px){.tidi-player:not(.tidi-player--compact) .tp-cover{width:min(68%,164px);margin-bottom:14px}.tidi-player:not(.tidi-player--compact) .tp-header{margin-bottom:11px}.tidi-player:not(.tidi-player--compact) .tp-status{margin-top:10px}.tidi-player:not(.tidi-player--compact) .tp-seek-row{margin-top:6px}.tidi-player:not(.tidi-player--compact) .tp-controls{margin-top:5px}}
@media(max-height:520px){.tidi-player:not(.tidi-player--compact){padding:16px}.tidi-player:not(.tidi-player--compact) .tp-metadata{display:flex;align-items:center;gap:15px;text-align:left}.tidi-player:not(.tidi-player--compact) .tp-cover{width:64px;height:64px;flex:0 0 64px;aspect-ratio:auto;margin:0;border-radius:14px}.tidi-player:not(.tidi-player--compact) .tp-copy{flex:1}.tidi-player:not(.tidi-player--compact) .tp-title{font-size:18px}.tidi-player:not(.tidi-player--compact) .tp-play{width:60px;height:60px;flex-basis:60px}}
.tidi-player:not(.tidi-player--compact) .tp-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere}
.tp-save-state{margin:7px 0 0;color:var(--tp-muted);font-size:10px;line-height:1.7;overflow-wrap:anywhere}
.tp-save-state[data-save-state=saved]{color:#8ed6b7}.tp-save-state[data-save-state=error]{color:#efbbc6}
.tidi-player--compact .tp-save-state{display:none}
[data-theme=light] .tp-save-state[data-save-state=saved],.tidi-player[data-theme=light] .tp-save-state[data-save-state=saved]{color:#287856}[data-theme=light] .tp-save-state[data-save-state=error],.tidi-player[data-theme=light] .tp-save-state[data-save-state=error]{color:#a12c40}

/* Library transport: the same audio and controls in the compact music bar. */
.tp-header{gap:8px}.tp-brand{margin-right:auto}
.tp-favorite{color:var(--tp-muted)}
.tp-favorite>svg{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.tp-favorite[aria-pressed=true]{color:var(--tp-accent)}
.tp-favorite[aria-pressed=true]>svg{fill:currentColor;stroke:currentColor}
.tp-favorite[aria-busy=true]{opacity:.5}
.tp-queue-toggle{display:none}
.tp-queue-toggle>svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tidi-player--library.tidi-player--compact{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,44px);align-items:center;gap:0;max-width:none;padding:4px 8px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
.tidi-player--library .tp-header{display:none}
.tidi-player--library .tp-metadata{grid-column:1;grid-row:1;gap:9px;min-height:46px;margin-right:5px;border-radius:8px}
.tidi-player--library .tp-cover{width:46px;height:46px;flex-basis:46px;border-radius:7px}
.tidi-player--library .tp-cover-note{width:52%;height:52%;border:0;border-radius:0;background:none}
.tidi-player--library .tp-copy{padding:0;min-width:0}
.tidi-player--library .tp-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:550;line-height:1.5;letter-spacing:0}
.tidi-player--library .tp-artist{margin-top:1px;font-size:10px;line-height:1.5}
.tidi-player--library .tp-controls{display:contents}
.tidi-player--library .tp-previous,.tidi-player--library .tp-next,.tidi-player--library .tp-queue-toggle{display:grid;grid-row:1;justify-self:center;width:44px;height:44px;margin:0;color:var(--tp-ink)}
.tidi-player--library .tp-previous{grid-column:2}
.tidi-player--library .tp-play{grid-column:3;grid-row:1;justify-self:center;width:44px;height:44px;flex-basis:44px;margin:0;border:1.5px solid #69bfff;background:#6db8f512;color:var(--tp-ink);box-shadow:0 0 16px #58b6ff25,inset 0 0 12px #69bfff0a}
.tidi-player--library .tp-play>svg{width:23px;height:23px}
.tidi-player--library .tp-next{grid-column:4}
.tidi-player--library .tp-queue-toggle{grid-column:5}
.tidi-player--library .tp-previous>svg,.tidi-player--library .tp-next>svg{width:22px;height:22px}
.tidi-player--library .tp-queue-toggle>svg{width:22px;height:22px}
.tidi-player--library .tp-seek-row{position:relative;display:grid;grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr;gap:0;align-items:end;margin:4px 0 0;min-height:40px;height:40px}
.tidi-player--library .tp-time{position:relative;z-index:1;align-self:end;min-width:0;margin:0;font-size:9px;line-height:12px;pointer-events:none}
.tidi-player--library .tp-time:first-child{grid-column:1;grid-row:1;text-align:left}
.tidi-player--library .tp-time:last-child{grid-column:2;grid-row:1;text-align:right}
.tidi-player--library .tp-seek{position:absolute;inset:-4px 0 auto;grid-column:1/-1;height:44px;--tp-seek-progress:0%;-webkit-appearance:none;appearance:none;accent-color:var(--tp-accent)}
.tidi-player--library .tp-seek::-webkit-slider-runnable-track{height:2px;border:0;border-radius:2px;background:linear-gradient(to right,var(--tp-accent) var(--tp-seek-progress),#7584975c var(--tp-seek-progress))}
.tidi-player--library .tp-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:7px;height:7px;margin-top:-2.5px;border:1px solid #d8efff;border-radius:50%;background:var(--tp-accent);box-shadow:0 0 6px #76caff4d}
.tidi-player--library .tp-seek::-moz-range-track{height:2px;border:0;border-radius:2px;background:#7584975c}
.tidi-player--library .tp-seek::-moz-range-progress{height:2px;border-radius:2px;background:var(--tp-accent)}
.tidi-player--library .tp-seek::-moz-range-thumb{width:6px;height:6px;border:1px solid #d8efff;border-radius:50%;background:var(--tp-accent)}
.tidi-player--library .tp-mini-progress,.tidi-player--library .tp-modes,.tidi-player--library .tp-volume-row,.tidi-player--library .tp-queue,.tidi-player--library .tp-keyboard-hint{display:none}
.tidi-player--library .tp-error{grid-column:1/-1;grid-row:3;margin:6px 0 0;font-size:11px;line-height:1.5}
[data-theme=light] .tidi-player--library.tidi-player--compact,.tidi-player--library.tidi-player--compact[data-theme=light]{background:transparent;box-shadow:none;--tp-accent:#287bb5}
[data-theme=light] .tidi-player--library .tp-play,.tidi-player--library[data-theme=light] .tp-play{border-color:#5ca5d8;background:#77b8e513;box-shadow:0 0 16px #58a6df1c}
@media(max-width:350px){.tidi-player--library.tidi-player--compact{padding:4px 4px 0}.tidi-player--library .tp-metadata{gap:7px;margin-right:3px}.tidi-player--library .tp-title{font-size:12px}.tidi-player--library .tp-cover{width:40px;height:40px;flex-basis:40px}}