.welcome-box{padding:0;border:1px solid #8cc54088;border-radius:28px;background:#073c29;color:#fff9e8;width:min(900px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 32px 100px #00180c99;font:16px/1.55 Arial,sans-serif}
.welcome-box[open]{display:grid;grid-template-columns:.9fr 1.1fr;animation:wb-enter .45s cubic-bezier(.16,1,.3,1)}
.welcome-box::backdrop{background:#001c16bb;backdrop-filter:blur(9px)}
.welcome-box *{box-sizing:border-box}.welcome-box button{font:700 14px/1.3 Arial,sans-serif;cursor:pointer;min-height:44px}
.welcome-box button:focus-visible{outline:3px solid #fff;outline-offset:3px}.welcome-box button:disabled{opacity:.4;cursor:default}
.wb-close{position:absolute;z-index:3;right:12px;top:12px;width:44px;border:1px solid #ffffff33;background:#073c29;border-radius:50%;color:#fff;font-size:28px!important}
.wb-art{position:relative;min-height:470px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#4b8a39,#155d35 60%,#0b422b);isolation:isolate}
.wb-orbit{position:absolute;width:340px;height:340px;border:1px dashed #b5e57870;border-radius:50%;z-index:-1;animation:wb-turn 32s linear infinite}
.wb-orbit::after{content:'';position:absolute;inset:28px;border:1px solid #ffffff22;border-radius:50%}
.wb-content{padding:55px 34px 24px}.wb-kicker{font:700 10px/1.5 Arial,sans-serif;letter-spacing:.14em;color:#b2e475;margin:0 0 16px}
.welcome-box h2{font:700 clamp(32px,4vw,45px)/1.04 SukrolBebas,Impact,sans-serif!important;margin:0 0 20px;color:#fff9e8}
.wb-content>p{margin-top:0}.wb-note{font-size:12px;color:#c1d5ba;padding-left:12px;border-left:2px solid #8cc540}
.wb-progress{display:flex;align-items:center;gap:7px;margin:22px 0 14px}.wb-progress span{font-size:10px;letter-spacing:.12em;margin-right:auto}.wb-progress i{height:5px;width:24px;background:#ffffff25;border-radius:4px}.wb-progress .current{width:45px;background:#8cc540;transition:width .3s}
.wb-actions{display:flex;align-items:center;gap:12px}.wb-back{background:none;color:#d5e8c9;border:0;padding:10px 0}.wb-next{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1;border:0;background:#8cc540;color:#073c29;border-radius:14px;padding:14px 16px;box-shadow:0 4px 0 #467923;transition:transform .2s}.wb-next:hover{transform:translateY(-2px)}.wb-next span{font-size:24px}
.wb-skip{display:block;margin:10px auto 0;background:none;color:#c1d5ba;border:0;text-decoration:underline;text-underline-offset:4px;font-size:12px!important}.wb-content [role=alert]{font-size:12px;color:#ffddae;margin:8px 0 0}.wb-content [role=alert]:empty{display:none}
.wb-cards{position:relative;width:290px;height:240px}.wb-cards>span{position:absolute;left:90px;top:40px;width:115px;height:156px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:18px;border:1px solid #b5e578;background:#0e4f2d;box-shadow:0 14px 30px #001c1655;transform-origin:50% 150%;transform:rotate(calc((var(--i) - 2)*14deg));animation:wb-fan .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*90ms)}
.wb-cards b{font:60px/1 Arial,sans-serif;color:#8cc540}.wb-cards small{font-size:11px;margin-top:14px}.wb-cards>span:last-child{background:#8cc540;color:#073c29}.wb-cards>span:last-child b{color:#073c29}
.wb-play{width:82%;text-align:center}.wb-question{display:block;padding:18px 8px;background:#073c29;border:1px solid #8cc540;border-radius:16px;font:30px/1 SukrolBebas,Impact,sans-serif;animation:wb-enter .5s both}.wb-play>div{display:flex;justify-content:center;gap:10px;margin:25px 0}.wb-play i{display:grid;place-items:center;width:65px;height:65px;border:1px solid #ffffff55;border-radius:14px;font:40px/1 Arial,sans-serif;animation:wb-answer .7s ease both}.wb-play i:last-child{background:#8cc540;color:#073c29;animation-delay:.45s}.wb-response{font-size:11px;letter-spacing:.12em;color:#d5e8c9}
.wb-result{width:76%;text-align:center}.wb-result>span{font-size:12px;letter-spacing:.15em}.wb-result>div{height:150px;display:flex;align-items:end;justify-content:center;gap:14px;margin:20px 0}.wb-result i{width:40px;background:#8cc540;border-radius:9px 9px 0 0;height:35%;transform-origin:bottom;animation:wb-bar 1s ease both}.wb-result i:nth-child(2){height:55%;animation-delay:.12s}.wb-result i:nth-child(3){height:75%;animation-delay:.24s}.wb-result i:nth-child(4){height:100%;background:#d1efac;animation-delay:.36s}.wb-result b{display:block;font-size:18px;color:#d1efac}.wb-result small{display:block;font-size:10px;margin-top:12px}
.week-welcome-help{display:inline-flex;min-height:44px;align-items:center;padding:10px 16px;border:1px solid #8cc54077;border-radius:12px;background:#8cc54018;color:#eff8dc;font:700 14px Arial,sans-serif;cursor:pointer;margin-bottom:16px}
@keyframes wb-turn{to{transform:rotate(360deg)}}@keyframes wb-enter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes wb-fan{from{opacity:0;transform:rotate(0) translateY(35px)}to{opacity:1;transform:rotate(calc((var(--i) - 2)*14deg))}}@keyframes wb-bar{from{transform:scaleY(.05)}to{transform:scaleY(1)}}@keyframes wb-answer{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}}
@media(max-width:650px){.welcome-box[open]{grid-template-columns:1fr;width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:22px}.wb-art{min-height:175px;height:175px}.wb-orbit{width:230px;height:230px}.wb-content{padding:22px 22px 16px}.welcome-box h2{font-size:34px;margin-bottom:12px}.wb-content>p{font-size:14px;line-height:1.5}.wb-content .wb-note{font-size:11px}.wb-kicker{margin-bottom:10px!important;font-size:9px!important}.wb-progress{margin:14px 0 10px}.wb-cards{scale:.65;height:220px}.wb-play{scale:.7;width:340px}.wb-result{scale:.65;width:280px}.wb-result>div{height:105px}.wb-skip{margin-top:8px}.wb-close{top:8px;right:8px}}
@media(prefers-reduced-motion:reduce){.welcome-box,.welcome-box *{animation:none!important;transition:none!important}}
/* Illustrated campaign edition. */
.welcome-box{width:min(960px,calc(100vw - 32px));border-color:#8cc54080;border-radius:30px;background:#063825}
.welcome-box[open]{grid-template-columns:1fr 1.1fr}
.wb-art{min-height:540px;background:radial-gradient(ellipse at 45% 45%,#438c40 0%,#155c35 45%,#063825 100%);border-right:1px solid #8cc54035}
.wb-art::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#b9e68b40 1px,transparent 1px);background-size:20px 20px;mask-image:linear-gradient(transparent,#000,transparent)}
.wb-art-brand{position:absolute;left:26px;top:24px;width:110px}.wb-art-brand img{width:100%;display:block}
.wb-art-number{position:absolute;right:24px;top:16px;font:700 88px/1 SukrolBebas,Impact,sans-serif;color:#8cc54030}
.wb-art-caption{position:absolute;left:0;right:0;bottom:28px;text-align:center;font:700 10px/1.4 Arial,sans-serif;letter-spacing:.16em;color:#cfe8b9}
.wb-content{padding:62px 36px 26px;display:flex;flex-direction:column}
.welcome-box h2{font-size:clamp(36px,4vw,48px)!important;letter-spacing:.005em;line-height:1.02!important}
.welcome-box h2>span{display:block}.welcome-box .wb-title-accent{color:#a5db62}
.wb-kicker{width:fit-content;padding:7px 10px;border:1px solid #8cc54055;background:#8cc5400c;border-radius:7px}
.wb-note{padding:10px 12px;border-radius:0 9px 9px 0;background:#8cc5400b}
.wb-progress{margin-top:auto;padding-top:18px}.wb-next{box-shadow:0 4px 0 #497729,0 8px 25px #001c1633;border-radius:14px}
.wb-next>span{display:grid;place-items:center;background:#0e4f2d;color:#b5e57a;width:32px;height:32px;flex:none;border-radius:9px}
.wb-close{height:44px;min-height:44px;padding:0!important;line-height:1!important}
.wb-cards{width:320px;height:300px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-content:center;rotate:-5deg}
.wb-cards>span{position:relative;left:auto;top:auto;width:auto;height:125px;grid-column:span 2;overflow:hidden;display:block;border-radius:12px;background:#0b402c!important;color:#fff!important;transform:none;transform-origin:center;animation:wb-tile .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*100ms)}
.wb-cards>span:nth-child(4){grid-column:2/4}.wb-cards>span:nth-child(5){grid-column:4/6}
.wb-cards img{display:block;width:100%;height:90px;object-fit:cover}.wb-cards small{display:block;margin:0;padding:9px 3px;text-align:center;font:700 10px Arial,sans-serif;white-space:nowrap}
.wb-play{padding:25px 20px;border-radius:22px;background:#073c29dd;border:1px solid #a4d96588;box-shadow:12px 16px 0 #082f2088;rotate:-4deg}
.wb-question{border:0;border-bottom:1px solid #8cc54055;border-radius:0;background:transparent;font-size:32px;padding:8px 0 22px}
.wb-play>div{gap:9px}.wb-play i{width:60px;height:60px;background:#ffffff08}.wb-play i:last-child{box-shadow:0 0 0 5px #8cc54020}
.wb-response{display:block;font-size:9px;letter-spacing:.1em}
.wb-result{width:76%;padding:20px;background:#073c29e8;border:1px solid #a4d96588;border-radius:24px;box-shadow:12px 16px 0 #082f2088;rotate:3deg}
.wb-trophy{display:block;width:78px;height:78px;margin:0 auto 14px;color:#b7e77f;animation:wb-medal .8s cubic-bezier(.16,1,.3,1) both}
.wb-result>span{font-size:10px}.wb-result>div{height:95px;margin:16px 0}.wb-result i{width:32px}.wb-result b{display:inline-block;background:#8cc54020;border-radius:30px;padding:6px 14px;font-size:12px}.wb-result small{font-size:9px}
@keyframes wb-tile{from{opacity:0;transform:translateY(35px) rotate(-12deg) scale(.85)}to{opacity:1;transform:none}}
@keyframes wb-medal{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:none}}
@media(max-width:650px){
 .welcome-box[open]{grid-template-columns:1fr}.wb-art{min-height:210px;height:210px;border-right:0;border-bottom:1px solid #8cc54035}
 .wb-art-brand{width:70px;top:14px;left:16px}.wb-art-number{font-size:60px;right:16px;top:10px}.wb-art-caption{bottom:10px;font-size:8px}
 .wb-cards{scale:.58;height:300px;position:absolute;top:-45px}.wb-play{scale:.62;width:320px}.wb-result{scale:.52;width:300px;position:absolute;top:-49px}
 .wb-content{padding:20px 22px 16px}.welcome-box h2{font-size:34px!important;margin-bottom:12px}.wb-kicker{padding:5px 8px}.wb-progress{padding-top:0;margin-top:4px}.wb-note{padding:8px 10px}.wb-next{font-size:13px!important}
}
@media(max-height:700px) and (max-width:650px){.wb-art{height:160px;min-height:160px}.wb-cards{scale:.44;top:-70px}.wb-play{scale:.5}.wb-result{scale:.42;top:-73px}.wb-art-caption{display:none}.wb-content{padding-top:16px}}
/* Scene choreography. Text stays still once its short entrance completes. */
.wb-content{animation:wb-copy-in .45s ease-out both}
.wb-art::after{content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:linear-gradient(120deg,transparent 35%,#b8ef5a18 50%,transparent 65%);animation:wb-light 7s ease-in-out infinite}
.wb-cards>span{animation:wb-tile .7s cubic-bezier(.16,1,.3,1) calc(var(--i)*100ms) both,wb-card-float 4s ease-in-out calc(.8s + var(--i)*.25s) infinite}
.wb-cards>span:nth-child(even){animation-direction:normal,reverse}
.wb-play{animation:wb-panel-float 5s ease-in-out infinite}
.wb-play i:last-child{animation:wb-answer .7s ease .45s both,wb-answer-glow 3s ease-in-out 1.2s infinite}
.wb-trophy{animation:wb-medal .8s cubic-bezier(.16,1,.3,1) both,wb-trophy-float 3.5s ease-in-out .8s infinite}
.wb-result i{animation:wb-bar-loop 4.5s cubic-bezier(.2,.7,.2,1) infinite}
.wb-result i:nth-child(2){animation-delay:.12s}.wb-result i:nth-child(3){animation-delay:.24s}.wb-result i:nth-child(4){animation-delay:.36s}
.wb-result b{animation:wb-saved-glow 4.5s ease-in-out 1s infinite}
.wb-next>span{transition:transform .25s,background .25s}.wb-next:hover>span{transform:rotate(45deg);background:#073c29}
.wb-art:hover *,.wb-art:hover::after{animation-play-state:paused}
@keyframes wb-copy-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes wb-card-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes wb-panel-float{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -8px;rotate:-1deg}}
@keyframes wb-answer-glow{0%,100%{box-shadow:0 0 0 5px #8cc54020}50%{box-shadow:0 0 0 12px #8cc54008,0 0 24px #8cc54055}}
@keyframes wb-trophy-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -6px;rotate:-7deg}}
@keyframes wb-bar-loop{0%,8%{transform:scaleY(.08)}35%,88%{transform:scaleY(1)}100%{transform:scaleY(.08)}}
@keyframes wb-saved-glow{0%,100%{box-shadow:0 0 0 0 #8cc54000}50%{box-shadow:0 0 0 6px #8cc54014}}
@keyframes wb-light{0%,100%{transform:translateX(-30%) rotate(-10deg);opacity:.3}50%{transform:translateX(30%) rotate(10deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.welcome-box,.welcome-box *,.welcome-box *::before,.welcome-box *::after{animation:none!important;transition:none!important}}