/* מעבדת מנדל — גן המנזר · cool garden pastels, kraft paper for diagrams */
@font-face{font-family:Rubik;src:url(fonts/rubik-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Gveret Levin";src:url(fonts/gveret-levin-hebrew.woff2) format("woff2");font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
:root{--ink:#26343f;--ink2:#4a5a66;--sage:#e3eee6;--mint:#d5ece4;--lav:#e7e2f6;--lav2:#c9bfec;--lavd:#6c5fb0;--sky:#dcebf4;--leaf:#3f7a5c;--leaf2:#5f9a6e;--good:#2e8a63;--goodbg:#e2f3ea;--paper:#fcfbf6;--kraft:#c8aa83;--kraftd:#8a6a47;--line:#d6ddd8;--hd:58px;--bk:0px;
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-padding-top:calc(var(--hd) + 10px)}
body{margin:0;font-family:Rubik,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,#eaf3ee 0%,#e6eef3 100%) fixed;line-height:1.55;font-size:17px;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%}
.skip{position:absolute;inset-inline-start:-999px;top:4px;background:#fff;padding:6px 10px;z-index:99}.skip:focus{inset-inline-start:8px}
:focus-visible{outline:3px solid #7f8fd8;outline-offset:2px;border-radius:8px}
.hand{font-family:"Gveret Levin",Rubik,cursive;font-size:1.12em;line-height:1.45}
/* header */
#top{position:sticky;top:0;z-index:30;height:var(--hd);display:flex;align-items:center;gap:12px;padding:0 14px;background:rgba(246,250,247,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.ib{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:20px;display:grid;place-items:center;flex:none}
.brand{display:flex;flex-direction:column;line-height:1.15;flex:none}.brand b{font-size:19px;color:var(--leaf)}.brand .sub{font-size:12.5px;color:var(--ink2)}
#path{flex:1;min-width:0;overflow:hidden}
#path ol{display:flex;gap:6px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
#path li{display:flex;align-items:center;gap:5px;padding:3px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:13px;white-space:nowrap;color:var(--ink2)}
#path li b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sage);font-size:12px}
#path li.done b{background:var(--leaf2);color:#fff}#path li.cur{border-color:var(--leaf2);color:var(--ink);font-weight:500;padding-inline-end:10px}#path li.cur b{background:var(--leaf);color:#fff}
.tools{display:flex;align-items:center;gap:10px;flex:none;margin-inline-start:auto}
.stars{display:flex;gap:3px}.stars i{font-style:normal;font-size:19px;color:#c9cfd6;display:flex;flex-direction:column;align-items:center;line-height:1}.stars i em{font-style:normal;font-size:9.5px;color:var(--ink2);margin-top:1px}
.stars i.on{color:#7d6bd0;text-shadow:0 0 6px #d9d0ff}
.fb-ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);text-decoration:none;font-size:15px;opacity:.6;flex:none}.fb-ico:hover,.fb-ico:focus{opacity:1}
/* stage + book */
#stage{display:block;max-width:1040px;margin:0 auto;padding:16px 16px 40px;outline:none}
@media (min-width:1100px){
  #stage{margin-inline-start:auto;margin-inline-end:auto;padding-left:max(330px,calc(12px + 318px));max-width:calc(1040px + 330px)}
  #book{position:fixed;left:max(12px,env(safe-area-inset-left));top:calc(var(--hd) + 12px);bottom:12px;width:300px;z-index:20}
  #bookMin{display:none}#bookHead{cursor:default}
  body[data-scene="title"] #book{display:none}body[data-scene="title"] #stage{padding-left:16px;max-width:1100px}
}
#book{display:flex;flex-direction:column;background:var(--paper);border:1px solid #d9d3c2;border-radius:16px;box-shadow:0 6px 24px rgba(40,60,60,.12);overflow:hidden;background-image:repeating-linear-gradient(180deg,transparent 0 27px,#e7eef3 27px 28px)}
#bookHead{display:flex;align-items:center;gap:8px;padding:10px 12px;border:0;background:linear-gradient(90deg,#5f8f74,#4f7d68);color:#fff;text-align:start;width:100%}
#bookHead b{font-size:16px}.cnt{font-size:12.5px;opacity:.92;margin-inline-start:auto;white-space:nowrap}
.bk-ico{width:22px;height:26px;border-radius:3px 6px 6px 3px;background:#c8aa83;box-shadow:inset 4px 0 0 #8a6a47;flex:none}
#bookBody{flex:1;overflow-y:auto;padding:10px 12px 14px;scroll-behavior:smooth}
.bk-empty{color:var(--ink2);font-size:14px}
.bk-e{margin:0 0 10px;padding:6px 10px 8px;border-radius:10px;background:rgba(255,255,255,.75);border-inline-start:4px solid var(--line)}
.bk-e b{display:block;font-size:13.5px;margin-top:1px}.bk-e p{margin:2px 0 0;color:#2b3a4c}
.bk-k{font-size:11.5px;color:var(--ink2)}
.k-clue{border-color:#8cc4a5}.k-q{border-color:#b6a8ea}.k-me{border-color:#9fc3dc}.k-data{border-color:#c8aa83}
.bk-e.new{animation:ink 1.2s ease}
@keyframes ink{from{background:#eef7e9;transform:translateX(-6px)}to{background:rgba(255,255,255,.75);transform:none}}
#book.pulse #bookHead{animation:bpulse .9s ease}
@keyframes bpulse{40%{background:linear-gradient(90deg,#77a98a,#5f9a6e)}}
@media (max-width:1099px){
  #book{position:fixed;left:0;right:0;bottom:0;z-index:25;border-radius:16px 16px 0 0;max-height:62vh;padding-bottom:env(safe-area-inset-bottom)}
  #bookHead{padding:8px 12px;padding-inline-end:52px}
  #bookMin{position:absolute;top:5px;inset-inline-end:8px;width:34px;height:30px;border-radius:9px;border:0;background:rgba(255,255,255,.22);color:#fff;font-size:20px;line-height:1}
  #book[data-mode="peek"] #bookBody{max-height:76px;overflow:hidden}
  #book[data-mode="peek"] .bk-e{display:none}#book[data-mode="peek"] .bk-e:last-child{display:block;margin:0}
  #book[data-mode="peek"] .bk-empty{margin:0}
  #book[data-mode="full"] #bookBody{height:52vh}
  #book[data-mode="min"] #bookBody{display:none}
  .chev{width:10px;height:10px;border:solid #fff;border-width:2px 2px 0 0;transform:rotate(-45deg);margin-inline-start:6px;transition:.2s}
  #book[data-mode="full"] .chev{transform:rotate(135deg)}
  body{--bk:128px}body:has(#book[data-mode="min"]){--bk:52px}body:has(#book[data-mode="full"]){--bk:128px}
  #stage{padding-bottom:calc(var(--bk) + 30px)}
  body[data-scene="title"] #book{display:none}body[data-scene="title"] #stage{padding-bottom:30px}
}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:14px;border:0;background:var(--leaf);color:#fff;font-weight:500;font-size:17px;box-shadow:0 3px 0 #2c5a43;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #2c5a43}
.btn.ghost{background:#fff;color:var(--leaf);border:1.5px solid #a9c9b5;box-shadow:0 2px 0 #cfe0d6}
.btn.sm{min-height:40px;padding:6px 14px;font-size:15px}.btn.big{min-height:56px;font-size:19px;padding:12px 28px}
.btn:disabled{opacity:.55;cursor:default}
.linkbtn{border:0;background:none;color:var(--leaf);text-decoration:underline;padding:0;font-size:inherit}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.row.next{justify-content:flex-start}
.row.two .btn{flex:1 1 200px}
/* title */
.title{display:grid;gap:16px}
.t-hero{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(30,50,50,.18)}
.t-hero .bg{display:block;width:100%;height:clamp(260px,44vw,520px);object-fit:cover}
.t-stk{position:absolute;inset:auto 10px 6px auto;display:flex;align-items:flex-end;gap:4px}
.t-stk .stk{height:clamp(70px,12vw,130px)}
.t-card,.pro-card{padding:20px 22px;border-radius:20px}
.t-card h1{margin:4px 0 8px;font-size:clamp(30px,5vw,46px);line-height:1.1;color:#2f3d2f}.t-card h1 small{display:block;font-size:.5em;font-weight:500;color:#4d3d2a;margin-top:6px}
.kick{display:inline-block;font-size:13px;font-weight:500;letter-spacing:.02em;color:#3d4b40;background:rgba(255,255,255,.7);padding:2px 10px;border-radius:99px}
.credit{margin:14px 0 0;font-size:14px}.credit a{color:#2f4d40}
@media (min-width:900px){.title{grid-template-columns:1.25fr 1fr;align-items:center}.t-card{margin-inline-start:-90px;position:relative;z-index:2}}
/* kraft paper */
.kraft{background-color:var(--kraft);background-image:var(--noise),linear-gradient(160deg,rgba(255,255,255,.18),rgba(0,0,0,.05));color:#2a2016;box-shadow:0 4px 14px rgba(70,50,30,.18),inset 0 0 0 1px rgba(90,60,30,.18)}
.kraft .hand{color:#2d2318}
/* prologue */
.pro{display:grid;gap:14px}
.pro-art{margin:0;border-radius:20px;overflow:hidden;box-shadow:0 8px 24px rgba(30,50,50,.16)}.pro-art .bg{display:block;width:100%;height:clamp(220px,40vw,460px);object-fit:cover}
.pro-card h1{margin:6px 0;font-size:28px}.pro-card p{font-size:18px}
/* map */
.map-head h1{margin:2px 0;font-size:28px;color:var(--leaf)}.map-head p{margin:0 0 10px;color:var(--ink2)}
.map-frame{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(30,50,50,.18);aspect-ratio:16/9;width:min(100%,calc((100vh - 230px) * 1.778));min-width:min(100%,560px);margin:0 auto}
.map-frame .bg{display:block;width:100%;height:100%;object-fit:cover}
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border-radius:99px;border:3px solid #fff;background:#f6fbf7;box-shadow:0 4px 14px rgba(20,40,30,.45);font-size:15px;font-weight:500;z-index:3;animation:pinIn .4s both}
.pin .pn{white-space:nowrap}.pin .pi{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--mint);font-size:18px}
.pin.done .pi{background:var(--leaf2);color:#fff;font-size:16px}
.pin.fresh{animation:pinIn .5s .1s both,glow 1.6s .7s 3}
@keyframes pinIn{from{transform:translate(-50%,-30%) scale(.3);opacity:0}}
@keyframes glow{50%{box-shadow:0 0 0 10px rgba(201,191,236,.6),0 4px 12px rgba(20,40,30,.35)}}
.map-frame .guide{left:1%;bottom:0;height:46%}
.zlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:14px}
.zcard{display:flex;align-items:center;gap:10px;text-align:start;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line);background:#fff;min-height:64px}
.zcard .zi{font-size:24px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--sage);flex:none}
.zcard small{display:block;color:var(--ink2);font-size:13.5px}.zcard.done{background:#f3f8f4}.zcard.fresh{border-color:var(--lav2);box-shadow:0 0 0 4px var(--lav)}
@media (max-width:640px){.pin .pn{display:none}.pin{padding:3px;border-width:2px}.pin .pi{width:30px;height:30px;font-size:16px}}
/* zone shell */
.zone{display:grid;gap:12px}
.hero{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(30,50,50,.17);isolation:isolate}
.hero .bg{display:block;width:100%;height:clamp(210px,30vw,340px);object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,32,30,.62) 0%,rgba(20,32,30,.2) 38%,transparent 60%);pointer-events:none;z-index:1}
.hero-t{position:absolute;right:16px;bottom:12px;left:34%;color:#fff;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hero-t h1{margin:2px 0 0;font-size:clamp(22px,3.2vw,32px);line-height:1.15}.hero-t p{margin:2px 0 0;font-size:15px;opacity:.95}
.hero-t .kick{background:rgba(255,255,255,.85);text-shadow:none}
.tomap{position:absolute;top:10px;right:10px;z-index:4;border:0;border-radius:99px;background:rgba(255,255,255,.88);padding:5px 12px;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.hero-stk{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-stk .stk{position:absolute;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.heap{position:absolute;display:flex;align-items:flex-end}
.heap.h1{left:30%;bottom:-6px}.heap.h1 .stk{position:relative;height:clamp(60px,9vw,110px);margin-inline-start:-22px}
.heap.h2{right:26%;top:12px}.heap.h2 .stk{position:relative;height:clamp(46px,6.5vw,80px)}
.hb{left:24%;bottom:6px;height:clamp(60px,9vw,105px)}
.hb1{left:24%;bottom:4px;height:clamp(50px,7vw,90px)}.hb2{left:36%;bottom:10px;height:clamp(44px,6vw,80px)}
.hf1{left:30%;top:14px;height:clamp(48px,7vw,86px)}.hf2{left:40%;top:24px;height:clamp(34px,4.6vw,60px)}
.hp1{left:28%;top:20px;height:clamp(32px,4vw,52px)}
/* the guide: Mendel as a sticker who reacts */
.guide{position:absolute;left:1.5%;bottom:-4px;height:min(78%,250px);z-index:3;pointer-events:none;transform-origin:50% 100%}
.guide .stk{height:100%;width:auto;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.28));animation:breathe 4.5s ease-in-out infinite;transform-origin:50% 100%}
.g-mendel-puzzled{height:min(62%,190px)}
.guide .bubble{position:absolute;left:78%;top:4%;min-width:110px;max-width:220px;padding:7px 12px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--ink);font-size:14.5px;font-weight:500;line-height:1.3;box-shadow:0 4px 12px rgba(0,0,0,.2);opacity:0;transform:scale(.6) translateY(8px);transform-origin:0 100%;transition:.25s;white-space:normal}
.guide .bubble:empty{display:none}
.guide.speaks .bubble{opacity:1;transform:none}
.guide.nod .stk{animation:nod .8s ease,breathe 4.5s 0.8s ease-in-out infinite}
.guide.shake .stk{animation:shake .6s ease,breathe 4.5s .6s ease-in-out infinite}
.guide.talk .stk{animation:hop .7s ease,breathe 4.5s .7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:none}50%{transform:scaleY(1.015) rotate(-.6deg)}}
@keyframes nod{30%{transform:rotate(-4deg) translateY(4px)}60%{transform:rotate(2deg)}}
@keyframes shake{20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
@keyframes hop{35%{transform:translateY(-12px)}70%{transform:translateY(0) scaleY(.97)}}
.sw1{animation:sway 5s ease-in-out infinite}.sw2{animation:sway 6.2s -1s ease-in-out infinite}.sw3{animation:sway 5.6s -2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2.5deg)}}
/* the bee (Fix 2): one cute round bee everywhere, flying curly loop-de-loop routes along SVG paths (offset-path), wings flapping, a little bob */
.bee{position:absolute;left:0;top:0;width:44px;height:40px;z-index:2;pointer-events:none;offset-path:path("M-60 140C40 60 120 60 180 120S300 180 360 130C440 140 470 60 420 50C370 40 360 110 430 120S600 60 660 110S760 170 820 120C900 130 930 50 880 40C830 30 820 100 890 110S1050 70 1200 120");offset-rotate:auto;offset-distance:0%;animation:beefly 16s linear infinite}
.bee.b1{offset-path:path("M1200 130C1100 50 1020 50 960 110S840 170 780 120C700 130 670 50 720 40C770 30 780 100 710 110S540 50 480 100S380 160 320 110C240 120 210 40 260 30C310 20 320 90 250 100S90 60 -60 110");animation-duration:21s;animation-delay:-8s}
.bee.b1 .bee-in{transform:scaleY(-1)}
.bee-in{display:block;width:100%;height:100%;overflow:visible}
.bee-in use{animation:beebob .9s ease-in-out infinite alternate}
@keyframes beefly{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes beebob{from{transform:translateY(-1.6px)}to{transform:translateY(1.6px)}}
#bee .wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap .13s linear infinite}
#bee .w2{animation-delay:-.06s}
@keyframes flap{50%{transform:scaleY(.45)}}
.beewarn .bee{animation-duration:7s}
@media (max-width:640px){.bee{width:32px;height:29px;offset-path:path("M-50 110C20 50 70 50 110 100S160 150 190 110C240 118 255 55 225 48C195 40 190 95 235 102S320 60 350 95S420 130 470 90");animation-duration:11s}.bee.b1{offset-path:path("M450 90C380 30 330 30 290 80S240 130 210 90C160 98 145 35 175 28C205 20 210 75 165 82S80 40 50 75S-20 110 -70 70");animation-duration:14s}.beewarn .bee{animation-duration:5s}}
/* steps */
.steps{display:flex;list-style:none;margin:2px 0 0;padding:6px 4px 4px;align-items:flex-start;background:rgba(255,255,255,.55);border-radius:16px;border:1px solid var(--line)}
.steps li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;font-size:13px;line-height:1.2;color:var(--ink2);text-align:center}
.steps li span{padding:0 2px}
.steps li:not(:last-child)::before,.steps li:not(:last-child)::after{content:'';position:absolute;top:13px;height:3px;border-radius:3px;right:calc(50% + 16px);left:calc(-50% + 16px)}
.steps li:not(:last-child)::before{background:var(--line)}
.steps li:not(:last-child)::after{background:var(--leaf2);transform:scaleX(0);transform-origin:100% 50%;transition:transform .42s cubic-bezier(.4,0,.2,1)}
.steps li.done::after{transform:scaleX(1)}
.steps li b{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;margin:2px 0;border-radius:50%;background:#fff;border:2px solid #b8c4bd;box-sizing:border-box;font-size:12.5px;transition:transform .3s,background .25s,border-color .25s}
.steps li.cur{color:var(--ink);font-weight:500}.steps li.cur b{width:28px;height:28px;margin:0;background:var(--leaf);border-color:var(--leaf);color:#fff;font-size:14px;box-shadow:0 0 0 3px var(--sage)}
.steps li.done b{background:var(--leaf2);border-color:var(--leaf2);color:transparent}.steps li.done b::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700}
@media (max-width:640px){.steps li{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.steps li::after,.steps li b{transition:none}}
.work{display:grid;gap:12px}
.paper{background:var(--paper);border-radius:18px;padding:16px 18px;box-shadow:0 3px 14px rgba(40,60,60,.09);border:1px solid #e6e2d6}
.paper.kraft{border:0}
.lead{margin:0 0 10px;font-size:17.5px}
.hint{font-size:14px;color:var(--ink2);margin:8px 0 0}.small{font-size:14px;color:var(--ink2)}
.kraft .small{color:#3f3122}
h2{font-size:21px;margin:0 0 6px}h2 small{font-size:13px;font-weight:500;background:var(--lav);color:var(--lavd);padding:2px 8px;border-radius:99px;vertical-align:middle}
/* quiz */
.quiz{margin-top:4px}
.qq{margin:0 0 10px;font-size:18px}.qq b{display:block}
.qtag{display:inline-block;font-size:12px;font-weight:500;padding:1px 9px;border-radius:99px;background:var(--sky);color:#35506a;margin-bottom:4px}.qtag.open{background:var(--lav);color:var(--lavd)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:flex;align-items:center;gap:10px;text-align:start;min-height:64px;padding:10px 12px;border-radius:14px;border:1.5px solid #cfdad3;background:#fff;font-size:16px;line-height:1.35;transition:transform .12s,background .2s}
.opt:hover:not(:disabled){transform:translateY(-1px);border-color:var(--leaf2)}
.opt .k{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--sage);font-weight:700;font-size:14px}
.opts.cards .opt{flex-direction:column;justify-content:center;text-align:center;min-height:150px;font-weight:500;font-size:17px}
.opic{display:grid;place-items:center;height:88px}.opic .stk{max-height:88px;width:auto}.opic .emo{font-size:62px;line-height:1}.opic .cbee{width:70px;height:64px}
.opt.right{background:var(--goodbg);border-color:var(--good);color:#164a35}.opt.right .k{background:var(--good);color:#fff}
.opt.alt{background:var(--lav);border:1.5px dashed var(--lavd);color:#3c3470}
.opt.sel{background:#e8f1f8;border-color:#7ea3c4}.opt.dim{opacity:.55}
.opt:disabled{cursor:default}
.opt.chk .k{border-radius:6px;background:#fff;border:1px solid #c5d0c9;font-weight:400}
.opts.multi .opt.sel{background:#e8f1f8;border-color:#7ea3c4}
.fb{margin-top:12px;padding:12px 14px;border-radius:14px;border-inline-start:5px solid;animation:fbIn .35s ease}
.fb>b{display:block;font-size:17px}.fb p{margin:4px 0 0}
.fb.good{background:var(--goodbg);border-color:var(--good)}.fb.hm{background:var(--lav);border-color:var(--lavd)}.fb.open{background:#eef4f9;border-color:#8eb0cc}
.fb .after{color:#33424e}
@keyframes fbIn{from{opacity:0;transform:translateY(6px)}}
@media (max-width:560px){.opts{grid-template-columns:1fr}.opts.cards{grid-template-columns:1fr 1fr}.opts.cards .opt{min-height:132px}}
/* unlock */
.unlock{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px;border-radius:16px;background:linear-gradient(120deg,#eef7f0,#ece8fa);border:1.5px solid var(--lav2);animation:fbIn .5s ease}
.unlock .lock{font-size:34px;animation:hop 1s .3s 2}.unlock small{display:block;font-size:13px;color:var(--lavd);font-weight:500}.unlock b{display:block;font-size:19px}.unlock span{color:var(--ink2);font-size:15px}
/* results placeholder */
.results{margin-top:6px;padding:14px;border-radius:14px}
.results.empty{min-height:90px;display:grid;place-items:center;border:2px dashed #b9c7bf;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 10px,rgba(236,243,239,.6) 10px 20px);color:var(--ink2);font-style:italic}
.kraft .results.empty{border-color:rgba(70,50,30,.35);color:#4a3a28;background:rgba(255,255,255,.18)}
.big{font-size:20px;margin:4px 0}.note{margin:6px 0 0}
/* fx */
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.spill{position:absolute;left:0;top:0;will-change:transform}.spill .pea{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.leaf{position:fixed;width:10px;height:14px;border-radius:0 80% 0 80%;animation:leaf 1.4s ease-out forwards}
@keyframes leaf{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.wobble{animation:wob .5s ease}
@keyframes wob{25%{transform:rotate(-4deg) scale(.97)}50%{transform:rotate(3deg)}75%{transform:rotate(-2deg)}}
#toast{position:fixed;left:50%;top:calc(var(--hd) + 10px);transform:translate(-50%,-20px);background:#2f4d40;color:#fff;padding:9px 18px;border-radius:99px;font-size:15px;opacity:0;transition:.3s;z-index:70;pointer-events:none;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
.pea{width:22px;height:22px;vertical-align:middle;display:inline-block}
/* study candidates */
.cands{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cand{position:relative;min-height:190px;border-radius:16px;border:1.5px solid #d4dcd6;background:#fff;padding:0;perspective:800px}
.cand>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;backface-visibility:hidden;transition:transform .5s;border-radius:15px}
.cfront .cpic,.cfront .stk{max-height:92px;width:auto}.cfront .emo{font-size:66px;line-height:1.1}.cfront b{font-size:19px}.cfront small{color:var(--ink2);font-size:13px}
.cbee{width:76px;height:70px}
.cback{transform:rotateY(180deg);background:#f4f8f5;align-items:stretch!important;justify-content:flex-start!important;text-align:start}
.cback ul{margin:4px 0 0;padding-inline-start:18px;font-size:14.5px;line-height:1.4}.cback li{margin-bottom:3px}
.cand.flip .cfront{transform:rotateY(180deg)}.cand.flip .cback{transform:rotateY(360deg)}
@media (max-width:560px){.cand{min-height:236px}.cback ul{font-size:13.5px}}
/* shed */
.cart{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:14px;background:var(--sky);margin-bottom:12px}
.cart-t{font-weight:500}.slots{display:flex;gap:8px}
.slot{width:54px;height:54px;border-radius:50%;border:2px dashed #9db7c9;display:grid;place-items:center}
.slot.full{border:0;animation:pop .4s ease}.slot .stk,.slot svg{max-width:52px;max-height:52px}.slot .emo{font-size:34px}.slot .pile{transform:scale(.5)}
@keyframes pop{from{transform:scale(.3)}60%{transform:scale(1.15)}}
.gear{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gitem{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-height:150px;padding:10px 6px;border-radius:16px;border:1.5px solid #dcd6c6;background:linear-gradient(180deg,#fffdf8,#f3eee2)}
.gitem b{font-size:14.5px;line-height:1.2;text-align:center}.gitem .qty{position:absolute;top:6px;left:6px;font-size:12px;font-weight:700;color:#5b4a33;background:#ecdcc0;border-radius:99px;padding:1px 7px}
.gpic{height:86px;display:grid;place-items:center}.gpic .stk{max-height:86px;width:auto}.gpic .can-svg{width:96px}
.pile{position:relative;display:inline-block;width:96px;height:86px}.pile .stk{position:absolute;bottom:0;max-height:76px}.pile .a{right:0;transform:rotate(-8deg)}.pile .b{right:22px;transform:rotate(4deg)}.pile .c{right:44px;transform:rotate(-3deg)}
.emo{font-size:58px;line-height:1}
.emo.stick{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 5px rgba(0,0,0,.25))}
.gitem.taken{opacity:.45;border-style:dashed}.gitem.taken::after{content:"✓ בעגלה";position:absolute;top:44%;font-weight:700;color:var(--leaf);background:#fff;padding:2px 10px;border-radius:99px}
.gnote{min-height:1.6em;margin:10px 0 0;font-size:15.5px}
@media (max-width:700px){.gear{grid-template-columns:repeat(2,1fr)}.slot{width:44px;height:44px}.slot .stk,.slot svg{max-width:42px;max-height:42px}.slot .emo{font-size:28px}}
.can-svg{width:80px;height:auto;overflow:visible}
/* beds */
.beds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bed{position:relative;border-radius:16px;padding:10px 12px 12px;overflow:hidden}
.bed-h{display:flex;align-items:center;gap:6px}.bed-h b{font-size:15px}
.row4{display:flex;justify-content:space-around;height:110px;align-items:flex-end}
.plant{width:22%;max-width:62px;height:auto;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
.plant:nth-child(2){animation-delay:-1.3s}.plant:nth-child(3){animation-delay:-2.1s}.plant:nth-child(4){animation-delay:-3s}
.plant.s1,.plant.s2,.plant.s3{animation:grow .6s ease both,sway 5s .6s ease-in-out infinite}
@keyframes grow{from{transform:scaleY(.4)}}
.tagslot{min-height:30px;margin:4px 0}
.tag{display:inline-block;background:#f7f1e3;border:1px solid #a68b67;padding:2px 12px;border-radius:4px 12px 12px 4px;transform:rotate(-2deg);box-shadow:0 2px 4px rgba(0,0,0,.15);animation:pop .4s}
.bed-act{display:flex;gap:8px;flex-wrap:wrap}
.canfx{position:absolute;top:6px;left:8px;width:84px;opacity:0;pointer-events:none}
.bed.pour .canfx{animation:pour 1.3s ease}
@keyframes pour{0%{opacity:0;transform:translate(-20px,-10px)}20%{opacity:1;transform:none}40%,75%{opacity:1;transform:rotate(-28deg)}100%{opacity:0;transform:none}}
.drops i{position:absolute;left:4px;top:34px;width:5px;height:8px;border-radius:50%;background:#7fb6d6;opacity:0}
.bed.pour .drops i{animation:drip .5s .45s 2 linear}.bed.pour .drops i:nth-child(2){left:12px;animation-delay:.55s}.bed.pour .drops i:nth-child(3){left:8px;animation-delay:.7s}
@keyframes drip{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(46px)}}
.season{font-size:15px;margin-bottom:8px;animation:fbIn .6s}
.rbeds{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rb{padding:10px;border-radius:14px}.rb p{margin:4px 0 0}
.peas{display:flex;flex-wrap:wrap;gap:3px}.peas span{animation:roll .5s var(--d) both}.peas .pea{width:24px;height:24px}
@keyframes roll{from{opacity:0;transform:translateX(-30px) rotate(-200deg)}}
@media (max-width:560px){.beds,.rbeds{grid-template-columns:1fr}}
/* crossing */
.xbench{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;border-radius:16px}
.xf{position:relative;text-align:center}.xt{display:inline-flex;align-items:center;gap:4px;font-weight:500;font-size:15px;background:rgba(255,255,255,.55);border-radius:99px;padding:1px 10px}
.flw{width:100%;max-width:260px;height:auto;display:block;margin:4px auto 0}
.stamen{cursor:pointer;transition:transform .4s,opacity .4s}.stamen.gone{opacity:0;transform:translate(-30px,60px) rotate(40deg);pointer-events:none}
.stamen.given ellipse{fill:#f1e6b8}.stigma{cursor:pointer}
.flw .petal{transform-origin:100px 120px;animation:petal 6s ease-in-out infinite}
@keyframes petal{50%{transform:rotate(1.5deg)}}
.xbag{position:absolute;inset:16% 18% auto;pointer-events:none}.xbag .drop{width:72%;max-width:180px;animation:bagdrop .6s ease both}
@keyframes bagdrop{from{transform:translateY(-80px);opacity:0}}
.xtag{position:absolute;bottom:4px;left:0;right:0}.xtag .tag{font-size:15px}
.tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;width:96px;padding:8px 4px;border-radius:14px;border:1.5px solid #d4dcd6;background:#fff;font-size:13.5px}
.tool .tpic{height:54px;display:grid;place-items:center}.tool .tpic svg{width:54px;height:54px}.tool .tpic .stk{max-height:54px}.tool .tpic .emo{font-size:40px}.tool .can-svg{width:64px;height:auto}
.tool.on{border-color:var(--leaf);background:var(--goodbg);transform:translateY(-3px);box-shadow:0 4px 0 #b7d5c4}
.tool.dusty .tpic::after{content:"✨";position:absolute;margin:-30px 0 0 30px}
.task{min-height:1.5em;margin:10px 0 0;font-weight:500;text-align:center}
@media (max-width:560px){.tool{width:calc(20% - 7px);min-width:62px;font-size:12px}.tool .tpic{height:44px}.tool .tpic svg{width:44px;height:44px}.tool .tpic .emo{font-size:32px}}
/* pods */
.pods{padding:12px;border-radius:16px}
.podrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px;max-width:620px;margin:0 auto}
.pod{width:100%;height:auto;overflow:visible}
.pod .pshell.t{transform-box:fill-box;transform-origin:0% 100%;transition:transform .55s cubic-bezier(.3,1.6,.5,1)}.pod .pseeds{opacity:0;transition:opacity .3s .15s}
.pod.open .pshell.t{transform:translate(4px,-26px) rotate(-9deg)}.pod.open .pseeds{opacity:1}.pod.open .pshell.b{fill:#6fa45c}
.tally{font-size:17px;margin:8px 0 0}
/* sorter */
.sortbox{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px;border-radius:16px}
.bowlbtn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;border:2px solid transparent;background:rgba(255,255,255,.35);border-radius:16px;padding:8px}
.bowlbtn:hover{border-color:#fff}.bowlbtn .bw{width:100%;max-width:170px;height:auto}.bowlbtn b{font-size:16px}
.bowl.gulp .bw{animation:gulp .35s ease}
@keyframes gulp{50%{transform:scale(1.07) rotate(-2deg)}}
.hand-pea{display:flex;flex-direction:column;align-items:center;min-width:90px}
.hand-pea .cur .pea{width:70px;height:70px;animation:pop .35s}.hand-pea small{font-size:12.5px;color:#3f3122}
@media (max-width:560px){.hand-pea .cur .pea{width:56px;height:56px}.hand-pea{min-width:66px}}
/* counter */
.counter{padding:14px;border-radius:16px}
.cbar{display:grid;grid-template-columns:110px 1fr 70px;align-items:center;gap:8px;margin:6px 0}
.cbar .lbl{font-size:15px;font-weight:500}.cbar b{font-size:18px;text-align:end;font-variant-numeric:tabular-nums}
.track{height:20px;border-radius:99px;background:rgba(255,255,255,.45);overflow:hidden}.track i{display:block;height:100%;width:0;border-radius:99px}
.fillR{background:#5f9a6e}.fillW{background:#a6b98f}
.sum{margin:6px 0 0}
/* chance lab */
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.size.used{background:var(--sage)}
.simh{margin:0 0 6px;font-weight:500}
.srow{display:grid;grid-template-columns:62px 1fr 56px 96px;align-items:center;gap:8px;margin:5px 0;font-size:14.5px}
.sbar{position:relative;height:16px;border-radius:99px;background:rgba(255,255,255,.5);overflow:visible}.sbar i{display:block;height:100%;background:#7d9fc0;border-radius:99px;transition:width .5s}
.sbar em{position:absolute;top:-4px;bottom:-4px;border-inline-start:2px dashed #3e2f22}
.srow small{color:#4a3a28}.sfoot{margin:8px 0 0;font-size:15px}
@media (max-width:560px){.srow{grid-template-columns:52px 1fr 48px;font-size:13.5px}.srow small{display:none}}
/* seven jars */
.jars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.jarc{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:200px;padding:10px 6px;border-radius:16px;border:1.5px solid #dcd6c6;background:linear-gradient(180deg,#fffdf8,#f3eee2);font-size:14.5px}
.jpic .stk{height:84px;width:auto;transition:transform .4s}.jarc:hover .jpic .stk{transform:rotate(-6deg)}
.jres{display:none;flex-direction:column;align-items:center;font-size:13.5px;line-height:1.35}.jres em{font-style:normal;font-weight:700;color:var(--leaf);font-size:16px}
.jarc.open .jres{display:flex;animation:fbIn .4s}.jarc.open .jpic .stk{height:56px;transform:rotate(-14deg)}
@media (max-width:700px){.jars{grid-template-columns:repeat(2,1fr)}}
.ttab{width:100%;border-collapse:collapse;font-size:14.5px}.ttab caption{text-align:start;font-weight:500;margin-bottom:6px}.ttab th,.ttab td{padding:5px 6px;border-bottom:1px solid rgba(70,50,30,.25);text-align:start}.ttab tfoot td{font-weight:700;border-bottom:0}
/* model + punnett */
.model ul{margin:6px 0;padding-inline-start:20px}.model li{margin:3px 0}
.punnett{display:grid;grid-template-columns:52px repeat(2,minmax(80px,140px));gap:6px;justify-content:center;margin:12px 0}
.gam{display:grid;place-items:center;font-size:24px;font-weight:700;font-family:Georgia,serif;color:#3a2a1a}
.cell{position:relative;min-height:92px;border-radius:12px;border:2px dashed rgba(60,40,20,.45);background:rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.cell .gt{font-family:Georgia,serif;font-size:24px;font-weight:700;direction:ltr}.cell.ask{border-style:solid;border-color:var(--lavd);background:rgba(255,255,255,.65)}
.cell.set{border-style:solid;border-color:rgba(60,40,20,.4);background:rgba(255,255,255,.6)}.cell .pea{width:32px;height:32px;animation:pop .35s}
.cellq{text-align:center}.cellq p{margin:4px 0}
.pick2{display:flex;gap:10px;justify-content:center}.opt.mini{min-height:54px;flex-direction:row;padding:8px 16px;flex:0 1 160px;justify-content:center}.opt.mini .pea{width:30px;height:30px}
.fbline{background:rgba(255,255,255,.55);padding:8px 12px;border-radius:12px;margin:8px 0 0}
.ptally{text-align:center;font-size:20px}
/* hall */
.inset{margin:0 0 10px;border-radius:14px;overflow:hidden;position:relative}.inset img{display:block;width:100%;height:clamp(180px,26vw,300px);object-fit:cover}
.inset figcaption{position:absolute;bottom:0;right:0;left:0;padding:16px 12px 8px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);color:#fff;font-size:14.5px}
.tline{list-style:none;margin:0;padding:12px;border-radius:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.tline li{background:rgba(255,255,255,.5);padding:6px 9px;border-radius:10px;font-size:14px;line-height:1.3}.tline li b{display:block;font-size:18px;font-family:"Gveret Levin",Rubik}.tline li.hi{background:#fff;box-shadow:0 0 0 2px var(--lav2)}
.quote{margin:12px 0;padding:12px 16px;border-inline-start:4px solid var(--kraft);background:#faf6ec;border-radius:10px;font-size:1.15em}.quote cite{display:block;font-size:.75em;font-family:Rubik;font-style:normal;color:var(--ink2);margin-top:4px}
/* certificate */
.cert-wrap{display:grid;place-items:center;padding:10px 0}
.cert{max-width:680px;width:100%;padding:26px 26px 22px;border-radius:20px;text-align:center;border:6px double rgba(255,255,255,.6)}
.cert h1{margin:6px 0 10px;font-size:34px}
.cert input{width:min(100%,380px);font-size:30px;text-align:center;border:0;border-bottom:2px solid #5b4630;background:transparent;padding:4px 8px;color:#2d2318}
.cert input::placeholder{color:rgba(45,35,24,.5)}
.cstars{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0}.cstars span{padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.35);color:rgba(45,35,24,.55)}.cstars span.on{background:#fff;color:#4d3fa0;font-weight:700}
.cert .row{justify-content:center}
/* modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(20,30,30,.45);display:grid;place-items:center;padding:14px}
.mbox{position:relative;width:min(760px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:18px;padding:20px 22px}
.mclose{position:absolute;top:10px;left:10px}
.mnav{display:grid;gap:6px}.mnav button{text-align:start;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#f7faf8}
.guide-m h3{margin:16px 0 4px;color:var(--leaf)}.guide-m li{margin:3px 0}
/* phone */
@media (max-width:640px){
  body{font-size:16px}
  #top{gap:8px;padding:0 10px}.brand b{font-size:17px}.brand .sub{font-size:11.5px}#path{display:none}
  .stars i{font-size:16px}.stars i em{display:none}
  #stage{padding:10px 10px calc(var(--bk) + 30px)}
  .hero .bg{height:clamp(200px,58vw,250px)}
  .hero-t{left:40%;right:12px;bottom:8px}.hero-t p{display:none}.hero-t h1{font-size:21px}
  .guide{height:min(72%,180px)}.guide .bubble{font-size:13px;min-width:90px;max-width:150px;left:62%}
  .paper{padding:14px 13px}.lead{font-size:16.5px}
  .tomap span{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.bee{display:none}}
@media print{#top,#book,.fb-ico,.noprint,.tomap,.guide,.bee,#fx{display:none!important}body{background:#fff}#stage{padding:0!important;max-width:none}}

/* per-image focal points: y keeps heads in wide banners, x keeps the figure in narrow phone frames */
img[src$="bg-study.webp"]{object-position:58% 0%}
img[src$="bg-sow.webp"]{object-position:50% 22%}
img[src$="bg-cross.webp"]{object-position:38% 12%}
img[src$="bg-bags.webp"]{object-position:55% 22%}
img[src$="bg-f1.webp"]{object-position:50% 45%}
img[src$="bg-desk.webp"]{object-position:45% 22%}
img[src$="bg-lecture.webp"]{object-position:50% 20%}
img[src$="bg-dust.webp"]{object-position:50% 50%}
img[src$="bg-y1900.webp"]{object-position:50% 28%}
.ltr{unicode-bidi:isolate;direction:ltr;display:inline-block}
.peek{position:fixed;left:8px;bottom:0;width:min(46vw,230px);animation:peek 2.6s ease both;z-index:61}
.peek .stk{width:100%;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.peek .bubble{position:absolute;left:62%;top:-18px;background:#fff;border-radius:14px 14px 14px 4px;padding:6px 12px;font-weight:500;font-size:15px;box-shadow:0 4px 12px rgba(0,0,0,.2);white-space:nowrap}
@keyframes peek{0%{transform:translateY(105%)}18%,78%{transform:translateY(12%) rotate(-3deg)}50%{transform:translateY(14%) rotate(2deg)}100%{transform:translateY(105%)}}
@media (max-width:1099px){.peek{bottom:var(--bk)}}

/* ===== fix1 (Oct 30): one task on stage at a time ===== */
.work > .past{display:none}
.work > .held{display:none}
.work > .stp-cur{animation:stepIn .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes stepIn{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.zone.adv .hero .bg{height:clamp(150px,15vw,200px);transition:height .5s ease}
.zone.adv .hero .guide{height:min(86%,190px)}
.zone.adv .hero-t p{display:none}
.row.hold{justify-content:flex-start}
.row.hold .btn{animation:fbIn .4s ease both}
@media (max-width:640px){.zone.adv .hero .bg{height:clamp(130px,34vw,150px)}.zone.adv .hero .guide{height:min(88%,140px)}}
/* map: every zone shown, locked ones with a lock */
.pin.locked{background:rgba(244,242,251,.9);border-color:rgba(255,255,255,.85);color:var(--ink2);cursor:not-allowed;box-shadow:0 3px 10px rgba(20,40,30,.35)}
.pin.locked .pi{background:#e4def5;font-size:16px}
.pin.locked .pn{font-size:13.5px;font-weight:400}
.zcard.locked{background:#f6f5fa;border-style:dashed;color:var(--ink2);cursor:not-allowed}
.zcard.locked .zi{background:#e4def5;font-size:20px}
.pi.unlocking{animation:hop .7s ease 2}
/* shed: Mendel explains why a tool matters */
.modal.why .mbox{max-width:480px}
.why-head{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px}
.why-head .wmendel{height:92px;width:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));animation:hop .8s ease}
.why-head small{color:var(--lavd);font-weight:500;font-size:13px}
.why-head h2{margin:0;font-size:21px;color:var(--leaf)}
.wscene{position:relative;height:150px;border-radius:14px;background:linear-gradient(180deg,#e6f1f7,#eef6ea);overflow:hidden;margin:6px 0 8px}
.bagx .wflw{position:absolute;left:calc(50% - 50px);bottom:0;width:100px;height:100px}
.bagx .wbag{position:absolute;left:calc(50% - 29px);bottom:46px;width:58px;height:auto;opacity:.85;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.bagx .wbee{position:absolute;left:calc(50% + 18px);top:40px;width:46px;height:42px;transform:scaleX(-1);animation:wbump 3.6s ease-in-out infinite}
@keyframes wbump{0%{transform:translate(150px,10px) scaleX(-1) rotate(0)}8%{transform:translate(118px,-28px) scaleX(-1) rotate(-12deg)}15%{transform:translate(92px,-6px) scaleX(-1) rotate(10deg)}21%{transform:translate(104px,18px) scaleX(-1) rotate(18deg)}27%{transform:translate(122px,-4px) scaleX(-1) rotate(-6deg)}34%{transform:translate(84px,-30px) scaleX(-1) rotate(-14deg)}41%{transform:translate(4px,4px) scaleX(-1) rotate(8deg)}45%{transform:translate(14px,-2px) scaleX(-1) rotate(-28deg)}52%{transform:translate(36px,-26px) scaleX(-1) rotate(12deg)}60%{transform:translate(62px,-8px) scaleX(-1) rotate(-8deg)}67%{transform:translate(52px,-40px) scaleX(-1) rotate(20deg)}76%{transform:translate(96px,-44px) scaleX(-1) rotate(-10deg)}86%{transform:translate(120px,-14px) scaleX(-1) rotate(12deg)}100%{transform:translate(170px,-40px) scaleX(-1) rotate(0)}}
.wboom{position:absolute;left:calc(50% + 12px);top:26px;font-weight:700;font-size:14px;color:var(--lavd);background:#fff;border-radius:99px;padding:0 7px;opacity:0;animation:wboom 3.6s ease infinite}
@keyframes wboom{0%,40%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.1)}62%{opacity:1}72%,100%{opacity:0}}
.wdust{position:absolute;left:calc(50% + 40px);top:52px}
.wdust i{position:absolute;width:5px;height:5px;border-radius:50%;background:#e8d891;animation:wdust 3.6s ease infinite}
.wdust i:nth-child(2){left:7px;top:5px}.wdust i:nth-child(3){left:2px;top:10px}
@keyframes wdust{0%,41%{opacity:0}46%{opacity:1;transform:none}80%,100%{opacity:0;transform:translate(16px,26px)}}
.toolx{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center}
.wt .wico svg{width:84px;height:84px;display:block}
.wt.tw .wico{display:block;animation:pinch 1.8s ease-in-out infinite;transform-origin:20% 90%}
@keyframes pinch{0%,100%{transform:rotate(0)}40%{transform:rotate(-14deg) translateY(-6px)}60%{transform:rotate(-14deg) translateY(-14px)}}
.wt.br{position:relative}.wt.br .wico{display:block;animation:sweep 2.2s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:translateX(-24px) rotate(8deg)}50%{transform:translateX(24px) rotate(-8deg)}}
.wpol i{position:absolute;bottom:4px;width:6px;height:6px;border-radius:50%;background:#e8d891;border:1px solid #b9a45e;animation:wdust 2.2s ease infinite}
.wpol i:nth-child(1){left:30%}.wpol i:nth-child(2){left:48%;animation-delay:.3s}.wpol i:nth-child(3){left:64%;animation-delay:.6s}
.wtxt,.wlist{font-size:16px;line-height:1.5;margin:4px 0 8px}
.wlist{padding-inline-start:18px}.wlist li{margin:4px 0}
.wnote{margin:6px 0 0;font-size:13.5px;color:var(--ink2)}
/* cross: a smaller, see-through bag on the flower head only */
.fwrap{position:relative;max-width:260px;margin:0 auto}
.xf .xbag{position:absolute;inset:auto;left:33%;top:20%;width:34%;pointer-events:none}
.xf .xbag .drop{width:100%;max-width:none;opacity:.6;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));animation:bagdrop .6s ease both}
@keyframes bagdropT{from{transform:translateY(-80px);opacity:0}to{opacity:.6}}
.xf .xbag .drop{animation-name:bagdropT}
.xbee{position:absolute;left:96%;top:22%;width:42px;height:38px;animation:xbump 2.6s ease-in-out 2 both}
@keyframes xbump{0%{transform:translate(80px,-36px) scaleX(-1);opacity:0}10%{transform:translate(52px,-56px) scaleX(-1) rotate(-12deg);opacity:1}19%{transform:translate(28px,-30px) scaleX(-1) rotate(14deg)}26%{transform:translate(44px,-6px) scaleX(-1) rotate(20deg)}33%{transform:translate(62px,-28px) scaleX(-1) rotate(-10deg)}43%{transform:translate(0,0) scaleX(-1) rotate(6deg)}48%{transform:translate(9px,-5px) scaleX(-1) rotate(-28deg)}58%{transform:translate(30px,-34px) scaleX(-1) rotate(12deg)}68%{transform:translate(18px,-58px) scaleX(-1) rotate(-14deg)}80%{transform:translate(54px,-46px) scaleX(-1) rotate(10deg)}100%{transform:translate(90px,-64px) scaleX(-1);opacity:0}}
.wboom.xb{left:70%;top:6%;animation:wboom 2.6s ease 2 both}
@media (prefers-reduced-motion: reduce){.work > .stp-cur{animation:none}.bagx .wbee{animation:none;transform:translate(10px,4px) scaleX(-1)}.wboom{animation:none;opacity:1}.wdust i,.wpol i,.wt .wico,.why-head .wmendel{animation:none}.wdust i{opacity:1}}

/* ===== Fix 2 (Oct 30): end of a zone → back to the map; the next zone unlocks and calls the student over ===== */
.unlock.back .lock{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--leaf2);color:#fff;font-size:24px;flex:none}
.unlock.back > div{flex:1;min-width:0}
.unlock .bar{display:block;height:5px;margin-top:8px;border-radius:9px;background:rgba(160,145,220,.25);overflow:hidden;position:relative}
.unlock .bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#9fcf9a,#b6a8ea);transform-origin:right;animation:backbar 2.6s linear both}
@keyframes backbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pin.next{box-shadow:0 4px 14px rgba(20,40,30,.45);animation:pinIn .5s .1s both,nextpulse 1.9s 1s ease-in-out infinite}
@keyframes nextpulse{0%,100%{box-shadow:0 0 0 0 rgba(182,168,234,.85),0 4px 14px rgba(20,40,30,.45)}50%{box-shadow:0 0 0 12px rgba(182,168,234,0),0 4px 14px rgba(20,40,30,.45)}}
.pin .walk{position:absolute;left:50%;bottom:calc(100% + 4px);width:0;height:0;margin-left:-11px;border:11px solid transparent;border-top:15px solid #8d7fd0;border-bottom:0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));animation:walk 1s ease-in-out infinite alternate;pointer-events:none}
@keyframes walk{from{transform:translateY(-7px)}to{transform:translateY(2px)}}
.pin .rib{position:absolute;left:50%;bottom:calc(100% + 24px);transform:translateX(-50%);white-space:nowrap;background:#fff;color:var(--lavd);font-size:13.5px;font-weight:700;padding:3px 10px;border-radius:99px;box-shadow:0 3px 10px rgba(30,40,60,.25);pointer-events:none;animation:rib 4.2s .8s both}
@keyframes rib{0%{opacity:0;transform:translate(-50%,8px) scale(.6)}12%{opacity:1;transform:translate(-50%,0) scale(1.06)}18%,82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px)}}
.pin.just .pi{animation:justpop .7s .2s ease both}
@keyframes justpop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:none}}
.pin.fresh .pi.unlocking{background:#fff;box-shadow:0 0 0 6px rgba(182,168,234,.7)}
.zcard.next{border-color:var(--lav2);box-shadow:0 0 0 3px var(--lav);position:relative}
.zcard .here{margin-inline-start:auto;flex:none;font-size:13.5px;font-weight:700;color:var(--lavd);background:#f1edfb;border-radius:99px;padding:3px 10px;animation:walkx 1s ease-in-out infinite alternate}
@keyframes walkx{from{transform:translateX(3px)}to{transform:translateX(-4px)}}
/* ===== Fix 2: writing into the researcher's book is felt ===== */
.fnote{position:absolute;left:0;top:0;width:210px;padding:8px 11px 9px;border-radius:6px 12px 12px 6px;background:#fffdf6;background-image:repeating-linear-gradient(180deg,transparent 0 21px,#e7eef3 21px 22px);border:1px solid #ddd4bd;border-inline-start:4px solid var(--line);box-shadow:0 10px 26px rgba(30,40,60,.28);will-change:transform;opacity:0}
.fnote .fk{display:block;font-size:11px;color:var(--ink2)}.fnote b{display:block;font-size:13px;line-height:1.25}
.fnote p{margin:2px 0 0;font-size:17px;line-height:1.2;color:#2b3a4c}
.fnote.k-clue{border-inline-start-color:#8cc4a5}.fnote.k-q{border-inline-start-color:#b6a8ea}.fnote.k-me{border-inline-start-color:#9fc3dc}.fnote.k-data{border-inline-start-color:#c8aa83}
.bk-e.wait{opacity:0}
.bk-e.hl{animation:bkhl 2.8s ease}
@keyframes bkhl{0%{background:#e5f3e4;box-shadow:0 0 0 3px #c9bfec;transform:translateX(-8px)}15%{transform:none}70%{background:#eef7e9;box-shadow:0 0 0 2px rgba(201,191,236,.6)}100%{background:rgba(255,255,255,.75);box-shadow:none}}
.hand.typing i.tw{font-style:normal;opacity:0}.hand.typing i.tw.on{opacity:1}
#book.bump{animation:bkbump .75s ease}
@keyframes bkbump{0%{box-shadow:0 6px 24px rgba(40,60,60,.12)}30%{transform:translateY(-6px) scale(1.012);box-shadow:0 0 0 5px rgba(201,191,236,.85),0 10px 30px rgba(40,60,60,.2)}60%{transform:translateY(1px)}100%{transform:none}}
#book::after{content:'';position:absolute;left:0;top:44px;width:50%;height:min(64%,240px);background:#fffdf6;background-image:repeating-linear-gradient(180deg,transparent 0 27px,#e7eef3 27px 28px);box-shadow:-4px 0 12px rgba(0,0,0,.12);transform-origin:100% 50%;opacity:0;pointer-events:none;border-radius:6px 0 0 6px}
#book.flip::after{animation:pflip .7s ease-in-out}
@keyframes pflip{0%{opacity:1;transform:perspective(700px) rotateY(0)}80%{opacity:1}100%{opacity:0;transform:perspective(700px) rotateY(178deg)}}
#bookHead{position:relative}
.bkplus{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%) scale(.4);background:#fff;color:var(--leaf);font-weight:700;font-size:13px;padding:2px 9px;border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.2);opacity:0;pointer-events:none;white-space:nowrap}
.bkplus.on{animation:plus 2.4s ease both}
@keyframes plus{0%{opacity:0;transform:translateY(-50%) scale(.4)}12%{opacity:1;transform:translateY(-50%) scale(1.15)}22%,80%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-90%) scale(.9)}}
#bkPop{position:fixed;left:8px;right:8px;z-index:24;padding:7px 14px 8px;border-radius:16px 16px 0 0;background:#fffdf6;background-image:repeating-linear-gradient(180deg,transparent 0 27px,#e7eef3 27px 28px);border:1px solid #d9d3c2;border-bottom:0;box-shadow:0 -8px 24px rgba(40,60,60,.18);pointer-events:none;opacity:0;transform:translateY(30px);visibility:hidden}
#bkPop.on{visibility:visible;animation:pop 2.6s ease both}
#bkPop b{display:inline;font-size:14px;margin-inline-start:6px}#bkPop .hand{margin:1px 0 0;font-size:19px;line-height:1.25;color:#2b3a4c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes pop{0%{opacity:0;transform:translateY(30px)}10%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(20px)}}
@media (min-width:1100px){#bkPop{display:none}}
@media (max-width:1099px){.bkplus{inset-inline-end:56px}#book::after{top:38px;height:70%}}
@media (prefers-reduced-motion:reduce){.fnote,#bkPop,#book::after{display:none}.bk-e.hl{animation:none;background:#e5f3e4;box-shadow:0 0 0 3px #c9bfec}.bkplus.on{animation:none;opacity:1;transform:translateY(-50%)}.pin .rib{animation:none;opacity:1}}
@media print{.fnote,#bkPop,.bkplus{display:none!important}}

/* Fix 3: trait cards — a drawn die-cut picture per trait + a pie per ratio */
.jarc.trc{justify-content:flex-start;gap:3px;min-height:0;padding:10px 6px 10px;position:relative}
.trc .tn{font-size:15px}
.tart{display:block;width:100%;max-width:168px}
.tsv{display:block;width:100%;height:auto;overflow:visible;transition:transform .35s}
.trc:hover .tsv{transform:translateY(-2px) rotate(-1.5deg)}
.tvl{display:flex;justify-content:space-around;width:100%;max-width:168px;font-size:12px;color:var(--ink2);line-height:1.2}.tvl i{font-style:normal;flex:1;text-align:center}
.tap{font-size:11.5px;color:var(--lavd);opacity:.85}
.trc.open .tap{display:none}
.trc.open .tart{max-width:112px}.trc.open .tvl{max-width:112px}
.trc .jres{gap:3px}
.pie{width:76px;height:76px;display:block;filter:drop-shadow(0 2px 3px rgba(45,74,90,.22))}
.pie .pr{fill:#c9bfec}
.pie .pd{fill:none;stroke:#8fcdb0;stroke-width:17;stroke-dasharray:var(--p) 100}
.trc.open .pie .pd,.ptot .pie .pd,.ttab .pie .pd{animation:pieFill 1.2s cubic-bezier(.3,.7,.3,1) both}
.trc.open .pie{animation:pieIn .45s ease-out both}
@keyframes pieFill{from{stroke-dasharray:0 100}}
@keyframes pieIn{from{transform:scale(.6) rotate(-30deg);opacity:0}}
.leg{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 9px;font-size:12px;color:var(--ink2)}
.leg span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.leg i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;box-shadow:0 0 0 1.5px #fff}
.leg i.d{background:#8fcdb0}.leg i.r{background:#c9bfec}
.trc .cnt{font-size:12.5px}
.ttab .tr2 span{display:inline-flex;align-items:center;gap:6px}.pie.mini{width:22px;height:22px;filter:none}
.ptot{display:flex;align-items:center;gap:14px;margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.55)}
.ptot .pie.big{width:104px;height:104px;flex:none}.ptot > div{display:flex;flex-direction:column;gap:3px;align-items:flex-start}.ptot .leg{justify-content:flex-start;font-size:13.5px}.ptot .cnt{font-size:14.5px}
@media (max-width:700px){.trc .tn{font-size:14px}.tart,.tvl{max-width:132px}.pie{width:66px;height:66px}.ptot .pie.big{width:84px;height:84px}.ptot{gap:10px}}
@media (prefers-reduced-motion:reduce){.pie .pd,.trc.open .pie{animation:none!important}.trc:hover .tsv{transform:none}}

/* Mendel only once per frame: the scene picture shows him, so only his bubble (gen art round, Oct 30) */
.guide.inframe{left:0;right:0;top:0;bottom:0;height:auto!important;width:auto}
.guide.inframe .bubble{left:auto;top:auto;transform-origin:0 100%}
.guide.inframe .bubble.tail-r{border-radius:16px 16px 4px 16px;transform-origin:100% 100%}
.guide.puzzled .stk{animation:shake .6s ease}

/* tray + gear alignment (Nov 4, חפ: «הבחירות לא מיושרות»): every slot is the same box, filled or empty; every picture sits on one baseline at one height */
.cart{align-items:center;padding:10px 12px}
.slots{display:flex;gap:8px;align-items:center;justify-content:center;flex:1 1 auto}
.slot{--sh:58px;--ih:40px;--iw:50px;box-sizing:border-box;width:var(--sh);height:var(--sh);flex:0 0 var(--sh);border-radius:16px;border:2px dashed #9db7c9;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.3)}
.slot.full{border:2px solid rgba(255,255,255,.95);background:rgba(255,255,255,.6)}
.slot .spic{width:var(--iw);height:var(--ih);display:flex;align-items:flex-end;justify-content:center}
.slot .spic>.stk{height:var(--ih);width:auto;max-width:100%;max-height:none;object-fit:contain;object-position:50% 100%}
.slot .spic>.emo{display:block;font-size:calc(var(--ih)*.86);line-height:var(--ih);height:var(--ih)}
.slot .spic>.pile{transform:none;display:flex;align-items:flex-end;justify-content:center;width:var(--iw);height:var(--ih)}
.slot .spic>.pile .stk{position:static;height:calc(var(--ih)*.95);max-height:none;width:auto;margin-inline:-6px}
.gpic{height:86px;display:flex;align-items:flex-end;justify-content:center}
.gpic>.stk{height:80px;width:auto;max-width:100%;max-height:none;object-fit:contain;object-position:50% 100%}
.gpic>.emo{display:block;font-size:68px;line-height:80px;height:80px}
.gpic>.pile{height:80px}.gpic>.pile .stk{max-height:76px}
@media (max-width:700px){.slot{--sh:50px;--ih:34px;--iw:43px}}
@media (max-width:360px){.slots{gap:6px}.slot{--sh:46px;--ih:31px;--iw:40px}}

/* unlock announcement (unlock-ann.js) — garden look */
#ua{--ua-accent:var(--leaf);--ua-ink:var(--ink);--ua-ink2:var(--ink2);--ua-card:var(--paper);--ua-soft:var(--sage);--ua-ring:var(--lav2);--ua-shade:rgba(38,52,63,.5);--ua-name-font:"Gveret Levin",Rubik,cursive;--ua-btn-radius:14px;--ua-btn-shadow:0 3px 0 #2c5a43}
#ua .ua-card{background-image:var(--noise);background-color:var(--paper)}

/* step card (cross zone): the current instruction above the flowers, and a TANGIBLE step change (her notes Nov 4):
   numbered stepper (done = solid ✓ + filled line, current larger & coloured, future outlined), the done card gets a «בוצע» stamp
   and slides out to the right, the next slides in from the left (RTL forward). Reduced motion: instant swap, stepper still updates. */
.taskcard{margin:10px 0 12px;padding:12px 14px 14px;border-radius:18px;background:#fff;border:2px solid var(--leaf2);box-shadow:0 3px 0 rgba(63,122,92,.18);text-align:right;transition:border-color .3s,background .3s}
.tc-stepper{display:flex;list-style:none;margin:0 0 10px;padding:0;align-items:flex-start}
.tc-stepper li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.tc-stepper li:not(:last-child)::before,.tc-stepper li:not(:last-child)::after{content:'';position:absolute;top:17px;height:4px;border-radius:4px;right:calc(50% + 20px);left:calc(-50% + 20px)}
.tc-stepper li:not(:last-child)::before{background:var(--line)}
.tc-stepper li:not(:last-child)::after{background:var(--good);transform:scaleX(0);transform-origin:100% 50%;transition:transform .42s cubic-bezier(.4,0,.2,1) .08s}
.tc-stepper li.done::after{transform:scaleX(1)}
.tc-n{width:36px;height:36px;display:grid;place-items:center;z-index:1}
.tc-n b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #b8c4bd;color:var(--ink2);font-size:14px;font-weight:700;box-sizing:border-box;transition:transform .3s cubic-bezier(.3,1.5,.5,1),background .25s,border-color .25s,color .25s}
.tc-stepper li.cur .tc-n b{width:36px;height:36px;background:var(--lavd);border-color:var(--lavd);color:#fff;font-size:17px;box-shadow:0 0 0 4px var(--lav)}
.tc-stepper li.done .tc-n b{background:var(--good);border-color:var(--good);color:transparent;position:relative}
.tc-stepper li.done .tc-n b::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:700}
.tc-stepper li.done .tc-n b{animation:tc-pop .35s cubic-bezier(.3,1.6,.5,1)}
.tc-stepper em{font-style:normal;font-size:12.5px;line-height:1.2;color:var(--ink2);text-align:center;padding:0 2px}
.tc-stepper li.cur em{color:var(--lavd);font-weight:700}.tc-stepper li.done em{color:var(--good)}
.tc-stage{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;margin:0 -4px;padding:0 4px 2px}
.tc-card{grid-area:1/1;min-width:0;box-sizing:border-box;position:relative;padding:10px 12px 12px;border-radius:14px;background:var(--lav);border:1px solid var(--lav2);transition:background .2s,border-color .2s}
.tc-chip{display:inline-block;padding:2px 12px;border-radius:999px;background:var(--lavd);color:#fff;font-size:14px;font-weight:700;letter-spacing:.01em;margin-bottom:4px}
.tc-txt{margin:0;font-size:19px;line-height:1.45;font-weight:700;color:var(--ink)}
.tc-prog{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;font-size:14px;color:var(--ink2)}
.tc-pips{display:inline-flex;gap:5px}.tc-pips i{width:14px;height:14px;border-radius:50%;border:2px solid var(--lav2);background:#fff;box-sizing:border-box;transition:background .2s,border-color .2s,transform .2s}
.tc-pips i.on{background:#e3c95a;border-color:#a88a2a;transform:scale(1.15)}
.tc-cnt b{font-size:16px;color:var(--ink)}
.tc-sub{display:inline-flex;align-items:center;gap:5px}.tc-sub i{width:18px;height:18px;border-radius:50%;border:2px solid var(--lav2);background:#fff;box-sizing:border-box;display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff;transition:background .2s,border-color .2s}
.tc-sub.on{color:var(--good);font-weight:500}.tc-sub.on i{background:var(--good);border-color:var(--good)}.tc-sub.on i::after{content:'✓'}
.tc-stamp{position:absolute;top:8px;left:10px;padding:3px 12px;border:3px solid var(--good);border-radius:10px;color:var(--good);background:rgba(255,255,255,.9);font-weight:700;font-size:18px;transform:rotate(-10deg) scale(2.2);opacity:0;pointer-events:none}
.tc-card.tc-stamped{background:var(--goodbg);border-color:#9fd1b6}
.tc-card.tc-stamped .tc-chip{background:var(--good)}
.tc-card.tc-stamped .tc-stamp{animation:tc-stamp .22s cubic-bezier(.3,1.3,.6,1) forwards}
.tc-card.tc-leave{animation:tc-leave .34s cubic-bezier(.5,0,.75,.3) forwards;pointer-events:none}
.tc-card.tc-enter{animation:tc-enter .36s cubic-bezier(.2,.9,.3,1.05) both}
.tc-card.tc-fin{background:var(--goodbg);border-color:#9fd1b6}.tc-card.tc-fin .tc-chip{background:var(--good)}
.taskcard.tc-done{border-color:var(--good)}
@keyframes tc-stamp{0%{opacity:0;transform:rotate(-10deg) scale(2.2)}100%{opacity:1;transform:rotate(-10deg) scale(1)}}
@keyframes tc-leave{0%{transform:none;opacity:1}100%{transform:translateX(105%) rotate(4deg) scale(.92);opacity:0}}
@keyframes tc-enter{0%{transform:translateX(-105%);opacity:.2}100%{transform:none;opacity:1}}
@keyframes tc-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@media (max-width:700px){.taskcard{padding:10px 10px 12px}.tc-txt{font-size:17.5px}.tc-stepper em{font-size:12px}}
@media (prefers-reduced-motion:reduce){.tc-stepper li::after,.tc-n b{transition:none!important}.tc-stepper li.done .tc-n b{animation:none}.tc-card{animation:none!important}}
/* the scene keeps what was done: removed anthers in the dish, the mother flower without stamens, pollen on the stigma, bag stays on */
.xdish{display:flex;justify-content:center;margin:-2px auto 4px;height:22px}
.xd-pile{display:inline-flex;align-items:flex-end;gap:2px;min-width:60px;height:18px;padding:0 8px 3px;border-radius:0 0 30px 30px;background:linear-gradient(#fff,#ece6d4);border:1.5px solid #cfc6ad;border-top:0;box-sizing:border-box;opacity:.45;transition:opacity .3s}
.xdish.has .xd-pile{opacity:1}
.xd-pile i{width:9px;height:6px;border-radius:50%;background:#e8d891;border:1px solid #a88a2a;animation:xd-in .45s cubic-bezier(.3,1.4,.5,1) both}
@keyframes xd-in{from{transform:translateY(-26px);opacity:0}}
.flw.pollinated .stigma{fill:#f0dc7c;stroke:#8f7420}
.flw.pollinated .pollen circle{animation:xd-in .4s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d,0ms)}
.xf.bagged .xbag .drop{opacity:.82}
@media (prefers-reduced-motion:reduce){.xd-pile i,.flw.pollinated .pollen circle{animation:none}}