.ebot-decoder,
.ebot-decoder * { box-sizing: border-box; font-family: inherit; }

.ebot-decoder {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	color: inherit;
}

.ebot-decoder__head { margin-bottom: 1.25rem; }
.ebot-decoder__eyebrow,
.ebot-decoder-result__eyebrow {
	margin: 0 0 .45rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	opacity: .62;
}
.ebot-decoder__head h2 { margin: 0 0 .5rem; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.1; }
.ebot-decoder__head p:last-child { margin: 0; max-width: 760px; opacity: .72; }

.ebot-decoder__form,
.ebot-decoder-result {
	border: 1px solid #e4e4e7;
	border-radius: 10px;
	background: #fff;
	padding: clamp(18px, 3vw, 28px);
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.ebot-decoder__field { display: grid; gap: .42rem; }
.ebot-decoder__field label { font-size: .88rem; font-weight: 600; }
.ebot-decoder__field small,
.ebot-decoder__privacy { font-size: .76rem; opacity: .62; }

.ebot-decoder input[type="text"],
.ebot-decoder input[type="url"],
.ebot-decoder input[type="file"],
.ebot-decoder select {
	width: 100%;
	min-height: 44px;
	border: 1px solid #d4d4d8;
	border-radius: 7px;
	background: #fff;
	color: #18181b;
	padding: .7rem .8rem;
	font: inherit;
	box-shadow: none;
}
.ebot-decoder input[type="file"] { padding: .55rem .65rem; }
.ebot-decoder input:focus,
.ebot-decoder select:focus { outline: 2px solid #18181b; outline-offset: 2px; border-color: #18181b; }

.ebot-decoder__or { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; font-size: .75rem; opacity: .55; }
.ebot-decoder__or::before,
.ebot-decoder__or::after { content: ""; height: 1px; flex: 1; background: #e4e4e7; }

.ebot-decoder__grid { display: grid; grid-template-columns: minmax(160px, .45fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }

.ebot-decoder__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 44px;
	margin-top: 1.1rem;
	border: 1px solid #18181b;
	border-radius: 7px;
	background: #18181b;
	color: #fff;
	padding: .72rem 1rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ebot-decoder__submit:hover { opacity: .9; }
.ebot-decoder__submit:disabled { cursor: wait; opacity: .62; }
.ebot-decoder__spinner { display: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: ebot-decoder-spin .7s linear infinite; }
.ebot-decoder.is-working .ebot-decoder__spinner { display: inline-block; }
@keyframes ebot-decoder-spin { to { transform: rotate(360deg); } }

.ebot-decoder__privacy { margin: .7rem 0 0; }
.ebot-decoder__status { min-height: 1.3em; margin: .9rem 0 0; font-size: .84rem; opacity: .7; }
.ebot-decoder__status.is-error { opacity: 1; font-weight: 600; }
.ebot-decoder__results { margin-top: 1.2rem; scroll-margin-top: 100px; }

.ebot-decoder-result__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #e4e4e7; }
.ebot-decoder-result__header h3 { margin: 0; font-size: 1.3rem; line-height: 1.25; }
.ebot-decoder-result__meta { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; }
.ebot-decoder-result__meta span,
.ebot-decoder-result__chips span,
.ebot-decoder-result__connections code {
	border: 1px solid #e4e4e7;
	border-radius: 999px;
	background: #fafafa;
	padding: .28rem .52rem;
	font-size: .74rem;
}
.ebot-decoder-result__question { margin-top: 1rem; padding: .75rem .9rem; border-left: 3px solid #18181b; background: #fafafa; }
.ebot-decoder-result__section { margin-top: 1.2rem; }
.ebot-decoder-result__section h4 { margin: 0 0 .55rem; font-size: .92rem; }
.ebot-decoder-result__section p { margin: 0; line-height: 1.65; }
.ebot-decoder-result__chips,
.ebot-decoder-result__connections { display: flex; flex-wrap: wrap; gap: .45rem; }
.ebot-decoder-result__connections code { border-radius: 6px; }
.ebot-decoder-result__passages,
.ebot-decoder-result__section ul { margin: 0; padding-left: 1.2rem; }
.ebot-decoder-result__passages li,
.ebot-decoder-result__section li { margin: .5rem 0; line-height: 1.55; }
.ebot-decoder-result__passage-id { display: inline-block; margin-right: .35rem; font-size: .72rem; font-weight: 700; opacity: .55; }
.ebot-decoder-result__references { overflow-wrap: anywhere; }
.ebot-decoder-result__hash { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid #e4e4e7; display: grid; gap: .35rem; }
.ebot-decoder-result__hash span { font-size: .72rem; font-weight: 700; opacity: .55; }
.ebot-decoder-result__hash code { overflow-wrap: anywhere; font-size: .75rem; }

@media (max-width: 680px) {
	.ebot-decoder__grid { grid-template-columns: 1fr; }
	.ebot-decoder-result__header { display: grid; }
	.ebot-decoder-result__meta { justify-content: flex-start; }
	.ebot-decoder__submit { width: 100%; }
}

.ebot-decoder-result__corpus { display: grid; gap: .55rem; }
.ebot-decoder-result__corpus a { display: grid; gap: .1rem; border: 1px solid #e4e4e7; border-radius: 7px; padding: .7rem .8rem; color: inherit; text-decoration: none; background: #fff; }
.ebot-decoder-result__corpus a:hover { background: #fafafa; }
.ebot-decoder-result__corpus span { font-size: .86rem; font-weight: 600; line-height: 1.35; }
.ebot-decoder-result__corpus small { font-size: .7rem; opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }