.vrframe{display:flex;flex-direction:column;height:110vh;width:100%;text-align:center;padding-top:80px;background:#0f172a url(/dist/images/bg_vr.png) top center;}
.vrframe .subtit{color:#374151;font-size:18px;}
.vrframe .title{color:#fff;font-size:44px;font-family:var(--font-bold);}
.viewer-container{flex:1;position:relative;overflow:hidden;width:100%;}
#panorama-container{width:100%;height:100%;}
.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100;transition:opacity 0.5s}
.spinner{width:60px;height:60px;border:5px solid rgba(255,255,255,0.1);border-top:5px solid #00b4db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}
@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
.controls-panel{position:absolute;bottom:20px;left:20px;background:rgba(0,0,0,0.7);border-radius:10px;padding:15px;width:300px;z-index:10;backdrop-filter:blur(5px)}
.controls-title{font-size:1.2rem;margin-bottom:15px;color:#00b4db;display:flex;align-items:center}
.controls-title i{margin-right:8px}
.control-item{display:flex;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.1)}
.control-key{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);border-radius:4px;padding:4px 8px;min-width:30px;font-family:monospace}
.panorama-selector{margin-top:35px;margin-bottom:65px;}
.panorama-buttons{display:flex;flex-wrap:wrap;justify-content:center;}
.panorama-btn{position:relative;padding:6px 30px 6px 30px;transition:all 0.3s;font-size:18px;line-height:30px;z-index:1;border:1px solid #303747;background-color:#1b2234;overflow:hidden;border-radius:50px;color:#fff;display:flex;align-items:center;width:fit-content;text-transform:uppercase;min-width:116px;justify-content:center;cursor:pointer;}
.panorama-btn:not(:last-child){margin-right:15px;}
.panorama-btn:before{content:"";position:absolute;top:0;left:0;bottom:0;width:0;background-color:#c3cc03;transition:all 0.3s;z-index:-1;}
.panorama-btn:hover:before{width:100%;}
.panorama-btn.active{background:#c3cc03;}
.github-link{color:#00b4db;text-decoration:none;margin-left:5px}
.github-link:hover{text-decoration:underline}
@media (min-width:1080px) and (max-width:1529px){
    .vrframe{padding-top:60px;}
}
@media (min-width:1px) and (max-width:1079px){
    .controls-panel,.hint{position:relative;bottom:auto;left:auto;right:auto;width:90%;margin:10px auto}
    .vrframe{overflow-y:auto;padding-top:30px;height:600px;}
    .vrframe .title{font-size:30px;}
    .viewer-container{}
    .panorama-btn{padding:4px 15px;margin:0 5px 5px;font-size:14px;}
    .panorama-btn:not(:last-child){margin-right:5px;}
    .panorama-selector{margin-top:20px;margin-bottom:30px;}
}