:root {
	--qod-ink: #252a31;
	--qod-muted: #68717c;
	--qod-border: #d9dee4;
	--qod-soft: #f6f8fa;
	--qod-blue: #245da8;
	--qod-teal: #157c78;
	--qod-coral: #bd4e43;
}

.qod-page {
	max-width: 900px;
	padding-top: 4.5em;
	padding-bottom: 5em;
}

.qod-app {
	color: var(--qod-ink);
	max-width: 760px;
	margin: 0 auto;
}

.qod-heading {
	border-bottom: 1px solid var(--qod-border);
	margin-bottom: 2.25em;
	padding-bottom: 1.4em;
}

.qod-heading h1 {
	font-size: 2.25em;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
}

.qod-date,
.qod-subject,
.qod-source {
	color: var(--qod-muted);
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0 0 0.65em;
	text-transform: uppercase;
}

.qod-subject {
	color: var(--qod-teal);
	margin-bottom: 1em;
}

.qod-status {
	color: var(--qod-muted);
	min-height: 2em;
}

.qod-app fieldset {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
}

.qod-app legend {
	color: var(--qod-ink);
	font-size: 1.28em;
	font-weight: 500;
	line-height: 1.55;
	margin-bottom: 1.4em;
	padding: 0;
	width: 100%;
}

.qod-choices {
	display: grid;
	gap: 0.7em;
	margin-bottom: 1.6em;
}

.qod-choice {
	position: relative;
}

.qod-choice input[type="radio"] + label {
	align-items: flex-start;
	background: #ffffff;
	border: 1px solid var(--qod-border);
	border-radius: 6px;
	display: flex;
	font-size: 1em;
	font-weight: 400;
	gap: 0.9em;
	line-height: 1.5;
	min-height: 3.6em;
	padding: 0.9em 1em;
	transition: border-color 160ms ease, background-color 160ms ease;
	width: 100%;
}

.qod-choice input[type="radio"] + label::before {
	display: none;
}

.qod-choice input[type="radio"]:focus + label {
	border-color: var(--qod-blue);
	box-shadow: 0 0 0 3px rgba(36, 93, 168, 0.16);
}

.qod-choice input[type="radio"]:checked + label {
	background: #edf4fc;
	border-color: var(--qod-blue);
	color: var(--qod-ink);
}

.qod-choice-letter {
	color: var(--qod-blue);
	flex: 0 0 1.35em;
	font-weight: 700;
}

.qod-choice.is-correct input[type="radio"] + label {
	background: #edf8f5;
	border-color: var(--qod-teal);
}

.qod-choice.is-incorrect input[type="radio"] + label {
	background: #fdf1ef;
	border-color: var(--qod-coral);
}

.qod-submit {
	margin-top: 0.2em;
}

.qod-submit:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.qod-result {
	border-left: 4px solid var(--qod-teal);
	margin-top: 2em;
	outline: 0;
	padding: 0.2em 0 0.2em 1.2em;
}

.qod-result.is-incorrect {
	border-left-color: var(--qod-coral);
}

.qod-result h2 {
	font-size: 1.1em;
	letter-spacing: 0;
	margin: 0 0 0.35em;
}

.qod-result p {
	margin: 0;
}

.qod-source {
	border-top: 1px solid var(--qod-border);
	font-size: 0.7em;
	letter-spacing: 0.04em;
	margin-top: 2.6em;
	padding-top: 1.2em;
	text-transform: none;
}

.qod-source a {
	color: inherit;
}

@media screen and (max-width: 736px) {
	.qod-page {
		padding-top: 2.7em;
		padding-bottom: 3.5em;
	}

	.qod-heading {
		margin-bottom: 1.8em;
	}

	.qod-heading h1 {
		font-size: 1.85em;
	}

	.qod-app legend {
		font-size: 1.12em;
	}

	.qod-choice input[type="radio"] + label {
		padding: 0.85em;
	}
}