/**
 * xQuiz — Hand-drawn neo-brutalist design system: thick ink borders, hard flat
 * offset shadows (no blur), wobbly hand-drawn card edges with slight rotation,
 * a felt-tip marker display font, on a flat dot-grid background.
 * Palette kept from the original (mint = primary/correct, pear = progress/badge,
 * coral = wrong). Everything is scoped under .xq-quiz so the shortcode can land
 * in any theme.
 */

/* -------------------------------------------------------------------------
 * Self-hosted fonts (OFL). All three are variable fonts — one file per subset
 * covers the whole weight range used below.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/pjs-400-700-normal-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/pjs-400-700-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/jbm-400-500-normal-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url('../fonts/jbm-400-500-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Shantell Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/shs-400-800-normal-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Shantell Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/shs-400-800-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 9bold — display / heading */
@font-face {
	font-family: '9bold';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('/fonts/9BOLD.ttf') format('truetype');
}
/* Latinka — body text */
@font-face {
	font-family: 'Latinka';
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url('/fonts/Latinka-Thin.ttf') format('truetype');
}
@font-face {
	font-family: 'Latinka';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/fonts/Latinka-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Latinka';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/Latinka-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Latinka';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/fonts/Latinka-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Latinka';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/fonts/Latinka-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Latinka';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/fonts/Latinka-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Latinka';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/Latinka-Italic.ttf') format('truetype');
}

/* -------------------------------------------------------------------------
 * Tokens + container
 * ---------------------------------------------------------------------- */

.xq-quiz {
	--xq-cream: #eeebdf;
	--xq-paper: #f7f5ec;
	--xq-paper-3: #e5e1d3;
	--xq-rule: #d4d1c7;
	--xq-rule-2: #a49e92;
	--xq-ink: #12171b;
	--xq-olive: #6c6960;
	/* mint: primary accent (CTA, correct answer). -text is the deep, AA-safe
	   variant for small text/glyphs (checkmarks, stamp, focus rings) — the
	   light brand mint fails contrast used as foreground on paper. */
	--xq-orange: #66da85;
	--xq-orange-deep: #28bc5e;
	--xq-orange-soft: rgba(102, 218, 133, 0.18);
	--xq-orange-text: #007b2a;
	/* pear: progress fill, result badge. */
	--xq-mustard: #f6ce00;
	/* coral: wrong answer. -text is the AA-safe deep variant, same reasoning. */
	--xq-green: var(--xq-orange);
	--xq-red: #ff3a5d;
	--xq-red-text: #c80029;
	/* Neo-brutalist: thick ink border + hard flat offset shadows (no blur).
	   Most components read --xq-shadow-soft / -hover, so redefining them here
	   flips the whole UI to hard offsets in one place. */
	--xq-border-w: 3px;
	--xq-border: var(--xq-border-w) solid var(--xq-ink);
	/* Hand-drawn "sketched box" radii — asymmetric so edges look drawn, not milled.
	   Two variants alternate across cards so no two look identical. */
	--xq-wobble:   10px;
	--xq-wobble-2: 10px;
	--xq-shadow: rgba(18, 23, 27, 0.18);
	--xq-shadow-soft: 5px 5px 0 0 var(--xq-ink);
	--xq-shadow-soft-hover: 7px 7px 0 0 var(--xq-ink);
	--xq-font-display: '9bold', 'Shantell Sans', 'Plus Jakarta Sans', 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
	--xq-font-body:    'Latinka', 'Plus Jakarta Sans', 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
	--xq-font-label:   'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: 24px 16px;
	border: var(--xq-border);
	border-radius: var(--xq-wobble);
	box-shadow: var(--xq-shadow-soft);
	background: var(--xq-cream);
	color: var(--xq-ink);
	font-family: var(--xq-font-body);
	font-size: 1rem;
	line-height: 1.6;
	/* Inherited by all text: long unbroken tokens (URLs…) would otherwise be
	   clipped by the container's overflow: hidden. */
	overflow-wrap: anywhere;
}

.xq-quiz.xq-quiz--has-media {
	max-width: 1180px;
}

.xq-quiz.xq-quiz--has-media .xq-screen--start,
.xq-quiz.xq-quiz--has-media .xq-screen--result {
	max-width: 720px;
	margin-inline: auto;
}

.xq-quiz *,
.xq-quiz *::before,
.xq-quiz *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Background: flat page color + hand-drawn dot-grid doodle. (The WebGL canvas
 * is no longer enqueued — see includes/frontend.php — so the fallback layer is
 * always what shows. The .xq-bg / .xq-has-webgl rules below are kept harmless
 * in case the script is ever re-enabled.)
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.xq-quiz .xq-bg-fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Faint ink dot grid over the container's flat cream — "graph-paper" note pad. */
	background-image: radial-gradient(rgba(18, 23, 27, 0.10) 1.6px, transparent 1.7px);
	background-size: 22px 22px;
	background-position: 0 0;
}

/* Hidden while a WebGL background is running (script currently disabled). */
.xq-quiz.xq-has-webgl .xq-bg-fallback {
	display: none;
}

.xq-quiz .xq-grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.06;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.xq-quiz .xq-stage {
	position: relative;
	z-index: 2;
}

/* -------------------------------------------------------------------------
 * Screens
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-screen {
	text-align: center;
}

.xq-quiz .xq-screen--question {
	text-align: left;
}

/* -------------------------------------------------------------------------
 * Typography + shared pieces
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-title {
	margin: 8px 0 4px;
	font-family: var(--xq-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.15;
	color: var(--xq-ink);
}

.xq-quiz .xq-wave {
	display: block;
	width: min(240px, 60%);
	height: 24px;
	margin: 10px auto;
}

.xq-quiz .xq-arcs__svg {
	width: 120px;
	height: 60px;
	display: inline-block;
}

.xq-quiz .xq-intro {
	max-width: 52ch;
	margin: 8px auto;
}

.xq-quiz .xq-intro p {
	margin: 0 0 0.6em;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.xq-quiz .xq-question-count {
	margin: 4px 0 16px;
	font-family: var(--xq-font-label);
	font-weight: 500;
	color: var(--xq-olive);
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-size: 0.75rem;
}

/* -------------------------------------------------------------------------
 * Buttons — neo-brutalist: thick ink border, hard flat offset shadow, and a
 * press that slides the button into its shadow.
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	border: var(--xq-border);
	border-radius: 14px 22px 16px 20px;
	box-shadow: var(--xq-shadow-soft);
	font-family: var(--xq-font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transform: translate(0, 0);
	transition: box-shadow 0.14s ease, transform 0.14s ease, background-color 0.16s ease;
	-webkit-tap-highlight-color: transparent;
}

.xq-quiz .xq-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--xq-shadow-soft-hover);
}

.xq-quiz .xq-btn:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 var(--xq-ink);
	transition-duration: 70ms;
}

.xq-quiz .xq-btn:focus-visible {
	outline: 3px dashed var(--xq-orange-text);
	outline-offset: 3px;
}

.xq-quiz .xq-btn--primary {
	background: var(--xq-orange);
	color: var(--xq-ink);
}

.xq-quiz .xq-btn--secondary {
	background: var(--xq-paper);
	color: var(--xq-ink);
}

.xq-quiz .xq-btn--secondary:hover {
	background: var(--xq-paper-3);
}

/* -------------------------------------------------------------------------
 * Progress
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: min(620px, 100%);
	margin: 0 auto 28px;
}

.xq-quiz .xq-progress__count {
	font-family: var(--xq-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-size: 1.15rem;
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
}

.xq-quiz .xq-progress__flip {
	display: inline-block;
	overflow: hidden;
	color: var(--xq-orange-text);
}

.xq-quiz .xq-progress__num {
	display: inline-block;
}

.xq-quiz .xq-progress__total {
	color: var(--xq-olive);
}

.xq-quiz .xq-progress__bar {
	position: relative;
	width: 100%;
	height: 14px;
	border: 2.5px solid var(--xq-ink);
	border-radius: 7px;
	background: var(--xq-paper);
	overflow: hidden;
}

.xq-quiz .xq-progress__fill {
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: left center;
	background: var(--xq-orange);
}

/* -------------------------------------------------------------------------
 * Question
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-question-layout {
	display: flex;
	flex-direction: column;
}

.xq-quiz .xq-question-content {
	min-width: 0;
}

.xq-quiz .xq-question-media {
	margin: 0 0 16px;
}

.xq-quiz .xq-question-media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border: var(--xq-border);
	border-radius: var(--xq-wobble);
	box-shadow: var(--xq-shadow-soft);
	background: var(--xq-paper);
}

.xq-quiz .xq-question-text {
	margin: 0 0 18px;
	font-family: var(--xq-font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	line-height: 1.3;
	outline: none;
}

/* -------------------------------------------------------------------------
 * Answers
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-answers {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.xq-quiz .xq-answers__item {
	position: relative;
	margin: 0;
	padding: 0;
}

/* Each option is a bordered "pricing card": thick ink edge, hard offset shadow,
   wobbly hand-drawn corners that alternate per card. Cards sit straight/aligned
   (the hand-drawn feel comes from the wobbly radii, not tilt). */
.xq-quiz .xq-answer {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	padding: 14px 18px;
	border: var(--xq-border);
	border-radius: var(--xq-wobble);
	background: var(--xq-paper);
	box-shadow: var(--xq-shadow-soft);
	font-family: var(--xq-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--xq-ink);
	cursor: pointer;
	transition: box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Alternate the wobbly corner radius so no two cards look identically drawn. */
.xq-quiz .xq-answers__item:nth-child(2n + 1) .xq-answer { border-radius: var(--xq-wobble); }
.xq-quiz .xq-answers__item:nth-child(2n)     .xq-answer { border-radius: var(--xq-wobble-2); }

.xq-quiz .xq-answer:hover:not(:disabled) {
	transform: translate(-3px, -3px);
	box-shadow: var(--xq-shadow-soft-hover);
	background: var(--xq-paper-3);
}

.xq-quiz .xq-answer:active:not(:disabled) {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 0 var(--xq-ink);
	transition-duration: 80ms;
}

.xq-quiz .xq-answer:focus-visible {
	outline: 3px dashed var(--xq-orange-text);
	outline-offset: 3px;
}

.xq-quiz .xq-answer:disabled {
	cursor: default;
}

/* Letter tag reads like a pricing-card tier badge: pear fill, ink edge, mini shadow. */
.xq-quiz .xq-answer__letter {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2.5px solid var(--xq-ink);
	border-radius: 10px 14px 9px 13px;
	font-family: var(--xq-font-display);
	font-weight: 800;
	font-size: 0.95rem;
	background: var(--xq-mustard);
	color: var(--xq-ink);
	box-shadow: 2px 2px 0 0 var(--xq-ink);
}

/* Chosen + graded states — never color-only: stamp text + glyphs added too.
   The stamped answer reserves right padding so the absolutely-positioned
   stamp never covers the answer text. Ink text on the light mint/coral
   fills (not white) — the brand accents are too light for AA-safe white text. */
.xq-quiz .xq-answer--correct,
.xq-quiz .xq-answer--wrong,
.xq-quiz .xq-answer--reveal {
	padding-right: 132px;
}

/* Graded cards keep their ink border on the mint/coral fill, so the black
   outline stays crisp against the accent color. */
.xq-quiz .xq-answer--correct,
.xq-quiz .xq-answer--reveal {
	background: var(--xq-green);
	border-color: var(--xq-ink);
	color: var(--xq-ink);
}

.xq-quiz .xq-answer--correct .xq-answer__letter,
.xq-quiz .xq-answer--reveal .xq-answer__letter {
	background: #fff;
	color: var(--xq-ink);
	border-color: var(--xq-ink);
}

.xq-quiz .xq-answer--wrong {
	background: var(--xq-red);
	border-color: var(--xq-ink);
	color: var(--xq-ink);
}

.xq-quiz .xq-answer--wrong .xq-answer__letter {
	background: #fff;
	color: var(--xq-ink);
	border-color: var(--xq-ink);
}

/* The actual correct answer revealed after a wrong pick. */
.xq-quiz .xq-answer--reveal {
	outline: 3px dashed var(--xq-orange-text);
	outline-offset: 2px;
}

.xq-quiz .xq-answer--reveal .xq-answer__text::after {
	content: none;
}

.xq-quiz .xq-answer--wrong .xq-answer__text::after {
	content: ' ✗';
	font-weight: 700;
}

.xq-quiz .xq-answer--correct .xq-answer__text::after {
	content: ' ✓';
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Stamp (ĐÚNG! / SAI RỒI!) — small mono-label chip, Hum's `.chip` translated.
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-stamp {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%) rotate(-4deg);
	z-index: 3;
	display: inline-block;
	padding: 6px 14px;
	border: 2.5px solid var(--xq-ink);
	border-radius: 8px 12px 8px 12px;
	background: #fff;
	font-family: var(--xq-font-label);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.xq-quiz .xq-stamp--correct {
	color: var(--xq-orange-text);
	box-shadow: var(--xq-shadow-soft);
}

.xq-quiz .xq-stamp--wrong {
	color: var(--xq-red-text);
	box-shadow: var(--xq-shadow-soft);
}

/* Narrow screens: smaller stamp, smaller reserved gutter. */
@media (max-width: 479px) {
	.xq-quiz .xq-stamp {
		right: 8px;
		padding: 4px 10px;
		font-size: 0.7rem;
	}

	.xq-quiz .xq-answer--correct,
	.xq-quiz .xq-answer--wrong,
	.xq-quiz .xq-answer--reveal {
		padding-right: 104px;
	}
}

/* -------------------------------------------------------------------------
 * Feedback / explanation
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-explain {
	margin: 14px 0;
	padding: 14px 18px;
	border: var(--xq-border);
	border-left: 8px solid var(--xq-mustard);
	border-radius: 6px 16px 16px 6px;
	background: var(--xq-paper);
	box-shadow: var(--xq-shadow-soft);
	text-align: left;
}

.xq-quiz .xq-explain p {
	margin: 0 0 0.5em;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.xq-quiz .xq-explain p:last-child {
	margin-bottom: 0;
}

.xq-quiz .xq-feedback__actions {
	margin: 16px 0 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Result
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-result-heading {
	margin: 8px 0 4px;
	font-family: var(--xq-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-size: clamp(1.4rem, 3.5vw, 2rem);
	outline: none;
}

.xq-quiz .xq-score {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 190px;
	margin: 18px auto 8px;
}

.xq-quiz .xq-rays {
	position: absolute;
	inset: 0;
	display: block;
}

.xq-quiz .xq-rays__svg {
	width: 100%;
	height: 100%;
}

.xq-quiz .xq-score__circle {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	width: 130px;
	height: 130px;
	border: var(--xq-border);
	border-radius: 50%;
	background: var(--xq-paper);
	box-shadow: var(--xq-shadow-soft);
	font-family: var(--xq-font-display);
	font-weight: 800;
	align-items: center;
}

/* Score number stays ink (always readable) with a mint highlight wash
   behind it — Hum's own trick for its big numbers, avoids using the light
   mint as text color (fails contrast). */
.xq-quiz .xq-score__num {
	font-size: 3rem;
	color: var(--xq-ink);
	line-height: 1;
	display: inline-block;
	background-image: linear-gradient(var(--xq-orange-soft) 0 0);
	background-repeat: no-repeat;
	background-size: 100% 0.22em;
	background-position: 0 88%;
}

.xq-quiz .xq-score__total {
	font-size: 1.4rem;
	color: var(--xq-olive);
}

.xq-quiz .xq-badge {
	display: inline-block;
	margin: 10px auto 4px;
	padding: 8px 22px;
	border: var(--xq-border);
	border-radius: 10px 16px 10px 16px;
	background: var(--xq-mustard);
	color: var(--xq-ink);
	font-family: var(--xq-font-label);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transform: rotate(-3deg);
	box-shadow: var(--xq-shadow-soft);
}

.xq-quiz .xq-badge-message {
	max-width: 46ch;
	margin: 10px auto 16px;
	color: var(--xq-olive);
}

/* -------------------------------------------------------------------------
 * Utilities
 * ---------------------------------------------------------------------- */

.xq-quiz .xq-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (min-width: 480px) {
	.xq-quiz {
		padding: 32px 28px;
	}
}

@media (min-width: 768px) {
	.xq-quiz {
		padding: 44px 48px;
		border-radius: var(--xq-wobble);
	}

	.xq-quiz .xq-score {
		width: 220px;
		height: 220px;
	}

	.xq-quiz .xq-score__circle {
		width: 150px;
		height: 150px;
	}

}

@media (min-width: 960px) {
	/* Match the reference: question + answers on the left, illustration on the right. */
	.xq-quiz .xq-question-layout:has(.xq-question-media:not([hidden])) {
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
		grid-template-areas: 'content media';
		align-items: start;
		gap: 36px;
	}

	.xq-quiz .xq-question-layout:has(.xq-question-media:not([hidden])) .xq-question-media {
		grid-area: media;
		min-width: 0;
		margin: 0;
	}

	.xq-quiz .xq-question-layout:has(.xq-question-media:not([hidden])) .xq-question-content {
		grid-area: content;
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion: kill CSS transitions; JS collapses GSAP durations and
 * never boots the WebGL background.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.xq-quiz .xq-btn,
	.xq-quiz .xq-answer {
		transition: none;
	}

	.xq-quiz .xq-btn:hover,
	.xq-quiz .xq-btn:active {
		transform: none;
	}

	.xq-quiz .xq-answer:hover:not(:disabled),
	.xq-quiz .xq-answer:active:not(:disabled) {
		transform: none;
	}
}