@charset "UTF-8";
:root {
  color-scheme:light;
  --ink:#193249;
  --muted:#758594;
  --blue:#2863ef;
  --lime:#c4f653;
  --paper:#f8fcff;
  --line:#d9e7ef;
  font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  font-synthesis:none;
  color:var(--ink);
  background:#d9edfa;
  -webkit-tap-highlight-color:transparent;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-width:280px;
  min-height:100svh;
  background:radial-gradient(ellipse at 25% 5%,#f8fff2 0,transparent 46%),radial-gradient(ellipse at 80% 80%,#b9d9ff 0,transparent 50%),#d9edfa;
}

button,a,input,summary {
  touch-action:manipulation;
}

button,a {
  font:inherit;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

button,a,summary,input {
  outline-offset:5px;
}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid #2863ef;
}

h1:focus {
  outline:none;
}

svg {
  width:24px;
  height:24px;
  flex-shrink:0;
}

h1,p {
  margin:0;
}

h1 {
  font-size:30px;
  font-weight:900;
  line-height:1.12;
  letter-spacing:-1.1px;
}

a {
  color:inherit;
}

button {
  color:inherit;
}

button::-moz-focus-inner {
  border:0;
}

[hidden] {
  display:none!important;
}

.app-shell {
  position:relative;
  width:min(100%,460px);
  min-height:100svh;
  margin:0 auto;
  padding:calc(24px + env(safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)) 26px calc(16px + env(safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px));
  background:linear-gradient(#eaf6ff 0,#f8fcff 48%,#f8fcff 100%);
  overflow:hidden;
}

.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:27px;
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:22px;
  line-height:.86;
  font-weight:1000;
  letter-spacing:-.8px;
}

.brand-second {
  display:block;
  color:var(--blue);
  font-size:12px;
  letter-spacing:3.7px;
  margin-top:6px;
}

.brand-mark {
  width:35px;
  height:35px;
  background:var(--blue);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-12deg);
  position:relative;
}

.brand-mark:after {
  content:"";
  position:absolute;
  inset:10px;
  background:var(--lime);
  border:1.5px solid var(--ink);
}

.icon-button {
  border:1.5px solid #cadce9;
  border-radius:11px;
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  background:#ffffff90;
  color:#657e91;
}

.icon-button svg {
  width:15px;
  height:15px;
}

.icon-button:hover {
  background:white;
}

.progress-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:11px;
}

.quest-tag {
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  display:flex;
  gap:5px;
  align-items:center;
}

.quest-tag svg {
  width:15px;
  height:15px;
  color:var(--blue);
}

.step-count {
  font-size:17px;
  font-weight:900;
  letter-spacing:-.4px;
}

.step-count span {
  color:#94a7b8;
  font-size:13px;
}

.progress {
  display:flex;
  gap:6px;
  height:8px;
}

.progress i {
  flex:1;
  background:#dae8f1;
  border-radius:2px;
  transition:background .3s,transform .3s;
}

.progress i.complete {
  background:var(--blue);
}

.progress i.current {
  background:var(--lime);
  box-shadow:inset 0 0 0 1px #a2cf42;
  transform:scaleY(1.2);
}

.world {
  height:228px;
  position:relative;
  isolation:isolate;
  --scene-hue:0deg;
}

.world-art {
  position:relative;
  width:100%;
  height:100%;
  overflow:visible;
}

.world-halo {
  position:absolute;
  inset:12px 25px 3px;
  border-radius:50%;
  background:radial-gradient(ellipse,#bce7ff99,transparent 70%);
  transition:filter .7s;
  filter:hue-rotate(var(--scene-hue));
}

.world-sticker {
  position:absolute;
  z-index:2;
  top:35px;
  right:0;
  font-size:12px;
  letter-spacing:-.4px;
  font-weight:1000;
  padding:8px 10px;
  background:var(--lime);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(9deg);
  animation:sticker-wiggle 4s ease-in-out infinite;
}

.avatar {
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:avatar-bounce 3.4s ease-in-out infinite;
}

.avatar-arm-right {
  transform-box:fill-box;
  transform-origin:0 100%;
  animation:wave 2.8s ease-in-out infinite;
}

.floating-cube,.world-coin,.cloud {
  transform-box:fill-box;
  transform-origin:center;
  animation:float 4s ease-in-out infinite;
}

.cube-right {
  animation-delay:-2s;
}

.coin-one {
  animation:coin-float 4.5s ease-in-out infinite;
}

.coin-two {
  animation:coin-float 4s ease-in-out -1.6s infinite;
}

.cloud {
  animation:float 7s ease-in-out -3s infinite;
}

.spark {
  position:absolute;
  z-index:2;
  color:var(--blue);
  animation:twinkle 3s ease-in-out infinite;
}

.spark-one {
  top:15px;
  left:44%;
  font-size:20px;
}

.spark-two {
  bottom:35px;
  left:9%;
  font-size:14px;
  animation-delay:-1.2s;
}

.world[data-scene=play] {
  --scene-hue:45deg;
}

.world[data-scene=robux] {
  --scene-hue:300deg;
}

.world[data-scene=robux] .world-coin {
  animation-duration:2.5s;
}

.world[data-scene=style] {
  --scene-hue:100deg;
}

.world[data-scene=style] .avatar {
  filter:hue-rotate(30deg);
}

.world[data-scene=final] {
  --scene-hue:310deg;
}

.world[data-scene=final] .world-sticker {
  background:#ffd268;
}

.question-panel {
  margin-top:19px;
}

.eyebrow {
  font-size:9px;
  font-weight:900;
  letter-spacing:1.55px;
  color:var(--blue);
  margin-bottom:8px;
}

.question-panel h1 {
  min-height:34px;
  margin-bottom:19px;
}

.question-panel fieldset {
  border:0;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}

.option {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  min-width:0;
  min-height:105px;
  padding:12px 13px;
  background:#fff;
  border:2px solid #d8e4ed;
  border-radius:14px;
  box-shadow:0 3px 0 #d8e4ed;
  cursor:pointer;
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
  animation:card-in .33s both;
}

.option:nth-child(2) {
  animation-delay:.045s;
}

.option:nth-child(3) {
  animation-delay:.09s;
}

.option:nth-child(4) {
  animation-delay:.135s;
}

.option:hover {
  transform:translateY(-2px);
  border-color:#a0b9ce;
  box-shadow:0 5px 0 #c6d9e8;
}

.option input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.option:has(input:checked) {
  background:#edf4ff;
  border-color:var(--blue);
  box-shadow:0 3px 0 var(--blue);
}

.option:has(input:focus-visible) {
  outline:3px solid var(--blue);
  outline-offset:4px;
}

.option-icon {
  width:33px;
  height:33px;
  border-radius:9px;
  background:#eaf3ff;
  display:grid;
  place-items:center;
  color:#4784d4;
}

.option-icon svg {
  width:23px;
  height:23px;
  stroke-width:1.8;
}

.option:nth-child(2) .option-icon {
  background:#fff1e5;
  color:#e59543;
}

.option:nth-child(3) .option-icon {
  background:#f1eaff;
  color:#9c74d7;
}

.option:nth-child(4) .option-icon {
  background:#ecf7dc;
  color:#80a844;
}

.option-text {
  font-size:14px;
  font-weight:800;
  line-height:1.2;
  margin-top:10px;
  max-width:100%;
  overflow-wrap:anywhere;
}

.radio-mark {
  position:absolute;
  right:12px;
  top:14px;
  width:17px;
  height:17px;
  border:1.5px solid #d2dfe8;
  border-radius:50%;
  display:grid;
  place-items:center;
}

.radio-mark svg {
  width:12px;
  height:12px;
  opacity:0;
}

.option:has(input:checked) .radio-mark {
  background:var(--blue);
  border-color:var(--blue);
  color:white;
}

.option:has(input:checked) .radio-mark svg {
  opacity:1;
}

.option:has(input:checked) .option-icon {
  background:var(--blue);
  color:white;
}

.error-text {
  font-size:12px;
  line-height:1.5;
  color:#b8333f;
  margin-top:13px;
}

.error-text:empty {
  display:none;
}

.actions {
  display:flex;
  gap:10px;
  margin-top:21px;
}

.primary {
  border:2px solid var(--ink);
  border-radius:13px;
  background:var(--lime);
  box-shadow:0 4px 0 var(--ink);
  min-height:54px;
  padding:12px 19px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none;
  font-size:16px;
  font-weight:900;
  transition:transform .15s,box-shadow .15s,background .15s;
  flex:1;
}

.primary svg {
  width:22px;
  height:22px;
}

.primary:hover {
  background:#d3ff70;
}

.primary:active {
  transform:translateY(4px);
  box-shadow:0 0 0 var(--ink);
}

.primary:disabled {
  background:#e1eaf0;
  color:#9aaebb;
  border-color:#bacbd7;
  box-shadow:0 4px 0 #bacbd7;
}

.back-button {
  border:2px solid #cad9e5;
  background:white;
  border-radius:13px;
  width:52px;
  display:grid;
  place-items:center;
  box-shadow:0 4px 0 #cad9e5;
}

.back-button:active {
  transform:translateY(3px);
  box-shadow:0 1px 0 #cad9e5;
}

.ambient {
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.ambient i {
  position:absolute;
  width:80px;
  height:80px;
  border:2px solid #ffffff70;
  background:#ffffff20;
  transform:rotate(20deg);
  animation:ambient-float 12s ease-in-out infinite;
}

.ambient i:nth-child(1) {
  left:9%;
  top:15%;
}

.ambient i:nth-child(2) {
  right:8%;
  top:60%;
  width:130px;
  height:130px;
  animation-delay:-3s;
}

.ambient i:nth-child(3) {
  left:14%;
  top:80%;
  width:35px;
  height:35px;
  animation-delay:-6s;
}

.ambient i:nth-child(4) {
  right:16%;
  top:10%;
  width:40px;
  height:40px;
  animation-delay:-9s;
}

.state-view {
  text-align:center;
  padding:90px 0 70px;
  min-height:600px;
}

.state-view h1 {
  font-size:28px;
}

.state-view>p:not(.eyebrow) {
  font-size:14px;
  line-height:1.6;
  margin:14px 0 24px;
  color:#758999;
}

.state-view .primary {
  width:100%;
  margin-top:28px;
}

.state-icon {
  display:grid;
  place-items:center;
  margin:0 auto 26px;
  width:70px;
  height:70px;
  border:2px solid var(--ink);
  background:var(--lime);
  border-radius:17px;
  box-shadow:4px 4px 0 var(--ink);
  font-size:40px;
  font-weight:900;
  transform:rotate(-8deg);
}

.state-icon svg {
  width:35px;
  height:35px;
}

.loading-block {
  width:56px;
  height:56px;
  margin:0 auto 40px;
  display:grid;
  place-items:center;
  background:var(--blue);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  animation:loading-spin 2s ease-in-out infinite;
}

.loading-block span {
  width:18px;
  height:18px;
  background:var(--lime);
  border:2px solid var(--ink);
}






.small {
  font-size:10px;
  line-height:1.6;
  color:#92a3b2;
}

#offer-parent-note {
  margin-top:14px;
}

.success-view {
  text-align:center;
  padding-top:7px;
  animation:card-in .4s both;
}

.success-view h1 {
  font-size:32px;
  margin-top:20px;
  line-height:1.18;
}

.success-view h1 span {
  color:var(--blue);
}

.reward-art {
  height:208px;
  position:relative;
  isolation:isolate;
}

.reward-rays {
  position:absolute;
  width:220px;
  height:220px;
  left:50%;
  top:0;
  translate:-50% 0;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#c7ebff00 0deg 14deg,#c7ebff90 14deg 28deg);
  mask-image:radial-gradient(ellipse,#000 15%,transparent 70%);
  animation:ray-spin 35s linear infinite;
}

.reward-coin {
  display:grid;
  place-items:center;
  border:3px solid #2e7339;
  border-radius:24%;
  background:linear-gradient(135deg,#ecff99,#ade940);
  color:#2a8548;
  position:absolute;
  box-shadow:6px 8px 0 #50a443,inset 0 0 0 7px #d6ff87;
}

.reward-coin svg {
  width:65%;
  height:65%;
  stroke-width:1.2;
}

.coin-front {
  width:112px;
  height:112px;
  left:43%;
  top:50px;
  transform:rotate(15deg);
  animation:reward-bob 4s ease-in-out infinite;
}

.coin-back {
  width:85px;
  height:85px;
  left:23%;
  top:28px;
  transform:rotate(-16deg);
  animation:reward-bob 4s ease-in-out -2s infinite;
}

.reward-spark {
  position:absolute;
  color:#5ca6ee;
  font-size:35px;
  animation:twinkle 2.5s ease-in-out infinite;
}

.rs-one {
  left:14%;
  top:110px;
}

.rs-two {
  right:12%;
  top:23px;
  color:#c0da3d;
  font-size:27px;
  animation-delay:-1s;
}

.reward-cube {
  position:absolute;
  right:19%;
  bottom:14px;
  width:23px;
  height:23px;
  transform:rotate(-15deg);
  border:2px solid #58659c;
  box-shadow:4px 4px 0 #8b8ddd;
  background:#b2baff;
  animation:float 4s ease-in-out infinite;
}

.reward-card {
  position:relative;
  border:2px solid var(--ink);
  border-radius:18px;
  background:#fff;
  box-shadow:0 5px 0 #d2e1ec;
  padding:28px 15px 22px;
  margin-bottom:23px;
}

.offer-badge {
  position:absolute;
  top:-12px;
  left:50%;
  translate:-50% 0;
  white-space:nowrap;
  background:var(--blue);
  color:white;
  padding:6px 10px;
  border-radius:5px;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.reward-amount {
  font-size:60px;
  font-weight:1000;
  letter-spacing:-3px;
  line-height:1.1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}

.reward-amount svg {
  color:#6aaf3a;
  width:33px;
  height:33px;
  stroke-width:2.5;
}

.reward-currency {
  font-size:16px;
  color:#8194a3;
  font-weight:800;
  margin-top:3px;
}

.reward-price {
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:19px;
  font-weight:800;
  background:#effbdc;
  padding:5px 16px;
  border-radius:8px;
}

.reward-price strong {
  font-size:27px;
  color:#3a702b;
}

.reward-link {
  margin-top:18px;
  font-size:15px;
}

.preview-note {
  padding:14px 17px;
  background:#e9f1f7;
  border-radius:11px;
  font-size:12px;
  line-height:1.5;
  color:#6b8193;
}




.text-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  background:none;
  padding:16px 8px 0;
  font-weight:800;
  font-size:12px;
  color:#8193a2;
}

#confetti {
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:5;
}

.confetti-piece {
  position:absolute;
  top:-20px;
  width:9px;
  height:15px;
  border-radius:2px;
  background:#2863ef;
}

.confetti-piece:nth-child(4n+1) {
  background:#b8e644;
}

.confetti-piece:nth-child(4n+2) {
  background:#ff9a65;
}

.confetti-piece:nth-child(4n+3) {
  background:#b99cf5;
}

@keyframes float {
  0%,100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-8px);
  }
}

@keyframes coin-float {
  0%,100% {
    transform:translateY(0) rotate(-6deg);
  }
  50% {
    transform:translateY(-10px) rotate(8deg);
  }
}

@keyframes avatar-bounce {
  0%,100% {
    transform:translateY(0) rotate(-1deg);
  }
  50% {
    transform:translateY(-5px) rotate(1deg);
  }
}

@keyframes wave {
  0%,45%,100% {
    transform:rotate(0);
  }
  15%,30% {
    transform:rotate(-13deg);
  }
  22% {
    transform:rotate(2deg);
  }
}

@keyframes sticker-wiggle {
  0%,80%,100% {
    transform:rotate(9deg);
  }
  85%,95% {
    transform:rotate(4deg);
  }
  90% {
    transform:rotate(12deg);
  }
}

@keyframes twinkle {
  0%,100% {
    transform:scale(.8) rotate(0);
    opacity:.5;
  }
  50% {
    transform:scale(1.2) rotate(15deg);
    opacity:1;
  }
}

@keyframes card-in {
  from {
    opacity:0;
    transform:translateY(9px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes loading-spin {
  0%,20% {
    transform:rotate(0);
  }
  50%,70% {
    transform:rotate(90deg);
  }
  100% {
    transform:rotate(180deg);
  }
}

@keyframes ambient-float {
  0%,100% {
    transform:translateY(0) rotate(20deg);
  }
  50% {
    transform:translateY(-25px) rotate(40deg);
  }
}

@keyframes ray-spin {
  to {
    transform:rotate(360deg);
  }
}

@keyframes reward-bob {
  0%,100% {
    translate:0 0;
  }
  50% {
    translate:0 -9px;
  }
}

html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}

@media(prefers-reduced-motion:reduce) {
  html:not([data-motion=on]) * {
    animation:none!important;
    transition:none!important;
  }
}

svg:not(.world-art) {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(min-width:600px) {
  body {
    padding:28px 0;
  }
  .app-shell {
    min-height:0;
    border:1px solid #c9dce9;
    border-radius:27px;
    box-shadow:0 25px 90px #456d9b24;
    padding:28px 29px 20px;
  }
  .world {
    height:232px;
  }
  .question-panel {
    margin-top:22px;
  }
}

@media(max-width:374px) {
  .app-shell {
    padding-left:20px;
    padding-right:20px;
  }
  .header {
    margin-bottom:23px;
  }
  .world {
    height:190px;
  }
  .world-sticker {
    font-size:10px;
    padding:6px;
    top:28px;
  }
  .question-panel {
    margin-top:18px;
  }
  .question-panel h1 {
    font-size:26px;
  }
  .option {
    min-height:102px;
    padding:11px;
  }
  .option-text {
    font-size:13px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.3px;
  }
  .reward-amount {
    font-size:54px;
  }
  .success-view h1 {
    font-size:29px;
  }
  .reward-art {
    height:190px;
  }
  .reward-link {
    font-size:13px;
  }
}

@media(max-height:740px) and (max-width:599px) {
  .app-shell {
    padding-top:calc(18px + env(safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
  }
  .header {
    margin-bottom:20px;
  }
  .world {
    height:184px;
  }
  .question-panel {
    margin-top:16px;
  }
  .question-panel h1 {
    font-size:27px;
    margin-bottom:16px;
  }
  .option {
    min-height:96px;
  }
  .actions {
    margin-top:18px;
  }
}