*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;background:#ecf0f1;color:#2c3e50;line-height:1.6}.select-container{margin:20px auto;text-align:center}.select-container select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:10px 40px 10px 15px;font-size:16px;border:none;border-radius:4px;background-color:#fff;color:#34495e;cursor:pointer;box-shadow:0 2px 5px #0003;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%228%22%20viewBox%3D%220%200%2010%208%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200l5%208%205-8z%22%20fill%3D%22%2334495e%22/%3E%3C/svg%3E);background-repeat:no-repeat;background-position:right 10px center;background-size:10px 8px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}main{padding:20px}.viewer-container{width:80%;max-width:1200px;height:70vh;margin:20px auto;box-shadow:0 4px 10px #0000004d;border-radius:8px;overflow:hidden;background:#000;position:relative}model-viewer{width:100%;height:100%;display:block}.Hotspot{display:inline-block;position:absolute;width:10px;height:10px;background-color:#e74c3c;border:2px solid #fff;border-radius:50%;cursor:pointer;transition:transform .2s ease,background-color .2s ease}.Hotspot:hover{transform:scale(1.2);background-color:#c0392b}.Hotspot.active{background-color:#27ae60;transform:scale(1.3);box-shadow:0 0 10px #27ae6080}.HotspotAnnotation{display:none}.hotspot-info-panel{position:fixed;left:20px;top:50%;transform:translateY(-50%);width:300px;max-height:80vh;background-color:#34495ef2;color:#fff;border-radius:8px;box-shadow:0 4px 12px #0000004d;z-index:1000;overflow-y:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hotspot-info-panel.fullscreen{left:30px;top:60px;transform:none;width:350px;max-height:calc(100vh - 120px);background-color:#34495efa;border:2px solid rgba(255,255,255,.2)}:fullscreen .hotspot-info-panel,:-webkit-full-screen .hotspot-info-panel,:-moz-full-screen .hotspot-info-panel{left:30px;top:60px;transform:none;width:350px;max-height:calc(100vh - 120px);background-color:#34495efa;border:2px solid rgba(255,255,255,.2);z-index:9999}model-viewer:fullscreen .hotspot-info-panel,model-viewer:-webkit-full-screen .hotspot-info-panel,model-viewer:-moz-full-screen .hotspot-info-panel{position:absolute;left:30px;top:60px;transform:none;width:350px;max-height:calc(100vh - 120px);background-color:#34495efa;border:2px solid rgba(255,255,255,.2);z-index:9999}.info-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.2);background-color:#27ae60cc;border-radius:8px 8px 0 0}.info-header h3{margin:0;font-size:16px;font-weight:700}.close-info-btn{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.close-info-btn:hover{background-color:#fff3}.info-content{padding:20px;line-height:1.6;font-size:14px}.info-content br{margin-bottom:8px}#ar-button{position:absolute;bottom:10px;right:10px;background-color:#e67e22;color:#fff;border:none;padding:10px 15px;border-radius:4px;cursor:pointer;font-size:14px;box-shadow:0 2px 5px #0003;transition:background-color .2s ease}#ar-button:hover{background-color:#d35400}.fullscreen-btn{position:absolute;top:10px;right:10px;background-color:#34495ecc;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease;z-index:100;display:flex;align-items:center;gap:6px}.fullscreen-btn:hover{background-color:#34495e}.screenshot-btn{position:absolute;top:10px;right:100px;background-color:#34495ecc;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease;z-index:100;display:flex;align-items:center;gap:6px}.screenshot-btn:hover{background-color:#34495e}.center-btn{position:absolute;top:10px;right:370px;background-color:#3498dbcc;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease;z-index:100;display:flex;align-items:center;gap:6px}.center-btn:hover{background-color:#3498db}.zoom-in-btn{position:absolute;top:10px;right:280px;background-color:#9b59b6cc;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease;z-index:100;display:flex;align-items:center;gap:6px}.zoom-in-btn:hover{background-color:#9b59b6}.zoom-out-btn{position:absolute;top:10px;right:190px;background-color:#e67e22cc;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease;z-index:100;display:flex;align-items:center;gap:6px}.zoom-out-btn:hover{background-color:#e67e22}.rotate-btn{position:absolute;top:10px;right:100px;background-color:#1abc9ccc;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease;z-index:100;display:flex;align-items:center;gap:6px}.rotate-btn:hover{background-color:#1abc9c}.rotate-btn.active{background-color:#e74c3ccc}.rotate-btn.active:hover{background-color:#e74c3c}.focus-btn{position:absolute;top:50px;right:10px;background-color:#27ae60cc;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease;z-index:100;display:flex;align-items:center;gap:6px}.focus-btn:hover{background-color:#27ae60}.focus-btn.active{background-color:#e74c3ccc}.focus-btn.active:hover{background-color:#e74c3c}.btn-label{font-size:12px;font-weight:500}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #e67e22;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(-20px)}20%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-20px)}}.error-message{position:fixed;top:20px;right:20px;background-color:#e74c3c;color:#fff;padding:15px 20px;border-radius:6px;box-shadow:0 4px 8px #0000004d;z-index:2000;max-width:300px}.error-content{display:flex;flex-direction:column;align-items:center;text-align:center}.error-content i{font-size:24px;margin-bottom:10px}.error-content button{margin-top:10px;padding:8px 16px;background-color:#fff;color:#e74c3c;border:none;border-radius:4px;cursor:pointer;font-weight:700}.error-content button:hover{background-color:#f8f9fa}.model-info{text-align:center;margin:20px 0;padding:15px;background-color:#fff;border-radius:6px;box-shadow:0 2px 5px #0000001a}.model-info h2{color:#2c3e50;margin-bottom:10px}.model-info p{color:#7f8c8d;font-style:italic}.progress-bar{position:absolute;bottom:0;left:0;width:100%;height:8px;background:#0000004d;border-radius:4px;overflow:hidden}.update-bar{height:100%;width:0%;background:linear-gradient(90deg,#e67e22,#f39c12);box-shadow:0 2px 4px #0000004d;transition:width .2s ease-out}.progress-text{position:absolute;width:100%;top:-25px;text-align:center;color:#f39c12;font-weight:700;font-size:12px}.keyboard-hints{position:absolute;bottom:10px;left:10px;background-color:#34495ecc;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;z-index:100}.keyboard-hints ul{list-style:none;margin:0;padding:0}.keyboard-hints li{margin:2px 0}@media (max-width: 768px){.viewer-container{height:60vh}.fullscreen-btn,.center-btn,.zoom-in-btn,.zoom-out-btn,.rotate-btn,.focus-btn,.screenshot-btn{top:5px;padding:6px 8px;font-size:12px}.center-btn{right:320px}.zoom-in-btn{right:230px}.zoom-out-btn{right:140px}.rotate-btn{right:50px}.focus-btn{top:40px;right:5px}.btn-label,.keyboard-hints{display:none}.hotspot-info-panel{left:10px;width:250px;max-height:70vh}}.hotspot-highlight{animation:hotspotPulse 2s ease-in-out}@keyframes hotspotPulse{0%{transform:scale(1.3);box-shadow:0 0 10px #27ae6080}50%{transform:scale(1.5);box-shadow:0 0 20px #27ae60cc}to{transform:scale(1.3);box-shadow:0 0 10px #27ae6080}}.user-guide{background:#f8f9fa;color:#333;padding:15px;margin-bottom:15px;border-radius:8px;border:1px solid #e9ecef;box-shadow:0 2px 8px #00000014;position:relative}.user-guide h3{margin:0 0 12px;font-size:1.2em;text-align:center;color:#495057;font-weight:600}.guide-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:12px}.guide-section{background:#fff;padding:12px;border-radius:6px;border:1px solid #dee2e6}.guide-section h4{margin:0 0 8px;font-size:1em;color:#007bff;font-weight:600}.guide-section ul{margin:0;padding-left:18px}.guide-section li{margin-bottom:4px;font-size:.85em;line-height:1.3;color:#6c757d}.guide-section strong{color:#495057;font-weight:600}.toggle-guide-btn{position:absolute;top:12px;right:12px;background:#007bff;color:#fff;border:none;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:.75em;transition:all .2s ease;display:flex;align-items:center;gap:4px}.toggle-guide-btn:hover{background:#0056b3;transform:translateY(-1px)}.user-guide.collapsed .guide-content{display:none}.user-guide.collapsed .toggle-guide-btn i{transform:rotate(180deg)}@media (max-width: 768px){.user-guide{padding:12px;margin-bottom:12px}.guide-content{grid-template-columns:1fr;gap:12px}.guide-section{padding:10px}.guide-section h4{font-size:.95em}.guide-section li{font-size:.8em}.toggle-guide-btn{position:static;margin-top:8px;width:100%;justify-content:center}}.container{max-width:1200px;margin:0 auto;padding:20px}