:root{--primary-color: #fff;--secondary-color: rgba(255, 255, 255, .8);--bg-overlay: rgba(0, 0, 0, .7);--control-bg: rgba(0, 0, 0, .5);--accent-color: #ff6b6b}.app{width:100vw;height:100vh;position:relative;overflow:hidden;background:#000;cursor:none}.app:hover{cursor:default}.main-video{width:100%;height:100%;object-fit:cover;display:block}.header-overlay{position:absolute;top:0;left:0;right:0;background:linear-gradient(to bottom,var(--bg-overlay) 0%,transparent 100%);padding:2rem 3rem;z-index:10;color:var(--primary-color);opacity:0;transform:translateY(-20px);transition:all .3s ease;pointer-events:none}.header-overlay.visible{opacity:1;transform:translateY(0)}.header-overlay h1{margin:0;font-size:2.5rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.header-overlay p{margin:.5rem 0 0;font-size:1.2rem;opacity:.9;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.controls-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,var(--bg-overlay) 0%,transparent 100%);padding:2rem 3rem 3rem;z-index:10;opacity:0;transform:translateY(20px);transition:all .3s ease}.controls-overlay.visible{opacity:1;transform:translateY(0)}.progress-container{margin-bottom:1.5rem}.progress-bar{width:100%;height:6px;background:rgba(255,255,255,.3);border-radius:3px;cursor:pointer;margin-bottom:.5rem;position:relative;overflow:hidden}.progress-bar:hover{height:8px;margin-bottom:.4rem}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-color),#ff8e8e);border-radius:3px;transition:width .1s ease;box-shadow:0 0 10px #ff6b6b4d}.time-display{color:var(--secondary-color);font-size:.9rem;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.controls-buttons{display:flex;gap:1.5rem;align-items:center;justify-content:center}.control-button{padding:1rem 2rem;font-size:1.2rem;background:var(--control-bg);border:2px solid rgba(255,255,255,.2);color:var(--primary-color);border-radius:50px;cursor:pointer;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all .3s ease;font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,.5);min-width:120px}.control-button:hover{background:rgba(255,255,255,.2);border-color:#fff6;transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.control-button:active{transform:translateY(0)}.play-button{background:linear-gradient(135deg,var(--accent-color),#ff8e8e);border-color:var(--accent-color)}.play-button:hover{background:linear-gradient(135deg,#ff5252,var(--accent-color));box-shadow:0 8px 25px #ff6b6b66}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--primary-color);z-index:5}.spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.loading-indicator p{font-size:1.1rem;opacity:.8;text-shadow:1px 1px 2px rgba(0,0,0,.5)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.main-video:not([poster])+.loading-indicator{display:none}@media (max-width: 768px){.header-overlay{padding:1.5rem 2rem}.header-overlay h1{font-size:2rem}.header-overlay p{font-size:1rem}.controls-overlay{padding:1.5rem 2rem 2rem}.controls-buttons{gap:1rem;flex-wrap:wrap}.control-button{padding:.8rem 1.5rem;font-size:1rem;min-width:100px}}@media (max-width: 480px){.header-overlay h1{font-size:1.5rem}.control-button{padding:.7rem 1.2rem;font-size:.9rem;min-width:80px}}