/* Self-contained: system fonts, inline everything — safe to iframe anywhere */
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f7faf9; color: #0d1f1a; line-height: 1.5;
    display: flex; justify-content: center; padding: 18px;
    -webkit-font-smoothing: antialiased;
  }
  .card {
    width: 100%; max-width: 460px; background: #fff; border: 1px solid #dde7e3;
    border-radius: 18px; padding: 24px; box-shadow: 0 8px 24px -12px rgba(13,31,26,.18);
  }
  h1 { font-size: 1.12rem; letter-spacing: -0.01em; line-height: 1.25; }
  h1 span { color: #047857; }
  .sub { color: #5b7069; font-size: .84rem; margin-top: 4px; }
  .row { margin-top: 20px; }
  .row label { display: flex; justify-content: space-between; font-weight: 600; font-size: .88rem; margin-bottom: 8px; }
  .row output { color: var(--good); }
  input[type="range"] { width: 100%; accent-color: #047857; height: 26px; }
  .out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
  .out > div { background: #f1f5f4; border-radius: 12px; padding: 12px 8px; text-align: center; }
  .out span { display: block; font-weight: 800; font-size: 1.06rem; letter-spacing: -0.01em; }
  .out .hl { background: rgba(4, 120, 87, .09); }
  .out .hl span { color: var(--good); }
  .out small { color: #5b7069; font-size: .72rem; }
  .cta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 20px; padding-top: 16px; border-top: 1px dashed #dde7e3; flex-wrap: wrap;
  }
  .cta > a {
    background: #047857; color: #fff; text-decoration: none; font-weight: 600;
    padding: 10px 16px; border-radius: 10px; font-size: .88rem; white-space: nowrap;
  }
  .cta > a:hover { background: var(--good); }
  .credit { color: #5b7069; font-size: .74rem; }
  .credit a { color: #047857; font-weight: 600; }
  .fine { color: #5b7069; font-size: .7rem; margin-top: 12px; }