@import"https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap";*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}:root{--primary: 172, 67%, 45%;--text: 183, 100%, 15%;--neutral1: 186, 14%, 43%;--neutral2: 184, 14%, 56%;--neutral3: 185, 41%, 84%;--neutral4: 189, 41%, 97%;--white: 179, 41%, 99%;--error: 12, 67%, 55%;--padding: clamp(2rem, 4vw, 3.5rem) }body{font-family:Space Mono,monospace;font-size:1.5rem;padding-block:var(--padding);background-color:hsl(var(--neutral3))}.app{gap:4rem;place-items:center;margin-inline:auto;max-width:1000px}.container{padding:var(--padding);background-color:hsl(var(--white));border-radius:2rem;box-shadow:0 3rem 5rem hsl(var(--neutral2));display:grid;grid-auto-flow:row;gap:var(--padding)}.form{display:grid;gap:var(--padding)}.label-group{display:grid;gap:.2rem;text-align:left;position:relative}.label{color:hsl(var(--text));font-size:1rem}[type=number]{width:100%;font:inherit;text-align:right;background-color:hsl(var(--neutral3));border:none;padding:.2rem .5rem;border-radius:.3rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.icon{position:absolute;top:50%;left:.5rem;transform:translateY(-50%)}.label-wrapper{display:flex;justify-content:space-between;align-items:center}.error{color:hsl(var(--error));font-size:1rem}.number-wrapper{position:relative}.tip-section{display:grid;gap:.5rem}.tip-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem}.tip-btn{background-color:hsl(var(--text));color:hsl(var(--neutral4));border-radius:.4rem;padding:.5rem;cursor:pointer;font:inherit}.tip-btn:hover{background-color:hsl(var(--neutral3));color:hsl(var(--text))}.customtip-btn{cursor:pointer;text-align:center}.display{background-color:hsl(var(--text));padding:var(--padding);border-radius:1rem;display:flex;flex-direction:column;justify-content:space-between}.display-group{display:grid;gap:var(--padding)}.display-row{display:flex;justify-content:space-between;gap:var(--padding);align-items:center}.display-label{display:grid;justify-items:start}.header{color:hsl(var(--white));font-size:1rem}.unit{color:hsl(var(--white));font-size:.8rem}.display-amount{font-size:2rem;color:hsl(var(--primary))}.button{font:inherit;background-color:hsl(var(--primary));color:hsl(var(--text));border:none;border-radius:.2rem;padding:.3rem .8rem;text-transform:uppercase;font-size:1rem;cursor:pointer}.button[disabled]{opacity:.2;cursor:not-allowed}.button:not([disabled]):hover{background-color:#fff}@media screen and (min-width: 768px){.tip-wrapper{grid-template-columns:repeat(3,1fr)}.container{grid-auto-flow:column}}