@font-face { font-family: "Unbounded"; src: url("../assets/quiz/fonts/unbounded-cyrillic-latin.woff2") format("woff2"); font-style: normal; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../assets/quiz/fonts/ibmplexsans-cyrillic-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 700; font-display: swap; }
.quiz {
  --q: clamp(.7px, .0551572vw, 1px);
  --quiz-bg: #151714; --quiz-surface: #20221e;
  --quiz-white: #f3f0e8; --quiz-muted: #aaa99f;
  --quiz-gold: #b18a61; --quiz-hover: #c89e70; --quiz-line: rgba(243,240,232,.18);
  position: relative; isolation: isolate; min-height: calc(868 * var(--q));
  padding: calc(95 * var(--q)) 0 calc(60 * var(--q));
  overflow: hidden; background: var(--quiz-bg); color: var(--quiz-white);
  font-family: "IBM Plex Sans", sans-serif;
}
.quiz::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#0008,#000a 48%,#0007),linear-gradient(0deg,#0009,transparent 45%); pointer-events: none; }
.quiz__scene { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.quiz__scene img { width: 100%; height: 100%; object-fit: cover; }
.quiz__shell { width: 88%; max-width: 1557px; margin-inline: auto; }
.quiz__layout { display: grid; grid-template-columns: minmax(0,1.03fr) minmax(0,1fr); grid-template-rows: auto 1fr; grid-template-areas: "intro panel" "progress panel"; gap: 0 calc(50 * var(--q)); margin-left: calc(100 * var(--q)); }
.quiz__intro { grid-area: intro; padding-top: calc(21 * var(--q)); }
.quiz__eyebrow { display: flex; align-items: center; gap: calc(50 * var(--q)); margin: 0 0 calc(34 * var(--q)); color: var(--quiz-hover); font-size: calc(19 * var(--q)); line-height: 1.3; letter-spacing: calc(5.4 * var(--q)); text-transform: uppercase; }
.quiz__eyebrow::after { content: ""; width: calc(58 * var(--q)); height: 1px; background: var(--quiz-gold); }
.quiz__title { margin: 0; font-family: "Unbounded",sans-serif; font-size: calc(38 * var(--q)); font-weight: 400; line-height: 1.42; letter-spacing: 0; text-transform: uppercase; }
.quiz__title > span { display: block; }
.quiz__title strong { display: block; margin-top: 6px; color: var(--quiz-hover); font-size: 1.14em; font-weight: 500; }
.quiz__description { max-width: calc(590 * var(--q)); margin: calc(30 * var(--q)) 0 0; color: var(--quiz-muted); font-size: calc(25 * var(--q)); line-height: 1.38; }
.quiz__progress { grid-area: progress; padding-top: calc(38 * var(--q)); }
.quiz__step-label { margin: 0; font-size: calc(21 * var(--q)); line-height: 1.4; }
.quiz__steps { display: flex; width: calc(410 * var(--q)); max-width: 100%; margin: calc(22 * var(--q)) 0; padding: 0; list-style: none; }
.quiz__steps li { position: relative; display: flex; align-items: center; flex: 1; }
.quiz__steps li:last-child { flex: 0; }
.quiz__steps li:not(:last-child)::after { content: ""; flex: 1; height: 1px; margin-inline: 7px; background: #aaa99f70; }
.quiz__steps button { flex: 0 0 auto; width: max(40px,calc(48 * var(--q))); height: max(40px,calc(48 * var(--q))); padding: 0; border: 1px solid #aaa99f70; border-radius: 50%; background: #15171488; color: var(--quiz-muted); font: 400 max(14px,calc(20 * var(--q))) / 1 "IBM Plex Sans",sans-serif; }
.quiz__steps [aria-current="step"] { color: var(--quiz-white); border-color: var(--quiz-hover); background: #b18a6126; box-shadow: 0 0 24px #b18a611c; }
.quiz__steps .is-complete { border-color: var(--quiz-gold); color: var(--quiz-gold); }
.quiz__remaining { margin: 0; color: var(--quiz-muted); font-size: max(15px,calc(19 * var(--q))); line-height: 1.5; }
.quiz__panel { grid-area: panel; min-width: 0; min-height: calc(640 * var(--q)); padding: calc(40 * var(--q)); border: 1px solid #b18a6199; border-radius: calc(24 * var(--q)); background: linear-gradient(130deg,#151714f5,#10120ff5); box-shadow: 0 10px 50px #0003; }
.quiz__question { margin: 0 0 calc(26 * var(--q)); font: 400 calc(25 * var(--q)) / 1.45 "Unbounded",sans-serif; letter-spacing: 0; text-transform: uppercase; scroll-margin-top: 28px; }
.quiz__question:focus { outline: none; }
.quiz__hint { margin: -8px 0 20px; color: var(--quiz-muted); font-size: max(15px,calc(18 * var(--q))); line-height: 1.4; }
.quiz__answers { display: grid; gap: calc(14 * var(--q)); }
.quiz__answer { display: grid; grid-template-columns: calc(54 * var(--q)) minmax(0,1fr) 18px; align-items: center; gap: calc(27 * var(--q)); width: 100%; min-height: max(56px,calc(80 * var(--q))); padding: calc(14 * var(--q)) calc(25 * var(--q)); border: 1px solid var(--quiz-line); border-radius: calc(12 * var(--q)); background: #20221e99; color: var(--quiz-white); font: 400 max(18px,calc(25 * var(--q))) / 1.3 "IBM Plex Sans",sans-serif; text-align: left; transition: border-color 220ms, background-color 220ms, box-shadow 220ms; }
.quiz__answer svg { width: calc(48 * var(--q)); height: calc(48 * var(--q)); fill: none; stroke: var(--quiz-hover); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.quiz__answer i { position: relative; justify-self: center; width: 11px; height: 11px; border-right: 1.5px solid var(--quiz-hover); border-top: 1.5px solid var(--quiz-hover); transform: rotate(45deg); }
.quiz__answer[aria-pressed="true"] { border-color: var(--quiz-hover); background: #b18a611f; box-shadow: inset 3px 0 var(--quiz-gold); }
.quiz__answer[aria-pressed="true"] i { width: 18px; height: 18px; border: 1px solid var(--quiz-hover); border-radius: 50%; background: var(--quiz-gold); transform: none; }
.quiz__answer[aria-pressed="true"] i::after { content: ""; position: absolute; left: 5px; top: 3px; width: 5px; height: 8px; border-right: 1.5px solid #151714; border-bottom: 1.5px solid #151714; transform: rotate(45deg); }
.quiz__answers--compact .quiz__answer { min-height: max(56px,calc(67 * var(--q))); font-size: max(17px,calc(22 * var(--q))); }
.quiz__answers--multiple { grid-template-columns: repeat(2,minmax(0,1fr)); }
.quiz__answers--multiple .quiz__answer { grid-template-columns: minmax(0,1fr) 18px; padding: 15px 16px; min-height: 74px; gap: 10px; font-size: max(17px,calc(22 * var(--q))); }
.quiz__answers--multiple .quiz__answer svg { display: none; }
.quiz__answers--multiple .quiz__answer i { transform: none; width: 18px; height: 18px; border: 1px solid #aaa99f90; border-radius: 4px; }
.quiz__navigation { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: calc(22 * var(--q)); }
.quiz__back { min-height: 52px; padding: 8px 0; border: 0; background: none; color: var(--quiz-muted); font: 400 17px / 1.4 "IBM Plex Sans",sans-serif; }
.quiz__back::before { content: "←"; margin-right: 10px; }
.quiz__next { display: inline-flex; justify-content: space-between; align-items: center; gap: 40px; margin-left: auto; min-height: 52px; min-width: 155px; padding: 12px 24px; border: 1px solid var(--quiz-gold); border-radius: 8px; background: var(--quiz-gold); color: #151714; font: 500 18px / 1.4 "IBM Plex Sans",sans-serif; }
.quiz__next:disabled { background: #20221e; color: var(--quiz-muted); border-color: var(--quiz-line); cursor: not-allowed; }
.quiz button:enabled { cursor: pointer; }
.quiz button:disabled { -webkit-text-fill-color: currentColor; }
.quiz button:focus-visible, .quiz input:focus-visible { outline: 2px solid var(--quiz-hover); outline-offset: 4px; }
.quiz__footer { display: flex; align-items: flex-end; gap: calc(45 * var(--q)); margin-top: calc(40 * var(--q)); }
.quiz__footer-brand { flex: 0 0 auto; font-size: calc(22 * var(--q)); line-height: 1.5; letter-spacing: calc(7 * var(--q)); }
.quiz__footer-brand span { display: block; margin-top: 6px; font-size: calc(12 * var(--q)); letter-spacing: calc(4 * var(--q)); text-transform: uppercase; }
.quiz__footer-line { flex: 1; height: 1px; margin-bottom: 12px; background: var(--quiz-gold); }
.quiz__footer p { margin: 0 0 8px; color: var(--quiz-muted); font-size: calc(12 * var(--q)); letter-spacing: calc(4 * var(--q)); text-transform: uppercase; }
.quiz__mobile-brand, .quiz__step-label--mobile, .quiz__mobile-break { display: none; }
.quiz__symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.quiz__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quiz [hidden] { display: none !important; }
.quiz__no-script { color: var(--quiz-hover); font-size: 16px; line-height: 1.5; }
@media (hover:hover) and (pointer:fine) {
  .quiz__answer:hover { border-color: var(--quiz-hover); background-color: #b18a611a; box-shadow: 0 0 24px #b18a6112; }
  .quiz__steps button:enabled:hover { border-color: var(--quiz-hover); color: var(--quiz-white); }
  .quiz__next:enabled:hover { background: var(--quiz-hover); }
  .quiz__back:hover { color: var(--quiz-white); }
}
@media (min-width:1024px) and (max-width:1279px) {
  .quiz__shell { width: 92%; }
  .quiz__layout { margin-left: 0; gap: 26px; }
  .quiz__title { font-size: 29px; }
  .quiz__description { font-size: 19px; }
  .quiz__question { font-size: 19px; }
  .quiz__panel { padding: 26px; }
  .quiz__answer { gap: 18px; }
}
@media (max-width:1023px) {
  .quiz { --m: clamp(.56px,.10627vw,1px); padding: calc(165 * var(--m)) 0 calc(120 * var(--m)); min-height: calc(1672 * var(--m)); }
  .quiz::before { background: linear-gradient(180deg,#0004,transparent 40%,#0003); }
  .quiz__mobile-brand { display: block; position: absolute; top: calc(48 * var(--m)); left: 8.3%; color: var(--quiz-hover); font-size: calc(26 * var(--m)); letter-spacing: calc(12 * var(--m)); line-height: 1.4; }
  .quiz__mobile-brand span { display: block; margin-top: 4px; color: var(--quiz-white); font-size: max(8px,calc(10 * var(--m))); letter-spacing: calc(5 * var(--m)); text-transform: uppercase; }
  .quiz__shell { width: min(680px,calc(100% - 48px)); }
  .quiz__layout { display: flex; flex-direction: column; margin: 0; padding: calc(48 * var(--m)) clamp(18px,4.2vw,40px) calc(30 * var(--m)); border: 1px solid var(--quiz-gold); border-radius: calc(29 * var(--m)); background: linear-gradient(140deg,#151714fc,#10130ff7); box-shadow: 0 20px 70px #0006; }
  .quiz__progress { display: contents; }
  .quiz__steps { order: 0; align-self: center; width: 100%; max-width: 460px; margin: 0 0 calc(28 * var(--m)); }
  .quiz__steps button { width: clamp(34px,5.9vw,56px); height: clamp(40px,5.9vw,56px); font-size: clamp(14px,2.34vw,22px); }
  .quiz__steps li:not(:last-child)::after { margin-inline: clamp(3px,1vw,10px); }
  .quiz__intro { order: 1; padding: 0; text-align: center; }
  .quiz__eyebrow { display: block; margin: 0 0 20px; font-size: max(12px,calc(19 * var(--m))); letter-spacing: calc(6 * var(--m)); }
  .quiz__eyebrow::after { display: none; }
  .quiz__title { font-size: clamp(21px,4.8vw,42px); line-height: 1.4; letter-spacing: 0; }
  .quiz__title > span { display: inline; }
  .quiz__title strong { margin-top: 6px; font-size: 1.04em; }
  .quiz__mobile-break { display: initial; }
  .quiz__description { max-width: none; margin: 22px 0 26px; font-size: max(17px,calc(25 * var(--m))); line-height: 1.35; }
  .quiz__panel { order: 2; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .quiz__panel::before { content: ""; display: block; width: 64%; height: 1px; margin: 0 auto 22px; background: linear-gradient(90deg,transparent,var(--quiz-gold),transparent); }
  .quiz__step-label { display: none; }
  .quiz__step-label--mobile { display: block; margin-bottom: 16px; color: var(--quiz-hover); font-size: max(17px,calc(23 * var(--m))); text-align: center; }
  .quiz__question { font-size: clamp(17px,3.2vw,28px); line-height: 1.5; text-align: center; margin-bottom: 22px; letter-spacing: 0; }
  .quiz__hint { text-align: center; font-size: 15px; }
  .quiz__answers, .quiz__answers--multiple { grid-template-columns: 1fr; gap: 12px; }
  .quiz__answer { grid-template-columns: 34px minmax(0,1fr) 18px; gap: 15px; padding: 14px 17px; min-height: max(60px,calc(86 * var(--m))); border-radius: 9px; font-size: max(18px,calc(25 * var(--m))); }
  .quiz__answer svg { width: 32px; height: 32px; }
  .quiz__answer i { width: 9px; height: 9px; }
  .quiz__answers--multiple .quiz__answer { min-height: 56px; font-size: max(18px,calc(24 * var(--m))); }
  .quiz__answers--compact .quiz__answer { font-size: max(18px,calc(24 * var(--m))); min-height: 60px; }
  .quiz__navigation { margin-top: 20px; gap: 16px; }
  .quiz__next { min-width: 140px; min-height: 56px; }
  .quiz__remaining { order: 3; margin-top: 24px; font-size: max(15px,calc(21 * var(--m))); text-align: center; }
  .quiz__remaining::before { content: ""; display: block; width: 57%; height: 1px; margin: 0 auto 18px; background: linear-gradient(90deg,transparent,var(--quiz-gold),transparent); }
  .quiz__footer { display: none; }
}
@media (max-width:359px) {
  .quiz__shell { width: calc(100% - 32px); }
  .quiz__layout { padding-inline: 16px; }
  .quiz__title { font-size: 20px; }
  .quiz__answer { gap: 9px; padding-inline: 12px; font-size: 17px; }
}
@media (prefers-reduced-motion:reduce) {
  .quiz *, .quiz *::before, .quiz *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The original hero was desktop-only. These narrow-screen safeguards prevent
   its 1280px minimum from expanding the viewport of the responsive quiz. */
@media (max-width: 1279px) {
  .hero { min-width: 0; }
  .hero__nav { display: none; }
}
@media (max-width: 767px) {
  .hero { height: max(790px, 100svh); }
  .hero__container { width: calc(100% - 40px); }
  .hero__header { top: 24px; }
  .hero__brand { width: 154px; }
  .hero__button--header { right: 0; width: 128px; height: 38px; font-size: 11px; }
  .hero__menu, .hero__tagline { display: none; }
  .hero__content { top: 142px; width: 100%; }
  .hero__eyebrow { font-size: clamp(10px, 2.8vw, 14px); letter-spacing: 1px; white-space: normal; }
  .hero__title { font-size: clamp(35px, 9.3vw, 52px); line-height: 1.03; letter-spacing: -1px; }
  .hero__description { margin-top: 26px; font-size: 15px; line-height: 1.5; max-width: 360px; }
  .hero__description span { display: inline; white-space: normal; }
  .hero__offer { font-size: 15px; line-height: 1.5; white-space: normal; max-width: 310px; }
  .hero__actions { gap: 10px; flex-wrap: wrap; }
  .hero__button--primary { width: 176px; height: 48px; font-size: 13px; }
  .hero__button--secondary { width: 140px; height: 48px; font-size: 13px; }
  .hero__season { font-size: 12px; margin-top: 20px; }
  .hero__facts { bottom: 32px; grid-template-columns: 75px 134px auto; }
  .hero__fact + .hero__fact { padding-left: 20px; }
  .hero__fact dd { font-size: 23px; }
  .hero__fact dt { font-size: 9px; line-height: 1.5; }
  .hero__scene { object-position: 57% center; }
  .hero__shade { background: linear-gradient(90deg, #040907e6, #04090766), linear-gradient(0deg, #040907dd, transparent 35%); }
}
@media (max-width: 359px) {
  .hero__button--header { width: 114px; font-size: 10px; }
  .hero__brand { width: 140px; }
  .hero__actions { flex-wrap: nowrap; }
  .hero__button--primary { width: 155px; font-size: 11px; }
  .hero__button--secondary { width: 115px; font-size: 11px; }
}