:root{
  --bg:#f3efe6;
  --paper:#fffaf1;
  --ink:#15152b;
  --muted:#66616f;
  --line:#1b1b30;
  --red:#f05539;
  --blue:#2f67d5;
  --green:#76b83f;
  --yellow:#f1bf2e;
  --purple:#7b54d6;
  --soft:#ece6db;
  --shadow:0 8px 0 rgba(21,21,43,.95);
  font-family: Inter, Arial, Helvetica, sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{min-height:100vh}
button{font:inherit}
img{display:block;max-width:100%}
a{color:var(--blue)}
.app{width:min(100%,980px);margin:0 auto;background:var(--bg);min-height:100vh}
.screen{display:none;min-height:100vh;padding:20px}
.screen.is-active{display:block}
.screen__inner{min-height:calc(100vh - 40px)}
.screen__inner--center{display:grid;place-items:center}
.screen__inner--quiz,.screen__inner--review,.screen__inner--result{display:flex;flex-direction:column;gap:18px}
.screen__inner--quiz,.screen__inner--review{width:min(100%,760px);margin-inline:auto}
.screen__inner--home{display:grid;align-items:center}

.home-card,.question-card,.panel,.result-card,.review-item,.simple-header{background:var(--paper);border:3px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.home-card--hero{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;padding:26px;align-items:center;min-height:calc(100vh - 40px)}
.home-copy{display:flex;flex-direction:column;gap:14px;padding-right:8px}
.eyebrow{display:inline-block;width:max-content;padding:8px 12px;border:2px solid var(--line);border-radius:999px;background:#fff;font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.eyebrow--light{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.55)}
.home-copy h1{font-size:clamp(3.2rem,9vw,5.4rem);line-height:.88;margin:0;font-weight:900;letter-spacing:-.05em}
.home-copy h1 span{color:var(--red)}
.home-copy p{margin:0;font-size:1.06rem;line-height:1.45;max-width:36ch}
.home-actions{display:flex;flex-direction:column;gap:12px;margin-top:10px;max-width:360px}
.home-note{font-size:.92rem;color:var(--muted)}
.home-figure{padding:10px 0 10px 10px}
.home-figure img{width:100%;max-height:70vh;object-fit:contain}

.button{border:3px solid var(--line);border-radius:18px;padding:15px 18px;font-weight:900;cursor:pointer;text-align:center;box-shadow:0 6px 0 rgba(21,21,43,.95);transition:filter .15s ease, transform .06s ease}
.button:hover{filter:brightness(1.03)}
.button:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(21,21,43,.95)}
.button--primary{background:var(--red);color:#fff}
.button--ghost{background:var(--paper);color:var(--ink)}
.button--dark{background:var(--ink);color:#fff}
.button--secondary{background:var(--yellow);color:var(--ink)}

.panel{padding:28px;max-width:520px;text-align:center}
.panel h2{font-size:2rem;line-height:1.05;margin:0 0 12px}
.panel p{margin:0;color:var(--muted);line-height:1.45}
.loading-art{width:min(280px,70vw);margin:0 auto 10px}
.loading-bar{margin-top:18px;height:16px;background:var(--soft);border:3px solid var(--line);border-radius:999px;overflow:hidden}
.loading-bar span{display:block;height:100%;width:35%;background:var(--yellow)}
.analysis-stack{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.analysis-stack span{padding:10px 12px;border:2px solid var(--line);border-radius:999px;background:#fff;font-weight:800}

.quiz-header{display:flex;flex-direction:column;gap:12px;padding:18px 20px;border:3px solid var(--line);border-radius:24px;background:var(--paper);box-shadow:var(--shadow)}
.quiz-header strong{display:block;font-size:1.36rem;line-height:1}
.progress{height:15px;border:3px solid var(--line);border-radius:999px;background:var(--soft);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--green)}
.question-stage{
  position:relative;
  height:500px;
  margin:0;
  overflow:visible;
  perspective:1100px;
}
.question-card{
  background:var(--paper);
}
.question-card--top{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:18px;
  width:100%;
  height:100%;
  padding:28px;
  border:3px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
  transform-origin:center;
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease;
  will-change:transform,opacity;
}
.question-card--top.is-entering{
  animation:questionCardEnter .28s cubic-bezier(.2,.8,.2,1) both;
}
.question-card--top.is-discarding-left{
  transform:translate3d(-118%,12px,0) rotate(-7deg) scale(.97);
  opacity:0;
}
.question-card--top.is-discarding-right{
  transform:translate3d(118%,12px,0) rotate(7deg) scale(.97);
  opacity:0;
}
.question-card__meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin:0;
}
.question-card__meta span{
  display:inline-block;
  padding:8px 12px;
  border:2px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
}
.question-card__meta small{
  font-size:.85rem;
  color:var(--muted);
  padding-top:8px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.question-card h2{
  align-self:center;
  margin:0;
  max-width:19ch;
  font-size:clamp(2.35rem,5.6vw,3.65rem);
  line-height:1.01;
  letter-spacing:-.045em;
  overflow-wrap:anywhere;
}
.question-card--top.is-question-long h2{
  font-size:clamp(2rem,4.7vw,3rem);
  line-height:1.035;
}
.question-card--top.is-question-very-long h2{
  font-size:clamp(1.65rem,3.85vw,2.45rem);
  line-height:1.055;
}
.question-card--top.is-question-extreme h2{
  font-size:clamp(1.35rem,3.1vw,1.95rem);
  line-height:1.075;
}
.answers{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.answer{
  border:3px solid var(--line);
  border-radius:22px;
  background:var(--paper);
  padding:18px 18px 16px;
  text-align:left;
  cursor:pointer;
  box-shadow:var(--shadow);
  min-height:102px;
}
.answer strong{
  display:block;
  font-size:1.34rem;
  line-height:1;
  margin-bottom:5px;
}
.answer small{
  display:block;
  font-size:.95rem;
  color:#2f2c36;
}
.answer--true{background:#eef8e9}
.answer--false{background:#fff0eb}
.answer:disabled{opacity:.72;cursor:wait}
.quiz-note{
  position:relative;
  z-index:4;
  margin:4px 2px 0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.4;
}
@keyframes questionCardEnter{
  0%{
    opacity:0;
    transform:translate3d(0,-16px,-80px) rotateX(5deg) scale(.94);
  }
  68%{
    opacity:1;
    transform:translate3d(0,3px,0) rotateX(0) scale(1.012);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) rotateX(0) scale(1);
  }
}

.result-card{padding:30px;background:var(--purple);color:#fff;overflow:hidden;position:relative;transition:min-height .45s ease;user-select:none;-webkit-user-select:none}
.result-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:34px;align-items:center}
.result-copy,.result-card>.eyebrow,.result-actions{transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.result-copy h2{font-size:clamp(2.65rem,5.1vw,4.1rem);line-height:.93;margin:14px 0 12px;letter-spacing:-.045em;overflow-wrap:anywhere}
.result-card.is-title-long .result-copy h2{font-size:clamp(2.3rem,4.5vw,3.55rem)}
.result-card.is-title-very-long .result-copy h2{font-size:clamp(2.05rem,4vw,3.05rem)}
.result-score{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.result-score strong{font-size:clamp(3.8rem,14vw,6.2rem);line-height:.9;font-weight:900}
.result-score span{font-size:1.02rem;font-weight:700;text-transform:uppercase;max-width:120px}
.result-copy p{margin:0 0 18px;font-size:1rem;line-height:1.45;max-width:35ch}
.result-artwrap{display:grid;place-items:center;position:relative;min-width:0}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.result-stats div{background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.34);border-radius:18px;padding:12px 10px;min-height:88px}
.result-stats strong{display:block;font-size:1.75rem;line-height:1;margin-bottom:8px}
.result-stats span{font-size:.84rem;line-height:1.25;text-transform:uppercase}
.result-actions{display:grid;gap:12px}
.reveal-card{position:relative;width:400px;max-width:100%;aspect-ratio:3/4;perspective:1100px;isolation:isolate;flex:0 0 auto}
.reveal-card__inner{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:center;filter:drop-shadow(0 12px 0 rgba(21,21,43,.92));z-index:3}
.reveal-card__front{position:absolute;inset:0;border:7px solid var(--line);border-radius:30px;padding:18px;background:
  radial-gradient(circle at 20% 16%,rgba(255,255,255,.9) 0 1px,transparent 2px) 0 0/20px 20px,
  linear-gradient(135deg,#fffdf7,#eee6d8);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.62),inset 0 0 0 7px rgba(21,21,43,.08);
  overflow:hidden;
}
.playing-card__image{position:absolute;inset:24px;border:3px solid rgba(21,21,43,.65);border-radius:22px;overflow:hidden;background:#f5efe4}
.result-art{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:18px}
.playing-card__corner{position:absolute;z-index:5;width:34px;height:34px;border:3px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font-weight:1000;font-size:1.2rem;box-shadow:0 3px 0 rgba(21,21,43,.9)}
.playing-card__corner--top{left:9px;top:9px}
.playing-card__corner--bottom{right:9px;bottom:9px;transform:rotate(180deg)}
.reveal-caption{position:relative;z-index:8;margin:30px 0 0;text-align:center;color:rgba(255,255,255,.92);font-weight:800;font-size:.96rem;line-height:1.3;min-height:2.6em;transition:opacity .25s ease}
.card-dust{position:absolute;width:155%;max-width:none;top:53%;transform:translateY(-50%);opacity:0;pointer-events:none;z-index:2}
.card-dust--left{right:52%}
.card-dust--right{left:52%}
.screen__inner--result.is-revealing .result-copy,
.screen__inner--result.is-revealing .result-actions{opacity:0;transform:translateY(16px)}
.screen__inner--result.is-revealing .result-copy,
.screen__inner--result.is-revealing .result-card>.eyebrow{display:none}
.screen__inner--result.is-revealing .result-card{min-height:calc(100vh - 70px);display:grid;place-items:center;padding-block:36px}
.screen__inner--result.is-revealing .result-layout{grid-template-columns:1fr;width:100%;justify-items:center}
.screen__inner--result.is-revealing .result-artwrap{order:0;width:100%}
.result-card.is-revealed .result-copy,
.result-card.is-revealed>.eyebrow{opacity:1;transform:none}
.reveal-card.is-shuffling .reveal-card__inner{animation:cardRoulette .24s linear infinite,cardTremble .09s ease-in-out infinite alternate}
.reveal-card.is-final-hit .reveal-card__inner{animation:cardHit .52s cubic-bezier(.18,.82,.24,1)}
.reveal-card.is-final-hit .card-dust--left{animation:dustLeft .72s ease-out forwards}
.reveal-card.is-final-hit .card-dust--right{animation:dustRight .72s ease-out forwards}
.reveal-card.is-final-hit .playing-card__front{animation:cardGlow .68s ease-out}
.result-card.is-revealed .reveal-caption{opacity:0}
@keyframes cardRoulette{
  0%{transform:rotateY(0deg) rotateZ(-1deg) scale(1)}
  25%{transform:rotateY(90deg) rotateZ(1deg) scale(.96)}
  50%{transform:rotateY(180deg) rotateZ(-1deg) scale(1)}
  75%{transform:rotateY(270deg) rotateZ(1deg) scale(.96)}
  100%{transform:rotateY(360deg) rotateZ(-1deg) scale(1)}
}
@keyframes cardTremble{
  from{margin-left:-3px;margin-top:1px}
  to{margin-left:3px;margin-top:-1px}
}
@keyframes cardHit{
  0%{transform:scale(1) rotateZ(0)}
  28%{transform:scale(1.08) rotateZ(-1.5deg)}
  56%{transform:scale(.98) rotateZ(1deg)}
  100%{transform:scale(1) rotateZ(0)}
}
@keyframes dustLeft{
  0%{opacity:0;transform:translate(15%,-50%) scale(.55)}
  18%{opacity:.95}
  100%{opacity:0;transform:translate(-8%,-53%) scale(1.12)}
}
@keyframes dustRight{
  0%{opacity:0;transform:translate(-15%,-50%) scale(.55)}
  18%{opacity:.95}
  100%{opacity:0;transform:translate(8%,-53%) scale(1.12)}
}
@keyframes cardGlow{
  0%{box-shadow:inset 0 0 0 4px rgba(255,255,255,.62),inset 0 0 0 7px rgba(21,21,43,.08)}
  35%{box-shadow:inset 0 0 0 4px rgba(255,255,255,.9),0 0 40px rgba(255,223,75,.95)}
  100%{box-shadow:inset 0 0 0 4px rgba(255,255,255,.62),inset 0 0 0 7px rgba(21,21,43,.08)}
}

.simple-header{display:flex;align-items:center;gap:14px;padding:14px 16px}
.simple-header small{display:block;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.simple-header strong{display:block;font-size:1.08rem}
.back-button{width:48px;height:48px;border:3px solid var(--line);border-radius:14px;background:var(--paper);cursor:pointer;font-size:1.4rem;font-weight:900;box-shadow:0 4px 0 rgba(21,21,43,.95)}
.review-summary{margin:0;padding:0 4px;font-size:1rem;line-height:1.45;color:#2f2d37}
.review-list{display:grid;gap:14px;padding-bottom:28px}
.review-item{padding:0;overflow:hidden}
.review-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:16px 18px}
.review-item summary::-webkit-details-marker{display:none}
.review-item[open] summary{border-bottom:2px solid rgba(21,21,43,.12)}
.review-index{width:34px;height:34px;border-radius:999px;background:var(--yellow);display:grid;place-items:center;font-weight:900;border:2px solid var(--line)}
.review-title{font-size:1rem;font-weight:800;line-height:1.25}
.review-badge{display:inline-block;padding:7px 10px;border-radius:999px;border:2px solid var(--line);font-size:.75rem;font-weight:900;text-transform:uppercase}
.review-badge--ok{background:#e7f7e4}
.review-badge--bad{background:#ffe5dc}
.review-badge--unknown{background:#eee8ff}
.review-body{padding:16px 18px 18px;display:grid;gap:14px}
.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.review-grid div{padding:12px;border-radius:16px;background:var(--soft)}
.review-grid small{display:block;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.review-grid strong{display:block;font-size:1rem;line-height:1.3}
.review-body p{margin:0;line-height:1.5;color:#302d38}
.review-source{font-weight:800;word-break:break-word}

.panel--error{max-width:480px}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 16px;border-radius:999px;border:2px solid #fff;opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:30;white-space:nowrap;max-width:calc(100vw - 20px);overflow:hidden;text-overflow:ellipsis}
.toast.is-visible{opacity:1}


@media (min-width:721px){
  .screen__inner--result{width:100%;margin-inline:auto}
  .result-artwrap{justify-self:end;width:400px}
}

@media (max-width:860px) and (min-width:721px){
  .result-layout{grid-template-columns:minmax(0,1fr) 360px;gap:24px}
  .result-artwrap{width:360px}
  .reveal-card{width:360px}
  .result-copy h2{font-size:clamp(2.25rem,5vw,3.35rem)}
}

@media (max-width:720px){
  .screen{padding:14px}
  .screen__inner{min-height:calc(100vh - 28px)}
  .home-card--hero,.result-layout{grid-template-columns:1fr}
  .home-figure{order:-1;padding:0}
  .result-artwrap{order:-1;width:100%;justify-self:center}
  .home-figure img{max-height:48vh;margin:0 auto}
  .screen__inner--result.is-revealing .result-layout{grid-template-columns:1fr}
  .screen__inner--result.is-revealing .result-copy{display:none}
  .reveal-card{width:min(100%,360px)}
}

@media (max-width:520px){
  .home-card--hero{padding:18px;gap:4px}
  .home-copy p{font-size:1rem}
  .panel{padding:20px}
  .question-card{padding:18px}
  .result-card{padding:18px}
  .result-stats{grid-template-columns:1fr}
  .review-item summary{grid-template-columns:auto 1fr}
  .review-badge{grid-column:2/3;justify-self:start}
  .review-grid{grid-template-columns:1fr}
}

button,.answer,.result-card,.reveal-card{-webkit-tap-highlight-color:transparent}


@media (max-width:780px){
  .question-card h2{max-width:none}
}

@media (max-width:560px){
  .answers{grid-template-columns:1fr 1fr;gap:10px}
  .answer{padding:16px 14px 14px;min-height:96px}
  .answer strong{font-size:1.15rem}
  .answer small{font-size:.87rem}
}

@media (max-width:780px){
  .question-stage{height:470px}
  .question-card--top{padding:24px}
  .question-card h2{max-width:none;font-size:clamp(2rem,7vw,3.05rem)}
  .question-card--top.is-question-long h2{font-size:clamp(1.72rem,6vw,2.55rem)}
  .question-card--top.is-question-very-long h2{font-size:clamp(1.43rem,5vw,2.05rem)}
  .question-card--top.is-question-extreme h2{font-size:clamp(1.18rem,4.2vw,1.65rem)}
}

@media (max-width:560px){
  .question-stage{height:430px}
  .question-card--top{padding:20px;gap:14px}
  .question-card h2{font-size:2rem}
  .question-card--top.is-question-long h2{font-size:1.66rem}
  .question-card--top.is-question-very-long h2{font-size:1.36rem}
  .question-card--top.is-question-extreme h2{font-size:1.1rem}
  .answers{grid-template-columns:1fr 1fr;gap:10px}
  .answer{padding:15px 13px;min-height:90px}
}

@media (max-width:390px){
  .question-stage{height:405px}
  .question-card--top{padding:17px}
  .question-card h2{font-size:1.78rem}
  .question-card--top.is-question-long h2{font-size:1.48rem}
  .question-card--top.is-question-very-long h2{font-size:1.22rem}
  .question-card--top.is-question-extreme h2{font-size:1rem}
  .answer strong{font-size:1.08rem}
  .answer small{font-size:.82rem}
}