body{margin:0;box-sizing:border-box}#root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;text-align:center;height:100vh;width:100vw;margin:0;padding:0}.app-container{display:flex;flex-direction:column;height:100vh;width:100%}.main-panels{display:flex;flex:1;height:calc(100vh - 60px)}.interactive-canvas{width:100%;height:100%;position:relative;overflow:hidden}.interactive-canvas img{max-width:100%;max-height:100%;object-fit:contain}.no-image{width:100%;height:100%;background-color:#f5f5f5;background-image:linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;display:flex;align-items:center;justify-content:center;color:#999;font-size:14px;border:2px dashed #ccc;border-radius:8px}.video-landing-container{position:relative;width:100%;height:100%;min-height:400px;max-width:100%;max-height:100%;overflow:hidden;background-color:#000;aspect-ratio:16/9}.video-landing-player{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease-in-out}.video-landing-player.fade-in{opacity:1}.video-sound-toggle{position:absolute;top:40px;right:40px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;background-color:#000000b3;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:50%;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;opacity:.8;z-index:20}.video-sound-toggle:hover{opacity:1;background-color:#000c;border-color:#ffffff80;transform:scale(1.05)}@media (max-width: 1024px) and (min-width: 768px){.video-sound-toggle{top:30px;right:30px;width:44px;height:44px}}@media (max-width: 767px){.video-sound-toggle{top:20px;right:20px;width:40px;height:40px}}.video-loading-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;z-index:10;transition:opacity .8s ease-out}.video-loading-screen.fade-out{opacity:0}.video-loading-spinner{display:flex;align-items:center;justify-content:center}.video-loading-spinner.spinner .spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top:3px solid #fff;border-radius:50%;animation:spin 1s linear infinite}.video-loading-spinner.progress .progress-bar{width:200px;height:3px;background-color:#fff3;border-radius:2px;overflow:hidden;position:relative}.video-loading-spinner.progress .progress-bar:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background-color:#fff;animation:progressSlide 1.5s ease-in-out infinite}.video-loading-spinner.dots .dots{display:flex;gap:8px}.video-loading-spinner.dots .dots span{width:8px;height:8px;background-color:#fff;border-radius:50%;animation:dotBounce 1.4s ease-in-out infinite both}.video-loading-spinner.dots .dots span:nth-child(1){animation-delay:-.32s}.video-loading-spinner.dots .dots span:nth-child(2){animation-delay:-.16s}.video-loading-logo{max-width:200px;max-height:120px;width:auto;height:auto;margin-bottom:40px;animation:logoFadeIn 1s ease-in-out}@media (max-width: 1024px) and (min-width: 768px){.video-loading-logo{max-width:160px;max-height:100px}}@media (max-width: 767px){.video-loading-logo{max-width:120px;max-height:80px;margin-bottom:30px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes progressSlide{0%{left:-100%}to{left:100%}}@keyframes dotBounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes logoFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.video-error-screen{z-index:10;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000;gap:16px}.error-icon{color:#f44}.video-error-screen p{color:#fff;font-size:24px;font-weight:600;margin:0}.video-retry-button{display:flex;align-items:center;gap:8px;padding:12px 24px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;cursor:pointer;font-size:16px;transition:all .3s ease}.video-retry-button:hover{background-color:#fff3;border-color:#ffffff4d}.video-text-overlay{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;z-index:5;padding:40px;text-align:center;transition:opacity .8s ease-in-out}.video-text-overlay.fade-out{opacity:0}.video-text-overlay.top{top:0;height:40%}.video-text-overlay.center{top:0;bottom:0}.video-text-overlay.bottom{bottom:0;height:40%}.overlay-text{color:#fff;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8);line-height:1.2;max-width:800px;font-size:var(--desktop-size, 48px)}@media (max-width: 1024px) and (min-width: 768px){.overlay-text{font-size:var(--tablet-size, 36px)}.video-text-overlay{padding:30px}}@media (max-width: 767px){.overlay-text{font-size:var(--mobile-size, 24px)}.video-text-overlay{padding:20px}}.video-timed-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;padding:40px;text-align:center;pointer-events:none}.timed-overlay-text{color:#fff;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8);line-height:1.2;max-width:800px;font-size:var(--desktop-size, 24px)}.fade-in{animation:fadeIn 1s ease-in-out}@media (max-width: 1024px) and (min-width: 768px){.timed-overlay-text{font-size:var(--tablet-size, 20px)}.video-timed-overlay{padding:30px}}@media (max-width: 767px){.timed-overlay-text{font-size:var(--mobile-size, 16px)}.video-timed-overlay{padding:20px}}.video-end-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:10;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.video-poster{width:100%;height:100%;object-fit:contain;background-color:#000}.video-replay-button{position:absolute;bottom:40px;display:flex;align-items:center;gap:8px;padding:12px 20px;background-color:#000000b3;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:25px;cursor:pointer;font-size:14px;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;opacity:.8}.video-replay-button--left{left:40px}.video-replay-button--center{left:50%;transform:translate(-50%)}.video-replay-button--right{right:40px}.video-replay-button:hover{opacity:1;background-color:#000c;border-color:#ffffff80;transform:translateY(-1px)}.video-replay-button--center:hover{transform:translate(-50%) translateY(-1px)}@media (max-width: 1024px) and (min-width: 768px){.video-replay-button{bottom:30px}.video-replay-button--left{left:30px}.video-replay-button--right{right:30px}}@media (max-width: 767px){.video-replay-button{bottom:20px;padding:10px 16px;font-size:13px}.video-replay-button--left{left:20px}.video-replay-button--right{right:20px}}.zoom-trigger-container{display:inline-block;position:relative}.zoom-trigger-normal{width:100%;height:100%;object-fit:cover;cursor:pointer;border-radius:8px;box-shadow:0 4px 12px #00000026}.zoom-trigger-expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:95vw;height:95vh;object-fit:contain;cursor:pointer;border-radius:12px;box-shadow:0 20px 60px #0006;z-index:9999}.zoom-trigger-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000e6;z-index:9998;cursor:pointer}@media (max-width: 768px){.zoom-trigger-expanded{width:95vw;height:95vh}}.zoom-trigger-normal,.zoom-trigger-expanded{will-change:transform;backface-visibility:hidden}.zoom-trigger-normal:focus,.zoom-trigger-expanded:focus{outline:2px solid #007bff;outline-offset:2px}.scroll-video-container{position:relative;width:100%;background:#000}.scroll-video-player{position:sticky;top:0;width:100%;height:100vh;object-fit:cover}.scroll-video-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#999;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.scroll-video-placeholder p{margin:0;font-size:16px;opacity:.7}@media (max-width: 768px){.scroll-video-container{height:50vh;min-height:300px}.scroll-video-placeholder p{font-size:14px;padding:0 20px}}@media (max-width: 480px){.scroll-video-container{height:40vh;min-height:250px}}