:root{--color-a:#ff4d6d;--color-b:#4cc9f0;--mixed-color:#a38ba7;color:#151515;background:var(--mixed-color);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html,body{width:100%;height:100%;overflow:hidden}.experience,.mix-field{width:100vw;height:100vh;margin:0;padding:0;position:relative;overflow:hidden}.mix-field{--mix-x:50%;--mix-y:48%;background:radial-gradient(circle at 15% 50%, var(--color-a), transparent 44%), radial-gradient(circle at 85% 50%, var(--color-b), transparent 44%), var(--mixed-color);transition:background-color .26s}.disc{top:var(--mix-y);aspect-ratio:1;mix-blend-mode:screen;border:clamp(.4rem,1vw,.85rem) solid #151515;border-radius:50%;width:clamp(13rem,34vw,31rem);position:absolute;translate:0 -50%}.disc--a{left:calc(var(--mix-x) - 31vw);background:var(--color-a)}.disc--b{right:calc(100% - var(--mix-x) - 31vw);background:var(--color-b)}.result{inset:var(--mix-y) auto auto var(--mix-x);aspect-ratio:1;background:var(--mixed-color);border:clamp(.4rem,1vw,.85rem) solid #151515;border-radius:50%;place-items:center;width:clamp(8rem,18vw,15rem);display:grid;position:absolute;translate:-50% -50%;box-shadow:0 2rem 5rem #1515153d}.result span{font:800 clamp(.72rem, 1.4vw, 1.1rem)/1 var(--web-shell-mono);letter-spacing:.06em;text-transform:uppercase}.caption{position:absolute;inset-block-end:clamp(1.5rem,4vw,3rem);inset-inline-start:clamp(1.25rem,4vw,4rem)}.caption h1,.caption p{margin:0}.caption h1{letter-spacing:-.075em;font-size:clamp(3.5rem,10vw,9rem);font-weight:500;line-height:.8}.caption p{font:700 .68rem/1.4 var(--web-shell-mono);letter-spacing:.1em;text-transform:uppercase;margin-top:1rem}.pair-control{color:inherit;-webkit-backdrop-filter:blur(.6rem);backdrop-filter:blur(.6rem);font:700 .7rem/1 var(--web-shell-sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:#ffffff6b;border:1px solid;border-radius:999px;padding:.8rem 1rem;position:absolute;inset-block-end:clamp(1rem,3vw,2rem);inset-inline-end:clamp(1rem,3vw,2rem)}