@layer{*,:after,:before{box-sizing:border-box;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font:inherit}html,body{height:100%}}@font-face{font-family:Space Mono;font-weight:700;font-display:swap;src:url(/tip_calculator_app/assets/space-mono-v17-latin-700-mWgeinG7.woff2)format("woff2")}@layer{:root{--green-400:#26c0ab;--green-900:#00494d;--grey-500:#5e7a7d;--grey-400:#7f9c9f;--grey-200:#c5e4e7;--grey-50:#f4fafb;--white:#fff;--scale-px:clamp(0px, (100vw - 375px) / (1440 - 375), 1px);--font-size:calc(18px + 4 * var(--scale-px));--line-height:1.3;--font-family:"Space Mono", Arial, Helvetica, sans-serif;--space-1:.25em;--space-2:.5em;--space-3:1em;--space-4:1.5em;--space-5:2em;--outline-grey:.125em solid var(--grey-200);--outline-green:.125em solid var(--green-400);--outline-red:.125em solid red}body{display:flex;align-items:center;flex-direction:column;font-weight:700;font-size:var(--font-size);line-height:var(--line-height);font-family:Space Mono,Arial,Helvetica,sans-serif;background-color:var(--grey-200)}header{margin-block-start:auto;padding-block:var(--space-5);text-align:center}main{margin-block-end:auto;flex-grow:1;padding:var(--space-4);width:100%;max-width:48em;border-radius:var(--space-3) var(--space-3) 0 0;background-color:var(--white)}@media (width>756px){main{flex-grow:0;border-radius:var(--space-3)}}form{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5)}form section{flex:1}@media (width>756px){form{flex-direction:row}}input[type=text]{outline:none;border:none;border-radius:var(--space-1);font:inherit;width:100%;height:100%;background-color:var(--grey-50);color:var(--grey-400)}input[type=text]:valid:focus{outline:var(--outline-green)}input[type=text]:invalid{outline:var(--outline-red)}fieldset{margin-block:var(--space-4);padding-block-start:var(--space-2);border:none}fieldset:has(input[name=tip]){display:grid;grid-template-columns:repeat(auto-fill,minmax(6em,1fr));gap:var(--space-2)}legend{display:flex;justify-content:space-between;align-items:center;width:100%;color:var(--green-900)}legend [role=tooltip]{font-size:.875em;color:red}label:has(input){position:relative;padding:var(--space-2);border-radius:var(--space-1);text-align:center;font-size:1.25em}label:has(input):hover{cursor:pointer}label:has(input):has(input[name=tip]){background-color:var(--green-900);color:var(--white)}label:has(input):has(input[name=tip]):hover:not(:has(input:checked)){background-color:var(--grey-200);color:var(--green-900)}label:has(input):has(input[name=tip]) input{position:absolute;opacity:0}label:has(input):has(input[name=custom-tip]){background-color:#0000;color:#0000}label:has(input):has(input[name=custom-tip]) input{position:absolute;left:0;top:0;text-align:center;color:var(--green-900)}label:has(input):has(input[name=custom-tip]) input::placeholder{color:var(--green-900)}label:has(input):has(input:checked){background-color:var(--green-400);color:var(--green-900)}label:has(input):has(input:focus){outline:var(--outline-green)}fieldset:not(:has(input:checked)) input[name=custom-tip]:valid:not(:placeholder-shown):not(:focus){background-color:var(--green-400);color:var(--green-900)}div:has(label+input){position:relative}div:has(label+input) label{position:absolute;top:50%;left:var(--space-3);transform:translateY(-50%)}div:has(label+input) input{padding:var(--space-2) var(--space-3);text-align:end}section[aria-label=result]{display:flex;flex-direction:column;padding:var(--space-4);gap:var(--space-5);border-radius:var(--space-3);background-color:var(--green-900)}section[aria-label=result] p{display:flex;justify-content:space-between;align-items:center;font-size:.875em;color:var(--white)}section[aria-label=result] strong{color:var(--green-400);font-size:calc(1.5em + 20 * var(--scale-px))}section[aria-label=result] small{color:var(--grey-400)}section[aria-label=result] button{margin-block-start:auto;padding:var(--space-2);width:100%;border:none;border-radius:var(--space-1);font:inherit;font-size:1.25em;background-color:var(--green-400);color:var(--green-900);cursor:pointer}section[aria-label=result] button:focus{outline:var(--outline-grey)}section[aria-label=result] button:hover{background-color:var(--grey-200)}}