.recipe-math {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
}
.recipe-math .label { margin-bottom: 0.7rem; }
.recipe-equation { font-size: clamp(1.12rem, 3vw, 1.6rem); line-height: 1.55; font-weight: 600; }
.recipe-math .note { margin-top: 0.7rem; }
.portion-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.portion-fields label { display: grid; gap: 0.5rem; font-size: 0.88rem; line-height: 1.45; color: var(--ink-secondary); }
.portion-fields input { width: 100%; min-width: 0; min-height: 48px; padding: 0.7rem; background: var(--ground, #fff); color: var(--ink); border: 1px solid var(--ink-tertiary); border-radius: 8px; font: inherit; font-size: 1rem; }
.portion-fields input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.portion-fields.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portion-result { display: block; margin-top: 1.25rem; border-top: 1px solid var(--rule); padding-top: 1rem; font-size: 1.5rem; font-weight: 600; line-height: 1.45; }
.portion-reset { margin-top: 0.85rem; border: 0; background: transparent; color: var(--ink-secondary); padding: 0.5rem 0; text-decoration: underline; font: inherit; cursor: pointer; }
.guide-table { min-width: 510px; }
.guide-table caption { text-align: left; margin-bottom: 0.8rem; font-size: 0.88rem; color: var(--ink-secondary); }
.guide-table tfoot { font-weight: 600; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 560px) {
  .portion-fields, .portion-fields.four { grid-template-columns: 1fr; }
  .recipe-math { padding: 1.15rem; }
  .portion-result { font-size: 1.3rem; }
}