.App{background-color:#000;color:#fff;display:flex;flex-direction:column;min-height:100vh}.App .default-button{box-sizing:content-box;background:#333;border:1px solid #444;border-radius:5px;cursor:pointer;color:#fff}.App a{color:#fff;opacity:.8}.App .default-button:hover{opacity:.9}.App-header{background-color:#282c34;padding:1rem;color:#fff;display:flex;justify-content:center;position:relative;z-index:10}.App-logo{font-size:1.5rem;font-weight:700}.App-icon{display:inline-block;text-align:center;background-color:#444;padding:5px;width:25px;height:25px;border-radius:50%}.App-name{margin-left:.5rem}.App-logo img{margin:5px auto}.App-information{max-width:500px;margin:30px auto 0}.App-information h2{margin-bottom:30px;font-weight:700;font-size:24px;line-height:32px}.App-information h5{margin-bottom:28px;font-weight:700;font-size:14px;line-height:20px}.App-Feature-Notes{margin:50px auto 0;text-align:left;max-width:660px}.App-Feature-Notes>div{display:inline-block;padding:0 15px;vertical-align:text-top;font-size:14px;max-width:300px}.App-Video-Actions .default-button{padding:12px;margin:15px 5px;border:3px solid #555;border-radius:7px;font-weight:700;display:inline-block}.hide{display:none}@media (max-width:720px){.App-name{margin-left:8px;font-size:20px}.App-Feature-Notes{max-width:400px}}@media (min-device-width:600px) and (max-device-width:1280px){.App-name{margin-left:8px;font-size:20px}}.App-body{width:100%;flex:1 1;position:relative}.fullscreen-container{height:calc(100vh - 64px);display:flex;justify-content:center;align-items:center;background-color:#1a1a1a}.hero-container{text-align:center;max-width:800px;padding:2rem;background-color:rgba(40,44,52,.7);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.3);animation:fadeIn .5s ease-in-out}.hero-title{font-size:2.5rem;font-weight:700;margin-bottom:1rem;color:#fff}.hero-subtitle{font-size:1.2rem;margin-bottom:2rem;color:#ccc}.hero-action{margin-top:1.5rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.app{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000}.control-button{padding:8px;transition:transform .1s ease}.video-player-page{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;overflow:hidden;z-index:999}@media (max-width:720px){.video-player-page{position:fixed;top:0;left:0;width:100vw;height:100vh;padding:0;margin:0}}.VideoSelector{max-width:500px;margin:0 auto;position:relative}.VideoDragSelector{width:80%;border:2px solid pink;margin:0 auto;position:absolute;inset:-25%}.VideoSelector button{padding:20px;font-size:20px;border-radius:5px}.VideoSelector button:hover{opacity:.9}.VideoSelector button span{vertical-align:super}.hidden{display:none}.video-tip{font-size:.8rem;color:#888;margin-top:.5rem;font-style:italic;text-align:center}.controls{position:absolute;bottom:0;left:5%;width:90%;margin:0 auto;padding:10px 0;border-radius:8px;background-color:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .3s ease,transform .3s ease;z-index:20}.controls.hide{opacity:0;pointer-events:none}.video-controls-container{position:absolute;bottom:0;left:0;width:100%;z-index:100;transition:opacity .3s ease}.progress-bar{width:100%;height:5px;background:hsla(0,0%,100%,.3);margin-bottom:10px;cursor:pointer;position:relative;border-radius:2.5px}.progress-fill{height:100%;background:red;position:absolute;top:0;left:0;width:0;border-radius:2.5px}.controls-grid{display:grid;grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto;align-items:center;grid-gap:10px;gap:10px;padding:0 5px}.control-button{background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .1s ease,opacity .2s ease}.control-button:hover{transform:scale(1.1);opacity:.9}.control-button svg{width:24px;height:24px}.control-button.playback-rate{background-color:hsla(0,0%,100%,.2);padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700}.volume{width:80px;cursor:pointer}.time{font-size:14px;font-family:monospace;min-width:100px}@media screen and (max-width:720px){.controls{bottom:0;left:0;width:100%;border-radius:0}.controls-grid{grid-template-columns:repeat(11,auto);overflow-x:auto;gap:5px;padding-bottom:5px}.control-button svg{width:20px;height:20px}.volume{width:60px}.time{font-size:12px;min-width:80px}}@media screen and (min-device-width:600px) and (max-device-width:1280px){.controls{width:90%;left:5%;bottom:0}.controls-grid{grid-template-columns:repeat(11,auto);gap:8px}}@media (max-width:720px){.VideoPlayer:-webkit-full-screen .controls{bottom:0;left:0;width:100%}.VideoPlayer:fullscreen .controls{bottom:0;left:0;width:100%}}.subtitle-tip{font-size:12px;color:#888;margin-top:8px;font-style:italic}.subtitle-button{background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .1s ease,opacity .2s ease}.subtitle-button:hover{transform:scale(1.1);opacity:.9}.subtitle-button svg{width:24px;height:24px;fill:#fff}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);z-index:1999;display:flex;justify-content:center;align-items:center}.settings-popup{position:relative;width:350px;background-color:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border-radius:8px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:2000}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;border-bottom:1px solid hsla(0,0%,100%,.2);padding-bottom:12px}.settings-title{font-size:20px;font-weight:700}.close-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;line-height:1;transition:opacity .2s;height:30px;width:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}.close-button:hover{background-color:hsla(0,0%,100%,.1);opacity:.9}.settings-content{gap:20px}.setting-item,.settings-content{display:flex;flex-direction:column}.setting-item{gap:10px}.setting-label-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.setting-label{font-size:16px;font-weight:500}.setting-value{font-weight:700;font-size:14px;background-color:hsla(0,0%,100%,.1);padding:2px 8px;border-radius:4px;min-width:50px;text-align:center}.setting-slider{width:100%;display:flex;align-items:center}.setting-slider input[type=range]{flex:1 1;height:6px;-webkit-appearance:none;background:hsla(0,0%,100%,.2);border-radius:6px;outline:none}.setting-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:red;cursor:pointer;border:2px solid hsla(0,0%,100%,.8);box-shadow:0 2px 5px rgba(0,0,0,.3)}.setting-slider input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:red;cursor:pointer;border:2px solid hsla(0,0%,100%,.8);box-shadow:0 2px 5px rgba(0,0,0,.3)}.settings-button-container{display:flex;justify-content:flex-end;margin-top:24px;gap:10px}.reset-button{background-color:hsla(0,0%,100%,.15);border:none;color:#fff;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.reset-button:hover{background-color:hsla(0,0%,100%,.25);transform:translateY(-1px)}@media (max-width:500px){.settings-popup{width:90%;max-width:320px;padding:20px}}:root{--subtitle-default-position:2%;--subtitle-hover-position:7%;--subtitle-fullscreen-position:2%;--subtitle-fullscreen-hover-position:7%;--subtitle-text-color:#fff;--subtitle-text-shadow:1px 1px 2px rgba(0,0,0,.7);--subtitle-font-size:2.2em;--subtitle-cue-font-size:1.5em}.VideoPlayer{position:fixed;top:0;left:0;width:100%;height:100vh;overflow:hidden;background-color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50}.VideoPlayer video{width:100%;height:100%;object-fit:contain;max-height:100vh;max-width:100%}.VideoPlayer video:focus{outline:none}@media screen and (max-width:768px){.VideoPlayer{height:100vh;width:100vw}}.VideoPlayer:-webkit-full-screen{width:100vw;height:100vh}.VideoPlayer:fullscreen{width:100vw;height:100vh}.VideoPlayer:-webkit-full-screen video{width:100%;height:100%;object-fit:contain}.VideoPlayer:fullscreen video{width:100%;height:100%;object-fit:contain}@media (max-width:720px){.VideoPlayer{position:fixed;top:0;left:0;margin:0;padding:0;height:100vh;width:100vw;z-index:1000}.VideoPlayer video{width:100%;height:100%;object-fit:contain}}@media (min-device-width:600px) and (max-device-width:1280px){.VideoPlayer{position:fixed;top:0;left:0;margin:0;padding:0;height:100vh;width:100vw;z-index:1000}.VideoPlayer video{width:100%;height:100%;object-fit:contain}}.subtitles-container{position:absolute;bottom:var(--subtitle-default-position);left:0;right:0;text-align:center;z-index:10;pointer-events:none;transition:bottom .3s ease}.VideoPlayer:hover .subtitles-container{bottom:var(--subtitle-hover-position)}.VideoPlayer .video-controls-container .controls:not(.hide)~.subtitles-container,.VideoPlayer:has(.controls:not(.hide)) .subtitles-container{bottom:var(--subtitle-hover-position)}.VideoPlayer:-webkit-full-screen .subtitles-container{bottom:var(--subtitle-fullscreen-position)}.VideoPlayer:fullscreen .subtitles-container{bottom:var(--subtitle-fullscreen-position)}.VideoPlayer:-webkit-full-screen .controls:not(.hide)~.subtitles-container,.VideoPlayer:-webkit-full-screen:hover .subtitles-container{bottom:var(--subtitle-fullscreen-hover-position)}.VideoPlayer:fullscreen .controls:not(.hide)~.subtitles-container,.VideoPlayer:fullscreen:hover .subtitles-container{bottom:var(--subtitle-fullscreen-hover-position)}.subtitle-text{color:var(--subtitle-text-color);font-size:var(--subtitle-font-size);text-align:center;background-color:transparent;text-shadow:var(--subtitle-text-shadow);padding:.5em 1em;margin:0 auto;max-width:80%;display:inline-block}video::-webkit-media-text-track-display{display:none!important}video::cue{opacity:0}::cue{color:var(--subtitle-text-color);font-size:var(--subtitle-cue-font-size);text-align:center;background-color:transparent;text-shadow:var(--subtitle-text-shadow);position:relative;bottom:var(--subtitle-default-position)}.VideoPlayer video::cue{color:var(--subtitle-text-color);position:relative;bottom:var(--subtitle-default-position);font-size:var(--subtitle-cue-font-size);text-shadow:var(--subtitle-text-shadow)}.VideoPlayer video::cue-region{position:relative;bottom:var(--subtitle-default-position)}@-moz-document url-prefix(){.VideoPlayer video::cue{background-color:transparent!important;color:var(--subtitle-text-color)!important;text-shadow:var(--subtitle-text-shadow)!important;font-size:var(--subtitle-cue-font-size)!important}}.drag-drop-container{width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:5}.drag-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.85);display:flex;justify-content:center;align-items:center;z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.drag-message{padding:2.5rem 4.5rem;border-radius:12px;font-size:1.8rem;border:3px dashed #fff;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.5);animation:pulse 2s infinite}.drag-message,.drop-message{background-color:#333;color:#fff}.drop-message{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);padding:.75rem 1.5rem;border-radius:8px;z-index:1000;animation:fadeInOut 3s ease-in-out;font-size:1rem;box-shadow:0 4px 12px rgba(0,0,0,.3)}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,20px)}10%{opacity:1;transform:translate(-50%)}90%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}