/* Foreground spheres cross the panel edge; the panel itself remains still. */
.philosophy .perspective{overflow:visible;isolation:isolate}
.philosophy .perspective-white{border:1px solid transparent}
.sphere-touch{position:absolute;z-index:1;top:-16px;left:50%;width:60%;max-width:270px;aspect-ratio:1;transform:translateX(-50%);padding:0;border:0;border-radius:50%;background:none;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.sphere-touch:active{cursor:grabbing}
.sphere-touch:disabled{cursor:default}
.sphere-poster,.sphere-canvas{position:absolute;left:-25%;top:-12.5%;width:150%;height:150%;max-width:none;pointer-events:none;user-select:none}
.sphere-poster{object-fit:contain;transition:transform .45s var(--ease)}
.sphere-touch:not(.webgl-ready):not(:disabled):hover .sphere-poster{transform:translateY(-2px)}
.sphere-touch:not(.webgl-ready):active .sphere-poster{transform:scale(.98)}
.sphere-canvas{opacity:0}
.sphere-touch.webgl-ready .sphere-canvas{opacity:1}
.sphere-touch.webgl-ready .sphere-poster{visibility:hidden}
.sphere-touch:focus{outline:none}
.perspective:has(.sphere-touch:focus-visible:not(.is-pointer-focused)) .perspective-heading span:first-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media(min-width:561px) and (max-width:800px){.philosophy .perspective p{min-height:5.1em}}
@media(max-width:560px){.philosophy .perspectives{gap:54px;margin-top:16px}.sphere-touch{max-width:230px}.philosophy .perspective{min-height:342px}}
@media(prefers-reduced-motion:reduce){.sphere-poster{transition:none}.sphere-touch:not(.webgl-ready):not(:disabled):hover .sphere-poster,.sphere-touch:not(.webgl-ready):active .sphere-poster{transform:none}}