@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:400;src:url(/expenses-chart-component/assets/dm-sans-v17-latin-regular-CW0RaeGs.woff2) format("woff2"),url(/expenses-chart-component/assets/dm-sans-v17-latin-regular-Cg2WDe3-.ttf) format("truetype")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:700;src:url(/expenses-chart-component/assets/dm-sans-v17-latin-700-DvUfVpUG.woff2) format("woff2"),url(/expenses-chart-component/assets/dm-sans-v17-latin-700-Bgq5UcTI.ttf) format("truetype")}:root{--color-red-300:#ec775f;--color-cyan-100:#76b5bc;--color-brown-300:#93867b;--color-brown-700:#382314;--color-cream-100:#fffaf5;--color-cream-300:#f8e9dd;--font-primary:"DM Sans",sans-serif;--font-normal:400;--font-bold:700;--leading-none:1;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.125rem;--text-lg:1.5rem;--text-2lg:1.875rem;--text-xl:2rem;--text-2xl:3rem;--rounded-full:9999px;--rounded-xsm:.25rem;--rounded-sm:.625rem;--rounded-xl:1.25rem;--focus-outline-color:var(--color-brown-700);--focus-outline-width:2px;--focus-outline-offset:4px;--focus-outline-style:dashed}*,:after,:before{box-sizing:border-box;margin:0}body{background-color:#f8e9dd;background-color:var(--color-cream-300);font-family:DM Sans,sans-serif;font-family:var(--font-primary);font-size:1rem;font-size:var(--text-base);font-weight:400;font-weight:var(--font-normal);line-height:1;line-height:var(--leading-none);-webkit-font-smoothing:antialiased}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{word-wrap:break-word}strong{line-height:1;line-height:var(--leading-none)}@supports selector(:focus-visible){a:focus,button:focus{outline:none}a:focus-visible,button:focus-visible{outline-color:#382314;outline-color:var(--focus-outline-color);outline-offset:4px;outline-offset:var(--focus-outline-offset);outline-style:dashed;outline-style:var(--focus-outline-style);outline-width:2px;outline-width:var(--focus-outline-width)}}.tutorial{background-color:#f8e9dd;background-color:var(--color-cream-300);border:1px solid #382314;border:1px solid var(--color-brown-700);border-radius:.625rem;border-radius:var(--rounded-sm);box-shadow:0 16px 24px 8px #3823141a;color:#382314;color:var(--color-brown-700);font-size:.75rem;font-size:var(--text-xs);left:0;line-height:1rem;max-width:20rem;padding:1rem;position:absolute;top:90%;width:100%}.tutorial__title{margin-bottom:.625rem}.tutorial__close-btn{background-color:#382314;background-color:var(--color-brown-700);border:none;border-radius:.625rem;border-radius:var(--rounded-sm);color:#fffaf5;color:var(--color-cream-100);cursor:pointer;font-size:.75rem;font-size:var(--text-xs);margin-top:.75rem;padding:.5rem .75rem}.bar-chart{position:relative}.bar-chart__title{border-radius:.625rem;border-radius:var(--rounded-sm);color:#382314;color:var(--color-brown-700);font-size:1.5rem;font-size:var(--text-lg);letter-spacing:-.005em;line-height:2rem;text-align:left}.bar-chart__grid{border-bottom:2px solid #f8e9dd;border-bottom:2px solid var(--color-cream-300);padding-bottom:1.625rem;padding-top:3.1875rem}.bar-chart__row{grid-gap:clamp(.75rem,1vw + .5rem,1.0625rem);display:grid;gap:clamp(.75rem,1vw + .5rem,1.0625rem);grid-template-columns:repeat(7,1fr)}.bar-chart__cell{align-items:center;display:flex;flex-direction:column;outline:0}.bar-chart__label{border-radius:.25rem;font-size:.75rem;font-size:var(--text-xs);letter-spacing:-.01em}.bar-chart__track{align-items:end;border-radius:.25rem;border-radius:var(--rounded-xsm);display:flex;height:100%;margin-bottom:.8125rem;width:100%}.bar-chart__fill{position:relative}.bar-chart__fill,.bar-chart__fill-value{border-radius:inherit;display:block;width:100%}.bar-chart__fill-value{background-color:#ec775f;background-color:var(--color-red-300);cursor:pointer;transition:opacity .2s ease}.bar-chart__fill-value[highest]{background-color:#76b5bc;background-color:var(--color-cyan-100)}.bar-chart__fill-tooltip{background-color:#382314;background-color:var(--color-brown-700);border-radius:.25rem;border-radius:var(--rounded-xsm);bottom:calc(100% + .5rem);color:#fffaf5;color:var(--color-cream-100);display:none;font-weight:700;font-weight:var(--font-bold);left:50%;padding:.6875rem .5rem .6875rem .5625rem;pointer-events:none;position:absolute;transform:translate(-50%);z-index:999}.bar-chart__cell:focus .bar-chart__fill{outline:2px dashed #382314;outline:2px dashed var(--color-brown-700);outline-offset:4px}.bar-chart__cell:focus .bar-chart__fill-tooltip{display:block}.expense{width:min(100vw,33.75rem)}.expense__header{align-items:center;background-color:#ec775f;background-color:var(--color-red-300);border-radius:.625rem;border-radius:var(--rounded-sm);color:#fffaf5;color:var(--color-cream-100);display:flex;justify-content:space-between;margin-bottom:1rem;padding:1.375rem 1.5rem 1.375rem 1.25rem}.expense__title{font-size:1.5rem;font-size:var(--text-lg);font-weight:400;font-weight:var(--font-normal)}.expense__title--text{display:block;font-size:1rem;font-size:var(--text-base);letter-spacing:-.03em;margin-bottom:.625rem}.expense__balance{display:block}.expense__logo{max-height:2.5rem}.expense__content{background-color:#fffaf5;background-color:var(--color-cream-100);border-radius:.625rem;border-radius:var(--rounded-sm);color:#93867b;color:var(--color-brown-300);padding:1.5rem 1.25rem 1.625rem}.expense__summary{display:flex;justify-content:space-between;padding-top:1.625rem}.expense__increase--text{display:block;letter-spacing:-.02em;margin-bottom:.6875rem}.expense__increase--value{color:#382314;color:var(--color-brown-700);font-size:1.875rem;font-size:var(--text-2lg)}.expense__rate{align-items:end;display:flex;flex-direction:column;justify-content:end;letter-spacing:-.03em}.expense__rate--text{letter-spacing:-.025em}.expense__rate--value{color:#382314;color:var(--color-brown-700);margin-bottom:.25rem}.sr-only{height:.0625rem;margin:-.0625rem;overflow:hidden;padding:0;position:absolute;width:.0625rem;clip:rect(0 0 0 0);border:0;white-space:nowrap}.main{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:1.5rem}@media (min-width:30em){.tutorial{font-size:.875rem;font-size:var(--text-sm)}.bar-chart__title{font-size:2rem;font-size:var(--text-xl);letter-spacing:.014em;line-height:2.625rem}.bar-chart__grid{padding-bottom:2.125rem;padding-top:4.125rem}.bar-chart__label{font-size:1.125rem;font-size:var(--text-md);letter-spacing:-.03em}.bar-chart__track{margin-bottom:.625rem}.expense__header{border-radius:1.25rem;border-radius:var(--rounded-xl);margin-bottom:1.5rem;padding:1.875rem 2.4375rem 1.875rem 2rem}.expense__title{font-size:2rem;font-size:var(--text-xl)}.expense__title--text{font-size:1.125rem;font-size:var(--text-md);letter-spacing:.005em;margin-bottom:.9375rem}.expense__balance{letter-spacing:.005em}.expense__logo{max-height:none}.expense__content{border-radius:1.25rem;border-radius:var(--rounded-xl);padding:2rem 2.5rem 2.9375rem}.expense__summary{padding-top:2.1875rem}.expense__increase--text{letter-spacing:.01em}.expense__increase--value{font-size:3rem;font-size:var(--text-2xl);letter-spacing:.02em}.expense__rate{padding-bottom:.25rem}.expense__rate--text{letter-spacing:0}.expense__rate--value{letter-spacing:0;margin-bottom:.375rem}}@media (hover:hover){.bar-chart__fill-value:hover{opacity:.5}.bar-chart__fill-value:hover+.bar-chart__fill-tooltip{display:block}}@media (prefers-reduced-motion:reduce){.bar-chart__fill-value{transition:none}}