@font-face{
  font-family:"Charles Modern";
  src:url("../assets/fonts/CharlesModern-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Charles Modern";
  src:url("../assets/fonts/CharlesModern-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --blue:#009DDB;
  --cta:#459AD5;
  --chev:#55AADC;
  --pick:#91CCEA;
  --hair:#A6A6A6;
  --slate:#233441;
  --ink:#000000;
  --card:#FFFFFF;
  --paper:#FFFFFF;
  --band:#000000;

  --ok:#147A3D;
  --ok-fill:#DCF3E5;
  --ok-line:#4FA974;
  --no:#B02318;
  --no-fill:#FADEDC;
  --no-line:#D98781;
  --no-ink:#8C1A12;

  --s: min(100vw, 56.25vh);
  --u: calc(var(--s) / 1080);

  --qsize: 76;
  --asize: 44;
  --agap:  70;
  --arow: 160;

  --fscale: 1;

  --font: "Charles Modern", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }

html, body{
  width:100%; height:100%;
  margin:0; padding:0;
  overflow:hidden;
  background:transparent;
}

.cs-wrap{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  background-color:var(--paper);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

@media (min-aspect-ratio: 9/16){
  .cs-wrap{ background-color:var(--band); }
}

.cs-stage{
  position:absolute;
  width:var(--s);
  height:calc(var(--u) * 1920);
  left:50%; right:auto;
  top:auto; bottom:0;
  transform:translateX(-50%);
  overflow:hidden;
  background:var(--paper);
  pointer-events:none;
}

.cs-frame{
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  overflow:hidden;
  text-align:center;
}

.cs-frame{ display:none; }

[data-view="intro"]    .cs-frame[data-frame="intro"],
[data-view="question"] .cs-frame[data-frame="question"],
[data-view="insight"]  .cs-frame[data-frame="insight"],
[data-view="result"]   .cs-frame[data-frame="result"]{ display:block; }

.cs-head{
  position:absolute;
  left:calc(var(--u) * 105);
  right:calc(var(--u) * 105);
  top:calc(var(--u) * 70);
  height:calc(var(--u) * 150);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.cs-mark{
  display:block;
  width:calc(var(--u) * 150);
  height:calc(var(--u) * 150);
  user-select:none;
  -webkit-user-drag:none;
}

.cs-count{
  font-size:calc(var(--u) * 40);
  line-height:1.2;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}

[data-view="result"] .cs-count{ display:none; }

[data-view="intro"] .cs-head{ display:none; }

.cs-banner{
  position:absolute;
  left:calc(var(--u) * 170);
  right:calc(var(--u) * 170);
  top:calc(var(--u) * 250);
  height:calc(var(--u) * 96);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:calc(var(--u) * 14);
  color:#FFFFFF;
  visibility:hidden;
}

.cs-banner-icon{
  position:absolute;
  left:0; top:0; bottom:0;
  width:calc(var(--u) * 96);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:calc(var(--u) * 14) 0 0 calc(var(--u) * 14);
  background:rgba(0,0,0,.16);
  font-size:calc(var(--u) * 46);
  font-weight:700;
  line-height:1;
}

.cs-banner-label{
  font-size:calc(var(--u) * 46);
  font-weight:700;
  line-height:1.2;
  letter-spacing:calc(var(--u) * 0.5);
}

[data-view="question"][data-phase="correct"] .cs-banner{
  visibility:visible;
  background:var(--ok);
}

[data-view="question"][data-phase="wrong"] .cs-banner{
  visibility:visible;
  background:var(--no);
}

.cs-q-h1{
  position:absolute;
  left:calc(var(--u) * 170);
  right:calc(var(--u) * 170);
  top:calc(var(--u) * 396);
  margin:0;
  text-align:center;
  font-weight:700;
  font-size:calc(var(--u) * var(--qsize));
  line-height:1.27;
  letter-spacing:calc(var(--u) * -1);
  color:var(--ink);
}

.cs-band{
  position:absolute;
  left:calc(var(--u) * 170);
  right:calc(var(--u) * 170);
  top:calc(var(--u) * 400);
  height:calc(var(--u) * 830);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.cs-band > *{ margin:0; }

.cs-intro-mark{
  position:absolute;
  left:50%;
  top:calc(var(--u) * 96);
  width:calc(var(--u) * 200);
  height:calc(var(--u) * 200);
  transform:translateX(-50%);
  user-select:none;
  -webkit-user-drag:none;
}

.cs-intro-lockup{
  position:absolute;
  left:50%;
  top:calc(var(--u) * 356);
  width:calc(var(--u) * 760);
  height:calc(var(--u) * 204);
  transform:translateX(-50%);
  user-select:none;
  -webkit-user-drag:none;
}

[data-view="intro"] .cs-band{
  left:calc(var(--u) * 105);
  right:calc(var(--u) * 105);
  top:calc(var(--u) * 630);
  height:calc(var(--u) * 620);
}

.cs-intro-h1{
  font-size:calc(var(--u) * var(--fscale) * 104);
  line-height:1.16;
  font-weight:700;
  letter-spacing:calc(var(--u) * -2);
  color:var(--ink);
}

.cs-intro-sub{
  margin-top:calc(var(--u) * var(--fscale) * 56) !important;
  padding:0 calc(var(--u) * 40);
  font-size:calc(var(--u) * var(--fscale) * 52);
  line-height:1.36;
  font-weight:500;
  color:var(--slate);
}

.cs-ins-label{
  font-size:calc(var(--u) * var(--fscale) * 42);
  line-height:1.2;
  font-weight:500;
  color:var(--slate);
}

.cs-ins-answer{
  margin-top:calc(var(--u) * var(--fscale) * 22) !important;
  font-size:calc(var(--u) * var(--fscale) * 68);
  line-height:1.22;
  font-weight:700;
  letter-spacing:calc(var(--u) * -1);
  color:var(--ink);
}

.cs-ins-body{
  margin-top:calc(var(--u) * var(--fscale) * 46) !important;
  font-size:calc(var(--u) * var(--fscale) * 44);
  line-height:1.38;
  font-weight:500;
  color:var(--slate);
}

.cs-tick{
  width:calc(var(--u) * var(--fscale) * 128);
  height:calc(var(--u) * var(--fscale) * 128);
  flex:none;
}

.cs-res-h1{
  margin-top:calc(var(--u) * var(--fscale) * 54) !important;
  font-size:calc(var(--u) * var(--fscale) * 76);
  line-height:1.22;
  font-weight:700;
  letter-spacing:calc(var(--u) * -1);
  color:var(--ink);
}

.cs-rule{
  margin-top:calc(var(--u) * var(--fscale) * 52) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(var(--u) * 31);
  flex:none;
}

.cs-rule-line{
  display:block;
  width:calc(var(--u) * 160);
  height:calc(var(--u) * 3);
  background:var(--slate);
}

.cs-rule-dot{
  display:block;
  width:calc(var(--u) * 20);
  height:calc(var(--u) * 20);
  border-radius:50%;
  background:var(--blue);
}

.cs-res-body{
  margin-top:calc(var(--u) * var(--fscale) * 52) !important;
  font-size:calc(var(--u) * var(--fscale) * 50);
  line-height:1.32;
  font-weight:500;
  color:var(--slate);
}

.cs-choices{
  position:absolute;
  left:0; right:0;
  top:calc(var(--u) * 660);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:calc(var(--u) * var(--agap));
  padding:0 calc(var(--u) * 107);
  margin:0;
}

[data-view="intro"]   .cs-choices,
[data-view="insight"] .cs-choices,
[data-view="result"]  .cs-choices{ top:calc(var(--u) * 1310); }

.cs-pill{
  position:relative;
  width:100%;
  min-height:calc(var(--u) * var(--arow));
  margin:0;
  padding:calc(var(--u) * 24) calc(var(--u) * 130) calc(var(--u) * 24) calc(var(--u) * 55);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  background:var(--card);
  border:calc(var(--u) * 3) solid var(--hair);
  border-radius:calc(var(--u) * 80);
  color:var(--ink);
  font-family:var(--font);
  font-weight:500;
  font-size:calc(var(--u) * var(--asize));
  line-height:1.24;
  text-decoration:none;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  transition:background-color .16s ease-out, border-color .16s ease-out;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}

.cs-pill:active{
  background:var(--pick);
  border-color:var(--pick);
}

.cs-pill::after{
  content:"";
  position:absolute;
  right:calc(var(--u) * 57);
  top:50%;
  width:calc(var(--u) * 20); height:calc(var(--u) * 20);
  border-right:calc(var(--u) * 6) solid var(--chev);
  border-top:calc(var(--u) * 6) solid var(--chev);
  transform:translateY(-50%) rotate(45deg);
}

[data-phase] .cs-pill{ pointer-events:none; }
[data-phase] .cs-pill::after{ content:none; }
[data-phase] .cs-pill:active{ background:var(--card); border-color:var(--hair); }

.cs-pill.is-correct,
[data-phase] .cs-pill.is-correct:active{
  background:var(--ok-fill);
  border-color:var(--ok-line);
}

.cs-pill.is-wrong,
[data-phase] .cs-pill.is-wrong:active{
  background:var(--no-fill);
  border-color:var(--no-line);
  color:var(--no-ink);
}

.cs-cta{
  width:calc(var(--u) * 596);
  align-self:center;
  min-height:calc(var(--u) * 155);
  padding:0 calc(var(--u) * 40);
  justify-content:center;
  text-align:center;
  background:var(--cta);
  border:0;
  color:#fff;
  font-weight:700;
  font-size:calc(var(--u) * 50);
  border-radius:calc(var(--u) * 78);
}
.cs-cta:active{ background:var(--cta); border-color:transparent; }
.cs-cta::after{ content:none; }

.cs-pill:focus-visible{
  outline:calc(var(--u) * 6) solid var(--blue);
  outline-offset:calc(var(--u) * 4);
}

@media (prefers-reduced-motion: reduce){
  .cs-pill{ transition:none; }
}

.cs-footer{
  position:absolute;
  left:0; right:0;
  top:calc(var(--u) * 1540);
  bottom:0;
  pointer-events:none;
}