.control-item-skeleton{height:50px;width:50px;border-radius:50%;background:linear-gradient(135deg,#e0e0e0 25%,#f0f0f0,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.2s infinite linear}.global-controller{width:100%;height:-moz-fit-content;height:fit-content;padding-block:15px;display:flex;flex-direction:row;justify-content:center;-moz-column-gap:5px;column-gap:5px}.global-controller .control-item{width:50px;height:50px;border-radius:50%;background-color:var(--background-color);display:flex;justify-content:center;align-items:center}.global-controller .control-item:hover{background-color:var(--background-color-hover)}.global-controller .control-item:active{background-color:var(--background-color-active)}.global-controller .control-item[data-type=play][data-state=playing] svg{width:50px;height:50px}.global-controller .control-item[data-type=play][data-state=paused] svg{width:50px;height:50px;transform:translate(2px)}.global-controller .control-item[data-type=mute] svg{width:45px;height:45px}dialog::backdrop{background-color:#0006}dialog .modal-container{position:fixed;width:420px;height:-moz-fit-content;height:fit-content;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:15px;box-shadow:10px 10px 20px #00000054,-10px -10px 20px #46464642;background-image:linear-gradient(to bottom right,#f5f5f5,#f1f1f1)}dialog .modal-container .modal-header{display:flex;justify-content:right;padding:.7rem}dialog .modal-container .modal-header .modal-close-button{position:relative;width:45px;height:45px;display:flex;align-items:center;justify-content:center;right:0;color:var(--text-color);border-radius:50%;transition:background-color .3s ease;background-color:var(--background-color)}dialog .modal-container .modal-header .modal-close-button:hover{background-color:var(--background-color-hover)}dialog .modal-container .modal-header .modal-close-button:active{background-color:var(--background-color-active)}dialog .modal-container .modal-header .modal-close-button svg{width:35px;height:35px}dialog .modal-container .modal-content{padding-inline:2rem;padding-block-end:1.7rem}.add-video-modal{display:flex;flex-direction:column;row-gap:32px;font-family:Inter,Noto Sans JP,sans-serif;color:#1e1f1e}.add-video-modal .modal-main{display:flex;flex-direction:column;row-gap:8px}.add-video-modal .modal-main .tab-container{position:relative;width:100%;height:40px;display:flex;flex-direction:row;border-bottom:#D6D6D6 1px solid}.add-video-modal .modal-main .tab-container .tab{flex:1;display:flex;justify-content:center;align-items:center;font-size:1em;transition:background-color .2s ease}.add-video-modal .modal-main .tab-container .tab:hover{background-color:var(--background-color-hover)}.add-video-modal .modal-main .tab-container .tab:active{background-color:var(--background-color-active)}.add-video-modal .modal-main .tab-container .tab-indicator{position:absolute;bottom:-1px;height:4px;background-image:linear-gradient(to right,#faf623,#f36bca);transition:left .2s ease,width .2s ease}.add-video-modal .modal-main .search-bar-container{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:-moz-fit-content;height:fit-content;padding-inline:8px}.add-video-modal .modal-main .search-bar-container input.search-bar{width:100%;height:36px;padding-inline:12px;border-radius:4px;outline:none;background-color:#d9d9d9;font-size:.875em;color:#757575}.add-video-modal .modal-main .search-bar-container input.search-bar::-moz-placeholder{color:#757575}.add-video-modal .modal-main .search-bar-container input.search-bar::placeholder{color:#757575}.add-video-modal .modal-main .search-bar-container .clear-button,.add-video-modal .modal-main .search-bar-container>svg{position:absolute;width:24px;height:24px;right:16px}.add-video-modal .modal-main .search-bar-container .clear-button svg,.add-video-modal .modal-main .search-bar-container>svg svg{width:100%;height:100%}.add-video-modal .modal-main .search-result-container{display:flex;flex-direction:column;height:171px;overflow-y:auto}.add-video-modal .modal-main .search-result-container .search-result-item{position:relative;width:100%;padding:8px;background-color:var(--background-color);display:flex;flex-direction:row;align-items:center;-moz-column-gap:8px;column-gap:8px;transition:scale .2s ease,background-color .2s ease}.add-video-modal .modal-main .search-result-container .search-result-item:hover{background-color:var(--background-color-hover)}.add-video-modal .modal-main .search-result-container .search-result-item:active{scale:.98}.add-video-modal .modal-main .search-result-container .search-result-item.selected{background-image:linear-gradient(to right bottom,#faf623,#f36bca)}.add-video-modal .modal-main .search-result-container .search-result-item .thumbnail{width:80px;height:44px;background-color:#d9d9d9}.add-video-modal .modal-main .search-result-container .search-result-item .video-info{width:100%;min-width:0;padding:4px;display:flex;flex-direction:column;row-gap:4px;align-items:flex-start}.add-video-modal .modal-main .search-result-container .search-result-item .video-info .title{max-width:100%;font-size:.75em;color:#1e1f1e;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.add-video-modal .modal-main .search-result-container .search-result-item .video-info .channel{max-width:100%;font-size:.75em;color:#5a5a5a;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.add-video-modal .modal-main .search-result-container .search-result-item .channel-icon-container{width:80px;height:-moz-fit-content;height:fit-content;display:flex;justify-content:center}.add-video-modal .modal-main .search-result-container .search-result-item .channel-icon-container .channel-icon{width:64px;height:64px;border-radius:50%}.add-video-modal .modal-main .search-result-container .search-result-item .channel-info{flex:1;min-width:0;display:flex;flex-direction:column;row-gap:4px;align-items:flex-start}.add-video-modal .modal-main .search-result-container .search-result-item .channel-info .channel-name{max-width:100%;font-size:.75em;color:#1e1f1e;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.add-video-modal .modal-main .search-result-container .search-result-item.exact-match{border-bottom:#D9D9D9 1px solid}.add-video-modal .modal-bottom{display:flex;flex-direction:row-reverse;-moz-column-gap:1rem;column-gap:1rem}.add-video-modal .modal-bottom button{width:6rem;height:2.5rem;border-radius:3rem;background-image:linear-gradient(to bottom right,#f5f5f5,#f1f1f1);box-shadow:3px 3px 4px #0000004d,-3px -3px 4px #ffffffb8;transition:all .2s ease}.add-video-modal .modal-bottom button.modal-confirm-button{background-image:linear-gradient(to bottom right,#faf623,#f36bca);background-size:200% 200%;color:var(--background-color);animation-name:gradation;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out;animation-duration:2s;animation-play-state:paused;animation-delay:-1s}.add-video-modal .modal-bottom button.modal-confirm-button:disabled{background-image:linear-gradient(to bottom right,#faf87d,#f2aadc)}.add-video-modal .modal-bottom button:hover:not(:disabled){scale:1.05;box-shadow:1px 1px 8px #00000040,-1px -1px 8px #ffffffb8;animation-play-state:running}.add-video-button-container{width:100%;height:-moz-fit-content;height:fit-content;display:flex;justify-content:center}.add-video-button-container .add-video-button{width:80px;height:50px;border-radius:99px;background:var(--background-gradient);box-shadow:5px 5px 7px #00000040,-5px -5px 7px #fff9;justify-content:center;font-size:50px;display:flex;align-items:center;transition:all .3s ease}.add-video-button-container .add-video-button:before{width:30px;height:30px;background:linear-gradient(to bottom right,#faf623,#f36bca);background-size:200% 200%;clip-path:url(#plus_clip_icon);content:"";animation-name:gradation;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out;animation-duration:2s;animation-play-state:paused}.add-video-button-container .add-video-button:hover{scale:1.1;box-shadow:3px 3px 10px #00000040,-3px -3px 10px #fff9}.add-video-button-container .add-video-button:hover:before{animation-play-state:running}.video-controller{width:100%;height:-moz-fit-content;height:fit-content;box-sizing:border-box;padding-block:17px;padding-inline:20px;border-radius:10px;display:flex;flex-direction:column;row-gap:10px;box-shadow:3px 3px 4px #0000004d,-3px -3px 4px #ffffffb8;transition:all .2s ease;background-image:linear-gradient(to bottom right var(--background-color),#F1F1F1);overflow:hidden;animation:pop-in .3s cubic-bezier(.34,1.56,.64,1) forwards}.video-controller[data-platform=youtube]{--platform-color: rgba(255, 0, 0, .15)}.video-controller[data-platform=twitch]{--platform-color: rgba(100, 65, 165, .15)}.video-controller:before{content:"";position:absolute;top:-93.55px;left:-56.55px;width:150px;height:150px;background-color:var(--platform-color);z-index:-1;rotate:-35deg}.video-controller .labels{width:100%;height:50px;padding-inline:5px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;row-gap:5px}.video-controller .labels .video-title{width:100%;height:25px;font-size:1.125rem;color:#323332;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.video-controller .labels .channel-name{width:100%;height:20px;font-size:.875rem;color:#5a5a5a;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.video-controller .labels .video-title-skeleton{width:100%;height:25px;background:linear-gradient(135deg,#e0e0e0 25%,#f0f0f0,#e0e0e0 75%);background-size:200% 100%;border-radius:10px;animation:shimmer 1.2s infinite linear}.video-controller .labels .channel-name-skeleton{width:100%;height:20px;background:linear-gradient(135deg,#e0e0e0 25%,#f0f0f0,#e0e0e0 75%);background-size:200% 100%;border-radius:10px;animation:shimmer 1.2s infinite linear}.video-controller .controls{display:flex;flex-direction:row;justify-content:center;-moz-column-gap:5px;column-gap:5px}.video-controller .controls .control-item{width:50px;height:50px;border-radius:50%;background-color:var(--widget-color-primary);display:flex;justify-content:center;align-items:center}.video-controller .controls .control-item:hover{background-color:var(--background-color-hover)}.video-controller .controls .control-item:active{background-color:var(--background-color-active)}.video-controller .controls .control-item[data-type=play][data-state=playing] svg{width:50px;height:50px}.video-controller .controls .control-item[data-type=play][data-state=paused] svg{width:50px;height:50px;transform:translate(2px)}.video-controller .controls .control-item[data-type=mute] svg{width:45px;height:45px}.video-controller .controls .control-item[data-type=remove]{margin-inline-start:auto}.video-controller .controls .volume-control-container{cursor:pointer;display:flex;flex-direction:row;-moz-column-gap:5px;column-gap:5px;align-items:center}.video-controller .controls .volume-control-container .volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;opacity:0;transition:all .1s ease;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--icon-color-primary) calc(var(--ratio) * 100%),#dddddd calc(var(--ratio) * 100%));box-shadow:inset 2px 2px 4px #00000040,inset -2px -2px 4px #ffffff26;cursor:pointer}.video-controller .controls .volume-control-container .volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--icon-color-primary);box-shadow:2px 2px 4px #00000040,-2px -2px 4px #ffffff26}.video-controller .controls .volume-control-container:hover .volume-slider{width:100px;opacity:1}.video-controller:hover{scale:1.025;box-shadow:1px 1px 8px #00000040,-1px -1px 8px #ffffffb8}.video-controller.disappearing{animation:pop-out .3s ease-in-out forwards;pointer-events:none}@keyframes pop-in{0%{transform:scale(0);opacity:0}60%{transform:scale(1.04);opacity:1}80%{transform:scale(.97)}to{transform:scale(1)}}@keyframes pop-out{0%{transform:scale(1)}50%{transform:scale(1.05);opacity:1}to{transform:scale(0);opacity:0}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.video-controllers-container{width:100%;height:-moz-fit-content;height:fit-content;padding-block:20px;padding-inline:30px;display:flex;flex-direction:column;align-items:center;row-gap:25px}.layout-selector-container{position:relative;width:100%;padding:45px 0}.layout-selector-container .layout-selector{width:100%;height:-moz-fit-content;height:fit-content;display:flex;justify-content:center;align-items:center;-moz-column-gap:20px;column-gap:20px}.layout-selector-container .layout-selector .layout-select-button{width:100px;height:100px;border-radius:15px;box-shadow:#00000040 5px 5px 7px,#fffc -5px -5px 7px;background:var(--background-gradient);display:flex;justify-content:center;align-items:center;transition:all .05s linear}.layout-selector-container .layout-selector .layout-select-button:before{display:none}.layout-selector-container .layout-selector .layout-select-button:hover{scale:1.05}.layout-selector-container .layout-selector .layout-select-button svg{width:90px;height:90px}.layout-selector-container .layout-selector .layout-select-button:active,.layout-selector-container .layout-selector .layout-select-button.selected{box-shadow:inset #00000040 5px 5px 7px,inset #fffc -5px -5px 7px;transform:translate(2px) translateY(2px);scale:1}.layout-selector-container .layout-selector .layout-select-button:active svg,.layout-selector-container .layout-selector .layout-select-button.selected svg{display:none}.layout-selector-container .layout-selector .layout-select-button:active:before,.layout-selector-container .layout-selector .layout-select-button.selected:before{display:block;content:"";width:90px;height:90px;background-image:linear-gradient(to bottom right,#f36bca,#faf623);background-size:200% 200%;animation-name:gradation;animation-duration:5s;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out}.layout-selector-container .layout-selector .layout-select-button:active[data-value="1A"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="1A"]:before{clip-path:url(/icons/layout-option-1A.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="2A"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="2A"]:before{clip-path:url(/icons/layout-option-2A.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="2B"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="2B"]:before{clip-path:url(/icons/layout-option-2B.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="2C"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="2C"]:before{clip-path:url(/icons/layout-option-2C.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="3A"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="3A"]:before{clip-path:url(/icons/layout-option-3A.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="3B"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="3B"]:before{clip-path:url(/icons/layout-option-3B.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="3C"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="3C"]:before{clip-path:url(/icons/layout-option-3C.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="4A"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="4A"]:before{clip-path:url(/icons/layout-option-4A.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="4B"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="4B"]:before{clip-path:url(/icons/layout-option-4B.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="4C"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="4C"]:before{clip-path:url(/icons/layout-option-4C.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active[data-value="5A"]:before,.layout-selector-container .layout-selector .layout-select-button:active[data-value="6A"]:before,.layout-selector-container .layout-selector .layout-select-button:active[data-value="7A"]:before,.layout-selector-container .layout-selector .layout-select-button:active[data-value="8A"]:before,.layout-selector-container .layout-selector .layout-select-button:active[data-value="9A"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="5A"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="6A"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="7A"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="8A"]:before,.layout-selector-container .layout-selector .layout-select-button.selected[data-value="9A"]:before{clip-path:url(/icons/layout-option-above-5.svg#clip-path)}.layout-selector-container .layout-selector .layout-select-button:active{transform:translate(3px) translateY(3px)}@keyframes gradation{0%{background-position:0% 0%}to{background-position:100% 100%}}:root{--background-color: #F5F5F5;--background-color-hover: #D6D6D6;--background-color-active: #B7B7B7;--icon-color-primary: #5A5A5A;font-family:Inter,Noto Sans JP;font-weight:400}:root{--sidebar-width: 500px;--drawer-width: 50px}.sidebar_container{position:fixed;box-sizing:border-box;width:var(--sidebar-width);height:100%;transform:translate(0);transition:all .3s ease-in-out;display:flex;align-items:center;filter:drop-shadow(5px 5px 4px #0000004D) drop-shadow(-5px -5px 4px #FFFFFFB8);pointer-events:none}.sidebar_container.close{transform:translate(calc(var(--drawer-width) - var(--sidebar-width)))}.sidebar_element{background-color:var(--background-color);pointer-events:auto}.menubar{height:100%;flex-grow:1;overflow-y:auto}.menubar .menubar-container{height:-moz-fit-content;height:fit-content;padding-block:20px;display:flex;flex-direction:column;align-items:center;row-gap:30px}.menubar .menubar-container .separator{border:none;box-sizing:border-box;width:calc(100% - 100px);height:3px;border-radius:99px;background-color:#d9d9d9;box-shadow:inset 2px 2px 4px #00000040,inset -2px -2px 4px #ffffff40}.drawer{width:var(--drawer-width);height:100px;display:flex;align-items:center;justify-content:center;border-radius:0 15px 15px 0;box-shadow:inset 2px 0 4px #00000027}.drawer_button{width:45px;height:45px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease-out}.drawer_button:hover{background-color:var(--background-color-hover)}.drawer_button:active{background-color:var(--background-color-active)}#start-screen{top:0;left:0;width:100vw;height:100vh;background-color:var(--background-color);display:flex;justify-content:center;align-items:center}.videos-container{width:100vw;height:100vh;display:grid;align-items:center;justify-items:center}.videos-container[data-layout="1A"]{grid-template-rows:100%;grid-template-columns:100%}.videos-container[data-layout="2A"]{grid-template-rows:repeat(2,50%);grid-template-columns:100%}.videos-container[data-layout="2B"]{grid-template-rows:100%;grid-template-columns:repeat(2,50%)}.videos-container[data-layout="2C"]{grid-template-rows:100%;grid-template-columns:70% 30%}.videos-container[data-layout="3A"]{grid-template-rows:repeat(2,50%);grid-template-columns:repeat(2,50%)}.videos-container[data-layout="3A"] .video-container:nth-child(1){grid-column:1 / 2;grid-row:1 / 2}.videos-container[data-layout="3A"] .video-container:nth-child(2){grid-column:1 / 2;grid-row:2 / 3}.videos-container[data-layout="3A"] .video-container:nth-child(3){grid-column:2 / 3;grid-row:1 / 3}.videos-container[data-layout="3B"]{grid-template-rows:repeat(2,50%);grid-template-columns:repeat(2,50%)}.videos-container[data-layout="3B"] .video-container:nth-child(1){grid-column:1 / 2;grid-row:1 / 2}.videos-container[data-layout="3B"] .video-container:nth-child(2){grid-column:2 / 3;grid-row:1 / 2}.videos-container[data-layout="3B"] .video-container:nth-child(3){grid-column:1 / 3;grid-row:2 / 3}.videos-container[data-layout="3C"]{grid-template-rows:repeat(3,calc(100% / 3));grid-template-columns:70% 30%}.videos-container[data-layout="3C"] .video-container:nth-child(1){grid-column:1 / 2;grid-row:1 / 4}.videos-container[data-layout="3C"] .video-container:nth-child(2){grid-column:2 / 3;grid-row:2 / 3}.videos-container[data-layout="3C"] .video-container:nth-child(3){grid-column:2 / 3;grid-row:3 / 4}.videos-container[data-layout="4A"]{grid-template-rows:repeat(2,50%);grid-template-columns:repeat(2,50%)}.videos-container[data-layout="4A"] .video-container:nth-child(1){grid-column:1 / 2;grid-row:1 / 2}.videos-container[data-layout="4A"] .video-container:nth-child(2){grid-column:1 / 2;grid-row:2 / 3}.videos-container[data-layout="4A"] .video-container:nth-child(3){grid-column:2 / 3;grid-row:1 / 2}.videos-container[data-layout="4A"] .video-container:nth-child(4){grid-column:2 / 3;grid-row:2 / 3}.videos-container[data-layout="4B"]{grid-template-rows:repeat(3,calc(100% / 3))}.videos-container[data-layout="4B"] .video-container:nth-child(1){grid-column:1 / 4;grid-row:1 / 3}.videos-container[data-layout="4B"] .video-container:nth-child(2){grid-column:1 / 2;grid-row:3 / 4}.videos-container[data-layout="4B"] .video-container:nth-child(3){grid-column:2 / 3;grid-row:3 / 4}.videos-container[data-layout="4B"] .video-container:nth-child(4){grid-column:3 / 4;grid-row:3 / 4}.videos-container[data-layout="4C"]{grid-template-rows:repeat(3,calc(100% / 3))}.videos-container[data-layout="4C"] .video-container:nth-child(1){grid-column:1 / 3;grid-row:1 / 4}.videos-container[data-layout="4C"] .video-container:nth-child(2){grid-column:3 / 4;grid-row:1 / 2}.videos-container[data-layout="4C"] .video-container:nth-child(3){grid-column:3 / 4;grid-row:2 / 3}.videos-container[data-layout="4C"] .video-container:nth-child(4){grid-column:3 / 4;grid-row:3 / 4}.videos-container[data-layout="5A"],.videos-container[data-layout="6A"],.videos-container[data-layout="7A"],.videos-container[data-layout="8A"],.videos-container[data-layout="9A"]{grid-template-rows:repeat(3,calc(100% / 3));grid-template-columns:repeat(3,calc(100% / 3))}.videos-container .video-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}