.demo-page{padding:20px;display:flex;flex-direction:column;gap:20px;align-items:center}.video-container{width:100%;max-width:800px;margin-bottom:20px}.controls{display:flex;gap:10px}.controls button{padding:8px 16px;background-color:#4caf50;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.controls button:hover{background-color:#45a049}.time-control{margin:20px;display:flex;align-items:center;gap:10px}.time-control input{width:100px;padding:5px}.time-control button{padding:5px 10px;cursor:pointer}.main-page{display:flex;height:100vh;width:100%;flex-direction:row;justify-content:center}.main-page-list{height:100%;width:100%;max-width:414px;flex-shrink:0}.main-page-pannel{height:100%;width:100%;max-width:640px}.main-page-iframe{display:none;flex:1;height:100%;border-left:1px solid #eee;overflow:hidden}.content-iframe{width:100%;height:100%;border:none;display:block}@media (min-width: 1200px){.main-page-iframe{display:block}}@media screen and (max-width: 1000px){.main-page-pannel{position:fixed;right:-100%;transition:right .3s ease-out}.main-page-pannel.active{right:0}}.feed-list-container{height:100vh;box-sizing:border-box}.feed-list{height:calc(100vh - 50px);background-color:var(--main-color);overflow-y:auto;max-width:100%;box-sizing:border-box}.feed-list-item{width:100%;max-width:100%;display:flex;gap:8px;padding:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--main-color);color:var(--primary-color);border-radius:2px;border:.5px solid var(--secondary-color)}.feed-list-item dl{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.feed-list-item span{color:#777;margin-left:10px}.feed-list-item dt{font-family:monospace}.feed-list-item dd{width:100%;max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.feed-list-loading-item{width:100%;height:80px;display:flex;align-items:center;justify-content:center;border-radius:2px;color:var(--primary-color);border:.5px solid var(--secondary-color);max-width:100%;box-sizing:border-box}.feed-list-bottom-nav{background-color:var(--main-color);display:flex;justify-content:space-between;padding:0;bottom:0;left:0;width:100%;height:50px}.feed-list-bottom-nav-btn{background-color:var(--secondary-color);color:var(--main-color);border:.1px solid var(--main-color);cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;font-family:monospace}.photo-picture{border:none;-o-object-fit:contain;object-fit:contain;background-color:#000;aspect-ratio:16 / 9;width:100%;max-width:100%}.photo-picture-320-placeholder{background-color:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;width:320px;height:180px}.photo-poster{max-width:100%;width:100%;aspect-ratio:16 / 9;-o-object-fit:cover;object-fit:cover}.photo-poster-placeholder{background-color:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}.photo-avatar-50{width:48px;height:48px;-o-object-fit:cover;object-fit:cover;border-radius:50%}.photo-avatar-50-placeholder{width:48px;height:48px;background-color:#000;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center}.photo-caurousel{position:relative;background-color:#000;aspect-ratio:16 / 9;width:100%;max-width:100%;height:200px}.photo-caurousel img{border:none;-o-object-fit:contain;object-fit:contain;aspect-ratio:16 / 9;height:200px;width:100%}.photo-caurousel-button{position:absolute;top:50%;transform:translateY(-50%);color:#f0f8ff;background:#0003;width:2rem;height:2rem}.photo-caurousel-button.prev{left:0}.photo-caurousel-button.next{right:0}.photo-group-single{background-color:#000;display:grid;grid-template-columns:repeat(1,1fr);gap:1px}.photo-group-single-wrapper{overflow:hidden;aspect-ratio:16 / 9}.photo-group-single-wrapper img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;transition:transform .3s ease}.photo-group-mid{background-color:#000;max-width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:1px}.photo-group-mid-wrapper{overflow:hidden;aspect-ratio:1 / 1}.photo-group-mid-wrapper img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease}.photo-group{background-color:#000;max-width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:1px}.photo-group-wrapper{overflow:hidden;aspect-ratio:1 / 1}.photo-group-wrapper img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease}.pannel-container{border-left:.5px solid var(--secondary-color);border-right:.5px solid var(--secondary-color);background-color:var(--main-color)}.panel{display:flex;flex-direction:column;height:calc(100vh - 50px);background-color:var(--main-color)}.mico-pannel-container{border-left:.5px solid var(--secondary-color);border-right:.5px solid var(--secondary-color);background-color:var(--main-color)}.mico-panel{width:100%;display:flex;flex-direction:column;height:calc(100vh - 50px);background-color:var(--main-color)}.panel-player{position:relative;width:100%;aspect-ratio:16/9;background-color:#000}.panel-player-content{width:100%;position:absolute;aspect-ratio:16/9;top:0;left:0}.embed-player{position:relative;width:100%;padding-bottom:56.25%}.embed-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}.media-video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;aspect-ratio:16/9;display:block}.media-video-floating-btn{position:absolute;background:#0000004d;color:#fff;border:none;padding:.5em 1em;border-radius:.5em;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:.5em;z-index:10;-webkit-tap-highlight-color:transparent}.media-video-floating-btn-disabled{opacity:.5;cursor:not-allowed}.media-video-player,.media-card-player{position:relative;width:100%;overflow:hidden;background:#1a1a1a}.media-card-player-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;z-index:1}.media-video-controls-overlay{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.3) 100%);transition:opacity .3s ease;cursor:pointer;z-index:1}.media-video-poster{position:absolute;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.caurousel-player{background:#000;display:grid;grid-template-columns:repeat(3,1fr);max-width:100%;gap:1px}.caurousel-player img{overflow:hidden;aspect-ratio:1 / 1;width:100%;height:100%;transition:transform .3s ease;-o-object-fit:cover;object-fit:cover}.caurousel-player-two{background:#000;display:grid;gap:1px;grid-template-columns:repeat(2,1fr);max-width:100%}.caurousel-player-two img{overflow:hidden;aspect-ratio:1 / 1;width:100%;height:100%;transition:transform .3s ease;-o-object-fit:cover;object-fit:cover}.photo-player{background:#000;aspect-ratio:16/9;width:100%;position:relative}.photo-player img{position:absolute;top:0;left:0;width:100%;aspect-ratio:16/9;-o-object-fit:contain;object-fit:contain}:root{--base-main-color: white;--base-primary-color: black;--base-secondary-color: black}.base-panel-tabs{width:100%;display:flex;padding:4px;gap:.25rem;border-top:1px solid black;border-bottom:1px solid black}.base-panel-tabs button{background-color:var(--base-secondary-color);color:var(--base-main-color);border-radius:50px;height:24px;font-family:monospace;font-size:10px;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;justify-content:center;display:flex;flex:1}.base-panel-summary{width:100%;padding:18px;overflow-y:auto;flex:1;background-color:var(--base-main-color);-webkit-overflow-scrolling:touch;box-sizing:border-box}.pannel-summary-title{font-weight:bolder;white-space:pre-line;word-wrap:break-word;overflow-wrap:break-word;margin-bottom:1.2rem}.pannel-summary-content{white-space:pre-line;word-wrap:break-word;overflow-wrap:break-word;margin-bottom:1.2rem}.pannel-summary-link-button{padding:10px;color:var(--base-main-color);border:.1px solid var(--base-main-color);border-radius:5px;cursor:pointer;font-size:8px}.pannel-summary-videos-container,.pannel-summary-embed-container{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}.pannel-summary-link-button-container{margin-bottom:1.2rem}.panel-summary-item{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}.custom-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center}.custom-dialog{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px #0000004d;text-align:center}.custom-dialog button{background-color:#000;color:#fff;border:none;padding:10px 20px;margin:5px;border-radius:5px;cursor:pointer}.custom-dialog button:hover{background-color:#333}.video-player{position:relative;background:#000;display:flex;width:100%}.video-player video{aspect-ratio:16 / 9;width:100%;-o-object-fit:contain;object-fit:contain}.video-player-playbtn{position:absolute;right:2%;top:2%;height:3rem;width:3rem}.video-player-playbtn svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,1))}.video-player-voicebtn{position:absolute;left:2%;top:2%;height:3rem;width:3rem}.video-player-voicebtn svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,1))}.video-player-timer{position:absolute;bottom:10%;left:50%;transform:translate(-50%);color:#fff;font-family:monospace;text-shadow:2px 2px 4px rgba(0,0,0,1)}.video-player-proccess{position:absolute;bottom:0;background-color:#e5e7eb;height:.2rem}.video-player-proccess-bar{position:absolute;bottom:0;background-color:transparent;height:.8rem;width:100%}.video-player-fbtn{background:transparent;position:absolute;top:50%;transform:translateY(-50%);right:0;width:30%;height:30%;z-index:2;border:none;cursor:pointer}.video-player-rbtn{background:transparent;position:absolute;top:50%;transform:translateY(-50%);left:0;width:30%;height:30%;z-index:2;border:none;cursor:pointer}.video-player-controls{background:transparent;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.card-player{position:relative;background:#000;display:flex;width:100%}.card-player video{aspect-ratio:16 / 9;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.gird-player{width:100%;display:grid;grid-template-columns:repeat(1,1fr);overflow:hidden;border-radius:8px}.gird-player-2{width:100%;display:grid;grid-template-columns:repeat(2,1fr);aspect-ratio:16 / 9;background:#000;place-items:center;overflow:hidden;border-radius:8px;border-inline:1px solid white}.gird-player-wrapper{overflow:hidden;aspect-ratio:16 / 9}.clips-player{position:relative;background:#000;aspect-ratio:16 / 9;border-radius:10px;height:100%;max-width:100%}.clips-player video{width:100%;height:100%;border-radius:10px;-o-object-fit:contain;object-fit:contain}.player-video{position:relative;background:#000;aspect-ratio:16 / 9;height:100%;max-width:100%}.player-video video{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.player-controls{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.player-controls-player-btn{position:absolute;bottom:5%;left:5%;background:#00000080;color:#fff;height:18px;padding:5px;border-radius:.5em;display:flex;flex-direction:row;align-items:center;z-index:3}.player-controls-player-btn span{font-size:8px;white-space:nowrap;font-family:monospace;padding:2px}.player-controls-time{position:absolute;bottom:30px;left:50%;transform:translate(-50%);color:#fff;font-size:130%;font-family:monospace;background-color:#0000;padding:.5vw;border-radius:.5vw;text-shadow:2px 2px 4px rgba(0,0,0,.5);cursor:pointer;z-index:3}.player-controls-playbtn{background:#000;position:absolute;top:15px;right:10px;background-color:transparent;border:none;color:#fff;font-size:32px;cursor:pointer;text-shadow:2px 2px 4px rgba(0,0,0,1);z-index:3}.player-controls-volbtn{position:absolute;top:15px;left:10px;background-color:transparent;border:none;color:#fff;font-size:32px;cursor:pointer;text-shadow:2px 2px 4px rgba(0,0,0,1);z-index:3}.player-controls-fbtn{background:transparent;position:absolute;top:50%;transform:translateY(-50%);right:0;width:50%;height:50%;z-index:2;border:none;cursor:pointer}.player-controls-rbtn{background:transparent;position:absolute;top:50%;transform:translateY(-50%);left:0;width:50%;height:50%;z-index:2;border:none;cursor:pointer}.player-controls-clipstime-start{position:absolute;top:10px;left:10px;z-index:3;background-color:transparent;border:none;color:#fff;font-size:8px;cursor:pointer;text-shadow:2px 2px 4px rgba(0,0,0,1)}.player-controls-clipstime-end{position:absolute;top:10px;right:10px;z-index:3;background-color:transparent;border:none;color:#fff;font-size:8px;cursor:pointer;text-shadow:2px 2px 4px rgba(0,0,0,1)}.player-controls-controls-checkbtn{position:absolute;bottom:10px;right:10px;z-index:3;background:#000000b3;border:none;color:#fff;font-size:8px;cursor:pointer;text-shadow:2px 2px 4px rgba(0,0,0,1)}.player-controls-progress-bar{position:absolute;bottom:0;background-color:#e5e7eb;height:.2rem}.player-controls-progress-bar-bg{position:absolute;background-color:transparent;bottom:0;width:100%;height:1rem}.video-poster{position:absolute;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.base-bottom-nav{display:flex;justify-content:space-between;padding:0;bottom:0;left:0;width:100%;height:50px}.base-bottom-nav button{background-color:var(--base-secondary-color);color:var(--base-main-color);border:.1px solid var(--base-main-color);cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center;font-family:monospace;font-size:12px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.base-panel-timeline{position:relative;padding-left:12px;padding-top:10px;padding-right:12px;max-width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;overscroll-behavior-y:contain;touch-action:pan-y;will-change:transform}.base-panel-timeline-ol{list-style:none;padding-left:0;margin:0;min-height:100%;position:relative}.base-panel-timeline-li{position:relative;padding-left:14px;padding-bottom:1rem}.base-panel-timeline-li:before{content:"";position:absolute;left:5px;top:0;width:2px;height:100%;background-color:#000;z-index:0;margin:0}.base-panel-timeline-li-time{color:#000;display:flex;align-items:center;padding-left:0;height:2rem;width:100%;margin:0}.base-panel-timeline-li-time h3{color:#000;margin:0}.base-panel-timeline-li-time span{font-size:.8rem;color:#777;margin-left:10px}.base-panel-timeline-li-time:before{content:"";position:absolute;left:0;width:8px;height:8px;background-color:#000;border-radius:50%;border:2px solid white;z-index:1}.minifeed{max-width:700px;margin:0}.minifeed-channel-btn{color:var(--base-main-color)}.minifeed-title{font-weight:700;margin:0;max-width:320px;white-space:pre-line;word-wrap:break-word;margin-bottom:1rem}.minifeed-summary{white-space:pre-line;word-wrap:break-word;font-size:.8rem;margin:0;max-width:320px}.minifeed-view{display:flex;width:100%;max-width:320px;aspect-ratio:16 / 9;margin-bottom:1rem}.panel-article{background-color:var(--base-main-color);padding:18px;width:100%;max-width:100%;overflow-y:scroll;flex:1;-webkit-overflow-scrolling:touch}.panel-article-text{margin-bottom:1.2rem}.panel-article-text h1,.panel-article-text h2,.panel-article-text h3,.panel-article-text h4,.panel-article-text h5,.panel-article-text h6{color:var(--base-primary-color);font-weight:600;white-space:pre-line;word-wrap:break-word;overflow-wrap:break-word}.panel-article-text p,.panel-article-text li{color:var(--base-primary-color);word-wrap:break-word;overflow-wrap:break-word;white-space:pre-line}.panel-article-text blockquote{background-color:#f5f5f5;padding:15px 20px;color:#333;border-radius:5px;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-line}.panel-article-text pre{font-family:monospace;font-size:10px;color:#333;background-color:#f5f5f5;padding:10px;border-radius:5px;white-space:pre;overflow-x:auto;max-width:100%}.panel-article-text strong{display:block;font-size:1em;margin-bottom:8px}.panel-article-text hr{border:none;height:1px;background-color:#333;margin:20px 0}.panel-article-text.highlighted{background-color:#ff03;border-left:3px solid #ffeb3b;padding-left:10px}.panel-article-video{margin-bottom:1.2rem;border-radius:8px;overflow:hidden}.panel-article-vgroup{display:grid;background:#000;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:1px;width:100%;border-radius:8px;overflow:hidden;margin-bottom:1.2rem}.panel-article-photo{width:100%;display:flex;-o-object-fit:contain;object-fit:contain;align-items:center;justify-content:center;margin-bottom:1.2rem;border-radius:8px;overflow:hidden}.panel-article-photo-img{max-width:100%}.panel-article-embed{width:100%;margin-bottom:1.2rem}.panel-article-embed iframe{width:100%;aspect-ratio:16/9;pointer-events:none}.panel-clips{width:100%;overflow-y:auto;flex:1;background-color:var(--base-main-color);box-sizing:border-box}.panel-clips-items{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);width:100%;overflow:hidden}.panel-clips-item{width:100%;height:100%;min-height:100px}.panel-clips-controls{display:flex;flex-direction:row;width:100%}.panel-clips-controls button{flex:1;background-color:#000;color:#fff;height:32px;border:1px solid rgba(255,255,255,.3);cursor:pointer;font-size:12px;line-height:18px;display:flex;align-items:center;justify-content:center}.time-slider-bar{position:relative;width:100%;height:70px;background-color:#000;border-bottom:1px solid rgba(255,255,255,.3);border-top:1px solid rgba(255,255,255,.3);overflow:hidden;touch-action:none!important;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.video-time-indicator{position:absolute;top:0;bottom:0;width:2px;background-color:#ffd700cc;z-index:10;transform:translate(-50%);pointer-events:none;box-shadow:0 0 4px #ffd70080}.time-range-frame{position:absolute;top:0;bottom:0;background-color:#ffd70033;border:1px solid rgba(255,215,0,.5);z-index:1;pointer-events:none}.range-handle{position:absolute;top:0;bottom:0;width:24px;background-color:transparent;cursor:col-resize;z-index:3;touch-action:none!important;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;will-change:transform;pointer-events:auto}.range-handle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:24px;background-color:#ffd700cc;border-radius:2px;pointer-events:none}.range-handle:hover:after,.range-handle:active:after{background-color:gold}.range-handle.left{left:-12px;border-radius:4px 0 0 4px;touch-action:pan-y pinch-zoom}.range-handle.right{right:-12px;border-radius:0 4px 4px 0;touch-action:pan-y pinch-zoom}.ticks-container{position:absolute;top:0;bottom:0;left:0;right:0;z-index:2;pointer-events:none}.tick{position:absolute;height:100%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%)}.tick-line{width:1px;height:10px;background-color:#ffffff80;margin-top:15px}.tick-label{color:#fff;font-size:12px;margin-top:4px;font-family:monospace}@media screen and (max-width: 768px){.tick-label{font-size:10px}.tick-line{height:8px;margin-top:12px}.time-slider-bar{height:50px}.range-handle{width:32px}.range-handle.left{left:-16px}.range-handle.right{right:-16px}.range-handle:after{width:6px;height:32px}.time-range-frame:before{left:8px;right:8px}}.time-slider-container{position:relative;width:100%}.time-slider-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#1a1a1a}.time-slider-button{background:#000;color:#ffffffd9;width:100%;height:34px;cursor:pointer;font-size:12px;line-height:18px;display:flex;align-items:center;justify-content:center}:root{--main-color: white;--primary-color: black;--secondary-color: black}*{margin:0;border:none;padding:0;box-sizing:border-box;font-family:Inter}html,body{overflow:hidden;margin:0;box-sizing:border-box;border:none;font-size:10px;line-height:1.5rem}.embed-tweet .react-tweet-theme{--tweet-container-margin: 0}