.src-calculator{
 --t:#1f2937;
 --m:#6b7280;
 --b:#d1d5db;
 --h:#f1f5f9;
 max-width:100%;
 margin:24px auto;
 color:var(--t);
 font-family:inherit
}
.src-calculator *{box-sizing:border-box}
.src-card{background:#fff;padding:0}
.src-title{margin:0 0 34px;font-size:clamp(2rem,4vw,3.6rem);line-height:1.1;font-weight:600}
.src-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px}
.src-field-full{grid-column:1/-1}
.src-field label{display:block;margin-bottom:10px;font-size:1.15rem;font-weight:700}
.src-field input,.src-field select{
 width:100%;
 min-height:64px;
 border:1px solid var(--b);
 border-radius:10px;
 background:#fff;
 color:var(--t);
 font:inherit;
 font-size:1.1rem;
 padding:12px 28px;
 outline:none
}
.src-field input:focus,.src-field select:focus{border-color:#64748b;box-shadow:0 0 0 3px rgba(100,116,139,.12)}
.src-field input[readonly]{background:var(--h);font-weight:700}
.src-input-wrap{position:relative}
.src-suffix{position:absolute;right:28px;top:50%;transform:translateY(-50%);color:var(--m);pointer-events:none}
.src-total{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:24px;
 margin-top:42px;
 padding:38px 44px;
 border-radius:14px;
 background:var(--h);
 font-weight:800
}
.src-total span{font-size:1.15rem}
.src-returned{font-size:clamp(2rem,5vw,3.5rem);line-height:1}
.src-representation-note{margin:14px 0 0;color:var(--t);font-size:1rem}

/* Hide number input spinner arrows. */
.src-weight::-webkit-outer-spin-button,
.src-weight::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.src-weight[type="number"]{-moz-appearance:textfield;appearance:textfield}

@media(max-width:640px){
 .src-title{font-size:2rem}
 .src-grid{grid-template-columns:1fr}
 .src-field-full{grid-column:auto}
 .src-total{align-items:flex-start;flex-direction:column;padding:28px}
}