:root{--bg1:#fff3d6;--bg2:#ffe3f1;--bg3:#dff3ff;--ink:#28203b;--muted:#6f6480;
--coral:#ff7a59;--coral-d:#ef5b39;--card:#fff;--line:#efe4d6;--soft:#fff7ec;
--shadow:0 14px 34px rgba(80,50,20,.14);--r:22px}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Varela Round",system-ui,Segoe UI,Arial,sans-serif;color:var(--ink);
background:linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));min-height:100vh;line-height:1.7;direction:rtl}
a{color:var(--coral-d);text-decoration:none}
a:hover{text-decoration:underline}
.bar{display:flex;align-items:center;padding:.8rem 1rem;position:sticky;top:0;z-index:5;
background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font-weight:700;font-size:1.05rem;color:var(--ink);display:flex;align-items:center;gap:.4rem}
.logo .mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
background:var(--coral);color:#fff;font-size:.8rem}
main{max-width:760px;margin:0 auto;padding:1.1rem 1rem 4rem}
.crumbs{font-size:.85rem;color:var(--muted);margin:.2rem 0 1rem}
.crumbs a{color:var(--muted)}
h1{font-size:1.5rem;line-height:1.25;margin:.2rem 0 .5rem}
h2{font-size:1.15rem;margin:1.4rem 0 .4rem}
p{margin:.5rem 0}
.lead{color:var(--muted);font-weight:600}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);
padding:1.1rem 1.15rem;box-shadow:var(--shadow);margin:1rem 0}
.badge{display:inline-block;font-size:.78rem;font-weight:700;padding:.2rem .7rem;border-radius:999px;
background:var(--soft);border:1px solid var(--line);color:var(--muted);margin-inline-end:.35rem}
.q{font-size:1.18rem;font-weight:700;background:var(--soft);border-radius:16px;padding:.9rem 1rem;border:2px solid var(--line)}
details{background:var(--soft);border:2px solid var(--line);border-radius:16px;padding:.2rem .9rem;margin:.6rem 0}
summary{cursor:pointer;font-weight:700;padding:.6rem 0;list-style:none}
summary::-webkit-details-marker{display:none}
ol,ul{margin:.4rem 0;padding-inline-start:1.3rem}
ol li,ul li{margin:.3rem 0}
.answer{font-weight:700;color:#0f8c80}
.cta{display:inline-block;background:linear-gradient(180deg,var(--coral),var(--coral-d));color:#fff;
font-weight:700;padding:.8rem 1.3rem;border-radius:999px;box-shadow:var(--shadow);margin:.4rem 0}
.cta:hover{text-decoration:none;filter:brightness(1.03)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem;margin:.8rem 0;list-style:none;padding:0}
.grid a{display:block;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:.7rem .85rem;color:var(--ink);font-weight:600}
.grid a:hover{border-color:var(--coral);text-decoration:none}
.grid small{display:block;color:var(--muted);font-weight:600;margin-top:.15rem}
.lessons{list-style:none;padding:0;margin:.6rem 0}
.lessons li{margin:.35rem 0}
.lessons a{display:flex;gap:.6rem;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:.6rem .8rem;color:var(--ink)}
.lessons a:hover{border-color:var(--coral);text-decoration:none}
.lessons .n{font-weight:700;color:var(--coral-d);min-width:2.2rem}
.nav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.4rem;flex-wrap:wrap}
.nav a{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:.6rem 1rem;color:var(--ink);font-weight:700}
footer{text-align:center;color:var(--muted);font-weight:600;font-size:.8rem;padding:1.6rem 1rem}
@media(max-width:560px){h1{font-size:1.28rem}main{padding:1rem .8rem 3rem}}