.onboarding-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000a66;display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;transition:opacity .4s ease-out}.onboarding-overlay.visible{opacity:1}.onboarding-overlay.exiting{opacity:0}.onboarding-panel{background:#0a0a19bf;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:24px;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 32px #0006;padding:32px 28px 28px;max-width:320px;width:calc(100% - 48px);text-align:center;transform:translateY(10px);transition:transform .4s ease-out}.onboarding-overlay.visible .onboarding-panel{transform:translateY(0)}.gesture-container{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative}.gesture-icon{color:#ffffffe6;filter:drop-shadow(0 0 12px var(--theme-accent, #bb88ff))}.gesture-icon svg{stroke:currentColor}.gesture-rotate{animation:dragHorizontal 2s ease-in-out infinite}@keyframes dragHorizontal{0%,to{transform:translate(-35px)}50%{transform:translate(35px)}}.gesture-rotate:after{content:"";position:absolute;width:70px;height:2px;background:linear-gradient(90deg,transparent,var(--theme-accent, #bb88ff),transparent);opacity:.4;animation:trailFade 2s ease-in-out infinite}@keyframes trailFade{0%,to{opacity:0}25%,75%{opacity:.4}50%{opacity:.6}}.gesture-zoom{display:flex;align-items:center;justify-content:center;gap:0}.gesture-zoom .finger{color:#ffffffe6;filter:drop-shadow(0 0 12px var(--theme-accent, #bb88ff))}.gesture-zoom .finger-left{animation:pinchZoomLeft 1.8s ease-in-out infinite}.gesture-zoom .finger-right{animation:pinchZoomRight 1.8s ease-in-out infinite}@keyframes pinchZoomLeft{0%,to{transform:translate(-16px) rotate(5deg) scaleX(-1)}50%{transform:translate(-2px) rotate(5deg) scaleX(-1)}}@keyframes pinchZoomRight{0%,to{transform:translate(16px) rotate(-5deg)}50%{transform:translate(2px) rotate(-5deg)}}.gesture-tap{position:relative;display:flex;align-items:center;justify-content:center}.gesture-tap .tap-pointer{color:#ffffffe6;filter:drop-shadow(0 0 12px var(--theme-accent, #bb88ff));animation:tapBounce 1.5s ease-in-out infinite}@keyframes tapBounce{0%,to{transform:translateY(0)}40%{transform:translateY(8px)}50%{transform:translateY(4px)}60%{transform:translateY(8px)}}.gesture-tap .tap-ring{position:absolute;width:24px;height:24px;border:2px solid var(--theme-accent, #bb88ff);border-radius:50%;bottom:0;left:50%;transform:translate(-50%);animation:tapRingPulse 1.5s ease-out infinite}@keyframes tapRingPulse{0%,35%{opacity:0;transform:translate(-50%) scale(.5)}45%{opacity:.8;transform:translate(-50%) scale(1)}70%,to{opacity:0;transform:translate(-50%) scale(2)}}.instruction-text{color:#ffffffeb;font-size:15px;line-height:1.5;margin:0 0 24px;font-weight:400}.onboarding-button{background:var(--theme-accent, #bb88ff);color:#fff;border:none;padding:12px 32px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease;box-shadow:0 2px 12px #0003}.onboarding-button:hover{transform:translateY(-1px);box-shadow:0 4px 16px #0000004d}.onboarding-button:active{transform:translateY(0)}.progress-dots{display:flex;gap:8px;justify-content:center;margin-top:20px}.progress-dot{width:8px;height:8px;border-radius:50%;background:#fff3;transition:background .3s ease,transform .3s ease}.progress-dot.active{background:var(--theme-accent, #bb88ff);transform:scale(1.2)}.progress-dot.completed{background:#ffffff80}.step-content{animation:stepFadeIn .3s ease-out}@keyframes stepFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.gesture-rotate,.gesture-zoom .finger,.gesture-tap .tap-pointer,.gesture-tap .tap-ring,.gesture-rotate:after{animation:none}.onboarding-overlay,.onboarding-panel,.step-content{transition:none}}:root{--theme-glow-primary: rgba(90, 186, 202, 1);--theme-glow-soft: rgba(90, 186, 202, .8);--theme-glow-subtle: rgba(90, 186, 202, .6);--theme-glow-faint: rgba(90, 186, 202, .4);--theme-accent: #5abaca;--theme-accent-dim: #4a9aba;--theme-contrast-primary: rgba(187, 136, 255, 1);--theme-contrast-soft: rgba(187, 136, 255, .8);--theme-contrast-subtle: rgba(187, 136, 255, .6);--theme-contrast-faint: rgba(187, 136, 255, .4);--theme-contrast-accent: #bb88ff;--theme-contrast-dim: #9966dd}:root[data-theme=purple]{--theme-glow-primary: rgba(187, 136, 255, 1);--theme-glow-soft: rgba(187, 136, 255, .8);--theme-glow-subtle: rgba(187, 136, 255, .6);--theme-glow-faint: rgba(187, 136, 255, .4);--theme-accent: #bb88ff;--theme-accent-dim: #9966dd;--theme-contrast-primary: rgba(90, 186, 202, 1);--theme-contrast-soft: rgba(90, 186, 202, .8);--theme-contrast-subtle: rgba(90, 186, 202, .6);--theme-contrast-faint: rgba(90, 186, 202, .4);--theme-contrast-accent: #5abaca;--theme-contrast-dim: #4a9aba}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;background-color:#001}#root{width:100vw;height:100vh;overflow:hidden}button{font-family:inherit}button:hover{opacity:.9;transition:opacity .2s ease}button:active{transform:scale(.98)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.toolbar-btn{transition:background .2s ease,transform .15s ease,opacity .2s ease,filter .2s ease,color .2s ease;opacity:.8;border-radius:10px}.toolbar-btn:hover{opacity:1!important;color:var(--theme-contrast-accent)!important;filter:drop-shadow(0 0 12px var(--theme-contrast-primary))!important;transform:scale(1.15)!important}.toolbar-btn:active{transform:scale(.95)!important}.toolbar-btn.auto-rotate-on{opacity:1;filter:drop-shadow(0 0 10px var(--theme-contrast-soft));animation:pauseGlow 2s ease-in-out infinite}@keyframes pauseGlow{0%,to{filter:drop-shadow(0 0 8px var(--theme-contrast-subtle))}50%{filter:drop-shadow(0 0 16px var(--theme-contrast-primary))}}.toolbar-btn.bookmarked{opacity:1;filter:drop-shadow(0 0 10px var(--theme-contrast-soft))}.controls-fade{transition:opacity .5s ease-out}.controls-fade.visible{opacity:1;pointer-events:auto}.controls-fade.hidden{opacity:0;pointer-events:none}.range-thumb{position:absolute;left:var(--thumb-left, 0%);top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:#0f8;border:2px solid #fff;box-shadow:0 2px 8px #0006;pointer-events:auto;z-index:6;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),width .2s cubic-bezier(.4,0,.2,1),height .2s cubic-bezier(.4,0,.2,1)}.range-thumb.max-thumb{background:#08f;z-index:7}.range-thumb:hover{width:20px;height:20px;box-shadow:0 0 20px #00ff88e6,0 0 40px #0f86,0 2px 8px #0006}.range-thumb.max-thumb:hover{box-shadow:0 0 20px #0088ffe6,0 0 40px #08f6,0 2px 8px #0006}.range-thumb:active,.range-thumb.dragging{width:22px;height:22px;box-shadow:0 0 30px #0f8,0 0 60px #0f89,0 2px 8px #0006}.range-thumb.max-thumb:active,.range-thumb.max-thumb.dragging{box-shadow:0 0 30px #08f,0 0 60px #08f9,0 2px 8px #0006}@keyframes breathe{0%,to{transform:scale(1);box-shadow:0 0 3px #ffffff4d}50%{transform:scale(1.2);box-shadow:0 0 8px #ffffffb3,0 0 12px #64b4ff4d}}.level-indicator-breathing{animation:breathe 2.5s ease-in-out infinite}@keyframes bookmarkAttentionPulse{0%,to{filter:drop-shadow(0 0 4px var(--theme-contrast-faint));transform:scale(1)}50%{filter:drop-shadow(0 0 20px var(--theme-contrast-primary)) drop-shadow(0 0 40px var(--theme-contrast-subtle));transform:scale(1.1)}}.bookmark-attention-pulse{animation:bookmarkAttentionPulse 1.5s ease-in-out infinite;opacity:1!important}@keyframes locationAttentionPulse{0%,to{filter:drop-shadow(0 0 4px var(--theme-contrast-faint));transform:scale(1)}50%{filter:drop-shadow(0 0 20px var(--theme-contrast-primary)) drop-shadow(0 0 40px var(--theme-contrast-subtle));transform:scale(1.1)}}.location-attention-pulse{animation:locationAttentionPulse 1.5s ease-in-out infinite;opacity:1!important}.welcome-tagline{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200;pointer-events:none;opacity:0;white-space:nowrap}.welcome-tagline.tagline-visible{animation:taglineBrightFadeIn 1.4s ease-out forwards}.welcome-tagline.tagline-fadeout{animation:taglineFadeOut .5s ease-in forwards}@keyframes taglineBrightFadeIn{0%{opacity:0;filter:brightness(2.5)}40%{opacity:1;filter:brightness(2.5)}to{opacity:1;filter:brightness(1)}}@keyframes taglineFadeOut{0%{opacity:1}to{opacity:0}}.tagline-text{display:inline-block;position:relative;font-size:14px;font-weight:300;letter-spacing:.15em;color:#ffffff80;text-align:center;overflow:hidden}@media(prefers-reduced-motion:reduce){.welcome-tagline.tagline-visible{animation:none;opacity:1}.welcome-tagline.tagline-fadeout{animation:none;opacity:0;transition:opacity .2s ease-out}}.intro-b-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;z-index:10000;pointer-events:none;animation:introBgFade 4.8s ease-out forwards}@keyframes introBgFade{0%,45%{background:#000}60%{background:transparent}to{background:transparent}}.intro-b-logo{font-size:42px;font-weight:300;letter-spacing:.4em;text-transform:uppercase;margin:0;padding-left:.4em;opacity:0;animation:introLogoAnim 4.8s ease-out forwards}@keyframes introLogoAnim{0%{opacity:0;transform:translateY(-10px)}6%{opacity:1;transform:translateY(0)}31%{opacity:1}68%{opacity:1}78%{opacity:0}to{opacity:0}}.intro-b-tagline{margin:16px 0 0;font-size:14px;font-weight:300;letter-spacing:.15em;color:#fff;text-align:center;opacity:0;pointer-events:none;animation:breathingGlow 4.8s forwards ease-out;text-shadow:0 0 30px rgba(221,102,255,0)}@keyframes breathingGlow{0%,38%{opacity:0;text-shadow:0 0 30px rgba(221,102,255,0)}45%{opacity:.92;text-shadow:0 0 40px rgba(221,102,255,.7)}58%{opacity:.94;text-shadow:0 0 50px rgba(221,102,255,.9)}68%{opacity:.92;text-shadow:0 0 40px rgba(221,102,255,.7)}78%{opacity:0;text-shadow:0 0 20px rgba(221,102,255,0)}to{opacity:0;text-shadow:0 0 20px rgba(221,102,255,0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}