.converter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.converter-card{min-width:0;padding:var(--space);border:1px solid var(--line);background:var(--surface)}
.converter-card label{display:block;margin:0 0 8px;font-weight:650}
.converter-card input{width:100%;min-width:0;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit}
.converter-card input:focus-visible,.converter-card button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.converter-card button{margin-top:12px;padding:11px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;font-weight:650;cursor:pointer}
.rgb-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.converter-result{min-height:1.5em;overflow-wrap:anywhere;font-weight:700}
@media(max-width:640px){.converter{grid-template-columns:1fr}.converter-card{padding:18px}}