*{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:400;margin:0}body{margin:0;min-height:100vh;display:grid;place-items:center;background-image:linear-gradient(#af86e8,#9288ed);color:#fff;padding:25px}.wrapper{max-width:374px;width:100%;border-radius:4px;box-shadow:0 3px 20px #0000004d;background-image:linear-gradient(135deg,#b47dd7,#9878d1)}.details{display:grid}.details:has(.details__summary+*) .details__summary:after{content:"";display:block;width:20px;aspect-ratio:1;background-image:url("data:image/svg+xml,%3csvg%20fill='%23fff'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M7.41%207.84%2012%2012.42l4.59-4.58L18%209.25l-6%206-6-6z'/%3e%3cpath%20d='M0-.75h24v24H0z'%20fill='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;margin-left:auto;transform:rotate(-90deg);transition:transform .4s ease}.details:not(.details:has(.details__summary+*)){pointer-events:none}.details:not(.details:has(.details__summary+*)) .details__summary{padding-top:25px}.details__summary{position:relative;display:flex;align-items:center;column-gap:14px;padding:48px 30px 30px 22px}.details__summary::-webkit-details-marker{display:none}@media (hover: hover){.details__summary{cursor:pointer}}.details__image{display:flex;align-items:center;justify-content:center;width:30px;aspect-ratio:1;background-color:#fff;border-radius:50%}.details__image img{display:block;width:20px;aspect-ratio:1;z-index:10}.details__image:before{content:"";display:block;position:absolute;width:2px;height:100%;background-color:#fff;top:0;left:36px}.details[open]:has(.details__summary+*) .details__image:before{height:50%}.details[open]:has(.details__summary+*) .details__summary:after{transform:rotate(0)}.details__list{display:flex;flex-direction:column;row-gap:25px;position:relative;padding:40px 32px;margin:0;list-style:none;background-color:#5f5180}.details__list:before{content:"";display:block;width:2px;height:100%;background-color:#ffffff4d;position:absolute;top:0;bottom:0;left:36px}.details__list-item{display:flex;align-items:center;column-gap:24px;position:relative;z-index:10}.details__list-item:before{content:"";display:block;width:10px;aspect-ratio:1;background-color:#fff;border-radius:50%;flex-shrink:0;outline:#5f5180 solid 8px}.details__link{color:#fff9;text-decoration:none;transition:color .2s ease}@media (hover: hover){.details__link:hover{color:#fff}}