.trio.svelte-j1d0e8{position:relative;width:96%;max-width:480px;aspect-ratio:1 / .83;isolation:isolate;container-type:inline-size}.trio.svelte-j1d0e8:before{content:"";position:absolute;inset:-28% -10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--brand-default) 30%,transparent) 0%,color-mix(in srgb,var(--brand-default) 16%,transparent) 34%,color-mix(in srgb,var(--brand-default) 6%,transparent) 53%,transparent 72%);filter:blur(20px)}.trio.svelte-j1d0e8 .trio-phone:where(.svelte-j1d0e8){position:absolute;top:50%;width:38%;transition:transform .34s cubic-bezier(.2,.7,.2,1)}.trio.svelte-j1d0e8 .trio-left:where(.svelte-j1d0e8){left:0;z-index:1;--phone-tilt: -4deg;transform:translateY(-50%) rotate(var(--phone-tilt))}.trio.svelte-j1d0e8 .trio-center:where(.svelte-j1d0e8){left:31%;z-index:3;transform:translateY(-50%) scale(1.06)}.trio.svelte-j1d0e8 .trio-right:where(.svelte-j1d0e8){right:0;z-index:2;--phone-tilt: 4deg;transform:translateY(-50%) rotate(var(--phone-tilt))}@media(not (max-width:700px))and (hover:hover)and (pointer:fine){.trio.svelte-j1d0e8:has(.trio-phone:where(.svelte-j1d0e8):hover) .trio-phone:where(.svelte-j1d0e8){transform:translate(var(--hover-shift, 0px),calc(-50% + 1.5cqw)) rotate(var(--phone-tilt, 0deg)) scale(.96)}.trio.svelte-j1d0e8:has(.trio-left:where(.svelte-j1d0e8):hover) .trio-center:where(.svelte-j1d0e8){--hover-shift: 2.5cqw}.trio.svelte-j1d0e8:has(.trio-left:where(.svelte-j1d0e8):hover) .trio-right:where(.svelte-j1d0e8){--hover-shift: 3.5cqw}.trio.svelte-j1d0e8:has(.trio-center:where(.svelte-j1d0e8):hover) .trio-left:where(.svelte-j1d0e8){--hover-shift: -3cqw}.trio.svelte-j1d0e8:has(.trio-center:where(.svelte-j1d0e8):hover) .trio-right:where(.svelte-j1d0e8){--hover-shift: 3cqw}.trio.svelte-j1d0e8:has(.trio-right:where(.svelte-j1d0e8):hover) .trio-center:where(.svelte-j1d0e8){--hover-shift: -2.5cqw}.trio.svelte-j1d0e8:has(.trio-right:where(.svelte-j1d0e8):hover) .trio-left:where(.svelte-j1d0e8){--hover-shift: -3.5cqw}.trio.svelte-j1d0e8:has(.trio-phone:where(.svelte-j1d0e8):hover) .trio-phone:where(.svelte-j1d0e8):hover{z-index:4;transform:translateY(-50%) scale(1.12)}}