*{box-sizing:border-box}
:root{--bg:#fff8ec;--ink:#3b2a1e;--mut:#7a6553;--gold:#e0a43a;--terra:#c2552f;--green:#2f7d5b;--card:#fffdf8;--r:22px}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Arial,"Noto Sans Hebrew",sans-serif;background:var(--bg) radial-gradient(circle at 90% 0,#ffe7bf 0,transparent 40%);color:var(--ink);font-size:18px;line-height:1.6}
a{color:var(--terra)}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;background:#fff8ecee;backdrop-filter:blur(6px);border-bottom:1px solid #f0dcc0}
.brand{font-weight:800;font-size:1.25rem;text-decoration:none;color:var(--ink)}
.lvlw{font-size:.9rem;color:var(--mut)}
select{font:inherit;font-size:1rem;border-radius:14px;border:2px solid #e9c995;padding:6px 10px;background:#fff;color:var(--ink)}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;text-decoration:none;color:var(--ink);background:#fff;border:2px solid #f0dcc0;border-radius:999px;padding:7px 13px;font-size:.95rem;font-weight:600}
.tabs a.on{background:var(--terra);color:#fff;border-color:var(--terra)}
main{max-width:1000px;margin:0 auto;padding:10px 14px 30px;outline:none}
h1{font-size:1.9rem;line-height:1.25;margin:.3em 0}h2{font-size:1.45rem;margin:.6em 0 .3em}h3{margin:.5em 0 .2em}
.hero{position:relative;border-radius:var(--r);overflow:hidden;background:#3b2a1e;color:#fff;box-shadow:0 10px 30px #6a3b1a33}
.hero img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.hero .in{position:relative;padding:16px 18px 18px;background:linear-gradient(180deg,#5a2f16,#2a1609)}
@media(min-width:760px){.hero{min-height:420px;display:flex;align-items:flex-end}.hero img{position:absolute;inset:0;height:100%;aspect-ratio:auto}.hero .in{background:linear-gradient(transparent,#2a1609e6 40%);width:100%;padding:28px}}
.hero p{margin:.2em 0 .6em;font-size:1.05rem}
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;min-height:48px;padding:10px 18px;border-radius:999px;border:0;background:var(--terra);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 #8f3a1d}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #8f3a1d}
.btn.g{background:var(--green);box-shadow:0 4px 0 #1e5a40}.btn.o{background:#fff;color:var(--ink);border:2px solid #e9c995;box-shadow:0 4px 0 #e9c995}.btn.y{background:var(--gold);color:#3b2a1e;box-shadow:0 4px 0 #a8761f}
.btn:focus-visible,.tabs a:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid #2b6fd6;outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{background:var(--card);border:2px solid #f3e1c6;border-radius:var(--r);padding:16px;box-shadow:0 4px 14px #a0682a14}
.tile{display:block;text-decoration:none;color:var(--ink);text-align:center;padding:18px 12px}
.tile .e{font-size:2.4rem;display:block}.tile b{display:block;font-size:1.1rem}.tile small{color:var(--mut)}
.note{background:#fff1d6;border-right:5px solid var(--gold);border-radius:14px;padding:10px 14px;margin:10px 0;font-size:.95rem}
.muted{color:var(--mut)}
/* book */
.book{perspective:1800px;max-width:880px;margin:8px auto}
.page{background:#fffdf7;border-radius:18px;box-shadow:0 14px 34px #5a2f1033, inset -10px 0 18px -12px #c9a77a;overflow:hidden;transform-origin:right center;display:grid;grid-template-columns:1fr;min-height:420px}
@media(min-width:820px){.page{grid-template-columns:1.1fr 1fr}.page .pic{order:2}}
.page .pic{position:relative;background:linear-gradient(135deg,#ffcf7a,#e07b4a 60%,#7a3c8a);min-height:230px}
.page .pic img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.page .txt{padding:18px 20px}
.page .txt h2{margin-top:0;color:var(--terra)}
.page .main{font-size:1.12rem}
.page .easy{font-size:1.45rem;line-height:1.9;font-weight:600;color:#2a1d12}
.page .deep{background:#eef7f1;border-right:5px solid var(--green);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:1rem}
.page .q{margin-top:10px;font-weight:700;color:var(--green)}
.flip-out{animation:fo .38s ease-in forwards}.flip-in{animation:fi .42s ease-out}
@keyframes fo{to{transform:rotateY(85deg);opacity:.4}}@keyframes fi{from{transform:rotateY(-85deg);opacity:.4}to{transform:none;opacity:1}}
.flip-out.back{animation-name:fob}.flip-in.back{animation-name:fib}
@keyframes fob{to{transform:rotateY(-85deg);opacity:.4}}@keyframes fib{from{transform:rotateY(85deg);opacity:.4}to{transform:none;opacity:1}}
.bookbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px auto;max-width:880px;flex-wrap:wrap}
.dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.dots button{width:14px;height:14px;border-radius:50%;border:0;background:#e7cfa8;padding:0;cursor:pointer}.dots button.on{background:var(--terra);transform:scale(1.25)}
.cssart{display:flex;align-items:center;justify-content:center;font-size:4.5rem;gap:10px;min-height:230px;height:100%;background:radial-gradient(circle at 30% 30%,#ffe9a8,transparent 50%),linear-gradient(135deg,#f6b55a,#d4572e 55%,#6c3f8f);animation:glow 4s ease-in-out infinite alternate}
@keyframes glow{to{filter:hue-rotate(-12deg) brightness(1.08)}}
.cssart span{animation:bob 2.4s ease-in-out infinite}.cssart span:nth-child(2){animation-delay:.4s}.cssart span:nth-child(3){animation-delay:.8s}
@keyframes bob{50%{transform:translateY(-12px)}}
/* flip cards */
.fc{perspective:900px;height:210px;cursor:pointer;background:none;border:0;padding:0;font:inherit;text-align:center}
.fc .in{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.fc.on .in{transform:rotateY(180deg)}
.fc .f,.fc .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px}
.fc .f{background:linear-gradient(135deg,#ffd27f,#f09a55);color:#3b2a1e}.fc .f .w{font-size:1.7rem;font-weight:800}.fc .f .e{font-size:2.6rem}
.fc .b{background:#fffdf7;border:3px solid #f0b56a;transform:rotateY(180deg);font-size:1rem}
.fc .b b{font-size:1.25rem;color:var(--terra)}
/* quiz */
.opt{display:block;width:100%;text-align:right;margin:8px 0;padding:14px 16px;border-radius:18px;border:2px solid #f0dcc0;background:#fff;font:inherit;font-size:1.08rem;cursor:pointer;min-height:52px;color:var(--ink)}
.opt.ok{background:#dff3e6;border-color:#2f7d5b}.opt.no{background:#fde2dc;border-color:#c2552f}
.bar{height:12px;background:#f3e1c6;border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--terra));transition:width .4s}
textarea,input[type=text]{width:100%;font:inherit;font-size:1.05rem;border:2px solid #ecd2a8;border-radius:16px;padding:10px 12px;background:#fff;color:var(--ink)}
textarea{min-height:90px;resize:vertical}
.seq button{display:flex;gap:10px;align-items:center;width:100%;text-align:right;margin:6px 0;padding:12px 14px;border-radius:16px;border:2px solid #f0dcc0;background:#fff;font:inherit;cursor:pointer;color:var(--ink)}
.seq .n{min-width:30px;height:30px;border-radius:50%;background:var(--gold);display:inline-flex;align-items:center;justify-content:center;font-weight:800}
.seq button.done{opacity:.55}
/* slides */
.show{position:relative;background:#1f140c;border-radius:var(--r);overflow:hidden;color:#fff;margin:auto}
.show img,.show .cssart{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;min-height:0}
.show .cap{padding:12px 16px}
@media(min-width:760px){.show{aspect-ratio:16/10;max-height:80vh}.show img,.show .cssart{position:absolute;inset:0;height:100%;aspect-ratio:auto}.show .cap{position:absolute;bottom:0;left:0;right:0;padding:18px 24px;background:linear-gradient(transparent,#000c)}}
.show .cap h2{margin:0;font-size:clamp(1.3rem,4vw,2.4rem)}
.show:fullscreen{max-height:none;border-radius:0;aspect-ratio:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;border-radius:14px;overflow:hidden}
td,th{border:1px solid #f0dcc0;padding:8px;vertical-align:top;text-align:right}th{background:#fff1d6}
.tw{overflow-x:auto}
details{background:#fff;border:2px solid #f3e1c6;border-radius:16px;padding:10px 14px;margin:8px 0}summary{font-weight:700;cursor:pointer}
.foot{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px;border-top:1px solid #f0dcc0;background:#fff3df;font-size:.95rem;text-align:right}
.foot img{border-radius:50%}
.speak{background:#fff;border:2px solid #9ccbb1;color:#1e5a40;box-shadow:0 4px 0 #9ccbb1}
@media(max-width:420px){body{font-size:17px}h1{font-size:1.55rem}.hero{min-height:260px}.brand{font-size:1.08rem}.page .easy{font-size:1.3rem}}
@media print{@page{size:A4;margin:15mm}body{background:#fff;font-size:12pt}.top,.tabs,.foot,.noprint,.btn{display:none!important}main{max-width:none;padding:0}.card,.page{box-shadow:none;break-inside:avoid}*{text-align:right}.printonly{display:block!important}}
.printonly{display:none}