*,*:after,*:before{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:400;margin:0}@property --pGreen{syntax: "<percentage>"; inherits: true; initial-value: 0%;}@property --pBlue{syntax: "<percentage>"; inherits: true; initial-value: 0%;}@property --pOrange{syntax: "<percentage>"; inherits: true; initial-value: 0%;}body{margin:0;min-height:100dvh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:#fafafa;display:flex;align-items:center;justify-content:center;padding:15px}.card{max-width:450px;width:100%;display:flex;flex-direction:column;row-gap:60px;background-color:#444d80;border-radius:6px;padding-block:20px;box-shadow:3px 3px 5px #00000059}.card__inner{overflow-x:auto}.month-graph{min-width:100%;width:max-content;display:grid;column-gap:15px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding-inline:15px}.month-graph__item{display:flex;flex-direction:column;align-items:center;row-gap:10px}.month-graph__item:has(.month-graph__graphic:hover) .month-graph__title{color:#fff}.month-graph__item:has(.month-graph__title:hover) .month-graph__graphic{background-color:#5196d6}.month-graph__item--active{pointer-events:none}.month-graph__item--active .month-graph__title{color:#fff}.month-graph__item--active .month-graph__graphic{background-color:#5196d6}.month-graph__wrapper{width:100%;height:120px;display:flex;align-items:flex-end}.month-graph__graphic{width:20px;margin-inline:auto;border-radius:4px;background-color:#b4b8cc;transition-property:background-color;transition-duration:.15s;transition-timing-function:ease}@media (hover: hover){.month-graph__graphic{cursor:pointer}.month-graph__graphic:hover{background-color:#5196d6}}.month-graph__title{color:#b4b8cc;transition-property:color;transition-duration:.15s;transition-timing-function:ease}@media (hover: hover){.month-graph__title{cursor:pointer}.month-graph__title:hover{color:#fff}}.statistic{display:flex;gap:40px;padding-inline:20px;align-items:flex-start}.circle-graph{--pGreen: var(--g, 0%);--pBlue: var(--b, 0%);--pOrange: var(--o, 0%);position:relative;width:120px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0}.circle-graph:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background-image:conic-gradient(from -35deg,#64ca7a var(--pGreen),#5196d5 0 calc(var(--pBlue) + var(--pGreen)),#e7a03c 0 calc(var(--pBlue) + var(--pGreen) + var(--pOrange)),#925bb1 0);z-index:0;-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 55%,#000 0);mask-image:radial-gradient(circle at 50% 50%,transparent 55%,#000 0);transition-property:--pGreen,--pBlue,--pOrange;transition-duration:.4s;transition-timing-function:ease}.circle-graph>*{position:relative;z-index:1}.circle-graph__title,.circle-graph__price{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;max-width:60%}.info{display:flex;flex-direction:column;row-gap:15px;flex-grow:1}.info__row{display:flex;flex-wrap:wrap;column-gap:10px}.info__title,.info__value{font-weight:500}.info__title{color:#b3b3bc}.info__value{color:#fff}