.tf-typmatchare {
  --tf-surface: #fff;
  --tf-ink: #18324a;
  --tf-line: #cbd5df;
  --tf-soft: #edf4fa;
  --tf-blue: #075e9c;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  gap: 20px;
  padding: clamp(16px, 4vw, 28px);
  background: var(--tf-surface);
  color: var(--tf-ink);
  border: 1px solid var(--tf-line);
  border-radius: 16px;
  font: inherit;
  line-height: 1.5;
}
.tf-typmatchare *, .tf-typmatchare *::before, .tf-typmatchare *::after { box-sizing: border-box; }
.tf-typmatchare > * { min-width: 0; max-width: 100%; margin: 0 !important; }
.tf-typmatchare .tf-typmatchare__results > section { min-width: 0; max-width: 100%; margin: 0; }
.tf-typmatchare .tf-typmatchare__summary, .tf-typmatchare .tf-typmatchare__note { overflow-wrap: anywhere; }
.tf-typmatchare [hidden] { display: none !important; }
.tf-typmatchare .tf-typmatchare__title { margin: 0 0 8px; font-size: 1.6em; color: var(--tf-ink); }
.tf-typmatchare p { margin: 0 0 20px; color: var(--tf-ink); }
.tf-typmatchare .tf-typmatchare__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.tf-typmatchare label { display: block; font-weight: 600; min-width: 0; }
.tf-typmatchare select {
  display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 48px; margin-top: 8px; padding: 10px;
  background: var(--tf-surface); color: var(--tf-ink); border: 1px solid var(--tf-line); border-radius: 8px;
  font-family: inherit; font-size: 16px; line-height: 1.5;
}
.tf-typmatchare select:focus-visible { outline: 3px solid var(--tf-blue); outline-offset: 3px; }
.tf-typmatchare .tf-typmatchare__summary { margin: 20px 0; padding: 12px; background: var(--tf-soft); border-radius: 8px; }
.tf-typmatchare .tf-typmatchare__results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 20px; }
.tf-typmatchare h3 { font-size: 1.05em; margin: 0 0 12px; color: var(--tf-ink); }
.tf-typmatchare ul { list-style: none; padding: 0; margin: 0; }
.tf-typmatchare li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--tf-line); }
.tf-typmatchare li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tf-typmatchare .tf-typmatchare__value { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.tf-typmatchare .tf-typmatchare__note { margin: 24px 0 0; font-size: .9em; }
@media (max-width: 700px) { .tf-typmatchare .tf-typmatchare__results { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .tf-typmatchare .tf-typmatchare__controls { grid-template-columns: 1fr; } }