/* Compass public v2 — bright music-studio-style glints, bubbles and piano interaction.
   Pure decorative layer; all original cards, videos and controls keep their layout. */
.compass-piano-control,.compass-piano-card{position:relative}
.compass-piano-control{isolation:isolate}
.compass-piano-particles{
 position:absolute!important;inset:0!important;z-index:3!important;
 border-radius:inherit!important;overflow:hidden!important;
 pointer-events:none!important;opacity:0!important;
 transition:opacity .12s ease!important;
}
.compass-piano-particles>i{
 position:absolute!important;left:var(--px);top:var(--py);
 display:block;pointer-events:none!important;
 animation:compass-piano-float 1.8s ease-out var(--pdelay) infinite paused;
 font-style:normal;text-shadow:0 0 9px currentColor,0 0 16px currentColor;
}
.compass-piano-particles>.compass-piano-spark{color:#ffe48e;font-size:17px}
.compass-piano-particles>.compass-piano-spark:after{content:'✦'}
.compass-piano-particles>.compass-piano-bubble{
 width:15px;height:15px;border-radius:50%;
 border:1px solid #e6fbffed;
 background:radial-gradient(circle at 28% 20%,#fff 0 10%,#98fdff55 20%,#da85ff55 48%,#ffd78e33 73%,transparent 84%);
 box-shadow:inset 0 0 7px #e7fffd99,0 0 11px #b48affaa;
}
.compass-piano-particles>.compass-piano-note{
 color:#73edff;font-size:20px;line-height:1;
}
.compass-piano-particles>.compass-piano-note::after{content:attr(data-note);}
.compass-piano-particles>i:nth-child(4n){filter:hue-rotate(55deg)}
.compass-piano-particles>i:nth-child(4n + 1){filter:hue-rotate(145deg)}
.compass-piano-particles>i:nth-child(4n + 2){filter:hue-rotate(270deg)}
.compass-piano-particles>i:nth-child(4n + 3){filter:hue-rotate(20deg)}
.compass-piano-control:is(:hover,:focus-visible,:active,.compass-piano-tap)>.compass-piano-particles,
.compass-piano-card:is(:hover,:focus-within,:active,.compass-piano-tap)>.compass-piano-particles{opacity:1!important}
.compass-piano-control:is(:hover,:focus-visible,:active,.compass-piano-tap)>.compass-piano-particles>i,
.compass-piano-card:is(:hover,:focus-within,:active,.compass-piano-tap)>.compass-piano-particles>i{animation-play-state:running}
.compass-piano-control:is(:hover,:focus-visible,:active) {box-shadow:0 0 15px #83dbff5e,0 0 24px #e493ff30}
@keyframes compass-piano-float{
 0%{opacity:0;transform:translate3d(0,13px,0) scale(.45) rotate(-12deg)}
 22%{opacity:.95}76%{opacity:.7}
 100%{opacity:0;transform:translate3d(11px,-34px,0) scale(1.27) rotate(16deg)}
}
@keyframes compass-piano-pop{
 0%{scale:1}39%{scale:1.055}68%{scale:1.011}100%{scale:1.025}
}
@keyframes compass-piano-press{
 0%{scale:1.025}42%{scale:.947}82%{scale:1.018}100%{scale:1}
}
@media(hover:hover) and (pointer:fine){
 .compass-piano-card:hover{scale:1.025}
 .compass-piano-control:hover{scale:1.032}
}
.compass-piano-card.compass-piano-bounce,.compass-piano-control.compass-piano-bounce{animation:compass-piano-pop .43s cubic-bezier(.2,.8,.23,1) both}
.compass-piano-card.compass-piano-tap,.compass-piano-control.compass-piano-tap{animation:compass-piano-press .35s cubic-bezier(.2,.8,.23,1) both}
.compass-piano-card,.compass-piano-control{transition:scale .22s ease-out}
.compass-piano-card:active{scale:.965}
.compass-piano-control:active{scale:.955}
.compass-piano-mute{
 position:fixed;left:13px;bottom:12px;z-index:86;
 padding:9px 13px;border:1px solid #83deffb5;border-radius:999px;
 color:#fff;background:linear-gradient(125deg,#161a3af2,#39226be9);
 box-shadow:0 0 14px #7de3ff5c;backdrop-filter:blur(8px);
 font:700 12px/1.2 Inter,"Segoe UI",sans-serif;cursor:pointer;
}
.compass-piano-mute:hover{box-shadow:0 0 20px #f0b0ffbb}
.compass-piano-mute:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Do not show conflicting sound switches on publishing pages. */
body .compass-magic-sound-toggle{display:none!important}
/* On publishing pages, old public-card sparkle is hover/focus/press ONLY.
   Remove v1's erroneous always-running override without changing its JS. */
body.ps-world .compass-magic-fx>i,
body.cps-body .compass-magic-fx>i{animation-play-state:paused!important}
body.ps-world .compass-magic-card:is(:hover,:focus-within,.compass-magic-press) .compass-magic-fx>i,
body.cps-body .compass-magic-card:is(:hover,:focus-within,.compass-magic-press) .compass-magic-fx>i{animation-play-state:running!important}
@media(prefers-reduced-motion:reduce){
 .compass-piano-particles{display:none!important}
 .compass-piano-card,.compass-piano-control{animation:none!important;transition:none!important;scale:1!important}
}
@media(max-width:580px){.compass-piano-mute{left:9px;bottom:9px;padding:8px 11px;font-size:11px}}


/* V3: no residual animations after mouse exit or after a pointer click leaves focus.
   Stop the entire effect instead of freezing a paused particle mid-flight. */
.compass-piano-control:not(:hover):not(:focus-visible):not(:active):not(.compass-piano-tap)>.compass-piano-particles,
.compass-piano-card:not(:hover):not(:focus-visible):not(:active):not(.compass-piano-tap)>.compass-piano-particles{
 opacity:0!important;visibility:hidden!important;transition:none!important;
}
.compass-piano-control:not(:hover):not(:focus-visible):not(:active):not(.compass-piano-tap)>.compass-piano-particles>i,
.compass-piano-card:not(:hover):not(:focus-visible):not(:active):not(.compass-piano-tap)>.compass-piano-particles>i{
 animation:none!important;opacity:0!important;
}
.compass-piano-card.compass-magic-card .compass-magic-fx>i{animation:none!important;}
.compass-piano-card.compass-magic-card:is(:hover,:focus-visible,:active,.compass-magic-press) .compass-magic-fx>i{
 animation:compass-magic-float 1.75s ease-out var(--mdelay) infinite!important;
}
.compass-piano-card.compass-magic-card:not(:hover):not(:focus-visible):not(:active):not(.compass-magic-press) .compass-magic-fx{
 opacity:0!important;visibility:hidden!important;
}
.compass-piano-card.compass-magic-card:is(:hover,:focus-visible,:active,.compass-magic-press) .compass-magic-fx{
 opacity:1!important;visibility:visible!important;
}
/* Explore: preserve six separate video worlds and audio, but restore
   the sparkle particles ONLY while a card is actually engaged. */
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card.cw-world-animated .cw-art>.cw-card-magic{
 opacity:0!important;visibility:hidden!important;transition:none!important;
}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card.cw-world-animated:is(:hover,:focus-visible,:active,.cw-magic-press) .cw-art>.cw-card-magic{
 opacity:1!important;visibility:visible!important;
}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card .cw-card-magic .cw-magic-dot,
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card .cw-card-magic .cw-magic-glyph,
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card .cw-card-magic .compass-piano-bubble{animation:none!important;}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card:is(:hover,:focus-visible,:active,.cw-magic-press) .cw-card-magic .cw-magic-dot{
 animation:cw-magic-rise var(--period,1.9s) ease-out var(--delay,0s) infinite!important;
}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card:is(:hover,:focus-visible,:active,.cw-magic-press) .cw-card-magic .cw-magic-glyph{
 animation:cw-magic-glyph-float 2.2s ease-in-out var(--delay,0s) infinite!important;
}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card:is(:hover,:focus-visible,:active,.cw-magic-press) .cw-card-magic .compass-piano-bubble{
 animation:compass-piano-float 2.1s ease-out var(--pdelay,0s) infinite!important;
}
@media(prefers-reduced-motion:reduce){
 .compass-piano-card.compass-magic-card .compass-magic-fx{display:none!important}
 body.compass-worlds-page main.cw-page .cw-grid>a.cw-card .cw-art>.cw-card-magic{display:none!important}
}

/* Legacy card-magic also decorates some large cards classified as buttons.
   A mouse click can leave focus inside the card: focus-within MUST NOT
   keep the particles playing after the cursor leaves. */
.compass-magic-card:is(.compass-piano-card,.compass-piano-control) .compass-magic-fx>i{animation:none!important;}
.compass-magic-card:is(.compass-piano-card,.compass-piano-control):is(:hover,:focus-visible,:active,.compass-magic-press) .compass-magic-fx>i{
 animation:compass-magic-float 1.75s ease-out var(--mdelay) infinite!important;
}
.compass-magic-card:is(.compass-piano-card,.compass-piano-control):not(:hover):not(:focus-visible):not(:active):not(.compass-magic-press) .compass-magic-fx{
 opacity:0!important;visibility:hidden!important;
}
.compass-magic-card:is(.compass-piano-card,.compass-piano-control):is(:hover,:focus-visible,:active,.compass-magic-press) .compass-magic-fx{
 opacity:1!important;visibility:visible!important;
}

/* Hover/press-only FX reset: no frozen sparkles or bouncing after departure. */
.compass-piano-control:not(:hover):not(:focus-visible):not(:active):not(.compass-piano-tap)>.compass-piano-particles,
.compass-piano-card:not(:hover):not(:focus-visible):not(:active):not(.compass-piano-tap)>.compass-piano-particles{
opacity:0!important;visibility:hidden!important;transition:none!important;
}
.compass-piano-control:not(:hover):not(:focus-visible):not(:active):not(.compass-piano-tap)>.compass-piano-particles>i,
.compass-piano-card:not(:hover):not(:focus-visible):not(:active):not(.compass-piano-tap)>.compass-piano-particles>i{
animation:none!important;opacity:0!important;
}
.compass-magic-card:is(.compass-piano-card,.compass-piano-control) .compass-magic-fx>i{animation:none!important;}
.compass-magic-card:is(.compass-piano-card,.compass-piano-control):is(:hover,:focus-visible,:active,.compass-magic-press) .compass-magic-fx>i{
animation:compass-magic-float 1.75s ease-out var(--mdelay) infinite!important;
}
.compass-magic-card:is(.compass-piano-card,.compass-piano-control):not(:hover):not(:focus-visible):not(:active):not(.compass-magic-press) .compass-magic-fx{
opacity:0!important;visibility:hidden!important;
}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card.cw-world-animated .cw-art>.cw-card-magic{
opacity:0!important;visibility:hidden!important;transition:none!important;
}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card.cw-world-animated:is(:hover,:focus-visible,:active,.cw-magic-press) .cw-art>.cw-card-magic{
opacity:1!important;visibility:visible!important;
}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card .cw-card-magic .cw-magic-dot,
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card .cw-card-magic .cw-magic-glyph,
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card .cw-card-magic .compass-piano-bubble{animation:none!important;}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card:is(:hover,:focus-visible,:active,.cw-magic-press) .cw-card-magic .cw-magic-dot{
animation:cw-magic-rise var(--period,1.9s) ease-out var(--delay,0s) infinite!important;
}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card:is(:hover,:focus-visible,:active,.cw-magic-press) .cw-card-magic .cw-magic-glyph{
animation:cw-magic-glyph-float 2.2s ease-in-out var(--delay,0s) infinite!important;
}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card:is(:hover,:focus-visible,:active,.cw-magic-press) .cw-card-magic .compass-piano-bubble{
animation:compass-piano-float 2.1s ease-out var(--pdelay,0s) infinite!important;
}
@media(prefers-reduced-motion:reduce){
.compass-piano-card.compass-magic-card .compass-magic-fx{display:none!important}
body.compass-worlds-page main.cw-page .cw-grid>a.cw-card .cw-art>.cw-card-magic{display:none!important}
}

/* The main Welcome and Home card classes were missing from the effect selector. */
.compass-piano-card.welcome-card,.compass-piano-card.path-card,.compass-piano-card.support-card,.compass-piano-card.journey-card{
 position:relative;isolation:isolate;transition:scale .24s cubic-bezier(.18,1.4,.33,1);
}
@media(hover:hover) and (pointer:fine){
.compass-piano-card.welcome-card:hover,.compass-piano-card.path-card:hover,
.compass-piano-card.support-card:hover,.compass-piano-card.journey-card:hover{scale:1.018;}
}
.compass-piano-card>.compass-piano-particles,.compass-piano-control>.compass-piano-particles{pointer-events:none!important}
@media(prefers-reduced-motion:reduce){.compass-piano-card>.compass-piano-particles{display:none!important}}


/* Repairs invisible Explore dots: base opacity is animated by @keyframes,
   do not lock their opacity with !important. Keep all effects off at rest. */
body.compass-worlds-page .cw-grid>a.cw-card>.compass-piano-particles{
 z-index:420!important;isolation:isolate;pointer-events:none!important;
}
@media(hover:hover) and (pointer:fine){
  body.compass-worlds-page .cw-grid>a.cw-card:hover,
  body.page-welcome-home .welcome-card:hover,body.page-welcome-home .path-card:hover,
  body.home-page .support-card:hover,body.home-page .journey-card:hover{
   scale:1.026;
  }
}
@media(prefers-reduced-motion:reduce){
 body.compass-worlds-page .cw-grid>a.cw-card:hover,
 body.page-welcome-home .welcome-card:hover,body.page-welcome-home .path-card:hover,
 body.home-page .support-card:hover,body.home-page .journey-card:hover{scale:1!important}
}