.jn-jst-formatter {
	margin: 28px auto;
	border-top: 4px solid #176b67;
	background: #f3f8f7;
	padding: 24px;
}
.jn-jst-formatter__controls { display: flex; gap: 20px; }
.jn-jst-formatter__controls > div { flex: 1; }
.jn-jst-formatter label { display: block; margin-bottom: 7px; font-weight: 700; }
.jn-jst-formatter input { box-sizing: border-box; width: 100%; min-height: 48px; border: 1px solid #aebdbc; background: #fff; padding: 8px 12px; color: inherit; font: inherit; }
.jn-jst-formatter__lead { margin: 18px 0 12px; }
.jn-jst-formatter__results { border-top: 1px solid #cad6d5; }
.jn-jst-formatter__row { display: flex; align-items: stretch; border-bottom: 1px solid #cad6d5; background: #fff; }
.jn-jst-formatter__value { min-width: 0; flex: 1; padding: 12px 14px; }
.jn-jst-formatter__value span { display: block; margin-bottom: 3px; color: #526260; font-size: .82em; }
.jn-jst-formatter__value code { display: block; overflow-wrap: anywhere; background: transparent; padding: 0; color: #182524; font-family: inherit; font-size: 1em; }
.jn-jst-formatter button { width: 92px; border: 0; border-left: 1px solid #cad6d5; border-radius: 0; background: #176b67; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.jn-jst-formatter button:hover, .jn-jst-formatter button:focus-visible { background: #0f514e; }
.jn-jst-formatter__status { min-height: 1.5em; margin: 8px 0 0; color: #176b67; font-size: .85em; }
@media (max-width: 600px) {
	.jn-jst-formatter { margin-right: auto; margin-left: auto; padding: 20px; }
	.jn-jst-formatter__controls { display: block; }
	.jn-jst-formatter__controls > div + div { margin-top: 14px; }
	.jn-jst-formatter__row { align-items: center; }
	.jn-jst-formatter__value { padding: 11px 10px; }
	.jn-jst-formatter button { width: 76px; min-height: 64px; }
}