:root{color-scheme:dark;--bg:#0a1026;--card:#142754;--text:#f4f8ff;--muted:#bac8e0;--yellow:#fae13d;--border:#304a83;--gradient:linear-gradient(135deg,#fae13d 8.3333%,#fa9d02 91.667%);--blue-gradient:linear-gradient(122deg,#044dea 8.3333%,#173aca 91.667%);--ink:#0a1837;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box} [hidden]{display:none!important}
body{margin:0;background:linear-gradient(134deg,#002272 8.3333%,var(--bg) 91.667%);background-attachment:fixed;color:var(--text);min-height:100vh;min-height:100svh;-webkit-font-smoothing:antialiased}
button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #fae13d;outline-offset:4px}button:disabled{cursor:wait;opacity:.65}
.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.sky span{position:absolute;color:#fae13d;opacity:.09;font-size:80px}.sky span:nth-child(1){top:5%;left:8%;font-size:115px}.sky span:nth-child(2){top:38%;right:3%;font-size:150px}.sky span:nth-child(3){top:82%;left:9%}.sky span:nth-child(4){top:72%;right:13%;font-size:40px}.sky span:nth-child(5){top:25%;left:22%;font-size:30px}.sky span:nth-child(6){top:4%;right:20%;font-size:40px}
.app{position:relative;width:min(100%,520px);margin:0 auto;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(18px + env(safe-area-inset-bottom,0px));min-height:100svh}.demo-notice{margin:0 0 16px;padding:8px 12px;background:#fae13d12;border:1px solid #fae13d26;border-radius:8px;color:#ffe697;font-size:11px;text-align:center}
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 84px;align-items:center;column-gap:12px;padding:20px 20px 0;background:var(--blue-gradient);border:1px solid #477de7;border-radius:20px;color:#f4f8ff;box-shadow:0 16px 65px #00103d40}
.hero-copy{position:relative;z-index:2;min-width:0}

.hero h1{font-size:clamp(22px,6vw,30px);letter-spacing:-1px;font-weight:800;line-height:1.15;white-space:nowrap;margin:0 0 8px}
.title-dot{color:#fae13d}
.hero p{font-size:13px;line-height:1.5;margin:0;color:#d4e3ff}
.hero strong{font-weight:750;color:var(--yellow)}
.hero-art{position:relative;width:84px;height:88px;z-index:1}
.hero-art img{position:absolute;width:80px;top:4px;right:0;transform:rotate(14deg);filter:drop-shadow(-4px 9px 9px #00144255)}
.orbit{position:absolute;border:1px solid #c9d9ff38;width:112px;height:48px;right:-15px;top:24px;border-radius:50%;transform:rotate(-38deg)}
.orbit-two{transform:rotate(40deg);width:98px;height:82px;top:1px;right:-7px;border-color:#c9d9ff22}
.art-spark{position:absolute;color:#fae13d}
.spark-one{right:-6px;top:-7px;font-size:19px}
.spark-two{left:0;bottom:-1px;font-size:17px}
.hero-bottom{position:relative;z-index:2;grid-column:1/-1;margin:16px -20px 0;padding:10px 16px;display:flex;justify-content:space-between;gap:8px;white-space:nowrap;border-top:1px solid #a6c5ff33;background:#04154726;font-size:10px;font-weight:600;color:#d5e3ff}
.progress-section{margin:27px 0 20px}.progress-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;font-size:11px;font-weight:500;color:var(--muted)}#step-count{color:var(--yellow);font-size:13px;font-weight:700;letter-spacing:1px}#step-count span{color:#8197be;font-weight:500}progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:5px;border:0;border-radius:20px;overflow:hidden;background:#243c6e}progress::-webkit-progress-bar{background:#243c6e;border-radius:20px}progress::-webkit-progress-value{background:var(--gradient);border-radius:20px;transition:width .3s}progress::-moz-progress-bar{background:var(--gradient);border-radius:20px}
.question-card{padding:24px;background:linear-gradient(150deg,var(--card),#102249);border:1px solid var(--border);border-radius:22px;box-shadow:0 15px 40px #00000014;animation:enter .3s ease}.question-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.question-number{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--yellow)}h2{font-size:24px;font-weight:650;line-height:1.22;letter-spacing:-.7px;margin:0 0 10px}h2:focus,h1:focus{outline:none}.question-card h2{margin-bottom:23px}.answer-fields{display:grid;gap:9px;min-height:66px}.number-label{display:block;font-size:10px;color:#bac8e0;margin:0 0 8px;letter-spacing:.4px}.number-input{width:100%;height:62px;padding:0 17px;background:#0b1d40;border:1px solid #304a83;border-radius:12px;color:var(--text);font-size:17px;transition:border-color .2s;appearance:textfield}.number-input::-webkit-inner-spin-button{appearance:none}.number-input::placeholder{color:#8197be;font-size:15px}.number-input:focus{border-color:#fae13d;outline:none;box-shadow:0 0 0 3px #fae13d0b}.option{position:relative;display:flex;align-items:center;gap:12px;min-height:51px;border:1px solid #304a83;border-radius:12px;padding:12px 14px;background:#0f2249;font-size:13px;cursor:pointer;transition:background .18s,border-color .18s}.option input{position:absolute;opacity:0;width:1px;height:1px}.radio-mark{display:grid;place-items:center;flex-shrink:0;width:19px;height:19px;border:1px solid #5d7db3;border-radius:50%;transition:all .2s}.option:has(input:checked){background:#fae13d0a;border-color:#fae13d}.option input:checked+.radio-mark{border:5px solid #fae13d;background:#142754}.option:has(input:focus-visible){outline:2px solid #fae13d;outline-offset:2px}.error-text{font-size:11px;line-height:1.5;color:#ffa6b7;min-height:17px;margin:10px 0 6px}.actions{display:flex;gap:10px}.button{display:flex;align-items:center;justify-content:center;gap:16px;min-height:54px;border:0;border-radius:12px;font-size:15px;font-weight:700;line-height:1.3;text-decoration:none;transition:filter .2s,transform .2s}.primary{flex:1;width:100%;background:var(--gradient);color:var(--ink);text-shadow:none;box-shadow:0 6px 24px #fabe3d26}.primary:hover{filter:brightness(1.07)}.primary:active{transform:translateY(1px)}.primary>span:last-child:not(:first-child){font-size:23px;font-weight:400}.back{flex:0 0 52px;background:#1a3566;color:#d5e3ff;font-size:22px;border:1px solid #3a5791}
.status-view{min-height:70vh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--muted);gap:13px}.status-view p{font-size:14px;line-height:1.6;max-width:330px}.status-view h1{color:var(--text);font-size:27px;margin:0}.status-view .button{flex:none;max-width:320px;margin-top:10px}.status-icon{font-size:65px;color:var(--yellow)}.loading-star{animation:pulse 1.5s ease infinite}
.success-view{text-align:center;animation:enter .45s ease}.celebration{position:relative;font-size:73px;padding:6px 0 18px;display:flex;align-items:center;justify-content:center;gap:30px}.celebration>span{font-size:25px;color:#fae13d;transform:rotate(12deg)}.celebration>span:first-child{font-size:19px;align-self:flex-end;margin-bottom:24px}.success-view h1{font-size:36px;letter-spacing:-1.3px;color:var(--yellow);margin:0 0 12px}.success-intro{font-size:15px;line-height:1.5;color:#bac8e0;margin:0 0 27px}.reward-card{position:relative;overflow:hidden;display:flex;align-items:center;flex-direction:column;padding:23px 20px 25px;border-radius:24px;background:var(--blue-gradient);box-shadow:0 14px 55px #00103d59;color:#fff}.reward-caption{font-size:9px;font-weight:700;letter-spacing:2px;opacity:.8}.reward-amount{color:var(--yellow);display:flex;align-items:center;justify-content:center;gap:13px;font-size:72px;font-weight:780;letter-spacing:-3px;line-height:1.35}.reward-amount img{transform:rotate(8deg);filter:drop-shadow(0 4px 5px #d47e3c26)}.reward-card>span:last-of-type{font-size:13px;letter-spacing:.2px}.reward-card .reward-decoration{position:absolute;font-size:120px;right:-12px;bottom:-28px;opacity:.15}.claim-card{margin-top:21px;background:linear-gradient(150deg,var(--card),#102249);border:1px solid var(--border);border-radius:22px;padding:22px}.claim-card h2{font-size:21px;margin:0 0 10px}.claim-card p{color:var(--muted);font-size:12px;line-height:1.65;margin:0 0 21px}.claim-card .reward-unavailable{color:#ffe697;font-size:12px;background:#fae13d09;padding:15px;border-radius:10px;margin:0}.text-button{color:#bac8e0;background:transparent;border:0;font-size:11px;margin:20px 0 0;padding:8px}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{50%{transform:scale(1.08) rotate(5deg);opacity:.7}}
@media(min-width:600px){.app{padding-top:36px;padding-bottom:28px}.hero{grid-template-columns:minmax(0,1fr) 90px;padding-top:22px}.hero h1{font-size:32px}.hero-art{width:90px;height:92px}.hero-art img{width:84px}.hero p{font-size:14px}.hero-bottom{font-size:11px}.question-card{padding:27px}h2{font-size:26px}.success-view{padding-top:8px}.success-view h1{font-size:41px}.reward-amount{font-size:83px}.claim-card{padding:26px}}
@media(max-width:360px){.app{padding-left:16px;padding-right:16px}.hero{grid-template-columns:minmax(0,1fr) 72px;column-gap:10px;padding:18px 18px 0}.hero-art{width:72px;height:80px}.hero-art img{width:72px}.hero h1{font-size:clamp(20px,6vw,22px);letter-spacing:-.8px}.hero p{font-size:12px}.hero-bottom{margin-left:-18px;margin-right:-18px;padding-left:13px;padding-right:13px;font-size:9px}.question-card{padding:20px}.success-view h1{font-size:31px}.reward-amount{font-size:63px}.reward-amount img{width:62px;height:62px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}