.what-visual{position:relative}
.orb-wrap{position:relative;width:min(100%,420px);aspect-ratio:1;display:grid;place-items:center}
.orb-wrap .wonder-orb{width:100%}
.orb-wrap .wonder-orb{transition:transform .12s linear,filter .12s linear;will-change:transform}
.orb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.16);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 40px rgba(20,10,60,.35);display:grid;place-items:center;cursor:pointer;z-index:3;transition:transform .25s,background .25s}
.orb-play:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(255,255,255,.24)}
.orb-play svg{width:26px;height:26px;fill:#fff}
.orb-play .i-pause{display:none}.orb-play.playing .i-play{display:none}.orb-play.playing .i-pause{display:block}
.orb-cap{position:absolute;left:calc(100% - 30px);top:18%;width:230px;padding:12px 16px;border-radius:18px 18px 18px 4px;font-size:15px;line-height:1.4;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s;z-index:4;pointer-events:none}
.orb-cap.show{opacity:1;transform:none}
.orb-tag{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
[data-theme="light"] .orb-cap{color:#111;background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.08)}
@media (max-width:900px){.orb-cap{left:50%;top:auto;bottom:-10px;transform:translate(-50%,8px);max-width:86%;text-align:center;border-radius:18px}.orb-cap.show{transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.orb-wrap .wonder-orb{transition:none;transform:none!important;filter:none!important}.orb-cap{transition:none}}
/* caption: centered over the lower part of the orb so it never overflows the column */
.orb-cap{left:50%;top:auto;bottom:6%;width:auto;max-width:88%;text-align:center;border-radius:18px;transform:translate(-50%,8px)}
.orb-cap.show{transform:translate(-50%,0)}
/* dark frosted glass reads on the bright orb */
.orb-cap{color:#fff;background:rgba(12,10,28,.55);border-color:rgba(255,255,255,.22);box-shadow:0 10px 30px rgba(10,5,40,.35)}
.orb-play{background:rgba(12,10,28,.35);border-color:rgba(255,255,255,.55)}
.orb-play:hover{background:rgba(12,10,28,.5)}
/* caption: fixed center point on the lower orb; grows equally up/down, fixed width so wrapping is stable */
.orb-cap{top:78%;bottom:auto;left:50%;width:min(88%,330px);max-width:none;box-sizing:border-box;min-height:calc(2em * 1.4 + 24px);display:flex;align-items:center;justify-content:center;transform:translate(-50%,calc(-50% + 8px))}
.orb-cap.show{transform:translate(-50%,-50%)}
@media (max-width:900px){.orb-cap{top:78%;bottom:auto;font-size:14px;transform:translate(-50%,calc(-50% + 8px))}.orb-cap.show{transform:translate(-50%,-50%)}}