.lead { color: var(--text-2); max-width: 62ch; line-height: 1.55; }
.ut-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 16px; margin: 14px 0; }
.ut-card h2 { margin: 0 0 12px; font-size: 1.05rem; }
.ut-card textarea { min-height: 90px; font-family: var(--mono); font-size: .84rem; }
.ut-opts { margin: 10px 0; gap: 14px; }
.out-head { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.ut-out { margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-family: var(--mono); font-size: .82rem; white-space: pre-wrap; word-break: break-all; min-height: 40px; }

.ut-params { display: grid; gap: 8px; margin: 10px 0; }
.ut-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center; }
.ut-row input { font-family: var(--mono); font-size: .82rem; }

@media (max-width: 560px) { .ut-row { grid-template-columns: 1fr 1fr; } .ut-row [data-rm] { grid-column: 1 / -1; justify-self: end; } }