/* Munja AI – graphical Learning Gap Report (v4, 15 Oct 2026): all visible, PDF-ready, mistakes analysed one by one */
.gi { width: 18px; height: 18px; flex: none; }
.gr { gap: 14px; }
.gr-pdf { display: flex; flex-direction: column; gap: 14px; background: #fff; }
.gr-brand { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--paper-deep); }
.gr-brand img { width: 30px; height: 32px; }
.gr-brand b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.gr-brand span { font-weight: 700; color: var(--violet-deep); font-size: .9rem; padding-left: 8px; border-left: 1px solid var(--line); }
.gr-brand small { margin-left: auto; color: var(--ink-soft); font-weight: 600; }
.gr-head .level { font-size: .95rem; }
.gr-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gr-t { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.gr-t .gi { color: var(--violet); width: 20px; height: 20px; }
.gr-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
.gr-ch { border-radius: 10px; padding: 7px 9px 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 1.5px solid; }
.gr-ch span { font-size: .8rem; font-weight: 600; line-height: 1.2; }
.gr-ch b { flex: none; font-family: var(--font-display); font-size: .85rem; line-height: 1; }
.ch-strong { background: #DDF5E8; border-color: #A8E0C2; color: #11643A; }
.ch-practice { background: var(--saffron-wash); border-color: #F6CB92; color: #7A4303; }
.ch-gap { background: #FDE4E1; border-color: #F5B5AD; color: #8E2318; }
.gr-sub { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 4px; font-size: .9rem; }
.gr-sub small { font-weight: 700; color: var(--ink-soft); }
.gr-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .78rem; color: var(--ink-soft); }
.gr-key i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: -9px; vertical-align: -1px; }
.k-strong { background: #1F9D5C; } .k-practice { background: #EE8A1B; } .k-gap { background: #C6392B; } .k-dk { background: #B9B3D6; }
.gr-bubble { align-self: flex-start; background: var(--night); color: #fff; border-radius: 14px 14px 14px 4px; padding: 7px 12px 6px; font-size: .88rem; display: inline-flex; flex-direction: column; gap: 1px; max-width: 100%; }
.gr-bubble span { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FFC46B; }
.gr-cap { font-size: .82rem; color: var(--ink-soft); }
.gr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 14px; align-items: start; }
.gr-gauges { display: flex; justify-content: space-around; gap: 8px; flex-wrap: wrap; }
.gr-g { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; max-width: 110px; }
.ring.sk-ring { width: 80px; height: 80px; }
.ring.sk-ring .val b { font-size: 1.05rem; }
.gr-g > b { font-size: .86rem; }
.gr-g > small { font-size: .74rem; color: var(--ink-soft); line-height: 1.2; }
.gr-th { display: flex; align-items: center; gap: 10px; }
.gr-th h3 { font-size: 1.15rem; }
.gr-means { font-weight: 600; color: var(--violet-deep); background: #F1ECFF; border-radius: 10px; padding: 8px 12px; font-size: .92rem; }
.gr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
.gr-stats div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; background: var(--paper); border-radius: 12px; padding: 8px 4px 7px; }
.gr-stats .gi { width: 20px; height: 20px; color: var(--violet); margin-bottom: 2px; }
.gr-stats b { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.1; }
.gr-stats span { font-size: .7rem; color: var(--ink-soft); line-height: 1.15; }
.gr-ms { display: flex; flex-direction: column; gap: 7px; }
.gr-m { display: grid; grid-template-columns: 112px minmax(0, 1fr) 46px; gap: 8px; align-items: center; font-size: .82rem; }
.gr-ml { color: var(--ink-soft); font-weight: 600; }
.gr-m b { text-align: right; font-size: .82rem; }
.gr-tips { display: flex; flex-direction: column; gap: 6px; }
.gr-tips div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; background: var(--teal-wash); border-radius: 10px; padding: 7px 10px; }
.gr-tips i { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; font-style: normal; font-weight: 700; display: grid; place-items: center; font-size: .82rem; }
.gr-tips span { font-size: .86rem; color: var(--teal-deep); line-height: 1.3; }
.gr-note { font-size: .74rem; color: var(--ink-soft); }
.gr-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; }
.gr-tl::before { content: ""; position: absolute; left: 19px; top: 18px; bottom: 18px; width: 3px; background: var(--paper-deep); border-radius: 3px; }
.gr-tl li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 7px 0; position: relative; }
.gr-tl i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-display); font-weight: 700; border: 3px solid #fff; }
.gr-tl li > div { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; min-width: 0; }
.gr-tl b { font-family: var(--font-display); font-size: 1rem; line-height: 1.25; }
.gr-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.gr-tools span { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; padding: 3px 9px 2px 7px; border-radius: 99px; background: var(--paper); color: var(--ink); }
.gr-tools .gi { width: 14px; height: 14px; color: var(--violet); }
.dy-explain i { background: #FDE4E1; color: #8E2318; }
.dy-practise i { background: var(--saffron-wash); color: #7A4303; }
.dy-revise i { background: #EFEAFD; color: var(--violet-deep); }
.dy-check i { background: #DDF5E8; color: #11643A; }
.gr-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.gr-why div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; background: var(--teal-wash); border-radius: 12px; padding: 10px 8px; }
.gr-why .gi { width: 26px; height: 26px; color: var(--teal-deep); margin-bottom: 2px; }
.gr-why b { font-size: .86rem; color: var(--teal-deep); line-height: 1.2; }
.gr-why span { font-size: .74rem; color: var(--teal-deep); opacity: .85; }
.gr-sheet { display: flex; flex-direction: column; gap: 5px; }
.gr-sheet > b { font-size: .9rem; }
.gr-sheet > div { display: flex; flex-wrap: wrap; gap: 5px; }
.gr-sheet span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: #fff; }
.as-ok { background: #1F9D5C; } .as-no { background: #C6392B; } .as-dk { background: #B9B3D6; }
.ga-no { background: #FDE4E1; color: #8E2318; }
.ga-ok { background: #DDF5E8; color: #11643A; }
.gu-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gu-icons div { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; background: #fff; border: 1px dashed #CFC2F7; border-radius: 12px; padding: 12px 6px 10px; }
.gu-icons .gi { width: 26px; height: 26px; color: var(--violet); }
.gu-icons span { font-size: .8rem; font-weight: 700; line-height: 1.2; }
.mk-head { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.mk-bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; gap: 2px; background: #fff; }
.mk-bar i { display: block; height: 100%; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--ink-soft); }
.mk-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.mk-legend b { color: var(--ink); }
.mk-card { display: flex; flex-direction: column; gap: 7px; background: var(--paper); border-radius: 14px; padding: 14px 12px 12px; position: relative; overflow: hidden; }
.mk-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--mk); }
.mk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mk-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--mk); color: #fff; font-weight: 700; font-size: .78rem; padding: 4px 10px 3px 8px; border-radius: 99px; }
.mk-tag .gi { width: 15px; height: 15px; }
.mk-time { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; color: var(--ink-soft); }
.mk-time .gi { width: 14px; height: 14px; }
.mk-q { font-weight: 600; font-size: .92rem; line-height: 1.35; }
.mk-ans { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-ans span { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; padding: 4px 10px 3px 7px; border-radius: 99px; }
.mk-ans .gi { width: 15px; height: 15px; }
.mk-help { font-size: .88rem; color: var(--ink); line-height: 1.4; }
.pdf-mode { width: auto; padding: 0; }
.pdf-mode .gr-two { display: flex; flex-direction: column; align-items: stretch; }
.pdf-mode .gap-band, .pdf-mode .rep-head, .pdf-mode .gr-tl li, .pdf-mode .gr-tips div, .pdf-mode .gr-why, .pdf-mode .gr-gauges, .pdf-mode .gr-stats, .pdf-mode .gr-sheet, .pdf-mode .mk-card, .pdf-mode .gr-type { break-inside: avoid; page-break-inside: avoid; }
.pdf-mode * { animation: none !important; transition: none !important; }
.html2pdf__container { margin: 0 !important; left: 0 !important; }
.pdf-mode .rep-head { grid-template-columns: auto minmax(0, 1fr) !important; justify-items: stretch !important; }
.pdf-mode h2 { font-size: 2.1rem !important; }
.pdf-mode .gap-band { gap: 10px !important; }
.pdf-mode .gap-tile { padding: 12px 14px 11px !important; }
.pdf-mode .gap-tile b { font-size: 2rem !important; }
.pdf-mode .gap-tile span { font-size: .98rem !important; }
.pdf-mode .gap-tile small { display: block !important; }
.pdf-mode .gr-card { padding: 14px 16px !important; }
.pdf-mode .gr-map { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.pdf-mode .gr-ch { padding: 7px 9px 6px !important; }
.pdf-mode .gr-ch span { font-size: .8rem !important; }
.pdf-mode .gr-brand span { display: inline !important; }
.pdf-mode .gr-m { grid-template-columns: 112px minmax(0, 1fr) 46px !important; }
.pdf-mode .gr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { .gr-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .gr-card { padding: 12px; }
  .gr-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr-ch { padding: 6px 8px 5px; }
  .gr-ch span { font-size: .74rem; }
  .gr-brand span { display: none; }
  .gr-m { grid-template-columns: 96px minmax(0, 1fr) 42px; }
  .gr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .gr-pdf *, .gap-tile { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gr-card { break-inside: avoid; }
}
/* ---------- v4: 2-page report (15 Oct 2026, night) ---------- */
.gr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-chips span { display: inline-flex; align-items: center; gap: 5px; background: var(--paper); border-radius: 99px; padding: 5px 11px 4px 8px; font-size: .82rem; font-weight: 600; color: var(--ink); }
.gr-chips .gi { width: 15px; height: 15px; color: var(--violet); }
.gr-home { display: flex; gap: 8px; align-items: flex-start; background: var(--teal-wash); border-radius: 10px; padding: 8px 12px; font-size: .88rem; color: var(--teal-deep); line-height: 1.35; }
.gr-home .gi { color: var(--teal-deep); margin-top: 1px; }
.gr-p2 { display: flex; flex-direction: column; gap: 14px; }
.mk-more { font-size: .86rem; color: var(--ink-soft); font-weight: 600; background: var(--paper); border-radius: 10px; padding: 8px 12px; line-height: 1.35; }
.gr-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; position: relative; }
.gr-strip::before { content: ""; position: absolute; left: 7%; right: 7%; top: 19px; height: 3px; background: var(--paper-deep); border-radius: 3px; }
.gr-strip li { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; position: relative; min-width: 0; }
.gr-strip i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: .9rem; border: 3px solid #fff; }
.gr-strip span { font-size: .74rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.k-rev { background: #7B66E0; }
.gr-pcta { display: none; align-items: center; gap: 12px; background: var(--night); border-radius: 14px; padding: 12px 16px; }
.gr-pcta img { width: 34px; height: 37px; flex: none; }
.gr-pcta b { display: block; font-family: var(--font-display); font-size: 1rem; color: #fff; }
.gr-pcta span { font-size: .84rem; color: #FFC46B; font-weight: 600; }
@media (max-width: 520px) {
  .gr-strip { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .gr-strip::before { display: none; }
  .gr-strip li { flex-direction: row; text-align: left; gap: 10px; }
  .gr-strip i { width: 32px; height: 32px; font-size: .8rem; }
  .gr-strip span { font-size: .86rem; }
}
.pdf-mode .gr-pcta { display: flex !important; }
.pdf-mode .gr-p2 { break-before: page; page-break-before: always; }
.pdf-mode .gr-strip { grid-template-columns: repeat(var(--n), minmax(0, 1fr)) !important; gap: 4px !important; }
.pdf-mode .gr-strip::before { display: block !important; }
.pdf-mode .gr-strip li { flex-direction: column !important; text-align: center !important; gap: 5px !important; }
.pdf-mode .gr-strip i { width: 40px !important; height: 40px !important; font-size: .9rem !important; }
.pdf-mode .gr-strip span { font-size: .74rem !important; }
.pdf-mode .gr-strip, .pdf-mode .gr-pcta, .pdf-mode .gr-chips, .pdf-mode .gr-home, .pdf-mode .mk-more { break-inside: avoid; page-break-inside: avoid; }

.mk-l, .mk-r { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
@media (min-width: 761px) { .mk-card { flex-direction: row; gap: 16px; } .mk-l, .mk-r { flex: 1 1 0; } .mk-r { border-left: 1px dashed var(--line); padding-left: 14px; } }
.pdf-mode .mk-card { flex-direction: row !important; gap: 16px !important; }
.pdf-mode .mk-l, .pdf-mode .mk-r { flex: 1 1 0 !important; }
.pdf-mode .mk-r { border-left: 1px dashed var(--line); padding-left: 14px; }

.pdf-mode .gr-p2 { gap: 10px !important; }
.pdf-mode .gr-fix { gap: 8px !important; }
.pdf-mode .mk-card { padding: 12px 12px 10px !important; }
.pdf-mode .mk-l, .pdf-mode .mk-r { gap: 5px !important; }
.pdf-mode .mk-q { font-size: .88rem !important; }
.pdf-mode .mk-help { font-size: .82rem !important; line-height: 1.32 !important; }
.pdf-mode .mk-r .gr-bubble { font-size: .8rem !important; padding: 6px 10px 5px !important; }
.pdf-mode .gr-pcta { padding: 9px 14px !important; }
.pdf-mode .gr-p2 .disclaim { margin: 0 !important; }
/* ---------- v5: picture-first report (16 Oct 2026) ---------- */
.gr-ringw { position: relative; flex: none; }
.gr-face { position: absolute; right: -6px; bottom: -2px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: #fff; box-sizing: content-box; display: block; }
.gr-face svg { width: 46px; height: 46px; display: block; }
.ch-more { border-style: dashed; }
.gr-scs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gr-sc { background: var(--paper); border-radius: 12px; padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 7px; }
.gr-sc-h { display: flex; align-items: center; gap: 6px; font-size: .88rem; }
.gr-sc-h .gi { color: var(--violet); }
.gr-sc-bar { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #EFEAFD, #B9AAF2); margin: 5px 4px 0; }
.gr-sc-bar i { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--violet); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(40, 20, 90, .3); box-sizing: border-box; }
.gr-sc-e { display: flex; justify-content: space-between; font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.mk-top2 { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
.mk-donut { position: relative; width: 132px; height: 132px; }
.mk-donut svg { width: 132px; height: 132px; display: block; }
.mk-dc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mk-dc b { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--ink); }
.mk-dc span { font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
.mk-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-side .mk-head { font-size: 1.05rem; }
.mk-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mk-leg li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .86rem; font-weight: 600; }
.mk-leg i { width: 26px; height: 26px; border-radius: 50%; background: var(--mk); color: #fff; display: grid; place-items: center; }
.mk-leg i .gi { width: 15px; height: 15px; }
.mk-leg b { font-family: var(--font-display); font-size: 1rem; }
.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; background: var(--paper); border-radius: 14px; padding: 14px 12px 12px; }
.mk-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--mk); }
.mk-th { display: flex; align-items: center; gap: 8px; }
.mk-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--mk); color: #fff; display: grid; place-items: center; }
.mk-ic .gi { width: 19px; height: 19px; }
.mk-th b { display: block; font-size: .86rem; line-height: 1.2; color: var(--ink); }
.mk-th small { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.mk-th small .gi { width: 12px; height: 12px; }
.mk-tile .mk-q { font-size: .84rem; font-weight: 600; line-height: 1.32; margin: 0; }
.mk-tile .mk-ans { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.mk-tile .mk-ans span { font-size: .8rem; }
.mk-fix { margin-top: auto; display: flex; gap: 6px; align-items: flex-start; background: var(--night); color: #fff; border-radius: 12px 12px 12px 4px; padding: 7px 10px 6px; font-size: .8rem; line-height: 1.3; font-weight: 600; }
.mk-fix .gi { width: 15px; height: 15px; color: #FFC46B; margin-top: 1px; }
.mk-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: var(--paper); border-radius: 10px; padding: 7px 12px; font-size: .84rem; }
.mk-rest span { display: inline-flex; align-items: center; gap: 4px; background: var(--mk); color: #fff; border-radius: 99px; padding: 3px 9px 2px 6px; font-weight: 700; font-size: .78rem; }
.mk-rest span .gi { width: 13px; height: 13px; }
.mk-rest em { font-style: normal; color: var(--ink-soft); font-weight: 600; }
.gr-path { position: relative; }
.gr-strip li small { font-size: .66rem; font-weight: 700; letter-spacing: .03em; color: var(--ink-soft); text-transform: uppercase; }
.gr-strip::before { top: 35px; }
.gr-strip i .gi { width: 20px; height: 20px; }
.gr-walk { position: absolute; top: -10px; left: calc(100% - 30px); width: 30px; height: 32px; pointer-events: none; }
.gr-pcta { gap: 14px; }
.gr-pcta > div:not(.gr-qr) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gr-pcta > div span + span { color: #fff; opacity: .8; }
.gr-qr { flex: none; background: #fff; border-radius: 8px; padding: 5px; line-height: 0; }
.gr-qr:empty { display: none; }
.gr-qr img { width: 74px; height: 74px; image-rendering: pixelated; }
/* animations, played when each card comes into view */
@keyframes grPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes grUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grSpin { from { opacity: 0; transform: rotate(-140deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes grSlide { from { left: 50%; } }
@keyframes grWalk { from { left: 0; } }
.rep.go .gr-face { animation: grPop .55s 1.3s both cubic-bezier(.3, 1.6, .5, 1); }
.gr-anim.in .gr-ch { animation: grUp .35s both; animation-delay: calc(.1s + var(--d) * 50ms); }
.gr-anim.in .gr-sc-bar i { animation: grSlide 1.2s .3s both cubic-bezier(.3, 1.3, .5, 1); }
.gr-anim.in .mk-donut svg { animation: grSpin 1s both ease-out; }
.gr-anim.in .mk-leg li { animation: grUp .35s both; animation-delay: .5s; }
.gr-anim.in .mk-tile { animation: grUp .45s both; animation-delay: calc(.6s + var(--d) * 180ms); }
.gr-anim.in .gr-strip li { animation: grPop .4s both; animation-delay: calc(.15s + var(--d) * 140ms); }
.gr-anim.in .gr-walk { animation: grWalk 1.4s .15s both ease-in-out; }
@media (prefers-reduced-motion: reduce) { .gr-anim.in *, .rep.go .gr-face { animation: none !important; } }
@media (max-width: 760px) { .mk-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .gr-scs { grid-template-columns: minmax(0, 1fr); }
  .mk-top2 { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
  .mk-donut, .mk-donut svg { width: 110px; height: 110px; }
  .gr-walk { display: none; }
  .gr-strip li { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
  .gr-strip li i { grid-row: 1 / 3; grid-column: 1; }
  .gr-strip li small { grid-column: 2; }
  .gr-strip li span { grid-column: 2; }
  .gr-strip i .gi { width: 16px; height: 16px; }
}
/* PDF: same pictures, laid out for A4, no motion */
.pdf-mode .gr-scs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.pdf-mode .mk-top2 { grid-template-columns: 132px minmax(0, 1fr) !important; gap: 16px !important; }
.pdf-mode .mk-donut, .pdf-mode .mk-donut svg, .pdf-mode .mk-donut img { width: 132px !important; height: 132px !important; }
.pdf-mode .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.pdf-mode .gr-walk { display: none !important; }
.pdf-mode .gr-strip li { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
.pdf-mode .gr-strip i .gi, .pdf-mode .gr-strip i img { width: 20px !important; height: 20px !important; }
.pdf-mode .gr-scs, .pdf-mode .mk-top2, .pdf-mode .mk-tile, .pdf-mode .mk-rest, .pdf-mode .gr-path { break-inside: avoid; page-break-inside: avoid; }