@font-face{font-family:"Faruma";src:local("Faruma"),url("fonts/Faruma.woff2") format("woff2"),url("fonts/Faruma.ttf") format("truetype");font-display:swap}
:root{--g:#16a34a;--g2:#dcfce7;--ink:#1e293b;--mute:#64748b;--bg:#f6faf7;--r:24px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Faruma",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.2rem;line-height:1.9;color:var(--ink);background:radial-gradient(900px 400px at 100% -5%,#fef9c3,transparent),radial-gradient(800px 400px at 0 0,#d1fae5,transparent),var(--bg);min-height:100vh;display:flex;flex-direction:column}
.en{font-family:system-ui,sans-serif;direction:ltr;unicode-bidi:isolate;line-height:1.4}
.wrap{max-width:1180px;margin:auto;padding:0 18px;width:100%}
button{font:inherit;cursor:pointer;border:0;color:inherit}
.top{position:sticky;top:0;z-index:20;background:#fffc;backdrop-filter:blur(12px);border-bottom:1px solid #e2e8f0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center}.brand h1{font-size:1.45rem;line-height:1.4}.brand small{color:var(--mute);font-weight:600}
.logo{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:1.7rem;background:linear-gradient(135deg,#22c55e,#facc15);box-shadow:0 6px 16px #16a34a40}
.ages{display:flex;background:#f1f5f9;padding:5px;border-radius:18px;gap:4px}
.ages button{padding:2px 16px;border-radius:14px;background:none;font-size:1rem}
.ages .on{background:#fff;box-shadow:0 1px 4px #0002;font-weight:700}
.ghost{background:var(--g2);color:#15803d;padding:6px 16px;border-radius:16px;font-size:1rem;border:1px solid #bbf7d0}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.tabs button{white-space:nowrap;padding:6px 20px;border-radius:18px;background:#f1f5f9;font-size:1.05rem;transition:.2s}
.tabs button:hover{background:#e2e8f0}.tabs .on{background:var(--g);color:#fff;box-shadow:0 6px 14px #16a34a45}
main{flex:1;padding-block:26px}
.panel{display:none;animation:in .35s}.panel.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
.hero{border-radius:32px;color:#fff;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px;box-shadow:0 14px 34px #0002;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:#fff2;left:-60px;top:-90px}
.hero h2{font-size:1.9rem;line-height:1.5}.hero p{opacity:.95;max-width:640px}.hero>div{min-width:0}
.big{font-size:4.5rem;filter:drop-shadow(0 6px 8px #0003);animation:fl 3.5s ease-in-out infinite;z-index:1}
@keyframes fl{50%{transform:translateY(-8px) rotate(-4deg)}}
.g1{background:linear-gradient(120deg,#22c55e,#0d9488)}.g2{background:linear-gradient(120deg,#f59e0b,#ca8a04)}
.g3{background:linear-gradient(120deg,#2563eb,#6366f1)}.g4{background:linear-gradient(120deg,#9333ea,#ec4899)}.g5{background:linear-gradient(120deg,#0d9488,#16a34a)}
#q{width:100%;max-width:420px;padding:10px 20px;border-radius:18px;border:2px solid #e2e8f0;font:inherit;font-size:1.05rem;margin-bottom:20px;background:#fff}
#q:focus{outline:0;border-color:var(--g)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:20px}
.card{background:#fff;border-radius:var(--r);padding:22px;box-shadow:0 4px 18px #0f172a0f;border:1px solid #f1f5f9;display:flex;flex-direction:column;gap:10px;transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 30px #0f172a1a}
.row{display:flex;justify-content:space-between;align-items:center}
.ico{font-size:2.4rem;background:var(--g2);width:66px;height:66px;display:grid;place-items:center;border-radius:20px}
.tag{font-size:.8rem;font-weight:700;background:var(--g2);color:#15803d;padding:2px 12px;border-radius:99px;font-family:system-ui;line-height:1.6}
.card h3{font-size:1.25rem;line-height:1.7}.card p{color:var(--mute);font-size:1.05rem;flex:1}
.ar{font-family:"Amiri","Scheherazade New","Noto Naskh Arabic",serif;font-size:1.7rem;text-align:center;background:#fffbeb;border-radius:18px;padding:12px;direction:rtl}
.btn{background:var(--g);color:#fff;padding:7px 22px;border-radius:16px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:.2s;box-shadow:0 5px 12px #16a34a40}
.btn:hover{filter:brightness(1.08);transform:scale(1.03)}
.card .btn{width:100%}
.amber .btn{background:#d97706;box-shadow:0 5px 12px #d9770640}.amber .ico,.amber .tag{background:#fef3c7;color:#b45309}
.blue .btn{background:#2563eb;box-shadow:0 5px 12px #2563eb40}.blue .ico,.blue .tag{background:#dbeafe;color:#1d4ed8}
.purple .btn{background:#9333ea;box-shadow:0 5px 12px #9333ea40}.purple .ico,.purple .tag{background:#f3e8ff;color:#7e22ce}
.letters{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.letter{background:#fff;border:2px solid #e2e8f0;border-radius:26px;padding:12px 8px;text-align:center;transition:.2s;line-height:1.4}
.letter b{display:block;font-size:3rem;color:#15803d;transition:.2s}
.letter small{color:var(--mute);display:block}
.letter:hover,.letter.hit{border-color:var(--g);background:var(--g2);transform:translateY(-4px)}.letter:hover b{transform:scale(1.15)}
.empty{grid-column:1/-1;text-align:center;color:var(--mute);padding:40px}
footer{text-align:center;padding:28px 16px;color:var(--mute);background:#fff;border-top:1px solid #e2e8f0}
dialog{margin:auto;border:0;border-radius:30px;padding:0;width:min(720px,94vw);max-height:90vh;box-shadow:0 30px 80px #0006;overflow:hidden;background:#fff;color:var(--ink)}
dialog[open]{display:flex;flex-direction:column;animation:in .25s}
dialog::backdrop{background:#0f172a99;backdrop-filter:blur(4px)}
.dh{background:var(--g);color:#fff;padding:12px 24px;display:flex;justify-content:space-between;align-items:center}.dh.dark{background:#0f172a}
.dh h3{font-size:1.3rem;line-height:1.7;padding-inline-end:12px;min-width:0}.x{width:40px;height:40px;border-radius:50%;background:#fff3;color:#fff;font-size:1.1rem}
.db{padding:24px;overflow-y:auto;flex:1}.db .story{background:#f0fdf4;border-radius:22px;padding:22px;font-size:1.35rem;line-height:2.3;border:1px solid #bbf7d0}
.db .em{font-size:4.5rem;text-align:center}.db ul{padding-inline-start:24px;margin:10px 0}.note{color:var(--mute);margin-top:12px}
.df{padding:14px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;display:flex;gap:14px;align-items:center}
#print-area{display:none}
@media(max-width:640px){.top{position:static}.bar{gap:8px;padding-block:8px}.brand h1{font-size:1.2rem}.logo{width:44px;height:44px;font-size:1.4rem}.wrap{padding:0 14px}.tabs{flex-wrap:wrap;overflow:visible;justify-content:center;padding-block:6px 10px}.tabs button{padding:2px 14px;font-size:1rem}.hero{padding:20px 18px;border-radius:26px}.hero h2{font-size:1.4rem}.big{font-size:2.6rem}.ages{order:3;width:100%;justify-content:center}.card{padding:18px}.dh{padding:10px 16px}.db{padding:18px}.df{padding:12px 16px}main{padding-block:16px}dialog{width:calc(100vw - 24px);max-height:88vh}}
@media print{body>*:not(#print-area){display:none!important}#print-area{display:block;direction:rtl}
.ws{padding:10mm;text-align:center}.ws h2{font-size:26pt}.trace{font-size:56pt;letter-spacing:14px;color:#cbd5e1;border-bottom:2px dashed #94a3b8;line-height:1.5}
.cnt{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #94a3b8;padding:6px 0;font-size:24pt}.cnt span{letter-spacing:4px}.cnt i{display:inline-block;width:60px;height:44px;border:2px solid #000;border-radius:8px}
.ws svg{width:90%;max-height:210mm}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.vid{width:100%;aspect-ratio:16/9;border:0;border-radius:18px;background:#0f172a}

[hidden]{display:none!important}
.g6{background:linear-gradient(120deg,#f43f5e,#f59e0b)}
.wcard{max-width:760px;margin:auto;gap:14px}.wcard:hover{transform:none}
#w-text{width:100%;font:inherit;font-size:1.4rem;line-height:2.3;padding:14px 16px;border:2px solid #e2e8f0;border-radius:18px;resize:vertical;min-height:170px;background:#fff;direction:rtl;color:var(--ink)}
#w-text:focus{outline:0;border-color:var(--g)}
.wrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wrow .btn{width:auto;flex:1;min-width:120px}.wrow .ghost{padding:6px 18px}
#w-voice{font:inherit;font-size:1.05rem;padding:4px 14px;border-radius:14px;border:2px solid #e2e8f0;background:#fff;color:var(--ink)}
#w-status,#r-status{color:var(--mute);min-height:1.4em}

@media(max-width:640px){
.top{padding-top:env(safe-area-inset-top,0)}
.bar{padding-block:12px 0;flex-wrap:wrap;align-items:center;row-gap:6px}
.brand{min-width:0;flex:1;gap:10px}.brand>div{min-width:0}
.brand h1{font-size:1.15rem;line-height:1.9;padding-top:4px}
.brand small{display:block;font-size:.78rem;line-height:1.2}
.ghost{padding:2px 12px;font-size:.95rem;line-height:1.7;white-space:nowrap}
.ages{order:3;width:100%;justify-content:space-between;margin:0}.ages button{flex:1}
.ages button{padding:0 14px;font-size:.95rem;line-height:1.9}
.tabs{gap:6px;padding-block:4px 10px}
.tabs button{padding:0 12px;font-size:.95rem;line-height:1.9;border-radius:14px}
}