:root { --bg: #f7f4ee; --card: #fff; --text: #2b2b26; --muted: #7b7b6d; --border: rgba(43,43,38,0.08); --teal:#2f7a63; --teal-light:#e6f2ec; --amber:#9a6b28; --amber-light:#f8efdf; --coral:#a15540; --coral-light:#f8eae4; --purple:#5f57a6; --purple-light:#eeecfa; --blue:#3f6f9e; --blue-light:#e9f0f7; --teal-soft:#8fbfae; --amber-soft:#d9b782; --coral-soft:#d8a794; --purple-soft:#a9a3d6; --blue-soft:#9dbcd8; --shadow: 0 1px 2px rgba(43,43,38,0.05), 0 8px 24px rgba(43,43,38,0.06); --shadow-hover: 0 4px 10px rgba(43,43,38,0.07), 0 16px 36px rgba(43,43,38,0.10); --shadow-lift: 0 2px 6px rgba(43,43,38,0.06), 0 12px 28px rgba(43,43,38,0.08); --r:14px; --ease: cubic-bezier(.22,.61,.36,1); --grad-teal: linear-gradient(135deg,#2f7a63,#3d9c80); } *{box-sizing:border-box;margin:0;padding:0;} *{scroll-behavior:smooth;} ::selection{background:var(--teal-soft);color:#1c2e28;} :focus-visible{outline:2px solid var(--teal-soft);outline-offset:2px;border-radius:4px;} /* The root element must carry an OPAQUE background. Chrome uses the root's own background colour as the fill for GPU tiles it hasn't rasterised yet during a scroll; with a transparent those tiles flash the compositor's default placeholder (magenta/pink) around every card before the page colour repaints. Setting it here (not only on ) gives the root layer an opaque hint. */ html{background:var(--bg);} body{font-family:'Heebo',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:16px;line-height:1.7;direction:rtl;} .nav{background:var(--text);padding:0 2rem;display:flex;align-items:center;position:sticky;top:0;z-index:100;height:56px;overflow-x:auto;gap:0;box-shadow:0 4px 18px rgba(0,0,0,.12);} .nav.subnav{background:#3a3a33;height:48px;position:sticky;top:56px;z-index:99;box-shadow:0 3px 12px rgba(0,0,0,.08);} .nav-title{font-family:'Heebo',sans-serif;color:#fff;font-size:1.05rem;font-weight:600;white-space:nowrap;margin-left:1.5rem;flex-shrink:0;letter-spacing:.2px;} .nav-title span{color:#a8dcc8;} .nav-btn{background:none;border:none;color:rgba(255,255,255,0.55);font-family:'Heebo',sans-serif;font-size:13px;padding:0 14px;height:56px;cursor:pointer;white-space:nowrap;transition:color .2s var(--ease),border-bottom-color .2s var(--ease),background .2s var(--ease);border-bottom:2px solid transparent;flex-shrink:0;} .nav.subnav .nav-btn{height:48px;font-size:12.5px;} .nav-btn:hover{color:rgba(255,255,255,0.9);background:rgba(255,255,255,.05);} .nav-btn.active{color:#a8dcc8;border-bottom-color:#a8dcc8;} .nav-sep{width:1px;height:24px;background:rgba(255,255,255,.18);margin:0 4px;flex-shrink:0;} .page{display:none;padding:2rem;max-width:960px;margin:0 auto;} .page.active{display:block;} .hero{text-align:center;padding:3rem 1rem 2rem;max-width:700px;margin:0 auto 2.5rem;} .hero h1{font-family:'Heebo',sans-serif;font-weight:700;font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.25;margin-bottom:.75rem;letter-spacing:-.3px;} .hero h1 em{background:var(--grad-teal);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;} .hero p{color:var(--muted);font-size:1.05rem;max-width:520px;margin:0 auto 1.5rem;} .lesson-kicker{font-size:.78rem;color:var(--teal);font-weight:700;margin-bottom:.35rem;letter-spacing:.3px;text-transform:uppercase;} .topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:2rem;} .topic-card{background:var(--card);border-radius:var(--r);padding:1.25rem;cursor:pointer;border:1.5px solid transparent;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);box-shadow:var(--shadow);text-align:right;} .topic-card:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--shadow-hover);border-color:rgba(43,43,38,.06);} .topic-card.t1{border-top:4px solid var(--teal-soft);} .topic-card.t2{border-top:4px solid var(--amber-soft);} .topic-card.t3{border-top:4px solid var(--purple-soft);} .topic-card.t4{border-top:4px solid var(--coral-soft);} .topic-card.t5{border-top:4px solid var(--blue-soft);} .topic-num{font-size:11px;font-weight:600;margin-bottom:.4rem;} .t1 .topic-num{color:var(--teal);} .t2 .topic-num{color:var(--amber);} .t3 .topic-num{color:var(--purple);} .t4 .topic-num{color:var(--coral);} .t5 .topic-num{color:var(--blue);} .topic-card h3{font-size:.95rem;font-weight:600;margin-bottom:.35rem;} .topic-card p{font-size:.82rem;color:var(--muted);line-height:1.5;} .sec-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.75rem;} .sec-dot{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;margin-top:2px;box-shadow:0 2px 8px rgba(43,43,38,.06);} .sec-dot.teal{background:var(--teal-light);} .sec-dot.amber{background:var(--amber-light);} .sec-dot.purple{background:var(--purple-light);} .sec-dot.coral{background:var(--coral-light);} .sec-dot.blue{background:var(--blue-light);} .sec-title{font-family:'Heebo',sans-serif;font-weight:600;font-size:1.5rem;line-height:1.3;text-align:right;} .sec-sub{color:var(--muted);font-size:.88rem;margin-top:3px;text-align:right;} .card{background:var(--card);border-radius:var(--r);padding:1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow);border:1px solid var(--border);transition:box-shadow .22s var(--ease);} .card:hover{box-shadow:var(--shadow-lift);} .card h4{font-size:.95rem;font-weight:600;margin-bottom:.75rem;} .info-box{border-radius:8px;padding:1rem 1.25rem;margin-bottom:1rem;font-size:.9rem;line-height:1.65;} .info-box.teal{background:var(--teal-light);border-right:3px solid var(--teal-soft);} .info-box.amber{background:var(--amber-light);border-right:3px solid var(--amber-soft);} .info-box.purple{background:var(--purple-light);border-right:3px solid var(--purple-soft);} .info-box.coral{background:var(--coral-light);border-right:3px solid var(--coral-soft);} .info-box.blue{background:var(--blue-light);border-right:3px solid var(--blue-soft);} .info-box strong{font-weight:600;} /* ── TYPESET EQUATIONS (KaTeX) ─────────────────────────────────────────── Lecture-slide look: a light inset panel (never the old black code box), with real math typeset by KaTeX. Markup: an .eqbox holding .eq-line rows, optional .eq-head connectors and an .eq-legend of variable definitions. */ /* any KaTeX run sits inside RTL Hebrew text — force LTR internally and isolate it, so its atoms keep left-to-right order and the run as a whole is placed as a neutral unit by the surrounding RTL flow (no mirroring) */ .katex{direction:ltr;unicode-bidi:isolate;} .eqbox{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:1.15rem 1.35rem;margin:.85rem 0;} .eqbox .katex{font-size:1.2rem;color:var(--text);} /* slide-sized math */ .eq-line{display:flex;align-items:center;justify-content:center;gap:.6rem 1rem;flex-wrap:wrap;text-align:center;padding:.15rem 0;} .eq-line + .eq-line{margin-top:.7rem;} .eq-line .eq-math{direction:ltr;} /* Hebrew note sitting beside an equation (was the grey "# comment") */ .eq-note{font-size:.82rem;color:var(--muted);line-height:1.5;} /* a Hebrew connector between equations, e.g. "לאחר אינטגרציה" */ .eq-head{font-size:.84rem;font-weight:600;color:var(--muted);text-align:center;margin:.9rem 0 .55rem;padding-top:.7rem;border-top:1px dashed var(--border);} .eq-head:first-child{margin-top:0;padding-top:0;border-top:none;} /* variable key: term = meaning, one per line, right-aligned Hebrew */ .eq-legend{display:flex;flex-direction:column;gap:.4rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--border);} .eq-legend:first-child{margin-top:0;padding-top:0;border-top:none;} .eq-def{display:flex;align-items:baseline;gap:.55rem;font-size:.86rem;color:var(--muted);} .eq-def .term{direction:ltr;flex:0 0 auto;} .eq-def .term .katex{font-size:1rem;color:var(--text);} /* two-row "label = value" solve block — y-intercept and slope, aligned so the equals signs and values line up in columns (like the lecture slide) */ .eq-solve{display:grid;grid-template-columns:auto auto auto;column-gap:.6rem;row-gap:.55rem;justify-content:center;align-items:baseline;direction:rtl;margin-top:.4rem;} .eq-solve .s-lbl{text-align:right;font-size:.9rem;color:var(--text);} .eq-solve .s-eq{color:var(--muted);} .eq-solve .s-val{direction:ltr;} /* a Hebrew sentence carrying inline math tokens (conditions, results) */ .eq-text{text-align:center;font-size:.9rem;line-height:2;color:var(--text);} /* inline math inside an RTL Hebrew sentence must stay an isolated LTR run, or KaTeX's atoms get reordered/mirrored by the surrounding direction */ .eq-text .katex{font-size:1.02rem;color:var(--text);direction:ltr;unicode-bidi:isolate;display:inline-block;} .eq-text + .eq-text{margin-top:.35rem;} .eq-text.ltr{direction:ltr;} /* pure math-flow lines (no Hebrew narrative) */ /* highlighted result line — standard-sized, calm amber (not oversized/heavy) */ .eq-line.result,.eq-text.result{background:var(--amber-light);border-radius:8px;padding:.45rem .8rem;color:var(--amber);font-weight:500;font-size:.9rem;} .eq-text.result .katex{color:var(--amber);font-size:1rem;} /* legacy fallback: if any old .formula slips through, keep it light — never black */ .formula{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:1rem 1.25rem;font-family:'DM Mono',monospace;font-size:.85rem;line-height:1.9;margin:.75rem 0;direction:ltr;text-align:left;white-space:pre;overflow-x:auto;} .formula .comment{color:var(--muted);} /* ---- SIDE-BY-SIDE COMMUNITY BUILDER ---- */ .comm-side{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:1rem;} /* Grid items default to min-width:auto, so wide content (the Shannon table) would stretch the track and push the whole RTL page sideways. */ .comm-side > *{min-width:0;} .comm-panel{border:1px solid var(--border);border-radius:10px;padding:1rem;background:var(--bg);} .comm-panel h5{font-size:.82rem;font-weight:600;margin-bottom:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px;} .comm-panel h5 .badge{width:10px;height:10px;border-radius:50%;display:inline-block;} .sp-slider-row{display:flex;align-items:center;gap:8px;margin-bottom:.45rem;} .sp-slider-row .sp-label{display:flex;align-items:center;gap:5px;font-size:.78rem;min-width:86px;flex-shrink:0;} .sp-slider-row .sp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;} .sp-slider-row .sp-emoji{font-size:.95rem;line-height:1;flex-shrink:0;} .sp-slider-row input[type=range]{flex:1;accent-color:var(--teal);height:3px;cursor:pointer;direction:ltr;min-width:60px;} .sp-slider-row .sp-val{font-size:.75rem;font-weight:600;min-width:22px;text-align:left;font-family:'DM Mono',monospace;direction:ltr;} .sp-slider-row .sp-name{font-size:.78rem;} /* Real-data rows: the slider becomes a read-only gauge of the measured value. Latin binomials need more room than the Hebrew invertebrate names, and they must not be mirrored by the RTL page. */ .sp-slider-row.locked .sp-label{min-width:132px;} .sp-slider-row.locked .sp-name{direction:ltr;unicode-bidi:isolate;font-style:italic;font-size:.72rem;} .sp-slider-row.locked input[type=range]{cursor:default;opacity:.75;accent-color:var(--muted);} /* Toy vs real-data switch */ .pill-switch{display:inline-flex;gap:4px;padding:4px;background:var(--bg);border:1px solid var(--border);border-radius:999px;margin-bottom:.85rem;} .pill-btn{font-family:'Heebo',sans-serif;font-size:.82rem;font-weight:500;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:6px 16px;cursor:pointer;transition:background .15s,color .15s;} .pill-btn:hover{color:var(--text);} .pill-btn.active{background:var(--teal);color:#fff;font-weight:600;} .src-note{font-size:.75rem;line-height:1.7;color:var(--muted);background:var(--bg);border:1px dashed var(--border);border-radius:8px;padding:.6rem .8rem;margin-bottom:.75rem;} .src-note strong{color:var(--text);} .ltr-inline{direction:ltr;unicode-bidi:isolate;} /* HABITAT GRID — dots arranged in a grid-like square */ .habitat-grid{display:grid;grid-template-columns:repeat(auto-fill,22px);gap:3px;padding:8px;background:#fff;border-radius:8px;border:1px solid var(--border);min-height:80px;margin:.5rem 0;} /* one sampled individual: a tinted disc in the species colour carrying its glyph */ .h-dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;border:1.5px solid transparent; display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;user-select:none;} .metrics-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;margin-bottom:.75rem;} .metric{background:var(--bg);border-radius:8px;padding:.6rem .8rem;text-align:center;} .metric .m-label{font-size:10px;color:var(--muted);margin-bottom:3px;} .metric .m-val{font-size:1.15rem;font-weight:600;font-family:'DM Mono',monospace;} .metric .m-val.teal{color:var(--teal);} .metric .m-val.amber{color:var(--amber);} .metric .m-val.purple{color:var(--purple);} .metric .m-val.coral{color:var(--coral);} /* COMPETITION TYPES — two labelled axes, each with its two named types */ .ctype-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .ctype-col{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;} .ctype-head{font-size:.84rem;font-weight:600;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);} .ctype-item{display:flex;gap:10px;align-items:flex-start;} .ctype-item + .ctype-item{margin-top:.7rem;} .ctype-item p{font-size:.8rem;line-height:1.6;color:var(--muted);} .ctype-item p strong{color:var(--text);font-weight:600;} .ctype-tag{flex:0 0 auto;width:82px;text-align:center;font-size:.78rem;font-weight:600;line-height:1.3;padding:5px 6px;border-radius:6px;} .ctype-tag small{display:block;font-weight:400;font-size:.68rem;opacity:.7;direction:ltr;} .ctype-tag.amber{background:var(--amber-light);color:var(--amber);border:1px solid rgba(154,107,40,.35);} .ctype-tag.purple{background:var(--purple-light);color:var(--purple);border:1px solid rgba(95,87,166,.35);} /* HEBREW FRACTION — a formula whose terms are words, so it must stay RTL */ .frac-box{display:flex;direction:ltr;align-items:center;justify-content:center;gap:.7rem;background:var(--bg);border-radius:8px;padding:1rem;margin:.75rem 0 1rem;} .frac-lhs{font-family:'DM Mono',monospace;font-size:1.1rem;unicode-bidi:isolate;} .frac{text-align:center;font-size:.84rem;} .frac .num,.frac .den{display:block;padding:.3rem .6rem;} .frac .num{border-bottom:1.5px solid var(--text);} /* RESOURCE WEB — which resources each species uses, and which are shared */ .res-web{display:grid;grid-template-columns:104px repeat(6,1fr);gap:4px;margin-top:1rem;} .res-web .rw-lab{display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;} .res-web .rw-cell{text-align:center;padding:5px 2px;border-radius:6px;background:var(--bg);font-size:.68rem;line-height:1.25;color:var(--muted);} .res-web .rw-cell.head{background:none;} .res-web .rw-cell .ico{display:block;font-size:1.05rem;line-height:1.3;} .res-web .rw-cell.use1{background:var(--coral-light);color:var(--coral);font-weight:600;} .res-web .rw-cell.use2{background:var(--purple-light);color:var(--purple);font-weight:600;} .res-web .rw-cell.both{background:var(--amber-light);color:var(--amber);font-weight:600;} .res-web .rw-cell.off{opacity:.4;} @media(max-width:640px){ .ctype-grid{grid-template-columns:1fr;} .res-web{grid-template-columns:74px repeat(6,1fr);gap:3px;} } /* COMPARE TABLE */ .comp-table{width:100%;border-collapse:collapse;font-size:.85rem;} .comp-table th{text-align:right;padding:8px 12px;background:var(--bg);font-weight:600;font-size:.8rem;color:var(--muted);} .comp-table td{padding:8px 12px;border-bottom:1px solid var(--border);text-align:right;} .comp-table tr:last-child td{border-bottom:none;} /* SPECIES-AREA RELATIONSHIP — two schematic panels side by side */ .sar-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .sar-panel{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.85rem;} .sar-cap{font-size:.78rem;color:var(--muted);text-align:center;margin-bottom:.5rem;} .sar-chart{height:200px;position:relative;} .sar-eq{direction:ltr;text-align:center;font-family:'DM Mono',monospace;font-size:.82rem;color:var(--coral);margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border);} @media(max-width:700px){.sar-panels{grid-template-columns:1fr;}} /* LIGHT VARIANT OF .formula — same layout, page-toned instead of black */ .formula-light{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:1rem 1.25rem;font-family:'DM Mono',monospace;font-size:.85rem;line-height:1.9;margin:.75rem 0;direction:ltr;text-align:left;white-space:pre;overflow-x:auto;} .formula-light .comment{color:var(--muted);} .formula-light .hl-h{color:var(--amber);font-weight:500;} .formula-light .hl-j{color:var(--teal);font-weight:500;} /* SHANNON CALCULATION TABLE (LTR, English headers) */ /* Scroll the wide LTR table inside its own box instead of widening the page. The species column holds Latin binomials in real-data mode, which is far wider than a phone track. */ .calc-box{direction:ltr;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.85rem;overflow-x:auto;} .calc-eq{font-family:'DM Mono',monospace;font-size:.8rem;color:var(--text);margin-bottom:.6rem;} .calc-table{width:100%;border-collapse:collapse;font-size:.78rem;font-family:'DM Mono',monospace;} .calc-table th{background:transparent;padding:5px 6px;text-align:right;font-weight:500;font-size:.72rem;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap;} .calc-table th:first-child,.calc-table td:first-child{text-align:left;} .calc-table td{padding:5px 6px;text-align:right;border-bottom:1px solid rgba(0,0,0,.04);white-space:nowrap;} .calc-table tfoot td{border-top:1px solid var(--border);border-bottom:none;font-weight:500;padding-top:6px;} .calc-table .sp-cell{display:flex;align-items:center;gap:5px;font-family:'Heebo',sans-serif;font-size:.76rem;white-space:nowrap;} .calc-table .sp-cell i{width:8px;height:8px;border-radius:50%;flex:0 0 8px;} .calc-sum{display:grid;gap:3px;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--border);font-family:'DM Mono',monospace;font-size:.78rem;} .calc-sum .lead{color:var(--amber);font-weight:500;} .calc-sum .lead-j{color:var(--teal);font-weight:500;} .mini-table{width:100%;border-collapse:collapse;font-size:.82rem;} .mini-table th,.mini-table td{padding:7px 9px;border-bottom:1px solid var(--border);text-align:right;} .mini-table th{background:var(--bg);font-size:.76rem;color:var(--muted);font-weight:600;} .mini-table tr:last-child td{border-bottom:none;} /* CONTROLS */ .control-row{display:flex;align-items:center;flex-direction:row-reverse;gap:12px;margin-bottom:.75rem;flex-wrap:wrap;} .control-row label{font-size:.85rem;color:var(--muted);min-width:110px;text-align:right;} input[type=range]{flex:1;min-width:120px;accent-color:var(--teal);height:4px;cursor:pointer;direction:ltr;} .val-badge{font-size:.82rem;font-weight:600;min-width:50px;text-align:left;font-family:'DM Mono',monospace;direction:ltr;} /* CHART */ /* clip so the canvas fill can't smear beside the card during scroll. Both the wrapper AND the