:root {
  --orange:#E9560D;
  --cream:#f0f0e2;
  --ink:#171714;
  --white:#fff;
  --lime:#d9ff55;
  --muted:#776f64}

* {
  box-sizing:border-box}

@font-face {
  font-family: 'Nexa';
  src: url('./Nexa-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


h1.display {
  font-family: 'Nexa', Arial, sans-serif !important;
  font-weight: 700 !important;
}

body {
  font-family: 'Nexa', Arial, Helvetica, sans-serif;
  font-weight: 700;
  background: var(--cream);
  color: var(--ink);
}


html,body,#app {
  margin:0;
  min-height:100%;
  width:100%}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nexa', Arial, sans-serif;
  font-weight: 700;
}

button {
  font:inherit}

.shell {
  min-height:100vh;
  position:relative;
  overflow:hidden;
  padding:28px 42px 34px;
  display:flex;
  flex-direction:column}

.shell:before {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border:1px solid rgba(23,23,20,.12);
  border-radius:50%;
  right:-230px;
  top:-230px;
  pointer-events:none}

.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:3}

.brand {
  width:156px;
  height:58px;
  object-fit:contain;
  object-position:left center}

.progress-meta {
  display:flex;
  align-items:center;
  gap:16px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.08em}

.progress-track {
  width:150px;
  height:4px;
  background:rgba(23,23,20,.13);
  overflow:hidden}

.progress-fill {
  height:100%;
  background:var(--orange);
  transition:width .45s cubic-bezier(.2,.8,.2,1)}

.stage {
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
  align-items:center;
  gap:7vw;
  max-width:1380px;
  width:100%;
  margin:0 auto;
  position:relative;
  z-index:2}

.kicker {
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.14em;
  font-weight:900;
  margin:0 0 22px}

.display {
  font-size:clamp(48px,6.4vw,104px);
  line-height:.88;
  letter-spacing:-.065em;
  margin:0;
  max-width:980px}

.display .hot,.hot {
  color:var(--orange)}

.lede {
  font-size:clamp(20px,2vw,30px);
  line-height:1.3;
  max-width:690px;
  margin:30px 0}

.action {
  border:0;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  padding:18px 28px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  gap:20px;
  align-items:center;
  transition:.2s transform,.2s background}

.action:hover {
  transform:translateY(-3px);
  background:var(--orange)}

.action.light {
  background:#fff;
  color:var(--ink)}

.visual {
  height:min(68vh,720px);
  min-height:430px;
  position:relative;
  border-radius:32px;
  overflow:hidden;
  background:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center}

.visual img {
  width:100%;
  height:100%;
  object-fit:cover}

.visual .giant {
  font-size:clamp(90px,15vw,220px);
  font-weight:950;
  letter-spacing:-.08em;
  color:var(--cream);
  transform:rotate(-7deg)}

.visual:after {
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  pointer-events:none}

.answers {
  display:grid;
  gap:12px;
  margin-top:36px;
  max-width:800px}

.answer {
  border:1.5px solid var(--ink);
  background:transparent;
  border-radius:18px;
  text-align:left;
  padding:19px 22px;
  cursor:pointer;
  font-weight:800;
  font-size:17px;
  display:flex;
  align-items:flex-start;
  gap:15px;
  transition:.18s}

.answer:hover {
  transform:translateX(7px);
  background:#fff}

.answer .letter {
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px}

.answer.chosen {
  background:var(--ink);
  color:#fff;
  transform:translateX(7px)}

.answer.chosen .letter {
  background:var(--orange)}

.bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:3;
  margin-top:20px}

.micro {
  font-size:12px;
  color:var(--muted);
  font-weight:700}

.feedback-shell {
  background:var(--ink);
  color:#fff}

.feedback-shell:before {
  border-color:rgba(255,255,255,.12)}

.feedback-shell .progress-track {
  background:rgba(255,255,255,.18)}

.feedback-copy {
  max-width:830px}

.feedback-copy h1 {
  font-size:clamp(56px,8vw,118px);
  letter-spacing:-.07em;
  line-height:.85;
  margin:0 0 36px;
  color:var(--orange)}

.feedback-copy p {
  font-size:clamp(19px,2vw,28px);
  line-height:1.35;
  margin:0;
  max-width:780px}

.fact-card {
  background:var(--orange);
  color:var(--ink);
  padding:36px;
  border-radius:30px;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:rotate(2deg)}

.fact-card .bigfact {
  font-size:clamp(62px,8vw,120px);
  line-height:.8;
  font-weight:950;
  letter-spacing:-.07em}

.fact-card p {
  font-size:18px;
  font-weight:800;
  max-width:360px}

.intro .stage {
  grid-template-columns:1.25fr .75fr}

.intro .display {
  font-size:clamp(62px,8.3vw,132px)}

.intro-orbit {
  width:min(37vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--orange);
  display:grid;
  place-items:center;
  position:relative}

.intro-orbit:before,.intro-orbit:after {
  content:"";
  position:absolute;
  border:1px solid var(--ink);
  border-radius:50%}

.intro-orbit:before {
  inset:-26px}

.intro-orbit:after {
  inset:40px}

.intro-orbit span {
  font-size:clamp(80px,12vw,170px);
  z-index:2}

.score-shell {
  background:var(--orange)}

.score-wrap {
  text-align:center;
  margin:auto;
  position:relative;
  z-index:2}

.score-label {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900}

.score-number {
  font-size:clamp(140px,25vw,360px);
  font-weight:950;
  letter-spacing:-.1em;
  line-height:.75;
  margin:35px 0}

.score-wrap h1 {
  font-size:clamp(34px,4vw,64px);
  letter-spacing:-.045em;
  margin:25px auto;
  max-width:850px}

.score-wrap p {
  font-size:20px;
  max-width:650px;
  margin:0 auto 30px}

.enter {
  animation:enter .55s cubic-bezier(.2,.75,.25,1) both}

@keyframes enter {
  from {
  opacity:0;
  transform:translateY(22px)}

to {
  opacity:1;
  transform:none}

}

@media(max-width:800px) {
  .shell {
  padding:20px 18px 24px}

.brand {
  width:118px;
  height:45px}

.progress-track {
  width:82px}

.stage,.intro .stage {
  grid-template-columns:1fr;
  gap:26px;
  align-content:center}

.visual {
  min-height:220px;
  height:28vh;
  order:-1;
  border-radius:22px}

.display,.intro .display {
  font-size:clamp(46px,14vw,72px)}

.lede {
  font-size:19px;
  margin:20px 0}

.answers {
  margin-top:24px}

.answer {
  font-size:15px;
  padding:15px}

.feedback-copy h1 {
  font-size:60px}

.fact-card {
  min-height:250px;
  padding:25px}

.bottom {
  margin-top:16px}

.intro-orbit {
  width:65vw;
  max-width:330px;
  margin:auto}

.micro.hide-mobile {
  display:none}

}



.screen {
  display:none;
  min-height:100vh}

.screen#intro {
  display:block}

.screen:target {
  display:block}

body:has(.screen:target) #intro:not(:target) {
  display:none}

.navlink {
  text-decoration:none}

.answerlink {
  display:flex;
  text-decoration:none;
  color:inherit}

.feedback-shell {
  background:#111;
  color:#f5eddf}

.feedback-shell .kicker {
  color:#f4511e}

.light {
  background:#f5eddf!important;
  color:#111!important}



/* V3 motion layer — core navigation still works without JavaScript */
html {
  scroll-behavior:auto}

.screen {
  display:none;
  min-height:100vh;
  position:relative;
  isolation:isolate}

.screen:target {
  display:block;
  animation:screenIn .72s cubic-bezier(.16,1,.3,1) both}

#intro {
  display:block}

body:has(.screen:target) #intro:not(:target) {
  display:none}


.screen:target .topbar {
  animation:topDrop .55s .08s cubic-bezier(.16,1,.3,1) both}

.screen:target .kicker {
  animation:revealUp .55s .10s both}

.screen:target .display,.screen:target .feedback-copy h1 {
  animation:headlineIn .72s .12s cubic-bezier(.16,1,.3,1) both}

.screen:target .lede,.screen:target .feedback-copy p {
  animation:revealUp .65s .24s both}

.screen:target .answers .answer {
  animation:answerIn .55s cubic-bezier(.16,1,.3,1) both}

.screen:target .answers .answer:nth-child(1) {
  animation-delay:.24s}

.screen:target .answers .answer:nth-child(2) {
  animation-delay:.31s}

.screen:target .answers .answer:nth-child(3) {
  animation-delay:.38s}

.screen:target .visual {
  animation:visualIn .8s .12s cubic-bezier(.16,1,.3,1) both}

.screen:target .visual .giant {
  animation:giantIn .9s .25s cubic-bezier(.16,1,.3,1) both}

.screen:target .fact-card {
  animation:cardSlam .72s .2s cubic-bezier(.16,1,.3,1) both}

.screen:target .bigfact {
  animation:factPop .65s .42s cubic-bezier(.16,1,.3,1) both}

.screen:target .progress-fill {
  animation:progressGrow .85s .18s cubic-bezier(.16,1,.3,1) both;
  transform-origin:left}

.screen:target .score-number {
  animation:scorePop .9s .15s cubic-bezier(.16,1,.3,1) both}


.intro-orbit {
  animation:float 5s ease-in-out infinite}

.intro-orbit span {
  animation:qPulse 2.4s ease-in-out infinite}

.intro-orbit:before {
  animation:orbit 13s linear infinite}

.intro-orbit:after {
  animation:orbitReverse 9s linear infinite}

.visual {
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-radius .5s}

.visual:hover {
  transform:rotate(-1deg) scale(1.015);
  border-radius:52px}

.visual .giant {
  transition:transform .45s cubic-bezier(.16,1,.3,1)}

.visual:hover .giant {
  transform:rotate(0deg) scale(1.08)}


.answer {
  position:relative;
  overflow:hidden;
  will-change:transform}

.answer:after {
  content:"";
  position:absolute;
  inset:0;
  background:var(--orange);
  transform:translateX(-102%);
  transition:transform .38s cubic-bezier(.16,1,.3,1);
  z-index:-1}

.answer:hover {
  transform:translateX(12px) rotate(-.35deg);
  background:transparent}

.answer:hover:after {
  transform:translateX(0)}

.answer:hover .letter {
  transform:rotate(12deg) scale(1.08)}

.answer .letter {
  transition:transform .3s cubic-bezier(.16,1,.3,1)}


.action {
  position:relative;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.16,1,.3,1),background .28s}

.action span {
  transition:transform .28s}

.action:hover span {
  transform:translateX(6px)}

.action:active,.answer:active {
  transform:scale(.97)}


.feedback-shell .stage:after {
  content:"";
  position:absolute;
  width:34vw;
  height:34vw;
  max-width:520px;
  max-height:520px;
  border-radius:50%;
  background:var(--orange);
  filter:blur(0);
  opacity:.06;
  right:-10vw;
  bottom:-15vw;
  animation:breathe 4s ease-in-out infinite;
  z-index:-1}

.fact-card {
  box-shadow:0 28px 70px rgba(0,0,0,.22)}


.motion-dot {
  position:fixed;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--orange);
  pointer-events:none;
  z-index:999;
  mix-blend-mode:multiply;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .2s,width .2s,height .2s}

.motion-on .motion-dot {
  opacity:.8}

.motion-on:has(a:hover) .motion-dot {
  width:38px;
  height:38px;
  opacity:.35}


@keyframes screenIn {
  from {
  opacity:0;
  clip-path:inset(0 0 0 10%)}

to {
  opacity:1;
  clip-path:inset(0)}

}

@keyframes topDrop {
  from {
  opacity:0;
  transform:translateY(-18px)}

to {
  opacity:1;
  transform:none}

}

@keyframes revealUp {
  from {
  opacity:0;
  transform:translateY(30px)}

to {
  opacity:1;
  transform:none}

}

@keyframes headlineIn {
  from {
  opacity:0;
  transform:translateY(52px) skewY(2deg);
  letter-spacing:-.09em}

to {
  opacity:1;
  transform:none}

}

@keyframes answerIn {
  from {
  opacity:0;
  transform:translateX(-36px)}

to {
  opacity:1;
  transform:none}

}

@keyframes visualIn {
  from {
  opacity:0;
  transform:translateX(70px) rotate(4deg) scale(.94);
  border-radius:90px}

to {
  opacity:1;
  transform:none}

}

@keyframes giantIn {
  from {
  opacity:0;
  transform:rotate(-18deg) scale(.55)}

to {
  opacity:1;
  transform:rotate(-7deg) scale(1)}

}

@keyframes cardSlam {
  from {
  opacity:0;
  transform:translateX(80px) rotate(9deg) scale(.86)}

to {
  opacity:1;
  transform:rotate(2deg)}

}

@keyframes factPop {
  0% {
  opacity:0;
  transform:scale(.5)}

70% {
  transform:scale(1.08)}

100% {
  opacity:1;
  transform:none}

}

@keyframes progressGrow {
  from {
  transform:scaleX(0)}

to {
  transform:scaleX(1)}

}

@keyframes scorePop {
  0% {
  opacity:0;
  transform:scale(.45) rotate(-6deg)}

65% {
  transform:scale(1.06) rotate(1deg)}

100% {
  opacity:1;
  transform:none}

}

@keyframes float {
  0%,100% {
  transform:translateY(0) rotate(0)}

50% {
  transform:translateY(-16px) rotate(2deg)}

}

@keyframes qPulse {
  0%,100% {
  transform:scale(1)}

50% {
  transform:scale(1.08)}

}

@keyframes orbit {
  to {
  transform:rotate(360deg)}

}

@keyframes orbitReverse {
  to {
  transform:rotate(-360deg)}

}

@keyframes breathe {
  50% {
  transform:scale(1.16)}

}


@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important}

.motion-dot {
  display:none}

}



/* Quiz image cards: display full image within the card, without changing the layout. */
.question-visual {
  position: relative;
  isolation: isolate;
  background: var(--orange);
}
.question-visual .question-image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}
/* Make the text consistently use the locally hosted licensed Nexa Bold file. */
@font-face {
  font-family: 'QuizNexaBold';
  src: url('./Nexa-Bold.otf') format('opentype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
html, body, h1, h2, h3, h4, h5, h6,
.display, .kicker, .lede, .answer, .action, .micro,
.feedback-copy, .fact-card, .score-wrap, .progress-meta {
  font-family: 'QuizNexaBold', Arial, Helvetica, sans-serif;
  font-weight: 700;
}
.save-status {font-size: 13px !important; min-height: 18px; margin: 0 auto 18px !important;}