.tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-block:0 48px}
.tool-card,.tool-form,.tool-result,.tool-explanation{border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.tool-card{display:flex;flex-direction:column;align-items:flex-start;color:var(--navy)}
.tool-card:hover,.tool-card:focus-visible{border-color:var(--blue)}
.tool-card>.icon{width:30px;height:30px;color:var(--blue);margin-block-end:12px}
.tool-card h2,.tool-result h2,.tool-explanation h2{font-size:20px}
.tool-card p{margin-block:6px 16px}
.tool-card span{margin-block-start:auto;color:var(--blue);font-weight:700}
.tool-page{margin-block-end:48px}
.tool-notice{background:var(--light);border-inline-start:3px solid var(--orange);padding:12px 16px;margin-block:0 16px}
.tool-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:start}
.tool-form{display:grid;gap:20px}
.tool-form>.button{justify-self:start}
.tool-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tool-field{min-inline-size:0;display:grid;gap:5px;align-content:start;font-weight:650}
.tool-field[hidden]{display:none}
.tool-field :is(input,select){inline-size:100%;min-inline-size:0;min-block-size:42px;font:inherit;font-weight:400;border:1px solid var(--line);border-radius:var(--radius);padding:8px;background:#fff;color:var(--navy)}
.tool-result{background:var(--light);overflow-wrap:anywhere}
.tool-result dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;margin:12px 0}
.tool-result dt{font-weight:650}
.tool-result dd{margin:0;text-align:end}
.tool-value{display:block;font-size:clamp(22px,4vw,34px);font-weight:750;margin-block:7px}
.tool-explanation{margin-block:18px}
.tool-explanation p{margin-block:7px 12px}
.tool-explanation a,.tool-links a{color:var(--blue);font-weight:650}
.tool-links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-block-start:20px}
@media(max-width:760px){
  .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-layout{grid-template-columns:1fr}
  .tool-card,.tool-form,.tool-result,.tool-explanation{padding:17px}
}
@media(max-width:480px){
  .tools-grid,.tool-fields{grid-template-columns:1fr}
  .tool-field :is(input,select){font-size:16px}
}