.px{padding:clamp(48px,8vw,96px) 0}.px+.px{padding-top:0}.px [hidden]{display:none!important}.px-head{margin-bottom:clamp(20px,3vw,32px)}.px-head h2{margin-bottom:.3em}.px-head .lead{margin-inline:auto}.px-card{background:radial-gradient(ellipse 70% 55% at 50% 40%, var(--glow), transparent 75%), linear-gradient(#fcfaf6db, #fcfaf6f0), var(--pattern-lit) 0 0 / 54px 54px, var(--paper);text-align:center;isolation:isolate;border:1px solid #c3a15fbf;border-radius:26px;max-width:860px;margin:0 auto;padding:clamp(18px,4vw,40px) clamp(14px,4vw,44px);position:relative;box-shadow:0 24px 60px -24px #17463a47,0 0 0 6px #c3a15f12}html.night .px-card{background:radial-gradient(ellipse 70% 55% at 50% 40%, var(--glow), transparent 75%), linear-gradient(#0f2a24db, #0f2a24eb), var(--pattern-lit) 0 0 / 54px 54px, var(--paper)}.px-card:before{content:"";pointer-events:none;z-index:-1;border:1px solid #c3a15f52;border-radius:19px;position:absolute;inset:8px}.px-star{background:var(--gold);clip-path:polygon(50% 0,61% 30%,93% 21%,74% 50%,93% 79%,61% 70%,50% 100%,39% 70%,7% 79%,26% 50%,7% 21%,39% 30%);width:16px;height:16px;position:absolute}.px-star:first-of-type{top:3px;left:3px}.px-star:nth-of-type(2){top:3px;right:3px}.px-star:nth-of-type(3){bottom:3px;left:3px}.px-star:nth-of-type(4){bottom:3px;right:3px}.px-card+.px-card{margin-top:20px}.px-label{font:700 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);margin:0 0 8px}.px-feedback{max-width:34em;min-height:3em;color:var(--pine-deep);margin:12px auto;font-size:1.05rem;font-weight:600;line-height:1.45}.px-feedback b{color:var(--gold-text)}.px-feedback [lang=ar]{white-space:nowrap;font-size:1.25em;line-height:1}.px-note{max-width:36em;color:var(--muted);margin:12px auto 0;font-size:.95rem;line-height:1.55}.px-note [lang=ar]{color:var(--gold-text)}.px-chips{flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto;display:flex}.px-chips+.px-chips,.px-row+.px-row{margin-top:14px}.px-chip{border:1px solid var(--sage-line);background:var(--white);min-width:64px;min-height:58px;color:var(--pine-deep);font:600 .9rem/1.2 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s, background .25s, box-shadow .25s, transform .4s var(--ease), opacity .3s;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:0;padding:8px 18px 7px;display:inline-flex}.px-chip [lang=ar]{margin-bottom:2px;font-size:1.4rem;line-height:1.75}.px-chip small{color:var(--muted);font-size:.74rem;font-weight:700;line-height:1.15}.px-chip[aria-pressed=true]{border-color:var(--gold);background:var(--apricot);box-shadow:0 0 0 1px var(--gold), 0 8px 18px -10px #8a6a2b8c}.px-chip[aria-pressed=true] small{color:var(--gold-text)}@media (hover:hover){.px-chip:hover{border-color:var(--gold);transform:translateY(-2px)}}.px-chip:focus-visible,.px-tile:focus-visible,.px-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.px-row{grid-template-columns:1fr;justify-items:center;gap:6px;display:grid}@media (width>=720px){.px-row{grid-template-columns:92px 1fr;place-items:center start}.px-row .px-chips{justify-content:flex-start}}.px-row>.px-label{margin:0}.px-tile{border:1px solid var(--sage-line);background:var(--white);min-height:92px;color:var(--pine-deep);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s, background .3s, box-shadow .3s, transform .5s var(--ease), opacity .3s;border-radius:20px;place-items:center;padding:10px;display:grid;position:relative;box-shadow:0 1px 2px #1f5a480d,0 10px 22px -14px #1f5a4866}.px-tile [lang=ar]{font-size:clamp(2.1rem,8.4vw,2.8rem);line-height:1.8}@media (hover:hover){.px-tile:not(:disabled):hover{border-color:var(--gold);transform:translateY(-3px)}}.px-tile:disabled{cursor:default}.is-right{border-color:var(--gold)!important;background:linear-gradient(180deg, #fff6dc, var(--apricot))!important;color:var(--gold-text)!important;box-shadow:0 0 0 2px var(--gold), 0 0 28px 4px #e6c77e8c!important;transform:translateY(-4px)scale(1.04)!important}html.night .is-right{background:linear-gradient(180deg, #4a5a3c, var(--apricot))!important}.px-tile.is-wrong,.px-chip.is-wrong{border-style:dashed;border-color:var(--sage-line);background:var(--sage);box-shadow:none}.px-btn{border:1px solid var(--gold);background:var(--white);min-height:44px;color:var(--pine-deep);font:700 .92rem var(--sans);cursor:pointer;transition:background .25s, transform .4s var(--ease);border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0 18px;display:inline-flex}.px-btn svg{width:18px;height:18px}.px-btn--solid{background:var(--pine);border-color:var(--pine);color:#fff}html.night .px-btn--solid{color:#0f2a24}@media (hover:hover){.px-btn:hover{transform:translateY(-2px)}.px-btn:not(.px-btn--solid):hover{background:var(--apricot)}}.px-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px;display:flex}.px-dots{justify-content:center;gap:7px;margin:0;padding:0;list-style:none;display:flex}.px-dots li{background:var(--sage-line);width:10px;height:10px;transition:background .3s, transform .4s var(--ease), box-shadow .3s;border-radius:50%}.px-dots li.is-now{background:var(--white);box-shadow:inset 0 0 0 2px var(--gold);transform:scale(1.25)}.px-dots li.is-hit{background:var(--gold);box-shadow:0 0 8px #e6c77ee6}.px-result{padding:6px 0 2px}.px-result[hidden]{display:none}.px-seal{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 0 8px #e6c77ecc);width:46px;height:46px;animation:px-seal-in .7s var(--ease) both;background:linear-gradient(160deg,#fff6dc,#e6c77e 40%,#c3a15f);margin:0 auto 8px;display:block}@keyframes px-seal-in{0%{opacity:0;transform:scale(.3)rotate(-30deg)}}.px-result h3{margin:0 0 4px;font-size:clamp(1.3rem,3.4vw,1.7rem)}.px-result p{color:var(--muted);max-width:30em;margin:0 auto}.px-win{background:var(--white);max-width:560px;box-shadow:inset 0 0 0 1px var(--sage-line);text-align:center;border-radius:20px;margin:18px auto 0;padding:16px 18px}.px-win p{color:var(--pine-deep);font:600 clamp(1rem, 2.6vw, 1.12rem)/1.4 var(--serif);margin:0 0 10px}.px-win .btn{margin:0}.px-build{place-items:center;min-height:1.9em;font-size:clamp(2.6rem,10vw,4.2rem);display:grid;position:relative}.px-build__pieces{transition:gap .5s var(--ease), opacity .45s;direction:rtl;grid-area:1/1;align-items:center;gap:.18em;display:flex}.px-build__pieces>span{font-family:var(--arabic);transition:background .4s, box-shadow .4s, padding .5s var(--ease), color .4s;border-radius:.3em;padding:0 .22em;font-size:.78em;line-height:1.6}.px-who{color:var(--gold-text);box-shadow:inset 0 0 0 1.5px var(--gold);background:#f7ebddf2}.px-stem{color:var(--pine-deep);box-shadow:inset 0 0 0 1px var(--sage-line);background:#eef3eff2}.px-when{color:sienna;background:#f7ebddf2;box-shadow:inset 0 0 0 1.5px #e0a77a}html.night .px-who,html.night .px-stem,html.night .px-when{background:#ffffff0f}html.night .px-when{color:#f0b98f}.px-build__word{font-family:var(--arabic);opacity:0;background:linear-gradient(105deg, var(--pine-deep) 0 38%, #e6c77e 46%, #fff6dc 50%, #e6c77e 54%, var(--pine-deep) 62% 100%) 100% 0 / 300% 100% no-repeat;color:#0000;transition:opacity .5s, transform .6s var(--ease);-webkit-background-clip:text;background-clip:text;grid-area:1/1;margin:-.55em -.2em -.3em;padding:.55em .2em .3em;font-size:1em;line-height:1.7;transform:scale(.94)}.px-build.is-close .px-build__pieces{gap:0}.px-build.is-close .px-build__pieces>span{box-shadow:none;background:0 0;padding:0}.px-build.is-joined .px-build__pieces{opacity:0;pointer-events:none}.px-build.is-joined .px-build__word{opacity:1;animation:1.1s ease-out .1s forwards px-sweep;transform:none}@keyframes px-sweep{0%{background-position:100% 0}to{background-position:0 0}}.px-build.is-still .px-build__pieces,.px-build.is-still .px-build__pieces>span,.px-build.is-still .px-build__word{transition:none;animation:none}.px-build.is-still.is-joined .px-build__word{background-position:0 0}.px-ghost{z-index:60;pointer-events:none;font-family:var(--arabic);color:var(--gold-text);text-shadow:0 0 14px #e6c77ee6;white-space:nowrap;line-height:1.5;position:fixed;top:0;left:0}.px-spark{z-index:5;pointer-events:none;width:var(--sz,10px);height:var(--sz,10px);margin:calc(var(--sz,10px) / -2) 0 0 calc(var(--sz,10px) / -2);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:px-spark var(--dur,.9s) cubic-bezier(.2, .7, .3, 1) forwards;background:radial-gradient(circle,#fff6dc,#e6c77e 45%,#c3a15f 70%);position:absolute;top:0;left:0}@keyframes px-spark{0%{transform:translate(var(--x0), var(--y0)) scale(.2) rotate(0deg);opacity:1}70%{opacity:1}to{transform:translate(var(--x1), var(--y1)) scale(1) rotate(160deg);opacity:0}}.px-ladder{flex-wrap:wrap;justify-content:center;gap:clamp(5px,1.6vw,14px);margin:18px auto 0;padding:0;display:flex}.px-ladder button{border:1px solid var(--sage-line);background:var(--white);width:clamp(66px,18vw,110px);color:var(--pine-deep);font:600 .8rem/1.2 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease);border-radius:16px;flex-direction:column;align-items:center;gap:5px;padding:8px 2px 9px;display:flex;box-shadow:0 1px 2px #1f5a4812,0 4px 12px #1f5a480f}.px-ladder button span{border:1.5px solid var(--gold);background:var(--white);width:36px;height:36px;color:var(--gold-text);font:700 .95rem var(--sans);border-radius:50%;place-items:center;transition:background .4s,color .4s,box-shadow .4s;display:grid}.px-ladder button[aria-selected=true]{background:var(--pine);border-color:var(--pine);color:var(--paper);box-shadow:0 6px 18px #1f5a4833}.px-ladder .is-done span{color:#5b4318;background:linear-gradient(160deg,#fff6dc,#e6c77e 40%,#c3a15f);border-color:#0000}.px-ladder button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media (hover:hover){.px-ladder button:not([aria-selected=true]):hover{border-color:var(--gold);transform:translateY(-2px)}}@media (prefers-reduced-motion:reduce){.px-spark{display:none}.px-build__pieces,.px-build__pieces>span,.px-build__word{transition:none}.px-build.is-joined .px-build__word{background-position:0 0;animation:none}.px-seal{animation:none}}html.calm .px-spark,html.calm.px-spark{display:none}html.calm .px-build__pieces,html.calm.px-build__pieces,html.calm .px-build__pieces>span,html.calm.px-build__pieces>span,html.calm .px-build__word,html.calm.px-build__word{transition:none}html.calm .px-build.is-joined .px-build__word,html.calm.px-build.is-joined .px-build__word{background-position:0 0;animation:none}html.calm .px-seal,html.calm.px-seal{animation:none}.px-nav{justify-content:center;align-items:center;gap:14px;margin-top:18px;display:flex}.px-nav__count{min-width:5.5em;font:700 .9rem var(--sans);color:var(--muted)}.px-arrow{border:1px solid var(--gold);background:var(--white);width:52px;height:52px;color:var(--pine-deep);cursor:pointer;transition:background .25s, transform .4s var(--ease), opacity .3s;-webkit-tap-highlight-color:transparent;border-radius:50%;place-items:center;display:grid}.px-arrow svg{width:22px;height:22px}.px-arrow--next{background:var(--pine);border-color:var(--pine);color:#fff}html.night .px-arrow--next{color:#0f2a24}.px-arrow:disabled{opacity:.3;cursor:default}@media (hover:hover){.px-arrow:not(:disabled):hover{transform:translateY(-2px)}}.px-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.px-opts{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,16px);max-width:520px;margin:14px auto 0;display:grid}.px-opts .px-tile small{font:700 .74rem/1.2 var(--sans);color:var(--muted);margin-top:-2px}.px-word{margin:18px 0 0}.px-word [lang=ar]{color:var(--pine-deep);font-size:clamp(2.6rem,10vw,3.6rem);line-height:1.6;display:block}.px-word i{color:var(--gold-text);margin-top:-4px;font-weight:600;display:block}.px-word b{font:600 clamp(1.15rem, 3vw, 1.4rem)/1.3 var(--serif);color:var(--pine-deep);margin-top:2px;display:block}.px-word small{color:var(--muted);margin-top:4px;font-size:.95rem;display:block}.px-swap{animation:px-swap .5s var(--ease)}@keyframes px-swap{0%{opacity:0;transform:translateY(10px)}}@media (prefers-reduced-motion:reduce){.px-swap{animation:none}}html.calm .px-swap,html.calm.px-swap{animation:none}.px-read{color:var(--gold-text);margin:0;font-size:clamp(.95rem,2.6vw,1.08rem);font-style:italic;font-weight:600}[data-tap-say] [lang=ar]:not(button *,a *,[data-no-say],[data-no-say] *,.ta__loose *,.px-build__pieces *,.ta__flyers *){cursor:pointer}[data-tap-say] [lang=ar].is-saying{text-shadow:0 0 14px #e6c77eb3;color:var(--gold-text)!important}