.pl{--gc:#33BC86;padding-bottom:40px}
.pl .btn{min-height:48px;gap:8px}
.pl .btn.primary{background:#105157;color:#fff}.pl .btn.primary:hover{background:#20816C}
.pl .btn.ghost{background:#fff;color:#105157;border-color:#105157}.pl .btn.ghost:hover{background:#E6F7F0}
.pl .btn[disabled]{opacity:.45;cursor:default}
.pl svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl b[lang=en],.pl .bub,.pl .chips b{font-family:"LLR Sans",system-ui,sans-serif}
.phero{background:#105157 url(/pattern-dark.svg) center/520px;color:#fff;padding:48px 0 64px;overflow:hidden}
.phero .wrap{position:relative}
.phero .eyebrow{color:#84D6B6}
.phero h1{color:#fff;margin:0 0 12px;font-size:34px;line-height:1.25}
html[lang=en] .phero h1{font-family:"LLR Serif",serif;font-weight:800;letter-spacing:.02em}
.phero .lead{max-width:520px;margin:0;color:#E6F7F0;font-size:17px}
.floaty{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.floaty span{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:16px;padding:8px 10px 6px;box-shadow:0 18px 30px -16px rgba(0,0,0,.5);transform:rotate(calc((var(--i) - 2.5) * 3deg));animation:bob 4s ease-in-out calc(var(--i)*-.6s) infinite}
.floaty img{width:56px;height:56px;border-radius:10px}
@media (max-width:759px){.floaty span:nth-child(n+5){display:none}}
.floaty b{color:#105157;font:800 18px/1.2 "LLR Sans",sans-serif}
@keyframes bob{50%{translate:0 -6px}}
.groups{margin-top:-32px;position:relative;z-index:2}
.glist{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grp{background:#fff;border-radius:20px;padding:18px;box-shadow:0 1px 2px rgba(16,81,87,.06),0 20px 40px -24px rgba(16,81,87,.45);border-top:6px solid var(--gc);display:flex;flex-direction:column;gap:12px}
.grp.open{grid-column:1/-1}
.gh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gn{font-weight:700;font-size:18px;color:#105157}
.free{background:#E6F7F0;color:#1C6F5D;font-weight:700;font-size:14px;padding:4px 12px;border-radius:999px}
.lk{display:inline-flex;align-items:center;gap:6px;color:#42757A;font-size:14px;font-weight:600}.lk svg{width:18px;height:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips b{min-width:44px;height:44px;padding:0 8px;display:grid;place-items:center;border-radius:12px;background:#F2FAF6;color:#105157;font-size:20px;font-weight:800}
.locked .chips b{color:#42757A;background:#F4F6F6}
.btn.sub{background:#fff;color:#105157;border-color:#33BC86;align-self:flex-start}.btn.sub:hover{background:#E6F7F0}
.gl{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gbtn{position:relative;display:flex;gap:14px;align-items:center;min-height:84px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#105157,#1C6F5D);color:#fff;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 14px 28px -18px rgba(16,81,87,.8)}
.gbtn:hover{transform:translateY(-3px) perspective(600px) rotateX(4deg)}
.gbtn .gi{width:44px;height:44px;flex:none;padding:10px;border-radius:12px;background:rgba(255,255,255,.14);stroke:#84D6B6}
.gbtn b{display:block;font-size:17px}.gbtn small{display:block;color:#E6F7F0;font-size:14px;line-height:1.5}
.gbtn .ok{position:absolute;inset-inline-end:10px;top:10px;width:26px;height:26px;border-radius:50%;background:#33BC86;color:#0B3B3F;display:grid;place-items:center;font-style:normal;font-weight:800}
.hint{margin:0;color:#42757A;font-size:14px}
.btn.cert{background:#33BC86;color:#0B3B3F;align-self:flex-start}.btn.cert svg{fill:currentColor;stroke:none}
.subs{margin-top:40px}
.subcard{display:grid;gap:20px;background:#E6F7F0;border:1px solid #CEEFE2;border-radius:24px;padding:24px}
.subcard h2{margin:0 0 8px;color:#105157;font-size:26px}
.subcard ul{margin:0;padding-inline-start:20px;color:#105157}
.price{display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:18px;padding:20px;text-align:center}
.price b{font-size:28px;color:#105157}.price small{color:#42757A;margin-top:-8px}
.note{color:#42757A;font-size:15px}.note a{color:#20816C;font-weight:600}
/* game */
.game{padding-top:20px;max-width:760px}
.gtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.gtop h1{font-size:22px;line-height:1.3;margin:0;flex:1;color:#105157}.gtop h1 small{display:block;font-size:14px;color:#42757A;font-weight:500}
.gtop .mode{flex-basis:100%}
@media (min-width:760px){.gtop .mode{flex-basis:auto}}
.gtop h1:focus{outline:none}
.ib{width:48px;height:48px;display:inline-grid;place-items:center;border-radius:50%;border:1.5px solid #CEEFE2;background:#fff;color:#105157;cursor:pointer;text-decoration:none}
.ib:hover{background:#E6F7F0}
html[dir=rtl] .ib[href] svg{transform:scaleX(-1)}
.ib.big{width:72px;height:72px;background:#105157;color:#fff;border:0;box-shadow:0 12px 24px -12px rgba(16,81,87,.8)}.ib.big svg{width:32px;height:32px}
.mode{display:inline-flex;background:#E6F7F0;border-radius:999px;padding:3px}
.mode button{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:none;color:#105157;font:600 15px/1 inherit;font-family:inherit;cursor:pointer}
.mode button[aria-pressed=true]{background:#105157;color:#fff}
.stat{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#42757A;font-weight:600;min-height:32px}
.hearts{display:flex;gap:4px}.hearts i svg{width:22px;height:22px;stroke:#C0392B}.hearts i.on svg{fill:#C0392B}
.sc{display:inline-flex;gap:4px;align-items:center;color:#105157}.sc svg{width:20px;height:20px;fill:#33BC86;stroke:#20816C}
.prompt{display:flex;align-items:center;gap:16px;margin:12px 0 20px}.prompt p{margin:0;font-size:18px;font-weight:600;color:#105157}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(51,188,134,.5)}50%{box-shadow:0 0 0 12px rgba(51,188,134,0)}}
.bubbles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;justify-items:center;padding:8px 0 16px}
.bub{width:min(40vw,150px);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;font-size:42px;font-weight:800;color:#105157;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 26%),radial-gradient(circle at 50% 45%,#F2FAF6 0,#CEEFE2 55%,#84D6B6 100%);box-shadow:inset -8px -10px 20px rgba(16,81,87,.18),0 16px 30px -18px rgba(16,81,87,.7);animation:float 3.2s ease-in-out calc(var(--j)*-.8s) infinite;transition:transform .2s}
.bub:hover{transform:scale(1.05)}
@keyframes float{50%{translate:0 -8px}}
.bub.right,.pic.right{animation:popok .6s ease forwards;background:#33BC86;color:#0B3B3F}
.bub.wrong,.pic.wrong{animation:shake .4s;opacity:.4}
@keyframes popok{40%{transform:scale(1.18)}100%{transform:scale(.0);opacity:0}}
.pic.right{animation:none;outline:5px solid #33BC86;transform:scale(1.04)}
@keyframes shake{25%{translate:-6px}75%{translate:6px}}
.pics{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pic{padding:8px;border-radius:18px;border:2px solid #CEEFE2;background:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s}
.pic:hover{transform:translateY(-3px);box-shadow:0 14px 26px -16px rgba(16,81,87,.6)}
.pic img{width:100%;height:auto;border-radius:12px;display:block}
.dots{display:flex;gap:6px;justify-content:center;margin-top:18px}.dots i{width:10px;height:10px;border-radius:50%;background:#CEEFE2}.dots i.on{background:#20816C}
.cnt{font-weight:700;color:#105157}
.fin{text-align:center;padding:24px 0}
.medal{width:96px;height:96px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#84D6B6,#33BC86);box-shadow:0 18px 30px -14px rgba(16,81,87,.7);animation:rise .7s cubic-bezier(.2,.8,.2,1.3)}
.medal svg{width:52px;height:52px;fill:#fff;stroke:#20816C}
@keyframes rise{from{transform:translateY(30px) rotateY(180deg) scale(.6);opacity:0}}
.fin h2{color:#105157;font-size:30px;margin:0 0 6px}.fin .big{font-size:22px;font-weight:700;color:#20816C}
.fin-a{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
/* certificate */
.certpg{padding:20px 24px 40px;max-width:900px}
.ctl{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.ctl label{display:flex;flex-direction:column;gap:4px;font-weight:600;color:#105157;flex:1;min-width:200px}
.ctl input{min-height:48px;padding:0 14px;border:1.5px solid #578589;border-radius:12px;font:inherit}
.cert{aspect-ratio:1.414;background:#fff;border:10px solid #105157;outline:3px solid var(--gc);outline-offset:-22px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px}
.cert img{width:220px;height:auto}.cert h2{font-size:36px;color:#105157;margin:6px 0;border-bottom:2px solid #CEEFE2;min-width:60%}
@media (min-width:760px){.phero{padding:64px 0 84px}.phero h1{font-size:46px}.subcard{grid-template-columns:1.4fr 1fr;padding:36px}.bubbles{grid-template-columns:repeat(4,1fr)}.pics{grid-template-columns:repeat(4,1fr)}.floaty{position:absolute;inset-inline-end:24px;top:0;flex-wrap:nowrap}.floaty img{width:68px;height:68px}}
@media (max-width:999px){body.playpg{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.pl *,.pl *::before{animation:none!important;transition:opacity .2s!important}
.bub.right{transform:none;opacity:1}.gbtn:hover,.pic:hover{transform:none}}
@media print{.top,.foot,.noprint,.toast,.skip{display:none!important}.certpg{padding:0}.cert{break-inside:avoid}}
.pl .gtop h1{font-size:22px;line-height:1.25}
.gtop .mode button{flex:1}
.note a{display:inline-flex;align-items:center;min-height:44px}
.subcard .eyebrow{color:#1C6F5D}
.phero h1{max-width:560px}
.game{min-height:62vh}
@media (min-width:760px){.floaty{top:50%;translate:0 -50%}}
@media (max-width:1100px) and (min-width:760px){.floaty span:nth-child(n+5){display:none}}
@media (min-width:760px){.phero .floaty{inset-inline-end:auto}html[dir=rtl] .phero .floaty{left:24px;right:auto}html[dir=ltr] .phero .floaty{right:24px;left:auto}}
/* flashcard v13: printed-card layout */
@font-face{font-family:"Andika";src:url(/play/fonts/andika-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Andika";src:url(/play/fonts/andika-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"LLR IPA";src:url(/play/fonts/dejavu-ipa.woff2) format("woff2");font-display:swap}
.fcx{--teal:#105157;--soft:#5F686B;max-width:880px;margin:0 auto}
.fcx-stage{perspective:1600px;padding:8px 2px 0}
.fcx-card{position:relative}
.fc{position:relative;display:block;cursor:pointer;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.2,1);border-radius:20px;outline:none}
.fc:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px #20816C}
.fc.flip{transform:rotateY(180deg)}
.pc{container-type:inline-size;display:block;background:#fff;border:1px solid #DCE3E1;border-radius:20px;overflow:hidden;color:#44484A;text-align:left;
 box-shadow:0 1px 2px rgba(16,81,87,.06),0 22px 44px -22px rgba(16,81,87,.38);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pc-front{position:relative}
.pc-back{position:absolute;inset:0;transform:rotateY(180deg)}
.pc>*{--u:calc(100cqw / 1754)}
.pc-strip{position:absolute;inset:0 0 auto;height:max(calc(12*var(--u)),4px)}
.pc-grp{position:absolute;left:calc(90*var(--u));top:calc(72*var(--u));display:flex;align-items:center;gap:max(calc(16*var(--u)),6px);font:600 max(calc(24*var(--u)),11px)/1 "LLR Sans",sans-serif;letter-spacing:max(calc(5*var(--u)),1.6px);color:var(--soft)}
.pc-grp i{width:max(calc(18*var(--u)),8px);height:max(calc(18*var(--u)),8px);border-radius:50%}
.pc-logo{position:absolute;right:calc(90*var(--u));top:calc(70*var(--u));width:max(calc(260*var(--u)),92px);height:auto}
.pc-top{position:relative;display:block;height:calc(850*var(--u))}
.pc-g{position:absolute;left:calc(491*var(--u) - 400*var(--u));width:calc(800*var(--u));top:calc(250*var(--u));text-align:center;font:700 calc(460*var(--u))/.8 "Andika",sans-serif;color:var(--teal);letter-spacing:0}
.pc-g.two{font-size:calc(380*var(--u));top:calc(290*var(--u))}
.pc-img{position:absolute;left:calc(1228*var(--u) - 290*var(--u));top:calc(180*var(--u));width:calc(580*var(--u));height:calc(580*var(--u));object-fit:contain}
.pc-rule{position:absolute;left:calc(120*var(--u));right:calc(120*var(--u));top:calc(850*var(--u));height:max(calc(2*var(--u)),1px);background:#DEE0DE}
.pc-bot{display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(78*var(--u)) 16px max(calc(80*var(--u)),26px)}
.pc-word{font:400 max(calc(104*var(--u)),30px)/1 "Andika",sans-serif;color:#44484A}
.pc-word b{font-weight:700;color:var(--teal);text-decoration:underline #FAD65A;text-decoration-thickness:.1em;text-underline-offset:.14em;text-decoration-skip-ink:none}
.pc-ipa{margin-top:max(calc(40*var(--u)),10px);font:400 max(calc(34*var(--u)),14px)/1.3 "LLR IPA","DejaVu Sans",sans-serif;color:var(--soft);white-space:pre}
.pc-act{margin-top:max(calc(14*var(--u)),4px);font:400 max(calc(30*var(--u)),14px)/1.35 "LLR Sans",sans-serif;color:var(--soft)}
.pc-no{position:absolute;right:calc(90*var(--u));bottom:max(calc(56*var(--u)),10px);font:500 max(calc(22*var(--u)),10px)/1 "LLR Sans",sans-serif;color:#DEE0DE}
.pc-bk{position:absolute;inset:calc(150*var(--u)) calc(120*var(--u)) calc(110*var(--u));display:flex;align-items:center;justify-content:center;gap:calc(90*var(--u))}
.pc-bk img{width:calc(640*var(--u));height:auto;max-height:100%;object-fit:contain}
.pc-bw{display:flex;flex-direction:column;align-items:center;gap:max(calc(40*var(--u)),10px)}
.pc-bw .pc-word{font-size:max(calc(150*var(--u)),34px)}
.pc-ar{font:700 max(calc(84*var(--u)),22px)/1.4 "LLR Kufi","Noto Kufi Arabic",sans-serif;color:#20816C}
.fcx-kn{position:absolute;top:-16px;left:50%;margin-left:-18px;width:36px;height:36px;border-radius:50%;background:#20816C;color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(16,81,87,.6);z-index:2}
.fcx-kn svg{width:22px;height:22px;stroke-width:3}
.fcx-hint{text-align:center;margin:14px 0 4px;font-size:14px;color:#4F5A5C}
.fcx-ctl{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:10px}
.fcx-arw,.fcx-say{border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform .15s,background-color .15s,box-shadow .15s}
.fcx-arw{width:56px;height:56px;background:#105157;color:#fff;box-shadow:0 8px 18px -10px rgba(16,81,87,.8)}
.fcx-arw:hover{background:#20816C}.fcx-arw[disabled]{background:#E3E8E7;color:#8A9496;box-shadow:none;cursor:default}
.fcx-say{width:68px;height:68px;background:#fff;color:#105157;border:2px solid #105157;box-shadow:0 8px 18px -12px rgba(16,81,87,.6)}
.fcx-say:hover{background:#E6F7F0}.fcx-say svg{width:30px;height:30px}
.fcx-arw:active,.fcx-say:active,.fcx-b:active{transform:scale(.94)}
.fcx-arw:focus-visible,.fcx-say:focus-visible,.fcx-b:focus-visible{outline:3px solid #20816C;outline-offset:3px}
.fcx-mid{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px}
.fcx-cnt{font-weight:700;color:#105157;font-size:15px}
.fcx-dots{display:flex;gap:6px}.fcx-dots i{width:8px;height:8px;border-radius:4px;background:#CFD8D6;transition:width .25s}
.fcx-dots i.kn{background:#33BC86}.fcx-dots i.cur{width:22px;background:#105157}
.fcx-fb{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.fcx-b{min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid #105157;background:#fff;color:#105157;font-family:inherit;font-weight:600;font-size:15px;line-height:1;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .15s,background-color .15s}
.fcx-b svg{width:20px;height:20px}
.fcx-b:hover{background:#E6F7F0}
.fcx-b.know[aria-pressed=true]{background:#20816C;border-color:#20816C;color:#fff}
.fcx-end{display:flex;justify-content:center;margin-top:16px}
.fcx-card.in-next{animation:fcin .32s cubic-bezier(.2,.7,.2,1)}.fcx-card.in-prev{animation:fcin .32s cubic-bezier(.2,.7,.2,1) reverse}
[dir=rtl] .fcx-card.in-next{animation-name:fcinr}[dir=rtl] .fcx-card.in-prev{animation-name:fcinr}
@keyframes fcin{from{transform:translateX(28px);opacity:0}}@keyframes fcinr{from{transform:translateX(-28px);opacity:0}}
.fcx-card.in-prev{animation-direction:normal;animation-name:fcinp}[dir=rtl] .fcx-card.in-prev{animation-name:fcin}
@keyframes fcinp{from{transform:translateX(-28px);opacity:0}}
@media (max-width:759px){.fcx-ctl{gap:20px}.pc,.fc{border-radius:16px}}
@media (prefers-reduced-motion:reduce){.fc{transform-style:flat;transition:none!important}.pc{backface-visibility:visible}.pc-back{transform:none;opacity:0;transition:opacity .2s!important}.fc.flip{transform:none}.fc.flip .pc-back{opacity:1}.fc.flip .pc-front{opacity:0}.fcx-card{animation:none!important}.fcx-arw:active,.fcx-say:active,.fcx-b:active{transform:none}}

/* Sound Archer */
.ar-time{height:10px;border-radius:99px;background:#E3F1EC;overflow:hidden;margin:0 0 12px}.ar-time i{display:block;height:100%;width:100%;background:#33BC86;transition:width 1s linear}.ar-time i.low{background:#20816C}
.ar-field{position:relative;height:clamp(330px,52vh,420px);border-radius:24px;overflow:hidden;background:linear-gradient(#F2FAF7,#E3F4EE 70%,#CFEBDF);border:1px solid #CFE5DD}
.ar-field::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-40px;height:120px;border-radius:50%;background:#B9E3D0}
.ar-lane{position:absolute;left:0;right:0;top:calc(14px + var(--j)*92px);height:84px;border-top:1px dashed rgba(16,81,87,.12)}
.ar-tg{position:absolute;top:2px;left:0;width:80px;height:80px;border-radius:50%;border:0;padding:0;cursor:pointer;z-index:2;color:#105157;
 background:radial-gradient(circle,#fff 0 30%,#33BC86 31% 46%,#fff 47% 62%,#105157 63% 70%,#fff 71%);box-shadow:0 4px 10px rgba(16,81,87,.2);animation:ardrift var(--d) ease-in-out var(--o) infinite alternate}
.ar-tg:disabled{cursor:default}
.ar-tg b{display:grid;place-items:center;width:46px;height:46px;margin:auto;border-radius:50%;background:#fff;font:800 26px/1 "Andika","LLR Sans",sans-serif}
.ar-pic img{width:52px;height:52px;border-radius:50%;background:#fff;object-fit:contain;display:block;margin:auto}
.ar-tg:focus-visible{outline:4px solid #105157;outline-offset:3px}
.ar-tg.right{background:#33BC86}.ar-tg.right>*{animation:artgpop .45s ease forwards}
@keyframes artgpop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1.08)}}
.ar-tg.wrong{opacity:.45}.ar-tg.wrong>*{animation:shake .4s}.ar-tg.show{box-shadow:0 0 0 6px #33BC86,0 4px 10px rgba(16,81,87,.2);opacity:1}
@keyframes ardrift{from{left:2%}to{left:calc(98% - 80px)}}
.ar-field .ar-bow{position:absolute;left:50%;bottom:14px;width:150px;height:75px;margin-left:-75px;z-index:1}
.ar-field .ar-ar{position:absolute;left:50%;bottom:22px;width:16px;height:84px;margin-left:-8px;z-index:3;transform-origin:50% 25%}
.ar-cf{position:absolute;width:10px;height:10px;border-radius:2px;z-index:4;pointer-events:none;animation:arcf .75s ease-out forwards}
@keyframes arcf{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.ar-pop{position:absolute;margin:0;z-index:5;font:800 22px/1 "LLR Sans",sans-serif;color:#105157;background:#fff;border-radius:99px;padding:4px 10px;opacity:0;pointer-events:none}
.ar-pop.show{animation:arpop 1.1s ease forwards}@keyframes arpop{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-36px)}}
.ar-fb{min-height:30px;margin:12px 0 4px;text-align:center;color:#105157}.ar-fb b{font-size:18px}
.ar-bonus{display:inline-block;margin-inline-start:6px;padding:2px 10px;border-radius:99px;background:#E3F4EE;color:#105157;font-weight:700}
.ar-again{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}.ar-again .btn{min-height:48px;display:inline-flex;align-items:center;gap:8px}.ar-again svg{width:20px;height:20px}
.ar-combo{padding:4px 12px;border-radius:99px;background:#105157;color:#fff;font-weight:700;opacity:0;transition:opacity .2s}.ar-combo.on{opacity:1}.ar-combo.bump{animation:arbump .4s}
@keyframes arbump{50%{transform:scale(1.25)}}
.ar-path{display:flex;gap:6px;list-style:none;margin:0 0 12px;padding:0;justify-content:center}
.ar-path li{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#E3F1EC;color:#105157;font-weight:800;position:relative}
.ar-path li.now{box-shadow:0 0 0 3px #33BC86;background:#fff}.ar-path li.hit{background:#33BC86}.ar-path li.miss{background:#F3D9D6;color:#8E2B20}
.ar-path li svg{width:18px;height:18px;fill:#fff;stroke:#105157;stroke-width:1.5}
.ar-path li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:100%;width:6px;height:3px;background:#CFE5DD}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ar-mute{margin-inline-start:auto}.ar-mute svg{width:24px;height:24px;fill:none;stroke:#105157;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ar-intro{text-align:center;padding:12px 0 24px}.ar-hero{width:200px;height:120px}.ar-intro h2{color:#105157;margin:8px 0}
.ar-how{list-style:none;padding:0;margin:0 auto 16px;max-width:360px;display:grid;gap:8px}.ar-how li{background:#F2FAF7;border-radius:14px;padding:10px 14px;color:#105157;font-weight:600}
.ar-go{min-width:180px;min-height:56px;font-size:20px}
.ar-best,.ar-nb{display:inline-flex;align-items:center;gap:6px;color:#105157;font-weight:700}.ar-best svg,.ar-nb svg{width:20px;height:20px;fill:#33BC86;stroke:#105157}
.ar-nb{background:#E3F4EE;padding:6px 14px;border-radius:99px}
.ar-ready{display:grid;place-items:center;min-height:50vh}.ar-ready b{font-size:44px;color:#105157;animation:arin .5s ease}.ar-ready b.go{color:#20816C}
@keyframes arin{from{transform:scale(.6);opacity:0}}
.ar-stars{display:flex;justify-content:center;gap:10px;margin:8px 0}.ar-stars svg{width:64px;height:64px;fill:#E3F1EC;stroke:#9FC8BC;stroke-width:1.2}
.ar-stars i.on svg{fill:#33BC86;stroke:#105157}.ar-stars i.on{animation:arstar .5s ease backwards;animation-delay:calc(var(--k)*.25s)}
@keyframes arstar{from{transform:scale(0) rotate(-40deg)}}
@media (prefers-reduced-motion:reduce){.ar-tg,.ar-tg.right>*,.ar-tg.wrong>*,.ar-combo.bump,.ar-ready b,.ar-stars i.on,.ar-pop.show{animation:none}.ar-pop.show{opacity:1}
 .ar-lane:nth-child(1) .ar-tg{left:8%}.ar-lane:nth-child(2) .ar-tg{left:calc(50% - 40px)}.ar-lane:nth-child(3) .ar-tg{left:calc(92% - 80px)}.ar-time i{transition:none}.ar-cf{display:none}}
.grp.open .gl{padding-bottom:.109375px}
@media (max-width:600px){.grp.open{padding-bottom:35px}[dir=rtl] .grp.open .gl{padding-bottom:0}[dir=rtl] .grp.open{padding-bottom:49px}}
/* Sound Archer v3 */
.arx .gtop h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.arx .gtop{justify-content:space-between}
.arx .gtop .ib{width:64px;height:64px;min-width:64px}.arx .gtop .ib svg{width:28px;height:28px}
.ar-play{width:128px;height:128px;border-radius:50%;border:0;background:#105157;color:#fff;display:inline-grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -10px rgba(16,81,87,.6);text-decoration:none}
.ar-play svg{width:56px;height:56px;fill:currentColor}
.ar-play:hover{background:#20816C}.ar-play:focus-visible{outline:4px solid #33BC86;outline-offset:4px}
.ar-intro .ar-play{width:160px;height:160px;animation:arbreath 2.2s ease-in-out infinite}.ar-intro .ar-play svg{width:72px;height:72px;margin-inline-start:8px}
.ar-intro{padding:48px 0 64px;display:grid;place-items:center;min-height:50vh}
@keyframes arbreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.ar-endb{display:flex;gap:28px;justify-content:center;margin:28px 0 8px}
.ar-endb .ar-play{width:104px;height:104px}.ar-endb svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ar-home{background:#fff;color:#105157;border:3px solid #105157}.ar-home:hover{background:#E3F4EE}
.ar-end .ar-stars svg{width:88px;height:88px}
.ar-pr{justify-content:center;margin:0 0 12px}.ar-pr .ar-spk{width:96px;height:96px;min-width:96px;border-radius:50%;background:#105157;color:#fff}.ar-pr .ar-spk svg{width:48px;height:48px}
.ar-fb{min-height:64px;display:flex;justify-content:center;align-items:center;gap:10px}
.ar-smile{width:60px;height:60px;animation:artgpop .45s ease}.ar-fst svg{width:44px;height:44px;fill:#33BC86;stroke:#105157;animation:arstar .5s ease}
.ar-hand{position:absolute;width:72px;height:72px;z-index:6;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(16,81,87,.35))}
.ar-tg.hint{box-shadow:0 0 0 6px #33BC86}
@media (prefers-reduced-motion:reduce){.ar-intro .ar-play,.ar-smile,.ar-fst svg{animation:none}}