:root{--paper:#faf6ee;--paper-2:#f1e7d4;--room:#f3e6cc;--ink:#1f1a14;--ink-soft:#6a5f50;--gold:#c9a24e;--metal-lo:#8f6c1e;--metal-hi:#fff1c2;--foil:linear-gradient(170deg, #8f6c1e 0%, #d4ad4c 22%, #fff3cc 40%, #fff3cc 47%, #d4ad4c 54%, #d4ad4c 68%, #8f6c1e 100%);--heb:"Heebo", system-ui, sans-serif;--serif:"Instrument Serif", Georgia, serif;--ease:cubic-bezier(.2, .7, .2, 1);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--pad:22px;--pearl-a:#c9a24e;--pearl-b:#fff1c2;--pearl-glow:#d6aa4acc;--holo-a:#b9a6ff;--holo-b:#a6e3ff;--holo-c:#ffd1ec;--holo-d:#d7ffe8;--holo-glow:#aaa0ff80;--rose-a:#cf9a86;--rose-b:#ffd9c8;--rose-glow:#d68c78cc}html[lang=ar]{--heb:"IBM Plex Sans Arabic", "Heebo", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;background:var(--paper);height:100%}body{min-height:100dvh;font-family:var(--heb);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;flex-direction:column;font-size:17px;font-weight:300;line-height:1.55;display:flex;overflow-x:clip}img{max-width:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0}a{color:inherit;text-decoration:none}:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px;border-radius:6px}[hidden]{display:none!important}.sr{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;inset-inline-start:-9999px}.bloom{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.bloom i{filter:blur(60px);opacity:.9;border-radius:50%;position:absolute}.bloom__a{inset-inline-start:-20vw;background:radial-gradient(circle,#fbeec7f2,#fbeec700 70%);width:70vw;max-width:460px;height:70vw;max-height:460px;top:-12vh}.bloom__b{inset-inline-end:-30vw;background:radial-gradient(circle,#f1e7d4,#f1e7d400 70%);width:80vw;max-width:520px;height:80vw;max-height:520px;bottom:-20vh}.top{z-index:2;padding:calc(10px + var(--sat)) var(--pad) 0;grid-template-columns:1fr auto 1fr;align-items:center;display:grid;position:relative}.top__logo{grid-column:2;width:70px;height:auto}.top__lang,.top__out{height:36px;color:var(--ink-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .18s var(--ease), background .18s;background:#fffdf899;border:1px solid #1f1a141f;border-radius:999px;justify-self:start;padding:0 14px;font-size:14px;font-weight:400}.top__out{grid-column:3;justify-self:end}.top__lang:active,.top__out:active{background:var(--paper-2);transform:scale(.94)}.scr{z-index:1;width:100%;max-width:560px;padding:8px var(--pad) calc(16px + var(--sab));animation:in .6s var(--ease) both;flex-direction:column;flex:1;align-items:center;margin:0 auto;display:flex;position:relative}@keyframes in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.eyebrow{font-family:var(--serif);color:var(--ink-soft);letter-spacing:.02em;direction:ltr;font-size:14px}.eyebrow i{color:var(--gold);margin:0 .3em;font-style:normal}.eyebrow em{font-style:italic}.title{text-align:center;margin-top:4px;font-size:24px;font-weight:400;line-height:1.25}.hint{color:var(--ink-soft);text-align:center;margin-top:4px;font-size:14.5px}.dots{gap:18px;margin:22px 0 6px;display:flex}.dots i{width:14px;height:14px;transition:transform .22s var(--ease), background .22s, border-color .22s, box-shadow .22s;background:0 0;border:1.5px solid #1f1a1447;border-radius:50%}.dots i.is-on{background:var(--ink);border-color:var(--ink);transform:scale(1.12);box-shadow:0 0 0 5px #c9a24e2e}.dots.is-ok i{background:var(--gold);border-color:var(--gold);box-shadow:0 0 18px #d6aa4a8c}.dots.is-shake{animation:shake .5s var(--ease)}.dots.is-shake i{box-shadow:none;background:#b4523a;border-color:#b4523a}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}.msg{color:#a0462f;text-align:center;min-height:22px;font-size:14.5px;transition:opacity .2s}.msg.is-soft{color:var(--ink-soft)}.pad{direction:ltr;grid-template-columns:repeat(3,1fr);gap:10px 18px;width:min(100%,284px);margin-top:8px;display:grid}.pad button{aspect-ratio:1;width:100%;max-width:78px;font-family:var(--serif);color:var(--ink);transition:transform .12s var(--ease), background .12s, box-shadow .12s;-webkit-user-select:none;user-select:none;background:#fffdf8bf;border-radius:50%;place-items:center;margin:0 auto;font-size:29px;line-height:1;display:grid;box-shadow:inset 0 1px #ffffffe6,0 10px 24px -14px #46301459,0 0 0 1px #1f1a140f}.pad button b{font-weight:400;transform:translateY(1px)}.pad button.is-press,.pad button:active{background:var(--room);transform:scale(.9);box-shadow:0 0 0 1px #c9a24e8c,0 6px 14px -10px #46301466,0 0 22px -6px #d6aa4a80}.pad__del svg{fill:var(--ink-soft)}.pad.is-locked button{opacity:.35;pointer-events:none}.scr--pick{max-width:none;padding-inline:0}.scr--pick .title,.scr--pick .hint{padding-inline:var(--pad);max-width:560px}.deck{perspective:1100px;width:100%;margin-top:2px;position:relative}.deck__track{--w:clamp(150px, min(48vw, (100dvh - 420px) * .5), 210px);scroll-snap-type:x mandatory;padding:18px calc(50% - var(--w) / 2) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;align-items:flex-start;gap:14px;display:flex;overflow:auto hidden}.deck__track::-webkit-scrollbar{display:none}.ph{flex:0 0 var(--w);scroll-snap-align:center;scroll-snap-stop:always;text-align:center;transform-style:preserve-3d;will-change:transform;transition:opacity .3s;display:block;position:relative}.ph__dev{aspect-ratio:9/18.6;width:100%;transition:box-shadow .35s var(--ease);background:#1a1612;border-radius:30px;padding:6px;display:block;position:relative;box-shadow:inset 0 1px #ffffff40,0 0 0 1px #fff1c238,0 24px 44px -22px #1f1a148c}.ph__scr{background:var(--paper-2);border-radius:25px;display:block;position:absolute;inset:6px;overflow:hidden}.ph__scr img{object-fit:cover;object-position:top center;width:100%;height:100%}.ph__isle{background:#0e0c0a;border-radius:999px;width:28%;height:15px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.ph__glow{filter:blur(28px);opacity:0;transition:opacity .45s var(--ease);border-radius:50%;position:absolute;inset:4% -22% 10%;transform:translateZ(-60px)}.ph--pearl .ph__glow{background:radial-gradient(ellipse at center, var(--pearl-glow), #d6aa4a00 70%)}.ph--holo .ph__glow{background:conic-gradient(from 20deg, var(--holo-a), var(--holo-b), var(--holo-c), var(--holo-d), var(--holo-a));opacity:0}.ph--rose .ph__glow{background:radial-gradient(ellipse at center, var(--rose-glow), #d68c7800 70%)}.ph.is-sel .ph__glow{opacity:1}.ph--holo.is-sel .ph__glow{opacity:.85}.ph.is-sel .ph__dev{box-shadow:0 1px 0 #ffffff4d inset, 0 0 0 1.5px var(--edge,var(--gold)), 0 30px 54px -22px #1f1a148c}.ph--pearl{--edge:var(--pearl-a)}.ph--holo{--edge:#cfc3ff}.ph--rose{--edge:var(--rose-a)}.ph__cap{flex-direction:row;justify-content:center;align-items:center;gap:8px;min-height:26px;margin-top:10px;display:flex}.ph__name{color:var(--ink);font-size:16px;font-weight:400;transition:color .3s}.ph:not(.is-sel) .ph__name{color:var(--ink-soft)}.ph__tag{color:var(--metal-lo);background:linear-gradient(120deg,#fff3cc,#f3e6cc);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:400;box-shadow:0 0 0 1px #c9a24e73}.deck__pips{justify-content:center;gap:8px;margin-top:4px;display:flex}.deck__pips i{background:#1f1a142e;border-radius:50%;width:6px;height:6px;transition:background .3s,transform .3s}.deck__pips i.is-on{background:var(--gold);transform:scale(1.3)}.bar{z-index:3;padding:14px var(--pad) calc(10px + var(--sab));background:linear-gradient(to top, var(--paper) 72%, #faf6ee00);flex-direction:column;align-items:center;gap:8px;width:100%;margin-top:auto;display:flex;position:sticky;bottom:0}.save{width:100%;max-width:420px;height:54px;color:var(--paper);background:var(--ink);transition:transform .15s var(--ease), opacity .3s, background .4s, color .4s;border-radius:999px;font-size:18px;font-weight:400;position:relative;overflow:hidden;box-shadow:0 16px 30px -16px #1f1a1499}.save:active{transform:scale(.97)}.save>span{transition:opacity .25s, transform .3s var(--ease), visibility 0s .3s;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.save__busy,.save__done{opacity:0;visibility:hidden;transform:translateY(8px)}.save.is-busy .save__idle,.save.is-done .save__idle{opacity:0;visibility:hidden;transform:translateY(-8px)}.save.is-busy .save__busy,.save.is-done .save__done{opacity:1;visibility:visible;transition-delay:0s;transform:none}.save.is-done{background:var(--foil);color:var(--ink);animation:foil 1.6s var(--ease) 1;background-size:200% 100%}.save.is-same{opacity:.45;pointer-events:none}@keyframes foil{0%{background-position:100% 0}to{background-position:0 0}}.spin{border:2px solid #faf6ee59;border-top-color:var(--paper);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.bar__note{min-height:20px;color:var(--ink-soft);text-align:center;font-size:14.5px;line-height:1.3}.bar__note.is-err{color:#a0462f}.bar__view{color:var(--metal-lo);animation:in .5s var(--ease) both;border-bottom:1px solid #c9a24e80;align-items:center;gap:8px;padding:2px 4px 4px;font-size:16px;font-weight:400;display:inline-flex}@media (width>=760px){:root{--pad:32px}.top__logo{width:90px}.title{font-size:30px}.deck__track{--w:clamp(170px, (100dvh - 400px) * .5, 236px);gap:28px}.pad{gap:14px 22px;width:300px}}@media (prefers-reduced-motion:reduce){.scr,.bar__view{animation:none}.ph{transition:none}}