#tea-ratio {
  padding: clamp(16px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  scroll-margin-top: 24px;
}
#tea-ratio-form:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
#tea-ratio-form label { display: grid; gap: 8px; align-content: start; min-width: 0; font-weight: 700; }
#tea-ratio-form input, #tea-ratio-form select {
  width: 100%; min-width: 0; box-sizing: border-box; min-height: 46px; padding: 10px;
  color: #fff; background: #10190e; border: 1px solid var(--line); border-radius: 6px; font: inherit;
}
#tea-ratio-form input:focus-visible, #tea-ratio-form select:focus-visible, #tea-ratio-form button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
#tea-ratio-form button { min-height: 46px; padding: 12px 18px; color: #081007; background: var(--green); border: 0; border-radius: 8px; font: inherit; font-weight: 800; cursor: pointer; }
#tea-ratio-result { grid-column: 1 / -1; display: block; padding: 16px; border: 1px solid var(--line); border-radius: 6px; line-height: 1.6; }
@media(max-width:600px) { #tea-ratio-form:not([hidden]) { grid-template-columns: minmax(0, 1fr); } }