.ha {
  --ha-ok: var(--tl-pos);
  --ha-warn: #b7791f;
  --ha-bad: var(--tl-neg);
}
.ha__in { display: flex; flex-direction: column; }
.ha__area { min-height: 96px; font-size: 17px; line-height: 1.5; }

.ha__chars { font-family: var(--tl-mono); font-size: 12px; }
.ha__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 0; font: 400 12.5px/1.4 var(--font-ui); color: var(--gk-grey); }
.ha__meta i { width: 3px; height: 3px; border-radius: 50%; background: #c9ccd3; }
.ha :is(.ha__chars, .ha__meta span).is-muted { color: var(--gk-grey); }
.ha :is(.ha__chars, .ha__meta span).is-ok { color: var(--ha-ok); }
.ha :is(.ha__chars, .ha__meta span).is-warn { color: var(--ha-warn); }
.ha :is(.ha__chars, .ha__meta span).is-bad { color: var(--ha-bad); }

.ha__actions { margin-top: 20px; }

.ha__more { display: grid; gap: 22px; margin-top: 24px; padding-top: 22px; border-top: 1px solid #f0f1f3; }
.ha__more[hidden], .ha__block[hidden] { display: none; }
.ha__block .tl-head { flex-wrap: wrap; margin-bottom: 12px; }

.ha__legend { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; }
.ha__key { display: inline-flex; align-items: center; gap: 5px; font: 400 12px/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--gk-soft); }
.ha__key i { width: 8px; height: 8px; border-radius: 2px; background: var(--ha-c); }
.ha__key.is-common i { background: #d5d8de; }
.ha__tokens {
  margin: 0; padding: 14px 16px;
  border-radius: 10px; background: var(--gk-tint);
  font: 400 17px/1.75 var(--font-ui); color: var(--ink-nav);
  overflow-wrap: anywhere;
}
.ha-tok { padding: 1px 3px; border-radius: 4px; }
.ha .is-power { --ha-c: var(--brand); }
.ha .is-emotional { --ha-c: #c026d3; }
.ha .is-uncommon { --ha-c: #0f9f7a; }
.ha-tok.is-power, .ha-tok.is-emotional, .ha-tok.is-uncommon {
  color: var(--ha-c);
  background: color-mix(in oklab, var(--ha-c) 10%, transparent);
}
.ha-tok.is-common { color: #8b909b; }

.ha__signals { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.ha__sig {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px 0 9px;
  border-radius: 999px; border: 1px solid var(--gk-line);
  font: 500 12.5px/1 var(--font-ui); color: var(--gk-grey);
}
.ha__sig svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ha__sig.is-off svg { color: #c2c5cc; }
.ha__sig.is-on { color: var(--tl-pos); border-color: rgb(21 128 61 / .25); background: rgb(70 183 106 / .07); }
.ha__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ha__tips { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.ha__tips li { display: flex; align-items: flex-start; gap: 10px; font: 400 13.5px/1.5 var(--font-ui); color: var(--ink-nav); text-wrap: pretty; }
.ha__tips svg { flex: none; width: 15px; height: 15px; margin-top: 3px; fill: none; stroke: var(--brand); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.ha__out { display: flex; flex-direction: column; }
.ha__out .tl-big small { margin-left: 2px; }
.ha__tiles { margin-top: auto; }
.ha__out .tl-band + .ha__tiles, .ha__out .tl-sub + .ha__tiles { margin-top: 24px; }
.ha__tiles .tl-tile__n { overflow-wrap: anywhere; }