body {
    font-family: monospace;
    max-width: 640px;
    margin: 40px auto;
    padding: 0 20px;
    background: #fff;
    color: #111;
  }

  h1 { font-size: 1.2rem; margin-bottom: 24px; }

  label { display: block; font-size: 0.85rem; margin-bottom: 4px; }

  input, select {
    font-family: monospace;
    font-size: 1rem;
    padding: 6px 8px;
    border: 1px solid #999;
    background: #fff;
    color: #111;
  }

  input { width: 100%; box-sizing: border-box; }

  .row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-end;
  }

  .row > div { flex: 1; }

  #error {
    color: red;
    font-size: 0.82rem;
    margin-bottom: 12px;
    min-height: 1.2em;
  }

  #result-box {
    border: 1px solid #ccc;
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 1rem;
  }

  #result-box .label { font-size: 0.75rem; color: #666; }
  #result-box .value { font-size: 1.4rem; font-weight: bold; margin-top: 2px; }

  #steps-box { font-size: 0.82rem; line-height: 1.9; }

  #steps-box h2 { font-size: 0.85rem; margin-bottom: 8px; font-weight: bold; }

  .step { margin-bottom: 10px; }
  .step-title { font-weight: bold; margin-bottom: 4px; }

  table { border-collapse: collapse; margin: 6px 0; }
  td, th { padding: 2px 10px 2px 0; text-align: left; font-family: monospace; font-size: 0.82rem; }
  th { border-bottom: 1px solid #ccc; color: #555; }

  .eq { color: #555; }
  .sum-line { border-top: 1px solid #aaa; padding-top: 2px; font-weight: bold; }