body{display:flex;flex-direction:column;max-width:100%;place-content:center;padding:0 0rem}.w-lg{margin:0 auto;width:64rem}#app{margin:0 auto;width:64rem;max-width:100%}.roboto{font-family:Roboto,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-variation-settings:"wdth" 100}:root{font-family:Roboto,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--foreground);background-color:var(--background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--primary: #0E1B4D;--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0)}.flex{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.inline{display:flex;align-items:center}.relative{width:100%;height:100%;position:relative}.flex-col{position:relative;width:100%;height:100%;display:flex;flex-direction:row;gap:8px}button{padding:10px 16px;border:1px solid #d1d5db;border-radius:16px;background-color:#fff;color:#374151;font-size:16px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}button:hover{background-color:#f3f4f6}button:active{background-color:#e5e7eb}button.selected{background-color:#d5453c;color:#fff}input{width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:18px;font-size:16px;color:#374151;background-color:#fff;transition:border-color .2s ease,box-shadow .2s ease}input:focus{outline:none;border-color:#6b7280;box-shadow:0 0 0 2px #6b728033}.card{background-color:#fff;border:1px solid #e5e7eb;border-radius:2rem;padding:8px 16px;box-shadow:0 2px 10px #0000000d;width:33%;max-width:100%;transition:box-shadow .2s ease,transform .2s ease;display:flex;flex-direction:column;align-items:center}.card:hover{box-shadow:0 4px 20px #00000014}.header{font-size:2rem;font-weight:600;color:#111827;margin-bottom:2px;margin-top:4px}.card p{text-align:left;font-size:14px;color:#6b7280;margin-bottom:12px;margin-top:0}.title{text-align:center;font-weight:700;font-size:3.2em;line-height:1.1;margin-bottom:2rem}.desc{max-width:50rem;margin:0 auto;color:var(--muted-foreground);font-size:.8rem}.title-desc{text-align:center;max-width:50rem;margin:0 auto;margin-bottom:2rem;color:var(--muted-foreground)}strong{font-size:1rem;margin:0}span{font-size:1rem;text-align:center}img{object-fit:contain}#error{font-size:1.2rem;margin:2rem 0rem;font-weight:700;color:#7d0600;animation:ping 1.5s ease-in-out infinite}@keyframes ping{75%,to{transform:scale(1.2);opacity:0}}.desc{justify-self:flex-end;margin-top:auto;padding-top:1.5rem;text-align:center}#plunger{position:absolute;height:80%;background-color:#f00a;z-index:-10;bottom:12%;left:14.8%}#result{padding:20px;border-radius:12px;text-align:center;min-width:300px;height:max-content}#result .header{margin-bottom:1rem}#result p{font-size:16px;padding:2px 4px;border-radius:4px;background-color:var(--muted);color:var(--foreground)}@media (max-width: 768px){body{margin-left:0;margin-right:0;width:100vw;overflow-x:hidden}#app{max-width:100%;width: 100% !important}.flex,.flex-col{flex-wrap:wrap;width:100%}img{max-width:100%;height:auto}.flex-col{width:100%;flex-wrap:wrap}.card{width:100%;min-width:100%;max-width:100%}.title{padding-left:1rem;padding-top:1rem;font-size:2rem}.desc{padding-left:1rem;max-width:90%;font-size:.8rem}.flex-col{flex-direction:column;align-items:center;padding:0;margin:0}#plunger{bottom:.6rem}.inline{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:80%;margin:auto}}

img#injection-img {
    position: relative !important;
    z-index: 10 !important;
}
#plunger{
    z-index: 1 !important;
}
.card img{
    height: 80px !important;
}
button:hover {
    background-color: white !important;
    color: #000 !important;
}

@media (max-width: 767px) {
    #plunger {
        height: 75% !important;
    }
}