/* נוצר ב-tools/build_zh_vocab_site.mjs מ-tools/zh-words/page.css — אין לערוך. */
/* ============================================================
   טבלאות המילים — גיליון הרכיב
   ------------------------------------------------------------
   הגיליון הזה משמש שתי אריזות: את העמוד העצמאי
   (chinese-lesson/words.html) ואת עמודי האתר
   (pairs/<src>-zh/vocab-basic.html). לכן:

   · הכול תחוּם תחת .zwrap. בלי זה `header{...}` כאן היה מעצב את
     הכותרת של האתר, ו-.wrap היה מתנגש עם ה-.wrap של langflame.css.
   · אין כאן `:root`. המשתנים יושבים על .zwrap וממופים למשתני האתר
     (--paper, --ink, --line…), שמגיעים מ-styles/langflame.css באתר
     ומ-standalone.css בעמוד העצמאי. כך המצב הכהה של האתר עובד כאן
     בלי פלטה שנייה.
   · מה ששייך למעטפת של העמוד העצמאי — body, header, footer,
     הקרדיטים — נמצא ב-standalone.css ולא כאן.

   הצבעים שהם של המדור ולא של האתר (האדום הסיני, הזהב של הפין־יין)
   מוצהרים כאן, וכמו בכל האתר — פעמיים: פעם ל-[data-theme="dark"]
   ופעם בתוך שאילתת מדיה מצומצמת ל-:not([data-theme="light"]).
   ============================================================ */
  .zwrap{
    --zw-bg:var(--paper);
    --zw-card:var(--card);
    --zw-ink:var(--ink);
    --zw-dim:var(--muted);
    --zw-line:var(--line);
    /* אדום סיני — צבע ההדגשה של המדור, וגם צבע הטעות. */
    --zw-acc:#c1443b;
    --zw-acc-soft:#f6e0dd;
    /* הזהב של הפין־יין. #c99a3a המקורי נותן 2.6:1 על כרטיס לבן ונופל
       בבדיקת הניגודיות של האתר; זה הענבר של האתר, 4.3:1, ועדיין זהב. */
    --zw-gold:#a9720c;
    --zw-gold-soft:#f5ead1;
    --zw-ok:#2f6b45;
    --zw-ok-bg:#e6f2e9;
    --zw-ok-line:#9cc4a9;
    --zw-hot:#2f6b45;
    --zw-hot-ink:#fff;
    --zw-acc-ink:#fff;
    --zw-slot:#faf4e9;
    --zw-head:#faf4e9;
    --zw-seg:#f1e8d8;
    --zw-kind-bg:#e2e8f6;
    --zw-kind-ink:#39508c;
  }
  :root[data-theme="dark"] .zwrap{
    --zw-acc:#f08a7e;      --zw-acc-soft:#3a1d19;
    --zw-gold:#e8c07a;     --zw-gold-soft:#3a2d10;
    --zw-ok:#7fd9b8;       --zw-ok-bg:#12301f;  --zw-ok-line:#2f5a45;
    --zw-hot:#12301f;      --zw-hot-ink:#7fd9b8;
    --zw-acc-ink:#231512;
    --zw-slot:#232320;     --zw-head:#232320;   --zw-seg:#2b2b28;
    --zw-kind-bg:#12233a;  --zw-kind-ink:#8ab6ee;
  }
  @media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .zwrap{
    --zw-acc:#f08a7e;      --zw-acc-soft:#3a1d19;
    --zw-gold:#e8c07a;     --zw-gold-soft:#3a2d10;
    --zw-ok:#7fd9b8;       --zw-ok-bg:#12301f;  --zw-ok-line:#2f5a45;
    --zw-hot:#12301f;      --zw-hot-ink:#7fd9b8;
    --zw-acc-ink:#231512;
    --zw-slot:#232320;     --zw-head:#232320;   --zw-seg:#2b2b28;
    --zw-kind-bg:#12233a;  --zw-kind-ink:#8ab6ee;
  }}

  .zwrap{color:var(--zw-ink);line-height:1.6}
  .zwrap *{box-sizing:border-box}
  .zwrap .han{font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif}

  .zwrap .langbar{display:flex;justify-content:center;align-items:center;gap:9px;margin:0 auto 12px}
  .zwrap .langbar .lang-t{font-size:12px;color:var(--zw-dim)}

  .zwrap .tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px auto 12px}
  .zwrap .tab{
    cursor:pointer;border:1px solid var(--zw-line);background:var(--zw-card);color:var(--zw-ink);
    border-radius:999px;padding:8px 18px;font-size:15px;transition:all .15s;
    display:flex;align-items:center;gap:8px;font-family:inherit;
  }
  .zwrap .tab:hover{border-color:var(--zw-acc)}
  .zwrap .tab.active{background:var(--zw-acc);color:var(--zw-acc-ink);border-color:var(--zw-acc)}
  .zwrap .tab .th{font-family:"Noto Serif SC","Songti SC",serif;font-size:17px;opacity:.85}

  .zwrap .chapter-note{
    text-align:center;color:var(--zw-dim);font-size:13px;margin:0 0 10px;
    background:var(--zw-gold-soft);border-radius:12px;padding:6px 14px;
  }

  /* ---- כפתורי השמעה ----
     `.spk` הוא גם שם של כפתור באתר עצמו (styles/langflame.css), שקובע לו
     width/height קבועים. שם הכלל שלנו גובר על ה-padding אבל לא על המידות,
     ולכן הרמקול גלש מתוך עיגול שנשאר 24px — ובעברית הוא גלש שמאלה, החוצה.
     אז המידה נכתבת כאן במפורש והמרכוז נעשה ב-flex ולא ב-padding: כך העיגול
     עגול בשתי האריזות, ולא משנה איזה גיליון נטען לפניו. */
  .zwrap .spk{
    font:inherit;font-size:14px;line-height:1;cursor:pointer;color:var(--zw-ink);
    border:1px solid var(--zw-line);background:var(--zw-card);
    border-radius:999px;padding:0;margin-inline-start:7px;
    width:26px;height:26px;box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;
    vertical-align:middle;flex:none;
    transition:background .15s, border-color .15s, transform .1s;
  }
  .zwrap .spk:hover{background:var(--zw-acc-soft);border-color:var(--zw-acc)}
  .zwrap .spk:active{transform:scale(.9)}
  .zwrap .spk.playing{background:var(--zw-gold-soft);border-color:var(--zw-gold)}
  .zwrap .spk-lg{font-size:19px;width:34px;height:34px}

  .zwrap .pc-btn{
    font-family:inherit;cursor:pointer;border:1px solid var(--zw-acc);
    background:var(--zw-acc);color:var(--zw-acc-ink);font-weight:600;font-size:14px;
    border-radius:999px;padding:8px 18px;transition:all .15s;
  }
  .zwrap .pc-btn:hover{filter:brightness(1.06)}
  .zwrap .pc-btn[disabled]{opacity:.4;cursor:default}

  /* ---- הסרגל: בסיסית / מעמיקה ---- */

  /* ---- הטבלה ---- */

  /* ---- לוח השיבוץ ---- */

  /* הסימנים והפין־יין נקראים משמאל לימין גם בעמוד עברי. */
  /* משבצת שמולאה — נוכחת, אבל לא נקראת כמו הישג. הסלקטור נושא גם את .ok,
     כי .wg-slot.ok מוגדר לפניו ובאותה סגוליות היה מנצח. */
  @keyframes wgshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  @media (prefers-reduced-motion:reduce){.zwrap .wg-slot.bad{animation:none}}

  @media (max-width:700px){ .zwrap .wg-pools{grid-template-columns:1fr} }
  /* שורת כותרת ולא צף. float:inline-end עבד בעברית ונשבר בספרדית: כפתורים
     ארוכים יותר גלשו לשורה שנייה, הצף חרג מגובה הכותרת, ו-.wg-tiles זרם
     סביבו ברצועה צרה — האריחים הסתדרו במאונך. */
  /* בחירה בזהב, לא באדום: אדום כאן הוא צבע הטעות, ואריח נבחר באדום נקרא
     כמו שיבוץ שגוי לרגע לפני שהמשבצת נצבעת ירוק. */

  /* ---- חלונית המילה ---- */
  .zwrap .wp-overlay{position:fixed;inset:0;background:rgba(43,38,32,.55);display:flex;
    align-items:flex-start;justify-content:center;z-index:60;overflow-y:auto;padding:24px 16px}
  .zwrap .wp-overlay[hidden]{display:none}
  .zwrap .wp-box{background:var(--zw-card);border-radius:20px;padding:22px 24px;position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(560px,100%);margin:auto}
  .zwrap .wp-close{position:absolute;inset-inline-start:14px;top:12px;border:none;background:none;
    font-size:19px;color:var(--zw-dim);cursor:pointer;line-height:1}
  .zwrap .wp-close:hover{color:var(--zw-acc)}
  /* ה-✕ יושב ב-inset-inline-start, ולכן המקום שמפנים לו הוא בהתחלה. קודם
     היה padding-inline-end — הצד ההפוך, בשתי השפות. */
  .zwrap .wp-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
    padding-inline-start:26px;border-bottom:1px solid var(--zw-line);padding-bottom:12px}
  .zwrap .wp-word{font-size:44px;color:var(--zw-acc)}
  .zwrap .wp-py{font-size:24px;color:var(--zw-gold);font-weight:600;direction:ltr;unicode-bidi:isolate}
  .zwrap .wp-gloss{font-size:18px;font-weight:600}
  .zwrap .wp-lit{width:100%;font-size:13px;color:var(--zw-dim);margin-top:2px}

  .zwrap .wp-label{font-size:12px;color:var(--zw-dim);letter-spacing:.4px;margin:14px 0 6px}
  .zwrap .wp-char{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px dashed var(--zw-line)}
  .zwrap .wp-char:last-child{border-bottom:none}
  .zwrap .wp-c{font-size:34px;color:var(--zw-gold);line-height:1;min-width:44px;text-align:center}
  .zwrap .wp-cmeta{flex:1;min-width:0}
  /* inline-block ולא inline: שני ה-span סמוכים בזרימה עברית, והמרווח בין
     קטע ltr לקטע rtl נבלע כשהוא inline.
     ובלי direction:ltr — התכונה הזאת הופכת גם את משמעות margin-inline-end,
     שנפתר אז מול הכיוון של האלמנט עצמו ולא של העמוד: המרווח נפל מימין
     לתעתיק בעוד המשמעות העברית יושבת משמאלו, ו"wǒ" ו"אני" נגעו. הבידוד
     לבדו מספיק — פין־יין הוא לטינית, כלומר כיוון חזק משל עצמו. */
  .zwrap .wp-cpy{display:inline-block;font-size:16px;color:var(--zw-gold);font-weight:600;
    unicode-bidi:isolate;margin-inline-end:9px}
  .zwrap .wp-ct{font-size:15px}
  .zwrap .wp-note{margin-top:4px;font-size:13px;color:var(--zw-ink);background:var(--zw-gold-soft);
    border-radius:9px;padding:6px 10px;display:inline-block}
  .zwrap .wp-kind{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 7px;
    background:var(--zw-kind-bg);color:var(--zw-kind-ink);margin-inline-end:6px;vertical-align:1px}

  .zwrap .wp-ex{background:var(--zw-bg);border:1px solid var(--zw-line);border-radius:12px;padding:11px 13px}
  .zwrap .wp-ex-han{direction:ltr;font-size:26px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
  .zwrap .wp-ex-tr{color:var(--zw-dim);font-size:14px;margin-top:3px}
  .zwrap .wp-ex .hit{color:var(--zw-acc);font-weight:600}

  .zwrap .wp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;
    border-top:1px solid var(--zw-line);padding-top:14px}
  .zwrap .wp-stage{margin-top:12px}
  .zwrap .wp-hw{display:flex;flex-direction:column;align-items:center;gap:8px}
  .zwrap .wp-hw-stage{width:220px;height:220px;border:1px dashed var(--zw-line);border-radius:14px;background:var(--zw-card)}
  .zwrap .wp-hw-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .zwrap .wp-hw-btn{font-family:inherit;font-size:13px;cursor:pointer;border:1px solid var(--zw-line);
    background:var(--zw-card);color:var(--zw-ink);border-radius:999px;padding:6px 14px}
  .zwrap .wp-hw-btn:hover{border-color:var(--zw-acc)}
  .zwrap .wp-hw-btn.on{background:var(--zw-acc);border-color:var(--zw-acc);color:var(--zw-acc-ink)}
  .zwrap .wp-count{font-size:13px;color:var(--zw-dim);min-height:19px}

  .zwrap .wp-type{text-align:center}
  .zwrap .wp-q{font-size:16px;margin-bottom:10px}
  .zwrap .wp-q b{color:var(--zw-acc)}
  .zwrap .wp-input{font-family:inherit;font-size:19px;padding:9px 14px;border:1px solid var(--zw-line);
    border-radius:10px;width:330px;max-width:95%;text-align:center;direction:ltr;
    background:var(--zw-card);color:var(--zw-ink)}
  .zwrap .wp-input:focus{outline:none;border-color:var(--zw-acc)}
  /* שורה משלה. שתי הצהרות display סותרות השאירו כאן inline-flex, התיבה
     והשדה חלקו שורה, והרמז בשדה נחתך — בשתי השפות, וביתר שאת בספרדית. */
  .zwrap .wp-tones{display:flex;justify-content:center;font-size:13px;color:var(--zw-dim);
    margin-bottom:10px;cursor:pointer;align-items:center;gap:6px}
  .zwrap .wp-fb{margin-top:10px;font-size:15px;font-weight:600;min-height:23px}
  .zwrap .wp-fb.ok{color:var(--zw-ok)}
  .zwrap .wp-fb.no{color:var(--zw-acc)}
  .zwrap .wp-cands{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px;direction:ltr}
  .zwrap .wp-cand{position:relative;font-size:22px;padding:6px 11px;border:1px solid var(--zw-line);
    background:var(--zw-card);color:var(--zw-ink);border-radius:10px;cursor:pointer;
    font-family:"Noto Serif SC","Songti SC",serif}
  .zwrap .wp-cand:hover{border-color:var(--zw-acc)}
  .zwrap .wp-cand.correct{background:var(--zw-ok-bg);border-color:var(--zw-ok);color:var(--zw-ok)}
  .zwrap .wp-cand.wrong{background:var(--zw-acc-soft);border-color:var(--zw-acc);color:var(--zw-acc);opacity:.6}
  .zwrap .wp-locked{font-size:13px;color:var(--zw-dim);background:var(--zw-gold-soft);
    border-radius:10px;padding:9px 12px;text-align:center}

  /* ---- הפקה: לעשות במקום לשבץ ----
     תא שהופק אינו נראה כמו תא ששובץ. שיבוץ הוא זיהוי, הפקה היא הפקה,
     והלוח צריך להראות את ההבדל — אחרת "פתרתם 12/12" מתאר שני דברים
     שונים באותו מספר. */
  /* תא הצליל מחזיק גם את התעתיק וגם את ההקלטה, ולכן הוא רחב מהאחרים. */

  /* ---- וריאנט "מגירה" ---- */
  .zwrap .pc-btn.on{background:var(--zw-gold);border-color:var(--zw-gold)}

  /* רמקול דהוי במשבצת האודיו הריקה: התא נקרא כ"צליל" עוד לפני שיש בו
     משהו, ומראה שיש כאן מקום לגרור אליו או להקליט לתוכו. */

  /* ---- רשת הכתיבה 米字格 ----
     קווים מלאים לארבעת הריבועים, קווים שבורים לאלכסונים. הרשת יושבת
     מאחורי הקנבס באלמנט משלה, כי HanziWriter כותב innerHTML לתוך
     האלמנט שהוא מקבל ומוחק כל דבר אחר שיושב שם. */
  .zwrap .hw-wrap{position:relative;display:inline-block;line-height:0}
  .zwrap .hw-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .zwrap .hw-grid rect{fill:none;stroke:var(--zw-line);stroke-width:1.5}
  .zwrap .hw-grid line{stroke:var(--zw-line);stroke-width:1}
  .zwrap .hw-grid line.d{stroke-dasharray:4 4;opacity:.75}
  .zwrap .hw-opts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
    font-size:12px;color:var(--zw-dim);margin-top:6px}
  .zwrap .hw-opts label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  .zwrap .wp-hw-stage{border:none;background:none;width:auto;height:auto;display:inline-block}

  /* ---- הקלדה במשבצת עצמה ---- */

  /* ---- ההקלטה יושבת עם התעתיק, לא בתא משלה ---- */

  /* ---- הקלטה: כפתור אחד עגול, המילה לידו, הטייקים בקצה ---- */
  .zwrap .rc{display:flex;align-items:center;gap:12px;padding:12px 14px}
  .zwrap .rc-btn{flex:none;width:42px;height:42px;border-radius:50%;cursor:pointer;
    border:2px solid var(--zw-acc);background:var(--zw-card);display:flex;
    align-items:center;justify-content:center;transition:all .15s}
  .zwrap .rc-btn:hover{background:var(--zw-acc-soft)}
  .zwrap .rc-dot{width:14px;height:14px;border-radius:50%;background:var(--zw-acc);transition:all .15s}
  .zwrap .rc-btn.on{border-color:var(--zw-gold);background:var(--zw-gold-soft)}
  .zwrap .rc-btn.on .rc-dot{border-radius:3px;background:var(--zw-gold);animation:rcpulse 1s infinite}
  @keyframes rcpulse{50%{opacity:.35}}
  @media (prefers-reduced-motion:reduce){.zwrap .rc-btn.on .rc-dot{animation:none}}
  .zwrap .rc-mid{flex:1;min-width:0}
  .zwrap .rc-w{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .zwrap .rc-w b{font-size:22px;color:var(--zw-acc)}
  .zwrap .rc-py{font-size:15px;color:var(--zw-gold);font-weight:600;direction:ltr;unicode-bidi:isolate}
  .zwrap .rc-msg{font-size:12px;color:var(--zw-dim);margin-top:2px}
  .zwrap .rc-msg.ok{color:var(--zw-ok)}
  .zwrap .rc-takes{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
  .zwrap .rc-take{display:inline-flex;border:1px solid var(--zw-line);border-radius:999px;overflow:hidden}
  .zwrap .rc-take button{font-family:inherit;font-size:11px;cursor:pointer;border:none;
    background:var(--zw-card);color:var(--zw-dim);padding:4px 8px}
  .zwrap .rc-take button:hover{color:var(--zw-ink);background:var(--zw-head)}
  .zwrap .rc-take .x{border-inline-start:1px solid var(--zw-line)}

  /* ההקלטה בתוך משבצת התעתיק, בקצה שלה — לא משבצת שנייה לידה.
     המיקום נקבע פיזית ולא בתכונה לוגית, ובכוונה: המשבצת כפויה ל-ltr
     כדי שהברות של מילה אחת ייקראו משמאל לימין, ולכן inset-inline-end
     בתוכה נפתר תמיד לימין — בזמן ש"אחרי התעתיק" בעמוד עברי הוא שמאל.
     הכיוון שקובע כאן הוא של העמוד, לא של המשבצת. */
  :root[dir="rtl"] .zwrap .wg-slot.has-au{padding-right:0;padding-left:30px}
  :root[dir="rtl"] .zwrap .wg-slot.wg-chip{right:auto;left:3px}

  /* 🎙 לצד ה-🔊, שניהם בתוך משבצת התעתיק. */
  :root[dir="rtl"] .zwrap .wg-slot.has-au{padding-right:0;padding-left:56px}
  :root[dir="rtl"] .zwrap .wg-mic{right:auto;left:29px}

  /* ---- הנקודות והשלד ---- */
  .zwrap .hw-over{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  /* שכבת הדיו: מה שהאצבע מציירת ממש עכשיו. עבה, כי דק פשוט לא נראה
     על 田字格; ושחור, כי אדום כבר תפוס למשמעות "זו המשיכה הנכונה".
     כשהקו על המשיכה הוא נעלם — שם המילוי האדום הוא החיווי. */
  .zwrap .hw-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .zwrap .hw-ink .ink{
    fill:none; stroke:var(--zw-ink); stroke-width:46; opacity:0;
    stroke-linecap:round; stroke-linejoin:round;
    transition:opacity .12s linear;
  }
  .zwrap .hw-wrap.off .hw-ink .ink{opacity:.85}
  /* בכתיבה חופשית אין "על המשיכה" ו"לידה", ולכן גם אין מי שידליק את
     הדיו — והקו היה מופיע רק כשהרמת את האצבע. כאן הוא נראה תמיד, ובדיוק
     כמו הקווים שכבר נכתבו, כדי שהמעבר בסוף המשיכה לא ייראה כמו קפיצה. */
  .zwrap .hw-wrap.free .hw-ink .ink{opacity:.95; stroke-width:34}
  /* כיוון הפוך אינו "רחוק" אלא משיכה נכונה מהצד הלא נכון, ולכן היא
     מסומנת אחרת — ונאמרת במילים, כי צורת הקו לבדה לא מסגירה אותה. */
  .zwrap .hw-wrap.back .hw-ink .ink{stroke:var(--zw-gold)}
  .zwrap .hw-say{
    position:absolute; inset-inline:6px; bottom:6px; z-index:3; pointer-events:none;
    background:var(--zw-gold-soft); color:var(--zw-ink); border-radius:8px;
    padding:5px 8px; font-size:.74rem; line-height:1.25; text-align:center;
    opacity:0; transition:opacity .15s linear;
  }
  .zwrap .hw-say.on{opacity:1}
  @keyframes hw-miss{
    0%,100%{box-shadow:0 0 0 0 transparent}
    40%{box-shadow:0 0 0 3px var(--zw-acc-soft)}
  }
  .zwrap .hw-wrap.miss{animation:hw-miss .45s ease; border-radius:4px}
  @media (prefers-reduced-motion:reduce){ .zwrap .hw-wrap.miss{animation:none} }
  .zwrap .hw-over .dt{fill:var(--zw-gold);opacity:.55}
  .zwrap .hw-over .dt.first{fill:var(--zw-acc);opacity:.75}
  .zwrap .hw-over .sk{fill:none;stroke:var(--zw-line);stroke-width:14;
    stroke-linecap:round;stroke-linejoin:round}
  .zwrap .hw-wrap.skel .hw-over .sk{stroke:var(--zw-dim);opacity:.45}

  /* ---- כפתור סגירה לחלונות ---- */
  .zwrap .rc-gloss{font-size:17px;font-weight:600;color:var(--zw-ink)}
  .zwrap .rc-msg.no{color:var(--zw-acc)}

/* ============================================================
   הלוח: ארבעה שלבים, ארבע עמודות, עימוד קפוא
   ------------------------------------------------------------
   הכלל היחיד שמנהל את הגיליון הזה: **שום פעולה בלוח לא משנה
   גיאומטריה.** רוחב מוצהר לעמודה, גובה מוצהר לתא, שורת פעולות
   שמורה גם כשהיא ריקה, ואריח שנוצל מאפיר במקום להיעלם. בלי זה
   מעבר בין "ללמוד" ל"לתרגל" מקפיץ את כל המסך, וזו הסיבה היחידה
   שלא ללחוץ "ללמוד".

   הכול בתכונות לוגיות (inline-start/end), כי הדף מתהפך לפי
   dir של <html> ולא לפי גיליון שני.
   ============================================================ */
  .zwrap .zb-bar{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:12px; margin:0 0 12px;
  }
  .zwrap .zb-seg{display:inline-flex; background:var(--zw-seg); border-radius:999px; padding:3px; gap:2px; max-width:100%; overflow-x:auto; scrollbar-width:none}
  .zwrap .zb-seg::-webkit-scrollbar{display:none}
  .zwrap .zb-ph{
    font:inherit; font-size:.9rem; font-weight:700; border:0; background:none;
    color:var(--zw-dim); padding:7px 16px; border-radius:999px; cursor:pointer;
    min-height:36px; white-space:nowrap;
  }
  .zwrap .zb-ph:hover{color:var(--zw-ink)}
  .zwrap .zb-ph.on{background:var(--zw-acc); color:var(--zw-acc-ink)}
  .zwrap .zb-seg-sm .zb-ph{font-size:.82rem; padding:5px 12px; min-height:32px; font-weight:600}
  .zwrap .zb-seg-sm .zb-ph.on{background:var(--zw-card); color:var(--zw-ink)}
  .zwrap .zb-ask{display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:100%}
  .zwrap .zb-ask.off{visibility:hidden; pointer-events:none}
  .zwrap .zb-ask-l{font-size:.82rem; color:var(--zw-dim); font-weight:600}

  .zwrap .zb-status{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
    background:var(--zw-head); border:1px solid var(--zw-line); border-radius:12px;
    padding:9px 14px; margin:0 0 14px; font-size:.87rem;
    font-variant-numeric:tabular-nums;
  }
  .zwrap .zb-st{color:var(--zw-ink)}
  .zwrap .zb-st b{font-weight:700}
  .zwrap .zb-st-learn{color:var(--zw-gold); font-weight:700}
  .zwrap .zb-given{color:var(--zw-gold)}
  .zwrap .zb-clock{color:var(--zw-dim)}
  .zwrap .zb-keys{display:flex; flex-wrap:wrap; gap:12px; margin-inline-start:auto}
  .zwrap .zb-kg.off{visibility:hidden}
  .zwrap .zb-st.off{visibility:hidden}
  /* ההוראה של התא שאתה עליו — שורה אחת מעל הלוח, במקום בתוך משבצת
     ברוחב 49 פיקסלים שבה היא נשברת מאחורי ה-?. min-height כדי שהיא
     תשמור על מקומה גם כשאין מה לומר, אחרת הלוח קופץ בכל מעבר עמודה. */
  .zwrap .zb-hintbar{
    margin:0 0 8px; padding:5px 12px; border-radius:10px;
    background:var(--zw-gold-soft); color:var(--zw-ink);
    font-size:.9rem; font-weight:700; text-align:center;
  }
  .zwrap .zb-hintbar.none{background:none}

  /* ---- משפטים ----
     שורה של משפט מחזיקה יותר טקסט משורה של מילה, אז היא גבוהה יותר —
     אבל גבוהה *באותה מידה* בכל השלבים, כי הגובה מוצהר ולא נגזר מהתוכן.
     תרגום שאינו נכנס נשבר לשלוש שורות בתוך המשבצת, כמו בעמודה צרה. */
  .zwrap .zb-seg-unit{background:var(--zw-kind-bg)}
  .zwrap .zb-table.sent .zb-slot{height:66px}
  .zwrap .zb-table.sent .zb-slot .zb-v{
    white-space:normal; text-overflow:clip; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  }
  .zwrap .zb-table.sent .zb-ch{font-size:1.15rem}
  .zwrap .zb-table.sent .zb-py{font-size:.92rem}
  /* עמודת הסדר: משבצת למילה, סימני הפיסוק כתובים. עוטפות לשורה שנייה
     ולא נחתכות — משפט של שש מילים אינו נכנס לרוחב עמודה בטלפון. */
  .zwrap .zb-tile-es{font-size:.92rem; max-width:16em; white-space:normal; text-align:start}
  .zwrap .zb-ordslot{
    flex-wrap:wrap; gap:4px; align-content:center;
    direction:ltr; unicode-bidi:isolate; justify-content:flex-start;
  }
  .zwrap .zb-ow{
    min-width:30px; height:26px; border-radius:7px; display:inline-flex;
    align-items:center; justify-content:center; padding:0 4px; font-size:1.05rem;
  }
  .zwrap .zb-ow.empty{border:1px dashed var(--zw-line); background:var(--zw-slot)}
  .zwrap .zb-ow.next{border-style:solid; border-color:var(--zw-acc); background:var(--zw-card)}
  .zwrap .zb-ow.filled{background:var(--zw-ok-bg); border:1px solid var(--zw-ok-line); color:var(--zw-acc)}
  .zwrap .zb-owg{display:inline-flex; align-items:center; gap:2px}
  .zwrap .zb-ow-p{color:var(--zw-dim); font-size:1rem; align-self:center}
  /* ההסבר של משפט: המשפט מפורק למילים, כל אחת עם התעתיק, המשמעות
     וההקלטה שלה — אותה צורה של פירוק הסימנים במילה. */
  .zwrap .zb-swrow{
    display:flex; align-items:center; gap:11px; padding:8px 0;
    border-bottom:1px dashed var(--zw-line);
  }
  .zwrap .zb-swrow:last-child{border-bottom:none}
  .zwrap .zb-swc{font-size:1.5rem; color:var(--zw-acc); min-width:2.2em; direction:ltr; unicode-bidi:isolate}
  .zwrap .zb-swmeta{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
  .zwrap .zb-kg{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; color:var(--zw-dim)}
  .zwrap .zb-kg kbd{
    font-family:inherit; font-size:.72rem; font-weight:700; color:var(--zw-ink);
    background:var(--zw-card); border:1px solid var(--zw-line); border-bottom-width:2px;
    border-radius:5px; padding:1px 6px; min-width:20px; text-align:center;
    direction:ltr; unicode-bidi:isolate;
  }

  /* --- הטבלה --- */
  .zwrap .zb-wrap{overflow-x:auto; margin:0 0 14px}
  .zwrap .zb-table{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0 7px; min-width:560px}
  .zwrap .zb-table th{text-align:start; padding:0 6px 10px; vertical-align:bottom; font-weight:400}
  .zwrap .zb-colhead{display:flex; flex-direction:column; gap:4px; align-items:flex-start; justify-content:flex-end; min-height:50px}
  .zwrap .zb-colhead-top{display:flex; align-items:center; gap:8px; min-height:24px}
  .zwrap .zb-colname{font-size:.88rem; font-weight:700; color:var(--zw-ink)}
  .zwrap .zb-anchor-tag{
    font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    background:var(--zw-kind-bg); color:var(--zw-kind-ink); padding:2px 8px; border-radius:999px;
  }
  .zwrap .zb-drop{
    font:inherit; font-size:.95rem; line-height:1; cursor:pointer; padding:0;
    width:20px; height:20px; border-radius:50%; background:none;
    border:1px solid transparent; color:var(--zw-dim);
    display:inline-flex; align-items:center; justify-content:center;
  }
  .zwrap .zb-drop:hover{border-color:var(--zw-line); color:var(--zw-ink); background:var(--zw-seg)}
  /* השורה קיימת תמיד — גם ריקה — אחרת הכותרות עולות ויורדות */
  /* min-width:0 ו-overflow: הקישור יושב בעמודה שרוחבה נקבע באחוזים,
     והוא nowrap — כלומר ניסוח ארוך יותר בשפה אחת מרחיב את העמודה
     ומחזיר גלילה אופקית ללוח. "Ocultar de nuevo" עשה בדיוק את זה:
     113 פיקסלים בעמודה של 105. עכשיו הוא נחתך במקום להרחיב. */

  /* ---- כתיבה חופשית ----
     הריבוע נשאר בדיוק אותו ריבוע; מה שיורד הוא כל מה שמכוון: המדריך,
     הנקודות, השלד והכותב עצמו. הקווים ששמורים מוצגים קטנים לידו. */
  .zwrap .hw-wrap.free .hw-pad,
  .zwrap .hw-wrap.free .hw-over{display:none}
  .zwrap .hw-ink .mine{fill:none; stroke:var(--zw-ink); stroke-width:34;
    stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.95}
  /* ההערה מצביעה: המשיכה שלך נצבעת, והמשיכה שהיא הייתה אמורה להיות
     מצוירת לידה. שני צבעים שונים, כי שתיהן על אותו ריבוע. */
  .zwrap .hw-ink .mine polyline.hi{stroke:var(--zw-acc); stroke-width:44}
  .zwrap .hw-ink .want{fill:none; stroke:#2e7d5b; stroke-width:26; opacity:.9;
    stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60 40}
  .zwrap .zb-note{
    font:inherit; font-size:.78rem; cursor:pointer; text-align:start;
    background:none; border:0; border-bottom:1px dashed var(--zw-gold);
    color:inherit; padding:0 0 1px; border-radius:0;
  }
  .zwrap .zb-note.on{color:var(--zw-acc); border-bottom-color:var(--zw-acc)}
  .zwrap .hw-wrap.free{cursor:crosshair; touch-action:none}
  .zwrap .zb-free-nav{display:none; gap:4px; flex-wrap:wrap; justify-content:center; margin-top:6px}
  .zwrap .zb-free-nav.open{display:flex}
  /* בולט רק כשיש מה לבדוק: כפתור צבוע לפני שנגעת בו נקרא כאזהרה. */
  .zwrap .zb-gbtn.hot{background:var(--zw-acc); color:var(--zw-acc-ink); border-color:var(--zw-acc)}
  /* ---- רצועת המשיכות ----
     תצוגה מקדימה לכל משיכה: הסימן כפי שהוא נראה אחריה. עוטפת שורות ולא
     גוללת הצידה — משיכה שיצאה מהמסך היא משיכה שאי אפשר לבחור. */
  /* משמאל לימין תמיד, גם בעמוד עברי. סדר המשיכות הוא עובדה על הסימן
     הסיני ולא על שפת הקריאה, וסינית נכתבת משמאל לימין — אז ברצועה
     שקוראים כרצף, המשיכה הראשונה היא השמאלית. וכיוון שהרצועה הזאת
     תמיד LTR, המספר שמתחתיה ממוקם בתכונות פיזיות (left/top): אין כאן
     שני כיוונים שצריך לגשר ביניהם. */
  .zwrap .zb-steps{
    direction:ltr;
    display:flex; flex-wrap:wrap; gap:14px 16px; justify-content:center;
    margin:10px 2px 6px;
  }
  .zwrap .zb-step{
    position:relative; cursor:pointer; padding:2px; line-height:0;
    background:var(--zw-card); border:1px solid var(--zw-line); border-radius:8px;
    transition:border-color .15s, background .15s;
  }
  @media (hover:hover){ .zwrap .zb-step:hover{border-color:var(--zw-acc)} }
  .zwrap .zb-step.on{border-color:var(--zw-acc); background:var(--zw-acc-soft)}
  /* המספר יושב *מחוץ* לריבוע, צמוד לפינה הימנית התחתונה. בפנים הוא
     כיסה את הסימן עצמו — ודווקא בפינה שאליה מגיעות המשיכות האחרונות
     של סימנים רבים. left/top ב-100% מצמידים את הפינה השמאלית-עליונה
     שלו לפינה הימנית-תחתונה של הריבוע, והרווחים ברצועה נפתחו כדי
     לפנות לו מקום בלי שייגע בשכן. */
  .zwrap .zb-step b{
    /* +1 על הגבול: left:100% נמדד מתיבת הריפוד, לא מתיבת הגבול, אז
       בלעדיו המספר יושב בדיוק על קו המסגרת. */
    position:absolute; left:calc(100% + 1px); top:calc(100% + 1px);
    padding-inline-start:1px;
    font-size:.6rem; line-height:1; color:var(--zw-dim); font-weight:700;
  }
  /* :not([fill]) ולא סתם path. את המשיכה החדשה צובע מעבר, והמעבר מגיע
     כתכונת מצגת (fill="url(#…)") — ותכונת מצגת מפסידה ל-CSS, אז חוק
     גורף כאן היה צובע אותה בשחור ומשאיר את ההגדרה תלויה באוויר. זו
     בדיוק המלכודת של strokeColor בריבוע הדוגמה, באותו קובץ. */
  /* שמות המקשים. יש מקלדת רק במסך רחב, אז מתחת ל-720 השורה נופלת —
     אותו כלל של מקרא המקשים בלוח, ואותו נימוק: 22 פיקסלים על טלפון
     נגרעים מריבוע הכתיבה. */
  /* בלי direction:ltr כאן. המשפט הוא בשפת העמוד, ורק צמד החצים
     מבודד — ראו את ההערה ב-app.js. */
  .zwrap .zb-stephint{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:4px 14px; margin:4px 0 0; font-size:.72rem; color:var(--zw-dim);
  }
  .zwrap .zb-stephint .zb-hd{flex-basis:100%; text-align:center}
  @media (max-width:720px), (max-height:520px){ .zwrap .zb-stephint .zb-hk{display:none} }
  .zwrap .zb-thumb path:not([fill]){fill:var(--zw-ink)}
  /* על טלפון הרצועה מתחרה על גובה עם ריבוע הכתיבה, ו-zoomFitScreen פותר
     את התחרות לרעת הריבוע — שהוא העיקר כאן. תצוגות קטנות יותר עולות
     פחות, וה-viewBox מקטין את הציור ולא חותך אותו. */
  @media (max-width:520px), (max-height:520px){
    .zwrap .zb-thumb{width:28px; height:28px}
    .zwrap .zb-steps{gap:11px 12px; margin:6px 2px 4px}
    .zwrap .zb-step b{font-size:.52rem}
  }
  /* המשיכה שנוספה בשלב הזה נצבעת במעבר לאורך עצמה — חזק בהתחלה, דוהה
     בסוף — כדי שהתצוגה תאמר גם לאן היא הולכת ולא רק שהיא החדשה.
     הדהייה היא שקיפות, כלומר דהייה אל הרקע: בהיר על כרטיס בהיר וכהה
     על כרטיס כהה, בלי פלטה שנייה למצב הכהה. */
  .zwrap .zb-thumb .zb-dir-a{stop-color:var(--zw-acc); stop-opacity:1}
  .zwrap .zb-thumb .zb-dir-b{stop-color:var(--zw-acc); stop-opacity:.22}
  .zwrap .zb-zcount{font-size:.78rem; color:var(--zw-dim); align-self:center}
  .zwrap .zb-wrote{color:#2e7d5b; font-weight:700}
  :root[data-theme="dark"] .zwrap .zb-wrote{color:#79c9a0}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .zwrap .zb-wrote{color:#79c9a0}
  }
  /* שני ריבועים זה לצד זה: הכתיבה והדוגמה. הם נשברים לשתי שורות
     במסך צר במקום לגלוש — הדוגמה מתחת עדיין דוגמה. */
  .zwrap .zb-grid-stage,
  .zwrap .zb-zstage{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap}
  /* הסמן הוא זכוכית מגדלת על כל הבמה ברשימה, כולל הריבוע שבתוכה: זה
     מה שאומר "אפשר ללחוץ", ובלי מילים. tooltip אומר את זה רק אחרי
     שכבר עצרת שם, וגם לא קיים במגע. */
  .zwrap .zb-grid-stage, .zwrap .zb-grid-stage *{cursor:zoom-in}
  .zwrap .zb-zstage{cursor:default}
  .zwrap .hw-wrap.ref{touch-action:auto}
  .zwrap .zb-zoom .hw-wrap.ref{cursor:default}
  /* הסימן בריבוע הדוגמה נצבע מהפלטה ולא בערך קבוע: HanziWriter מקבל
     צבע אחד ביצירה, והוא היה שחור־כמעט — כלומר שחור על שחור במצב כהה.
     ה-fill כאן גובר, ומשתנה עם הערכה בלי לבנות את הכותב מחדש. */
  /* הספרייה מציירת כל משיכה כ-<path> עם `stroke` קבוע (near-black) ו-
     `fill="none"` — אז כלל על ה-fill צובע צורה שאינה נראית, והסימן נשאר
     שחור על שחור במוד כהה. מה שנראה הוא ה-stroke, ומאפיין מצגת נכנע
     ל-CSS, אז זה גם מה שמושך את הצבע מהפלטה בלי לבנות את הכותב מחדש. */
  .zwrap .hw-wrap.ref .hw-pad path{stroke:var(--zw-ink); fill:none}
  .zwrap .hw-wrap.ref .hw-glyph{position:absolute; inset:0; width:100%; height:100%}
  .zwrap .hw-wrap.ref .hw-glyph path{fill:var(--zw-ink); opacity:var(--hw-fade, 1)}
  .zwrap .hw-side{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--zw-ink); cursor:pointer}
  .zwrap .hw-side input{accent-color:var(--zw-acc); cursor:pointer; margin:0}
  .zwrap .zb-draws{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:6px; min-height:34px}
  .zwrap .zb-draw{position:relative; display:inline-flex; width:34px; height:34px;
    border:1px solid var(--zw-line); border-radius:6px; background:var(--zw-card); padding:2px}
  .zwrap .zb-draw svg{width:100%; height:100%}
  .zwrap .zb-draw svg g{stroke:var(--zw-ink)}
  .zwrap .zb-draw .x{position:absolute; inset-block-start:-7px; inset-inline-end:-7px;
    width:16px; height:16px; line-height:1; font-size:.6rem; padding:0; border-radius:50%;
    border:1px solid var(--zw-line); background:var(--zw-bg); color:var(--zw-dim); cursor:pointer}
  .zwrap .zb-drawn{font-size:.7rem; color:var(--zw-dim)}
  .zwrap .zb-drawrow{display:flex; align-items:center; gap:8px; margin-top:4px}
  .zwrap .zb-drawch{font-size:1rem; color:var(--zw-dim); min-width:1.2em; text-align:center}
  .zwrap .zb-mlbl-2{margin-top:10px}

  .zwrap .zb-colacts{min-height:19px; display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden}
  /* איקון ולא מילה, ו-flex:0 0 auto: הוא לא נחתך ולא נותן לטקסט שלידו
     לדחוף אותו החוצה, גם בעמודה של 49 פיקסלים. */
  .zwrap .zb-colwipe{
    font:inherit; font-size:.78rem; line-height:1; cursor:pointer; flex:0 0 auto;
    background:none; border:0; padding:0; border-radius:0; opacity:.75;
  }
  .zwrap .zb-colwipe:hover{opacity:1}
  .zwrap .zb-colwipe.off{visibility:hidden; pointer-events:none}
  .zwrap .zb-collink{
    font:inherit; font-size:.73rem; font-weight:600; cursor:pointer;
    background:none; border:0; border-bottom:1px dashed var(--zw-gold);
    color:var(--zw-gold); padding:0 0 1px; border-radius:0; white-space:nowrap;
    max-width:100%; overflow:hidden; text-overflow:ellipsis;
  }
  .zwrap .zb-collink.off{visibility:hidden; pointer-events:none}

  .zwrap .zb-cell{position:relative; padding:0 6px}
  .zwrap .zb-slot{
    height:50px; padding:0 12px; border-radius:11px;
    display:flex; align-items:center; gap:10px; overflow:hidden;
  }
  .zwrap .zb-slot.filled{background:var(--zw-card); border:1px solid var(--zw-line)}
  .zwrap .zb-slot.anchor{background:var(--zw-card); border:1px solid var(--zw-line)}
  .zwrap .zb-slot.empty{background:var(--zw-slot); border:1px dashed var(--zw-line)}
  .zwrap .zb-slot.given{background:var(--zw-gold-soft); border-color:var(--zw-gold-soft); position:relative}
  .zwrap .zb-slot.given::before{
    content:''; position:absolute; inset-block:8px; inset-inline-start:0;
    width:3px; border-radius:2px; background:var(--zw-gold);
  }
  .zwrap .zb-slot.solved{background:var(--zw-ok-bg); border-color:var(--zw-ok-line)}
  .zwrap .zb-cell.focus .zb-slot{border-style:solid; border-color:var(--zw-acc)}
  .zwrap .zb-row.current .zb-slot.empty{background:var(--zw-card)}
  .zwrap .zb-hint-tag{
    margin-inline-start:auto; font-size:.6rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--zw-gold);
  }
  /* ---- כל עמודה מיושרת לפי כיוון הכתב שלה ----
     עברית לימין, פין־יין וסימנים לשמאל, שמע במרכז. הכיוון נקבע על התא
     כולו ולא על הטקסט שבתוכו, וזה ההבדל שעשה את הבאג: `direction` על
     ה-span בלבד השאיר את המשבצת עצמה RTL, אז שורה אחת "נדבקה" לימין
     (שם מתחיל התוכן ב-flex) ושורה שנשברה לשתיים יושרה לשמאל (שם מתחיל
     הטקסט בתוך ה-span). על התא, גם ה-? וגם הריפוד ששמור לו עוברים לצד
     הנכון, והמצבים מתלכדים. */
  .zwrap td[data-col="py"],
  .zwrap td[data-col="ch"]{direction:ltr}
  .zwrap td[data-col="py"] .zb-v,
  .zwrap td[data-col="ch"] .zb-v{text-align:start}
  /* השמע אינו טקסט אלא כפתור עגול — הוא במרכז התא. כשהתא ריק יש בו ?,
     וזה בדיוק המצב שבו אין כפתור להתנגש בו. */
  .zwrap td[data-col="au"] .zb-slot.filled,
  .zwrap td[data-col="au"] .zb-slot.anchor{justify-content:center; padding-inline:6px}
  .zwrap .zb-v{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .zwrap .zb-es{font-size:1rem; color:var(--zw-ink)}
  .zwrap .zb-py{font-size:1.02rem; font-weight:700; color:var(--zw-gold); direction:ltr; unicode-bidi:isolate}
  .zwrap .zb-ch{font-size:1.45rem; color:var(--zw-acc); line-height:1.2; direction:ltr; unicode-bidi:isolate}
  /* כפתור השמע אחד הוא, בשני גדלים ולא בשני עיצובים. בלוח הוא 34
     ובהסבר 26, אבל הרקע, המסגרת, הריחוף וה"מתנגן" זהים — שני צבעי רקע
     שונים לאותה פעולה נקראים כשני כפתורים שונים, וזה מה שהם היו. */
  .zwrap .zb-au{
    font:inherit; font-size:17px; line-height:1; cursor:pointer; color:var(--zw-ink);
    border:1px solid var(--zw-line); background:var(--zw-card);
    border-radius:999px; width:34px; height:34px; padding:0; box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    transition:background .15s, border-color .15s, transform .1s;
  }
  .zwrap .zb-au:hover{background:var(--zw-acc-soft); border-color:var(--zw-acc)}
  .zwrap .zb-au:active{transform:scale(.9)}
  .zwrap .zb-au.playing{background:var(--zw-gold-soft); border-color:var(--zw-gold)}
  /* .zb-tph ולא .zb-ph: זה השם של כפתורי השלבים, וכלל שמכבה את אחד
     מכבה גם את השני — "לתרגל" נעלם מהסרגל. שני דברים שונים, שני שמות. */
  .zwrap .zb-slot .zb-tph{font-size:.8rem; color:var(--zw-dim)}
  .zwrap .zb-field{
    font:inherit; font-size:1rem; font-weight:600; color:var(--zw-ink);
    background:none; border:0; outline:none; width:100%; padding:0; min-width:0;
  }
  .zwrap .zb-field::placeholder{color:var(--zw-dim); font-weight:400; font-size:.85rem}
  /* ה-? חי רק על השורה שאתה עליה או ב-hover — אחרת הוא חמישה־עשר כפתורים */
  .zwrap .zb-reveal{
    position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%);
    font:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
    width:24px; height:24px; border-radius:50%; padding:0; opacity:0;
    background:var(--zw-card); border:1px solid var(--zw-line); color:var(--zw-dim);
    display:flex; align-items:center; justify-content:center; transition:opacity .12s;
  }
  .zwrap .zb-reveal.live,
  .zwrap .zb-cell:hover .zb-reveal,
  .zwrap .zb-reveal:focus-visible{opacity:1}
  .zwrap .zb-reveal:hover{border-color:var(--zw-gold); color:var(--zw-gold)}

  /* --- עמודות שהוצאו --- */
  .zwrap .zb-off{display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:32px; margin:0 0 12px}
  .zwrap .zb-off-l{font-size:.78rem; color:var(--zw-dim)}
  .zwrap .zb-off-chip{
    font:inherit; font-size:.78rem; font-weight:600; cursor:pointer;
    background:none; color:var(--zw-gold); border:1px dashed var(--zw-gold);
    border-radius:999px; padding:5px 12px; min-height:30px;
  }
  .zwrap .zb-off-chip:hover{background:var(--zw-gold-soft); border-style:solid}

  /* --- פאנל ההסבר: כל התיבה היא ההסבר --- */
  .zwrap .zb-panel{
    background:var(--zw-slot); border:1px solid var(--zw-line);
    border-radius:14px; margin:0 0 14px; overflow:hidden;
  }
  .zwrap .zb-pn-head{
    display:flex; align-items:center; gap:11px; flex-wrap:wrap;
    padding:11px 16px; border-bottom:1px solid var(--zw-line); min-height:58px;
  }
  .zwrap .zb-pn-word{font-size:1.45rem; color:var(--zw-acc); line-height:1.15; direction:ltr; unicode-bidi:isolate}
  .zwrap .zb-pn-py{font-size:1rem; font-weight:700; color:var(--zw-gold); direction:ltr; unicode-bidi:isolate}
  .zwrap .zb-pn-gloss{font-size:.92rem; color:var(--zw-ink)}
  .zwrap .zb-pn-tag{
    margin-inline-start:auto; font-size:.66rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--zw-dim);
  }
  /* אין גלילה בתוך התיבה. גובה קבוע שמר על גיאומטריה — מילה עם שני
     סימנים לא הזיזה כלום — אבל הוא קנה את זה בגלילה שנייה בתוך העמוד,
     ומחווה שגוללת דבר אחר ממה שהאצבע התכוונה אליו היא מחיר גבוה יותר.
     מינימום במקום גובה: קצר לא מכווץ, ארוך פשוט נמשך והעמוד גולל. */
  .zwrap .zb-pn-body{min-height:180px; overflow:visible; padding:10px 16px}
  /* במסך רחב התיבה פשוט פתוחה, ואין מה לפתוח ומה לסגור. */
  .zwrap .zb-pn-open, .zwrap .zb-pn-x{display:none}

  /* --- מאגרים --- */
  .zwrap .zb-pools{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px; align-items:stretch}
  .zwrap .zb-pool{background:var(--zw-card); border:1px solid var(--zw-line); border-radius:12px; padding:10px 12px}
  .zwrap .zb-pool-h{display:flex; align-items:center; gap:8px; margin:0 0 7px}
  .zwrap .zb-pool-t{font-size:.77rem; font-weight:700; color:var(--zw-dim)}
  .zwrap .zb-pool-n{
    font-size:.7rem; font-weight:700; background:var(--zw-seg); color:var(--zw-ink);
    padding:1px 8px; border-radius:999px; direction:ltr; unicode-bidi:isolate;
  }
  .zwrap .zb-tiles{display:flex; flex-wrap:wrap; gap:6px}
  .zwrap .zb-tile{
    font:inherit; cursor:pointer; background:var(--zw-card); border:1px solid var(--zw-line);
    border-radius:10px; min-width:46px; min-height:44px; padding:5px 11px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  /* מאחורי (hover:hover): במגע ה-:hover נדבק אחרי הנגיעה, ואריח שנשאר
     מסומן נראה בדיוק כמו אריח שנבחר — במסך שכל הרעיון שלו הוא שיש בו
     סימון אחד. */
  @media (hover:hover){ .zwrap .zb-tile:hover:not(:disabled){border-color:var(--zw-acc)} }
  .zwrap .zb-tile.used{opacity:.28; cursor:default}
  /* אריח שמע שכבר נשמע נראה אחרת, כי מכאן והלאה לחיצה עליו משבצת. */
  .zwrap .zb-tile.heard{border-color:var(--zw-gold); background:var(--zw-gold-soft)}
  /* אריח דרוך: נשמע, ומחכה שתגידו לאן. אפשר ללחוץ עליו שוב או ישר על
     המשבצת שלו. */
  .zwrap .zb-tile.armed{border-color:var(--zw-acc); box-shadow:0 0 0 2px var(--zw-acc-soft)}
  .zwrap .zb-tile.sending{opacity:.3}
  .zwrap .zb-tile-ch{font-size:1.35rem; color:var(--zw-acc); direction:ltr; unicode-bidi:isolate}
  /* אריח תעתיק — קיים רק כשאין מקלדת, ונקרא משמאל לימין ככל פין־יין. */
  .zwrap .zb-tile-py{font-size:1rem; font-weight:700; color:var(--zw-gold); direction:ltr; unicode-bidi:isolate}
  .zwrap .zb-tile-au{font-size:1.05rem; background:var(--zw-kind-bg)}
  .zwrap .zb-pool-hint{flex:1 1 180px; align-self:center; min-height:40px; display:flex; align-items:center; margin:0; font-size:.82rem; color:var(--zw-dim)}

  /* --- החיווי: עף אל המשבצת, או רועד במקומו --- */
  .zwrap .zb-fly{
    border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.22);
    transition:transform .3s cubic-bezier(.34,.9,.36,1), opacity .3s ease;
  }
  @keyframes zb-shake{
    0%,100%{transform:translateX(0)}
    15%{transform:translateX(-6px)} 30%{transform:translateX(6px)}
    45%{transform:translateX(-4px)} 60%{transform:translateX(4px)}
    80%{transform:translateX(-2px)}
  }
  .zwrap .zb-tile.shaking{
    animation:zb-shake .4s ease; border-color:var(--zw-acc); background:var(--zw-acc-soft);
  }
  @keyframes zb-reject{
    0%,100%{box-shadow:0 0 0 0 transparent}
    35%{box-shadow:0 0 0 3px var(--zw-acc-soft)}
  }
  .zwrap .zb-slot.reject{animation:zb-reject .4s ease; border-color:var(--zw-acc)}
  @media (prefers-reduced-motion:reduce){
    .zwrap .zb-fly{transition:none}
    .zwrap .zb-tile.shaking, .zwrap .zb-slot.reject{animation:none}
  }

  /* --- סיום קבוצה: רגע, ואז נעלם --- */
  .zwrap .zb-party{
    position:fixed; inset:0; z-index:75; pointer-events:none; overflow:hidden;
    opacity:1; transition:opacity .7s ease;
  }
  .zwrap .zb-party.go{opacity:0}
  .zwrap .zb-party-t{
    position:absolute; inset-inline:0; top:11%; text-align:center;
    font-size:1.5rem; font-weight:800; color:var(--zw-ok);
    text-shadow:0 2px 14px var(--zw-bg), 0 0 3px var(--zw-bg);
    animation:zb-pop .5s cubic-bezier(.2,1.4,.4,1) both;
  }
  .zwrap .zb-party i{
    position:absolute; top:-6vh; width:9px; height:14px; border-radius:2px;
    animation-name:zb-fall; animation-timing-function:linear; animation-fill-mode:both;
  }
  @keyframes zb-fall{ to{ transform:translateY(112vh) rotate(540deg); } }
  @keyframes zb-pop{ from{ transform:scale(.7); opacity:0 } to{ transform:scale(1); opacity:1 } }
  @media (prefers-reduced-motion:reduce){
    .zwrap .zb-party i{display:none}
    .zwrap .zb-party-t{animation:none}
  }

  /* --- הריבוע הגדול --- */
  /* אין כפתור הגדלה — הריבוע עצמו נפתח בנגיעה. */
  .zwrap .zb-grid-stage{position:relative}
  .zwrap .zb-zoom .hw-wrap{cursor:crosshair}
  .zwrap .zb-zoom{
    position:fixed; inset:0; z-index:70; overflow-y:auto;
    background:rgba(43,38,32,.62); display:flex; align-items:flex-start; justify-content:center;
    padding:16px 12px;
  }
  .zwrap .zb-zbox{
    background:var(--zw-card); border:1px solid var(--zw-line); border-radius:18px;
    padding:12px 14px 14px; margin:auto; max-width:100%;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    box-shadow:0 22px 60px rgba(0,0,0,.35);
  }
  /* מי שכותב סימן צריך לדעת סימן של מה הוא כותב. בכותרת קטנה זה כתוב
     ולא נקרא — הסימן, התעתיק והמשמעות הם נושא המסך הזה. */
  .zwrap .zb-zhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; width:100%}
  .zwrap .zb-zhead .zb-pn-word{font-size:2.3rem}
  .zwrap .zb-zhead .zb-pn-py{font-size:1.3rem}
  .zwrap .zb-zhead .zb-pn-gloss{font-size:1.15rem; font-weight:600}
  .zwrap .zb-mc-head .zb-pn-word{font-size:1.9rem}
  .zwrap .zb-mc-head .zb-pn-py{font-size:1.15rem}
  .zwrap .zb-mc-head .zb-pn-gloss{font-size:1.05rem; font-weight:600}
  .zwrap .zb-zhead .zb-pn-x{display:inline-flex}
  .zwrap .zb-zchips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
  .zwrap .zb-zchip{
    font:inherit; font-size:1.4rem; cursor:pointer; line-height:1;
    background:var(--zw-card); color:var(--zw-acc); border:1px solid var(--zw-line);
    border-radius:10px; padding:6px 12px; min-height:44px;
  }
  .zwrap .zb-zchip.on{background:var(--zw-acc-soft); border-color:var(--zw-acc)}
  .zwrap .zb-zstage{line-height:0}
  .zwrap .zb-zbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center}
  .zwrap .zb-zsize{display:flex; align-items:center; gap:6px}
  .zwrap .zb-zsize .zb-gbtn{min-width:44px; font-size:1.1rem; font-weight:700}
  .zwrap .zb-zsz{font-size:.8rem; color:var(--zw-dim); min-width:38px; text-align:center;
    direction:ltr; unicode-bidi:isolate}

  /* --- ניווט הקבוצות --- */
  .zwrap .zb-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 0 0}
  .zwrap .zb-navbtn{
    font:inherit; font-size:.86rem; font-weight:700; cursor:pointer;
    background:var(--zw-card); color:var(--zw-ink); border:1px solid var(--zw-line);
    border-radius:999px; padding:9px 16px; min-height:42px;
  }
  .zwrap .zb-navbtn:hover:not(:disabled){border-color:var(--zw-acc)}
  .zwrap .zb-navbtn:disabled{opacity:.4; cursor:default}
  .zwrap .zb-navbtn.hot{background:var(--zw-acc); border-color:var(--zw-acc); color:var(--zw-acc-ink)}
  .zwrap .zb-dots{display:flex; gap:6px}
  .zwrap .zb-dot{
    font:inherit; font-size:.82rem; font-weight:700; cursor:pointer;
    width:34px; height:34px; border-radius:50%; padding:0;
    background:var(--zw-card); border:1px solid var(--zw-line); color:var(--zw-ink);
  }
  .zwrap .zb-dot.on{background:var(--zw-acc); border-color:var(--zw-acc); color:var(--zw-acc-ink)}

  /* --- לכתוב ולהקליט --- */
  .zwrap .zb-master{display:flex; flex-direction:column; gap:12px; margin:0 0 14px}
  .zwrap .zb-mcard{background:var(--zw-card); border:1px solid var(--zw-line); border-radius:14px; padding:14px 16px}
  .zwrap .zb-mc-head{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:0 0 12px}
  .zwrap .zb-mc-body{display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start}
  .zwrap .zb-mblock{display:flex; flex-direction:column; gap:8px}
  .zwrap .zb-mlbl{font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--zw-dim)}
  /* הסימנים של מילה נכתבים משמאל לימין, גם בעמוד עברי. flex בהקשר RTL
     מריץ את הציר הראשי מימין לשמאל, ואז 儿子 מתאמן כ-子 ואז 儿 — בדיוק
     ההיפוך שאסור. הכיוון מוצהר כאן ולא נגזר מהעמוד. */
  .zwrap .zb-grids{display:flex; gap:14px; flex-wrap:wrap; direction:ltr}
  .zwrap .zb-grid{display:flex; flex-direction:column; gap:6px; align-items:center}
  .zwrap .zb-grid-nav{display:flex; gap:4px; flex-wrap:wrap; justify-content:center}
  .zwrap .zb-gbtn{
    font:inherit; font-size:.7rem; font-weight:600; cursor:pointer;
    background:var(--zw-card); color:var(--zw-ink); border:1px solid var(--zw-line);
    border-radius:999px; padding:4px 9px; min-height:28px;
  }
  .zwrap .zb-gbtn:hover{border-color:var(--zw-acc)}
  .zwrap .zb-grid-msg{font-size:.72rem; color:var(--zw-dim); min-height:16px}
  .zwrap .zb-grid-msg.ok{color:var(--zw-ok); font-weight:700}
  .zwrap .zb-recrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .zwrap .zb-mic{
    font:inherit; cursor:pointer; width:46px; height:46px; border-radius:50%; padding:0;
    background:var(--zw-acc-soft); border:1px solid var(--zw-acc);
    display:inline-flex; align-items:center; justify-content:center;
  }
  .zwrap .zb-dot-rec{width:14px; height:14px; border-radius:50%; background:var(--zw-acc); display:block}
  .zwrap .zb-mic.on .zb-dot-rec{border-radius:3px}
  .zwrap .zb-takes{display:flex; gap:6px; flex-wrap:wrap}
  .zwrap .zb-take{display:inline-flex; align-items:center; gap:2px}
  .zwrap .zb-take button{
    font:inherit; font-size:.74rem; cursor:pointer; border:1px solid var(--zw-ok-line);
    background:var(--zw-ok-bg); color:var(--zw-ok); border-radius:8px; padding:5px 8px; min-height:30px;
  }
  .zwrap .zb-take button.x{background:none; border-color:var(--zw-line); color:var(--zw-dim)}
  .zwrap .zb-recmsg{font-size:.78rem; color:var(--zw-dim)}
  .zwrap .zb-recmsg.ok{color:var(--zw-ok); font-weight:700}
  .zwrap .zb-recmsg.no{color:var(--zw-acc)}
  .zwrap .zb-locked{font-size:.85rem; color:var(--zw-dim); font-style:italic}

  /* מסך *נמוך* מוגבל כמו מסך צר, ולפעמים יותר: טלפון לרוחב הוא 915
     פיקסלים רחב ו-412 גבוה, ועם מקלדת פתוחה נשארים כ-150 — שורה אחת.
     אז כל מה שנכתב ל"צר" חל גם על "נמוך", ומכאן ה-(max-height:520px)
     בכל השאילתות כאן. שולחן אינו נמוך, ולכן הוא לא נתפס. */
  @media (max-width:720px), (max-height:520px){
    .zwrap .zb-bar{align-items:stretch}
    .zwrap .zb-keys{margin-inline-start:0; flex-basis:100%}
    .zwrap .zb-mc-body{gap:16px}
  }

  /* ---- ה-? לא יושב על הטקסט ----
     השדה מתחיל בצד שהכיוון שלו קובע, וה-? ישב בדיוק שם. במקום לנחש איזה
     צד פנוי, התא שומר לו מקום: padding קבוע שאינו זז גם כשהכפתור שקוף. */
  .zwrap .zb-slot{padding-inline-end:40px}
  .zwrap .zb-slot.filled,
  .zwrap .zb-slot.anchor{padding-inline-end:12px}

  /* ---- דרישת הטונים, שהייתה קיימת פעם ונעלמה ---- */
  .zwrap .zb-tones{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--zw-ink); cursor:pointer}
  .zwrap .zb-tones input{accent-color:var(--zw-acc); cursor:pointer; margin:0}
  .zwrap .zb-tones.off{visibility:hidden; pointer-events:none}

  /* ---- הכפתור שנבחר בציור מסמן את עצמו ---- */
  .zwrap .zb-gbtn.on{background:var(--zw-acc); border-color:var(--zw-acc); color:var(--zw-acc-ink)}

  /* ---- כמה רואים בזמן שכותבים ---- */
  .zwrap .hw-opts{display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin:0 0 10px}
  .zwrap .hw-lvl{display:inline-flex; align-items:center; gap:10px; font-size:.8rem; color:var(--zw-dim)}
  .zwrap .hw-lvl input[type=range]{accent-color:var(--zw-acc); width:160px; cursor:pointer}
  .zwrap .hw-lvl-v{font-weight:700; color:var(--zw-ink); min-width:9ch; text-align:start}
  /* העוצמה: ציר שני, רציף, על מה שהציר הראשון בחר. --hw-fade יורד מ-1
     ל-0 ואז הרמז נעלם לגמרי — בלי לגעת במשיכות שכבר צוירו, שהן קבוצה
     אחרת ב-svg. */
  .zwrap .hw-wrap{--hw-fade:1}
  /* המתאר מונמך ב-JS על ה-stroke עצמו ולא כאן: הסלקטור הזה פגע בקבוצת
     ה-transform, כלומר גם במשיכות האדומות שהלומד כתב, ואלה לא אמורות
     להיחלש לעולם. כאן נשארת רק שכבת הנקודות והשלד.
  .zwrap .hw-over{opacity:var(--hw-fade)}
  .zwrap .hw-grid{opacity:1}

  /* ---- גובה: הפאנל הסגור הוא הכותרת בלבד ----
     תיבה סגורה שתופסת 180 פיקסלים היא בזבוז המסך היחיד שנשאר. היא נפתחת
     ונסגרת בלחיצה מפורשת אחת — זו תזוזה שביקשת, לא תזוזה שקרתה לך. */


  /* ============================================================
     בטלפון הטבלה נערמת
     ------------------------------------------------------------
     ארבע עמודות ב-390 פיקסלים נותנות 90 פיקסלים לעמודה, ובתוכם שדה
     קלט וכפתור. אז מתחת ל-720 השורה הופכת לכרטיס: המשמעות ככותרת
     והשאר מתחתיה, כל אחד עם שם העמודה שלו. הכותרות של הטבלה מיותרות
     שם ולכן יורדות — הן חוזרות ברגע שיש רוחב.
     ============================================================ */
  /* ============================================================
     בטלפון: שורה אחת למילה, כמו שהיה
     ------------------------------------------------------------
     הערמה לכרטיסים עלתה 275 פיקסלים לשורה במקום 36 — חמש מילים הפכו
     ל-1,417 פיקסלים של לוח. הגרסה הקודמת "נכנסה" מפני שהיא השאירה
     שורה אחת למילה ונתנה לטבלה לגלוש מהצד: המסמך היה 535 רחב במסך של
     390, כלומר גררת את כל העמוד ימינה כדי להגיע לעמודות.
     שני הצדדים היו קיצוניים. שורה אחת למילה נשארת, הגלילה האופקית
     נשארת — אבל *בתוך* הלוח ולא במסמך, ועמודת השאלה מקובעת כך שהיא
     לא נעלמת כשגוללים אליה.
     ============================================================ */
  @media (max-width:720px), (max-height:520px){
    /* הטבלה לוקחת את הרוחב שיש, בכל רוחב. `min-width:520px` הותיר רצועה
       צרה של רוחבי חלון (בערך 524–556) שבה הלוח כן גלש הצידה, ובשבילה
       היה תא ראשון נדבק — קיבוע שלא רואים כמעט לעולם ושמסתיר עמודה
       כשכן. בלי המינימום אין גלישה, ולכן גם אין מה להדביק. */
    .zwrap .zb-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
    .zwrap .zb-table{min-width:0}
    /* וכשהעמודות מתכווצות, הערך נשבר לשתי שורות בתוך אותו גובה משבצת
       במקום להיחתך, ו"בחרו מלמטה" יורד: כותרת העמודה כבר אומרת את זה,
       והוא לא נכנס לתא צר. זה מה ש-min-width שילם עליו, וזה זול ממנו. */
    .zwrap .zb-slot .zb-v{
      white-space:normal; text-overflow:clip;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    }
    /* היעד של כל לחיצה על אריח הוא השורה המסומנת, ולכן חייבים לראות
       איזו היא. מסומן תא *השאלה* של השורה ולא התא הראשון: אלה אותו תא
       רק כל עוד המשמעות היא השאלה, ומרגע שמחליפים שאלה הסימון היה על
       עמודה שאינה שואלת דבר. שני סימונים בלוח, לא יותר — תא השאלה
       והמשבצת הבחורה. */
    .zwrap .zb-row.current .zb-slot.anchor{border-color:var(--zw-acc)}
    .zwrap .zb-slot{height:46px; min-height:46px; padding-inline-end:34px}
    /* משפט מפורק תופס יותר משורה אחת של משבצות גם מתחת ל-720, לא רק
       בטלפון צר — 560 נפל בדיוק בין שתי השאילתות ונחתך. שלוש שורות של
       משבצות הן הגרוע ביותר בפרקים האלה, ולכן המשבצות קטנות כאן: הן
       אינן נלחצות אף פעם — האריחים נלחצים — הן רק מראות איפה חסר. */
    .zwrap .zb-table.sent .zb-slot{height:92px}
    .zwrap .zb-ow{min-width:18px; height:20px; font-size:.9rem; padding:0 2px; border-radius:6px}
    .zwrap .zb-ow-p{font-size:.8rem}
    .zwrap .zb-ordslot{gap:3px}
    .zwrap .zb-slot.filled,
    .zwrap .zb-slot.anchor{padding-inline-end:10px}
    .zwrap .zb-reveal{opacity:1; width:22px; height:22px; inset-inline-end:8px}
    .zwrap .zb-pn-body{min-height:150px}
    .zwrap .zb-pools{gap:8px}
    .zwrap .zb-pool{flex:1 1 100%}
    /* עוטף שורות ולא גולל: אריח שיצא מהמסך הוא אריח שלא קיים, ואין שום
       סיבה שהמאגר יהיה שורה אחת. גובה השורות בטבלה ממילא נמדד ממה
       שנשאר, אז מאגר בשתי שורות פשוט לוקח את חלקו. */
    .zwrap .zb-tiles{flex-wrap:wrap; justify-content:center; padding-bottom:2px}
    .zwrap .zb-tile{flex:0 0 auto}
    .zwrap .zb-status{font-size:.8rem; gap:5px 10px}
    .zwrap .zb-keys{display:none}
    .zwrap .zb-wipe{margin-inline-start:auto}
  }

  /* ============================================================
     ...ומתחת ל-520 גם הגלילה הזאת מיותרת
     ------------------------------------------------------------
     הלוח הישן נכנס לטלפון בלי לגלול כלל, ולא בזכות פריסה אחרת: היו
     לו *שלוש* עמודות — משמעות, צליל, סימנים — והפין־יין בכלל לא היה
     עמודה אלא מאגר. ארבע עמודות באותו רוחב הן העלות של הקידום הזה,
     ו-min-width:520px היה מספר שנבחר כדי שהתאים ייראו נוח, לא רוחב
     שנדרש: העמודות הן אחוזים, אז הן מתכווצות יחד. אז מתחת ל-520
     הטבלה לוקחת את הרוחב שיש, הטקסט נשבר לשתי שורות בתוך אותו גובה
     שורה, ומה שהיה טקסט עזר — ה-placeholder ו"בחרו מלמטה" — יורד:
     כותרת העמודה מעליו כבר אומרת את אותו הדבר.
     ============================================================ */
  @media (max-width:520px), (max-height:520px){
    .zwrap .zb-table{min-width:0; width:100%}
    .zwrap .zb-table.sent .zb-ch{font-size:1rem}
    .zwrap .zb-slot{padding-inline-end:24px; line-height:1.2}
    .zwrap .zb-slot.filled,
    .zwrap .zb-slot.anchor{padding-inline-end:6px; padding-inline-start:6px}
    .zwrap .zb-reveal{width:20px; height:20px; inset-inline-end:3px; font-size:.68rem}
    .zwrap .zb-field{font-size:.82rem}
    /* שתי שורות בתוך אותו גובה משבצת — "להיות (הוא, זה)" ב-105 פיקסלים
       בשורה אחת הוא שלוש נקודות, וזה בדיוק המידע שהעמודה קיימת בשבילו. */
    .zwrap .zb-slot .zb-v{
      white-space:normal; text-overflow:clip;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    }
    .zwrap .zb-es{font-size:.8rem}
    .zwrap .zb-py{font-size:.85rem}
    .zwrap .zb-ch{font-size:1.1rem}
    .zwrap .zb-au{width:30px; height:30px; font-size:15px}
    .zwrap .zb-colhead-top{gap:5px}
    .zwrap .zb-colname{font-size:.7rem}
  }


  /* ---- רצועת הפרקים: נשברת לשורות ----
     היא הייתה שורה אחת שגוללת, כדי לחסוך גובה. אבל גלילה אופקית בתוך
     עמוד שגולל אנכית היא מחווה שקל לפספס, והפרקים שמעבר לקצה פשוט לא
     נגישים. כותרת פרק היא שם שצריך לראות כדי לבחור, אז עדיף שכולן
     ייראו: הרצועה נשברת לכמה שורות והכפתורים מתכווצים מעט בטלפון. */
  .zwrap .tabs{flex-wrap:wrap; overflow:visible}
  .zwrap .tabs .tab{flex:0 1 auto; max-width:100%}

  /* "השאלה" אינו נכנס לרוחב של עמודה צרה, והעמודה שאין בה תשובות
     ממילא נראית כשאלה. הבורר עצמו נשאר. */
  @media (max-width:520px){
    .zwrap .zb-anchor-tag{display:none}
  }

  @media (max-width:520px), (max-height:520px){
    .zwrap .tabs{gap:6px; margin:12px auto 10px}
    .zwrap .tab{padding:6px 12px; font-size:13.5px; gap:5px}
    .zwrap .tab .th{font-size:15px}
  }

  @media (max-width:720px), (max-height:520px){
    /* המאגר אינו נדבק לתחתית. הוא היה, כדי לא לגלול בין המשבצת לאריח —
       אבל רצועה שמכסה את תחתית המסך תמיד היא רצועה שמפריעה תמיד, וגם
       ככה בטלפון מוצג רק המאגר של העמודה שאתה עליה. */
    .zwrap .zb-pool{border:0; padding:0 0 6px; background:none}
    /* ההוראה נשארת — היא הדבר היחיד שאומר איך הלוח עובד — אבל רק
       המשפט הראשון; המשפט על אריח השמע ארוך מדי לרצועה נדבקת. */
    .zwrap .zb-pool-hint{flex:1 1 100%; min-height:0; font-size:.75rem; line-height:1.35}
    .zwrap .zb-ph-b{display:none}

    /* ההסבר הוא אותה תיבה בטלפון ובשולחן. הוא היה כפתור שפותח יריעה
       נעוצה לתחתית, כדי לחסוך את 240 הפיקסלים שלו — אבל יריעה נעוצה
       היא קיבוע, ואת אלה הורדנו. התיבה פשוט יושבת מתחת ללוח וגוללים
       אליה, בדיוק כמו במסך רחב. */
    .zwrap .zb-panelbox{margin-inline:0; padding:0}
    .zwrap .zb-pn-body{min-height:150px}
  }

  /* ============================================================
     התמונות: הסצנה והגלריה
     ------------------------------------------------------------
     קיים רק בעמודי אוצר המילים המתקדם — המעטפת שם נותנת #gallery,
     והבסיסית לא. הכול תחוּם ל-.zwrap כמו כל השאר, וכל הצבעים הם
     משתני המדור, כך שהמצב הכהה עובד בלי פלטה שנייה.

     הכלל האחד שנשבר כאן במכוון: מיקום הסימונים על התמונה נכתב
     `left/top` ולא `inset-block/inline`. הקואורדינטה מציינת נקודה
     בתצלום, והתצלום אינו מתהפך בעברית.
     ============================================================ */
  .zwrap .zg-intro{
    margin:14px auto 18px; max-width:70ch; text-align:center;
    color:var(--zw-ink); font-size:15.5px; line-height:1.7;
  }
  .zwrap .zg-head{
    display:flex; align-items:baseline; gap:10px 16px; flex-wrap:wrap;
    margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--zw-line);
  }
  .zwrap .zg-h{
    margin:0; font-size:19px; font-weight:800; color:var(--zw-ink);
    display:flex; align-items:center; gap:8px;
  }
  .zwrap .zg-h::before{
    content:""; width:5px; height:18px; border-radius:3px; background:var(--zw-acc);
  }
  .zwrap .zg-ctrl{display:flex; gap:8px; margin-inline-start:auto}
  .zwrap .zg-tog{
    font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
    border:1px solid var(--zw-line); background:var(--zw-card); color:var(--zw-ink);
    border-radius:999px; padding:6px 14px; transition:.15s;
  }
  .zwrap .zg-tog:hover{border-color:var(--zw-acc)}
  .zwrap .zg-tog.on{background:var(--zw-acc); color:var(--zw-acc-ink); border-color:var(--zw-acc)}
  .zwrap .zg-hint{margin:10px 0 0; color:var(--zw-dim); font-size:13px; line-height:1.6}
  .zwrap .zg-hint-i{margin:0; flex:1 1 100%}

  .zwrap .zg-scene{margin:0 0 30px}
  .zwrap .zg-stage{
    position:relative; border:1px solid var(--zw-line); border-radius:14px;
    overflow:hidden; background:var(--zw-card); line-height:0;
  }
  .zwrap .zg-img{width:100%; height:auto; display:block}
  /* הסימון: עיגול ממוספר על נקודה בתמונה. טבעת לבנה סביבו, כי תצלום
     יכול להיות בכל צבע מתחתיו והמספר חייב להיקרא על שניהם. */
  .zwrap .zg-mk{
    position:absolute; transform:translate(-50%,-50%);
    width:26px; height:26px; border-radius:50%; padding:0; cursor:pointer;
    /* הדיו הוא --zw-acc-ink ולא #fff: במצב כהה --zw-acc מתבהר, ולבן
       עליו הוא 2.43:1 — בדיוק המלכודת ש-theme.mjs קיים בשבילה.
       הטבעת נשארת לבנה, כי היא מפרידה את הסימון מהתצלום ולא מהעמוד. */
    background:var(--zw-acc); color:var(--zw-acc-ink); border:2px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.45);
    font-family:inherit; font-size:13px; font-weight:800; line-height:1;
    display:flex; align-items:center; justify-content:center; transition:transform .12s;
  }
  .zwrap .zg-mk:hover, .zwrap .zg-mk:focus-visible{transform:translate(-50%,-50%) scale(1.25); z-index:2}
  /* הסימון והשורה הם פריט אחד, ולכן הם נדלקים יחד. בלי זה ההוראה
     "לחיצה על שורה מסמנת אותה בתמונה" מתארת משהו שאינו קורה. */
  .zwrap .zg-mk.on{
    background:var(--zw-gold); transform:translate(-50%,-50%) scale(1.3); z-index:2;
    box-shadow:0 0 0 4px rgba(169,114,12,.35), 0 1px 4px rgba(0,0,0,.45);
  }

  .zwrap .zg-lbls{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
    gap:8px; margin-top:12px;
  }
  .zwrap .zg-lbl{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--zw-line); border-radius:12px; background:var(--zw-card);
    padding:6px 10px;
  }
  .zwrap .zg-n{
    flex:0 0 auto; width:22px; height:22px; border-radius:50%;
    background:var(--zw-acc-soft); color:var(--zw-acc);
    font-size:12px; font-weight:800; line-height:22px; text-align:center;
  }
  .zwrap .zg-lw{
    flex:1 1 auto; min-width:0; display:flex; align-items:baseline; flex-wrap:wrap;
    gap:2px 8px; background:none; border:0; padding:0; cursor:pointer;
    font-family:inherit; color:inherit; text-align:start;
  }
  .zwrap .zg-lh{font-size:19px; font-weight:700; color:var(--zw-ink)}
  .zwrap .zg-lg{font-size:13.5px; color:var(--zw-dim); flex:1 1 100%}
  .zwrap .zg-py, .zwrap .zg-card .zg-py{color:var(--zw-gold); font-size:13.5px; font-weight:700; direction:ltr}
  /* בתרגול המילה מוסתרת ולא נמחקת: השורה שומרת על גובהה, אחרת הרשימה
     כולה קופצת ברגע המעבר — אותו כלל של הלוח. */
  .zwrap .zg-scene.quiz .zg-lbl:not(.on) .zg-lh,
  .zwrap .zg-scene.quiz .zg-lbl:not(.on) .zg-py,
  .zwrap .zg-scene.quiz .zg-lbl:not(.on) .zg-lg{visibility:hidden}
  .zwrap .zg-scene.quiz .zg-lbl:not(.on){border-style:dashed}
  .zwrap .zg-scene.nohe .zg-lg{visibility:hidden}
  .zwrap .zg-lbl.on{border-color:var(--zw-acc); background:var(--zw-slot)}

  /* --- הגלריה --- */
  .zwrap .zg-words{margin:0 0 26px}
  .zwrap .zg-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;
  }
  .zwrap .zg-card{
    display:flex; flex-direction:column;
    border:1px solid var(--zw-line); border-radius:14px; background:var(--zw-card);
    overflow:hidden; transition:border-color .15s;
  }
  .zwrap .zg-card:hover{border-color:var(--zw-acc)}
  .zwrap .zg-cimg{
    display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  }
  .zwrap .zg-cimg img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
  .zwrap .zg-cbody{
    display:grid; grid-template-columns:1fr auto; align-items:start;
    gap:4px 8px; padding:10px 12px 12px;
  }
  .zwrap .zg-copen{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px;
    background:none; border:0; padding:0; cursor:pointer; text-align:start;
    font-family:inherit; color:inherit;
  }
  .zwrap .zg-ch{font-size:22px; font-weight:700; color:var(--zw-ink)}
  .zwrap .zg-copen:hover .zg-ch{color:var(--zw-acc)}
  .zwrap .zg-cg{flex:1 1 100%; font-size:14.5px; font-weight:700; color:var(--zw-ink)}
  .zwrap .zg-cn{
    grid-column:1 / -1; margin:4px 0 0;
    font-size:12.5px; line-height:1.55; color:var(--zw-dim);
  }

  /* --- התמונה בגדול ---
     היא נתלית על ה-body ולא בתוך .zwrap, כדי ש-overflow של הגלריה לא
     יחתוך אותה — ולכן היא היחידה כאן שקוראת את משתני האתר ישירות. */
  .zg-lb{
    position:fixed; inset:0; z-index:70; padding:18px;
    background:rgba(15,18,25,.78); display:none; align-items:center; justify-content:center;
  }
  .zg-lb.on{display:flex}
  .zg-lb-card{
    position:relative; background:var(--card,#fff); color:var(--ink,#182338);
    border-radius:16px; padding:14px; max-width:min(92vw,430px); text-align:center;
  }
  .zg-lb-card img{width:100%; border-radius:12px; display:block}
  .zg-lb-x{
    position:absolute; top:8px; inset-inline-end:8px; width:32px; height:32px;
    border-radius:50%; border:0; cursor:pointer; font-size:15px;
    background:rgba(0,0,0,.08); color:inherit;
  }
  .zg-lb-cap{
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    margin-top:10px; font-size:15px;
  }
  .zg-lb-cap .han{font-size:24px; font-weight:700}
  .zg-lb-cap .zg-py{color:var(--zw-gold,#a9720c); font-weight:700; direction:ltr}

  /* --- התמונה בתוך תיבת ההסבר של הלוח --- */
  .zwrap .zb-pn-img{
    float:inline-end; width:132px; aspect-ratio:4/3; object-fit:cover;
    border-radius:10px; border:1px solid var(--zw-line);
    margin-inline-start:12px; margin-bottom:8px;
  }

  @media (max-width:520px), (max-height:520px){
    .zwrap .zg-intro{font-size:14.5px; margin:10px auto 14px}
    .zwrap .zg-h{font-size:17px}
    .zwrap .zg-lbls{grid-template-columns:1fr; gap:6px}
    .zwrap .zg-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
    .zwrap .zg-ch{font-size:19px}
    .zwrap .zg-cn{display:none}      /* ההערה נמצאת בתיבת ההסבר של הלוח */
    /* 26 פיקסלים של סימון על תמונה ברוחב 360 הם כתם. הם נשארים
       לחיצים — 22 עדיין מעל יעד המגע המינימלי יחד עם הריפוד. */
    .zwrap .zg-mk{width:22px; height:22px; font-size:11.5px}
    .zwrap .zb-pn-img{width:96px}
  }

  /* ============================================================
     לוח התמונות  (ZW.imgboard)
     ------------------------------------------------------------
     הכרטיס הוא השורה. הרשת מוצהרת במספר עמודות ולא ב-auto-fill,
     מפני שהקבוצה כאן היא **שורה אחת של שלושה** — שלוש מילים — וזה
     מה שהחצים מדפדפים בו. auto-fill היה נותן מספר עמודות שתלוי
     ברוחב החלון, וקבוצה שמשנה את הצורה שלה אינה קבוצה.
     ↑ ↓ קוראים את המספר מהרשת עצמה, אז שלושת המצבים נכונים.
     ============================================================ */
  .zwrap .zi-groups{margin:0 0 26px}
  /* הריפוד קיים בכל קבוצה, גם בזו שאינה פעילה, ורק הצבע משתנה: ריפוד
     שמופיע עם הסימון מצר את הרשת ב-20 פיקסלים, והתמונות הן 4:3 — אז
     כל הכרטיסים בקבוצה מתקצרים ב-14 פיקסלים ברגע שהסמן נכנס אליה או
     יוצא ממנה. נמדד: 302 מול 288. */
  .zwrap .zi-group{
    margin:0 0 22px; padding:10px 10px 4px;
    border-radius:16px; border:1px solid transparent;
  }
  .zwrap .zi-group.on{border-color:var(--zw-line); background:var(--zw-head)}
  .zwrap .zi-ghead{display:flex; align-items:center; gap:10px; margin:0 0 8px}
  .zwrap .zi-gt{
    margin:0; font-size:13px; font-weight:700; letter-spacing:.02em;
    color:var(--zw-dim); text-transform:none;
  }
  .zwrap .zi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .zwrap .zi-card{
    display:flex; flex-direction:column; overflow:hidden; cursor:pointer;
    border:2px solid var(--zw-line); border-radius:14px; background:var(--zw-card);
    transition:border-color .15s, box-shadow .15s;
  }
  .zwrap .zi-card:hover{border-color:var(--zw-acc)}
  .zwrap .zi-card.on{border-color:var(--zw-acc); box-shadow:0 0 0 3px var(--zw-acc-soft)}
  .zwrap .zi-card.done{border-color:var(--zw-ok-line); background:var(--zw-ok-bg)}
  .zwrap .zi-card.done.on{border-color:var(--zw-acc)}
  .zwrap .zi-img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
  .zwrap .zi-noimg{
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:4/3; font-size:44px; color:var(--zw-acc); background:var(--zw-slot);
  }
  /* הכיתוב ממורכז מתחת לתמונה — זה הכיתוב שהיה בהגדלה, וההגדלה ירדה.
     min-height כדי שכרטיס שעדיין אין בו מה להראות לא יהיה נמוך
     משכנו: רשת שהשורות בה בגבהים שונים קופצת בכל שיבוץ. */
  /* שתי שורות שמורות תמיד, גם כשאין בהן דבר: בתרגול הכיתוב מתמלא
     תא־תא, ורשת שגדלה תחת היד מזיזה את כל מה שמתחתיה — אותו נימוק
     בדיוק של שורת ההוראה ושל שורת המצב. */
  .zwrap .zi-cap{padding:9px 10px 11px}
  /* גודל הגופן של השורה נקבע על השורה ולא על מה שבתוכה, כדי שקופסת
     השורה תהיה זהה כשהיא ריקה וכשהיא מלאה: רווח קשיח בגופן קטן יותר
     הוא שורה נמוכה יותר, וההפרש הזה הוא בדיוק הקפיצה שהשמירה על
     שתי השורות באה למנוע — נמדד, 79 מול 73 פיקסלים. */
  .zwrap .zi-l1{
    display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:center;
    gap:8px; font-size:22px; min-height:35px; overflow:hidden;
  }
  /* min-height ולא רק font-size: השורה היא flex, וגובה קופסת flex הוא
     גובה הפריטים שבתוכה — לא ה-line-height שלה. עם רווח קשיח הפריט
     הוא טקסט אנונימי בגופן של השורה (35), ועם הפין־יין הוא ספאן של
     13.5 (22). נמדד: 302 מול 288 על הכרטיס. */
  .zwrap .zi-l1 .zg-py{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
  .zwrap .zi-l2{font-size:14.5px; text-align:center}
  .zwrap .zi-han{font-size:22px; font-weight:700; color:var(--zw-ink)}
  .zwrap .zi-gloss{
    display:block; font-size:14.5px; font-weight:700; color:var(--zw-ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .zwrap .zi-cap .zg-py{color:var(--zw-gold); font-size:13.5px; font-weight:700; direction:ltr}
  /* מה שנחשף ולא נפתר — אותו זהב של המשבצת שנחשפה בטבלה, ומאותה
     סיבה: הוא אומר „זה ניתן לך” בלי להוסיף תג שגוזל רוחב. */
  .zwrap .zi-cap .given{color:var(--zw-gold)}

  /* ההסבר, מתחת לקבוצה שנמצאים בה */
  .zwrap .zi-slab{
    margin:14px 0 6px; padding:12px 14px 14px;
    border:1px solid var(--zw-line); border-radius:14px; background:var(--zw-card);
  }
  .zwrap .zi-slab-q{padding:8px 10px 10px}
  .zwrap .zi-slab .zb-pn-head{margin-bottom:8px}
  .zwrap .zi-wnote{
    margin:0 0 10px; font-size:14px; line-height:1.7; color:var(--zw-ink);
  }
  .zwrap .zi-slab .zb-wrap{margin:0}
  .zwrap .zi-slab .zb-pools{margin-top:10px}
  .zwrap .zi-pick{margin:10px 0 0; font-size:13px; color:var(--zw-dim)}
  .zwrap .zi-scene{margin:0 0 26px}
  .zwrap .zi-scene .zg-scene{margin-bottom:0}
  /* התווית שנבחרה — היא שההסבר שמתחת שייך לה */
  .zwrap .zg-lbl.sel{border-color:var(--zw-acc); box-shadow:0 0 0 2px var(--zw-acc-soft)}
  .zwrap .zg-mk.sel{
    background:var(--zw-gold); border-color:var(--zw-gold);
    box-shadow:0 0 0 3px var(--zw-acc-soft);
  }

  @media (max-width:900px){
    .zwrap .zi-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:520px), (max-height:520px){
    .zwrap .zi-grid{grid-template-columns:1fr; gap:10px}
    .zwrap .zi-han{font-size:19px}
    .zwrap .zi-l1{font-size:19px; min-height:30px}
    .zwrap .zi-group{padding:8px 8px 4px}
    .zwrap .zi-slab{padding:10px}
  }

  /* ============================================================
     „מילים מסביב לתמונה”
     ------------------------------------------------------------
     נתלית על ה-body כמו ההגדלה, ומאותה סיבה — ולכן היא מצהירה את
     צבעי המדור בעצמה, פעמיים כמו כל שאר האתר: פעם לתכונה ופעם
     לשאילתת המדיה המצומצמת ל-:not([data-theme="light"]).
     ============================================================ */
  .zi-ov{
    --zi-acc:#c1443b; --zi-acc-ink:#fff; --zi-gold:#a9720c; --zi-card:#fff;
    --zi-ink:#1d1b18; --zi-dim:#5d5850; --zi-line:#ded5c6;
    position:fixed; inset:0; z-index:75; padding:16px;
    background:rgba(0,0,0,.72); display:none; align-items:center; justify-content:center;
  }
  :root[data-theme="dark"] .zi-ov{
    --zi-acc:#f08a7e; --zi-acc-ink:#231512; --zi-gold:#e8c07a; --zi-card:#1c1c1a;
    --zi-ink:#eae6df; --zi-dim:#a9a396; --zi-line:#3a3a35;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .zi-ov{
      --zi-acc:#f08a7e; --zi-acc-ink:#231512; --zi-gold:#e8c07a; --zi-card:#1c1c1a;
      --zi-ink:#eae6df; --zi-dim:#a9a396; --zi-line:#3a3a35;
    }
  }
  .zi-ov.on{display:flex}
  /* width ולא max-width: הכרטיס הוא פריט flex בקופסה ממורכזת, ובלי
     רוחב מוצהר הוא מתכווץ לתוכן — כלומר ה-SVG יורד לחצי מהמסך
     והתוויות נעשות קטנות מכדי לקרוא. */
  .zi-ovcard{
    background:var(--zi-card); color:var(--zi-ink); border-radius:16px;
    padding:12px; width:min(1320px,97vw); max-height:95vh; overflow:auto;
  }
  .zi-ovhead{display:flex; align-items:center; gap:10px; margin:0 0 10px}
  .zi-ovhead b{font-size:16px}
  .zi-ovcard .zg-ctrl{display:flex; gap:8px; margin-inline-start:auto}
  .zi-ovcard .zg-tog{
    border:1px solid var(--zi-line); background:transparent; color:inherit;
    border-radius:999px; padding:5px 11px; font:inherit; font-size:13px; cursor:pointer;
  }
  .zi-ovcard .zg-tog.on{background:var(--zi-acc); color:var(--zi-acc-ink); border-color:var(--zi-acc)}
  .zi-ovstage{max-height:80vh}
  .zi-ovsvg{width:100%; height:auto; max-height:80vh; display:block}
  .zi-ovhint{margin:10px 0 0; font-size:13px; color:var(--zi-dim); line-height:1.6}
  .zi-ovl{cursor:pointer}
  .zi-ovlead{stroke:var(--zi-dim); stroke-width:2; opacity:.75}
  .zi-ovmk{fill:var(--zi-acc); stroke:#fff; stroke-width:2}
  /* המספר על הסימון: הדיו הולך אחרי המדגש. במצב כהה המדגש בהיר,
     ולבן עליו הוא 1.71:1 — נמדד, לא נאמד. */
  .zi-ovn{fill:var(--zi-acc-ink); font-size:15px; font-weight:700; text-anchor:middle}
  .zi-ovbg{fill:var(--zi-card); stroke:var(--zi-line); stroke-width:2}
  .zi-ovl.sel .zi-ovbg{stroke:var(--zi-acc); stroke-width:4}
  .zi-ovl.sel .zi-ovmk{fill:var(--zi-gold)}
  .zi-ovhan{fill:var(--zi-ink); font-size:30px; font-weight:700; text-anchor:middle}
  .zi-ovpy{fill:var(--zi-gold); font-size:19px; font-weight:700; text-anchor:middle}
  .zi-ovg{fill:var(--zi-dim); font-size:18px; text-anchor:middle}
  /* „תרגול” מסתיר את הטקסט ומשאיר את הקו ואת המסגרת: מה שמסתירים
     הוא התשובה, לא המקום שבו היא תופיע. */
  .zi-ovsvg.quiz .zi-ovl:not(.on) .zi-ovhan,
  .zi-ovsvg.quiz .zi-ovl:not(.on) .zi-ovpy,
  .zi-ovsvg.quiz .zi-ovl:not(.on) .zi-ovg{visibility:hidden}
  .zi-ovsvg.quiz .zi-ovl:not(.on) .zi-ovbg{stroke-dasharray:6 5}
  .zi-ovsvg.nohe .zi-ovg{visibility:hidden}

  /* התאים בתוך הכרטיס: נערמים, כל אחד עם השם שלו מעליו. ארבע עמודות
     ברוחב כרטיס הן 89 פיקסלים כל אחת, וכפתור השמע לבדו רחב מזה. */
  .zwrap .zi-cells{display:block; width:100%; min-width:0; border-spacing:0; margin:0}
  .zwrap .zi-cells tbody, .zwrap .zi-cells tr{display:block}
  .zwrap .zi-cells td{display:block; width:auto; padding:0 0 7px; position:relative}
  .zwrap .zi-cells td::before{
    content:attr(data-label); display:block;
    font-size:11px; font-weight:700; color:var(--zw-dim); margin:0 0 3px;
  }
  .zwrap .zi-card .zi-cells{padding:9px 10px 3px}
  .zwrap .zi-cells .zb-reveal{inset-inline-end:6px; top:auto; bottom:14px}
  /* שורת המצב ושורת ההוראה יושבות בתוך הקבוצה, לא בראש העמוד */
  .zwrap .zi-group > .zb-status{margin:0 0 6px}
  .zwrap .zi-group > .zb-hintbar{margin:0 0 10px}