html,body,#root{height:100%}body{margin:0}.app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;--video-w: calc(50dvh * 16 / 9)}.app-shell header{flex:0 0 auto}.app-shell .logo{height:auto;margin:0}.app-shell .logo img{height:clamp(36px,8vh,84px);padding:clamp(4px,1vh,14px);width:auto;max-width:100%}.app-shell .player-area{flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 clamp(4px,1vw,16px)}.app-shell .video-frame{position:relative;width:100%;max-width:min(100%,var(--video-w));aspect-ratio:16 / 9;margin:0 auto;background:#000}.app-shell .video-frame>div{position:absolute;top:0;right:0;bottom:0;left:0}.app-shell .video-frame iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;display:block}.app-shell .video-controls{flex:0 0 auto}.app-shell .video-list{flex:1 1 auto;min-height:3.6rem;overflow-y:auto;width:100%;max-width:min(100%,calc(var(--video-w) + 4rem));margin:0 auto;box-sizing:border-box}@media (max-width: 768px){.app-shell .video-list{border:none}}