.rsp-player{box-sizing:border-box;display:flex;align-items:center;gap:20px;background:#14251f;color:#fff;font-family:system-ui,-apple-system,sans-serif;padding:24px;border:1px solid #ffffff20;line-height:1.45;text-align:left}
.rsp-player *{box-sizing:border-box}.rsp-card{border-radius:18px;max-width:100%;flex-wrap:wrap}.rsp-brand{width:60px;height:60px;display:grid;place-items:center;flex:0 0 auto;background:var(--rsp-accent);color:#14251f;font-size:30px;border-radius:14px}.rsp-info{display:flex;flex-direction:column;flex:1 1 180px;min-width:0;gap:2px}.rsp-eyebrow{font-size:10px;letter-spacing:2px;color:#d9e7df}.rsp-name{font-size:20px;color:#fff}.rsp-track{font-size:14px;overflow-wrap:anywhere}.rsp-status{font-size:12px;color:#c1d2c9}.rsp-player .rsp-toggle{border:0;border-radius:100px;padding:13px 22px;background:var(--rsp-accent);color:#101b16;font:700 14px system-ui;cursor:pointer;min-height:46px;flex-shrink:0}.rsp-player .rsp-toggle:hover{background:#fff;color:#14251f}.rsp-player .rsp-toggle:disabled{opacity:.5;cursor:wait}.rsp-player :focus-visible{outline:3px solid #fff;outline-offset:4px}.rsp-volume{font-size:12px;display:flex;flex-direction:column;gap:6px;width:100px;color:#d9e7df}.rsp-volume input{width:100%;min-height:24px;margin:0;accent-color:var(--rsp-accent)}.rsp-player a.rsp-popout{color:#fff;font-size:12px;text-decoration:underline;text-underline-offset:4px}.rsp-sticky{position:fixed;z-index:9990;left:0;right:0;bottom:0;padding:14px max(20px,calc((100vw - 1200px)/2));padding-bottom:calc(14px + env(safe-area-inset-bottom));gap:18px}.rsp-sticky .rsp-brand{width:44px;height:44px;font-size:24px}.rsp-sticky .rsp-name{font-size:16px}.rsp-has-sticky{padding-bottom:var(--rsp-footer-space,150px)!important}.rsp-player[data-state=error] .rsp-status{color:#ffd6ba}.rsp-listen-page{margin:0;background:#edf3ed;color:#14251f;font-family:system-ui,sans-serif;min-height:100vh;display:grid;place-items:center;padding:24px}.rsp-listen-page main{width:min(780px,100%)}.rsp-listen-page h1{font-size:36px;letter-spacing:-1px}.rsp-listen-page main>p{font-size:14px;line-height:1.6}
@media(max-width:600px){.rsp-player{gap:12px;padding:18px}.rsp-brand{width:44px;height:44px;font-size:24px}.rsp-name{font-size:18px}.rsp-card .rsp-info{flex-basis:calc(100% - 60px)}.rsp-sticky{flex-wrap:nowrap;align-items:center;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}.rsp-sticky .rsp-brand,.rsp-sticky .rsp-volume{display:none}.rsp-sticky .rsp-info{flex:1 1 0;min-width:0;max-width:none;align-self:center}.rsp-sticky .rsp-name,.rsp-sticky .rsp-track{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rsp-sticky .rsp-popout{display:none}.rsp-sticky .rsp-toggle{padding:10px 15px}.rsp-sticky .rsp-eyebrow{display:none}}

/* Pulse concept inspired by Rojo Salas: https://codepen.io/rojo_salas/pen/BaKKaav
   Radio control and two-part play/pause morph implemented for Radio Station Player. */
.rsp-button-wrap{display:inline-flex;position:relative;align-items:center;justify-content:center;padding:24px;vertical-align:middle;line-height:1;isolation:isolate}
.rsp-button-wrap .rsp-pulse-button{appearance:none;box-sizing:border-box;position:relative;display:grid;place-items:center;width:80px;height:80px;min-width:80px;padding:0;margin:0;border:0;border-radius:50%;background:var(--rsp-button-color,#ff4c60);color:#fff;cursor:pointer;overflow:visible;box-shadow:none;transition:background-color .2s;touch-action:manipulation}
.rsp-button-wrap .rsp-pulse-button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--rsp-button-pulse,var(--rsp-button-color,#ff4c60));transition:background-color .2s;animation:rsp-pulse-ring 1.5s ease-out infinite;pointer-events:none}
.rsp-button-wrap .rsp-pulse-button:hover{background:var(--rsp-button-hover,#f1ad34)}
.rsp-button-wrap .rsp-pulse-button:hover::before{background:var(--rsp-button-pulse-hover,var(--rsp-button-pulse,var(--rsp-button-color,#ff4c60)))}
.rsp-button-wrap .rsp-pulse-button[aria-pressed=true]{background:var(--rsp-button-active,var(--rsp-button-color,#ff4c60))}
.rsp-button-wrap .rsp-pulse-button[aria-pressed=true]::before{background:var(--rsp-button-active-pulse,var(--rsp-button-active,var(--rsp-button-color,#ff4c60)))}
.rsp-button-wrap .rsp-pulse-button[aria-pressed=true]:hover{background:var(--rsp-button-active-hover,var(--rsp-button-hover,#f1ad34))}
.rsp-button-wrap .rsp-pulse-button[aria-pressed=true]:hover::before{background:var(--rsp-button-active-pulse-hover,var(--rsp-button-active-pulse,var(--rsp-button-active,var(--rsp-button-color,#ff4c60))))}

.rsp-button-wrap .rsp-pulse-button:focus-visible{outline:3px solid currentColor;outline-offset:6px;box-shadow:0 0 0 9px #222}
.rsp-button-wrap .rsp-pulse-button:disabled{opacity:.5;cursor:wait}
.rsp-pulse-button .rsp-morph-icon{position:relative;width:32px;height:44px;display:block;transform:translateX(3px);transition:transform .3s ease;pointer-events:none}
.rsp-morph-icon>span{position:absolute;inset:0;display:block;background:#fff;transition:clip-path .3s cubic-bezier(.4,0,.2,1)}
.rsp-morph-icon>span:first-child{clip-path:polygon(0 0,50% 25%,50% 75%,0 100%)}
.rsp-morph-icon>span:last-child{clip-path:polygon(50% 25%,100% 50%,100% 50%,50% 75%)}
.rsp-pulse-button[aria-pressed=true] .rsp-morph-icon{transform:translateX(0)}
.rsp-pulse-button[aria-pressed=true] .rsp-morph-icon>span:first-child{clip-path:polygon(0 0,34% 0,34% 100%,0 100%)}
.rsp-pulse-button[aria-pressed=true] .rsp-morph-icon>span:last-child{clip-path:polygon(66% 0,100% 0,100% 100%,66% 100%)}
.rsp-pulse-button[data-state=loading] .rsp-morph-icon{opacity:.65}
.rsp-button-status{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rsp-button-status.rsp-button-error{top:100%;left:50%;transform:translateX(-50%);width:220px;max-width:80vw;height:auto;margin:4px 0 0;overflow:visible;clip:auto;white-space:normal;font:13px/1.5 system-ui,sans-serif;text-align:center;color:inherit}
@keyframes rsp-pulse-ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.5);opacity:0}}
@media(prefers-reduced-motion:reduce){.rsp-button-wrap .rsp-pulse-button::before{animation:none;opacity:0}.rsp-pulse-button .rsp-morph-icon,.rsp-morph-icon>span{transition:none}}
.rsp-button-wrap[data-pulse="off"] .rsp-pulse-button::before{animation:none;display:none}
#rsp-button-colors .rsp-color-input{width:64px;height:40px;vertical-align:middle;cursor:pointer;padding:2px}
#rsp-button-colors .rsp-color-control[hidden]{display:none}
#rsp-admin-preview{max-width:680px;background:#fff;border:1px solid #c3c4c7;padding:20px;border-radius:8px}

.rsp-brand.rsp-brand-image{background:transparent;overflow:hidden}
.rsp-brand-image img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}

/* The bottom bar only becomes visible after a Live listen click. */
.rsp-player[hidden]{display:none!important}
.rsp-popup-page{display:block;min-height:100vh;background:#101a15;color:#f8faf8;padding:0;margin:0}
.rsp-popup-page .rsp-popup-main{width:100%;max-width:360px;margin:0 auto;padding:24px 20px 28px;box-sizing:border-box}
.rsp-popup-page .rsp-popup-heading{text-align:center;margin-bottom:20px}
.rsp-popup-page .rsp-popup-heading .rsp-eyebrow{color:#b7f76b;letter-spacing:3px}
.rsp-popup-page .rsp-popup-heading h1{font:700 23px/1.25 system-ui,sans-serif;margin:8px 0 0;letter-spacing:-.5px;overflow-wrap:anywhere;color:inherit}
.rsp-popup-page .rsp-artwork{margin:0 0 16px}
.rsp-artwork img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#192a20;border-radius:16px}
.rsp-artwork figcaption{text-align:center;min-height:18px;margin-top:8px;font:10px/1.5 system-ui,sans-serif}
.rsp-artwork a{color:#bbccbf;text-underline-offset:3px}
.rsp-popup-page .rsp-card{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:0 0 24px;background:transparent;border:0;border-radius:0;text-align:center}
.rsp-popup-page .rsp-card .rsp-brand,.rsp-popup-page .rsp-card .rsp-eyebrow,.rsp-popup-page .rsp-card .rsp-name{display:none}
.rsp-popup-page .rsp-card .rsp-info{flex:1 1 100%;min-width:0;gap:8px}
.rsp-popup-page .rsp-card .rsp-track{font-size:18px;font-weight:650;line-height:1.45}
.rsp-popup-page .rsp-card .rsp-status{font-size:12px;color:#a7bcae;min-height:18px}
.rsp-popup-page .rsp-card .rsp-toggle{min-width:100px}
.rsp-popup-page .rsp-card .rsp-volume{text-align:left;width:110px}
.rsp-history-section{border-top:1px solid #ffffff20;padding-top:20px}
.rsp-history-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rsp-history-heading h2{font:650 17px/1.4 system-ui,sans-serif;color:inherit;margin:0}
#rsp-history-count{font:12px system-ui;color:#b7f76b}
#rsp-history-status{font:13px/1.5 system-ui;color:#c1d2c9}
.rsp-history{list-style:none;margin:12px 0 0;padding:0}
.rsp-history li{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid #ffffff0d}
.rsp-history time{flex:0 0 39px;font:12px/1.6 system-ui;color:#8ea797;font-variant-numeric:tabular-nums;padding-top:1px}
.rsp-history li div{min-width:0;display:flex;flex-direction:column;gap:3px}
.rsp-history strong{font:550 14px/1.45 system-ui;color:#f8faf8;overflow-wrap:anywhere}
.rsp-history li span{font:12px/1.5 system-ui;color:#a7bcae;overflow-wrap:anywhere}
.rsp-popup-footer{font:11px/1.6 system-ui;color:#8ea797;margin:18px 0 0}
.rsp-popup-footer{text-align:center}
.rsp-popup-page [hidden]{display:none!important}

.rsp-popup-heading .rsp-eyebrow{display:inline-flex;align-items:center;gap:8px}
.rsp-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;animation:rsp-live-blink 2s ease-in-out infinite}
@keyframes rsp-live-blink{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.rsp-live-dot{animation:none}}

/* Shared appearance variables; the two surfaces receive independent settings. */
.rsp-player{background:var(--rsp-background,#14251f);color:var(--rsp-text,#fff)}
.rsp-player .rsp-name{color:var(--rsp-text,#fff)}
.rsp-player .rsp-eyebrow,.rsp-player .rsp-status,.rsp-player .rsp-volume{color:var(--rsp-muted,#c1d2c9)}
.rsp-player .rsp-toggle{box-sizing:border-box;width:100px;min-width:100px;height:46px;min-height:46px;padding:0 12px;margin:0;line-height:1;white-space:nowrap;color:var(--rsp-button-text,#101b16)}
.rsp-player .rsp-toggle:hover{background:var(--rsp-hover,#fff);color:var(--rsp-hover-text,#14251f)}
.rsp-player :focus-visible{outline-color:var(--rsp-text,#fff)}
.rsp-sticky .rsp-info>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsp-player .rsp-close{box-sizing:border-box;display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;color:var(--rsp-text,#fff);font:28px/1 system-ui;cursor:pointer}
.rsp-player .rsp-close:hover{background:var(--rsp-hover,#fff);color:var(--rsp-hover-text,#14251f)}
.rsp-popup-page{background:var(--rsp-background,#101a15);color:var(--rsp-text,#fff)}
.rsp-popup-page .rsp-popup-heading .rsp-eyebrow,.rsp-popup-page #rsp-history-count{color:var(--rsp-accent,#b7f76b)}
.rsp-popup-page .rsp-card .rsp-status,.rsp-popup-page .rsp-artwork a,.rsp-popup-page #rsp-history-status,.rsp-popup-page .rsp-history time,.rsp-popup-page .rsp-history li span,.rsp-popup-page .rsp-popup-footer{color:var(--rsp-muted,#c1d2c9)}
.rsp-popup-page .rsp-history strong{color:var(--rsp-text,#fff)}
.rsp-popup-page .rsp-artwork img{background:var(--rsp-bg,#101a15)}
.rsp-popup-page .rsp-history-section,.rsp-popup-page .rsp-history li{border-color:var(--rsp-muted,#c1d2c9)}
@media(max-width:600px){.rsp-sticky{gap:10px}.rsp-sticky .rsp-toggle{width:80px;min-width:80px;padding:0 8px}.rsp-sticky .rsp-close{flex-basis:44px}}
.rsp-skin-settings{max-width:780px;margin:20px 0;padding:20px;border:1px solid #c3c4c7;border-radius:8px;background:#fff}
.rsp-skin-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.rsp-skin-fields label{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rsp-skin-fields input[type=color]{width:56px;height:36px;cursor:pointer}
.rsp-skin-preview{display:flex;flex-direction:column;gap:12px;border-radius:14px;padding:24px;background:var(--rsp-background);color:var(--rsp-text);font:14px/1.5 system-ui}
.rsp-skin-preview strong{font-size:20px}.rsp-skin-label,.rsp-skin-volume{color:var(--rsp-accent)}.rsp-skin-secondary{color:var(--rsp-muted)}
.rsp-skin-preview .rsp-skin-play{border:0;border-radius:99px;background:var(--rsp-accent);color:var(--rsp-button-text);padding:12px 24px;font:700 14px system-ui;cursor:pointer}
.rsp-skin-preview .rsp-skin-play:hover{background:var(--rsp-hover);color:var(--rsp-hover-text)}