.function-machine { margin: 26px 0 18px; }
.fm-flow { display: grid; grid-template-columns: minmax(60px, .8fr) 20px minmax(150px, 1.6fr) 20px minmax(95px, 1fr); gap: 12px; align-items: center; }
.fm-input, .fm-body, .fm-result { box-sizing: border-box; min-width: 0; height: 64px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); text-align: center; }
.fm-input { width: 100%; font: 22px/1.3 var(--serif); }
.fm-arrow { color: var(--muted); font-size: 24px; text-align: center; }
.fm-body, .fm-result { display: flex; justify-content: center; align-items: center; }
.fm-rule { white-space: nowrap; font: 24px/1.3 var(--serif); }
.fm-result { overflow-wrap: anywhere; font: 22px/1.3 var(--serif); }
.function-machine[data-state="undefined"] output, .function-machine[data-state="invalid"] output { color: #8d4c32; }
.fm-input[aria-invalid="true"] { border-color: #b97f66; }
@media (max-width: 560px) {
  .fm-flow { grid-template-columns: minmax(44px, .8fr) 12px minmax(108px, 1.5fr) 12px minmax(76px, 1fr); gap: 4px; }
  .fm-input, .fm-body, .fm-result { height: 52px; padding: 6px; }
  .fm-input, .fm-result { font-size: 16px; }
  .fm-rule { font-size: 18px; }
  .fm-arrow { font-size: 20px; }
}