@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter/Inter-VariableFont_slnt,wght.ttf') format('truetype');
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--iq-ink: #17212b;
	--iq-muted: #52606d;
	--iq-paper: #fffefb;
	--iq-canvas: #eef3f7;
	--iq-brand: #17324d;
	--iq-accent: #c86726;
	--iq-focus: #0067c5;
	--iq-border: #c7d2dc;
}

* { box-sizing: border-box; }

body {
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: linear-gradient(150deg, #e8f0f5 0%, #f7f2e9 100%);
	color: var(--iq-ink);
	font: 1rem/1.65 'Inter', system-ui, sans-serif;
}

.iq-skip-link {
	position: fixed;
	top: 0;
	left: 1rem;
	z-index: 100;
	padding: .75rem 1rem;
	transform: translateY(-120%);
	background: #fff;
	color: #000;
	font-weight: 700;
}

.iq-skip-link:focus { transform: translateY(0); }

.iq-header {
	background: var(--iq-brand);
	color: #fff;
	box-shadow: 0 4px 18px rgba(23, 50, 77, .2);
}

.iq-header-inner {
	width: min(100% - 2rem, 72rem);
	min-height: 4.5rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.iq-brand,
.iq-header nav a {
	color: #fff;
	text-decoration: none;
}

.iq-brand {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	font-size: 1.2rem;
	font-weight: 800;
}

.iq-header nav { display: flex; gap: 1.25rem; }
.iq-header a:hover { color: #ffd8a8; }

.iq-main { flex: 1; padding: clamp(2rem, 5vw, 4.5rem) 1rem; }
.iq-shell { width: min(100%, 54rem); margin: 0 auto; }

.iq-panel {
	padding: clamp(1.35rem, 4vw, 3.25rem);
	border: 1px solid rgba(23, 50, 77, .12);
	border-radius: 1.25rem;
	background: var(--iq-paper);
	box-shadow: 0 18px 55px rgba(23, 50, 77, .1);
}

.iq-panel h1 {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 6vw, 3.25rem);
	line-height: 1.15;
	letter-spacing: -.035em;
}

.iq-panel h2 { margin-top: 2rem; font-size: 1.35rem; }
.iq-kicker { margin: 0 0 .5rem; color: var(--iq-accent); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.iq-lead { max-width: 46rem; color: var(--iq-muted); font-size: 1.16rem; }

.iq-notice,
.iq-resume,
.iq-disclaimer,
.iq-noscript {
	margin: 1.75rem 0;
	padding: 1rem 1.15rem;
	border-left: .3rem solid var(--iq-accent);
	background: #fff7ed;
}

.iq-notice h2,
.iq-resume h2 { margin-top: 0; }
.iq-notice ul { margin-bottom: 0; padding-left: 1.3rem; }

.iq-start-form fieldset,
.iq-question fieldset {
	min-width: 0;
	margin: 2rem 0 1.5rem;
	padding: 0;
	border: 0;
}

legend { margin-bottom: .65rem; font-size: 1.3rem; font-weight: 800; }

.iq-number-input {
	display: block;
	width: min(100%, 10rem);
	min-height: 3rem;
	margin-top: .65rem;
	padding: .55rem .75rem;
	border: 2px solid var(--iq-border);
	border-radius: .65rem;
	background: #fff;
	color: var(--iq-ink);
	font: inherit;
	font-size: 1.15rem;
}

.iq-choice {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	margin: .7rem 0;
	padding: 1rem 1.1rem;
	border: 2px solid var(--iq-border);
	border-radius: .8rem;
	background: #fff;
	cursor: pointer;
}

.iq-choice:hover { border-color: #748a9d; background: #f7fafc; }
.iq-choice:has(input:checked) { border-color: var(--iq-focus); background: #edf6ff; }
.iq-choice input { width: 1.35rem; height: 1.35rem; margin-top: .18rem; flex: 0 0 auto; }
.iq-choice span { display: block; }
.iq-choice small { display: block; margin-top: .15rem; color: var(--iq-muted); }

.iq-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: .75rem 1.2rem;
	border: 2px solid var(--iq-brand);
	border-radius: .65rem;
	background: var(--iq-brand);
	color: #fff;
	font: inherit;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

.iq-button:hover { background: #244f76; color: #fff; }
.iq-button-secondary { background: #fff; color: var(--iq-brand); }
.iq-button:disabled { opacity: .6; cursor: wait; }

.iq-progress-copy { margin-bottom: .45rem; font-weight: 800; }
.iq-progress { height: .7rem; overflow: hidden; border-radius: 999px; background: #dce5ec; }
.iq-progress span { display: block; height: 100%; background: var(--iq-accent); }

.iq-question-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	margin: 1.5rem 0;
	color: var(--iq-muted);
	font-weight: 700;
}

.iq-question h1 { max-width: 48rem; font-size: clamp(1.55rem, 4vw, 2.2rem); }
.iq-timer.is-warning { color: #8f3d00; }
.iq-answer-choice { font-size: 1.06rem; }

.iq-score {
	margin: 2rem 0;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	border-radius: 1rem;
	background: var(--iq-brand);
	color: #fff;
	text-align: center;
}

.iq-score-number { margin: 0; font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 900; line-height: 1; }
.iq-estimated-value { margin: 1rem 0; font-size: clamp(1.35rem, 4vw, 2rem); }
.iq-score h2 { margin: 1rem 0 0; color: #ffd8a8; }
.iq-disclaimer { border-color: #6b7280; background: #f3f4f6; }

.iq-table-wrap { overflow-x: auto; }
.iq-table-wrap table { width: 100%; border-collapse: collapse; }
.iq-table-wrap th,
.iq-table-wrap td { padding: .75rem; border-bottom: 1px solid var(--iq-border); text-align: left; }

.iq-review { margin: .75rem 0; border: 1px solid var(--iq-border); border-radius: .7rem; background: #fff; }
.iq-review summary { padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; }
.iq-review.is-correct summary strong { color: #176b3a; }
.iq-review.is-wrong summary strong { color: #9b2c2c; }
.iq-review-body { padding: 0 1rem 1rem; }
.iq-restart-form { margin-top: 2rem; }

.iq-flash { margin-bottom: 1rem; padding: 1rem; border-radius: .65rem; background: #e9f5ff; border: 1px solid #8cc8ee; }
.iq-flash-danger { background: #fff0f0; border-color: #e99; }
.iq-flash-warning { background: #fff8df; border-color: #e7c85d; }

.iq-footer { padding: 1.5rem 1rem; color: var(--iq-muted); text-align: center; }
.iq-footer p { margin: 0; }

:focus-visible { outline: 3px solid var(--iq-focus); outline-offset: 3px; }

@media (max-width: 35rem) {
	.iq-header-inner { min-height: 4rem; gap: 1rem; }
	.iq-header nav { gap: .75rem; font-size: .88rem; }
	.iq-review summary { display: block; }
	.iq-review summary strong { display: block; margin-top: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (prefers-contrast: more) {
	:root { --iq-border: #56616b; }
	.iq-panel { border-width: 2px; box-shadow: none; }
}