:root{ --amber:#a9720c; --amber-l:#fbf0d8; --ink:#182338; --ink2:#3d4658; --paper:#f6f4ef; --card:#ffffff; --azul:#245ba8; --azul-d:#183f74; --azul-l:#eaf1fb; --ochre:#d99a1f; --ochre-l:#fbf1da; --green:#2e7d54; --green-l:#e7f4ec; --red:#c23b2f; --red-l:#fbe9e7; --line:#e7e2d6; --muted:#6a7183; --serif:'Frank Ruhl Libre','PT Sans',Georgia,serif; --sans:'Assistant','PT Sans',system-ui,sans-serif; --shadow:0 2px 10px rgba(24,40,74,.06); --shadow-h:0 6px 20px rgba(24,40,74,.12); } *{box-sizing:border-box} body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;font-size:18px} /* PT Sans first — מציג נכון את סימני ההטעמה המשולבים בקירילית */ .ru{direction:ltr;unicode-bidi:isolate;font-family:'PT Sans','Assistant',system-ui,sans-serif} .wrap{max-width:880px;margin:0 auto;padding:0 20px} header.top{background:linear-gradient(135deg,var(--azul),var(--azul-d));color:#fff;box-shadow:var(--shadow)} header.top .bar{max-width:880px;margin:0 auto;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px} header.top .brand{font-family:var(--serif);font-weight:900;font-size:1.28rem;display:flex;align-items:center;gap:10px} header.top .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--ochre);box-shadow:0 0 0 4px rgba(217,154,31,.25)} header.top .lvl{font-size:.72rem;font-weight:700;background:rgba(255,255,255,.18);padding:3px 10px;border-radius:20px;letter-spacing:.3px} header.top button.x{background:rgba(255,255,255,.16);color:#fff;border:none;border-radius:10px;width:38px;height:38px;font-size:1.15rem;cursor:pointer;transition:.15s} header.top button.x:hover{background:rgba(255,255,255,.28)} main{padding:26px 0 80px} h1{font-family:var(--serif);font-weight:900;font-size:2rem;margin:.1em 0;letter-spacing:-.01em} h1 .ru{font-weight:700;color:var(--azul)} .sub{color:var(--muted);margin:.3em 0 1.1em;font-size:1.02rem} .hero{background:linear-gradient(120deg,#fff,var(--azul-l));border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--shadow);margin-bottom:10px} .hero .when{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:.9rem;font-weight:600;color:var(--azul-d);margin-top:8px} .links{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .links .lbl{font-size:.86rem;color:var(--muted);font-weight:700} .links a{text-decoration:none;font-size:.88rem;font-weight:700;color:var(--azul-d);background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 13px;transition:.14s} .links a:hover{background:var(--azul);color:#fff;border-color:var(--azul)} .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:16px 0;box-shadow:var(--shadow)} .btn{font-family:var(--sans);font-weight:700;font-size:1rem;border:none;border-radius:12px;padding:12px 22px;cursor:pointer;background:var(--azul);color:#fff;transition:.15s} .btn:hover{background:var(--azul-d);transform:translateY(-1px)} .btn.big{font-size:1.1rem;padding:15px 26px;width:100%} .btn.ghost{background:#fff;color:var(--azul-d);border:1.5px solid var(--line)} .btn.ghost:hover{background:var(--azul-l);border-color:var(--azul)} .btn.ochre{background:var(--ochre);color:#3a2c05}.btn.ochre:hover{filter:brightness(.96)} .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} .search{width:100%;padding:14px 18px;border:1.5px solid var(--line);border-radius:14px;font-size:1.05rem;font-family:var(--sans);background:#fff} .search:focus{outline:3px solid var(--azul-l);border-color:var(--azul)} .sec-title{font-family:var(--serif);font-size:1.4rem;margin:30px 0 4px;display:flex;align-items:center;gap:12px} .sec-title::before{content:"";width:6px;height:22px;border-radius:4px;background:var(--ochre)} .sec-title .ru{font-size:.92rem;color:var(--azul);font-weight:700} .sec-desc{color:var(--muted);font-size:.92rem;margin:2px 0 12px 18px} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px} .tile{position:relative;text-align:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;cursor:pointer;transition:.14s;box-shadow:var(--shadow);overflow:hidden} .tile::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--azul);opacity:0;transition:.14s} .tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);border-color:var(--azul)} .tile:hover::before{opacity:1} .tile .he{font-weight:800;font-size:1.08rem} .tile .ru{display:block;font-size:.9rem;color:var(--azul);margin-top:3px;font-weight:600} .tile .n{display:block;font-size:.78rem;color:var(--muted);margin-top:6px} .crumbs{font-size:.9rem;color:var(--muted);margin:2px 0 12px;display:flex;flex-wrap:wrap;gap:7px;align-items:center} .crumbs a{color:var(--azul-d);cursor:pointer;font-weight:700}.crumbs a:hover{text-decoration:underline} .crumbs .sep{color:#c9c2b3} .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)} table.voc{width:100%;border-collapse:collapse;background:#fff;font-size:1rem} table.voc th{background:var(--azul);color:#fff;padding:11px 16px;text-align:start;font-size:.86rem;font-weight:700;letter-spacing:.2px} table.voc td{padding:11px 16px;border-top:1px solid var(--line);vertical-align:middle} table.voc tr.main:nth-of-type(odd) td{background:#faf9f5} td.he-c{font-weight:700;width:32%} td.ru-c{direction:ltr;text-align:left;width:30%} td.ru-c .w{color:var(--azul-d);font-size:1.12rem;font-weight:700;font-family:'PT Sans','Assistant',sans-serif} .exbtn{display:inline-block;margin-top:5px;font-size:.76rem;font-weight:700;color:var(--azul);background:var(--azul-l);border:none;border-radius:16px;padding:2px 10px;cursor:pointer;direction:rtl} .exbtn:hover{background:#dbe7f8} .spk{border:none;background:var(--azul-l);color:var(--azul-d);border-radius:50%;width:26px;height:26px;font-size:.85rem;cursor:pointer;vertical-align:middle;padding:0;line-height:1;margin-inline-start:2px} .spk:hover{background:#dbe7f8} .spk.big{width:34px;height:34px;font-size:1.05rem} td.note-c{width:38%;font-size:.9rem;color:var(--ink2)} th.img-h{width:138px;font-size:.72rem!important;text-align:center} td.img-c{width:138px;padding:9px;text-align:center} .img-c .wimg{width:116px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#f0eee8;cursor:pointer;display:block;margin:0 auto;transition:.14s} .img-c .wimg:hover{transform:scale(1.05);box-shadow:var(--shadow-h);border-color:var(--azul)} .img-c.noimg{width:138px} #lightbox{position:fixed;inset:0;background:rgba(20,30,55,.72);display:none;align-items:center;justify-content:center;z-index:60;padding:20px} #lightbox.on{display:flex} .lb-card{position:relative;background:#fff;border-radius:18px;padding:16px;max-width:min(92vw,420px);box-shadow:var(--shadow-h);text-align:center} .lb-card img{width:100%;max-width:360px;border-radius:12px;display:block;margin:0 auto;background:#f0eee8} .lb-cap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px} .lb-ru{color:var(--azul-d);font-size:1.25rem;font-weight:800} .lb-he{font-weight:700;color:var(--ink2)} .lb-x{position:absolute;top:8px;inset-inline-end:8px;border:none;background:var(--azul-l);color:var(--azul-d);width:32px;height:32px;border-radius:50%;font-size:1rem;cursor:pointer;z-index:1} .scenebox{margin:2px 0 14px;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)} .scene{width:100%;max-height:300px;object-fit:cover;display:block;cursor:zoom-in;transition:.15s} .scene:hover{filter:brightness(1.03)} .scene.noov{cursor:default} .scene.noov:hover{filter:none} .scenebtn{display:block;width:100%;background:var(--azul);color:#fff;border:none;padding:10px;font-family:inherit;font-weight:700;font-size:.92rem;cursor:pointer;transition:.14s} .scenebtn:hover{background:var(--azul-d)} #sceneov{position:fixed;inset:0;background:rgba(15,23,42,.82);display:none;align-items:flex-start;justify-content:center;z-index:70;padding:16px;overflow:auto} #sceneov.on{display:flex} .ov-card{background:#fff;border-radius:18px;padding:14px;max-width:min(96vw,1000px);width:100%;box-shadow:var(--shadow-h);margin:auto} .ov-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap} .ov-head b{font-size:1.15rem} .ov-ctrl{display:flex;gap:6px} .ov-btn{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:6px 12px;font-family:inherit;font-weight:700;font-size:.85rem;color:var(--ink);cursor:pointer} .ov-btn.on{background:var(--azul);color:#fff;border-color:var(--azul)} .ov-btn.xbtn{color:var(--red);font-weight:800} .ov-stage{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#f7f4ec} .ov-svg{width:100%;height:auto;display:block} .ov-svg .lead-h{stroke:#fff;stroke-width:5;opacity:.9} .ov-svg .lead{stroke:#253137;stroke-width:2;opacity:.92} .ov-svg .mk-o{fill:#fff} .ov-svg .mk{fill:#d65237} .ov-svg .mk-num{fill:#fff;font-family:var(--sans);font-weight:800;font-size:13px;text-anchor:middle;display:none} .ov-svg .lbl-bg{fill:#fff;stroke:#aebbbe;stroke-width:1.5} .ov-svg .lbl-acc{fill:var(--azul)} .ov-svg .t-ru{fill:var(--azul-d);font-family:'PT Sans',var(--sans);font-weight:700;font-size:19px;text-anchor:middle;direction:ltr} .ov-svg .t-he{fill:#3d4658;font-family:var(--sans);font-weight:700;font-size:15px;text-anchor:middle} .ov-svg .lblg{cursor:pointer} .ov-svg .lblg:hover .lbl-bg{stroke:var(--azul);stroke-width:2} .ov-svg.practice .lblbox{display:none} .ov-svg.practice .lblg.reveal .lblbox{display:block} .ov-svg.practice .mk-num{display:block} .ov-svg.notrans .t-he{display:none} .ov-hint{color:var(--muted);font-size:.8rem;margin-top:8px;text-align:center} tr.exrow td{background:#fbfaf6;border-top:none;padding-top:0} .exbox{direction:ltr;text-align:left;background:var(--azul-l);border-radius:10px;padding:9px 13px;font-size:.95rem} .exbox .s{color:var(--azul-d);font-weight:700;font-family:'PT Sans','Assistant',sans-serif} .exbox .h{direction:rtl;display:block;color:var(--ink2);font-size:.88rem;margin-top:2px} .count{font-size:.82rem;color:var(--muted);font-weight:600} .res{padding:11px 6px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;cursor:pointer;border-radius:8px} .res:hover{background:var(--azul-l)} .res .ru{color:var(--azul-d);font-weight:700} .res .cat{font-size:.8rem;color:var(--muted)} .res.miss{background:var(--red-l)} .res.miss:hover{background:#f6dcd8} .empty{color:var(--muted);padding:14px 2px} .seg{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0} .seg button{flex:1;min-width:90px;padding:11px;border:1.5px solid var(--line);background:#fff;border-radius:11px;cursor:pointer;font-weight:700;color:var(--ink)} .seg button.on{background:var(--azul);color:#fff;border-color:var(--azul)} .label{font-weight:800;font-size:.8rem;letter-spacing:.4px;color:var(--ochre);text-transform:uppercase;margin:16px 0 6px} .qbar{display:flex;align-items:center;gap:14px;margin-bottom:12px} .qbar .cnt{white-space:nowrap;color:var(--muted);font-weight:700} .track{flex:1;display:flex;gap:4px}.track i{flex:1;height:7px;border-radius:4px;background:#e4ddcd} .track i.done{background:var(--azul)}.track i.cur{background:var(--ochre)} .qcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)} .qword{font-size:1.7rem;font-weight:800;text-align:center;margin:6px 0 4px} .qword.ru{color:var(--azul-d)} .qhint{text-align:center;color:var(--muted);font-size:.9rem;margin-bottom:14px} .opt{display:block;width:100%;text-align:start;background:#f5f3ee;border:2px solid transparent;border-radius:13px;padding:14px 18px;margin:9px 0;cursor:pointer;font-size:1.08rem;font-weight:600;transition:.1s} .opt.ru{direction:ltr;text-align:left;font-family:'PT Sans','Assistant',sans-serif} .opt:hover{background:#eeece5} .opt.correct{background:var(--green-l);border-color:#bfe0c8;color:var(--green)} .opt.wrong{background:var(--red-l);border-color:#ecc7c3;color:var(--red)} .opt .mk{float:inline-start;font-weight:900} input.type{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font-size:1.2rem;direction:ltr;text-align:left;font-family:'PT Sans','Assistant',sans-serif} input.type:focus{outline:3px solid var(--azul-l);border-color:var(--azul)} .fb{border-radius:13px;padding:14px 16px;margin:14px 0} .fb.ok{background:var(--green-l);border:1px solid #bfe0c8}.fb.bad{background:var(--red-l);border:1px solid #ecc7c3} .fb .big{font-weight:800}.fb .ex{display:block;margin-top:6px;font-size:.9rem;color:var(--ink2)} .navrow{display:flex;gap:10px;margin-top:18px;align-items:center}.spacer{flex:1} .scorebig{font-family:var(--serif);font-weight:900;font-size:2.8rem;text-align:center;margin:8px 0} .center{text-align:center} .weekbox{background:linear-gradient(120deg,var(--ochre-l),#fff);border:1px solid #ecd7a4;border-radius:18px;padding:22px 24px;text-align:center;box-shadow:var(--shadow)} .weekbox .kick{font-weight:800;color:#a9720c;letter-spacing:.4px;text-transform:uppercase;font-size:.8rem} .weekbox .cat{font-family:var(--serif);font-weight:900;font-size:1.7rem;margin:6px 0 2px} .weekbox .act{font-size:1.15rem;font-weight:700;color:var(--azul-d);margin-top:4px} .weekbox .dates{color:var(--muted);font-size:.92rem;margin-top:4px} .cyc{width:100%;border-collapse:collapse;background:#fff;font-size:.96rem} .cyc th{background:var(--azul);color:#fff;padding:9px 12px;text-align:start;font-size:.84rem} .cyc td{padding:9px 12px;border-top:1px solid var(--line)} .cyc tr.now td{background:var(--ochre-l);font-weight:700} .cyc tr.clk{cursor:pointer;transition:.12s} .cyc tr.clk:hover td{background:var(--azul-l)} .cyc tr.clk.now:hover td{background:#f6e6c2} .cyc td.wk{color:var(--muted);white-space:nowrap} .info{background:var(--azul-l);border:1px solid #cfe0f5;border-radius:12px;padding:12px 16px;font-size:.92rem;color:var(--azul-d);margin:10px 0} .starb{border:none;background:none;cursor:pointer;font-size:.95rem;opacity:.35;vertical-align:middle;margin-inline-start:4px;padding:0 2px;transition:.12s} .starb:hover{opacity:1;transform:scale(1.15)} .starb.on{opacity:1} /* A picture that 404s must leave an empty cell, not the browser's broken-icon and the alt text. `onerror` has always added `.noimg`, but that only set the cell's width, so the broken image stayed on the screen. Counting `naturalWidth === 0` is how you get a wrong number here: every row picture is `loading="lazy"`, and one that has not scrolled into view has not started and is not broken. Walk the page first, then ask `complete && naturalWidth === 0`. Doing that: 10 missing across four sampled chapters, and all ten are the rewritten `frustration` words, which have no pictures yet. */ .img-c.noimg img{display:none} /* The title bar is the way back to the contents. It has to look like it — a bare heading that navigates is a trap — so it carries a faint pill at rest and a stronger one under the pointer. */ header.top a.brand{color:#fff;text-decoration:none;padding:6px 12px; margin-inline-start:-12px;border-radius:12px;background:rgba(255,255,255,.09); transition:.15s;cursor:pointer} header.top a.brand:hover{background:rgba(255,255,255,.22)} .crumbs .ar{color:var(--muted);font-weight:400} /* Two modes of one topic page. It borrows the practice options' own segmented control, so there is no second thing to look at and no second thing to keep in step; only the width is its own, because two tabs stretched across 880px read as a toolbar rather than a choice. */ .modetabs{margin:10px 0 18px;max-width:420px} /* --- split by topic (tools/split_vocab_pages.mjs) --- A tile that was a