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

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

.thpg__panel[hidden] { display: none; }
.thpg__form { display: flex; flex-direction: column; gap: .9rem; }
.thpg__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.thpg__field { display: flex; flex-direction: column; gap: .3rem; }
.thpg__label { font-size: .85rem; color: var(--thpg-muted); }
.thpg__input {
  font: inherit; font-size: 1rem; padding: .55rem .7rem;
  color: var(--thpg-ink); background: var(--thpg-surface);
  border: 1px solid var(--thpg-line); border-radius: 8px; width: 100%;
}
textarea.thpg__input { resize: vertical; min-height: 2.6em; }

.thpg__output {
  margin-top: 1.25rem; padding: 1rem 1.1rem;
  background: var(--thpg-tint); border-left: 4px solid var(--thpg-accent); border-radius: 8px;
}
.thpg__prompt { font-size: 1.02rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.thpg__prompt[data-empty="1"] { color: var(--thpg-muted); }

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

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

@media (max-width: 480px) {
  .thpg { padding: 1rem; }
  .thpg__row { grid-template-columns: 1fr; }
}