:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, sans-serif;
  color: #241a14;
  background: #faf3e9;
  --accent: #9b360b;
  --border: #bdab98;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 2rem, 58rem); margin: 0 auto; padding: clamp(1.5rem, 5vw, 4rem) 0 2rem; }
header { text-align: center; margin-bottom: clamp(1.25rem, 4vw, 2.5rem); }
h1 { font-size: clamp(1.05rem, 3vw, 1.45rem); font-weight: 600; margin: 0; }
.converter { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; align-items: start; }
.card { border: 1px solid var(--border); border-radius: 1rem; padding: clamp(1rem, 3vw, 1.75rem); }
form { background: #fffaf3; display: grid; gap: .85rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .field > label { font-weight: 650; }
legend { padding: 0; margin-bottom: .35rem; }
.choices { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: .65rem; padding: 2px; }
.choices label { position: relative; cursor: pointer; }
.choices input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choices span { display: grid; min-height: 44px; place-items: center; border-radius: .5rem; padding: .25rem; text-align: center; overflow-wrap: anywhere; }
.choices input:checked + span, button { color: white; background: var(--accent); font-weight: 700; }
.field { display: grid; grid-template-columns: 1.15fr 1fr; gap: .5rem; align-items: center; }
.field select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: .6rem; padding: .55rem .7rem; background: #fff; color: inherit; font: inherit; }
.number { display: flex; align-items: center; border: 1px solid var(--border); border-radius: .6rem; background: #fff; }
.number input { width: 100%; min-width: 0; border: 0; border-radius: inherit; padding: .55rem .7rem; min-height: 44px; background: transparent; color: inherit; font: inherit; }
.number span { padding-right: .7rem; white-space: nowrap; }
button { border: 0; border-radius: .65rem; min-height: 48px; padding: .65rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #7e2c09; }
:focus-visible, .choices input:focus-visible + span { outline: 2px solid #241a14; outline-offset: 3px; }
.result { text-align: center; background: #ffe1c9; }
h2 { margin: 0 0 .75rem; font-size: clamp(1.15rem, 3vw, 1.4rem); }
.reading { color: var(--accent); font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; line-height: 1.1; margin: .25rem 0; }
.note { font-size: .95rem; }
details { margin-top: .5rem; }
summary { min-height: 44px; padding: .65rem 0; cursor: pointer; text-decoration: underline; color: #78300f; }
.method { text-align: left; line-height: 1.5; }
a { color: #78300f; }

@media (max-width: 43rem) {
  .converter { grid-template-columns: 1fr; }
}

@media (max-width: 22rem) {
  .field { grid-template-columns: 1fr; gap: .25rem; }
}