.cc { display: grid; gap: 18px; }
.cc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cc-row input { width: 120px; height: 60px; padding: 0 14px; font: 700 34px var(--display); color: var(--ink); background: var(--mist); border: 1.5px solid transparent; border-radius: 12px; }
.cc-row input:focus { outline: none; border-color: var(--ink); }
.cc-row select { min-height: 60px; padding: 0 14px; font: 600 17px var(--sans); color: var(--ink); background: var(--mist); border: 0; border-radius: 12px; max-width: 100%; }
.cc-row .of { font: 400 13px var(--mono); text-transform: uppercase; color: var(--slate); }
.cc-row b { font: 700 24px var(--display); }
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.results div { background: var(--ink); color: var(--paper); border-radius: 18px; padding: 14px 16px; }
.results b { display: block; font: 700 38px/1 var(--display); color: var(--mint); letter-spacing: -0.02em; }
.results span { font: 400 11px var(--mono); text-transform: uppercase; color: var(--smoke); }
.temp { display: grid; gap: 10px; background: var(--mist); border-radius: 22px; padding: 16px 18px; }
.temp .mono { color: var(--slate); }
.temp input { background: var(--paper); }
.note { margin: 0; color: var(--smoke); }