:root{color-scheme:dark;--abyss:#05090d;--night:#09121a;--deep:#0f1d27;--tide:#17303c;--slate:#284756;--mist:#7f98a3;--fog:#b4c6cc;--pearl:#e9f1ef;--halo:#f6faf8;--blush:#efc9bf;
--line:rgba(233,241,239,.12);--soft:rgba(233,241,239,.05);--pearl-a22:rgba(233,241,239,.22);
--f-d:'El Messiri','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;--f-t:'Amiri','Traditional Arabic','Noto Naskh Arabic',serif;--f-u:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif}
*{box-sizing:border-box}
html{background:var(--abyss);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:radial-gradient(120% 60% at 50% 0%,#0d1c26 0%,var(--abyss) 60%) fixed;color:var(--pearl);font:400 1.05rem/1.9 var(--f-u);overflow-wrap:break-word}
a{color:var(--halo);text-decoration-color:rgba(233,241,239,.35);text-underline-offset:.22em}
a:hover{text-decoration-color:var(--halo)}
button{font-family:inherit}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--halo);outline-offset:3px}

.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem max(16px,calc((100vw - 60rem)/2));
background:rgba(5,9,13,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);font:500 .95rem/1.4 var(--f-u)}
.bar a{text-decoration:none;color:var(--fog)}.bar a:hover{color:var(--halo)}
.brand{font:600 1.05rem/1 var(--f-d);color:var(--halo)!important}
.pill{border:1px solid rgba(233,241,239,.25);border-radius:999px;padding:.35rem .95rem}

main{max-width:37rem;margin:0 auto;padding:0 16px 1rem}

/* hero */
.hero{position:relative;isolation:isolate;text-align:center;padding:3.2rem 0 2.2rem}
.hero::before{content:"";position:absolute;inset:-1rem -16px 0;z-index:-1;pointer-events:none;
background-image:radial-gradient(circle,rgba(233,241,239,.2) 1.3px,transparent 1.8px);background-size:20px 20px;
-webkit-mask-image:radial-gradient(ellipse 55% 62% at 50% 46%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 55% 62% at 50% 46%,#000 0%,transparent 72%)}
.kicker{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:0 0 1rem;font:500 .92rem/1.4 var(--f-u);color:var(--mist)}
.kicker::before,.kicker::after{content:"";flex:0 0 1.6rem;height:1px;background:var(--mist);opacity:.55}
h1{margin:0;font:700 clamp(2.35rem,9.4vw,3.5rem)/1.3 var(--f-d);color:var(--halo);text-wrap:balance}
.lede{margin:1.1rem auto 0;max-width:30rem;font:400 1.3rem/1.85 var(--f-t);color:var(--fog);text-wrap:balance}

/* form */
.card{margin:.6rem 0 0;padding:1.5rem 1.2rem 1.4rem;border:1px solid var(--pearl-a22);border-radius:22px;background:rgba(233,241,239,.04)}
.q{margin:0 0 1.55rem;padding:0;border:0;min-width:0}
.q>legend,.q>label.lg{display:flex;align-items:center;gap:.7rem;margin:0 0 .75rem;padding:0;font:600 1.08rem/1.5 var(--f-u);color:var(--halo)}
.n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:50%;border:1px solid rgba(239,201,191,.6);color:var(--blush);font:600 .85rem/1 var(--f-u)}
.chips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem}
.chips .chip{grid-column:span 2}.chips .chip:nth-child(n+4){grid-column:span 3}
.chips.c4 .chip{grid-column:span 3}
.chip{position:relative;display:block}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:.45rem .6rem;border:1px solid rgba(233,241,239,.3);border-radius:999px;font:500 1rem/1.3 var(--f-u);color:var(--pearl);
transition:background-color .25s,border-color .25s,color .25s}
.chip:hover input:not(:checked)+span{border-color:rgba(233,241,239,.65);background:rgba(233,241,239,.07)}
.chip input:checked+span{background:var(--pearl);border-color:var(--pearl);color:#0a1a22;font-weight:600}
.chip input:focus-visible+span{outline:2px solid var(--halo);outline-offset:3px}
.age{width:8.5rem;min-height:56px;padding:.2rem 1rem;border:1px solid rgba(233,241,239,.3);border-radius:16px;background:rgba(5,9,13,.5);color:var(--halo);font:600 1.7rem/1 var(--f-d);text-align:center;transition:border-color .25s,box-shadow .25s}
.age::placeholder{color:rgba(180,198,204,.4)}
.age:focus{outline:none;border-color:var(--pearl);box-shadow:0 0 0 3px rgba(233,241,239,.16)}
.hint{margin:.6rem 0 0;font:400 .88rem/1.6 var(--f-u);color:var(--mist)}
.q.bad>legend,.q.bad>label.lg{color:var(--blush)}
.err{min-height:1.6em;margin:0 0 .6rem;font:500 .95rem/1.6 var(--f-u);color:var(--blush);text-align:center}
.go{display:flex;align-items:center;justify-content:center;width:100%;max-width:22rem;min-height:58px;margin:0 auto;border:0;border-radius:999px;background:var(--pearl);color:#0a1a22;
font:700 1.25rem/1 var(--f-d);cursor:pointer;box-shadow:0 10px 28px -12px rgba(0,0,0,.7);transition:background-color .25s,transform .25s}
.go:hover,.go:focus-visible{background:#fff;transform:translateY(-1px)}
.priv{margin:1rem 0 0;text-align:center;font:400 .85rem/1.7 var(--f-u);color:var(--mist)}

/* result */
.res{padding:2.8rem 0 0;scroll-margin-top:4.2rem}
.st{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.res.show .st{opacity:1;transform:none}
.res.show .s1{transition-delay:.05s}.res.show .s2{transition-delay:.3s}.res.show .s3{transition-delay:.7s}.res.show .s4{transition-delay:1.1s}
.res-head{text-align:center}
.res-eb{margin:0;font:500 1.15rem/1.5 var(--f-t);color:var(--fog)}
.res-h{margin:.35rem 0 0;font-weight:700;color:var(--halo)}
.r-num{display:block;white-space:nowrap;font:700 clamp(2.9rem,15vw,4.8rem)/1.25 var(--f-d)}
.r-num b{font-weight:700}.r-num .w{font-size:.4em;font-weight:600;color:var(--fog);margin-inline:.4em}
.r-unit{display:block;margin-top:-.15rem;font:600 1.5rem/1.5 var(--f-d);color:var(--pearl)}
.res-note{margin:.6rem 0 0;font:400 1rem/1.6 var(--f-u);color:var(--mist)}
.gridcard{margin:2rem 0 0;padding:1.3rem .9rem 1rem;border:1px solid var(--line);border-radius:22px;background:rgba(233,241,239,.03)}
.gridwrap{position:relative}
.gridwrap canvas{display:block;width:100%}
.nextdot{position:absolute;width:0;height:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.nextdot.on{opacity:1}
.nextdot::after{content:"";position:absolute;left:var(--rr,-9px);top:var(--rr,-9px);width:calc(var(--rr,-9px)*-2);height:calc(var(--rr,-9px)*-2);border-radius:50%;border:1px solid var(--blush);animation:ring 3.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.7);opacity:.85}70%,100%{transform:scale(2.2);opacity:0}}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.1rem;margin:1rem 0 0;padding:0;list-style:none;font:400 .86rem/1.6 var(--f-u);color:var(--mist)}
.legend li{display:flex;align-items:center;gap:.4rem}
.lg-d{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pearl);opacity:.8}
.lg-d.b{background:var(--blush);opacity:1;box-shadow:0 0 8px rgba(239,201,191,.6)}
.res-line{margin:1.8rem 0 0;text-align:center;font:400 1.4rem/1.8 var(--f-t);color:var(--fog);text-wrap:balance}

.sep{display:flex;align-items:center;gap:1rem;margin:3rem 0 2.4rem}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.sep i{width:7px;height:7px;border-radius:50%;background:var(--blush);opacity:.85}
.turn{text-align:center}
.turn h3{margin:0;font:600 clamp(1.6rem,6vw,2rem)/1.5 var(--f-d);color:var(--halo)}
.turn p.t{margin:.8rem auto 0;max-width:30rem;font:400 1.35rem/1.9 var(--f-t);color:var(--fog);text-wrap:balance}
.tool{margin:1.5rem 0 0;padding:1.15rem 1.3rem 1.2rem;border:1px solid rgba(233,241,239,.18);border-radius:18px;background:var(--soft);text-align:center}
.tool .lb{margin:0 0 .3rem;font:600 .95rem/1.5 var(--f-u);color:var(--blush)}
.tool p.tt{margin:0;font:400 1.3rem/1.85 var(--f-t);color:var(--halo);text-wrap:balance}
.cta{display:flex;flex-direction:column;align-items:stretch;gap:.8rem;margin:1.7rem auto 0;max-width:24rem}
.btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-height:56px;padding:.65rem 1.4rem;border:1px solid rgba(233,241,239,.4);border-radius:999px;background:transparent;
text-decoration:none;text-align:center;font:600 1.08rem/1.4 var(--f-u);color:var(--pearl);cursor:pointer;transition:background-color .25s,border-color .25s,transform .25s}
.btn small{font:400 .8rem/1.4 var(--f-u);opacity:.72}
.btn:hover,.btn:focus-visible{border-color:var(--halo);background:rgba(233,241,239,.08);transform:translateY(-1px)}
.btn.solid{background:var(--pearl);color:#0a1a22;border-color:var(--pearl);font-weight:700;font-size:1.15rem;min-height:62px;box-shadow:0 10px 28px -12px rgba(0,0,0,.7)}
.btn.solid:hover,.btn.solid:focus-visible{background:#fff;border-color:#fff}
.btn.soft{border-color:rgba(239,201,191,.5);color:var(--blush);background:rgba(239,201,191,.07)}
.btn.soft:hover,.btn.soft:focus-visible{border-color:rgba(239,201,191,.85);background:rgba(239,201,191,.14)}
.btn.slim{min-height:50px;font-size:1rem;flex-direction:row}

.share{margin:3rem 0 0;padding:1.5rem 1.2rem;border:1px solid var(--line);border-radius:22px;background:var(--soft);text-align:center}
.share h3{margin:0;font:600 1.4rem/1.5 var(--f-d);color:var(--halo)}
.share .sub{margin:.3rem 0 0;font:400 .92rem/1.7 var(--f-u);color:var(--mist)}
.sh-row{display:flex;align-items:center;justify-content:center;gap:1.3rem;margin:1.3rem 0 0}
.sp{flex:none;width:124px;padding:0;border:1px solid var(--pearl-a22);border-radius:14px;background:var(--night);overflow:hidden;cursor:pointer;line-height:0;aspect-ratio:9/16;display:block;transition:border-color .25s,transform .25s}
.sp:hover,.sp:focus-visible{border-color:rgba(233,241,239,.6);transform:translateY(-2px)}
.sp img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.sp img.on{opacity:1}
.sh-btns{display:flex;flex-direction:column;gap:.7rem;flex:1;max-width:14rem}
.msg{min-height:1.5em;margin:.8rem 0 0;font:500 .9rem/1.6 var(--f-u);color:var(--fog)}

.how{margin:2.4rem 0 0;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:14px;font:400 .92rem/1.85 var(--f-u);color:var(--fog)}
.how summary{cursor:pointer;font-weight:600;color:var(--pearl)}
.how ul{margin:.8rem 0 0;padding-inline-start:1.2rem}.how li{margin:.4rem 0}
.how table{width:100%;margin:1rem 0 0;border-collapse:collapse;font-size:.88rem;text-align:center}
.how th,.how td{padding:.3rem .4rem;border-bottom:1px solid var(--line)}.how th{color:var(--mist);font-weight:500}
.how .src{margin:.9rem 0 0;color:var(--mist);font-size:.85rem}

footer{max-width:37rem;margin:2.2rem auto 0;padding:2rem 16px 3rem;border-top:1px solid var(--line);font:400 .9rem/1.9 var(--f-u);color:var(--mist);text-align:center}
footer a{color:var(--fog)}

/* image dialog */
dialog.mdl{width:min(92vw,25rem);max-height:94vh;margin:auto;padding:1.1rem 1.1rem 1.2rem;border:1px solid var(--pearl-a22);border-radius:22px;background:var(--night);color:var(--pearl);text-align:center;overflow:auto}
dialog.mdl::backdrop{background:rgba(2,5,8,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog.mdl:not([open]){display:none}
.mdl-x{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;width:38px;height:38px;border:1px solid var(--pearl-a22);border-radius:50%;background:rgba(5,9,13,.6);color:var(--fog);font-size:1.3rem;line-height:1;cursor:pointer}
.mdl-x:hover{color:var(--halo)}
.mdl img{display:block;max-width:100%;max-height:56vh;width:auto;height:auto;margin:1.6rem auto 0;border-radius:12px;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.mdl .msg{min-height:1.2em;margin:.5rem 0 0}
.mdl .tip{margin:.9rem 0 0;font:400 .9rem/1.7 var(--f-u);color:var(--fog)}
.mdl .row{display:flex;gap:.6rem;margin:1rem 0 0}.mdl .row .btn{flex:1;min-height:48px;font-size:.95rem;padding:.4rem .8rem}

@media (min-width:700px){
.sp{width:148px}
.hero{padding-top:4.4rem}
.cta{flex-direction:column}
.res-eb{font-size:1.3rem}
}
@media (max-height:720px){.mdl img{max-height:42vh}}
@media (max-width:380px){.chip span{font-size:.95rem}.sh-row{flex-direction:column}.sh-btns{max-width:100%;width:100%}}
@media (prefers-reduced-motion:reduce){.chip span,.btn,.go,.age,.sp{transition:none}.btn:hover,.go:hover,.sp:hover{transform:none}}