/* The player keeps its content out from under the notch, Dynamic Island and home
   indicator. */
dialog.player{margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;overflow:hidden;grid-template-columns:minmax(0,1fr)}
dialog.player::backdrop{background:rgba(0,27,63,.65)}
dialog.player:not([open]){display:none}
.player button,.player a{min-height:44px;min-width:44px}
.player a{display:inline-flex;align-items:center}
.player :focus-visible{outline:3px solid #d88700;outline-offset:3px}
.player .player-bar,.player .player-frame{min-width:0;max-width:100%;box-sizing:border-box}
.player .player-close{flex-shrink:0}
@media(max-width:42rem){.player .player-manual{display:none}}
/* The lesson already supplies its title and tools; keep one clear course exit.
   The lesson frame reads the same insets as this page (WebKit and Chromium give a
   same-origin frame the page's own) and pads its own chrome, so the study player
   pads only its bar: padding the frame as well put every inset in twice. */
dialog.player.study-player{grid-template-rows:48px minmax(0,1fr);background:#f8fbfb;padding:env(safe-area-inset-top) 0 0}
.player.study-player .player-bar{gap:14px;padding:2px max(12px,env(safe-area-inset-right)) 2px max(12px,env(safe-area-inset-left));background:#f8fbfb;border-color:#cbdadd}
.player.study-player .player-close{width:auto;padding:0 12px;font:600 13px/1.2 system-ui;color:#164d5d;border-color:#a7c0c7;border-radius:7px}
/* Inside the button: the 48px bar has no room for a ring drawn outside it. */
.player.study-player .player-close:focus-visible{outline-offset:-3px}
.player.study-player .player-bar>img,.player.study-player .player-title strong{display:none}
/* The course label wraps between words, never cut; where the bar has no room for it
   (a phone at page zoom) it gives way: the lesson header below names the lesson. */
.player.study-player .player-title small{color:#45616c;font:600 11px/1.25 system-ui;letter-spacing:.02em;white-space:normal;text-overflow:clip}
@media(max-width:359px){.player.study-player .player-title{display:none}}
.player.study-player .player-manual{color:#1b5666}