:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background:radial-gradient(1200px 800px at 20% 10%,rgba(100,108,255,.18),transparent 55%),radial-gradient(900px 700px at 80% 90%,rgba(255,255,255,.08),transparent 60%),#141414;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;min-height:100dvh}#root{width:100vw;height:100vh;height:100dvh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.appShell{width:100vw;height:100vh;height:100dvh;position:relative;overflow:hidden;display:grid;--app-pad: 24px}.videoPane{grid-area:1 / 1;width:100%;height:100%;display:grid;place-items:center;padding:var(--app-pad)}.videoOverlayPane{grid-area:1 / 1;justify-self:end;align-self:start;margin:var(--app-pad);width:min(380px,calc(100vw - (2 * var(--app-pad))));max-height:calc(100dvh - (2 * var(--app-pad)));overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:#00000052;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 60px #00000073,inset 0 1px #ffffff14}.videoFrame{--ar: 1.7777778;aspect-ratio:var(--ar);width:min(calc(50vw - (2 * var(--app-pad))),calc((100dvh - (2 * var(--app-pad))) * var(--ar)));display:grid;place-items:center;background:#00000042;border:1px solid rgba(255,255,255,.16);border-radius:16px;overflow:hidden;position:relative;box-shadow:0 22px 80px #0000008c,0 0 0 1px #ffffff0f,inset 0 1px #ffffff14}.videoFrame:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 90% at 30% 20%,rgba(100,108,255,.18),transparent 55%),radial-gradient(90% 90% at 70% 80%,rgba(255,255,255,.08),transparent 60%),linear-gradient(to bottom,#00000026,#00000059);mix-blend-mode:screen}.videoPlayer{width:100%;height:100%;object-fit:contain;object-position:center;display:block;transform:translateZ(0)}.videoHud{position:absolute;left:12px;top:12px}.videoTapOverlay{position:absolute;inset:0;display:grid;place-items:center;border:none;background:#00000038;color:#ffffffeb;font:inherit;font-weight:700;letter-spacing:.2px;cursor:pointer}.videoPlaceholder{padding:16px;text-align:center;opacity:.85}.videoList{padding:14px;display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}.videoListHeader{font-size:14px;font-weight:700;letter-spacing:.2px;display:flex;flex-direction:column;gap:2px}.videoListSub{font-size:12px;font-weight:500;opacity:.85}.videoListEmpty{opacity:.85;font-size:13px;line-height:1.4}.videoListItems{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:auto;padding-right:4px}.videoListItem{width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#00000038;color:#ffffffeb;cursor:pointer;font:inherit;transition:transform .12s ease,border-color .12s ease,background .12s ease}.videoListItem:hover{transform:translateY(-1px);background:#00000047;border-color:#ffffff38}@media(max-width:900px){.appShell{--app-pad: 16px}.videoOverlayPane{width:min(360px,calc(100vw - (2 * var(--app-pad))))}}@media(max-width:720px){.appShell{--app-pad: 12px}.videoPane{padding:0;place-items:stretch}.videoFrame{width:100%;height:100%;aspect-ratio:auto;border:none;border-radius:0;box-shadow:none}.videoFrame:before{opacity:.65}.videoOverlayPane{justify-self:center;align-self:start;width:calc(100vw - (2 * var(--app-pad)));max-height:min(28dvh,calc(100dvh - (2 * var(--app-pad))));border-radius:16px}}@media(max-height:520px){.appShell{--app-pad: 10px}.videoOverlayPane{max-height:calc(100dvh - (2 * var(--app-pad)));width:min(340px,calc(100vw - (2 * var(--app-pad))));justify-self:end;align-self:start}}.videoListItemActive{border-color:#646cff99}.videoListItemTitle{font-weight:700;font-size:13px}.videoListItemMeta{margin-top:4px;font-size:12px;opacity:.8;word-break:break-word}