/* The web player: a canvas at a whole-number scale, and a bar under it. */
.cmm-player{margin-block:var(--s2);background:#000;color:var(--muted);font:14px/24px Plex,Arial,sans-serif}
.cmm-player canvas{display:block;image-rendering:pixelated;outline:none;touch-action:none;user-select:none;-webkit-user-select:none}
.cmm-player canvas:focus-visible{outline:1px solid var(--focus);outline-offset:4px}
.cmm-player__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);padding:calc(var(--s1) - 1px) 0 var(--s1);border-top:1px solid var(--border)}
.cmm-player__note{flex:1;min-width:12em}
.cmm-player button{font:inherit;color:var(--foreground);background:none;border:1px solid var(--border);border-radius:0;padding:0 calc(var(--s1) - 1px);height:24px;cursor:pointer}
.cmm-player button:hover{border-color:var(--focus);color:#e0e0e0}
.cmm-player button[aria-pressed=true]{background:#181818;border-color:var(--focus);color:var(--foreground)}
.cmm-player__notice{display:none;margin:0;padding:calc(var(--s2) - 1px);border:1px solid var(--border);color:var(--foreground)}
.cmm-player.is-too-small canvas,.cmm-player.is-too-small .cmm-player__bar{display:none}
.cmm-player.is-too-small .cmm-player__notice{display:block}
.cmm-player.is-failed{box-shadow:0 0 0 1px var(--border);padding:var(--s2)}
.cmm-player:fullscreen{display:flex;flex-direction:column;justify-content:space-between}
.cmm-player.is-demo canvas{cursor:default}
.cmm-player:not(:has(canvas)):not(.is-failed):not([data-parts=bar]){aspect-ratio:16/9}