:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:CanvasText;background-color:Canvas;height:100vh;width:100vw;overflow:hidden;margin:0}body{margin:0}.NavContainer{display:flex;overflow:hidden;transition:max-height .4s ease,margin .4s ease}.NavContainerShow{margin-top:10px;margin-bottom:10px;max-height:100px}.NavContainerHide{margin-top:0;margin-bottom:0;max-height:0px}.NavItem{width:max-content;padding-left:10px;padding-right:10px;cursor:pointer}.NavItem:hover{text-decoration:underline}.explanationContainer{height:100%;overflow-y:auto;padding:20px}h1{margin-top:0}.PlayerContainer{display:flex;flex-direction:column;height:100%;min-height:0}.StreamInputContainer{display:flex;flex:0;width:100%;height:100%;object-fit:contain}.StreamUrl{flex:1}.StreamPlayButton{width:fit-content}.VideoPlayer{height:auto;width:100%;height:100%;object-fit:contain}.quad-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:8px;width:100%;height:100%}.quad-grid>*{display:flex;justify-content:center;align-items:center;background-color:Canvas;width:100%;height:100%;border:2px solid transparent;transition:border-color .2s ease;overflow:hidden}.quad-grid>*.selected{border-color:#0f8}.quad-grid video{max-width:100%;max-height:100%;object-fit:contain}.rootContainer{width:100vw;height:100vh;display:flex;flex-direction:column}.headerContainer{flex:0 0 auto}.mainContentContainer{flex:1 1 auto;min-height:0;overflow:hidden}