*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif;padding:var(--padding,16px);background:transparent;color:var(--text,#25231f)}.widget{--bg:#f5efe3;--text:#25231f;--accent:#a43e2f;display:flex;align-items:center;gap:24px;background:var(--bg);color:var(--text);border-radius:var(--radius,20px);width:100%;height:100%;padding:clamp(12px,4vw,28px);position:relative;overflow:hidden;container-type:size;transition:background .6s,color .6s,opacity .35s}.widget.shadow-soft{box-shadow:0 5px 14px #0002}.widget.shadow-strong{box-shadow:0 8px 22px #0004}.widget.transparent{background:transparent;box-shadow:none}.artwork{width:min(34%,180px,100cqh);aspect-ratio:1;position:relative;flex-shrink:0;background:var(--accent);border-radius:8px;overflow:hidden}.artwork img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .6s}.artwork img.loaded{opacity:1}.record-grooves,.reels,.cassette-label{display:none}.track-content{min-width:0;flex:1;z-index:1}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:12px;margin-bottom:12px}.title-window{overflow:hidden;max-width:100%}#title{display:block;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font,24px);font-weight:700;line-height:1.2;color:inherit;text-decoration:none}#title[href]:hover{text-decoration:underline}#artist{font-size:14px;margin:8px 0;opacity:.8;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#album{font-size:12px;opacity:.65;display:none}.progress{height:3px;border-radius:8px;background:color-mix(in srgb,var(--text) 15%,transparent);overflow:hidden;margin-top:18px}.progress i{display:block;background:var(--accent);width:0;height:100%;transition:width 1s linear}.times{display:flex;justify-content:space-between;font-size:10px;margin-top:5px;font-variant-numeric:tabular-nums;opacity:.7}.spotify{font-size:11px;font-weight:700;display:flex;gap:5px;align-items:center;color:inherit;text-decoration:none;width:max-content;margin-top:12px}.equalizer{display:flex;align-items:center;gap:2px;height:12px}.equalizer i{background:var(--accent);width:2px;height:4px;animation:meter 1s ease-in-out infinite alternate;animation-play-state:paused}.equalizer i:nth-child(2){animation-delay:-.4s}.equalizer i:nth-child(3){animation-delay:-.8s}.playing.motion .equalizer i{animation-play-state:running}.record .artwork{border-radius:50%;background:repeating-radial-gradient(circle,#252525 0 2px,#131313 3px 5px);box-shadow:0 5px 12px #0004;animation:spin 14s linear infinite;animation-play-state:paused}.record .artwork img{width:42%;height:42%;inset:29%;border-radius:50%}.record .artwork:after{content:'';position:absolute;left:48%;top:48%;height:4%;width:4%;background:var(--bg);border-radius:50%;border:1px solid #0003}.record.playing.motion .artwork{animation-play-state:running}.cassette .artwork{aspect-ratio:1.5;border:7px solid color-mix(in srgb,var(--text) 85%,var(--bg));border-radius:9px}.cassette .artwork img{opacity:.35}.cassette .reels{position:absolute;display:flex;inset:30% 10%;justify-content:space-between;align-items:center;border-radius:40px;background:#161616c9;padding:5px}.reels i{width:33%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#eee 0deg 30deg,#666 30deg 60deg);border:5px solid #aaa;animation:spin 5s linear infinite;animation-play-state:paused}.cassette.playing.motion .reels i{animation-play-state:running}.cassette-label{position:absolute;bottom:6%;text-align:center;width:100%;font:700 8px monospace;color:var(--text)}.cassette .cassette-label{display:block}.cover{flex-direction:column;gap:14px;align-items:stretch;justify-content:center}.cover .artwork{width:100%;max-height:65%;flex:1;min-height:0;aspect-ratio:auto}.cover .track-content{flex:0 0 auto}.cover .eyebrow{display:none}.cover .timeline{margin-top:0}.cover .spotify{position:absolute;right:24px;bottom:18px}.minimal{gap:16px;padding:12px 18px}.minimal .artwork{height:80%;width:auto;max-width:22%;aspect-ratio:1}.minimal .eyebrow,.minimal .times,.minimal .spotify{display:none}.minimal #artist{margin:5px 0 0}.minimal .progress{margin-top:10px}.poster{flex-direction:column;align-items:stretch;justify-content:space-between;gap:14px}.poster .artwork{position:absolute;inset:0;width:100%;height:100%;opacity:.2;border-radius:0}.poster .track-content{display:flex;flex-direction:column;justify-content:center;flex:1}.poster #title{font-family:Georgia,serif;white-space:normal;max-width:100%;font-size:clamp(24px,10cqw,72px);font-weight:400;letter-spacing:-2px}.poster #artist{text-transform:uppercase;letter-spacing:3px;white-space:normal}.poster #album{display:block}.poster .eyebrow{margin-bottom:auto;padding-bottom:20px}.poster .spotify{margin-top:auto;padding-top:16px}.poster .timeline{margin-bottom:16px}.broadcast{border-left:5px solid var(--accent);border-radius:var(--radius);gap:20px}.broadcast .artwork{width:min(22%,100px)}.broadcast .eyebrow{color:var(--accent)}.widget.hidden{opacity:0;pointer-events:none}.widget.message .artwork,.widget.message .timeline{display:none}.widget.message #title{white-space:normal;width:auto;max-width:100%;overflow:visible}.widget.no-cover .artwork{display:none}.widget.no-logo .spotify,.widget.no-progress .timeline{display:none}.motion.marquee #title.overflow{max-width:none;animation:scroll-title var(--scroll-duration,12s) ease-in-out infinite alternate}.motion.changing .track-content{animation:track-in .45s ease-out}@keyframes spin{to{transform:rotate(360deg)}}@keyframes meter{to{height:12px}}@keyframes scroll-title{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--scroll-distance,-50px))}}@keyframes track-in{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@container(max-height:120px){.eyebrow{margin-bottom:4px;font-size:9px}.spotify{margin-top:6px}.times{display:none}.progress{margin-top:8px}#title{font-size:min(var(--font),22px)}#artist{margin-top:5px}.poster .eyebrow,.poster #album{display:none}}@media(max-width:300px){.widget{gap:12px;padding:12px}#title{font-size:min(var(--font),20px)}.eyebrow{font-size:9px;letter-spacing:1px}#artist{font-size:12px}}
