/* Independently drawn controls, visually referenced against tersiswilvin's 2012 HTML5 Player. */
.retro-player .player-controls{height:28px;border-top:1px solid #111;background:linear-gradient(to bottom,#090909,#3a3a3a)}
.retro-player .player-bar{height:27px;gap:0;padding:0 3px;position:relative}
.retro-player .player-bar button{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:34px;width:34px;height:27px;padding:0;border:0;border-right:1px solid #ffffff08;box-shadow:1px 0 #0002;color:#aaa;cursor:pointer}
.retro-player .player-bar button:hover{background:#ffffff0a;color:#eee}
.retro-player .player-bar button:focus-visible,.retro-player input:focus-visible{outline:1px solid #ddd;outline-offset:-2px}
.retro-player .player-bar .icon{width:18px;height:18px;color:inherit;filter:drop-shadow(0 1px 1px #000);stroke-width:1.8}
.retro-player .player-play .icon{width:17px;height:17px;fill:currentColor;stroke-width:0}
.retro-player .player-progress{top:-5px;height:9px;z-index:5;cursor:pointer}
.retro-player .player-progress .seek{appearance:none;-webkit-appearance:none;border:0;border-radius:0;margin:0;width:100%;height:5px;box-shadow:inset 0 1px #0006;background:linear-gradient(to right,#c52218 0%,#c52218 var(--progress,0%),transparent var(--progress,0%)),linear-gradient(to right,#999 0%,#999 var(--buffered,0%),#555 var(--buffered,0%));touch-action:pan-y}
.retro-player .seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border:1px solid #b7b7b7;border-radius:50%;background:radial-gradient(circle,#eee 0 2px,#bcbcbc 2px 3px,#eee 3px);box-shadow:0 0 2px #0009}
.retro-player .seek::-moz-range-thumb{width:8px;height:8px;border:1px solid #b7b7b7;border-radius:50%;background:radial-gradient(circle,#eee 0 2px,#bcbcbc 2px 3px,#eee 3px);box-shadow:0 0 2px #0009}
.retro-player .player-volume-control{display:flex;align-items:center;flex:none;height:27px}
.retro-player .player-volume-control .player-mute{width:30px;min-width:30px;border:0;box-shadow:none}
.retro-player .player-volume-drawer{display:flex;align-items:center;width:0;opacity:0;overflow:hidden;height:27px;transition:width .15s ease-out,opacity .1s linear}
.retro-player .player-volume-control:hover .player-volume-drawer,.retro-player .player-volume-control:has(:focus-visible) .player-volume-drawer{width:62px;opacity:1}
.retro-player .player-volume{appearance:none;-webkit-appearance:none;flex:none;width:52px;min-width:52px;height:5px;padding:0;margin:0 6px 0 2px;border:0;border-radius:0;background:linear-gradient(to right,#b82920 var(--volume,100%),#555 var(--volume,100%));box-shadow:inset 0 1px 2px #000;cursor:pointer}
.retro-player .player-volume::-webkit-slider-runnable-track{height:5px;background:transparent;border-radius:0}
.retro-player .player-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;margin-top:-2px;height:9px;width:4px;border:1px solid #aaa;border-radius:1px;background:linear-gradient(90deg,#ddd,#fff,#aaa);box-shadow:0 0 1px #000}
.retro-player .player-volume::-moz-range-thumb{height:7px;width:3px;border:1px solid #aaa;border-radius:1px;background:linear-gradient(90deg,#ddd,#fff,#aaa);box-shadow:0 0 1px #000}
.retro-player .player-volume::-moz-range-track{height:5px;background:transparent;border:0}
.retro-player .player-time{margin-left:6px;font:10px/27px Arial,Helvetica,sans-serif;text-shadow:0 1px #000;color:#aaa}
.retro-player .player-current{color:#eee}.retro-player .player-duration{color:#999}
.retro-player .player-annotations .icon{width:16px;height:13px;fill:#777;stroke:#777}
.retro-player .player-annotations[aria-pressed=true] .icon{fill:#b63829;stroke:#b63829}
.retro-player .player-settings .icon{width:17px;height:17px;fill:currentColor;stroke:none;fill-rule:evenodd}
.retro-player .player-full .icon{width:19px;height:19px;stroke-width:2}
.retro-player .player-settings-menu{bottom:32px}
.retro-player .player-big{width:70px;height:48px;border:1px solid #7778;border-radius:6px;background:linear-gradient(#454545e6,#141414e6);box-shadow:0 1px 3px #0006}
.retro-player .player-big:hover{background:linear-gradient(#666e,#222e);border-color:#aaa}
.retro-player .player-big .icon{width:28px;height:28px;fill:#ddd;stroke-width:0;filter:drop-shadow(0 1px #000)}
@media(prefers-reduced-motion:reduce){.retro-player .player-volume-drawer{transition:none}}

@media(hover:none){.retro-player .player-volume-control:focus-within .player-volume-drawer{width:62px;opacity:1}}

/* Decoded 4:3 videos use their native frame, including annotation/editor bounds. */
.retro-player.native-4-3 .player-stage{aspect-ratio:4/3}
.retro-player.native-4-3:fullscreen .player-stage{aspect-ratio:4/3;width:min(100%,calc((100vh - 28px)*4/3))}