.study-player{width:100%;min-width:0}
.study-player-controls{display:flex;align-items:center;gap:6px;padding:5px 0 0;min-height:32px;color:var(--ink)}
.study-player-controls button{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border:0;border-radius:5px;background:transparent;color:inherit;padding:5px;cursor:pointer}
.study-player-controls button:hover{background:rgb(13 13 11 / 7%)}
.study-player-controls svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.study-player-controls input[type=range]{appearance:none;-webkit-appearance:none;flex:1;min-width:20px;width:100%;height:28px;margin:0;padding:0;background:transparent;touch-action:none;--played:0%}
.study-player-controls input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,var(--ink) var(--played),rgb(13 13 11 / 22%) var(--played))}
.study-player-controls input::-webkit-slider-thumb{appearance:none;width:8px;height:8px;background:var(--ink);border-radius:50%;margin-top:-3px}
.study-player-controls input::-moz-range-track{height:2px;background:rgb(13 13 11 / 22%)}
.study-player-controls input::-moz-range-progress{height:2px;background:var(--ink)}
.study-player-controls input::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:var(--ink)}
.study-player:fullscreen{padding:24px;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.study-player:fullscreen .media{height:auto!important;width:min(100%,140vh)!important;max-height:calc(100vh - 100px);aspect-ratio:var(--video-ratio)!important}
.study-player:fullscreen video{width:100%;height:100%;object-fit:contain}
.study-player:fullscreen .study-player-controls{width:min(100%,1100px)}
@media(max-width:600px){.study-player-controls{gap:2px}.study-player-controls button{width:25px;flex-basis:25px;padding:5px}.study-player-controls svg{width:15px;height:15px}}

/* Project controls live over the bottom of the picture; the home reel is separate. */
.study-player{position:relative;border-radius:var(--media-radius);overflow:hidden}
.study-player-controls{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:13px 9px 5px;color:#fff;background:linear-gradient(transparent,rgb(0 0 0 / 65%));opacity:0;transition:opacity .18s ease}
.study-player:is(:hover,:focus-within,.is-paused)>.study-player-controls{opacity:1}
.study-player-controls button:hover{background:rgb(255 255 255 / 15%)}
.study-player-controls input::-webkit-slider-runnable-track{background:linear-gradient(to right,#fff var(--played),rgb(255 255 255 / 35%) var(--played))}
.study-player-controls input::-webkit-slider-thumb{background:#fff}
.study-player-controls input::-moz-range-track{background:rgb(255 255 255 / 35%)}
.study-player-controls input::-moz-range-progress,.study-player-controls input::-moz-range-thumb{background:#fff}
html body .study-player-controls button,html body .study-player-controls button *,html body .study-player-controls input{cursor:pointer!important}
.study-player:fullscreen{display:block;padding:0;background:#000}
.study-player:fullscreen .media{height:100%!important;width:100%!important;max-height:none;aspect-ratio:auto!important}
.study-player:fullscreen .study-player-controls{width:100%;max-width:none}
@media(hover:none){.study-player-controls{opacity:1}}
@media(prefers-reduced-motion:reduce){.study-player-controls{transition:none}}

.study-player{container-type:inline-size}
@container (max-width:180px){.study-player-controls{gap:2px;padding-left:5px;padding-right:5px}.study-player-controls button{width:24px;flex-basis:24px}.study-player-controls button:nth-last-child(2){display:none}}