.thpc {
  --thpc-ink: #12231f;
  --thpc-muted: #5b6b66;
  --thpc-line: #cfdad6;
  --thpc-surface: #ffffff;
  --thpc-tint: #eef4f2;
  --thpc-accent: #0b6e4f;
  --thpc-accent-ink: #ffffff;
  --thpc-error: #b3261e;
  max-width: 720px;
  margin: 1.5em auto;
  padding: 1.25rem;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--thpc-ink);
  background: var(--thpc-surface);
  border: 1px solid var(--thpc-line);
  border-radius: 12px;
}
.thpc *, .thpc *::before, .thpc *::after { box-sizing: border-box; }

.thpc__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.25rem; }
.thpc__tab {
  font: inherit; font-size: .9rem; line-height: 1.2;
  padding: .5rem .8rem; cursor: pointer;
  color: var(--thpc-ink); background: var(--thpc-tint);
  border: 1px solid var(--thpc-line); border-radius: 999px;
}
.thpc__tab[aria-selected="true"] { color: var(--thpc-accent-ink); background: var(--thpc-accent); border-color: var(--thpc-accent); }

.thpc__panel[hidden] { display: none; }
.thpc__sentence { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.15rem; }
.thpc__field {
  font: inherit; font-size: 1.1rem; width: 7.5em; padding: .55rem .7rem;
  color: var(--thpc-ink); background: var(--thpc-surface);
  border: 1px solid var(--thpc-line); border-radius: 8px;
}
.thpc__select { width: auto; }

.thpc__result {
  margin-top: 1.25rem; padding: 1rem 1.1rem;
  background: var(--thpc-tint); border-left: 4px solid var(--thpc-line); border-radius: 8px;
}
.thpc__result[data-state="ok"] { border-left-color: var(--thpc-accent); }
.thpc__result[data-state="error"] { border-left-color: var(--thpc-error); }
.thpc__big { font-size: 2.1rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.thpc__result[data-state="ok"] .thpc__big { color: var(--thpc-accent); }
.thpc__result[data-state="error"] .thpc__line { color: var(--thpc-error); }
.thpc__line { margin: .35rem 0 0; }
.thpc__how { margin: .35rem 0 0; font-size: .9rem; color: var(--thpc-muted); }
.thpc__how:empty { display: none; }

.thpc__actions { display: flex; gap: .5rem; margin-top: 1rem; }
.thpc__btn {
  font: inherit; font-size: .95rem; padding: .55rem 1rem; cursor: pointer;
  color: var(--thpc-ink); background: var(--thpc-surface);
  border: 1px solid var(--thpc-line); border-radius: 8px;
}
.thpc__btn--primary { color: var(--thpc-accent-ink); background: var(--thpc-accent); border-color: var(--thpc-accent); }

.thpc button:focus-visible, .thpc__field:focus-visible { outline: 3px solid var(--thpc-accent); outline-offset: 2px; }

@media (max-width: 480px) {
  .thpc { padding: 1rem; }
  .thpc__field { font-size: 1rem; width: 6.5em; }
  .thpc__big { font-size: 1.8rem; }
}