@font-face{font-family:Marker;src:url(fonts/marker.woff2)}@font-face{font-family:Barlow;src:url(fonts/barlow.woff2)}*{box-sizing:border-box}body{margin:0;background:#111410;color:#f6ebda;font-family:Barlow,Arial,sans-serif}body:before{content:"";position:fixed;inset:0;background:linear-gradient(#101410ce,#101410f5),url(art/csgo.webp) center/cover;z-index:-1}header{max-width:1500px;margin:auto;padding:40px 30px 12px}h1{font:36px Marker;margin:12px 0}header p{color:#c4bcad;max-width:740px;line-height:1.7}.toolbar{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}button{background:#24271f;border:1px solid #827052;color:#ffe6c0;padding:12px 18px;border-radius:4px;cursor:pointer;font:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffc6eb;outline-offset:5px}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;max-width:1500px;padding:20px 30px 45px;margin:auto}.variant{min-width:0}.stage{height:430px;display:grid;place-items:center;position:relative;border:1px solid #5e59403d;border-radius:8px;background:linear-gradient(#0e121299,#0e1212bf),url(art/csgo.webp) 18% 55%/auto 550px;overflow:hidden}.card{--glow:#ffba5e;position:relative;width:184px;min-height:245px;padding:28px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;text-decoration:none;color:#ffe6b7;background:linear-gradient(140deg,#332c1cc9,#141a17ed),url(art/csgo.webp) 65% 50%/auto 310px;border:1px solid currentColor;box-shadow:0 15px 36px #0008,0 0 20px color-mix(in srgb,currentColor 16%,transparent);border-radius:5px 2px 7px 3px;isolation:isolate;animation:colors 12s ease-in-out infinite,float 6s ease-in-out infinite}.card:before{content:"";position:absolute;inset:5px;border:1px solid currentColor;opacity:.35;pointer-events:none}.card:after{content:"";position:absolute;bottom:12px;width:65%;height:3px;background:currentColor;transform:rotate(-3deg);opacity:.8}.card svg{width:36px;height:36px;fill:currentColor;filter:drop-shadow(0 0 7px currentColor)}.card small{font-size:8px;letter-spacing:1.5px}.card strong{font:25px/1.25 Marker}.card .tagline{font-size:11px;color:#e2d8c9}.card .arrow{font-size:22px}.stars{position:absolute;inset:-26px;pointer-events:none}.stars i{font-style:normal;position:absolute;font-size:18px;text-shadow:0 0 10px currentColor;animation:twinkle 4s ease-in-out infinite}.stars i:nth-child(1){top:9%;left:2%}.stars i:nth-child(2){top:0;right:16%;animation-delay:-1s;font-size:12px}.stars i:nth-child(3){top:40%;right:0;animation-delay:-2.5s}.stars i:nth-child(4){bottom:0;left:15%;animation-delay:-1.8s}.stars i:nth-child(5){bottom:8%;right:13%;animation-delay:-.7s;font-size:12px}.smoke{position:absolute;inset:-35px;z-index:-1;pointer-events:none}.smoke i{position:absolute;width:135px;height:68px;border-radius:50%;background:radial-gradient(ellipse,#ffffff61,transparent 65%);filter:blur(13px);bottom:0;left:-28px;opacity:0;animation:smoke 8s ease-in-out infinite}.smoke i:nth-child(2){left:auto;right:-40px;animation-delay:-3s}.smoke i:nth-child(3){left:35px;animation-delay:-5.5s;width:150px}.variant h2{font-size:18px;margin:20px 0 8px}.variant p{font-size:14px;line-height:1.6;color:#beb8ab;margin:0}.number{font-size:11px;color:#e8b96f;letter-spacing:2px}.two .card{animation:colors 16s ease-in-out infinite,float 8s ease-in-out infinite}.two .smoke i{background:radial-gradient(ellipse,#ffffffa1,transparent 67%);height:105px;filter:blur(16px);animation-duration:10s}.three .stars{animation:orbit 22s linear infinite}.three .stars i{animation:counter 22s linear infinite,twinkle 5s ease-in-out infinite}.three .card{animation:colors 10s ease-in-out infinite,float 7s ease-in-out infinite}.four .stage:after{content:"";position:absolute;inset:12%;background:conic-gradient(from 0deg,transparent,#ef83cf50,transparent,#fff08a45,transparent,#c3a0ff50,transparent);filter:blur(25px);animation:orbit 18s linear infinite;pointer-events:none}.four .card{z-index:1;animation:colors 14s ease-in-out infinite,sway 9s ease-in-out infinite}.five .stars i{animation:rise 7s ease-in-out infinite}.five .stars i:nth-child(2){animation-delay:-1.4s}.five .stars i:nth-child(3){animation-delay:-2.8s}.five .stars i:nth-child(4){animation-delay:-4.2s}.five .stars i:nth-child(5){animation-delay:-5.6s}.five .card{animation:colors 9s ease-in-out infinite,float 5s ease-in-out infinite}.paused *, .paused *:after{animation-play-state:paused!important}@keyframes colors{0%,100%{color:#f1c275}33%{color:#ffa3d8}66%{color:#fff09a}83%{color:#d1b4ff}}@keyframes float{0%,100%{transform:translateY(3px) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}@keyframes sway{0%,100%{transform:translateY(2px) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.7)}25%{opacity:.7}70%{opacity:.35}100%{opacity:0;transform:translate(28px,-260px) scale(1.9)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes counter{to{transform:rotate(-360deg)}}@keyframes rise{0%{opacity:0;transform:translateY(85px) scale(.5)}40%{opacity:1}100%{opacity:0;transform:translateY(-95px) scale(1.2)}}@media(max-width:1250px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:15px;gap:15px}.stage{height:370px}header{padding:25px 20px 10px}}@media(max-width:480px){.grid{grid-template-columns:1fr}.stage{height:370px}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important}.smoke i{opacity:.15}.stars i{opacity:.8}}

/* Second preview edition: hand-drawn rabbit and displaced smoke ribbons. */
.card>svg{opacity:.8}.bunny-path{position:absolute;left:calc(50% - 26px);top:10px;width:52px;height:56px;z-index:5;pointer-events:none;animation:rabbit-hop 9s infinite cubic-bezier(.4,0,.2,1)}
.card .bunny{width:52px;height:56px;filter:drop-shadow(0 3px 2px #0006);overflow:visible}.bunny-eyes{transform-origin:35px 43px;animation:blink 5.3s infinite}.bunny-body{transform-origin:40px 77px;animation:squish 9s infinite}.two .bunny-path,.two .bunny-body{animation-duration:11s;animation-delay:-2s}.three .bunny-path,.three .bunny-body{animation-duration:8s;animation-delay:-4s}.four .bunny-path,.four .bunny-body{animation-duration:12s;animation-delay:-6s}.five .bunny-path,.five .bunny-body{animation-duration:7s;animation-delay:-1s}
.smoke{inset:-40px;z-index:3;opacity:.65;filter:url(#wispy);mix-blend-mode:screen}.smoke i,.two .smoke i{left:-10px;bottom:-15px;width:100px;height:170px;border-radius:48% 52% 39% 61%;background:radial-gradient(ellipse at 35% 60%,#ffffff00 20%,#eeeeee38 35%,#fff9 41%,#ffffff20 48%,transparent 60%);filter:blur(4px);animation:mist-rise 13s linear infinite}.smoke i:nth-child(2),.two .smoke i:nth-child(2){left:auto;right:-30px;width:95px;height:210px;animation-delay:-5s;transform:rotate(-20deg)}.smoke i:nth-child(3),.two .smoke i:nth-child(3){left:20px;width:150px;height:180px;animation-delay:-9s;opacity:.2}.two .smoke{opacity:.9}.three .smoke{opacity:.5}.four .smoke{opacity:.65}.five .smoke{opacity:.7}
@keyframes mist-rise{0%{opacity:0;transform:translate(-8px,45px) rotate(-12deg) scale(.6,1)}18%{opacity:.5}45%{opacity:.6;transform:translate(12px,-95px) rotate(14deg) scale(1.1,1.3)}75%{opacity:.3;transform:translate(-8px,-180px) rotate(-8deg) scale(1.4,1.5)}100%{opacity:0;transform:translate(30px,-275px) rotate(20deg) scale(1.8,1.8)}}
@keyframes rabbit-hop{0%,18%,100%{transform:translate(0,0) rotate(-4deg)}23%{transform:translate(0,5px) rotate(-8deg)}32%{transform:translate(42px,-94px) rotate(12deg)}41%{transform:translate(73px,-61px) rotate(0deg)}45%,60%{transform:translate(73px,-65px) rotate(0deg)}64%{transform:translate(73px,-60px) rotate(-10deg)}74%{transform:translate(25px,-105px) rotate(-14deg)}85%{transform:translate(0,3px) rotate(2deg)}90%{transform:translate(0,0) rotate(-4deg)}}
@keyframes squish{0%,18%,45%,60%,90%,100%{transform:scale(1)}23%,41%,64%,85%{transform:scale(1.13,.86)}32%,74%{transform:scale(.91,1.1)}}
@keyframes blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.08)}}
@media(prefers-reduced-motion:reduce){.bunny-path,.bunny-body,.bunny-eyes,.smoke i{animation:none!important}.bunny-path{transform:translate(73px,-65px)}.smoke{opacity:.2}.smoke i{opacity:.15}}

/* Plush edition: independent paw layer, foreground logo and play cycles. */
.card{padding-top:100px;min-height:325px!important;animation:float 7s ease-in-out infinite!important}.stage{height:480px}.one .card{color:#ffb5dd}.two .card{color:#ffdb83}.three .card{color:#d9b5ff}.four .card{color:#a9ebc9}.five .card{color:#ffe8bb}.card>small,.card>strong,.card>.tagline{position:relative;z-index:6}.smoke{z-index:1;opacity:.4}.stars{z-index:7}.logo-shield{position:absolute;top:31px;left:calc(50% - 31px);width:62px;height:58px;display:grid;place-items:center;z-index:5;background:linear-gradient(135deg,#403724,#1b201b);border:1px solid currentColor;border-radius:16px 13px 17px 12px;box-shadow:0 5px 12px #0007}.logo-shield svg{width:37px;height:37px;opacity:1}.mascot-scene{position:absolute;inset:0;pointer-events:none;z-index:4}.card .plush{position:absolute;top:2px;left:calc(50% - 40px);width:80px;height:80px;overflow:visible;filter:drop-shadow(0 3px 3px #0007);transform-origin:50% 90%;animation:plush-play 15s ease-in-out infinite}.greeting{animation:wave 15s ease-in-out infinite;transform-box:view-box}.two .plush,.two .greeting{animation-duration:17s;animation-delay:-3s}.three .plush,.three .greeting{animation-duration:16s;animation-delay:-7s}.four .plush{animation:slither-play 18s ease-in-out infinite;animation-delay:-4s}.four .greeting{animation-duration:18s;animation-delay:-4s}.five .plush,.five .greeting{animation-duration:19s;animation-delay:-10s}
@keyframes plush-play{0%,8%,100%{transform:translate(0,8px) scale(.65)}14%{transform:translate(-28px,-26px) rotate(-8deg) scale(.9)}21%,40%{transform:translate(-52px,4px) rotate(-5deg)}45%{transform:translate(-25px,-24px) rotate(6deg)}51%,57%{transform:translate(0,8px) scale(.65)}64%{transform:translate(30px,-26px) rotate(8deg) scale(.9)}71%,89%{transform:translate(52px,4px) rotate(5deg)}95%{transform:translate(22px,-24px) rotate(-6deg)}}
@keyframes wave{0%,21%,40%,71%,89%,100%{transform:rotate(0)}24%,30%,36%,74%,80%,86%{transform:rotate(22deg)}27%,33%,77%,83%{transform:rotate(-19deg)}}
@keyframes slither-play{0%,8%,100%{transform:translate(0,9px) scale(.65)}18%{transform:translate(-35px,5px) rotate(-10deg) scale(.9)}24%,40%{transform:translate(-52px,7px) rotate(3deg)}47%{transform:translate(-26px,10px) rotate(-9deg)}54%,60%{transform:translate(0,9px) scale(.65)}70%,88%{transform:translate(51px,5px) rotate(-4deg)}94%{transform:translate(25px,10px) rotate(9deg)}}
@media(prefers-reduced-motion:reduce){.card,.card .plush,.greeting{animation:none!important}.card .plush{transform:translate(-50px,3px)}}

/* Softer preview movement: short peeks, gentle greetings, long rests. */
.card .plush{animation-name:gentle-play;animation-duration:20s}.two .plush,.two .greeting{animation-duration:22s}.three .plush,.three .greeting{animation-duration:21s}.four .plush{animation-name:gentle-slither;animation-duration:24s}.four .greeting{animation-duration:24s}.five .plush,.five .greeting{animation-duration:23s}.greeting{animation-name:gentle-wave;animation-duration:20s}.card{animation-duration:10s!important}
@keyframes gentle-play{0%,12%,100%{transform:translate(0,8px) scale(.65)}20%{transform:translate(-28px,-7px) rotate(-3deg) scale(.9)}27%,44%{transform:translate(-48px,4px) rotate(-3deg)}52%,62%{transform:translate(0,8px) scale(.65)}70%{transform:translate(28px,-7px) rotate(3deg) scale(.9)}77%,91%{transform:translate(48px,4px) rotate(3deg)}97%{transform:translate(10px,7px) scale(.7)}}
@keyframes gentle-wave{0%,28%,43%,78%,92%,100%{transform:rotate(0)}31%,37%,81%,87%{transform:rotate(10deg)}34%,40%,84%,90%{transform:rotate(-7deg)}}
@keyframes gentle-slither{0%,12%,100%{transform:translate(0,9px) scale(.65)}20%{transform:translate(-27px,8px) rotate(-4deg) scale(.9)}27%,44%{transform:translate(-48px,7px) rotate(2deg)}52%,62%{transform:translate(0,9px) scale(.65)}70%{transform:translate(28px,7px) rotate(4deg) scale(.9)}77%,91%{transform:translate(48px,6px) rotate(-2deg)}}

html,body{margin:0;padding:0;width:260px;height:430px;overflow:hidden;background:transparent}body:before{display:none}.grid{position:relative;display:block;margin:0;padding:0;width:260px;height:430px}.variant{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1.2s ease,visibility 1.2s}.variant.active{opacity:1;visibility:visible;pointer-events:auto}.variant .stage{width:260px;height:405px;border:0;background:none;overflow:hidden}.variant h2,.variant>p{display:none}.variant:not(.active) *, .variant:not(.active) *:after{animation-play-state:paused!important}.widget-controls{position:absolute;bottom:1px;left:0;right:0;display:flex;justify-content:center;gap:7px}.widget-controls button{margin:0;padding:0;width:12px;height:12px;border-radius:50%;border:1px solid #cfb18d;background:#242621;cursor:pointer}.widget-controls button[aria-pressed=true]{background:#f5c8d9}.widget-controls button.pause{width:24px;border-radius:3px;color:#f8e5cc;font-size:10px;height:16px}.widget-controls button:focus-visible{outline:2px solid #fff;outline-offset:3px}@media(prefers-reduced-motion:reduce){.variant{transition:none}}