* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #000;font-family: Arial, sans-serif;overflow: hidden;}.video-container {position: relative;width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.video-wrapper {position: relative;width: 100%;height: 100%;max-width: 1920px;max-height: 1080px;overflow: hidden;}.video-player {width: 100%;height: 100%;object-fit: contain;pointer-events: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.video-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;}.controls-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));padding: 20px;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;z-index: 2;}.controls-overlay.active {opacity: 1;visibility: visible;}.progress-bar-container {position: relative;width: 100%;padding: 10px 0;cursor: pointer;}.progress-bar {width: 100%;height: 4px;background: rgba(255, 255, 255, 0.2);border-radius: 2px;position: relative;transition: height 0.2s ease;}.progress-bar-container:hover .progress-bar {height: 15px;}.progress {height: 100%;background: #e50914;border-radius: 2px;width: 0%;}.controls {display: flex;justify-content: space-between;align-items: center;color: white;}.left-controls, .right-controls {display: flex;align-items: center;gap: 15px;}button {background: none;border: none;color: white;cursor: pointer;font-size: 20px;padding: 5px;display: flex;}.time {font-size: 14px;}button:hover {transform: scale(1.1);}.volume-control {position: relative;display: flex;align-items: center;gap: 10px;}.volume-slider-container {width: 0;overflow: hidden;transition: width 0.3s ease;}.volume-control:hover .volume-slider-container {width: 100px;}.volume-slider {width: 100px;height: 4px;border-radius: 2px;background: rgba(238, 8, 8, 0.2);outline: none;opacity: 0.7;transition: opacity 0.2s;}.volume-slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 12px;height: 12px;border-radius: 50%;background: #fff;cursor: pointer;}.volume-slider::-moz-range-thumb {width: 12px;height: 12px;border-radius: 50%;background: #fff;cursor: pointer;border: none;}.rewind, .forward {font-size: 16px;padding: 5px 10px;opacity: 0.8;transition: opacity 0.2s;}.rewind:hover, .forward:hover {opacity: 1;}video::-webkit-media-controls {display: none !important;}video::-webkit-media-controls-enclosure {display: none !important;}video::-webkit-media-controls-panel {display: none !important;}.shortcuts-modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);display: flex;justify-content: center;align-items: center;z-index: 1000;opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;}.shortcuts-modal.show {opacity: 1;visibility: visible;}.modal-content {background-color: #141414;border-radius: 8px;padding: 30px;max-width: 600px;width: 90%;color: white;box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);}.modal-content h2 {text-align: center;margin-bottom: 25px;font-size: 24px;color: #e50914;}.shortcuts-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 15px;margin-bottom: 25px;}.shortcut-item {display: flex;align-items: center;gap: 15px;padding: 10px;background-color: rgba(255, 255, 255, 0.1);border-radius: 4px;}.key {background-color: #333;padding: 5px 10px;border-radius: 4px;font-family: monospace;font-size: 14px;min-width: 30px;text-align: center;}.description {font-size: 14px;}.modal-close {display: block;width: 100%;padding: 12px;background-color: #e50914;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;transition: 0.5s ease;}.modal-close:hover {background-color: #f40612;transform: scale(0.98);}.show-shortcuts {font-size: 18px;opacity: 0.8;transition: opacity 0.3s;display: block;}.show-shortcuts:hover {opacity: 1;}.volume {display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;padding: 0;}.volume img {width: 20px;height: 20px;object-fit: contain;transition: opacity 0.3s ease;}.hidden {display: none;}.error-message {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.8);color: white;padding: 20px;border-radius: 5px;text-align: center;z-index: 1000;max-width: 80%;font-size: 16px;}@media (max-width: 768px) {.show-shortcuts {display: none;}.controls {padding: 10px;}.left-controls, .right-controls {gap: 8px;}.time {font-size: 12px;}button {padding: 4px;}button img {width: 18px;height: 18px;}.volume-slider {width: 60px;}.progress-bar {height: 3px;}button {min-width: 40px;min-height: 40px;display: flex;align-items: center;justify-content: center;}.volume-control:hover .volume-slider-container {width: 60px;}}.frame-preview {position: absolute;bottom: 40px;background-color: rgba(0, 0, 0, 0.9);border-radius: 4px;padding: 2px;display: none;transform: translateX(-50%);z-index: 3;}.preview-video {width: 160px;height: 90px;border-radius: 2px;object-fit: cover;}.preview-time {position: absolute;bottom: -20px;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.8);color: white;padding: 2px 4px;border-radius: 2px;font-size: 12px;white-space: nowrap;}.speed-control {position: relative;display: flex;align-items: center;}.speed-btn {background: none;border: none;color: white;cursor: pointer;font-size: 14px;padding: 5px 10px;border-radius: 4px;transition: background-color 0.3s;}.speed-btn:hover {background-color: rgba(255, 255, 255, 0.1);}.speed-options {position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.8);border-radius: 4px;padding: 5px;margin-bottom: 5px;display: flex;flex-direction: column;gap: 2px;}.speed-options.hidden {display: none;}.speed-option {background: none;border: none;color: white;cursor: pointer;font-size: 14px;padding: 5px 10px;border-radius: 2px;transition: background-color 0.3s;}.speed-option:hover {background-color: rgba(255, 255, 255, 0.1);}.speed-option.active {background-color: #e50914;color: white;}@media (max-width: 768px) {.speed-btn {font-size: 12px;padding: 4px 8px;}.speed-option {font-size: 12px;padding: 4px 8px;}}