/* /kids/ — "Bitcoin for Juniors": the open My First Bitcoin curriculum in Persian, Sorani and English */
[data-lang][hidden],.b4j [hidden]{display:none!important}
.b4j{--c:#f7931a;max-width:900px;margin:0 auto 24px}
.b4j p,.b4j li{line-height:1.95}
.b4j-bc{display:flex;flex-wrap:wrap;gap:2px 7px;align-items:center;font-size:.78rem;color:var(--mute);margin:14px 0 4px}
.b4j-bc a{color:var(--mute)}.b4j-bc i{font-style:normal;opacity:.45}

/* ---- hub */
.b4j-hero{border:1px solid var(--line);border-radius:24px;padding:24px 24px 20px;margin:10px 0 20px;
  background:radial-gradient(120% 150% at 100% 0,rgba(247,147,26,.18),transparent 55%),var(--card)}
.b4j-hero .kick{margin:0;font-size:.8rem;color:var(--acc);font-weight:700}
.b4j-hero h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.3;margin:4px 0 8px}
.b4j-hero .lead{color:#dcdcd6;max-width:62ch;margin:0 0 14px;font-size:1.02rem}
.b4j-facts{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 16px}
.b4j-facts li{border:1px solid var(--line);border-radius:99px;padding:2px 13px;font-size:.82rem;background:#ffffff0a;line-height:1.9}
.b4j-cta{display:flex;gap:10px;flex-wrap:wrap}
.b4j-cta a{border-radius:99px;padding:9px 20px;text-decoration:none}
.b4j-cta .go{background:var(--acc);color:#000;font-weight:800}
.b4j-cta .alt{border:1px solid var(--line);color:var(--ink)}.b4j-cta .alt:hover{border-color:var(--acc)}
.b4j-all{margin:14px 0 0;font-size:.85rem;color:var(--mute)}
.b4j-who{color:#d6d6d0;max-width:70ch;margin:4px 0 0}
.b4j-hubp h2,.b4j-s>h2{font-size:1.2rem}.b4j-hubp>section{margin:22px 0}
.b4j-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px;margin-top:10px}
.b4j-grid.sm{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.b4j-mod,.b4j-sc{position:relative;display:block;border:1px solid var(--line);border-radius:18px;padding:14px 16px 14px;
  background:var(--card);color:var(--ink);text-decoration:none;overflow:hidden}
.b4j-mod{border-top:3px solid var(--c)}
.b4j-mod:hover,.b4j-sc:hover{border-color:var(--c,var(--acc));text-decoration:none}
.b4j-mod .ic,.b4j-sc .ic{font-size:1.45rem;line-height:1.4;display:block}
.b4j-mod small{display:block;color:var(--c);font-weight:700;font-size:.76rem}
.b4j-mod h3{margin:2px 0 4px;font-size:1.06rem;line-height:1.6}
.b4j-mod .cnt{margin:0;color:var(--mute);font-size:.8rem}
.b4j-bar{display:block;height:5px;border-radius:9px;background:#ffffff14;overflow:hidden;margin-top:10px}
.b4j-bar i{display:block;height:100%;width:0;background:var(--c);transition:width .4s}
.b4j-mod .pc{display:block;font-size:.72rem;color:var(--mute);margin-top:4px;min-height:1.3em}
.b4j-sc b{display:block;font-size:.98rem}.b4j-sc small{display:block;color:var(--mute);font-size:.78rem;line-height:1.7}

/* ---- article header */
.b4j-h{margin:8px 0 14px}
.b4j-h .kick{margin:0;font-size:.82rem;font-weight:700;color:var(--c)}.b4j-h .kick a{color:inherit}
.b4j-h h1{font-size:clamp(1.5rem,3.8vw,2.3rem);line-height:1.45;margin:2px 0}
.b4j-en{display:block;color:var(--mute);font-size:.88rem;margin:0 0 4px;direction:ltr;text-align:end}
.b4j .lead{font-size:1.05rem;color:#e6e6e0;margin:10px 0 14px}
.b4j-chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.b4j-chips span{font-size:.74rem;border:1px solid var(--line);border-radius:99px;padding:0 10px;color:#cfcfc9;background:#ffffff08;line-height:1.9}
.b4j-toc{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.b4j-toc a{border:1px solid var(--line);border-radius:99px;padding:1px 13px;font-size:.8rem;color:var(--ink);background:#ffffff08;line-height:1.9}
.b4j-toc a:hover{border-color:var(--c);text-decoration:none}
.b4j-toc a,.b4j-bc a,.b4j-cta a{flex-shrink:1;min-width:0;max-width:100%;overflow-wrap:anywhere}   /* the site-wide `a{flex-shrink:0}` made long headings push the page wider than the phone */

/* ---- the lesson body */
.b4j-s{border:1px solid var(--line);border-radius:18px;padding:14px 18px 10px;margin:14px 0;background:var(--card);scroll-margin-top:80px}
.b4j-s>h2{margin:0 0 8px;display:flex;gap:8px;align-items:center;line-height:1.6}
.b4j-s .ic{font-style:normal}
.b4j-s h3{font-size:1.03rem;margin:18px 0 6px;padding-inline-start:10px;border-inline-start:3px solid var(--c);line-height:1.7}
.b4j-s h4{font-size:.95rem;margin:12px 0 4px;color:var(--c);line-height:1.7}
.b4j-s ul,.b4j-s ol{margin:6px 0 10px;padding-inline-start:1.5em}
.b4j-s li{margin:2px 0}.b4j-s li::marker{color:var(--c)}
.b4j-s p{margin:6px 0}
.b4j-s .tm{display:inline-block;background:rgba(247,147,26,.14);color:var(--acc);border-radius:99px;padding:0 12px;font-size:.82rem;margin:6px 0}
.b4j-s .tm::before{content:'⏱ '}
.b4j-s .bl{font-weight:700;margin:12px 0 2px}
.b4j-s .apx{color:var(--mute);font-size:.88rem}
.b4j-s .it{font-style:italic;color:#cfcfc9}
.b4j-s li.ck{list-style:none;margin-inline-start:-1.3em;cursor:pointer}
.b4j-s li.ck.on{opacity:.55}.b4j-s li.ck.on>*:not(.b4j-ck){text-decoration:line-through}
.b4j-ck{accent-color:var(--c);width:1.05em;height:1.05em;margin-inline-end:.5em;vertical-align:-.14em;cursor:pointer}
.b4j-tw{overflow-x:auto;margin:8px 0}
.b4j-tw table{border-collapse:collapse;min-width:100%;font-size:.9rem}
.b4j-tw th,.b4j-tw td{border:1px solid var(--line);padding:5px 11px;text-align:start;line-height:1.8}
.b4j-tw th{background:#ffffff0d}
.b4j-note{border-inline-start:3px solid var(--mute);padding:4px 12px;color:var(--mute);font-size:.85rem;margin:14px 0}

/* ---- glossary */
.b4j-term{border:1px solid var(--line);border-radius:16px;padding:10px 16px 6px;margin:10px 0;background:var(--card);scroll-margin-top:80px}
.b4j-term h2{font-size:1.06rem;margin:0 0 2px}
.b4j-term .en{color:var(--mute);font-size:.8rem;font-weight:400;margin-inline-start:6px}

/* ---- module page: the list of activities */
.b4j-list{display:grid;gap:10px;margin:10px 0 6px}
.b4j-ac{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:11px 14px;
  background:#0d0d0d;color:var(--ink);text-decoration:none}
.b4j-ac:hover{border-color:var(--c);text-decoration:none}
.b4j-ac .no{flex:0 0 auto;min-width:3.4ch;text-align:center;font-weight:900;color:var(--c);border:1px solid var(--c);
  border-radius:12px;padding:2px 8px;font-family:'Space Grotesk',Vazirmatn,sans-serif;line-height:1.8}
.b4j-ac .tx{flex:1;min-width:0;display:block}
.b4j-ac .tt{display:block;font-size:1rem;line-height:1.6}
.b4j-ac .b4j-en{font-size:.74rem;margin:0}
.b4j-ac .ok{font-style:normal;font-weight:900;color:#4ade80;opacity:0}
.b4j-ac.done{border-color:rgba(74,222,128,.5)}.b4j-ac.done .ok{opacity:1}

/* ---- tools on a lesson page */
.b4j-bar2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0 6px}
.b4j-bar2 .lsw{margin:6px 0}.b4j-bar2 .sp{flex:1}
.b4j-btn{background:#ffffff0d;border:1px solid var(--line);color:var(--ink);border-radius:99px;padding:5px 14px;font:inherit;font-size:.85rem;cursor:pointer}
.b4j-btn:hover,.b4j-btn[aria-expanded=true]{border-color:var(--acc)}
.b4j-timer{border:1px solid var(--line);border-radius:18px;padding:10px 16px;margin:0 0 12px;background:var(--card);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.b4j-timer .pr{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.b4j-timer button{background:#ffffff0d;border:1px solid var(--line);color:var(--ink);border-radius:99px;padding:3px 13px;font:inherit;font-size:.85rem;cursor:pointer}
.b4j-timer button.on{background:var(--acc);border-color:var(--acc);color:#000;font-weight:800}
.b4j-timer .mn{color:var(--mute);font-size:.8rem}
.b4j-timer .tm{font-family:'Space Grotesk',monospace;font-size:2.3rem;font-weight:700;direction:ltr;letter-spacing:.04em;min-width:4.2ch;text-align:center}
.b4j-timer .ct{display:flex;gap:6px}.b4j-timer .up{margin:0;color:#ef4444;font-weight:800}
.b4j-timer.end .tm{color:#ef4444;animation:b4jb .7s steps(2) infinite}
@keyframes b4jb{50%{opacity:.25}}
.b4j-donebar{margin:20px 0 6px;text-align:center}
.b4j-done{background:var(--acc);color:#000;border:0;border-radius:99px;padding:10px 28px;font:inherit;font-weight:800;cursor:pointer}
.b4j-done .on{display:none}
.b4j-done[aria-pressed=true]{background:#4ade80}.b4j-done[aria-pressed=true] .off{display:none}.b4j-done[aria-pressed=true] .on{display:inline}
.b4j-pn{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap}
.b4j-pn a{flex:1 1 230px;border:1px solid var(--line);border-radius:16px;padding:9px 14px;background:var(--card);color:var(--ink);text-decoration:none;display:block;line-height:1.7}
.b4j-pn a:hover{border-color:var(--c)}.b4j-pn small{display:block;color:var(--mute);font-size:.72rem}.b4j-pn .n{text-align:end}
.b4j-back{margin:14px 0}
.b4j-credit{border:1px dashed var(--line);border-radius:14px;padding:10px 14px;margin:20px 0 8px;color:var(--mute);font-size:.8rem}
.b4j-credit p{margin:2px 0;line-height:1.85}.b4j-credit .lk{font-size:.78rem}
.b4j-go{display:inline-block;background:var(--acc);color:#000;border-radius:99px;padding:8px 20px;font-weight:800;text-decoration:none}

@media(max-width:560px){.b4j-hero{padding:18px 16px}.b4j-s{padding:12px 13px 8px}.b4j-ac .no{min-width:3ch}}
@media print{
  body>*:not(main){display:none!important}
  body{background:#fff!important;color:#000!important}
  main.w{max-width:none!important;padding:0!important}
  .b4j-np,.b4j-bc,.lsw,.b4j-toc,.b4j-pn,.b4j-donebar,.b4j-timer,.b4j-back{display:none!important}
  .b4j *{color:#000!important;background:none!important;box-shadow:none!important;border-color:#999!important}
  .b4j-s,.b4j-term{border:0!important;padding:0!important;margin:10px 0!important}
  .b4j-s h2,.b4j-s h3,.b4j-s h4{break-after:avoid}.b4j-s li,.b4j-s p{break-inside:avoid}
  .b4j a{text-decoration:underline}
  .b4j a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;word-break:break-all}
  .b4j-chips span{border:1px solid #999!important}
  .b4j-credit{border:1px solid #999!important;font-size:.7rem!important}
  .b4j-s li.ck{margin-inline-start:0}.b4j-s li.ck.on>*:not(.b4j-ck){text-decoration:none!important}
}