button{font:inherit;color:inherit;border:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

.bb{position:absolute;border-radius:50%;box-sizing:border-box;
background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 24%),radial-gradient(circle at 50% 38%,var(--a),var(--b) 72%,var(--r));
box-shadow:inset 0 -4px 0 rgba(0,0,0,.10),inset 0 3px 0 rgba(255,255,255,.45),0 3px 0 var(--r)}
.bb.pr{transform:translateY(3px) scale(1.08,.86);box-shadow:inset 0 -2px 0 rgba(0,0,0,.10),0 1px 0 var(--r)}
.bb.pp{background:conic-gradient(from 25deg,var(--p),var(--p2) 18%,var(--p) 34%,var(--p2) 52%,var(--p) 68%,var(--p2) 86%,var(--p));box-shadow:inset 0 3px 0 rgba(0,0,0,.08),inset 0 0 0 3px rgba(255,255,255,.35);transform:scale(.92)}
.bb.gd{--a:#FFF4C2;--b:#FFC531;--r:#E39A12}
.bb.gd.pp{--p:#FFE7A0;--p2:#FFD666}
.bb.tg{--a:var(--toughA);--b:var(--tough);--r:var(--toughR);box-shadow:inset 0 0 0 5px rgba(255,255,255,.5),inset 0 -6px 0 rgba(0,0,0,.12),0 4px 0 var(--r)}
.bb.ch{--b:var(--chain);--a:#FFFFFF;--r:var(--chain);outline:3px dotted var(--chain);outline-offset:3px}
.pip{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);display:flex;gap:6px}
.pip i{width:10px;height:10px;border-radius:5px;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.pip i.off{background:rgba(255,255,255,.35)}
.spk{position:absolute;width:16px;height:16px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.dot{position:absolute;border-radius:50%}
.ring{position:absolute;border-radius:50%;border:4px solid #fff;box-sizing:border-box}
.cap{font-size:13px;line-height:17px;font-weight:800;color:#556179}
.h3{font-size:15px;line-height:20px;font-weight:900;margin:0}
.lbl{font-size:12px;line-height:16px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#7A86A0}
.card{background:#fff;border-radius:24px;box-shadow:0 4px 0 #DCE6EF;padding:18px;box-sizing:border-box}
table.spec{border-collapse:collapse;width:100%;font-size:13px;line-height:18px}
table.spec td,table.spec th{padding:7px 10px;text-align:left;vertical-align:top;border-top:1px solid #E8EEF4}
table.spec th{font-weight:900;color:#7A86A0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-top:0}
table.spec td:first-child{font-weight:900;white-space:nowrap}
code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#F1F5F9;border-radius:6px;padding:1px 5px}


.gl{animation:gl 1.8s ease-in-out infinite}
@keyframes gl{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.1) rotate(20deg);opacity:1}}
.cpulse{animation:cp 1.4s ease-in-out infinite}
@keyframes cp{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.18)}}
.bob{animation:bob 1.6s ease-in-out infinite alternate}
@keyframes bob{from{translate:0 0}to{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){.gl,.cpulse,.bob,.spin,.sway,.fbob{animation:none}}
.fbob{transform-origin:50% 100%;animation:fbob 2.6s ease-in-out infinite}
@keyframes fbob{0%,100%{translate:0 0;scale:1 1}12%{scale:1.05 .95}45%{translate:0 -6px;scale:.97 1.03}70%{translate:0 -2px;scale:1 1}}
.cloud{position:absolute;border-radius:999px;background:linear-gradient(var(--cl,#FFFFFF) 55%,var(--clb,#E3EEFA));box-shadow:inset 0 -5px 0 var(--cls,#D2E2F3),0 4px 0 rgba(36,50,74,.08)}
.tile{position:absolute;border-radius:20px;box-sizing:border-box}

.cv{position:relative;width:160px;height:160px;border-radius:28px;overflow:hidden;box-shadow:inset 0 0 0 4px rgba(255,255,255,.9),0 5px 0 rgba(36,50,74,.14)}
.cv .ray{position:absolute;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.16) 0 12deg,rgba(255,255,255,0) 12deg 30deg);animation:cvray 24s linear infinite}
@keyframes cvray{to{rotate:360deg}}
.cv .glow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0))}
.cv .lock{position:absolute;inset:0;background:rgba(36,50,74,.34);backdrop-filter:saturate(.5)}
.cv-spin{animation:cvspin 3s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes cvspin{to{rotate:720deg}}
.cv-bob{animation:cvbob 2.4s ease-in-out infinite}
@keyframes cvbob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.cv-hop{transform-origin:50% 100%;animation:cvhop 1.6s infinite}
@keyframes cvhop{0%,100%{translate:0 0;scale:1.08 .9;animation-timing-function:cubic-bezier(.2,.8,.4,1)}45%{translate:0 -22px;scale:.96 1.05;animation-timing-function:cubic-bezier(.6,0,.8,.4)}90%{translate:0 0}}
.cv-fall{animation:cvfall 2.2s ease-in infinite}
@keyframes cvfall{0%{translate:0 -30px;opacity:0}15%{opacity:1}70%{translate:0 30px;opacity:1}85%,100%{translate:0 40px;opacity:0}}
@media (prefers-reduced-motion:reduce){.cv .ray,.cv-spin,.cv-bob,.cv-hop,.cv-fall{animation:none}}

.gb{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:22px;border:5px solid transparent;overflow:hidden;text-decoration:none;
 background:linear-gradient(180deg,#5FB4FF 0%,#2F86F5 48%,#1F6FE8 52%,#2A86FF 100%) padding-box,linear-gradient(180deg,#E8F6FF,#9FD3FF 45%,#5AA6EE 100%) border-box;
 box-shadow:0 0 0 2px #2A5BB8,0 6px 0 #173A8C,0 10px 14px rgba(23,58,140,.25),inset 0 -4px 0 rgba(10,60,160,.35);
 color:#FFFFFF;font-weight:900;letter-spacing:.03em;text-transform:uppercase;text-shadow:0 2px 0 rgba(10,50,140,.45)}
.gb::before{content:"";position:absolute;left:10px;right:10px;top:4px;height:42%;border-radius:14px 14px 40px 40px/14px 14px 18px 18px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.08))}
.gb>*{position:relative}
.gb.star::after{content:"";position:absolute;right:14px;bottom:8px;width:12px;height:12px;background:#FFFFFF;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.gb.green{background:linear-gradient(180deg,#7EE06A 0%,#3FBF3A 48%,#2EA82E 52%,#3FC43E 100%) padding-box,linear-gradient(180deg,#F0FFF0,#B9EBC0 45%,#6CC77A 100%) border-box;box-shadow:0 0 0 2px #1F7A2E,0 6px 0 #17602A,inset 0 -4px 0 rgba(20,110,40,.35);text-shadow:0 2px 0 rgba(20,90,30,.45)}
.gb.violet{background:linear-gradient(180deg,#A889FF 0%,#7B5CF5 48%,#6A48EE 52%,#7E62FF 100%) padding-box,linear-gradient(180deg,#F1EBFF,#C7B6FF 45%,#8E74F0 100%) border-box;box-shadow:0 0 0 2px #4A2FB0,0 5px 0 #3A2290,inset 0 -3px 0 rgba(60,30,160,.35);text-shadow:0 2px 0 rgba(40,20,120,.4)}
.gb.gold{background:linear-gradient(180deg,#FFE27A 0%,#FFC531 48%,#F5AE12 52%,#FFC531 100%) padding-box,linear-gradient(180deg,#FFFBEA,#FFE7A0 45%,#E8A93A 100%) border-box;box-shadow:0 0 0 2px #B9770A,0 6px 0 #9A5F00,inset 0 -4px 0 rgba(160,100,0,.3);color:#6A3F00;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.gb.white{background:linear-gradient(#FFFFFF,#F1F6FB) padding-box,linear-gradient(180deg,#FFFFFF,#CFE2F2) border-box;box-shadow:0 0 0 2px #B5C8DC,0 5px 0 #9FB4CA;color:#2F6BE0;text-shadow:none}
.gb:active{translate:0 4px}
.card2{background:#FFFFFF;border-radius:24px;box-shadow:0 4px 0 #C9DCE6}
.row{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 16px;font-size:17px;font-weight:800}
.row+.row{border-top:2px solid #EEF3F8}
.row .ic{flex:none;width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.row .sub{display:block;font-size:13px;line-height:17px;color:#7A86A0;font-weight:800}
.tg{flex:none;width:58px;height:34px;border-radius:17px;background:#D7E0EA;position:relative;box-shadow:inset 0 2px 0 rgba(0,0,0,.08)}
.tg i{position:absolute;left:3px;top:3px;width:28px;height:28px;border-radius:14px;background:#fff;box-shadow:0 2px 0 rgba(36,50,74,.2)}
.tg.on{background:#23A041}.tg.on i{left:27px}
.seg{flex:none;display:flex;background:#EEF3F8;border-radius:14px;padding:3px}
.seg span{padding:0 12px;height:30px;line-height:30px;border-radius:11px;font-size:14px;font-weight:900;color:#7A86A0}
.seg span.on{background:#fff;color:#24324A;box-shadow:0 2px 0 rgba(36,50,74,.12)}
.sh{margin:22px 4px 8px;font-size:13px;line-height:16px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#7A86A0}
.chev{flex:none;color:#A8B4C6}
.shd{position:absolute;left:50%;height:16px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(90,50,30,.28),rgba(90,50,30,0))}
.pbob{transform-origin:50% 100%;animation:pbob 2.6s ease-in-out infinite}
@keyframes pbob{0%,100%{scale:1 1;translate:0 0}50%{scale:.97 1.03;translate:0 -6px}}
.orb{position:absolute;animation:orb 3.4s ease-in-out infinite}
@keyframes orb{0%,100%{translate:0 0}50%{translate:0 -8px}}
.stink{animation:stink 2.4s ease-in-out infinite}
@keyframes stink{0%,100%{translate:0 0;opacity:.85}50%{translate:0 -6px;opacity:1}}
.twinkle{animation:twinkle 1.8s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.65}50%{opacity:1}}
.shine{position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 65%);background-size:250% 100%;animation:shine 3.6s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{background-position:120% 0}85%,100%{background-position:-60% 0}}
.dot3 i{display:inline-block;width:10px;height:10px;border-radius:5px;background:rgba(255,255,255,.5);margin:0 3px}.dot3 i.on{background:#fff;width:22px}
@media (prefers-reduced-motion:reduce){.pbob,.orb,.stink,.twinkle,.shine{animation:none}}

.bn-pro{position:relative;display:block;border-radius:28px;text-decoration:none;color:#fff;padding:5px;box-sizing:border-box;
 background:linear-gradient(180deg,#FFF4B8 0%,#FFD24A 30%,#E8A21A 60%,#FFE68A 80%,#C98200 100%);
 box-shadow:0 0 0 2px #8A5200,0 7px 0 #6B3E00,0 12px 18px rgba(60,20,120,.35)}
.bn-in{position:relative;width:100%;height:100%;border-radius:23px;overflow:hidden;
 background:radial-gradient(circle at 78% 40%,#9B6BFF 0%,#5B2BD6 45%,#2E1380 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),inset 0 -6px 0 rgba(20,0,60,.35)}
.bn-ray{position:absolute;left:78%;top:45%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:repeating-conic-gradient(rgba(255,220,120,.16) 0 9deg,rgba(255,220,120,0) 9deg 22deg);animation:cvray 20s linear infinite}
.bn-title{font-size:23px;line-height:26px;font-weight:900;letter-spacing:.01em;
 background:linear-gradient(180deg,#FFFBE0 0%,#FFE27A 45%,#FFB01A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 2px 0 #4A1A9E) drop-shadow(0 0 1px #4A1A9E)}
.bn-rib{position:absolute;left:-6px;top:-10px;height:30px;padding:0 14px 0 12px;rotate:-8deg;border-radius:10px;
 background:linear-gradient(180deg,#FF7AB8,#FF3D8A);box-shadow:0 0 0 2px #fff,0 3px 0 #B0145A;color:#fff;font-size:14px;line-height:30px;font-weight:900;letter-spacing:.08em;z-index:3}
.bn-tw{position:absolute;background:#FFF6C8;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:bntw 1.8s ease-in-out infinite}
@keyframes bntw{0%,100%{scale:.5;opacity:.4}50%{scale:1.1;opacity:1}}
.bn-crown{animation:bncr 2.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes bncr{0%,100%{rotate:-6deg;translate:0 0}50%{rotate:6deg;translate:0 -4px}}
@media (prefers-reduced-motion:reduce){.bn-ray,.bn-tw,.bn-crown{animation:none}}

.hz{position:absolute}
.hz .hw{position:absolute;inset:0;transform-origin:50% 92%;animation:hwob 7s infinite}
.hz .hf{position:absolute;inset:0;width:100%;height:100%;display:block}
.hz .hf0{animation:hf0 7s infinite}
.hz .hf1{opacity:0;animation:hf1 7s infinite}
.hz .hf2{opacity:0;animation:hf2 7s infinite}
.hz .hf3{opacity:0;transform-origin:50% 95%;animation:hf3 7s infinite}
@keyframes hf0{0%,29.9%{opacity:1}30%,95%{opacity:0}100%{opacity:1}}
@keyframes hf1{0%,29.9%{opacity:0}30%,51.9%{opacity:1}52%,100%{opacity:0}}
@keyframes hf2{0%,51.9%{opacity:0}52%,62.9%{opacity:1}63%,100%{opacity:0}}
@keyframes hf3{0%,62.9%{opacity:0;scale:.6;translate:0 0}
 63%{opacity:1;scale:.82 1.16;translate:0 -18px;animation-timing-function:cubic-bezier(.3,1.4,.6,1)}
 67%{scale:1.12 .88;translate:0 0}71%{scale:.95 1.06}75%{scale:1.02 .98}78%{scale:1}
 82%{scale:.98 1.02}86%{scale:1}90%{scale:.98 1.02}93%{opacity:1;scale:1}98%,100%{opacity:0;scale:.9}}
@keyframes hwob{0%,8%{rotate:0deg;scale:1}10%{rotate:-4deg}12%{rotate:4deg}14%,22%{rotate:0deg}
 23.5%{rotate:-8deg}25%{rotate:8deg}26.5%{rotate:-7deg}28%{rotate:6deg}30%{rotate:0deg;scale:1.06 .94}32%,44%{rotate:0deg;scale:1}
 45.5%{rotate:-9deg}47%{rotate:9deg}48.5%{rotate:-9deg}50%{rotate:8deg}52%{rotate:0deg;scale:1.07 .93}54%{scale:1}
 55%{rotate:-3deg}56%{rotate:3deg}57%{rotate:-3deg}58%{rotate:3deg}59%{rotate:-4deg}60%{rotate:4deg}61%{rotate:-5deg}62%{rotate:0deg;scale:1.1 .9}63%,100%{rotate:0deg;scale:1}}
.hz .hglow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,170,1),rgba(255,214,90,.6) 45%,rgba(255,214,90,0));opacity:0;animation:hglow 7s infinite}
@keyframes hglow{0%,48%{opacity:0;scale:.6}62%{opacity:1;scale:1}64%{opacity:1;scale:1.5}75%,92%{opacity:.55;scale:1.1}98%,100%{opacity:0;scale:.8}}
.hz .hflash{position:absolute;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,255,255,.9) 40%,rgba(255,255,255,0));opacity:0;animation:hflash 7s infinite}
@keyframes hflash{0%,62%{opacity:0;scale:.2}63%{opacity:1;scale:.5}70%{opacity:0;scale:2.2}100%{opacity:0}}
.hz .hrays{position:absolute;border-radius:50%;opacity:0;
 background:repeating-conic-gradient(rgba(255,236,140,.75) 0 9deg,rgba(255,236,140,0) 9deg 24deg);
 -webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);
 animation:hrays 7s infinite,hspin 16s linear infinite}
@keyframes hrays{0%,62%{opacity:0;scale:.4}66%{opacity:1;scale:1.05}90%{opacity:.8;scale:1}97%,100%{opacity:0;scale:.9}}
@keyframes hspin{to{rotate:360deg}}
.hz .chip{position:absolute;opacity:0;animation:chipA 7s infinite}
.hz .chip.b{animation-name:chipB}
@keyframes chipA{0%,29%{opacity:0;translate:0 0;rotate:0deg}30%{opacity:1}36%{opacity:1;translate:var(--dx) var(--dy);rotate:var(--r)}42%{opacity:0;translate:calc(var(--dx)*1.3) calc(var(--dy) + 40px)}100%{opacity:0}}
@keyframes chipB{0%,51%{opacity:0;translate:0 0;rotate:0deg}52%{opacity:1}58%{opacity:1;translate:var(--dx) var(--dy);rotate:var(--r)}63%{opacity:0;translate:calc(var(--dx)*1.3) calc(var(--dy) + 40px)}100%{opacity:0}}
.hz .shard{position:absolute;opacity:0;animation:shard 7s infinite}
@keyframes shard{0%,62.5%{opacity:0;translate:0 0;rotate:0deg;scale:.6}63%{opacity:1;scale:1}
 69%{translate:var(--dx) var(--dy);rotate:calc(var(--r)*.6);animation-timing-function:cubic-bezier(.5,0,.9,.5)}
 80%{opacity:1;translate:calc(var(--dx)*1.35) calc(var(--dy) + 150px);rotate:var(--r)}84%,100%{opacity:0;translate:calc(var(--dx)*1.4) calc(var(--dy) + 180px)}}
.hz .burst{position:absolute;opacity:0;animation:burst 7s infinite}
@keyframes burst{0%,62.5%{opacity:0;translate:0 0;scale:.2}64%{opacity:1;scale:1.2}76%{opacity:1;translate:var(--dx) var(--dy);scale:.9}86%,100%{opacity:0;translate:var(--dx) calc(var(--dy) + 20px);scale:.4}}
.hz .hheart{position:absolute;opacity:0;animation:hheart 7s infinite}
@keyframes hheart{0%,72%{opacity:0;translate:0 0;scale:.4}75%{opacity:1;scale:1}92%{opacity:0;translate:var(--dx) -70px;scale:.8}100%{opacity:0}}
.hz .hshd{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(90,50,30,.28),rgba(90,50,30,0));animation:hshd 7s infinite}
@keyframes hshd{0%,22%,32%,44%,54%,63%,100%{scale:1}25%,47%,58%{scale:.9 1}}
@media (prefers-reduced-motion:reduce){
 .hz .hw,.hz .hf0,.hz .hf1,.hz .hf2,.hz .hf3,.hz .hglow,.hz .hflash,.hz .hrays,.hz .chip,.hz .shard,.hz .burst,.hz .hheart,.hz .hshd{animation:none}
 .hz .hf0,.hz .hf1,.hz .hf2{opacity:0}.hz .hf3{opacity:1}.hz .hglow{opacity:.55}.hz .hrays{opacity:.6}}

.ob-btn{position:absolute;left:24px;right:24px;bottom:44px;height:70px;box-sizing:border-box;border-radius:22px;border:5px solid transparent;
 background:linear-gradient(180deg,#5FB4FF 0%,#2F86F5 48%,#1F6FE8 52%,#2A86FF 100%) padding-box,linear-gradient(180deg,#E8F6FF,#9FD3FF 45%,#5AA6EE 100%) border-box;
 box-shadow:0 0 0 2px #2A5BB8,0 6px 0 #173A8C,0 10px 14px rgba(23,58,140,.3),inset 0 -4px 0 rgba(10,60,160,.35);
 color:#FFFFFF;font-size:24px;line-height:60px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-align:center;text-decoration:none;display:block;overflow:hidden;
 text-shadow:0 2px 0 rgba(10,50,140,.45)}
.ob-btn::before{content:"";position:absolute;left:10px;right:10px;top:4px;height:42%;border-radius:14px 14px 40px 40px/14px 14px 18px 18px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.08))}
.ob-btn::after{content:"";position:absolute;right:14px;bottom:8px;width:12px;height:12px;background:#FFFFFF;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:.95}
.ob-btn:active{translate:0 4px;box-shadow:0 0 0 2px #2A5BB8,0 2px 0 #173A8C,inset 0 -2px 0 rgba(10,60,160,.35)}
.ob-btn.go{background:linear-gradient(180deg,#7EE06A 0%,#3FBF3A 48%,#2EA82E 52%,#3FC43E 100%) padding-box,linear-gradient(180deg,#F0FFF0,#B9EBC0 45%,#6CC77A 100%) border-box;
 box-shadow:0 0 0 2px #1F7A2E,0 6px 0 #17602A,0 10px 14px rgba(23,96,42,.3),inset 0 -4px 0 rgba(20,110,40,.35);text-shadow:0 2px 0 rgba(20,90,30,.45)}
.ob-sq{position:absolute;box-sizing:border-box;border-radius:20px;border:4px solid transparent;
 background:linear-gradient(180deg,#5FB4FF 0%,#2F86F5 48%,#1F6FE8 52%,#2A86FF 100%) padding-box,linear-gradient(180deg,#E8F6FF,#9FD3FF 45%,#5AA6EE 100%) border-box;
 box-shadow:0 0 0 2px #2A5BB8,0 5px 0 #173A8C,inset 0 -3px 0 rgba(10,60,160,.35);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ob-sq::before{content:"";position:absolute;left:6px;right:6px;top:3px;height:42%;border-radius:12px 12px 24px 24px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.08))}
.ob-sq.round{border-radius:50%}
.ob-sq.round::before{border-radius:50%/60% 60% 40% 40%}
.ob-sq.violet{background:linear-gradient(180deg,#A889FF 0%,#7B5CF5 48%,#6A48EE 52%,#7E62FF 100%) padding-box,linear-gradient(180deg,#F1EBFF,#C7B6FF 45%,#8E74F0 100%) border-box;box-shadow:0 0 0 2px #4A2FB0,0 5px 0 #3A2290,inset 0 -3px 0 rgba(60,30,160,.35)}
.ob-sq svg{position:relative}
.ob-dots{position:absolute;left:24px;top:67px;display:flex;justify-content:flex-start;gap:8px}
.ob-dots i{width:10px;height:10px;border-radius:5px;background:rgba(47,107,224,.25)}
.ob-dots i.on{width:28px;background:#2F6BE0}
.ob-skip{position:absolute;right:20px;top:50px;height:44px;box-sizing:border-box;padding:0 16px;border-radius:16px;border:3px solid transparent;background:linear-gradient(180deg,#A889FF 0%,#7B5CF5 48%,#6A48EE 52%,#7E62FF 100%) padding-box,linear-gradient(180deg,#F1EBFF,#C7B6FF 45%,#8E74F0 100%) border-box;box-shadow:0 0 0 2px #4A2FB0,0 4px 0 #3A2290;font-size:16px;line-height:38px;font-weight:900;color:#FFFFFF;text-shadow:0 2px 0 rgba(40,20,120,.4);text-decoration:none}
.ob-h{position:absolute;left:24px;right:24px;margin:0;text-align:center;font-size:30px;line-height:36px;font-weight:900}
.ob-p{position:absolute;left:32px;right:32px;margin:0;text-align:center;font-size:18px;line-height:25px;font-weight:800;color:#556179}
.ob-stage{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,#FFFFFF,rgba(255,255,255,.55) 60%,rgba(255,255,255,0))}
.shd{position:absolute;left:50%;height:16px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(90,50,30,.28),rgba(90,50,30,0))}
.pbob{transform-origin:50% 100%;animation:pbob 2.6s ease-in-out infinite}
@keyframes pbob{0%,100%{scale:1 1;translate:0 0}50%{scale:.97 1.03;translate:0 -6px}}


.lp{font-family:Nunito,system-ui,sans-serif;color:#24324A;position:relative;overflow:hidden}
.lp *{box-sizing:border-box}
.lp a:not(.gb){color:inherit}
.wr{max-width:1120px;margin:0 auto;padding:0 20px;position:relative}
.top{display:flex;align-items:center;gap:10px;padding:14px 0}
.top .ic{width:44px;height:44px;border-radius:12px;box-shadow:0 3px 0 rgba(36,50,74,.18);display:block}
.top .nm{font-size:22px;font-weight:900;letter-spacing:.01em}
.top .sp{flex:1}
.top .lk{display:none;gap:22px;font-size:16px;font-weight:900;color:#556179;margin-right:18px}
.top .lk a{text-decoration:none}
.btn-s{height:44px;padding:0 16px;font-size:15px;border-radius:16px;border-width:3px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 24px}
.hero h1{margin:0;font-size:38px;line-height:42px;font-weight:900;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:#7B4DFF}
.hero .lead{margin:12px 0 0;font-size:18px;line-height:25px;font-weight:800;color:#556179;max-width:520px}
.stage{position:relative;width:340px;height:330px;margin:4px auto 0;flex:none}
.stage .halo{position:absolute;left:20px;top:10px;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,#FFFFFF,rgba(255,255,255,.55) 60%,rgba(255,255,255,0))}
.ctas{display:flex;flex-direction:column;gap:14px;width:100%;max-width:420px;margin-top:8px}
.ctas .gb{height:68px;font-size:21px}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 6px;border-radius:17px;background:rgba(255,255,255,.85);box-shadow:0 2px 0 #C9DCE6;font-size:14px;font-weight:900;color:#46556E;white-space:nowrap}
.pill i{width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.sec{padding:34px 0}
.sec h2{margin:0;text-align:center;font-size:30px;line-height:36px;font-weight:900}
.sec .sub{margin:8px auto 0;text-align:center;font-size:17px;line-height:23px;font-weight:800;color:#556179;max-width:560px}
.steps{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}
.step{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border-radius:26px;padding:14px 16px 14px 14px;box-shadow:0 5px 0 #C9DCE6}
.step .pic{position:relative;flex:none;width:96px;height:96px;border-radius:22px;overflow:hidden}
.step .n{position:absolute;left:-8px;top:-8px;width:32px;height:32px;border-radius:16px;background:#7B4DFF;color:#fff;font-size:17px;line-height:32px;text-align:center;font-weight:900;box-shadow:0 3px 0 #4A22B8;z-index:2}
.step b{display:block;font-size:20px;line-height:24px;font-weight:900}
.step span{display:block;font-size:15px;line-height:20px;font-weight:800;color:#556179;margin-top:3px}
.games{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px;justify-items:center}
.gcard{position:relative;width:100%;max-width:173px;height:196px;border-radius:26px;background:#fff;box-shadow:0 4px 0 #C9DCE6}
.gcard .cvw{position:absolute;left:50%;top:8px;transform:translateX(-50%) scale(.95);transform-origin:50% 0}
.gcard .gn{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:16px;font-weight:900}
.coll{position:relative;margin-top:22px;border-radius:30px;padding:22px 16px 18px;overflow:hidden;
 background:radial-gradient(circle at 50% 30%,#FFF6D6,#FFE29A 70%);box-shadow:inset 0 0 0 4px rgba(255,255,255,.7),0 5px 0 #E5B44A}
.pets{display:flex;justify-content:center;align-items:flex-end;gap:4px;flex-wrap:wrap}
.pets .pc{position:relative;width:104px;text-align:center}
.pets .pc .ph{position:relative;height:108px}
.pets .pc .lb{font-size:13px;font-weight:900;color:#7A5A12;margin-top:4px}
.parents{display:grid;grid-template-columns:1fr;gap:12px;margin-top:22px}
.pf{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:22px;padding:16px;box-shadow:0 4px 0 #C9DCE6}
.pf .ico{flex:none;width:44px;height:44px;border-radius:15px;display:flex;align-items:center;justify-content:center}
.pf b{display:block;font-size:17px;line-height:22px;font-weight:900}
.pf span{display:block;font-size:14px;line-height:19px;font-weight:800;color:#556179;margin-top:2px}
/* офферы */
.offers{display:grid;grid-template-columns:1fr;gap:26px;margin-top:30px;align-items:stretch}
.of{position:relative;display:flex;flex-direction:column;border-radius:30px;padding:24px 20px 22px;background:#fff;box-shadow:0 6px 0 #C9DCE6,0 12px 20px rgba(36,50,74,.08)}
.of .tt{font-size:22px;line-height:26px;font-weight:900}
.of .ds{font-size:15px;line-height:20px;font-weight:800;color:#556179;margin-top:4px}
.of .pr{display:flex;align-items:baseline;gap:8px;margin:14px 0 2px}
.of .pr b{font-size:40px;line-height:44px;font-weight:900}
.of .pr span{font-size:15px;font-weight:900;color:#7A86A0}
.of ul{list-style:none;margin:12px 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.of li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:20px;font-weight:800}
.of li i{flex:none;width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-top:-1px}
.of li.off{color:#A3AEC0}
.of .gb{height:62px;font-size:19px}
.of .fine{margin-top:10px;text-align:center;font-size:12px;line-height:16px;font-weight:800;color:#7A86A0}
.of.hot{padding:7px;background:linear-gradient(180deg,#FFF6C4 0%,#FFD34D 22%,#D99410 48%,#FFE07A 70%,#B87406 100%);box-shadow:0 0 0 2px #6B3E00,0 7px 0 #5A3200,0 16px 26px rgba(40,10,90,.3)}
.of.hot .in{position:relative;display:flex;flex-direction:column;flex:1;border-radius:24px;padding:30px 18px 18px;overflow:hidden;color:#fff;
 background:radial-gradient(ellipse 80% 60% at 50% 18%,#9B6BFF 0%,#5A2BD0 50%,#2A1170 100%);box-shadow:inset 0 0 0 3px #FFE69A,inset 0 0 0 5px rgba(90,40,0,.45)}
.of.hot .ds,.of.hot .pr span{color:rgba(255,255,255,.8)}
.of.hot li{color:#fff}
.of.hot .fine{color:rgba(255,255,255,.75)}
.of.hot .ray{position:absolute;left:50%;top:70px;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:repeating-conic-gradient(rgba(255,214,110,.13) 0 8deg,rgba(255,214,110,0) 8deg 20deg);-webkit-mask:radial-gradient(closest-side,#000 8%,transparent 40%);mask:radial-gradient(closest-side,#000 8%,transparent 40%);animation:cvray 28s linear infinite;pointer-events:none}
.of.hot .in>*:not(.ray){position:relative}
.offers>*{min-width:0}
.of.hot .hp{position:relative;height:120px;margin:-6px 0 4px}
.rib{position:absolute;left:50%;top:-18px;transform:translateX(-50%);height:38px;padding:0 24px;z-index:6;white-space:nowrap;
 background:linear-gradient(180deg,#FFE58A,#F5B21A 55%,#D98C00);border-radius:10px;box-shadow:0 0 0 2px #6B3E00,0 4px 0 #5A3200,inset 0 2px 0 rgba(255,255,255,.7);
 color:#6A3200;font-size:16px;line-height:38px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.tag{display:inline-block;align-self:flex-start;height:28px;padding:0 12px;border-radius:14px;font-size:13px;line-height:28px;font-weight:900;margin-bottom:10px}
.flow{display:grid;grid-template-columns:1fr;gap:10px;margin-top:26px;background:#fff;border-radius:26px;padding:18px;box-shadow:0 4px 0 #C9DCE6}
.flow h3{margin:0 0 4px;font-size:19px;font-weight:900}
.fl{display:flex;gap:12px;align-items:center;font-size:15px;line-height:20px;font-weight:800;color:#46556E}
.fl b{flex:none;width:34px;height:34px;border-radius:17px;background:#E6F2FF;color:#2F6BE0;font-size:17px;line-height:34px;text-align:center;font-weight:900}
.pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pay span{height:30px;padding:0 12px;border-radius:10px;background:#F1F5F9;font-size:13px;line-height:30px;font-weight:900;color:#556179}
.gift{display:flex;align-items:center;gap:14px;margin-top:18px;border-radius:24px;padding:14px 16px;text-decoration:none;
 background:linear-gradient(180deg,#FFD6EA,#FFB3D6);box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 5px 0 #E07FAE}
.gift b{display:block;font-size:18px;font-weight:900;color:#4A1235}
.gift span{display:block;font-size:14px;line-height:18px;font-weight:800;color:#8A3A68}
.faq{display:flex;flex-direction:column;gap:10px;margin-top:22px;max-width:760px;margin-left:auto;margin-right:auto}
.faq details{background:#fff;border-radius:20px;box-shadow:0 4px 0 #C9DCE6;padding:0 18px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:62px;font-size:17px;line-height:22px;font-weight:900}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;flex:none;width:30px;height:30px;border-radius:15px;background:#EEF3F8;color:#2F6BE0;font-size:22px;line-height:30px;text-align:center}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 16px;font-size:15px;line-height:21px;font-weight:800;color:#556179}
.fin{position:relative;margin:30px 0 0;border-radius:32px 32px 0 0;padding:34px 20px 40px;text-align:center;color:#fff;overflow:hidden;
 background:radial-gradient(circle at 50% 20%,#B79CFF 0%,#7B4DFF 40%,#4A22B8 80%)}
.fin h2{margin:0;font-size:30px;line-height:36px;font-weight:900;text-shadow:0 3px 0 rgba(30,10,90,.35)}
.fin p{margin:8px auto 0;font-size:16px;line-height:22px;font-weight:800;color:rgba(255,255,255,.85);max-width:480px}
.fin .gb{height:66px;font-size:20px;max-width:420px;margin:20px auto 0}
.fin .legal{margin-top:26px;font-size:12px;line-height:18px;font-weight:800;color:rgba(255,255,255,.7)}
.store{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.store a{display:flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:14px;background:#1B1F3B;color:#fff;text-decoration:none;font-size:14px;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.store a small{display:block;font-size:10px;line-height:12px;font-weight:800;opacity:.75}
/* ---------- desktop ---------- */
@media (prefers-reduced-motion:reduce){.of.hot .ray{animation:none}}

/* Desktop (board Landing-Desktop: the same page at 1280 px) */
@media (min-width: 900px) {
.lp .wr{padding:0 40px}

.lp .top{padding:22px 0}

.lp .top .lk{display:flex}

.lp .hero{flex-direction:row;text-align:left;align-items:center;gap:24px;padding:20px 0 40px}

.lp .hero .tx{flex:1}

.lp .hero h1{font-size:60px;line-height:64px}

.lp .hero .lead{font-size:21px;line-height:30px;margin-top:18px}

.lp .ctas{flex-direction:row;max-width:none;margin-top:28px}

.lp .ctas .gb{flex:none;white-space:nowrap;padding:0 22px;font-size:16px;height:62px}

.lp .hero .tx{min-width:0;max-width:660px}

.lp .stage{flex:none}

.lp .trust{justify-content:flex-start}

.lp .stage{zoom:1.2;margin:0}

.lp .sec{padding:56px 0}

.lp .sec h2{font-size:40px;line-height:46px}

.lp .steps{grid-template-columns:repeat(3,1fr);gap:22px}

.lp .step{flex-direction:column;text-align:center;padding:22px}

.lp .step .pic{width:150px;height:150px}

.lp .games{grid-template-columns:repeat(7,1fr);gap:12px}

.lp .gcard{max-width:150px;height:174px}

.lp .gcard .cvw{transform:translateX(-50%) scale(.82)}

.lp .pets{gap:22px}

.lp .parents{grid-template-columns:repeat(2,1fr);gap:16px}

.lp .offers{grid-template-columns:1fr 1.12fr 1fr;gap:26px;align-items:stretch}

.lp .flow{grid-template-columns:auto 1fr 1fr 1fr;align-items:center;gap:22px}

.lp .flow h3{margin:0}

.lp .fin{border-radius:40px;margin:30px 40px 40px;padding:48px}

}

/* The landing's frame around the board's styles (board.css, ported from the Claude Design board "Landing"):
   the board's page background on the body, and what the site needs that the board doesn't show. */
html { -webkit-text-size-adjust: 100%; }
body.landing {
  margin: 0; min-height: 100vh; font-family: Nunito, system-ui, sans-serif; color: #24324A;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 2px, transparent 2.6px) 0 0 / 28px 28px, linear-gradient(#CDEEF3, #E4F4FF 40%, #F3F9FF);
  background-attachment: scroll;
}
.landing .ic-link { display: block; border-radius: 12px; }
.landing a:focus-visible, .landing summary:focus-visible { outline: 3px solid #1B5FD1; outline-offset: 3px; }
.landing .fin .legal a { color: inherit; }
.landing .store a { min-height: 48px; }
/* Two offers, not the board's three: the free set and Pro */
@media (min-width: 900px) {
  .lp .offers { grid-template-columns: 1fr 1.12fr; max-width: 860px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
  .lp .hz .hf0, .lp .hz .hf1, .lp .hz .hf2 { opacity: 0; } .lp .hz .hf3 { opacity: 1; }
}
/* Narrow phones: the hero buttons keep their words on one line */
@media (max-width: 379px) { .lp .ctas .gb { font-size: 17px; } }