*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background-color:#000}#root{width:100%;height:100%}.media-player{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.media-item{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.media-content{max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain;object-position:center;display:block}.error{color:#fff;font-size:2rem;text-align:center}.resolution-overlay{position:fixed;top:10px;left:10px;background-color:#000000b3;color:#fff;padding:8px 12px;border-radius:4px;font-family:Courier New,monospace;font-size:14px;line-height:1.4;z-index:9999;pointer-events:none}.media-item.active{opacity:1;z-index:2}.transition-none.transition-out{opacity:0;z-index:1}.transition-none.transition-in{opacity:1;z-index:2}.transition-fade.transition-out{opacity:1;z-index:1;animation:fadeOut var(--transition-duration) ease-in-out forwards}.transition-fade.transition-in{opacity:0;z-index:2;animation:fadeIn var(--transition-duration) ease-in-out forwards}@keyframes fadeOut{to{opacity:0}}@keyframes fadeIn{to{opacity:1}}.transition-fade-black.transition-out{opacity:1;z-index:2;animation:fadeOutBlack calc(var(--transition-duration) / 2) ease-in forwards}.transition-fade-black.transition-in{opacity:0;z-index:3;animation:fadeInBlack calc(var(--transition-duration) / 2) ease-out calc(var(--transition-duration) / 2) forwards}@keyframes fadeOutBlack{to{opacity:0}}@keyframes fadeInBlack{0%{opacity:0}to{opacity:1}}.transition-fade-white.transition-out{opacity:1;z-index:2;animation:fadeOutWhite calc(var(--transition-duration) / 2) ease-in forwards}.transition-fade-white.transition-in{opacity:0;z-index:3;animation:fadeInWhite calc(var(--transition-duration) / 2) ease-out calc(var(--transition-duration) / 2) forwards}.transition-fade-white .media-player:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;z-index:2;opacity:0;animation:flashWhite var(--transition-duration) ease-in-out}@keyframes fadeOutWhite{to{opacity:0}}@keyframes fadeInWhite{0%{opacity:0}to{opacity:1}}@keyframes flashWhite{0%,to{opacity:0}50%{opacity:1}}.transition-slide-left.transition-out{z-index:1;animation:slideOutLeft var(--transition-duration) ease-in-out forwards}.transition-slide-left.transition-in{z-index:2;animation:slideInRight var(--transition-duration) ease-in-out forwards}@keyframes slideOutLeft{to{transform:translate(-100%)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.transition-slide-right.transition-out{z-index:1;animation:slideOutRight var(--transition-duration) ease-in-out forwards}.transition-slide-right.transition-in{z-index:2;animation:slideInLeft var(--transition-duration) ease-in-out forwards}@keyframes slideOutRight{to{transform:translate(100%)}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}.transition-slide-up.transition-out{z-index:1;animation:slideOutUp var(--transition-duration) ease-in-out forwards}.transition-slide-up.transition-in{z-index:2;animation:slideInDown var(--transition-duration) ease-in-out forwards}@keyframes slideOutUp{to{transform:translateY(-100%)}}@keyframes slideInDown{0%{transform:translateY(100%)}to{transform:translateY(0)}}.transition-slide-down.transition-out{z-index:1;animation:slideOutDown var(--transition-duration) ease-in-out forwards}.transition-slide-down.transition-in{z-index:2;animation:slideInUp var(--transition-duration) ease-in-out forwards}@keyframes slideOutDown{to{transform:translateY(100%)}}@keyframes slideInUp{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.transition-zoom-in.transition-out{z-index:1;animation:zoomInOut var(--transition-duration) ease-in-out forwards}.transition-zoom-in.transition-in{z-index:2;opacity:0;animation:fadeIn var(--transition-duration) ease-in-out forwards}@keyframes zoomInOut{to{transform:scale(1.2);opacity:0}}.transition-zoom-out.transition-out{z-index:1;animation:zoomOutOut var(--transition-duration) ease-in-out forwards}.transition-zoom-out.transition-in{z-index:2;opacity:0;animation:fadeIn var(--transition-duration) ease-in-out forwards}@keyframes zoomOutOut{to{transform:scale(.8);opacity:0}}.transition-push-left.transition-out{z-index:1;animation:pushOutLeft var(--transition-duration) ease-in-out forwards}.transition-push-left.transition-in{z-index:2;animation:pushInLeft var(--transition-duration) ease-in-out forwards}@keyframes pushOutLeft{to{transform:translate(-100%)}}@keyframes pushInLeft{0%{transform:translate(100%)}to{transform:translate(0)}}.transition-wipe-left.transition-out{z-index:1}.transition-wipe-left.transition-in{z-index:2;clip-path:inset(0 100% 0 0);animation:wipeLeft var(--transition-duration) ease-in-out forwards}@keyframes wipeLeft{to{clip-path:inset(0 0 0 0)}}.transition-ken-burns.transition-out{z-index:1;animation:kenBurnsOut var(--transition-duration) ease-in-out forwards}.transition-ken-burns.transition-in{z-index:2;opacity:0;animation:kenBurnsIn var(--transition-duration) ease-in-out forwards}@keyframes kenBurnsOut{to{transform:scale(1.15) translate(-3%,3%);opacity:0}}@keyframes kenBurnsIn{0%{transform:scale(1.1) translate(2%,-2%);opacity:0}to{transform:scale(1) translate(0);opacity:1}}#root{width:100%;height:100%;margin:0;padding:0}.loading,.error{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;color:#fff;font-family:system-ui,-apple-system,sans-serif}.loading p{font-size:1.5rem}.error h1{font-size:2rem;margin-bottom:1rem}.error p{font-size:1.2rem;margin:.5rem 0}.error .hint{margin-top:2rem;font-size:1rem;color:#888}
