.site-header { display: flex; align-items: center; justify-content: space-between; }
.challenge-launch {
	margin: 0;
	padding: 12px 28px;
	border: 1px solid #ffd06f80;
	border-radius: 6px;
	background: #ffffff18;
	color: #fffaf1;
	font: inherit;
	cursor: pointer;
}
body:has(.robot-challenge[open], .human-confirmation[open]) { overflow: hidden; }
.robot-challenge {
	width: min(1194px, calc(100vw - 32px), calc((100dvh - 32px) * .94));
	max-height: calc(100dvh - 32px);
	padding: clamp(18px, 2.2vw, 31px);
	border: 2px solid #dce0e5;
	border-radius: 16px;
	background: #f7f8f9;
	color: #191d26;
	color-scheme: light;
	container-type: inline-size;
	box-shadow: 0 24px 100px #0006;
}
.robot-challenge::backdrop, .human-confirmation::backdrop { background: #0009; backdrop-filter: blur(5px); }
.challenge-header { display: flex; align-items: center; gap: 4.2%; margin: 1.4% 0 3.4%; }
.challenge-header > div { flex: 1; }
.challenge-header h2 { margin: 0 0 1.1cqw; font-size: 6.1cqw; font-weight: 800; line-height: 1.12; letter-spacing: -.08cqw; }
.challenge-header p { margin: 0; color: #59616f; font-size: 3.2cqw; line-height: 1.3; }
.artwork { position: relative; display: block; overflow: hidden; }
.artwork img { position: absolute; max-width: none; height: auto; pointer-events: none; }
.robot-art { width: 19.2%; aspect-ratio: 194 / 147; border-right: 2px solid #d9dde2; }
.robot-art img { width: calc(1254 / 194 * 100%); left: calc(85 / 194 * -100%); top: calc(75 / 147 * -100%); }
.challenge-form { padding: 2.6% 3.2%; border: 2px solid #eceef0; border-radius: 11px; background: #fff; font-size: 2.9cqw; }
.challenge-form fieldset { min-width: 0; margin: 0 0 3.2cqw; padding: 0; border: 0; }
.challenge-form legend { width: 100%; padding: 0; margin-bottom: 1.3cqw; line-height: 1.3; }
.equation-row, .transcription-row { display: flex; align-items: center; gap: 2.4%; margin-left: 3.5%; }
.equation { flex: 1; padding: 1.6cqw 1.8cqw; border-radius: 8px; background: #f0f1f3; text-align: center; white-space: nowrap; font-family: 'Courier New', monospace; font-size: 3cqw; }
.equation sup, .equation sub { font-size: 65%; }
.challenge-form input:not([type='checkbox']) { width: 31.5%; min-width: 0; padding: 1.9cqw 2cqw; border: 2px solid #bfc4cd; border-radius: 7px; background: #fff; color: #191d26; font: inherit; font-size: 2.65cqw; }
.challenge-form input::placeholder { color: #8b919c; opacity: 1; }
.image-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; margin: 0 3.5%; }
.image-tile { position: relative; cursor: pointer; border-radius: 4px; overflow: hidden; --crop-height: 151; --crop-width: 234; }
.image-tile:nth-child(4n+1) { --crop-width: 235; }
.image-tile:nth-child(4n+2) { --crop-width: 230; }
.image-tile:nth-child(4n+3) { --crop-width: 232; }
.image-tile:nth-child(n+5) { --crop-height: 154; }
.image-tile .artwork { width: 100%; aspect-ratio: var(--crop-width) / var(--crop-height); }
.image-tile img { width: calc(1254 / var(--crop-width) * 100%); left: calc(var(--crop-x) / var(--crop-width) * -100%); top: calc(var(--crop-y) / var(--crop-height) * -100%); }
.image-tile input { appearance: none; position: absolute; right: 3%; bottom: 4.2%; width: 18%; height: 27%; margin: 0; border: 2px solid #697782; border-radius: 5px; background: #fff; cursor: pointer; display: grid; place-items: center; }
.image-tile:nth-child(4n+2) input, .image-tile:nth-child(4n+3) input, .image-tile:nth-child(4n+4) input { right: 5%; }
.image-tile input:checked { background: #3e82da; border-color: #2763af; }
.image-tile input:checked::after { content: '✓'; color: #fff; font-size: 2.7cqw; font-weight: bold; }
.image-tile:has(:checked) { outline: 3px solid #3e82da; outline-offset: -3px; }
.binary-art { width: 49%; aspect-ratio: 497 / 90; border-radius: 7px; }
.binary-art img { width: calc(1254 / 497 * 100%); left: calc(138 / 497 * -100%); top: calc(923 / 90 * -100%); }
.transcription-row input:not([type='checkbox']) { flex: 1; }
.challenge-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 2.4cqw; border-top: 2px solid #e0e4e9; }
.challenge-footer button { font: inherit; font-size: 2.5cqw; cursor: pointer; }
.challenge-refresh { display: flex; align-items: center; gap: 2cqw; padding: 1cqw; border: 0; background: none; color: #59616f; }
.challenge-refresh svg { width: 3.8cqw; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.challenge-verify { width: 42%; padding: 2.5cqw 1cqw; border: 1px solid #347bd2; border-radius: 8px; color: #fff; background: #4084db; font-weight: bold !important; }
.challenge-verify:hover { background: #3273c6; }
.robot-challenge :focus-visible, .human-confirmation :focus-visible { outline: 3px solid #286bba; outline-offset: 3px; }
@media (max-width: 600px) {
	.robot-challenge { width: calc(100vw - 24px); padding: 18px; }
	.challenge-header { gap: 15px; margin-bottom: 22px; }
	.challenge-header h2 { font-size: 27px; }
	.challenge-header p { font-size: 15px; }
	.robot-art { width: 23%; }
	.challenge-form { padding: 16px 12px; font-size: 16px; }
	.challenge-form fieldset { margin-bottom: 24px; }
	.challenge-form legend { margin-bottom: 12px; }
	.equation-row, .transcription-row { flex-wrap: wrap; margin-left: 0; gap: 10px; }
	.equation { flex-basis: 100%; font-size: clamp(10px, 3vw, 15px); padding: 14px 5px; }
	.challenge-form input:not([type='checkbox']) { width: 100%; padding: 12px; font-size: 16px; }
	.image-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
	.image-tile input:checked::after { font-size: 20px; }
	.binary-art { width: 100%; }
	.challenge-footer { padding-top: 16px; gap: 10px; }
	.challenge-footer button { font-size: 15px; }
	.challenge-refresh { gap: 7px; padding: 0; }
	.challenge-refresh svg { width: 24px; }
	.challenge-verify { width: 60%; padding: 14px 8px; }
}

.human-confirmation {
	width: min(480px, calc(100vw - 32px));
	padding: 36px;
	border: 2px solid #dce0e5;
	border-radius: 16px;
	background: #f7f8f9;
	color: #191d26;
	color-scheme: light;
	text-align: center;
	box-shadow: 0 24px 100px #0006;
}
.human-confirmation h2 { margin: 0 0 14px; font-size: clamp(26px, 5vw, 34px); }
.human-confirmation p { margin: 0 0 28px; color: #59616f; font-size: 21px; line-height: 1.4; }
.human-proceed { display: inline-block; padding: 14px 36px; border-radius: 8px; background: #4084db; color: #fff; font-size: 18px; font-weight: bold; text-decoration: none; }
.human-proceed:hover { background: #3273c6; }