.display-page{--youtube-width:min(48vw,640px);--youtube-height:clamp(202px,min(27vw,calc(100dvh - 180px)),360px)}
.youtube-display-player{position:fixed;right:24px;bottom:24px;width:var(--youtube-width);height:var(--youtube-height);z-index:90;background:#000;border:1px solid #8296b4;border-radius:8px;overflow:hidden;box-shadow:0 8px 30px #0008}
.youtube-display-player iframe{display:block;width:100%;height:100%;min-width:200px;min-height:200px}
.youtube-display-player.youtube-audio-only{opacity:0;pointer-events:none;border:0;box-shadow:none}
.display-page:has(> .youtube-audio-only) .youtube-start-button{left:50%;right:auto;bottom:24px;transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content}
.youtube-display-mode{margin:0 0 16px;padding:12px;border:1px solid #60708b;border-radius:10px;min-width:0;color:#f1f5ff}
.youtube-display-mode legend{font-size:1rem;font-weight:700;padding:0 6px}
.youtube-display-mode label{display:flex;align-items:center;gap:8px;padding:8px 0;cursor:pointer}
.youtube-display-mode input{width:18px;height:18px;accent-color:#22c55e;flex-shrink:0}
.youtube-display-mode p{font-size:.85rem;line-height:1.45;color:#cbd5e1;margin:8px 0 0}
.youtube-display-mode [role=alert]{color:#fecaca}
.display-page:has(> .youtube-display-player:not(.youtube-audio-only):not([style*="none"])) .display-main{padding-right:calc(var(--youtube-width) + 48px)}
.display-page:has(> .youtube-display-player:not(.youtube-audio-only):not([style*="none"])) .listening-banner{padding-inline:clamp(12px,2vw,30px);min-width:0;white-space:normal;overflow-wrap:anywhere}
.display-page:has(> .youtube-display-player:not(.youtube-audio-only):not([style*="none"])) .listening-copy{min-width:0}
.display-page:has(> .youtube-display-player:not(.youtube-audio-only):not([style*="none"])) .display-media-check{padding-right:calc(var(--youtube-width) + 72px)}
.display-page:has(> .youtube-start-button) .listening-banner{display:none}
.youtube-start-button{position:fixed;left:24px;bottom:24px;max-width:calc(100vw - var(--youtube-width) - 72px);z-index:101;padding:12px 20px;border:1px solid #fff;border-radius:10px;background:#168543;color:#fff;font:bold 20px system-ui;cursor:pointer}
@media(max-width:600px){
 .display-page{--youtube-width:calc(100vw - 24px);--youtube-height:clamp(202px,32dvh,280px)}
 .youtube-display-player{right:12px;bottom:12px}
 .display-page:has(> .youtube-display-player:not(.youtube-audio-only):not([style*="none"])) .display-main{padding-right:0;padding-bottom:calc(var(--youtube-height) + 24px)}
 .display-page:has(> .youtube-display-player:not(.youtube-audio-only):not([style*="none"])) .display-media-check{padding-right:6vw;padding-bottom:calc(var(--youtube-height) + 80px)}
 .youtube-start-button{left:12px;right:12px;bottom:calc(var(--youtube-height) + 24px);max-width:none;padding:8px 16px;font-size:16px}
}