/* Scoped under .mi-kit so the kit can be embedded in any page. Inherits the host font. */
.mi-kit {
  --k-bg: #FAF9F6; --k-surface: #FFFFFF; --k-ink: #161817; --k-muted: #525856; --k-border: #E4E2DC;
  --k-teal: #0B7A66; --k-teal-dark: #07594A; --k-teal-soft: #EAF6F3; --k-teal-border: #B3DFD5; --k-bad: #A3402B;
  display: grid; gap: 24px; color: var(--k-ink); font: inherit; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  .mi-kit:not(.mi-kit-light) {
    --k-bg: #121413; --k-surface: #1A1D1C; --k-ink: #ECEDEB; --k-muted: #A3A9A6; --k-border: #2E3331;
    --k-teal: #3FBFA5; --k-teal-dark: #6FD3BF; --k-teal-soft: #13302A; --k-teal-border: #22574C; --k-bad: #E58A73;
  }
}
.mi-kit * { box-sizing: border-box; }
.mi-kit-card { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: 14px; padding: 24px; min-width: 0; }
.mi-kit h2 { margin: 0 0 16px; font-size: 1.35rem; letter-spacing: -0.01em; }
.mi-kit h3 { margin: 20px 0 6px; font-size: 1.02rem; }
.mi-kit p { margin: 0 0 8px; }
.mi-kit ol { margin: 6px 0 8px; padding-left: 1.3em; }
.mi-kit a { color: var(--k-teal-dark); }
.mi-kit-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 18px; }
.mi-kit-form label { display: grid; gap: 4px; align-content: end; font-size: 0.86rem; font-weight: 600; color: var(--k-muted); }
.mi-kit-form label[hidden] { display: none; }
.mi-kit input, .mi-kit select, .mi-kit textarea {
  font: inherit; font-size: 0.95rem; color: var(--k-ink); background: var(--k-bg); border: 1px solid var(--k-border);
  border-radius: 8px; padding: 9px 10px; width: 100%; min-width: 0;
}
.mi-kit input:focus-visible, .mi-kit select:focus-visible, .mi-kit textarea:focus-visible, .mi-kit button:focus-visible {
  outline: 2px solid var(--k-teal); outline-offset: 1px;
}
.mi-kit-form .mi-kit-check { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 10px; color: var(--k-ink); }
.mi-kit-check input { width: auto; }
.mi-kit-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.mi-kit-figures > div { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--k-border); border-radius: 10px; background: var(--k-bg); }
.mi-kit-figures strong { font-size: 1.35rem; letter-spacing: -0.01em; }
.mi-kit-figures .mi-kit-good { background: var(--k-teal-soft); border-color: var(--k-teal-border); }
.mi-kit-good strong { color: var(--k-teal-dark); }
.mi-kit-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--k-muted); }
.mi-kit-muted { color: var(--k-muted); font-size: 0.88rem; }
.mi-kit-small { color: var(--k-muted); font-size: 0.8rem; margin-top: 12px; }
.mi-kit-letter { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.84rem; line-height: 1.55; resize: vertical; }
.mi-kit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.mi-kit button {
  font: inherit; font-weight: 700; font-size: 0.92rem; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  background: var(--k-teal); color: #fff; border: 1px solid var(--k-teal);
}
.mi-kit button.mi-kit-secondary { background: transparent; color: var(--k-teal-dark); border-color: var(--k-teal-border); }
@media (max-width: 480px) { .mi-kit-card { padding: 18px 16px; } }