.calculator-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px clamp(16px, 2vw, 26px); }
.calculator-controls .keypad { flex: none; width: min(100%, 248px); }
.calculator-controls .keypad .button { aspect-ratio: 1; min-height: 0; padding: 0; font-size: 1rem; }
.keypad-zero { grid-column: 2; }
.calculator-guide { flex: 1 1 210px; min-width: 0; font-size: .85rem; line-height: 1.45; }
.calculator-guide h2 { margin-bottom: 8px; font-size: 1rem; }
.calculator-guide .hint-body { color: var(--muted); }
.calculator-example { white-space: nowrap; }
.calculator-articles .article-card { min-height: 0; padding: 14px 16px; gap: 6px; }

.fraction-work-grid .fraction-fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 8rem) minmax(0, 1fr);
}

.fraction-work-grid .fraction-fields, .fraction-actions {
  max-width: 38rem;
}

.fraction-work-grid .fraction-input input {
  max-width: calc(25ch + 22px);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

.fraction-result .result-value { font-size: clamp(1.32rem, 2.4vw, 2rem); }
.fraction-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.fraction-rules ul { margin: 0; padding-left: 20px; font-size: .92rem; }
.fraction-rules li + li { margin-top: 6px; }

@media (max-width: 500px) {
  .fraction-work-grid .fraction-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .fraction-work-grid .fraction-input input { font-size: 1rem; }
  .fraction-work-grid .fraction-operation { grid-column: auto; grid-row: auto; max-width: 15rem; }
  .fraction-actions { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .fraction-rules { justify-self: stretch; }
}