:root{--bg:#f4f8fb;--ink:#26304f;--ink2:#3d4770;--soft:#5b6585;--line:#dfe6ef;--mint:#5fae9c;--mintdk:#2f7565;--okbg:#e5f5ef;--okb:#bfe3d4;--okt:#2c6a5b;--warnbg:#fff6e2;--warnt:#8a5a12;--warnb:#ead7ae;--badbg:#fdecea;--badt:#9a3412;--sky:#e3eefb;--skyt:#2f5b93;--amber:#c98a2e;--coral:#c8573f}
@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}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:Rubik,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,#e8f2ef 0,#f4f8fb 420px) #f4f8fb;font-size:16.5px;line-height:1.5;min-height:100vh}
main{max-width:1320px;margin:0 auto;padding:14px 14px 10px;display:flex;flex-direction:column;gap:14px;min-height:100vh}
.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}
.card{background:#fff;border:1px solid #e3e9f2;border-radius:18px;box-shadow:0 2px 10px rgba(40,60,110,.06)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:rgba(255,255,255,.94);border:1px solid #e3e9f2;border-radius:18px;padding:10px 16px}
.top h1{margin:0;font-size:24px;line-height:1.2}
.kick{margin:0;color:var(--mintdk);font-weight:500;font-size:14.5px}
.dur{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:var(--okbg);border:1px solid var(--okb);color:var(--okt);border-radius:999px;padding:5px 12px;font-weight:500;font-size:15px}
.dur.big{font-size:16px;padding:7px 14px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.tab{font:inherit;font-weight:500;font-size:15.5px;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer}
.tab[aria-current="step"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tab:disabled{color:#9aa3bb;background:#f6f8fb;cursor:default}
.start{max-width:660px;margin:4vh auto 0;padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.start h2{margin:6px 0 0;font-size:28px;line-height:1.25}
.start p{margin:0;color:var(--ink2);font-size:17.5px}
.steps{margin:4px 0 8px;padding:0;list-style:none;counter-reset:s;display:flex;flex-wrap:wrap;gap:8px}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 14px;font-size:15px;color:var(--ink2)}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:700;margin-left:7px}
.startrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tlink{color:var(--soft);font-size:15px;display:inline-flex;gap:6px;align-items:center}
.btn{font:inherit;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--mintdk);cursor:pointer;font-size:17px}
.btn.pri{background:var(--mint);border-color:var(--mint);color:#fff}
.btn.pri:active{background:var(--mintdk)}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,.opt:focus-visible,.tab:focus-visible,.sg:focus-visible,.chip:focus-visible,.pick:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.lab{display:grid;grid-template-columns:1fr;gap:14px}
.stagewrap{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column}
.stagetop{display:grid;grid-template-columns:1fr auto;grid-template-areas:"p w" "l w";gap:4px 12px;padding:12px 16px 10px;align-items:center;border-bottom:1px solid var(--line)}
.prog{grid-area:p;position:relative;height:14px;border-radius:999px;background:#e8edf4;overflow:hidden}
.prog i{position:absolute;top:0;bottom:0;right:0;width:0;background:var(--mint);border-radius:999px}
.prog .tick{position:absolute;top:0;bottom:0;width:3px;background:#fff}
.progl{grid-area:l;margin:0;font-weight:500;color:var(--ink2);font-size:15.5px}
.wx{grid-area:w;display:inline-flex;align-items:center;gap:6px;background:var(--warnbg);border:1px solid var(--warnb);color:var(--warnt);border-radius:999px;padding:5px 12px;font-weight:500;font-size:15px;white-space:nowrap}
canvas#cv{display:block;width:100%;aspect-ratio:16/9;touch-action:manipulation}
.pacebar{display:flex;align-items:center;gap:12px;padding:10px 14px 12px;border-top:1px solid var(--line);flex-wrap:wrap}
.pl{font-weight:500;color:var(--ink2)}
.seg{display:flex;gap:8px;flex:1}
.sg{font:inherit;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;line-height:1.2;padding:4px 8px}
.sg b{font-size:17px}.sg small{font-size:13.5px;color:var(--soft)}
.sg[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}.sg[aria-pressed="true"] small{color:#d6dbea}
.sg:disabled{opacity:.5;cursor:default}
.side{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.gauges{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g{border:1px solid var(--line);border-radius:14px;padding:8px 10px 9px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i l" "v v" "b b" "s s";gap:2px 8px;align-items:center;background:#fbfcfe}
.gi{grid-area:i;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--sky);color:var(--skyt)}
#g-hr .gi{background:#fbe7e2;color:#a8432f}#g-t .gi{background:var(--warnbg);color:var(--warnt)}#g-w .gi{background:#def3f5;color:#1d6470}#g-br .gi{background:var(--okbg);color:var(--okt)}
.gl{grid-area:l;font-weight:500;color:var(--ink2);font-size:15px}
.gv{grid-area:v;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.gv small{font-size:13.5px;font-weight:400;color:var(--soft)}
.gb{grid-area:b;height:8px;border-radius:999px;background:#e8edf4;overflow:hidden;position:relative}
.gb s{position:absolute;top:0;bottom:0;right:0;width:0;border-radius:999px;background:var(--mint);transition:width .3s}
.gs{grid-area:s;font-size:14px;color:var(--soft)}
.g.hi .gs{color:var(--warnt);font-weight:500}.g.hi .gb s{background:var(--amber)}
.g.vh{border-color:#f3c9c0;background:#fff8f6}.g.vh .gs{color:var(--badt);font-weight:700}.g.vh .gb s{background:var(--coral)}
.hb.beat svg{animation:beat var(--bt,0.8s) ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}}
.panel{display:flex;flex-direction:column;gap:10px}
.panel h2{margin:0;font-size:22px;line-height:1.25}
.panel p{margin:0;color:var(--ink2)}
.say{background:var(--sky);border:1px solid #cfdff3;color:#24406a;border-radius:14px;padding:9px 13px;margin:0}
.q{margin:2px 0 0;font-weight:500;color:var(--ink)}
.picks{display:flex;flex-direction:column;gap:8px}
.picks.row{flex-direction:row;flex-wrap:wrap}.picks.row .pick{flex:1 1 90px;justify-content:center}
.pick,.opt{font:inherit;text-align:right;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;min-height:48px;color:var(--ink);cursor:pointer;display:flex;gap:10px;align-items:center}
.pick[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.opt.ok{background:var(--okbg);border-color:var(--okb);color:var(--okt)}
.opt.no{background:var(--badbg);border-color:#f3c9c0;color:var(--badt)}
.opt:disabled{cursor:default}
.note{border-radius:14px;padding:10px 14px;margin:0}
.note.ok{background:var(--okbg);border:1px solid var(--okb);color:var(--okt)}
.note.warn{background:var(--warnbg);border:1px solid var(--warnb);color:var(--warnt)}
.note.bad{background:var(--badbg);border:1px solid #f3c9c0;color:var(--badt)}
.ctl{display:flex;flex-wrap:wrap;gap:10px}.ctl .btn{flex:1 1 auto}
.sum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.sum div{background:#f6f9fc;border:1px solid var(--line);border-radius:12px;padding:7px 11px}
.sum dt{font-size:14px;color:var(--soft)}.sum dd{margin:0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.wide{padding:18px 20px 20px}
.wide h2{margin:0;font-size:24px}
.organs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 4px}
.org{border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:#fbfcfe}
.org h3{margin:0;font-size:18px;display:flex;gap:8px;align-items:center}
.org .num{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.org p{margin:0;color:var(--ink2);font-size:15.5px}
.qs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.qbox{display:flex;flex-direction:column;gap:8px}
.ghead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-weight:500;display:inline-flex;gap:7px;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;font-size:15.5px}
.chip[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gwrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;margin-top:12px}
.gcol{display:flex;flex-direction:column;gap:8px;min-width:0}
canvas#gc{width:100%;aspect-ratio:16/9;display:block;border:1px solid var(--line);border-radius:14px;background:#fff}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:15px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:22px;height:6px;border-radius:999px;display:inline-block}
.gside{display:flex;flex-direction:column;gap:10px}
textarea{font:inherit;width:100%;min-height:110px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;color:var(--ink);resize:vertical}
textarea:focus{outline:3px solid var(--mint);outline-offset:1px}
.foot{margin-top:auto;display:flex;gap:10px;justify-content:flex-start}
.fb{display:inline-flex;align-items:center;gap:6px;color:var(--soft);font-size:14px;text-decoration:none;background:rgba(255,255,255,.85);border-radius:999px;padding:4px 12px;border:1px solid var(--line)}
@media (min-width:980px){
  canvas#gc{aspect-ratio:auto;height:clamp(300px,calc(100vh - 250px),560px)}
  main{padding:16px 22px 10px}
  .lab{grid-template-columns:minmax(0,1fr) 400px;align-items:start}
  .top h1{font-size:28px}
  .start{margin-top:6vh}
}
@media (max-width:979px){.gwrap{grid-template-columns:1fr}.organs{grid-template-columns:1fr 1fr}.qs{grid-template-columns:1fr}}
@media (max-width:560px){
  .top{padding:8px 12px}.top h1{font-size:22px}.tabs{order:3;width:100%;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
  .tab{padding:0 4px;font-size:14px;justify-content:center;flex-direction:column;gap:1px;min-height:50px;border-radius:14px;line-height:1.15;text-align:center}
  .dur{font-size:14px;padding:4px 10px}.start{padding:18px 16px 20px}.start h2{font-size:23px}
  .gv{font-size:26px}.organs{grid-template-columns:1fr}.wide{padding:14px 14px 16px}
  .sg small{font-size:12.5px;white-space:nowrap}.pl{display:none}.pacebar{padding:8px 10px 10px;gap:8px}.sg{min-height:52px}
  #runBtn{flex:1 1 100%}
  .lab{gap:10px}.side{padding:10px 10px 12px;gap:10px}.gauges{gap:6px}
  .g{padding:5px 8px 6px;grid-template-areas:"i l" "v v" "s s";gap:1px 6px}.g .gb{display:none}.gi{width:26px;height:26px}.gv{font-size:23px}.gs{font-size:13px}
  .stagetop{padding:8px 12px 8px}.progl{font-size:14.5px}
}
body.proj{font-size:20px}.proj .gv{font-size:38px}.proj .btn{font-size:21px;min-height:56px}.proj .panel h2{font-size:28px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.hb.beat svg{animation:none}}
@media (min-width:980px) and (max-height:820px){.g{padding:6px 10px 7px}.gv{font-size:26px}.side{gap:10px;padding:12px 14px 14px}.panel{gap:8px}.panel h2{font-size:21px}.pick,.opt{min-height:44px;padding:8px 12px}}

canvas#cv{aspect-ratio:16/6.4}
.web{padding:6px 10px 10px}
.web svg{display:block;width:100%;height:auto}
.web .nd rect{stroke-width:2.5}
.web text{font-family:Rubik,sans-serif;font-size:25px;fill:#26304f;text-anchor:middle;dominant-baseline:central}
.web .rl{font-size:18px;fill:#3d4770}
.tblw{padding:10px 16px 14px;border-top:1px solid var(--line);overflow-x:auto}
.tblw table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:320px}
.tblw th,.tblw td{border:1px solid var(--line);padding:6px 8px;text-align:center}
.tblw th{background:#f6f9fc;font-weight:500;color:var(--ink2)}
.tblw td.mo{text-align:right;color:var(--ink2)}
.rows{display:flex;flex-direction:column;gap:8px}
.orow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:6px 10px;background:#fff}
.orow.ok{border-color:var(--okb);background:var(--okbg)}.orow.no{border-color:var(--warnb);background:var(--warnbg)}
.oname{font-weight:500}
.rch{display:flex;gap:4px}
.rch button{font:inherit;font-size:14.5px;min-height:40px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer}
.rch button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.rch button:disabled{cursor:default}
@media (max-width:560px){canvas#cv{aspect-ratio:16/10}.orow{grid-template-columns:1fr}.rch button{flex:1}.tblw{padding:8px}.tblw table{font-size:14px}canvas#gc{aspect-ratio:4/4.2}}

/* tracks (בסיס / מתקדם) */
.tchoose{display:flex;flex-direction:column;gap:8px;margin-top:4px;align-self:stretch}
.tchoose h3{margin:0;font-size:16.5px;color:var(--ink)}
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tcard{font:inherit;text-align:right;display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;min-height:76px}
.tcard:hover,.tcard.on{border-color:var(--mint)}
.tcard.on{box-shadow:inset 0 0 0 1px var(--mint)}
.tcard:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.tcard .ti{width:38px;height:38px;border-radius:12px;background:var(--okbg);color:var(--mintdk);display:grid;place-items:center;flex:none}
.tcard .ti .i{width:22px;height:22px}
.tcard .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.tcard b{font-size:17px;line-height:1.25}
.tcard .tl{font-size:14.5px;color:var(--ink2);line-height:1.3}
.tcard .tm{font-size:13.5px;color:var(--soft);margin-top:2px}
.tcard .tr{font-size:13px;color:var(--mintdk);font-weight:500}
.tnote{margin:0;font-size:13.5px;color:var(--soft)}
.trk{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink2);font:inherit;font-weight:500;font-size:14.5px;cursor:pointer;white-space:nowrap}
.trk:hover{border-color:var(--mint)}
.trk .sw{width:.95em;height:.95em;color:var(--soft)}
.trk:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.fb.step{background:#f2f7f5;color:var(--ink2);border:1px solid #d7e8e1}
.fb.step .i{color:var(--mintdk)}
.nrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.num{font:inherit;font-size:18px;width:120px;min-height:48px;border-radius:14px;border:1px solid #cfd8e5;padding:6px 12px;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
.num:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.unit{font-weight:500;color:var(--ink2)}
.btn.sm{min-height:48px;padding:0 16px;font-size:16px}
.pbox{display:flex;flex-direction:column;gap:6px;background:#f6f8fb;border:1px dashed #c9d4e3;border-radius:14px;padding:10px 12px}
.pbox .q{margin:0}
.pl{margin:0;font-size:15px;color:var(--ink2);display:flex;gap:6px;align-items:flex-start}
.pl .i{color:var(--mintdk);margin-top:.2em}
.hint2{font-size:14.5px;color:var(--soft)}
.q.sm{font-size:16px}
.sum.pls li{font-size:15px;padding:8px 12px}
.eq{font-weight:500;white-space:nowrap}
@media (max-width:560px){.tcards{grid-template-columns:1fr}.tcard{min-height:0}.trk .lbl{display:none}.trk{padding:0 10px}}
.tcard{flex:initial}
.btn.sm{flex:0 0 auto}
.note.step{background:#f2f7f5;color:var(--ink2);border:1px solid #d7e8e1}
.note.step .i{color:var(--mintdk)}
.endsum{display:flex;flex-direction:column;gap:8px}
.sum{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.sum li{display:flex;gap:10px;align-items:flex-start;background:#f6f8fb;border-radius:14px;padding:10px 12px}
.sum li .i{color:var(--mintdk);margin-top:.2em}
.gwrap.one{grid-template-columns:1fr}
@media (max-width:560px){.tabs.t5{grid-template-columns:repeat(5,1fr)}}

/* tracks-depth v1 (shared look for the 10 bio sims; Nov 11) */
#start.start{position:relative;isolation:isolate;overflow:hidden;border:0;padding-top:170px;box-shadow:0 2px 6px rgba(20,40,60,.08),0 18px 40px rgba(20,40,60,.16);--trkbg:url(img/start-bg.webp)}
#start.start::before{content:"";position:absolute;inset:-8px;z-index:-2;background:var(--trkbg) center 30%/cover no-repeat;filter:saturate(1.05)}
#start.start::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 22%,rgba(246,249,248,.70) 48%,rgba(246,249,248,.90) 70%,rgba(246,249,248,.94) 100%)}
#start .herot{align-self:stretch;display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:16px;padding:12px 16px;box-shadow:0 6px 18px rgba(20,40,60,.14)}
#start .herot h2{margin-top:0}
#start .tchoose h3{font-size:19px;font-weight:700}
#start .tcards{gap:14px}
#start .tcard{position:relative;border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:14px 16px;min-height:88px;align-items:center;
  background:linear-gradient(165deg,#ffffff 0%,#f8fbfa 60%,#eff5f3 100%);
  box-shadow:0 1px 2px rgba(20,40,60,.08),0 10px 24px rgba(20,40,60,.14);transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
#start .tcard:hover,#start .tcard.on{transform:translateY(-3px);box-shadow:0 2px 4px rgba(20,40,60,.10),0 16px 34px rgba(20,40,60,.20);border-color:#3f9a86}
#start .tcard .ti{width:58px;height:58px;border-radius:16px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.06),0 4px 10px rgba(20,40,60,.12)}
#start .tcard .ti .i{width:30px;height:30px;stroke-width:2.1}
#start .tcard[data-track="basic"] .ti{background:linear-gradient(145deg,#e9f6f0,#bfe3d4);color:#2a6f60}
#start .tcard[data-track="adv"] .ti{background:linear-gradient(145deg,#fdf1e2,#f3cf9f);color:#9a5a12}
#start .tcard[data-track="adv"]:hover,#start .tcard[data-track="adv"].on{border-color:#c98a3a}
#start .tcard b{font-size:18.5px}
#start .tnote{color:#4a5470}
@media (max-width:560px){#start.start{padding-top:150px}#start .tcard{min-height:78px}#start .tcard .ti{width:50px;height:50px}#start .herot{padding:11px 13px}}
@media (prefers-reduced-motion:reduce){#start .tcard{transition:none}#start .tcard:hover{transform:none}}
#start.start{max-width:780px}
#start.start::before{inset:0;background:#f6f9f8 var(--trkbg) center top/100% auto no-repeat}
@media (max-width:560px){#start.start::before{background-size:auto 250px}}

/* ===== illustrated scene v4 (Nov 12): food web the students build, scene canvas, guide, zoom ===== */
.stagetop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stagetop .progl{flex:1;min-width:0}
.zm{font:inherit;font-weight:500;font-size:15px;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--okb);background:var(--okbg);color:var(--mintdk);cursor:pointer}
.zm:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
canvas#cv{aspect-ratio:3/2!important;background:#cfe0d6}
.web{padding:0!important}
.scn{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#cfe0d6;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.scn .sbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.scn .arr{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scn .nds{position:absolute;inset:0;pointer-events:none}
.nd{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:0;background:none;padding:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.nd img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));transition:transform .18s ease,filter .18s ease}
.nd.tr{border-radius:50%}
.nd.tr .hot{position:absolute;inset:6%;border-radius:50%;border:3px dashed rgba(255,255,255,0);transition:border-color .2s,box-shadow .2s}
.nd.tr:hover .hot{border-color:rgba(255,255,255,.75)}
.nd .lb{position:absolute;left:50%;top:100%;transform:translate(-50%,2px);white-space:nowrap;background:rgba(255,255,255,.95);color:var(--ink);border-radius:999px;padding:2px 10px;font-size:14.5px;font-weight:500;box-shadow:0 2px 6px rgba(0,0,0,.22);border:2px solid transparent;line-height:1.35}
.nd.tr .lb{top:auto}
.nd.sel img{transform:scale(1.12);filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 14px var(--mint))}
.nd.sel .hot{border-color:#fff;box-shadow:0 0 0 4px rgba(95,174,156,.75),inset 0 0 30px rgba(255,255,255,.35)}
.nd.sel .lb{background:var(--mint);color:#fff}
.nd.xn{animation:popin .6s ease both}
@keyframes popin{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.nd.rp .lb{border-color:#3f6420;background:#e8f4dc}.nd.rc .lb{border-color:#2f5b93;background:#e3eefb}.nd.rd .lb{border-color:#8a5a12;background:#fbefdc}
.nd.rp .lb::after{content:" · יצרן";color:#3f6420;font-weight:700}.nd.rc .lb::after{content:" · צרכן";color:#2f5b93;font-weight:700}.nd.rd .lb::after{content:" · מפרק";color:#8a5a12;font-weight:700}
.nd.rp img{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px #b7e08a) drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.nd.rc img{filter:drop-shadow(0 0 6px #9cc3f2) drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.nd.rd img{filter:drop-shadow(0 0 6px #f0c27a) drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.nd.tr.rp .hot{border:4px solid #8cc152;border-style:solid}.nd.tr.rc .hot{border:4px solid #5b8fd6}
.nd.ok .lb{box-shadow:0 0 0 3px #5fae9c,0 2px 6px rgba(0,0,0,.2)}
.nd.no .lb{box-shadow:0 0 0 3px #e0a93a,0 2px 6px rgba(0,0,0,.2);background:#fff6e2}
.ar path{fill:none}
.ar .halo{stroke:rgba(255,255,255,.75);stroke-width:11;stroke-linecap:round}
.ar .ln{stroke:#2f7565;stroke-width:5;stroke-linecap:round}
.ar .flow{stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:0.1 16;animation:flow 1.1s linear infinite}
.ar .hd{fill:#2f7565;stroke:rgba(255,255,255,.85);stroke-width:2;stroke-linejoin:round}
.ar .hit{stroke:transparent;stroke-width:26;pointer-events:stroke;cursor:pointer}
.ar.lk .hit{pointer-events:none}
.ar.dm .ln,.ar.dm .hd{stroke:#8a5a12}.ar.dm .hd{fill:#8a5a12;stroke:rgba(255,255,255,.85)}
.ar.mn .ln{stroke:#6a6f2a}.ar.mn .hd{fill:#6a6f2a;stroke:rgba(255,255,255,.85)}
.ar.f-ok .ln{stroke:#2e8a6c}.ar.f-ok .hd{fill:#2e8a6c}
.ar.dm.f-ok .ln{stroke:#8a5a12}.ar.dm.f-ok .hd{fill:#8a5a12}.ar.mn.f-ok .ln{stroke:#6a6f2a}.ar.mn.f-ok .hd{fill:#6a6f2a}
.ar.f-rev .ln{stroke:#e08a1e}.ar.f-rev .hd{fill:#e08a1e}.ar.f-rev .halo{stroke:rgba(255,236,200,.9)}
.ar.f-no .ln{stroke:#c8573f;stroke-dasharray:10 8}.ar.f-no .hd{fill:#c8573f}.ar.f-no .flow{display:none}
.ar.tmp .ln{stroke:var(--mint);stroke-dasharray:8 8;stroke-width:4}
@keyframes flow{to{stroke-dashoffset:-16.1}}
.pop{position:absolute;z-index:5;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 10px 28px rgba(20,40,60,.3);min-width:220px}
.pop p{margin:0 0 8px;font-weight:500}
.pop .pb{display:flex;gap:6px}
.pop button{font:inherit;font-weight:500;flex:1;min-height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;cursor:pointer;font-size:16px}
.pop .rp{border-color:#8cc152;color:#3f6420}.pop .rc{border-color:#5b8fd6;color:#2f5b93}.pop .rd{border-color:#e0a93a;color:#8a5a12}
.pop button[aria-pressed="true"]{color:#fff}.pop .rp[aria-pressed="true"]{background:#3f6420}.pop .rc[aria-pressed="true"]{background:#2f5b93}.pop .rd[aria-pressed="true"]{background:#8a5a12}
.obs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.obs li{display:flex;align-items:center;gap:10px;background:#f6f9f7;border:1px solid #e1ece6;border-radius:14px;padding:6px 10px 6px 8px;font-size:16px}
.obs .th{flex:none;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff 0,#e6f0ea 70%);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.12)}
.obs .th img{width:84%;height:84%;object-fit:contain}
.cnt{color:var(--soft);font-size:15px;margin-inline-end:auto}
.guide{display:flex;align-items:flex-end;gap:10px;padding:8px 14px 10px;background:linear-gradient(180deg,#f2f8f5,#fff);border-top:1px solid var(--line)}
.guide img{flex:none;width:64px;height:84px;object-fit:cover;object-position:50% 0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.guide .bub{position:relative;margin:0 0 10px;background:#fff;border:1.5px solid var(--okb);border-radius:16px;padding:9px 13px;font-size:16px;line-height:1.45;box-shadow:0 2px 8px rgba(40,80,70,.08);flex:1;min-height:44px}
.guide .bub::before{content:"";position:absolute;bottom:12px;right:-8px;width:14px;height:14px;background:#fff;border-right:1.5px solid var(--okb);border-top:1.5px solid var(--okb);transform:rotate(45deg)}
.guide .bub:empty{display:none}
/* graph legend with mini soil views */
#leg{display:flex;flex-wrap:wrap;gap:10px}
#leg .lg{display:flex;align-items:center;gap:10px;background:#f7faf9;border:1px solid #e1ece6;border-radius:16px;padding:6px 12px 6px 8px}
#leg canvas.mi{width:64px;height:64px;flex:none}
#leg .lt{display:flex;flex-direction:column;line-height:1.3}
#leg .lt b{font-weight:500;display:inline-flex;align-items:center;gap:6px}
#leg .lt i{display:inline-block;width:18px;height:6px;border-radius:3px}
#leg .lt small{color:var(--soft);font-size:14px}
#graph .ghead{position:relative;overflow:hidden;border-radius:14px;margin-bottom:10px;padding:26px 16px 12px;background:#cfe0d6 url(img/scene.webp?v=4) center 62%/cover no-repeat}
#graph .ghead::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55))}
#graph .ghead h2{position:relative;display:inline-block;margin:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 14px;border-radius:12px;font-size:20px}
canvas#gc{border-radius:14px}
/* zoom: the scene takes the screen; instructions and graph hide */
body.zoom .side,body.zoom #graph,body.zoom .tblw,body.zoom .foot,body.zoom header.top .tabs{display:none!important}
body.zoom .lab{grid-template-columns:1fr!important}
body.zoom .scn,body.zoom canvas#cv{aspect-ratio:auto!important;height:calc(100vh - 250px);min-height:300px}
@media (max-width:560px){
  .scn{aspect-ratio:8/7}canvas#cv{aspect-ratio:8/7!important}
  .nd .lb{font-size:12.5px;padding:1px 7px}
  .zm{min-height:38px;padding:0 10px;font-size:14px}
  .guide{padding:6px 8px 8px;gap:6px}.guide img{width:48px;height:64px}.guide .bub{font-size:15px;padding:7px 10px}
  .obs li{font-size:15px}.obs .th{width:44px;height:44px}
  .pop{min-width:0;width:calc(100% - 16px);left:8px!important}
  #leg canvas.mi{width:54px;height:54px}
  body.zoom .scn,body.zoom canvas#cv{height:calc(100vh - 230px)}
}
@media (prefers-reduced-motion:reduce){.ar .flow{animation:none}.nd.xn{animation:none}}
.nd.up .lb{top:auto;bottom:100%;transform:translate(-50%,-2px)}
.ar.au .halo{stroke-width:6;stroke:rgba(255,255,255,.45)}.ar.au .ln{stroke-width:2.5;opacity:.75}.ar.au .flow{stroke-width:2.5;opacity:.7}.ar.au .hd{transform-box:fill-box;transform-origin:center;transform:scale(.7);opacity:.8}
.nd.done img{cursor:default}
@media (max-width:560px){.nd .lb{font-size:12px;padding:1px 7px}.nd.rp .lb::after,.nd.rc .lb::after,.nd.rd .lb::after{content:""}
.nd.rp .lb::before,.nd.rc .lb::before,.nd.rd .lb::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:4px;vertical-align:0}
.nd.rp .lb::before{background:#3f6420}.nd.rc .lb::before{background:#2f5b93}.nd.rd .lb::before{background:#8a5a12}}
.rkey{display:flex;flex-wrap:wrap;gap:6px}.rkey span{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;border-radius:999px;padding:2px 10px;border:2px solid}
.rkey .p{border-color:#3f6420;background:#e8f4dc;color:#3f6420}.rkey .c{border-color:#2f5b93;background:#e3eefb;color:#2f5b93}.rkey .d{border-color:#8a5a12;background:#fbefdc;color:#8a5a12}
@media (max-width:560px){.scn{aspect-ratio:1/1}canvas#cv{aspect-ratio:1/1!important}.nd.tr.rp .hot,.nd.tr.rc .hot{border-width:3px;opacity:.8}}
.scn .lbs{position:absolute;inset:0;pointer-events:none;z-index:3}
.scn .lbs .lb{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;white-space:nowrap;background:rgba(255,255,255,.95);color:var(--ink);border-radius:999px;padding:2px 10px;font-size:14.5px;font-weight:500;box-shadow:0 2px 6px rgba(0,0,0,.22);border:2px solid transparent;line-height:1.35}
.lbs .lb.sel{background:var(--mint);color:#fff}
.lbs .lb.rp{border-color:#3f6420;background:#e8f4dc}.lbs .lb.rc{border-color:#2f5b93;background:#e3eefb}.lbs .lb.rd{border-color:#8a5a12;background:#fbefdc}
.lbs .lb.rp::after{content:" · יצרן";color:#3f6420;font-weight:700}.lbs .lb.rc::after{content:" · צרכן";color:#2f5b93;font-weight:700}.lbs .lb.rd::after{content:" · מפרק";color:#8a5a12;font-weight:700}
.lbs .lb.ok{box-shadow:0 0 0 3px #5fae9c,0 2px 6px rgba(0,0,0,.2)}.lbs .lb.no{box-shadow:0 0 0 3px #e0a93a,0 2px 6px rgba(0,0,0,.2);background:#fff6e2}
.pop{z-index:6}
@media (max-width:560px){.scn .lbs .lb{font-size:12px;padding:1px 7px}.lbs .lb.rp::after,.lbs .lb.rc::after,.lbs .lb.rd::after{content:""}
 .lbs .lb.rp::before,.lbs .lb.rc::before,.lbs .lb.rd::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:4px}
 .lbs .lb.rp::before{background:#3f6420}.lbs .lb.rc::before{background:#2f5b93}.lbs .lb.rd::before{background:#8a5a12}
 .ar .halo{stroke-width:7}.ar .ln{stroke-width:3.2}.ar .flow{stroke-width:3;stroke-dasharray:0.1 12}.ar.au .ln{stroke-width:1.8}.ar.au .halo{stroke-width:4}}
@keyframes flow2{to{stroke-dashoffset:-12.1}}@media (max-width:560px){.ar .flow{animation-name:flow2}}

/* v5: gradual field notes */
.obs.fnotes li{transition:background .3s,border-color .3s}
.obs.fnotes li.dn{opacity:.78;font-size:15px;padding:4px 10px 4px 8px}
.obs.fnotes li.dn .th{width:40px;height:40px}
.obs.fnotes li .ck{flex:none;margin-inline-start:auto;color:#2e8a6c;width:20px;height:20px}
.obs.fnotes li.cur{background:#fffbea;border:2px solid #e9c46a;box-shadow:0 4px 14px rgba(140,100,20,.14);font-size:17px;animation:noteIn .5s ease both}
@keyframes noteIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.obs.fnotes li.cur .th{width:64px;height:64px}
.obs.fnotes li.cur.dn{background:#eef8f2;border-color:#9fd3bd;opacity:1}
.obs.fnotes .tg{display:block;font-size:12.5px;font-weight:700;color:#8a5a12;letter-spacing:.2px;margin-bottom:1px}
.obs.fnotes li.cur.dn .tg{color:#2e8a6c}
.obs.fnotes li.info{background:#f2f8ec;border-color:#d7e8c6}
.ar.tw{animation:twfade 2.6s ease forwards}
@keyframes twfade{0%,70%{opacity:1}100%{opacity:0}}
.nd img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.28)) drop-shadow(0 5px 8px rgba(0,0,0,.22))}
canvas#cv:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
@media (max-width:560px){.obs.fnotes li.cur{font-size:15.5px}.obs.fnotes li.cur .th{width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){.obs.fnotes li.cur{animation:none}}