/* Human typing lab */
.ht-sentence { font: 600 16px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--fill); border-radius: 8px; padding: 10px 14px; margin: 0 0 10px; overflow-wrap: anywhere; }
textarea { width: 100%; font: 16px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); color: var(--text); resize: vertical; }
#scripted { color: var(--muted); }
.ht-results { margin-top: 8px; }
.ht-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.ht-col { border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-width: 0; }
.ht-col .big { font-size: clamp(22px, 3vw, 30px); }
.ht-col .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ht-bars { display: flex; align-items: flex-end; gap: 2px; height: 90px; margin-top: 16px; border-bottom: 1px solid var(--line); overflow: hidden; }
.ht-bar { flex: 1 1 0; min-width: 2px; background: var(--forest); border-radius: 2px 2px 0 0; opacity: .8; }
.ht-reference { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 4px; }
.ht-reference h2 { margin-top: 20px; font-size: 17px; }
.ht-facts { padding-left: 18px; font-size: 14px; display: grid; gap: 6px; }
.ht-why { font-size: 14px; border-left: 4px solid var(--forest); background: var(--fill); border-radius: 10px; padding: 10px 14px; }
@media (max-width: 860px) { .ht-compare { grid-template-columns: 1fr; } }