@import"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;500;600;700&display=swap";:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--color-green-900: hsl(183deg 100% 15%);--color-strong-cyan: hsl(172deg 67% 45%);--color-soft-cyan: hwb(172deg 67% 15%);--color-grey-500: hsl(186deg 14% 43%);--color-grey-400: hsl(184deg 14% 56%);--color-grey-200: hsl(185deg 41% 84%);--color-grey-50: hsl(189deg 47% 97%);--color-white: hsl(0deg 100% 100%);--color-blue: hsl(228deg 45% 44%);--color-error: hsl(13deg 70% 61%);--font-main: "Space Mono", monospace;--font-weight-main: 400}*{box-sizing:border-box}body{min-height:100vh;padding:0;margin:0;font-family:var(--font-main);font-weight:var(--font-weight-main);background-color:var(--color-grey-200)}input{font-family:var(--font-main)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.input-bill,.input-people{margin-block-start:.4rem;text-align:right;justify-content:center;border:2px solid transparent;font-family:var(--font-main);font-size:1.53rem;font-weight:600;letter-spacing:.005rem;border-radius:.2rem;outline:none;transition:border-color .2s;background-repeat:no-repeat;background-color:var(--color-grey-50);color:var(--color-grey-500)}.input-bill{padding-block:.25rem;padding-inline-end:clamp(.9rem,calc(.865rem + .15vw),1rem);background-image:url(/Tip-Calculator-App/icon-dollar.svg);background-position:1.05rem center}.input-people{padding-block:clamp(.19rem,calc(.186rem + .015vw),.2rem) .3rem;padding-inline-end:.97rem;width:100%;background-image:url(/Tip-Calculator-App/icon-person.svg);background-position:.95rem center}.input-bill:focus,.input-people:focus,.input-bill:hover,.input-people:hover{border-color:var(--color-strong-cyan);cursor:pointer}.input-error{border-color:var(--color-error)}.input-people.input-error{border:2px solid var(--color-error)}.input-people.input-error:focus{border-color:var(--color-error)}.main__space{display:flex;flex-direction:column;min-height:100vh;align-items:center;justify-content:flex-start}.space__title{margin:0;text-align:center;padding-block-start:clamp(2.45rem,calc(-.015rem + 10.516vw),9.45rem);padding-inline-start:.55rem;font-size:1.5305rem;font-weight:600;line-height:1.5;letter-spacing:.6rem;color:var(--color-green-900)}.items__space{display:flex;flex-direction:column;width:100%;min-width:20rem;flex-grow:1;margin-block-start:clamp(1.95rem,calc(.894rem + 4.507vw),4.95rem);padding-block:clamp(2rem,calc(2.068rem - .075vw),2.05rem) clamp(0rem,calc(-.704rem + 3.005vw),2rem);padding-inline:clamp(1.5rem,calc(.972rem + 2.254vw),3rem) clamp(1.5rem,calc(1.324rem + .751vw),2rem);gap:2rem;border-radius:1.5rem 1.5rem 0 0;background-color:var(--color-white)}.count__total{display:flex;flex-direction:column;padding-inline:clamp(0rem,calc(.676rem - .751vw),.5rem) clamp(.5rem,calc(-.046rem + 2.329vw),2.05rem)}.count__total-name{font-size:.95rem;letter-spacing:.03rem;font-weight:600;color:var(--color-grey-500)}.tip__select{margin:0;padding-block:clamp(2.05rem,calc(1.874rem + .751vw),2.55rem) 1.05rem;font-size:.95rem;font-weight:600;letter-spacing:.03rem;color:var(--color-grey-500)}.tip__selector{display:grid;grid-template-columns:1fr 1fr;gap:1rem .9rem}.tip__selector-btn,.tip__selector-btn-custom{display:flex;align-items:center;width:clamp(7.3rem,calc(9.801rem - 2.779vw),9.15rem);height:3rem;border-radius:.3rem;font-size:1.53rem;font-weight:600}.tip__selector-btn,.result__space-btn{justify-content:center}.tip__selector-btn{border:none;cursor:pointer;color:var(--color-grey-50);background-color:var(--color-green-900)}.tip__selector-btn.selected{background-color:var(--color-strong-cyan);color:var(--color-green-900)}.tip__selector-btn-custom{padding-inline-end:.85rem;border:2px solid transparent;outline:none;transition:border-color .2s;cursor:pointer;letter-spacing:-.03rem;text-align:right;color:var(--color-green-900);background-color:var(--color-grey-50)}.tip__selector-btn-custom:focus,.tip__selector-btn-custom:hover{border:2px solid var(--color-strong-cyan)}.count__people{padding-block-start:clamp(2.05rem,calc(1.874rem + .751vw),2.55rem)}.label-wrapper{display:flex;justify-content:space-between}.error-message{font-size:.95rem;letter-spacing:.03rem;color:var(--color-error);font-weight:700}.result__space{padding-inline:clamp(1.5rem,calc(1.165rem + 1.427vw),2.45rem) clamp(1.4rem,calc(1.013rem + 1.653vw),2.5rem);padding-block:clamp(2.55rem,calc(2.18rem + 1.577vw),3.6rem) 1.5rem;border-radius:1rem;background-color:var(--color-green-900)}.result__space-title,.result__space-subtitle,.result__space-price-total{margin:0}.result__space-tip,.result__space-result{display:grid;grid-template-columns:7rem auto}.result__space-result{margin-block-start:clamp(1.65rem,calc(1.041rem + 2.599vw),3.38rem)}.result__space-title{font-size:1rem;font-weight:600;line-height:1.3;letter-spacing:-.005rem;color:var(--color-white)}.result__space-subtitle{font-size:.85rem;letter-spacing:-.03rem;color:var(--color-grey-500)}.result__space-price-total{font-size:clamp(2.05rem,calc(1.698rem + 1.502vw),3.05rem);letter-spacing:-.065rem;line-height:1.2;text-align:right;color:var(--color-strong-cyan)}.result__space-btn{width:100%;margin-block-start:clamp(2.15rem,calc(-.051rem + 9.39vw),8.4rem);padding-block:clamp(.7rem,calc(.682rem + .075vw),.75rem) clamp(.5rem,calc(.568rem - .075vw),.55rem);border-radius:.3rem;font-size:1.16rem;letter-spacing:.05rem;font-weight:600;background-color:var(--color-strong-cyan);color:var(--color-green-900);cursor:pointer;border:none}.result__space-btn:hover{background-color:var(--color-soft-cyan)}.result__space-btn:disabled{background-color:var(--color-strong-cyan);opacity:.2;cursor:not-allowed}.attribution{font-size:.55rem;text-align:center;padding-block:clamp(.1rem,calc(-.041rem + .601vw),.5rem);width:100%;background-color:var(--color-white);color:var(--color-green-900)}.attribution-link{color:var(--color-blue)}@media (width >= 64rem){.items__space{display:grid;grid-template-columns:1fr 1fr;width:auto;max-width:57.5rem;height:auto;max-height:30.06rem;column-gap:1rem;border-radius:1.6rem}.input-bill,.input-people{letter-spacing:-.015rem}.count__total{padding-block-start:.85rem}.tip__selector{grid-template-columns:1fr 1fr 1fr}.result__space-price-total{line-height:.75;letter-spacing:-.085rem}.result__space-btn{letter-spacing:.065rem}.attribution{background-color:var(--color-grey-200)}}@media (prefers-reduced-motion: reduce){*{transition:none}}