*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#0f0f23);color:#fff;overflow-x:hidden}body{height:800vh}#canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.top-nav{position:fixed;top:25px;right:30px;z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.logo-link{opacity:.8;transition:opacity .3s ease,transform .3s ease}.logo-link:hover{opacity:1;transform:scale(1.05)}.logo-image{height:48px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.showcase-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;text-decoration:none;color:#fffc;background:#667eea33;border:1px solid rgba(102,126,234,.4);border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.showcase-btn:hover{color:#fff;background:#667eea66;border-color:#667eeacc;box-shadow:0 0 20px #667eea4d}.showcase-icon{width:14px;height:14px;flex-shrink:0}.scroll-indicator{position:fixed;right:30px;top:50%;transform:translateY(-50%);width:4px;height:200px;background:#ffffff1a;border-radius:2px;z-index:10}.scroll-progress{width:100%;height:0%;background:linear-gradient(180deg,#667eea,#764ba2);border-radius:2px;transition:height .1s ease-out}.stage-nav{position:fixed;right:50px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:15px;z-index:10}.stage-dot{width:12px;height:12px;border-radius:50%;background:#fff3;border:2px solid rgba(255,255,255,.3);cursor:pointer;transition:all .3s ease}.stage-dot:hover{background:#fff6;transform:scale(1.2)}.stage-dot.active{background:#667eea;border-color:#667eea;box-shadow:0 0 15px #667eea99}.stage-label{position:fixed;bottom:40px;left:50%;transform:translate(-50%);font-size:14px;letter-spacing:2px;text-transform:uppercase;color:#fff9;z-index:10;transition:opacity .3s ease}.demo-header{position:fixed;top:30px;left:50%;transform:translate(-50%);text-align:center;z-index:10}.demo-header h1{font-size:28px;font-weight:300;letter-spacing:8px;text-transform:uppercase;color:#ffffffe6;margin-bottom:8px;text-shadow:0 0 30px rgba(102,126,234,.5)}.demo-subtitle{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:#ffffff80}.tech-specs{position:fixed;top:30px;left:30px;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 20px;z-index:10;min-width:180px}.tech-specs h3{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#667eeae6;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.tech-specs ul{list-style:none}.tech-specs li{font-size:12px;color:#ffffffb3;margin-bottom:6px;display:flex;justify-content:space-between;gap:10px}.tech-label{color:#fff6}.debug-panel{position:fixed;bottom:30px;left:30px;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 20px;z-index:10;min-width:160px;font-family:Monaco,Menlo,monospace}.debug-panel h3{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#764ba2e6;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.debug-item{font-size:12px;color:#ffffffb3;margin-bottom:6px;display:flex;justify-content:space-between;gap:15px}.debug-label{color:#fff6}.debug-item span:last-child{color:#4ade80;font-weight:500}.instructions{position:fixed;bottom:80px;left:50%;transform:translate(-50%);z-index:10}.instructions p{font-size:11px;letter-spacing:1px;color:#ffffff4d;text-align:center}.loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a1a;display:flex;justify-content:center;align-items:center;z-index:100;transition:opacity .5s ease}.loading.hidden{opacity:0;pointer-events:none}.loading-spinner{width:50px;height:50px;border:3px solid rgba(255,255,255,.1);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 1024px){.tech-specs{top:auto;bottom:30px;left:15px;padding:12px 16px;min-width:160px}.debug-panel{display:none}}@media (max-width: 768px){.top-nav{top:15px;right:15px;gap:8px}.logo-image{height:36px}.showcase-btn{padding:6px 12px;font-size:9px}.showcase-icon{width:12px;height:12px}.demo-header{top:15px;left:15px;transform:none;text-align:left;max-width:50%}.demo-header h1{font-size:16px;letter-spacing:3px;margin-bottom:4px}.demo-subtitle{font-size:9px;letter-spacing:2px}.tech-specs,.debug-panel,.scroll-indicator{display:none}.stage-nav{right:15px;gap:10px}.stage-dot{width:10px;height:10px}.stage-label{font-size:11px;bottom:15px;left:15px;transform:none;text-align:left}.instructions{bottom:40px}.instructions p{font-size:10px}}@media (max-width: 480px){.top-nav{top:10px;right:10px;gap:6px}.logo-image{height:28px}.showcase-btn{padding:5px 10px;font-size:8px;letter-spacing:.5px}.showcase-icon{width:10px;height:10px}.demo-header{top:10px;left:10px;max-width:55%}.demo-header h1{font-size:14px;letter-spacing:2px}.demo-subtitle{font-size:8px}.stage-nav{right:10px;gap:8px}.stage-dot{width:8px;height:8px;border-width:1.5px}.stage-label{font-size:10px;bottom:10px;left:10px}.instructions{bottom:30px}.instructions p{font-size:9px}}