/* Matches the app's UtilityNoticePresenter: compact floating panel, a
   heading/message, and 48px source rows. Site colors are only slightly green. */
.green-card-visual .sd-monitor[data-green-scene="playing"] .playing-app-panel{position:absolute;z-index:6;right:2%;top:10%;width:48%;min-width:0;box-sizing:border-box;padding:2% 2% 1.5%;border:1px solid #bdcbbb;border-radius:12px;background:#f8fcf4f5;box-shadow:0 13px 32px #122d2545;color:#1f3329;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;opacity:0;transform:translateY(-8px)}
.playing-app-panel.is-playing{animation:playing-panel-reveal 9s ease-in-out infinite}
.playing-app-panel-head{position:relative;display:flex;align-items:start;gap:6px;min-height:1.25em;font-size:clamp(13px,1.8cqi,19px);line-height:1.15}
.playing-app-panel-head strong{font-weight:650;letter-spacing:-.025em}
.playing-app-close{margin-left:auto;display:grid;place-items:center;flex:none;width:1.45em;height:1.45em;border-radius:6px;background:#e8efe7;color:#5d7364;font-size:.88em;font-weight:650;line-height:1}
.playing-app-panel p{margin:.25em 0 1em;color:#607068;font-size:clamp(10px,1.22cqi,13px);line-height:1.25}
.playing-app-sources{display:grid;gap:6px}
.playing-app-source{min-height:48px;display:flex;align-items:center;gap:9px;box-sizing:border-box;padding:7px 9px;border:1px solid #d2dfd0;border-radius:7px;background:#edf4eb}
.playing-source-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.playing-source-copy b{font-size:clamp(10px,1.35cqi,14px);font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playing-source-copy small{color:#64786a;font-size:clamp(8px,1.1cqi,11px)}
.playing-browser-icon{position:relative;width:25px;height:25px;flex:none;display:block;box-sizing:border-box;border-radius:6px;box-shadow:0 1px 3px #1d382536}
.playing-chrome-icon{border-radius:50%;background:conic-gradient(#e8bf41 0 115deg,#51a467 115deg 235deg,#dd6a59 235deg 360deg)}.playing-chrome-icon::after{content:"";position:absolute;inset:6px;border:2px solid #f6f7e8;border-radius:50%;background:#4d9dd1}
.playing-safari-icon{border-radius:6px;background:linear-gradient(145deg,#5cbce0,#176eaf)}.playing-safari-icon::before{content:"";position:absolute;inset:3px;border:1px solid #e5f9fb;border-radius:50%}.playing-safari-icon::after{content:"";position:absolute;left:12px;top:4px;width:2px;height:16px;background:#f9f4ed;transform:rotate(35deg);border-radius:2px}
.playing-two-title{position:absolute;left:0;top:0;opacity:0}.playing-safari-source{overflow:hidden;max-height:0;min-height:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0}
.playing-app-panel.is-playing .playing-one-title{animation:playing-first-title 9s steps(1,end) infinite}
.playing-app-panel.is-playing .playing-two-title{animation:playing-second-title 9s steps(1,end) infinite}
.playing-app-panel.is-playing .playing-chrome-source{animation:playing-source-one 9s ease-out infinite}
.playing-app-panel.is-playing .playing-safari-source{animation:playing-source-two 9s ease-out infinite}
@keyframes playing-panel-reveal{0%,7%{opacity:0;transform:translateY(-8px)}15%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}
@keyframes playing-first-title{0%,43%{opacity:1}44%,100%{opacity:0}}
@keyframes playing-second-title{0%,43%{opacity:0}44%,100%{opacity:1}}
@keyframes playing-source-one{0%,14%{opacity:0;transform:translateY(5px)}22%,100%{opacity:1;transform:none}}
@keyframes playing-source-two{0%,42%{opacity:0;max-height:0;min-height:0;padding-top:0;padding-bottom:0;border-width:0;transform:translateY(5px)}49%,92%{opacity:1;max-height:70px;min-height:48px;padding:7px 9px;border-width:1px;transform:none}100%{opacity:0;max-height:70px;min-height:48px;padding:7px 9px;border-width:1px}}
@media(prefers-reduced-motion:reduce){.playing-app-panel,.playing-app-panel.is-playing{opacity:1;transform:none;animation:none}.playing-one-title{display:none!important}.playing-two-title{opacity:1!important;animation:none!important}.playing-safari-source{opacity:1!important;max-height:70px!important;min-height:48px!important;padding:7px 9px!important;border-width:1px!important;animation:none!important}}

/* Actual app reference panel is charcoal with two softly outlined source rows.
   A tiny green bias connects the illustration to the site wallpaper. */
.green-card-visual .sd-monitor[data-green-scene="playing"] .playing-app-panel,
.green-card-visual .sd-monitor[data-green-scene="competingAudio"] .playing-app-panel{position:absolute;z-index:6;right:2%;top:10%;width:48%;box-sizing:border-box;padding:2% 2% 1.5%;border:1px solid #222e27;border-radius:17px;background:#48534cfa;box-shadow:0 13px 32px #122d2545;color:#f9fff9;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.playing-app-panel p,.playing-source-copy small{color:#d1dcd2}
.playing-app-close{background:#ffffff18;color:#f1f8f0}
.playing-app-source{border-color:#ffffff2b;background:#ffffff14}
.green-card-visual .sd-monitor[data-green-scene="competingAudio"] .competing-app-panel{opacity:1;transform:none}