
:root{--bg:#fff8ef;--ink:#1f2140;--pri:#7048e8;--acc:#f76707;--card:#fff;--mut:#5c5f7a;--fs:1;--focus:#ff922b}
*{box-sizing:border-box}
html{font-size:calc(17px*var(--fs))}
body{margin:0;font-family:Heebo,"Noto Sans Hebrew",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
body.hc{--bg:#fff;--ink:#000;--mut:#222;--card:#fff}
body.hc .card,body.hc .panel{border:2px solid #000!important}
a{color:#3b2db0}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:4px solid var(--focus);outline-offset:2px;border-radius:6px}
.skip{position:absolute;right:-999px;top:0;background:#000;color:#fff;padding:8px 14px;z-index:99}.skip:focus{right:8px}
header.top{background:linear-gradient(90deg,#7048e8,#e64980,#f76707);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px #0003}
.top .in{max-width:1180px;margin:auto;display:flex;align-items:center;gap:10px;padding:8px 14px;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-weight:800;font-size:1.25rem;white-space:nowrap}
.navbtn{margin-inline-start:auto;background:#fff3;color:#fff;border:2px solid #fff8;border-radius:12px;padding:8px 14px;font:inherit;font-weight:700;min-height:44px;cursor:pointer}
nav.main{width:100%;display:none}nav.main.open{display:block}
nav.main ul{list-style:none;margin:0;padding:6px 0;display:flex;flex-wrap:wrap;gap:6px}
nav.main a{display:block;color:#fff;text-decoration:none;background:#fff2;border-radius:10px;padding:8px 12px;min-height:44px;font-weight:600}
nav.main a[aria-current=page]{background:#fff;color:#7048e8}
@media(min-width:1000px){.navbtn{display:none}nav.main{display:block;width:auto;margin-inline-start:auto}nav.main ul{padding:0}nav.main a{padding:6px 10px;font-size:.92rem}}
.a11y{max-width:1180px;margin:6px auto 0;padding:0 14px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.a11y button{font:inherit;font-size:.85rem;border:1.5px solid #c5b8f5;background:#fff;border-radius:10px;padding:6px 10px;min-height:40px;cursor:pointer}
.crumbs{max-width:1180px;margin:8px auto 0;padding:0 14px;font-size:.9rem;color:var(--mut)}.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px}.crumbs li+li::before{content:"‹ ";color:#999}
main{max-width:1180px;margin:auto;padding:10px 14px 40px}
h1{font-size:2rem;margin:.3em 0;line-height:1.25}h2{font-size:1.45rem;margin:1.2em 0 .4em}h3{font-size:1.15rem}
.lead{font-size:1.1rem;color:var(--mut)}
.hero{display:grid;gap:16px;align-items:center;background:#fff;border-radius:24px;padding:18px;box-shadow:0 6px 24px #7048e822}
@media(min-width:800px){.hero{grid-template-columns:1.1fr .9fr}}
.hero img{width:100%;border-radius:18px;display:block;height:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;border:0;border-radius:14px;padding:10px 18px;min-height:48px;cursor:pointer;text-decoration:none;color:#fff;background:var(--pri);box-shadow:0 3px 0 #0002}
.btn.alt{background:#fff;color:var(--pri);border:2px solid var(--pri)}.btn.orange{background:var(--acc)}.btn.green{background:#2b8a3e}.btn.big{font-size:1.25rem;padding:14px 26px;min-height:60px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--card);border-radius:18px;padding:14px;box-shadow:0 4px 14px #0001;border-top:6px solid var(--c,#7048e8);display:flex;flex-direction:column;gap:6px}
.card h3{margin:.1em 0}.card .em{font-size:2.2rem;line-height:1}
.card a.cover{text-decoration:none;color:inherit}
.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{font-size:.8rem;background:#f1edff;color:#5233c9;border-radius:999px;padding:2px 10px;font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;min-height:96px;border-radius:18px;padding:10px 6px;text-decoration:none;color:#1f2140;font-weight:700;box-shadow:0 3px 0 #0002;font-size:.98rem}
.tile .e{font-size:1.7rem}.tile small{font-weight:500;font-size:.78rem}
.tile.r{background:#d0ebff}.tile.k{background:#d3f9d8}.tile.o{background:#ffe8cc}
.panel{background:#fff;border-radius:20px;padding:16px;box-shadow:0 4px 18px #0001;margin:14px 0}
.seg{display:flex;flex-wrap:wrap;gap:6px}.seg button{font:inherit;font-weight:700;border:2px solid #d0bfff;background:#fff;border-radius:12px;padding:8px 14px;min-height:46px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--pri);color:#fff;border-color:var(--pri)}
/* die */
.stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px;padding:18px 6px;background:radial-gradient(circle at 50% 40%,#fff,#f3f0ff);border-radius:20px}
.dice{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.diewrap{perspective:700px;width:var(--ds,120px);height:var(--ds,120px);cursor:pointer}
.die{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.2,.9,.25,1.08);transform:rotateX(-20deg) rotateY(25deg)}
.face{position:absolute;inset:0;border-radius:18%;background:linear-gradient(145deg,#fff,#f1f3f5);border:2px solid #dee2e6;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14%;box-shadow:inset 0 0 14px #0001}
.face i{width:70%;height:70%;margin:auto;border-radius:50%;background:radial-gradient(circle at 35% 35%,#555,#111)}
.face.f1 i,.face.f4 i{background:radial-gradient(circle at 35% 35%,#ff6b6b,#c92a2a)}
.f1{transform:translateZ(calc(var(--ds,120px)/2))}.f6{transform:rotateY(180deg) translateZ(calc(var(--ds,120px)/2))}
.f2{transform:rotateY(90deg) translateZ(calc(var(--ds,120px)/2))}.f5{transform:rotateY(-90deg) translateZ(calc(var(--ds,120px)/2))}
.f3{transform:rotateX(90deg) translateZ(calc(var(--ds,120px)/2))}.f4{transform:rotateX(-90deg) translateZ(calc(var(--ds,120px)/2))}
.die.col .face{background:linear-gradient(145deg,var(--dc,#7048e8),#fff 160%);border-color:#fff}
.die.col .face i{background:#fff}
.reduce .die{transition:none!important}
@media(prefers-reduced-motion:reduce){.die{transition:none}}
.result{min-height:4.5em;background:#fff;border-radius:18px;padding:12px 16px;border:3px dashed #d0bfff;font-size:1.15rem;flex:1 1 280px;max-width:560px}
.result .big{font-size:1.35rem;font-weight:800}
.lvl{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
table.board{width:100%;border-collapse:separate;border-spacing:4px;font-size:.98rem}
table.board th{background:var(--c,#7048e8);color:#fff;border-radius:10px;padding:8px}
table.board td{background:#fff;border-radius:10px;padding:8px;vertical-align:top;border:2px solid #eee}
table.board td.fcell{background:#fff;border-radius:10px;padding:8px;text-align:center;font-weight:800;font-size:1.1rem;width:84px;border:2px solid #eee}
table.board tr.hit td{border-color:#ffd43b;background:#fff9db}table.board td.hitc{background:#ffe066!important;border-color:#f59f00!important;box-shadow:0 0 0 3px #f59f0055}
.pips{font-size:1.6rem;line-height:1}
@media(max-width:640px){table.board,table.board tbody,table.board tr,table.board td,table.board th{display:block;width:100%}table.board thead{display:none}table.board tr{margin-bottom:10px;background:#f8f9fa;border-radius:12px;padding:4px}table.board td{margin:3px 0}table.board td[data-l]::before{content:attr(data-l) " · ";font-weight:700;color:#7048e8}table.board td.fcell{display:block;width:auto;text-align:right}}
body.k table.board .c1,body.k table.board .c2,body.k th.c1,body.k th.c2{display:none}
body.k main{font-size:1.15rem}body.k .hide-k{display:none!important}
.gloss{display:flex;flex-wrap:wrap;gap:8px}.gloss button{font:inherit;border:2px solid #ffc078;background:#fff4e6;border-radius:14px;padding:8px 12px;min-height:48px;cursor:pointer;font-weight:700}
dialog{border:0;border-radius:22px;padding:22px;max-width:92vw;width:380px;text-align:center;box-shadow:0 10px 40px #0005}dialog .e{font-size:5rem}dialog::backdrop{background:#0006}
.pblock{background:linear-gradient(135deg,#e7f5ff,#fff0f6);border:2px solid #a5d8ff;border-radius:20px;padding:14px;margin:16px 0}
.pblock h2{margin:.1em 0 .4em;font-size:1.25rem}
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}.prow .lab{font-weight:700;min-width:7.5em}
.prow a{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:12px;background:#fff;border:2px solid #74c0fc;text-decoration:none;font-weight:700;color:#1864ab}
.prow a.pdf{border-color:#ff8787;color:#c92a2a}
.prow.cur{background:#fff;border-radius:12px;padding:4px 8px;box-shadow:0 0 0 3px #ffd43b}
.pn{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:24px}
footer.foot{background:#2b2350;color:#eee;padding:20px 14px;text-align:center;font-size:.92rem}footer.foot a{color:#ffd8a8}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.steps li{background:#fff;border-radius:14px;padding:10px 12px 10px 12px;box-shadow:0 2px 8px #0001}.steps li::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;font-weight:800;margin-left:8px}
table.t{width:100%;border-collapse:collapse;background:#fff}table.t th,table.t td{border:1.5px solid #d0bfff;padding:8px;text-align:right;vertical-align:top}table.t th{background:#f3f0ff}
.tablewrap{overflow-x:auto}
details{background:#fff;border-radius:14px;padding:10px 14px;margin:10px 0;box-shadow:0 2px 8px #0001}summary{cursor:pointer;font-weight:700;min-height:40px;display:flex;align-items:center}
.textbox p{margin:.4em 0}
.ttsbtn{font:inherit;border:2px solid #b2f2bb;background:#ebfbee;border-radius:12px;padding:6px 12px;min-height:44px;cursor:pointer;font-weight:700}
.note{background:#fff9db;border-right:6px solid #fcc419;border-radius:12px;padding:10px 14px}
.embed{direction:ltr;text-align:left;background:#212529;color:#e9ecef;border-radius:12px;padding:10px;font-family:monospace;font-size:.85rem;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
