:root{--stage-bg: #0d0d11;--hud-accent: #3FA7E8;--hud-glass: rgba(10, 10, 15, .75);--hud-border: rgba(255, 255, 255, .08);--hud-accent-glow: rgba(63, 167, 232, .2)}.camera-exp{position:relative;background:var(--stage-bg);color:#eee;min-height:800vh;font-family:Switzer,system-ui,sans-serif;overflow-x:hidden}.camera-exp__stage{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:5;background:radial-gradient(circle at 50% 50%,#1a1a22 0%,var(--stage-bg) 85%);overflow:hidden}.camera-exp__canvas{width:100%;height:100%;display:block;outline:none;touch-action:pan-y}.camera-exp__hud{position:absolute;bottom:30px;left:30px;width:380px;z-index:10;pointer-events:auto}@media(max-width:768px){.camera-exp__hud{bottom:90px;left:15px;right:15px;width:calc(100% - 30px)}}.hud-card{background:var(--hud-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--hud-border);border-radius:16px;padding:24px;box-shadow:0 20px 40px #00000080,0 0 1px #ffffff1a inset;transition:border-color .4s ease,box-shadow .4s ease}.hud-card:hover{border-color:#3fa7e84d;box-shadow:0 20px 40px #0009,0 0 15px var(--hud-accent-glow)}.hud-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.hud-phase{background:#3fa7e826;color:var(--hud-accent);font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:100px}.hud-percent{font-size:.75rem;color:#888;font-weight:600}.hud-progress-container{width:100%;height:3px;background:#ffffff14;border-radius:2px;margin-bottom:16px;overflow:hidden}.hud-progress-bar{width:0%;height:100%;background:var(--hud-accent);box-shadow:0 0 8px var(--hud-accent);transition:width .1s linear}.hud-title{font-size:1.35rem;font-weight:800;margin-bottom:8px;color:#fff;letter-spacing:-.01em}.hud-desc{font-size:.88rem;line-height:1.5;color:#b0b3bd;margin-bottom:18px;min-height:54px}.hud-specs{display:flex;gap:20px;border-top:1px solid rgba(255,255,255,.06);padding-top:14px}.hud-spec-item{display:flex;flex-direction:column;gap:2px}.spec-lbl{font-size:.65rem;color:#666;text-transform:uppercase;letter-spacing:.5px}.spec-val{font-size:.8rem;color:#eee;font-weight:600}.camera-exp__hotspots{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:8}.hotspot-dot{position:absolute;pointer-events:auto;cursor:pointer;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(-50%,-50%) scale(0);transition:opacity .4s ease,transform .4s ease}.hotspot-dot.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.hotspot-dot__ring{position:absolute;width:24px;height:24px;border:1.5px solid var(--hud-accent);border-radius:50%;animation:hotspot-pulse 2s infinite ease-out}.hotspot-dot__inner{width:8px;height:8px;background:#fff;border:1.5px solid var(--hud-accent);border-radius:50%;box-shadow:0 0 6px var(--hud-accent);transition:transform .2s ease,background-color .2s ease}.hotspot-dot:hover .hotspot-dot__inner{transform:scale(1.3);background-color:var(--hud-accent)}.hotspot-tooltip{position:absolute;bottom:20px;left:50%;transform:translate(-50%) translateY(10px);background:#0a0a0ff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--hud-accent);border-radius:10px;padding:10px 14px;width:180px;box-shadow:0 10px 25px #0009,0 0 8px var(--hud-accent-glow);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;text-align:center}.hotspot-dot:hover .hotspot-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.hotspot-tooltip__title{font-size:.8rem;font-weight:700;color:#fff;margin-bottom:2px}.hotspot-tooltip__desc{font-size:.7rem;color:#bbb;line-height:1.35}@keyframes hotspot-pulse{0%{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}.camera-exp__loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:16px;color:#bbb;font-size:.9rem;z-index:6;transition:opacity .5s ease}.spinner{width:32px;height:32px;border:2.5px solid rgba(63,167,232,.1);border-top-color:var(--hud-accent);border-radius:50%;animation:spin 1s infinite linear}@keyframes spin{to{transform:rotate(360deg)}}.camera-exp__controls{position:absolute;bottom:30px;right:30px;display:flex;gap:8px;background:#0a0a0fb3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:100px;padding:6px 12px;z-index:10;box-shadow:0 10px 30px #0006}@media(max-width:768px){.camera-exp__controls{bottom:20px;left:15px;right:15px;border-radius:12px;justify-content:center;width:calc(100% - 30px)}}.control-btn{background:transparent;border:1px solid transparent;color:#aaa;font-size:.75rem;font-weight:600;font-family:Switzer,sans-serif;padding:6px 14px;border-radius:100px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s ease}.control-btn:hover{color:#fff;background:#ffffff14}.control-btn.active,.control-btn:active{color:var(--hud-accent);background:#3fa7e81f;border-color:#3fa7e840}.camera-exp__instructions{position:absolute;top:30px;left:50%;transform:translate(-50%);display:flex;gap:12px;z-index:10}@media(max-width:600px){.camera-exp__instructions{top:15px;gap:6px;width:90%;justify-content:center}}.instruction-pill{background:#0a0a0f99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.05);color:#aaa;font-size:.7rem;font-weight:600;padding:6px 12px;border-radius:100px;display:flex;align-items:center;gap:6px}.instruction-pill svg{color:var(--hud-accent)}