.circle-container{height:22.5rem;margin-block-start:1.25rem;position:relative;width:22.5rem}.circle{border-radius:100%;height:16rem;opacity:50%;position:absolute;width:16rem}.circle-a{background-color:var(--circle-a);left:0;top:0}.circle-b{background-color:var(--circle-b);right:0;top:0}.circle-c{background-color:var(--circle-c);bottom:0;left:3.25rem}.circle-title{background-color:var(--light);border-radius:1.5rem;border-style:solid;border-width:2px;color:var(--dark);font-size:.875rem;font-weight:700;line-height:1.2;padding:.5rem;position:absolute;text-align:center;width:10rem}.circle-title-a{border-color:var(--circle-a);left:0;top:-1.25rem}.circle-title-b{border-color:var(--circle-b);right:0;top:-1.25rem}.circle-title-c{border-color:var(--circle-c);bottom:-1.25rem;left:6.25rem}[draggable=true],.dropzone{align-items:center;border-radius:2rem;color:var(--dark);display:flex;height:4rem;justify-content:center;line-height:1;padding-inline:.5rem;text-align:center;width:6.5rem}.dropzone{position:absolute}.dropzone:not([draggable=true]){padding-inline:0}.dropzone:not([draggable=true]) span{align-items:center;background-color:var(--light);border-radius:1.25rem;border-style:solid;display:flex;font-size:.875rem;justify-content:center;line-height:1;min-height:2.625rem;min-width:5rem;padding:.375rem .5rem}.dropzone-a{left:.25rem;top:4.25rem}.dropzone-ab{left:8rem;top:2.5rem}.dropzone-abc{left:8rem;top:8rem}.dropzone-ac{left:2.5rem;top:11.5rem}.dropzone-b{right:.25rem;top:4.25rem}.dropzone-bc{right:2.5rem;top:11.5rem}.dropzone-c{bottom:2.5rem;left:8rem}main>div{align-items:center;display:flex;flex-direction:column;gap:1rem;margin-block-start:1.25rem;max-width:65ch}main>div p{text-align:left;width:min(calc(100vw - 2.5rem),100%)}main>a{margin-block-start:1.25rem}.circle-container{margin-block:1rem 2rem;text-align:center}.circle{animation:slideIn .5s forwards}.circle-a{animation-delay:.25s;transform:translate(-100vw)}.circle-b{animation-delay:.5s;transform:translate(100vw)}.circle-c{animation-delay:.75s;transform:translateY(100vh)}.circle-title,.dropzone{animation:fadeIn 2s forwards}@keyframes fadeIn{0%{opacity:0}60%{opacity:0}to{opacity:1}}@keyframes slideIn{to{transform:translate(0)}}@media (prefers-reduced-motion: reduce){.circle,.circle-title,.dropzone{animation:none}.circle-a,.circle-b,.circle-c{animation-delay:0ms;transform:none}}
