/* Keep the site's shared colors, typography, header, cards and footer. */
.scientific { width: 720px; }
.scientific__keys { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.scientific__keys .key { min-width: 0; padding: 0.85rem 0.1rem; font-size: 1.08rem; }
.scientific__keys .key--fn { background: var(--key); color: var(--text); }
.scientific__keys .key--fn:hover { background: var(--key-hover); }
.scientific__keys .key--fn.is-selected { background: #dbeafe; color: var(--accent); }
.scientific__keys .key--op { background: #dbeafe; color: var(--accent); }
.scientific__keys .key--op:hover { background: #bfdbfe; }
.scientific__keys .key--equal { background: var(--accent); color: #fff; }
.scientific__keys .key--equal:hover { background: var(--accent-hover); }
.scientific__keys .key:focus-visible, .link-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.calculator__status { display: flex; justify-content: space-between; min-height: 1.4rem; margin-bottom: .35rem; color: var(--muted); font-size: .85rem; }
.calculator__hint { margin-top: .8rem; color: var(--muted); font-size: .8rem; }
.history__list li:focus-visible { outline: 2px solid var(--accent); }
@media (max-width: 720px) {
  .scientific { width: 100%; }
  .scientific__keys { gap: .3rem; }
  .scientific__keys .key { font-size: .9rem; padding: .75rem 0; }
}
@media (max-width: 380px) {
  .scientific { padding: .6rem; }
  .scientific__keys .key { font-size: .78rem; }
}