@font-face{font-family:Space Mono;src:url(/tip_calculator_app/assets/SpaceMono-Bold-Dyp2aizM.ttf);font-weight:700}:root{--color-green-400:#26c0ab;--color-green-900:#00494d;--color-grey-500:#5e7a7d;--color-grey-400:#7f9c9f;--color-grey-200:#c5e4e7;--color-grey-50:#f4fafb;--color-white:#fff;--font-family:"Space Mono", monospace;--font-size-body:1rem;--font-size-input:1.5rem;--font-weight-bold:700;--border-radius:.3125rem;--card-padding:1.5rem}*,:before,:after{box-sizing:border-box;outline:none;margin:0;padding:0}body{font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-bold);background-color:var(--color-grey-200);color:var(--color-green-900);min-height:100vh;line-height:1.6}button{font-family:inherit;font-size:inherit;font-weight:inherit;cursor:pointer;background:0 0;border:none}input{font-family:inherit;font-size:inherit;font-weight:inherit;background:0 0;border:none}.calculator{flex-direction:column;align-items:center;max-width:69.375rem;margin:0 auto;padding:2rem 1rem;display:flex}@media (width>=90em){.calculator{padding:5rem 1rem}}.header{margin-bottom:2rem}.header__logo{display:block}.card{background-color:var(--color-white);border-radius:var(--border-radius);box-sizing:border-box;width:100%;max-width:23.4375rem;padding:1.5rem}@media (width>=90em){.card{max-width:100%;padding:var(--card-padding);grid-template-columns:1fr 1fr;gap:2rem;display:grid}}.form{padding:.5rem}@media (width>=90em){.form{padding:1rem}}.input-group{margin-bottom:1.5rem}.input-group__label{color:var(--color-grey-500);margin-bottom:.25rem;font-size:.8125rem;display:block}.input-group__wrapper{background-color:var(--color-grey-50);border:2px solid #0000;border-radius:.3125rem;flex-direction:row;justify-content:flex-start;align-items:center;padding:.375rem 1rem;transition:border-color .3s;display:flex;position:relative}.input-group__wrapper:focus-within{border-color:var(--color-green-400)}.input-group__wrapper--error{border-color:#e17457}.input-group__icon{flex-shrink:0}.input-group__input{text-align:right;width:100%;color:var(--color-green-900);font-size:var(--font-size-input);padding-left:.5rem}.input-group__input::placeholder{color:var(--color-grey-400)}.input-group__error{color:#e17457;margin-top:.25rem;font-size:.8125rem;display:none}.input-group__error--visible{display:block}.tip-buttons{margin-bottom:1.5rem}.tip-buttons__label{color:var(--color-grey-500);margin-bottom:.5rem;font-size:.8125rem;display:block}.tip-buttons__grid{grid-template-columns:repeat(2,1fr);gap:.625rem;display:grid}@media (width>=90em){.tip-buttons__grid{grid-template-columns:repeat(3,1fr)}}.tip-buttons__btn{background-color:var(--color-green-900);width:100%;color:var(--color-white);font-size:var(--font-size-input);border-radius:var(--border-radius);padding:.375rem 1rem;transition:background-color .3s}.tip-buttons__btn:hover,.tip-buttons__btn:focus-visible,.tip-buttons__btn--active{background-color:var(--color-green-400);color:var(--color-green-900)}.tip-buttons__btn--custom{background-color:var(--color-grey-50);color:var(--color-green-900);text-align:center;border-radius:var(--border-radius);width:100%;font-size:var(--font-size-input);padding:.375rem 1rem}.tip-buttons__btn--custom::placeholder{color:var(--color-grey-500)}.results{background-color:var(--color-green-900);border-radius:.9375rem;flex-direction:column;justify-content:space-between;padding:1.5rem;display:flex}@media (width>=90em){.results{padding:2.5rem}}.result-item{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.result-item:last-of-type{margin-bottom:1.5rem}@media (width>=90em){.result-item:last-of-type{margin-bottom:8rem}}.result-item__label{color:var(--color-white);font-size:.8125rem;line-height:1}.result-item__subtitle{color:var(--color-grey-400);font-size:.6875rem}.result-item__value{color:var(--color-green-400);font-size:2rem;font-weight:var(--font-weight-bold)}@media (width>=90em){.result-item__value{font-size:3rem}}.reset-btn{background-color:var(--color-green-400);width:100%;color:var(--color-green-900);text-transform:uppercase;border-radius:var(--border-radius);padding:.625rem;font-size:1.25rem;transition:background-color .3s}.reset-btn:hover,.reset-btn:focus-visible{background-color:var(--color-grey-200)}.reset-btn:disabled{opacity:.3;cursor:not-allowed}.attribution{text-align:center;color:var(--color-grey-500);padding:1em;font-size:.6875rem}.attribution a{color:var(--color-green-900);text-decoration:none}.attribution a:hover{text-decoration:underline}