/* GC Academy lesson interactives: one design system for all 22 types (docs/interactives-design-system.md).
   Tokens first, then shared parts (card, button, chip, banner, dots), then each type. Only transform and opacity move.
   Colors come from the Academy tokens (--purple, --pink, --lav, --ink, --line); the fallbacks keep it readable anywhere.
   Every control is at least 44px, has a visible focus ring, and reduced motion swaps movement for a calm still highlight. */

/* ---------- 1. tokens ---------- */
.ix,.ix-lb{
  --ixp:var(--purple,#6b3fa0);--ixpd:#4e2a7c;--ixk:var(--pink,#ff9ccb);--ixl:#efe3ff;--ixl2:#e2d0fa;--ixi:var(--ink,#2b2233);--ixline:var(--line,#e6d9f0);--ixmuted:var(--muted,#6b5f73);--ixpaper:#fff;
  --ixok:var(--ok,#176b43);--ixokbg:var(--ok-bg,#e4f5ec);--ixwarm:#8a4a00;--ixwarmline:#b8741a;--ixwarmbg:#fff3df;--ixgold:#ffc93c;
  --ixr1:12px;--ixr2:18px;--ixr3:26px;--ixrp:999px;
  --ixs1:4px;--ixs2:8px;--ixs3:12px;--ixs4:16px;--ixs5:24px;
  --ixsh1:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(43,34,51,.1),0 6px 14px -8px rgba(107,63,160,.35);
  --ixsh2:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(43,34,51,.1),0 12px 24px -10px rgba(107,63,160,.45);
  --ixsh3:0 18px 40px -12px rgba(43,34,51,.45);
  --ixd1:120ms;--ixd2:200ms;--ixd3:320ms;--ixe:cubic-bezier(.2,.8,.2,1);--ixspring:cubic-bezier(.34,1.56,.64,1);
  --pc0:#6b3fa0;--pc1:#c4307a;--pc2:#0f7a7a;--pc3:#a35f00;--pc4:#2c5fd0}
.ix{
  position:relative;background:var(--ixpaper);border:2px solid var(--ixline);border-radius:var(--ixr3);padding:var(--ixs4) var(--ixs4) var(--ixs5);margin:22px 0;color:var(--ixi);max-width:100%;overflow-wrap:anywhere;box-shadow:var(--ixsh1);font-size:1rem;line-height:1.45}
.ix[data-kind=instruction]{--acc:var(--ixp)}
.ix[data-kind=assessment]{--acc:#c4307a}
.ix[data-kind=game]{--acc:#0f7a7a}
.ix::before{content:'';position:absolute;left:18px;right:18px;top:-2px;height:5px;border-radius:0 0 6px 6px;background:var(--acc,var(--ixp))}
.ix *{box-sizing:border-box}
.ix button{font-family:inherit}
.ix :focus-visible{outline:3px solid var(--ixp);outline-offset:3px;border-radius:var(--ixr1)}
.ix-big{font-size:1.14rem}
.ix p{margin:0 0 var(--ixs2)}
.ix-fxlayer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:5}

/* ---------- 2. shared parts ---------- */
.ix-lead{display:flex;gap:var(--ixs3);align-items:center;background:linear-gradient(180deg,#f6eeff,var(--ixl));border-radius:var(--ixr2);padding:var(--ixs2) var(--ixs3);margin:6px 0 var(--ixs4);font-weight:700}
.ix-lead p{margin:0;flex:1}
.ix-lead-ic{flex:none;display:inline-flex;width:44px;height:44px;border-radius:50%;background:#fff;align-items:center;justify-content:center;box-shadow:var(--ixsh1)}
.ix-say{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ixline);background:#fff;color:var(--ixp);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--ixsh1);transition:transform var(--ixd1) var(--ixe),background var(--ixd1)}
.ix-say:hover{background:var(--ixl)}
.ix-say:active{transform:scale(.94)}
.ix-status{min-height:1.5em;margin:var(--ixs2) 0 0;font-weight:700;color:var(--ixp)}
.ix-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:var(--ixs3)}
.ix-center{display:flex;justify-content:center;margin:10px 0}
:is(.ix,.ix-lb) .ix-btn{min-height:48px;padding:10px 22px;border-radius:var(--ixrp);border:2px solid var(--ixp);background:var(--ixp);color:#fff;font-weight:800;font-size:1rem;cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--ixpd),0 8px 14px -8px rgba(78,42,124,.6);transition:transform var(--ixd1) var(--ixe),box-shadow var(--ixd1) var(--ixe),background var(--ixd1)}
:is(.ix,.ix-lb) .ix-btn:hover:not(:disabled){transform:translateY(-1px)}
:is(.ix,.ix-lb) .ix-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ixpd)}
:is(.ix,.ix-lb) .ix-btn.soft{background:#fff;color:var(--ixp);box-shadow:0 3px 0 var(--ixl2),0 8px 14px -10px rgba(107,63,160,.4)}
:is(.ix,.ix-lb) .ix-btn.pink{background:var(--ixk);border-color:#e0689f;color:var(--ixi);box-shadow:0 3px 0 #e0689f,0 8px 14px -8px rgba(224,104,159,.7)}
:is(.ix,.ix-lb) .ix-btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.ix-img{max-width:100%;max-height:260px;border-radius:var(--ixr2);display:block;margin:0 auto 10px;object-fit:contain}
.ix-emoji{font-size:2.6em;line-height:1;display:block;text-align:center;margin-bottom:6px}
.ix-art{display:block;margin:0 auto 6px}
.ix-body{display:grid;gap:var(--ixs2)}
.ix-txt p:last-child{margin-bottom:0}
.ix-count,.ix-progress,.ix-pos{font-weight:800;color:var(--ixmuted);font-size:.9em}
.ix-progress{margin:0}
.ix-qtxt{font-weight:800;font-size:1.08em}
.ix-prog{display:flex;align-items:center;gap:var(--ixs3);flex-wrap:wrap;margin-bottom:var(--ixs3)}
.ix-streak{margin-left:auto;font-weight:800;color:var(--ixwarm);background:var(--ixwarmbg);border-radius:var(--ixrp);padding:2px 12px;font-size:.88em}
.ix-streak:empty{display:none}
.ix-pdots{display:flex;gap:6px;align-items:center}
.ix-pd{width:12px;height:12px;border-radius:50%;background:var(--ixl2);transition:transform var(--ixd2) var(--ixspring),background var(--ixd2)}
.ix-pd.cur{background:#fff;box-shadow:0 0 0 3px var(--ixp);transform:scale(1.15)}
.ix-pd.fin{background:var(--ixp)}
.ix-pd.star{background:var(--ixgold);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ixgold)}
.ix-banner{display:flex;gap:var(--ixs3);align-items:center;border-radius:var(--ixr2);padding:var(--ixs2) var(--ixs3);margin-top:var(--ixs3);animation:ixrise var(--ixd3) var(--ixe)}
.ix-banner p{margin:0;font-weight:700}
.ix-banner.ok{background:var(--ixokbg);border:2px solid #9fd6b8}
.ix-banner.almost{background:var(--ixwarmbg);border:2px solid var(--ixwarmline)}
.ix-banner.info{background:var(--ixl);border:2px solid var(--ixl2)}
.ix-banner svg{flex:none}
.ix-fb{min-height:0}
.ix-done{display:flex;gap:var(--ixs4);align-items:center;flex-wrap:wrap;background:var(--ixokbg);border:2px solid #9fd6b8;color:var(--ixi);border-radius:var(--ixr2);padding:var(--ixs3) var(--ixs4);font-weight:800;margin-top:var(--ixs3);animation:ixrise var(--ixd3) var(--ixe)}
.ix-done p{margin:0;flex:1 1 200px}
.ix-done .ix-guide{margin:-6px 0 -10px}
.ix-lesson-top .ixa{flex:none}
.ix-stars{display:flex;gap:2px}
.ix-stars .ixa.off{filter:grayscale(1);opacity:.35}
.ixa-img{display:inline-block;object-fit:contain;flex:none;max-width:none;user-select:none;-webkit-user-drag:none}
.ix-stars .ixa-img.off{filter:none;opacity:1}
.ix-stars .ixa.on{animation:ixpopin var(--ixd3) var(--ixspring) both}
.ix-stars .ixa.on:nth-child(2){animation-delay:.1s}.ix-stars .ixa.on:nth-child(3){animation-delay:.2s}
.ix-mark{display:inline-flex;margin-left:auto;flex:none}
.ixa .p1{fill:#ff9ccb}.ixa .p2{fill:#cbb2ff}.ixa .p3{fill:#ffd34d}.ixa .p4{fill:#8fdcb4}.ixa .p5{fill:#8ec5ff}.ixa .wh{fill:#fff}.ixa .hl{fill:#fff;opacity:.55}
.ixa .ln{stroke:#4e2a7c;stroke-width:2;stroke-linejoin:round}
.ixa .ln0{stroke:#4e2a7c;stroke-width:2;stroke-linecap:round;fill:none}
.ixa .nofill{fill:none}.ixa .thick{stroke-width:4}.ixa .hlstroke{stroke:#fff;opacity:.7}
.ixa{overflow:visible}

/* ---------- 3. instruction ---------- */
/* collapse: grid rows animate from 0 to full height; the closed part is hidden from everyone */
.ix-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ixd3) var(--ixe)}
.ix-collapse.open{grid-template-rows:1fr}
.ix-col-in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear var(--ixd3)}
.ix-collapse.open>.ix-col-in{visibility:visible;transition-delay:0s}
.ix-acc-row{border:2px solid var(--ixline);border-radius:var(--ixr2);margin-bottom:10px;overflow:hidden;background:#fff;box-shadow:var(--ixsh1);transition:border-color var(--ixd2)}
.ix-acc-row.open{border-color:var(--ixp)}
.ix-acc-h{margin:0;font:inherit}
.ix-acc-btn{width:100%;min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:10px 16px;border:0;background:#fff;color:var(--ixp);font-weight:800;font-size:1.02em;cursor:pointer;transition:background var(--ixd2)}
.ix-acc-btn:hover{background:#faf6ff}
.ix-acc-btn[aria-expanded=true]{background:var(--ixl)}
.ix-chev{display:inline-flex;transition:transform var(--ixd3) var(--ixe)}
.ix-acc-btn[aria-expanded=true] .ix-chev,.ix-tbtn[aria-expanded=true] .ix-chev{transform:rotate(180deg)}
.ix-acc-panel{padding:12px 16px 14px;border-top:2px solid var(--ixline)}

.ix-tablist{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ix-tab{min-height:46px;padding:8px 18px;border-radius:var(--ixrp);border:2px solid var(--ixline);background:#fff;color:var(--ixp);font-weight:800;cursor:pointer;flex:1 1 auto;box-shadow:var(--ixsh1);transition:transform var(--ixd1) var(--ixe),background var(--ixd2),color var(--ixd2)}
.ix-tab:hover{background:#faf6ff}
.ix-tab[aria-selected=true]{background:var(--ixp);border-color:var(--ixp);color:#fff;box-shadow:0 3px 0 var(--ixpd)}
.ix-tabpanel{border:2px solid var(--ixline);border-radius:var(--ixr2);padding:14px 16px;background:#fff;animation:ixrise var(--ixd3) var(--ixe)}
.ix-tabwrap.vert{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:12px}
.ix-tabwrap.vert .ix-tablist{flex-direction:column;margin:0}
.ix-tabwrap.vert .ix-tab{border-radius:var(--ixr1);text-align:left}
@media (max-width:480px){.ix-tabwrap.vert{grid-template-columns:1fr}.ix-tabwrap.vert .ix-tablist{flex-direction:row}}

/* flip boxes and flashcards: a real 3D flip; the face you cannot see is also hidden from screen readers */
.ix-flipgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.ix-flipbox,.ix-card{position:relative;display:block;width:100%;min-height:150px;padding:0;border:0;background:none;color:var(--ixi);cursor:pointer;perspective:900px;border-radius:var(--ixr2);text-align:center;font-weight:800;font-size:1.05em}
.ix-flip3{display:grid;min-height:inherit;transform-style:preserve-3d;transition:transform var(--ixd3) var(--ixe)}
.is-back>.ix-flip3{transform:rotateY(180deg)}
.ix-face{grid-area:1/1;min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px;border-radius:var(--ixr2);border:2px solid var(--ixp);background:linear-gradient(180deg,#faf5ff,var(--ixl));box-shadow:var(--ixsh1);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:visibility 0s linear calc(var(--ixd3) / 2)}
.ix-face.front{background-image:linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)),url(../img/ix/card-back.webp);background-size:auto,cover;background-position:center}
.ix-face.back{transform:rotateY(180deg);background:linear-gradient(180deg,#7d4fb8,var(--ixp));color:#fff;border-color:var(--ixpd)}
.ix-flipbox:not(.is-back) .ix-face.back,.ix-card:not(.is-back) .ix-face.back,.is-back>.ix-flip3>.ix-face.front{visibility:hidden}
.ix-flipbox:hover:not(.is-back),.ix-card:hover:not(.is-back){transform:translateY(-2px)}
.ix-fliphint{display:block;font-weight:600;opacity:.8;font-size:.78em}
.ix-card{min-height:200px;font-size:1.22em}
.ix-deck{display:grid;gap:12px;max-width:540px;margin:0 auto}
.ix-deck .ix-row{justify-content:center}
.ix-meter{height:8px;border-radius:var(--ixrp);background:var(--ixl2);overflow:hidden}
.ix-meter>i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--ixk),var(--ixp));border-radius:inherit;transition:transform var(--ixd3) var(--ixe)}
.ix-piles{display:flex;justify-content:space-between;font-weight:800;font-size:.9em;color:var(--ixmuted)}

.ix-q.boxed{border:2px dashed var(--ixp);border-radius:var(--ixr2);padding:14px;background:var(--ixl);display:flex;gap:10px;align-items:flex-start}
.ix-ans{background:var(--ixokbg);border:2px solid #9fd6b8;border-radius:var(--ixr2);padding:12px 16px;margin:10px 0 2px}
.ix-ans ol{margin:0;padding-left:1.3em}
.ix-ans p:last-child{margin-bottom:0}

/* timeline and slideshow: a line that fills, cards that slide in from the way you are going */
.ix-stage{background:linear-gradient(180deg,#faf5ff,var(--ixl));border-radius:var(--ixr2);padding:var(--ixs4);min-height:150px;overflow:hidden;touch-action:pan-y;border:2px solid var(--ixl2)}
.ix-stage:focus-visible{outline-offset:2px}
.ix-slide{animation:ixslide var(--ixd3) var(--ixe) both}
.ix-slide.prev{animation-name:ixslideback}
.ix-slide h4{margin:0 0 8px;font-size:1.15em;color:var(--ixp)}
.ix-date{display:inline-block;font-weight:800;color:#fff;background:var(--ixp);border-radius:var(--ixrp);padding:2px 14px;margin-bottom:8px;font-size:.9em}
.ix-nav{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:var(--ixs3)}
.ix-track{position:relative;display:flex;justify-content:space-between;gap:6px;margin:6px 4px var(--ixs3);padding:0 0;min-height:44px;align-items:center}
.ix-stepper>.ix-track:last-child{margin:var(--ixs3) 4px 0}
.ix-line{position:absolute;left:11px;right:11px;top:50%;height:6px;margin-top:-3px;border-radius:var(--ixrp);background:var(--ixl2);overflow:hidden}
.ix-line>i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--ixk),var(--ixp));transition:transform var(--ixd3) var(--ixe)}
.ix-dot{position:relative;z-index:1;flex:none;width:24px;height:24px;border-radius:50%;border:3px solid var(--ixp);background:#fff;cursor:pointer;padding:0;transition:transform var(--ixd2) var(--ixspring),background var(--ixd2)}
.ix-dot::after{content:'';position:absolute;inset:-10px}
.ix-dot.past{background:var(--ixk);border-color:var(--ixpd)}
.ix-dot.on{background:var(--ixp);transform:scale(1.25);box-shadow:0 0 0 5px var(--ixl2)}

/* lightbox */
.ix-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.ix-thumb{border:2px solid var(--ixline);border-radius:var(--ixr2);background:#fff;padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;color:var(--ixi);font-weight:700;box-shadow:var(--ixsh1);transition:transform var(--ixd2) var(--ixe),box-shadow var(--ixd2),border-color var(--ixd2)}
.ix-thumb:hover{border-color:var(--ixp);transform:translateY(-3px);box-shadow:var(--ixsh2)}
.ix-thumb .ix-img{max-height:120px}
.ix-lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;font-family:inherit;color:#2b2233}
.ix-lb-back{position:absolute;inset:0;background:rgba(43,34,51,.72);animation:ixfade var(--ixd2) ease both}
.ix-lb-card{position:relative;background:#fff;border-radius:var(--ixr3);padding:18px;max-width:680px;width:100%;max-height:92vh;overflow:auto;box-shadow:var(--ixsh3);animation:ixzoom var(--ixd3) var(--ixe) both;touch-action:pan-y}
.ix-lb-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:2px solid #e6d9f0;background:#fff;color:#6b3fa0;cursor:pointer;z-index:2;display:inline-flex;align-items:center;justify-content:center}
.ix-lb-in{padding-top:34px;text-align:center}
.ix-lb-in .ix-img{max-height:55vh;transition:transform var(--ixd3) var(--ixe);cursor:zoom-in;transform-origin:center}
.ix-lb-in.zoomed{overflow:auto}
.ix-lb-in.zoomed .ix-img{transform:scale(1.8);cursor:zoom-out;max-height:none}
.ix-lb-cap{font-weight:800}
.ix-lb .ix-btn{box-shadow:none}

/* click-to-reveal table: the header stays put while the rows scroll on small screens */
.ix-tablewrap{overflow:auto;max-height:min(70vh,560px);border-radius:var(--ixr2)}
.ix-grid{width:100%;border-collapse:separate;border-spacing:0 8px}
.ix-grid th,.ix-grid td{padding:10px 12px;text-align:left;vertical-align:middle;overflow-wrap:normal;word-break:normal}
.ix-grid th:first-child{min-width:6.6em}
@media (max-width:520px){.ix-grid th,.ix-grid td{padding:10px 8px}.ix-grid thead th{font-size:.86em}.ix-tbtn{gap:4px;font-size:.92em}.ix-grid td{font-size:.95em}}
.ix-grid thead th{position:sticky;top:0;z-index:1;background:#fff;color:var(--ixp);font-weight:800;border-bottom:3px solid var(--ixl2)}
.ix-trow th,.ix-trow td{background:var(--ixl);transition:background var(--ixd2)}
.ix-trow th:first-child{border-radius:var(--ixr1) 0 0 var(--ixr1)}.ix-trow td:last-child{border-radius:0 var(--ixr1) var(--ixr1) 0}
.ix-trow td:not([hidden]){animation:ixunfold var(--ixd3) var(--ixe) both}
.ix-tbtn{min-height:44px;width:100%;text-align:left;border:0;background:transparent;color:var(--ixp);font-weight:800;font-size:1em;cursor:pointer;padding:0;display:flex;align-items:center;gap:8px}
.ix-trow.open th,.ix-trow.open td{background:var(--ixokbg)}
.ix-all{background:none;border:0;color:var(--ixp);font-weight:800;text-decoration:underline;cursor:pointer;min-height:44px;font-size:1em}

/* ---------- 4. practice ---------- */
.ix-choices{display:grid;gap:10px;margin:12px 0}
.ix-choices.three{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.ix-choice,.ix-bin{display:flex;align-items:center;gap:12px;min-height:54px;text-align:left;padding:10px 16px;border-radius:var(--ixr2);border:2px solid var(--ixline);background:#fff;color:var(--ixi);font-weight:700;font-size:1rem;cursor:pointer;box-shadow:var(--ixsh1);transition:transform var(--ixd1) var(--ixe),border-color var(--ixd2),background var(--ixd2),box-shadow var(--ixd2)}
.ix-choice::before{content:'';flex:none;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--ixp);background:#fff;transition:background var(--ixd2),box-shadow var(--ixd2)}
.ix-choice[role=checkbox]::before{border-radius:6px}
.ix-choice:hover:not(:disabled),.ix-bin:hover:not(:disabled){border-color:var(--ixp);background:#faf6ff;transform:translateY(-1px);box-shadow:var(--ixsh2)}
.ix-choice:active:not(:disabled),.ix-bin:active:not(:disabled){transform:scale(.985)}
.ix-choice.sel{border-color:var(--ixp);background:var(--ixl)}
.ix-choice.sel::before{background:var(--ixp);box-shadow:inset 0 0 0 3px #fff}
.ix-choice.ok,.ix-bin.ok,.ix-m.ok,.ix-oitem.ok,.ix-slot.ok,.ix-input.ok{border-color:#2a9462;background:var(--ixokbg);color:var(--ixi)}
.ix-choice.no,.ix-bin.no,.ix-m.no,.ix-oitem.no,.ix-slot.no,.ix-input.no{border-color:var(--ixwarmline);background:var(--ixwarmbg);color:var(--ixi)}
.ix-choice.ok::before{background:#2a9462;border-color:#2a9462;box-shadow:inset 0 0 0 3px #fff}
.ix-choice.no::before{border-color:var(--ixwarmline)}
.ix-choice:disabled,.ix-bin:disabled{cursor:default}
.ix-choice:disabled:not(.ok):not(.no):not(.sel),.ix-bin:disabled:not(.ok):not(.no){opacity:.65}
.ix-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.ix-bin{justify-content:center;text-align:center}
.ix-bigitem{display:flex;gap:10px;align-items:center;justify-content:center;font-size:1.4em;background:linear-gradient(180deg,#faf5ff,var(--ixl));border:2px solid var(--ixl2);border-radius:var(--ixr2);padding:16px;margin:8px 0;animation:ixrise var(--ixd3) var(--ixe)}

/* matching: each pair you make gets its own color and number */
.ix-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ix-mcol{display:grid;gap:10px;align-content:start}
.ix-m{--pc:var(--ixp);display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:54px;padding:8px 14px;border-radius:var(--ixr2);border:2px solid var(--ixline);background:#fff;color:var(--ixi);font-weight:700;font-size:1rem;cursor:pointer;text-align:left;box-shadow:var(--ixsh1);transition:transform var(--ixd1) var(--ixe),border-color var(--ixd2),background var(--ixd2)}
.ix-m:hover{transform:translateY(-1px)}
.ix-m.sel{border-color:var(--ixp);background:var(--ixl);box-shadow:0 0 0 4px var(--ixl2);transform:translateY(-2px)}
.ix-m.paired{border-color:var(--pc);box-shadow:inset 6px 0 0 var(--pc),var(--ixsh1)}
.ix-m[data-c="0"]{--pc:var(--pc0)}.ix-m[data-c="1"]{--pc:var(--pc1)}.ix-m[data-c="2"]{--pc:var(--pc2)}.ix-m[data-c="3"]{--pc:var(--pc3)}.ix-m[data-c="4"]{--pc:var(--pc4)}
.ix-badge{flex:none;min-width:26px;height:26px;border-radius:50%;background:var(--pc,var(--ixp));color:#fff;font-size:.85em;font-weight:800;display:inline-flex;align-items:center;justify-content:center;animation:ixpopin var(--ixd2) var(--ixspring)}
.ix-badge:empty{display:none}
@media (max-width:420px){.ix-mgrid{gap:8px}.ix-m{padding:8px 10px;font-size:.95rem}}

/* ordering: drag with a mouse (or use the arrows); the others slide out of the way */
.ix-olist{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px;position:relative}
.ix-oitem{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border:2px solid var(--ixline);border-radius:var(--ixr2);padding:6px 8px 6px 10px;min-height:58px;background:#fff;box-shadow:var(--ixsh1);transition:border-color var(--ixd2),background var(--ixd2),box-shadow var(--ixd2)}
.ix-oitem.dragging{position:relative;z-index:4;box-shadow:var(--ixsh3);border-color:var(--ixp);background:#faf6ff;cursor:grabbing;transition:none}
.ix-oitem.dragging .ix-otxt{user-select:none}
.ix-oitem .ix-img{flex:none;width:56px;height:56px;max-height:none;object-fit:contain;margin:0}
.ix-big .ix-oitem .ix-img{width:72px;height:72px}
.ix-oitem.pic .ix-otxt{flex:1 1 0;min-width:5.5em}
@media (max-width:520px){.ix-oitem .ix-img{width:44px;height:44px}.ix-oitem.pic{gap:6px 8px}.ix-oitem.pic .ix-omv{gap:4px}}
.ix-bigitem{flex-wrap:wrap}
.ix-bigitem strong{flex:1 1 8ch;min-width:0;overflow-wrap:break-word;text-align:left}
.ix-bigitem .ix-img{flex:none;width:88px;height:88px;max-height:none;margin:0}
@media (max-width:520px){.ix-bigitem{font-size:1.2em}.ix-bigitem .ix-img{width:72px;height:72px}}
.ix-grip{flex:none;color:var(--ixmuted);cursor:grab;display:none;touch-action:none;padding:8px 2px}
@media (hover:hover) and (pointer:fine){.ix-grip{display:inline-flex}}
.ix-onum{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ixl);color:var(--ixp);font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.ix-otxt{flex:1 1 9em;min-width:0;font-weight:700;overflow-wrap:break-word}
.ix-omv{display:flex;gap:6px;margin-left:auto}
.ix-mv{width:44px;height:44px;border-radius:var(--ixr1);border:2px solid var(--ixp);background:#fff;color:var(--ixp);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--ixd1) var(--ixe),background var(--ixd1)}
.ix-mv:hover:not(:disabled){background:var(--ixl)}
.ix-mv:active:not(:disabled){transform:scale(.92)}
.ix-mv:disabled{opacity:.3;cursor:default}
.ix-orderhint{font-weight:700;color:var(--ixp)}

/* ---------- 5. games ---------- */
.ix-pbar{display:flex;align-items:center;gap:10px;margin-bottom:var(--ixs3)}
.ix-pbar .ix-meter{flex:1}
.ix-tray{display:flex;flex-wrap:wrap;gap:10px;min-height:60px;padding:12px;background:var(--ixl);border:2px dashed var(--ixl2);border-radius:var(--ixr2);margin-bottom:var(--ixs4)}
.ix-chip{min-height:48px;padding:8px 18px;border-radius:var(--ixrp);border:2px solid var(--ixp);background:#fff;color:var(--ixi);font-weight:800;font-size:1rem;cursor:pointer;display:inline-flex;gap:8px;align-items:center;box-shadow:0 3px 0 var(--ixl2),var(--ixsh1);transition:transform var(--ixd2) var(--ixspring),background var(--ixd2),box-shadow var(--ixd2)}
@media (hover:hover) and (pointer:fine){.ix-chip{cursor:grab}}
.ix-chip:hover{transform:translateY(-2px)}
.ix-chip.sel{background:var(--ixp);color:#fff;transform:translateY(-3px) scale(1.04);box-shadow:var(--ixsh2)}
.ix-chip.lifted{opacity:.35}
.ix-chip .ix-img{max-height:44px;margin:0}
.ix-ghost{position:fixed;z-index:400;pointer-events:none;margin:0;transform:translate(-50%,-50%) scale(1.06) rotate(-2deg);box-shadow:var(--ixsh3);background:var(--ixp);color:#fff;border:2px solid var(--ixpd);border-radius:var(--ixrp);padding:8px 18px;min-height:48px;display:inline-flex;align-items:center;font:800 1rem/1.2 inherit;font-family:inherit}
.ix-ghost.back{transition:transform var(--ixd3) var(--ixspring),opacity var(--ixd3)}
.ix-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.ix-zone{min-height:140px;border-radius:var(--ixr2);border:3px dashed var(--ixp);background:#fff;color:var(--ixi);display:flex;flex-direction:column;gap:8px;align-items:stretch;padding:12px 10px;cursor:pointer;text-align:center;font-size:1rem;transition:background var(--ixd2),transform var(--ixd2) var(--ixe),border-color var(--ixd2),box-shadow var(--ixd2)}
.ix-zone:hover{background:#faf6ff}
.ix-zone.ready{border-color:var(--acc,var(--ixp));background:#faf6ff}
.ix-zone.over{background:var(--ixl);transform:scale(1.03);box-shadow:0 0 0 5px var(--ixl2);border-style:solid}
.ix-zname{font-weight:800;color:var(--ixp)}
.ix-zart{display:flex;justify-content:center}
.ix-zitems{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ix-placed{background:var(--ixokbg);border:2px solid #2a9462;border-radius:var(--ixrp);padding:4px 12px;font-weight:700;font-size:.92em;animation:ixdrop var(--ixd3) var(--ixspring) both}
.ix-board.meadow{background:url(../img/ix/bg-meadow.webp) center bottom/cover no-repeat,#fbfff8;border-radius:var(--ixr3);padding:12px}
.ix-board.venn .ix-zones{grid-template-columns:1fr 1.25fr 1fr;gap:0}
.ix-board.venn .ix-zone{border-radius:50%/46%;min-height:190px;justify-content:center;border-style:solid;border-width:3px;margin-inline:-14px;position:relative}
.ix-board.venn .ix-zone:first-child{margin-left:0}.ix-board.venn .ix-zone:last-child{margin-right:0}
.ix-board.venn .ix-zone.l{background:#ffe3f1;border-color:#e0689f}.ix-board.venn .ix-zone.r{background:#e3eeff;border-color:#2c5fd0}.ix-board.venn .ix-zone.b{background:#efe0ff;border-color:var(--ixp);z-index:1}
.ix-board.venn .ix-zone.over{transform:scale(1.04)}
.ix-board.venn .ix-zname{color:var(--ixi)}
@media (max-width:560px){.ix-board.venn .ix-zones{grid-template-columns:1fr;gap:12px}.ix-board.venn .ix-zone{border-radius:var(--ixr3);min-height:110px;margin-inline:0}}

/* balloons float gently, wobble when it is not one, and pop with a little burst */
.ix-blns{background-image:url(../img/ix/bg-sky.webp),linear-gradient(180deg,#eef6ff,#fff 80%);background-size:cover,auto;background-position:center top;display:flex;flex-wrap:wrap;gap:22px 16px;justify-content:center;margin:var(--ixs4) 0 26px;padding:var(--ixs3) 0 var(--ixs2);border-radius:var(--ixr2);}
.ix-bln{position:relative;width:86px;height:106px;border-radius:50% 50% 48% 48%/58% 58% 42% 42%;border:2px solid rgba(43,34,51,.35);color:#2b2233;font-weight:800;font-size:.86rem;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;box-shadow:inset -8px -10px 0 rgba(43,34,51,.08);animation:ixfloat 3.6s ease-in-out infinite;transition:filter var(--ixd2)}
.ix-bln:nth-child(2n){animation-duration:4.2s;animation-delay:-1.2s}.ix-bln:nth-child(3n){animation-duration:3.1s;animation-delay:-2s}
.ix-blns.big .ix-bln{width:132px;height:158px;font-size:1.05rem}
.ix-bln::before{content:'';position:absolute;top:14%;left:18%;width:16%;height:22%;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(25deg)}
.ix-bln::after{content:'';position:absolute;bottom:-22px;left:50%;width:2px;height:20px;background:rgba(43,34,51,.4);transform-origin:top;animation:ixsway 3s ease-in-out infinite}
.ix-bln.ixb0{background:#ffb3d6}.ix-bln.ixb1{background:#cbb2ff}.ix-bln.ixb2{background:#ffe08a}.ix-bln.ixb3{background:#a9e6c9}.ix-bln.ixb4{background:#a9d4ff}
.ix-bln:hover:not(:disabled),.ix-bln:focus-visible{filter:brightness(1.05);animation-play-state:paused}
.ix-bln.popping{animation:ixburst .36s var(--ixe) forwards}
.ix-bln.popped{animation:none;opacity:.35;transform:scale(.6);filter:grayscale(.4)}
.ix-bln.popped::after,.ix-bln.popping::after{display:none}
.ix-bln:disabled:not(.popped){opacity:.85}
.ix-bt{pointer-events:none}

/* fill in: words pop into their blanks */
.ix-sentence{font-size:1.18em;line-height:2.5}
.ix-slot{min-width:100px;min-height:46px;padding:4px 14px;border-radius:var(--ixr1);border:2.5px dashed var(--ixp);background:var(--ixl);color:var(--ixi);font-weight:800;font-size:1em;cursor:pointer;vertical-align:middle;margin:0 4px;transition:background var(--ixd2),border-color var(--ixd2),transform var(--ixd2) var(--ixspring)}
.ix-slot.filled{border-style:solid;background:#fff;animation:ixpopin var(--ixd2) var(--ixspring)}
.ix-slot.target{box-shadow:0 0 0 5px var(--ixk);transform:scale(1.04)}
.ix-input{width:9em;min-width:110px;min-height:46px;padding:4px 12px;border-radius:var(--ixr1);border:2.5px solid var(--ixp);font:inherit;font-weight:700;margin:0 4px;vertical-align:middle;max-width:100%;background:#fff}
.ix-input.wide{min-width:220px;flex:1}
.ix-bank{display:flex;flex-wrap:wrap;gap:10px;margin:var(--ixs3) 0;padding:12px;background:var(--ixl);border:2px dashed var(--ixl2);border-radius:var(--ixr2)}
.ix-word{min-height:48px;padding:8px 20px;border-radius:var(--ixrp);border:2px solid var(--ixp);background:#fff;color:var(--ixi);font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 3px 0 var(--ixl2),var(--ixsh1);transition:transform var(--ixd2) var(--ixspring),opacity var(--ixd2)}
.ix-word:hover:not(:disabled){transform:translateY(-2px)}
.ix-word.used{opacity:.3;cursor:default;box-shadow:none}

/* Brain Blitz: a clean board, no clock */
.ix-bz-score{font-weight:800;color:var(--ixp);font-size:1.12em;display:flex;gap:8px;align-items:center}
.ix-bz-board{display:grid;grid-template-columns:repeat(var(--cats,3),minmax(0,1fr));gap:10px}
.ix-bz-col{display:grid;gap:10px;align-content:start}
.ix-bz-col h4{margin:0;text-align:center;background:linear-gradient(180deg,#7d4fb8,var(--ixp));color:#fff;border-radius:var(--ixr1);padding:10px 6px;font-size:.92em;line-height:1.2;box-shadow:0 3px 0 var(--ixpd)}
.ix-tile{min-height:58px;border-radius:var(--ixr2);border:2px solid var(--ixp);background:linear-gradient(180deg,#fff,var(--ixl));color:var(--ixp);font-weight:800;font-size:1.25rem;cursor:pointer;box-shadow:0 3px 0 var(--ixl2),var(--ixsh1);transition:transform var(--ixd2) var(--ixspring)}
.ix-tile:hover:not(:disabled){transform:translateY(-2px) scale(1.03)}
.ix-tile:disabled{cursor:default;opacity:.55;box-shadow:none}
.ix-tile.ok{background:var(--ixokbg);border-color:#2a9462;color:var(--ixok);opacity:1}
.ix-tile.cur{opacity:1;background:var(--ixp);color:#fff}
.ix-bz-panel{margin-top:var(--ixs4)}
.ix-bz-panel:not(:empty){border-top:2px dashed var(--ixline);padding-top:var(--ixs3);animation:ixrise var(--ixd3) var(--ixe)}
@media (max-width:460px){.ix-bz-col h4{font-size:.78em}.ix-tile{font-size:1.05rem;min-height:50px}}

/* ---------- 6. Grades 1-2: bigger, simpler, calmer ---------- */
.ix-big .ix-btn,.ix-big .ix-choice,.ix-big .ix-bin,.ix-big .ix-m,.ix-big .ix-word,.ix-big .ix-chip{min-height:62px}
.ix-big .ix-lead{font-size:1.1em}
.ix-big .ix-bln{animation:none}
.ix-big .ix-sentence{font-size:1.3em}

/* ---------- 7. reactions (js/interactives/fx.js) ---------- */
.ix-pop{animation:ixpopin var(--ixd3) var(--ixspring)}
.ix-shake{animation:ixshake var(--ixd3) ease}
.ix-glow-ok{box-shadow:0 0 0 5px rgba(42,148,98,.4)!important}
.ix-glow-almost{box-shadow:0 0 0 5px rgba(184,116,26,.5)!important}
.ix-sp{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:2px;transform:rotate(45deg);animation:ixspark .65s var(--ixe) forwards}
.ix-sp.c0{background:#ff9ccb}.ix-sp.c1{background:#ffd34d}.ix-sp.c2{background:#b79cff}

@keyframes ixrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ixfade{from{opacity:0}to{opacity:1}}
@keyframes ixzoom{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@keyframes ixslide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes ixslideback{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes ixunfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes ixpopin{0%{transform:scale(.6);opacity:.4}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes ixdrop{0%{transform:translateY(-14px) scale(.8);opacity:0}60%{transform:translateY(2px) scale(1.04);opacity:1}100%{transform:none}}
@keyframes ixshake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes ixfloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@keyframes ixsway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes ixburst{0%{transform:scale(1);opacity:1}35%{transform:scale(1.25)}100%{transform:scale(.6);opacity:.35}}
@keyframes ixspark{from{opacity:1;transform:translate(0,0) rotate(45deg) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(225deg) scale(.4)}}

/* ---------- 8. the "Try it!" panel inside a lesson passage ---------- */
.ix-lesson{margin-top:26px;padding:18px 14px 6px;border-top:3px dashed var(--line,#eadff0);border-radius:var(--ixr3,26px);background:#fffaf5 url(../img/ix/bg-confetti.webp) center top/900px auto repeat-y}
.ix-lesson-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ix-lesson-h{font-family:'Fraunces',Georgia,serif;font-size:1.4em;color:var(--purple,#6b3fa0);margin:0;flex:1 1 auto}
.ix-lesson-sub{color:var(--muted,#6b5f73);margin:4px 0 0;font-size:.95em}
.ix-sound{min-height:44px;padding:6px 14px;border-radius:999px;border:2px solid var(--line,#eadff0);background:#fff;color:var(--purple,#6b3fa0);font-weight:800;cursor:pointer;display:inline-flex;gap:8px;align-items:center;font-family:inherit;font-size:.9em}
.ix-sound[aria-pressed=true]{background:#efe3ff;border-color:var(--purple,#6b3fa0)}
.ix-lesson .ix{margin:18px 0}
.ix-skel{min-height:120px;border-radius:var(--ixr3,26px);background:#efe3ff;opacity:.5}

/* ---------- 9. calm mode: nothing moves, the same feedback stays (a colored ring, a color change) ---------- */
/* finished balloon pictures (added by JS only when all six files loaded; the drawn color balloons above are the fallback) */
.ix-blns.img .ix-bln{width:92px;height:166px;border:0;border-radius:0;background:center/contain no-repeat;padding:0 6px 62px;box-shadow:none}
.ix-blns.img.big .ix-bln{width:120px;height:216px;padding-bottom:80px}
.ix-blns.img .ix-bln.ixb0{background-image:url(../img/ix/balloon-pink.webp)}.ix-blns.img .ix-bln.ixb1{background-image:url(../img/ix/balloon-lavender.webp)}
.ix-blns.img .ix-bln.ixb2{background-image:url(../img/ix/balloon-yellow.webp)}.ix-blns.img .ix-bln.ixb3{background-image:url(../img/ix/balloon-mint.webp)}.ix-blns.img .ix-bln.ixb4{background-image:url(../img/ix/balloon-blue.webp)}
.ix-blns.img .ix-bln::before,.ix-blns.img .ix-bln::after{display:none}
.ix-blns.img .ix-bln .ix-bt{background:rgba(255,255,255,.82);border-radius:10px;padding:2px 6px;color:#2b2233}
.ix-blns.img .ix-bln.popping,.ix-blns.img .ix-bln.popped{background-image:url(../img/ix/balloon-pop.webp)!important;background-size:contain}
.ix-blns.img .ix-bln.popped{opacity:.4;filter:none;transform:scale(.8)}
.ix-blns.img .ix-bln:focus-visible{outline:3px solid var(--ixp);outline-offset:2px;border-radius:var(--ixr2)}

@media (prefers-reduced-motion:reduce){
  .ix *,.ix *::before,.ix *::after,.ix-lb *{animation:none!important;transition:none!important}
  .ix-flip3,.is-back>.ix-flip3{transform:none!important}
  .ix-face.back{transform:none!important}
  .ix-bln.popped{opacity:.35}
  .ix-sp{display:none}
}
@media print{.ix-fxlayer,.ix-lb{display:none}}