:root{--ink:#24203a;--muted:#5b5570;--bg:#fff8ef;--card:#fff;--plum:#5b2a86;--teal:#0f6e74;--amber:#c8650a;--rose:#b4325a;--leaf:#2f7d32;--sky:#1f5fae;--line:#ead9c6;--fs:1}
@font-face{font-family:Heebo;src:url(fonts/heebo.woff2) format("woff2");font-display:swap;font-weight:100 900}
@font-face{font-family:Frank;src:url(fonts/frank.woff2) format("woff2");font-display:swap;font-weight:300 900}
*{box-sizing:border-box}html{font-size:calc(17px*var(--fs))}
body{margin:0;font-family:Heebo,Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 0,#ffe7c7 0,transparent 40%),radial-gradient(circle at 95% 10%,#e9dcff 0,transparent 35%),var(--bg);line-height:1.65}
h1,h2,h3{font-family:Frank,Heebo,serif;line-height:1.25;color:var(--plum)}h1{font-size:2rem;margin:.3em 0}h2{font-size:1.45rem;margin:1.2em 0 .5em}h3{font-size:1.15rem;margin:.9em 0 .3em}
a{color:var(--teal)}a:hover{color:var(--rose)}
:focus-visible{outline:3px solid #ff9f1c;outline-offset:3px;border-radius:6px}
.skip{position:absolute;right:-999px;top:0;background:#fff;padding:.5em 1em;z-index:99}.skip:focus{right:8px}
header.top{background:linear-gradient(135deg,#3f1d63,#5b2a86 55%,#0f6e74);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 4px 16px #0003}
.topin{max-width:1180px;margin:auto;display:flex;align-items:center;gap:.6rem;padding:.45rem .8rem;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-family:Frank,serif;font-weight:800;font-size:1.1rem;display:flex;align-items:center;gap:.4rem}
.brand img{width:34px;height:34px;border-radius:50%;background:#fff}
nav.main{display:flex;gap:.25rem;flex-wrap:wrap;flex:1}
nav.main a{color:#fff;text-decoration:none;padding:.3rem .6rem;border-radius:999px;font-size:.9rem;background:#ffffff14}
nav.main a:hover,nav.main a[aria-current]{background:#ffffff38;color:#fff}
.tools{display:flex;gap:.3rem}.tools button{background:#fff;color:var(--plum);border:0;border-radius:999px;padding:.3rem .6rem;font:inherit;font-size:.85rem;cursor:pointer;font-weight:700}
main{max-width:1180px;margin:auto;padding:1rem .9rem 3rem}
.crumbs{font-size:.85rem;color:var(--muted);margin:.2rem 0 .8rem}.crumbs a{color:var(--muted)}
.hero{position:relative;border-radius:28px;padding:1.8rem 1.4rem;background:linear-gradient(140deg,#fff 0,#fff3e0 60%,#f3e8ff);box-shadow:0 18px 40px -18px #5b2a8666,inset 0 -6px 0 #f0d9bd;overflow:hidden}
.hero .book3d{position:absolute;left:4%;top:18%;width:120px;height:150px;transform:perspective(600px) rotateY(28deg) rotateX(6deg);background:linear-gradient(90deg,#3f1d63,#7a3fb0);border-radius:6px 14px 14px 6px;box-shadow:-14px 16px 26px #3f1d6355,inset 8px 0 0 #2a1245;animation:float 6s ease-in-out infinite}
.hero .book3d::after{content:"📖";position:absolute;inset:0;display:grid;place-items:center;font-size:3rem}
@keyframes float{50%{transform:perspective(600px) rotateY(18deg) rotateX(2deg) translateY(-8px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hero p.lead{font-size:1.1rem;max-width:62ch}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{background:var(--card);border-radius:20px;padding:1rem 1.1rem;box-shadow:0 10px 24px -14px #3f1d6355,0 2px 0 var(--line);border:1px solid var(--line);transition:transform .2s,box-shadow .2s;position:relative}
a.card{display:block;text-decoration:none;color:inherit}
a.card:hover{transform:translateY(-4px) rotateX(3deg);box-shadow:0 22px 34px -16px #3f1d6377}
.card .em{font-size:2rem;display:inline-block;filter:drop-shadow(0 4px 3px #0002)}
.card h3{margin:.2rem 0}.card p{margin:.2rem 0;color:var(--muted);font-size:.93rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.tile{display:block;text-decoration:none;color:#fff;border-radius:18px;padding:.9rem .7rem;min-height:96px;box-shadow:0 10px 0 -2px #0002,0 14px 20px -10px #0005;transform:perspective(500px) rotateX(4deg);transition:transform .15s}
.tile:hover{transform:perspective(500px) rotateX(0) translateY(-3px);color:#fff}
.tile b{display:block;font-size:1.05rem}.tile small{opacity:.95;font-size:.82rem}
.tile.y{background:linear-gradient(135deg,#2f7d32,#59a35c)}.tile.m{background:linear-gradient(135deg,#5b2a86,#8a4fc0)}.tile.t{background:linear-gradient(135deg,#0f6e74,#2a9aa1)}
.tile.focus{outline:4px solid #ffb347}
.pill{display:inline-block;background:#f3e8ff;color:var(--plum);border-radius:999px;padding:.1rem .6rem;font-size:.8rem;font-weight:700;margin:.1rem}
.pill.pd{background:#e3f6e5;color:#1d5e20}.pill.cr{background:#fff0dc;color:#8a4300}
.box{border-radius:18px;padding:1rem 1.1rem;margin:1rem 0;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -16px #0006}
.box.big{background:linear-gradient(135deg,#5b2a86,#0f6e74);color:#fff}.box.big h2,.box.big h3{color:#fff}
.box.read{background:#fffdf8;font-family:Frank,serif;font-size:1.1rem;border-right:6px solid var(--amber)}
.box.poem{white-space:pre-line;font-family:Frank,serif;font-size:1.2rem;text-align:center;border-right:6px solid var(--plum)}
.box.note{background:#eef8f8;border-right:6px solid var(--teal)}
.box.warm{background:#fff4e8;border-right:6px solid var(--amber)}
.box.soft{background:#f5f0fb;border-right:6px solid #9b7bc4}
ol.ladder{list-style:none;padding:0;counter-reset:q}ol.ladder li{counter-increment:q;padding:.5rem .6rem .5rem 0;border-bottom:1px dashed var(--line)}
ol.ladder li::before{content:counter(q) ". ";font-weight:800;color:var(--plum)}
.lvl{font-weight:800;padding:.15rem .6rem;border-radius:8px;color:#fff;font-size:.85rem}
.lv1{background:#2f7d32}.lv2{background:#1f5fae}.lv3{background:#b4325a}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.5rem .8rem;margin:.5rem 0}
summary{cursor:pointer;font-weight:700;color:var(--plum)}
.tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0}
.tabs button{border:2px solid var(--plum);background:#fff;color:var(--plum);border-radius:999px;padding:.35rem .8rem;font:inherit;font-weight:700;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--plum);color:#fff}
.panel[hidden]{display:none}
.btn{display:inline-block;background:var(--plum);color:#fff;border:0;border-radius:999px;padding:.5rem 1rem;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 #3f1d63}
.btn:hover{color:#fff;filter:brightness(1.1)}.btn.alt{background:var(--teal);box-shadow:0 4px 0 #0a4c50}.btn.sm{padding:.25rem .7rem;font-size:.85rem}
.btn.say{background:#fff;color:var(--plum);border:2px solid var(--plum);box-shadow:none;padding:.2rem .6rem;font-size:.85rem}
.opts{display:grid;gap:.5rem;margin:.5rem 0}.opts button{text-align:right;background:#fff;border:2px solid var(--line);border-radius:14px;padding:.7rem .9rem;font:inherit;cursor:pointer;min-height:48px}
.opts button:hover{border-color:var(--plum)}.opts button.ok{background:#e3f6e5;border-color:#2f7d32}.opts button.no{background:#fde7ec;border-color:#b4325a}
.big .opts button,.huge button{font-size:1.15rem;min-height:60px}
.fb{min-height:1.6em;font-weight:700}.hint{background:#fff7d6;border-radius:10px;padding:.4rem .7rem;margin:.3rem 0}
.gl{border-bottom:2px dotted var(--teal);cursor:help;background:none;border-top:0;border-left:0;border-right:0;font:inherit;color:inherit;padding:0}
.glpop{position:fixed;z-index:50;bottom:1rem;right:1rem;left:1rem;max-width:420px;margin:auto;background:#fff;border:3px solid var(--teal);border-radius:18px;padding:1rem;box-shadow:0 20px 40px #0004;font-size:1.05rem}
.glpop .e{font-size:2.4rem}
.bank{display:flex;flex-wrap:wrap;gap:.4rem}.bank span{padding:.2rem .6rem;border-radius:999px;color:#fff;font-weight:700;font-size:.9rem}
.c-הוספה{background:#7a3fb0}.c-ניגוד{background:#b4325a}.c-סיבה{background:#2f7d32}.c-תוצאה{background:#1f5fae}.c-דוגמה{background:#c8650a}.c-סיכום{background:#0f6e74}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden}th,td{border:1px solid var(--line);padding:.45rem .6rem;text-align:right;vertical-align:top}th{background:#f3e8ff;color:var(--plum)}
.tablewrap{overflow-x:auto}
.pager{display:flex;justify-content:space-between;gap:.6rem;margin:2rem 0 0;flex-wrap:wrap}.pager a{flex:1;min-width:140px}
footer{background:#2a1245;color:#f3e8ff;padding:1.4rem .9rem;text-align:center;font-size:.9rem}footer a{color:#ffd59a}
footer img{width:64px;height:64px;border-radius:50%;background:#fff;vertical-align:middle;margin-left:.5rem}
.embed header.top,.embed footer,.embed .crumbs,.embed .pager,.embed .noembed{display:none!important}
code.ifr{display:block;direction:ltr;text-align:left;background:#1e1b2e;color:#d6ffe0;padding:.6rem;border-radius:10px;font-size:.78rem;word-break:break-all}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.flip{perspective:800px;background:none;border:0;padding:0;cursor:pointer;min-height:150px;font:inherit}
.flip .in{position:relative;width:100%;height:100%;min-height:150px;transition:transform .5s;transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:grid;place-items:center;padding:.6rem;text-align:center;box-shadow:0 8px 16px -8px #0006}
.flip .f{background:linear-gradient(135deg,#5b2a86,#0f6e74);color:#fff;font-weight:800;font-size:1.1rem}
.flip .b{background:#fff;border:2px solid var(--plum);transform:rotateY(180deg);font-size:.92rem}
.sortcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem}
.sortcols .col{background:#fff;border:2px dashed var(--line);border-radius:14px;padding:.5rem;min-height:90px}
.chip{display:inline-block;background:#f3e8ff;border:2px solid var(--plum);border-radius:12px;padding:.35rem .6rem;margin:.2rem;cursor:pointer;font:inherit}
.chip.sel{background:var(--plum);color:#fff}
.kbd{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center}.kbd button{width:42px;height:42px;font:inherit;font-size:1.1rem;border-radius:10px;border:2px solid var(--plum);background:#fff;cursor:pointer}.kbd button:disabled{opacity:.35}
.word{font-size:2rem;letter-spacing:.4rem;text-align:center;font-family:Frank,serif;direction:rtl}
.score{font-weight:800;color:var(--teal)}
.lines{border-bottom:1px solid #bbb;height:2rem}
@media (max-width:640px){header.top{position:static}.topin{flex-wrap:wrap}nav.main{flex-wrap:nowrap;overflow-x:auto;order:3;flex-basis:100%;padding-bottom:4px;scrollbar-width:thin}nav.main a{white-space:nowrap}.tiles{grid-template-columns:repeat(3,1fr);gap:.4rem}.tile{padding:.55rem .4rem;min-height:80px}.tile b{font-size:.88rem}.tile small{display:none}h1{font-size:1.55rem}.hero .book3d{display:none}.cards3{grid-template-columns:repeat(2,1fr)}nav.main a{font-size:.8rem;padding:.25rem .45rem}}
@media print{header.top,footer,.tools,.pager,.noprint{display:none!important}body{background:#fff}.card,.box{box-shadow:none}}

/* ===== פעילויות אינטראקטיביות ===== */
.card.act,.card3d.act,.dev.act{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:#7c3aed22;touch-action:manipulation}
.card.act:active,.card3d.act:active,.dev.act:active{transform:scale(.98)}
.card:not(a):not(.act):hover{transform:none}
.actrow{margin:.6rem 0 0}
.actopen-btn,.btn.actb{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;font-weight:700;cursor:pointer;touch-action:manipulation}
.act-done::after{content:"✓ שמרתי";position:absolute;top:.5rem;left:.6rem;background:#16a34a;color:#fff;border-radius:99px;padding:.1rem .55rem;font-size:.8rem;font-weight:700}
.box.act-done,.dev.act-done,.q.act-done{position:relative}
body.actopen{overflow:hidden}
.actm{position:fixed;inset:0;z-index:9999;background:#1e10347a;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:1rem .6rem;-webkit-overflow-scrolling:touch}
.actbox{background:#fff;color:#1f1633;border-radius:22px;max-width:760px;width:100%;padding:1rem 1.1rem 1.3rem;box-shadow:0 30px 60px -20px #000a;outline:none;font-size:calc(1rem*var(--fs,1))}
.acthead{display:flex;align-items:center;gap:.5rem;border-bottom:3px dashed #e9d5ff;padding-bottom:.5rem}
.acthead h2{margin:0;flex:1;font-size:1.35rem}
.acti{font-size:2.2rem}
.actx{min-width:44px;min-height:44px;border-radius:50%;border:0;background:#f3e8ff;font-size:1.2rem;cursor:pointer}
.acttr{margin:.5rem 0;font-size:.9rem}.acttr select{font:inherit;padding:.3rem;border-radius:10px}
.actins{background:#fff7ed;border:2px solid #fed7aa;border-radius:16px;padding:.6rem .9rem;margin:.6rem 0}
.actins p{margin:.3rem 0}
.hn-note{color:#9a3412;font-weight:700}
.actgl{margin:.5rem 0}.actgl .gl{margin:.15rem}
.actf{padding:0;margin:.4rem 0;list-style:none;counter-reset:af}
.actf>li{counter-increment:af;background:#f8f5ff;border:2px solid #e9d5ff;border-radius:16px;padding:.6rem .8rem;margin:.55rem 0}
.actf>li>label b::before,.actf>li>b::before{content:counter(af);display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#7c3aed;color:#fff;margin-left:.4rem;font-size:.85em}
.actf textarea{width:100%;box-sizing:border-box;margin-top:.4rem;border:2px solid #c4b5fd;border-radius:12px;padding:.55rem;font:inherit;font-size:1rem;resize:vertical;background:#fff;-webkit-user-select:text;user-select:text}
.actf textarea:focus{outline:3px solid #f59e0b;border-color:#7c3aed}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.chips button,.starter{font:inherit;border:2px solid #a78bfa;background:#fff;border-radius:14px;padding:.45rem .8rem;min-height:44px;cursor:pointer;touch-action:manipulation}
.chips button.on{background:#7c3aed;color:#fff}
.starter{display:block;margin:.35rem 0;background:#ecfeff;border-color:#67e8f9;text-align:right}
.hanam .chips button{font-size:1.2rem;min-height:56px;padding:.6rem 1rem}
.hanam .actf textarea{font-size:1.2rem}
.hanam .acthead h2{font-size:1.6rem}
.chk label{display:flex;gap:.5rem;align-items:center;min-height:40px;font-size:1rem}
.chk input{width:24px;height:24px}
.stars{display:flex;gap:.2rem;margin-top:.3rem}
.stars button{font-size:2rem;background:none;border:0;color:#f59e0b;min-width:44px;min-height:44px;cursor:pointer}
.reccard{margin:.6rem 0}.reccard .rc{background:linear-gradient(135deg,#fef3c7,#fce7f3);border-radius:18px;padding:.8rem 1rem;border:3px dashed #f59e0b;transform:rotate(-1deg)}
.rc h3{margin:.1rem 0}.rs{color:#f59e0b;font-size:1.5rem;margin:.1rem 0}
.actbar{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem;position:sticky;bottom:-1.3rem;background:#fff;padding:.5rem 0}
.actbar .btn{min-height:46px;cursor:pointer;touch-action:manipulation}
.actst{color:#15803d;font-weight:700;min-height:1.2em;margin:.3rem 0}
.printtip{background:#eff6ff;border:2px solid #93c5fd;border-radius:14px;padding:.6rem .8rem}
.printonly{display:none}
@media print{
 body.actopen>*:not(#actm){display:none!important}
 body.actopen .actm{position:static;background:none;padding:0;display:block;overflow:visible}
 body.actopen .actbox{box-shadow:none;max-width:none;border-radius:0}
 .actm .noprint,.actm .actx,.actm .chips,.actm .starter,.actm .actbar{display:none!important}
 .actm textarea{display:none}
 .actm .printonly{display:block}
 .actm .pv{min-height:4.5em;border-bottom:1px solid #999;white-space:pre-wrap;background:repeating-linear-gradient(#fff 0 1.45em,#ccc 1.45em 1.5em)}
 .actf>li{break-inside:avoid}
}
.glpop{z-index:10001}

/* practice-print blocks */
.practice-print{border:3px solid #0f6e74;background:linear-gradient(135deg,#f2fbfb,#fff7ec);border-radius:18px;padding:12px 14px;margin:16px 0;box-shadow:0 6px 0 rgba(15,110,116,.18)}
.practice-print h2{margin:0 0 6px}.pp-rows{display:flex;flex-direction:column;gap:8px}
.pp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#fff;border:2px solid #e3d6c4}
.pp-row.cur{border-color:#5b2a86;background:#f6efff}.pp-row.cur .pp-v::after{content:" ★ המסלול שלך"}
.pp-v{font-weight:700;min-width:7.5em}
.pp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:96px;padding:8px 16px;border-radius:12px;background:#b42318;color:#fff!important;font-weight:700;text-decoration:none;font-size:1.05rem}
.pp-btn.w{background:#1d4ed8}.pp-btn:hover{filter:brightness(1.1)}.pp-btn:focus-visible{outline:4px solid #f59e0b;outline-offset:2px}
.pp-more{margin:8px 0 0}.pp-list{display:grid;gap:12px}.pp-item{border:2px solid #ead9c6;border-radius:14px;padding:8px 12px;background:#fff}.pp-item h3{margin:2px 0 8px}
@media (max-width:480px){.pp-v{min-width:100%}.pp-btn{flex:1}}
@media print{.practice-print{display:none}}