[data-depth-surface]{--depth-angle:2deg;transform-origin:50% 55%;transition:transform .38s var(--motion-ease);position:relative}[data-depth-surface=control]{--depth-angle:3deg}[data-depth-surface=portrait]{--depth-angle:1.6deg}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){[data-depth-active=true]{transform:perspective(1100px) rotateX(calc(var(--depth-y,0) * var(--depth-angle) * -1)) rotateY(calc(var(--depth-x,0) * var(--depth-angle)))}[data-depth-surface=control]:active{transition-duration:.1s;transform:perspective(1100px)rotateX(0)rotateY(0)scale(.98)}}@media (prefers-reduced-motion:no-preference){[data-depth-surface=control]:focus-visible,.creator-card:focus-visible [data-depth-surface],.instrument-preview:focus-visible [data-depth-surface]{transform:perspective(1100px)rotateX(1deg)}.instrument-note details>p,.faq-list details>p{transform-origin:50% 0}}@media (hover:none) and (prefers-reduced-motion:no-preference){[data-depth-surface=control]:active{transition-duration:.1s;transform:scale(.98)}}@media (prefers-reduced-motion:reduce){[data-depth-surface]{transition:none;transform:none}}[data-depth-surface]:after{content:"";pointer-events:none;opacity:0;background:radial-gradient(ellipse 130% 110% at calc(50% + var(--depth-x,0) * 30%) calc(45% + var(--depth-y,0) * 25%), #ffffff09, transparent 72%);transition:opacity .45s var(--motion-ease);position:absolute;inset:0}@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){[data-depth-active=true]:after{opacity:1}}@media (prefers-reduced-motion:reduce){[data-depth-surface]:after{opacity:0;transition:none}.instrument-note details>p,.faq-list details>p{opacity:1!important;transform:none!important}}
