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

.thwc__area {
  width: 100%; font: inherit; font-size: 1rem; line-height: 1.5;
  padding: .9rem 1rem; resize: vertical; min-height: 180px;
  color: var(--thwc-ink); background: var(--thwc-surface);
  border: 1px solid var(--thwc-line); border-radius: 8px;
}

.thwc__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin-top: 1rem; background: var(--thwc-line);
  border: 1px solid var(--thwc-line); border-radius: 8px; overflow: hidden;
}
.thwc__stat { padding: .85rem .6rem; text-align: center; background: var(--thwc-tint); }
.thwc__value { font-size: 1.4rem; font-weight: 700; color: var(--thwc-accent); line-height: 1.2; }
.thwc__label { margin-top: .2rem; font-size: .78rem; color: var(--thwc-muted); }

.thwc__keywords { margin-top: 1rem; }
.thwc__keywords[hidden] { display: none; }
.thwc__keywords-title { font-size: .85rem; color: var(--thwc-muted); margin-bottom: .4rem; }
.thwc__keywords-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.thwc__chip {
  font-size: .85rem; padding: .25rem .6rem;
  background: var(--thwc-tint); border: 1px solid var(--thwc-line); border-radius: 999px;
}

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

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

@media (max-width: 480px) {
  .thwc { padding: 1rem; }
  .thwc__stats { grid-template-columns: repeat(2, 1fr); }
}
