:root{--bg-color:#030305;--text-main:#fff;--text-muted:#fff9;--glass-bg:#141419d9;--glass-border:#ffffff1a;--accent:#d4af37}*{box-sizing:border-box;margin:0;padding:0}body,html{background-color:var(--bg-color);width:100%;height:100%;color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Outfit,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#gallery-canvas{z-index:1;outline:none;width:100%;height:100%;position:absolute;top:0;left:0}#ui-layer{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}#crosshair{pointer-events:none;mix-blend-mode:difference;z-index:15;background:#fff9;border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#blocker{pointer-events:auto;z-index:20;-webkit-backdrop-filter:blur(8px);background-color:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}#instructions{text-align:center;cursor:pointer;border:1px solid var(--glass-border);background:#ffffff05;border-radius:12px;padding:3rem;transition:background .3s}#instructions:hover{background:#ffffff0d}.intro-title{letter-spacing:4px;text-transform:uppercase;background:linear-gradient(90deg,#fff,#999);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:3rem;font-weight:300}.intro-desc{color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;font-size:1.2rem;font-weight:300}.controls-text{color:var(--text-muted);letter-spacing:1px;font-size:1rem;line-height:1.8}.info-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);pointer-events:auto;opacity:0;border-radius:16px;width:400px;padding:3rem 2.5rem;transition:all .5s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;right:4rem;transform:translateY(-50%)translate(20px);box-shadow:0 30px 60px #0006}.info-panel.visible{opacity:1;transform:translateY(-50%)translate(0)}.info-panel.hidden{pointer-events:none}.close-btn{color:var(--text-muted);cursor:pointer;background:#ffffff0d;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .3s;display:flex;position:absolute;top:1.5rem;right:1.5rem}.close-btn:hover{color:#fff;background:#ffffff26;transform:rotate(90deg)}.close-btn svg{width:18px;height:18px}.info-content h2{color:#fff;letter-spacing:1px;margin-bottom:.5rem;font-size:2rem;font-weight:300}.info-content p{color:var(--text-muted);font-size:1rem;font-weight:300;line-height:1.6}