@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/dynapuff-latin-ecbc67f8f0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DynaPuff';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/dynapuff-latin-ecbc67f8f0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin-2322b29ea7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin-2322b29ea7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin-2322b29ea7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/fredoka-latin-2322b29ea7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/nunito-latin-f0db862303.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/nunito-latin-f0db862303.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/nunito-latin-f0db862303.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/nunito-latin-f0db862303.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/nunito-latin-f0db862303.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Yellowtail';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/yellowtail-latin-dae56d273c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-arabic-1f6f1074ef.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-latin-ffe42d25aa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-arabic-1f6f1074ef.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-latin-ffe42d25aa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-arabic-1f6f1074ef.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-latin-ffe42d25aa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-arabic-1f6f1074ef.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-latin-ffe42d25aa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-arabic-1f6f1074ef.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Baloo Bhaijaan 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-latin-ffe42d25aa.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Rockets Learning — colour. Base values only; semantic aliases live in semantic.css.
   Source: tokens/tokens.json v1.1.0 in the brand kit (Canva sources, the BeeDegree
   Flutter repo's lib/core/config/theme/colors.dart, and the 79 reader PDFs). */
:root{
  /* ---------- Rockets Learning — corporate ---------- */
  --rl-navy:#002E60;
  --rl-orange:#DD6C1C;
  --rl-deep-teal:#01607D;
  --rl-yellow:#FAC027;
  --rl-ink:#111111;
  --rl-paper:#FFFFFF;
  --rl-mist:#F4F7FA;
  --rl-warm-tint:#FFF4EC;

  /* ---------- Bee Degree — the app (literal AppColors constants) ---------- */
  --bd-primary-1:#321C75;   /* deep indigo — screen ground, headings */
  --bd-primary-2:#9940FD;   /* violet — menu tiles, cards, active */
  --bd-primary-3:#FDA429;   /* amber — icons, labels, keylines, coins */
  --bd-secondary-1:#8A0AFF; /* saturated violet — emphasis, selected chips */
  --bd-secondary-2:#4C4AB2; /* muted indigo — inactive, dividers */
  --bd-secondary-3:#B86BFF; /* light violet — hover, glow, tile inner edge */
  --bd-secondary-4:#FFBF4C; /* light amber — highlights on gold */
  --bd-secondary-5:#404040; /* neutral grey text */
  --bd-error:#FF0000;
  --bd-grey:#808080;

  /* Bee Degree wordmark only — never UI fills */
  --bd-mark-gold:#FAAC00;
  --bd-mark-gold-bright:#FBC700;
  --bd-mark-blue:#4FACFF;

  /* Menu tile anatomy */
  --bd-tile-fill:#9940FD;
  --bd-tile-keyline:#FDA429;
  --bd-tile-glow:#C899FD;
  --bd-tile-label-out:#321C75;

  /* Fixed skill mapping — never remap */
  --bd-listening:#2373B3;
  --bd-reading:#6A379E;
  --bd-speaking:#E13E6F;
  --bd-writing:#59AB58;
  --bd-grammar:#E59F16;

  /* ---------- Readers (SDG + Classic) — the band colour IS the CEFR level ---------- */
  --rd-l1-prea1:#00705A;   /* green    — white on band, 6.1:1 */
  --rd-l2-a1:#FCA41F;      /* amber    — INK on band, 9.4:1 (white is 2.0:1) */
  --rd-l3-a1plus:#C8007C;  /* magenta  — white on band, 5.6:1 */
  --rd-l4-a2:#0045A4;      /* blue     — white on band, 8.8:1 */
  --rd-l5-a2plus:#3B5D5F;  /* deep teal— white on band, 7.2:1 */
  --rd-l6-b1plus:#FD0000;  /* red      — white on band, 4.1:1 */

  /* ---------- Alpha Explorers — the print series ---------- */
  --ae-teal:#019FA7;
  --ae-sky:#A6E3EE;
  --ae-sun:#FAD94F;
  --ae-meadow:#8CB149;
  --ae-sand:#FDDCAC;
  --ae-underline:#FBCA41;
  --ae-star:#FFD058;
  --ae-tagline-mark:#FDDD10;
  --ae-edition-ink:#191919;

  /* Part accents — spine band, Part badge, Level pill, "Focus on:" list */
  --ae-l1-p1:#7A65AC;      /* purple */
  --ae-l1-p2:#FF3131;      /* red */
  --ae-l2-p1:#FF751F;      /* orange */
  --ae-l2-p2:#00BF63;      /* green */
  --ae-l2-p2-text:#00A859; /* darker green for the word list */

  /* Set per book, then reference var(--ae-accent) everywhere */
  --ae-accent:var(--ae-l1-p1);

  /* ---------- Logo ---------- */
  --logo-gradient:linear-gradient(90deg,#2A285F 0%,#049A96 100%); /* @kind color */
  --logo-gradient-from:#2A285F;
  --logo-gradient-to:#049A96;
}

/* Per-book accent switches — put one of these on the page root */
[data-book="L1P1"]{--ae-accent:var(--ae-l1-p1)}
[data-book="L1P2"]{--ae-accent:var(--ae-l1-p2)}
[data-book="L2P1"]{--ae-accent:var(--ae-l2-p1)}
[data-book="L2P2"]{--ae-accent:var(--ae-l2-p2)}

/* Per-level reader switches — the band colour and the type that sits on it */
[data-level="1"]{--rd-band:var(--rd-l1-prea1);--rd-on-band:#FFFFFF}
[data-level="2"]{--rd-band:var(--rd-l2-a1);--rd-on-band:var(--rl-ink)}
[data-level="3"]{--rd-band:var(--rd-l3-a1plus);--rd-on-band:#FFFFFF}
[data-level="4"]{--rd-band:var(--rd-l4-a2);--rd-on-band:#FFFFFF}
[data-level="5"]{--rd-band:var(--rd-l5-a2plus);--rd-on-band:#FFFFFF}
[data-level="6"]{--rd-band:var(--rd-l6-b1plus);--rd-on-band:#FFFFFF}

/* Rockets Learning — type. Print scale in pt (the books are the source of truth);
   screen scale in px mirrors the app's AppTextStyles, which are all Nunito Bold. */
:root{
  --font-display:Fredoka,Nunito,'Trebuchet MS',sans-serif;      /* Bloc Heavy inside Canva */
  --font-text:Nunito,'Trebuchet MS','Segoe UI',sans-serif;
  --font-accent:DynaPuff,Fredoka,sans-serif;                     /* one instance per spread */
  --font-script:Yellowtail,cursive;                              /* ONE highlighted word per corporate piece */
  --font-arabic:'Baloo Bhaijaan 2',Nunito,sans-serif;            /* display AND text in Arabic — one face, no pairing */

  --weight-regular:400; /* @kind other */
  --weight-semibold:600; /* @kind other */
  --weight-bold:700; /* @kind other */
  --weight-extrabold:800; /* @kind other */
  --weight-black:900; /* @kind other */

  /* Print scale (pt) — 12pt is the floor for anything a child reads */
  --type-cover-title:60pt;   --lh-cover-title:1.0; /* @kind other */
  --type-unit-head:30pt;     --lh-unit-head:1.15; /* @kind other */
  --type-instruction:17pt;   --lh-instruction:1.35; /* @kind other */
  --type-story-kg:20pt;      --lh-story-kg:1.6; /* @kind other */
  --type-body:15pt;          --lh-body:1.55; /* @kind other */
  --type-caption:11pt;       --lh-caption:1.4; /* @kind other */
  --type-print-floor:12pt;

  /* App scale (px) — lib/core/config/theme/text_styles.dart, all Bold */
  --app-text-small:15px;         --app-text-small-desktop:20px;
  --app-text-default:25px;       --app-text-default-desktop:30px;
  --app-text-big:35px;           --app-text-big-desktop:40px;

  /* Screen UI scale for dashboards and web (px) */
  --ui-caption:12px;
  --ui-label:14px;
  --ui-body:16px;
  --ui-lead:20px;
  --ui-h3:24px;
  --ui-h2:32px;
  --ui-h1:44px;
  --ui-display:64px;

  --measure:60ch; /* @kind other */  /* 45–65 characters */
  --lh-tight:1.15; /* @kind other */
  --lh-snug:1.35; /* @kind other */
  --lh-relaxed:1.55; /* @kind other */
}

/* Rockets Learning — shape, space, elevation.
   Rule from brand.md: no hard 90° corners on any container that holds content. */
:root{
  --radius-chip:12px;
  --radius-card:16px;
  --radius-panel:20px;
  --radius-tile:24px;   /* the app's menu tiles read rounder than a print card */
  --radius-pill:999px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;

  --border-hairline:1px;
  --border-keyline:2px;   /* the amber keyline on app tiles */
  --border-heavy:3px;
  --keyline-app:2px solid var(--bd-tile-keyline); /* @kind other */

  /* Print / corporate surfaces keep a soft, single-direction shadow */
  --shadow-card:0 2px 8px rgba(0,46,96,.10);
  --shadow-raised:0 8px 24px rgba(0,46,96,.14);
  --shadow-panel:0 12px 36px rgba(0,46,96,.18);
  /* App surfaces sit on indigo, so their shadow is indigo, and tiles glow */
  --shadow-app-tile:0 6px 0 rgba(50,28,117,.55);
  --glow-app-tile:inset 0 0 0 1px var(--bd-tile-glow),0 0 18px rgba(200,153,253,.45);
  --text-outline-app:-1px -1px 0 var(--bd-tile-label-out),1px -1px 0 var(--bd-tile-label-out),-1px 1px 0 var(--bd-tile-label-out),1px 1px 0 var(--bd-tile-label-out);

  --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1); /* @kind other */   /* app only — rewards, tiles */
  --dur-fast:120ms; /* @kind other */
  --dur:200ms; /* @kind other */
  --dur-slow:360ms; /* @kind other */
}

/* Rockets Learning — semantic aliases.
   One brand world per page: set data-world on <html> or a wrapper and the
   surface/text/accent aliases resolve to that world's palette. */
:root{
  /* default = corporate */
  --surface-page:var(--rl-paper);
  --surface-card:var(--rl-paper);
  --surface-quiet:var(--rl-mist);
  --surface-warm:var(--rl-warm-tint);
  --surface-field:var(--rl-navy);
  --text-body:var(--rl-ink);
  --text-heading:var(--rl-navy);
  --text-muted:#5A6B7B;
  --text-on-field:var(--rl-paper);
  --accent:var(--rl-orange);
  --accent-support:var(--rl-deep-teal);
  --on-accent:var(--rl-ink);      /* ink on orange = 5.6:1; white is 3.4:1 */
  --border-quiet:#DCE5EE;
  --focus-ring:0 0 0 3px rgba(221,108,28,.45);
  --link:var(--rl-deep-teal);
  --link-hover:var(--rl-orange);
}

[data-world="corporate"]{
  --surface-page:var(--rl-paper);
  --surface-card:var(--rl-paper);
  --surface-quiet:var(--rl-mist);
  --surface-field:var(--rl-navy);
  --text-body:var(--rl-ink);
  --text-heading:var(--rl-navy);
  --text-on-field:var(--rl-paper);
  --accent:var(--rl-orange);
  --on-accent:var(--rl-ink);
}

[data-world="beedegree"]{
  --surface-page:var(--bd-primary-1);
  --surface-card:var(--bd-primary-2);
  --surface-quiet:#241556;
  --surface-field:var(--bd-primary-1);
  --text-body:var(--rl-paper);
  --text-heading:var(--rl-paper);
  --text-muted:#C4BBE4;
  --text-on-field:var(--rl-paper);
  --accent:var(--bd-primary-3);
  --accent-support:var(--bd-secondary-1);
  --on-accent:var(--bd-primary-1);
  --border-quiet:var(--bd-secondary-2);
  --focus-ring:0 0 0 3px rgba(253,164,41,.6);
  --link:var(--bd-primary-3);
  --link-hover:var(--bd-secondary-4);
}

[data-world="alpha-explorers"]{
  --surface-page:var(--rl-paper);
  --surface-card:var(--rl-paper);
  --surface-quiet:var(--ae-sky);
  --surface-warm:var(--ae-sand);
  --surface-field:var(--ae-teal);
  --text-body:var(--rl-ink);
  --text-heading:var(--ae-teal);
  --text-muted:#4C6066;
  --text-on-field:var(--rl-paper);
  --accent:var(--ae-accent);
  --accent-support:var(--ae-teal);
  --on-accent:var(--rl-paper);
  --border-quiet:#CFE7EC;
  --focus-ring:0 0 0 3px rgba(1,159,167,.45);
  --link:var(--ae-teal);
  --link-hover:var(--ae-accent);
}

[data-world="readers"]{
  --surface-page:var(--rl-paper);
  --surface-card:var(--rl-paper);
  --surface-field:var(--rd-band,var(--rd-l1-prea1));
  --text-body:var(--rl-ink);
  --text-heading:var(--rl-ink);
  --text-on-field:var(--rd-on-band,#FFFFFF);
  --accent:var(--rd-band,var(--rd-l1-prea1));
  --on-accent:var(--rd-on-band,#FFFFFF);
  --link:var(--rd-l4-a2);
  --link-hover:var(--rd-l3-a1plus);
}

a{color:var(--link);text-decoration-thickness:2px;text-underline-offset:2px}
a:hover{color:var(--link-hover)}


*{box-sizing:border-box}
body{margin:0;background:#fff}
html:not([lang="ar"]) .ar{display:none}
html[lang="ar"] .en{display:none}
html[lang="ar"]{direction:rtl}
html[lang="ar"],html[lang="ar"] .disp,html[lang="ar"] .script,html[lang="ar"] input,html[lang="ar"] button,html[lang="ar"] summary{font-family:'Baloo Bhaijaan 2',Nunito,sans-serif !important}
html[lang="ar"] .disp,html[lang="ar"] .script{font-weight:800 !important;line-height:1.3 !important}
html[lang="ar"] .script{font-size:66px !important;line-height:1.15 !important;margin-bottom:6px}
html[lang="ar"] .disp.enter2{font-size:64px !important;line-height:1.28 !important}
.ltr{direction:ltr;unicode-bidi:embed}
.topbar span{white-space:nowrap}

/* ---- Motion. Short and physical: overshoot for anything playful. ---- */
.prog{position:fixed;top:0;left:0;height:5px;width:0;background:linear-gradient(90deg,#DD6C1C,#FDA429,#019FA7);z-index:99;border-radius:0 999px 999px 0;transition:width 90ms linear}
@keyframes popin{0%{opacity:0;transform:translateY(30px) scale(.9)}62%{opacity:1;transform:translateY(-6px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes swingin{0%{opacity:0;transform:translateY(-26px) rotate(-9deg)}60%{opacity:1;transform:translateY(4px) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes drawrule{0%{width:0}100%{width:var(--rw,220px)}}
@keyframes cloudby{0%{transform:translateX(-14vw)}100%{transform:translateX(114vw)}}
@keyframes shine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(230%)}}
.enter1{animation:swingin 820ms cubic-bezier(.34,1.56,.64,1) both}
.enter2{animation:popin 760ms cubic-bezier(.34,1.56,.64,1) 140ms both}
.enter3{animation:popin 760ms cubic-bezier(.34,1.56,.64,1) 300ms both}
.enter4{animation:popin 820ms cubic-bezier(.34,1.56,.64,1) 440ms both}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.72;pointer-events:none;animation:cloudby linear infinite}
.reveal.in .rule{animation:drawrule 700ms cubic-bezier(.2,.7,.3,1) 120ms both}
/* Staggered children — the grid pours in instead of appearing at once */
.stag>*{opacity:0;transform:translateY(26px) scale(.96)}
.reveal.in .stag>*{animation:popin 640ms cubic-bezier(.34,1.56,.64,1) both}
.reveal.in .stag>*:nth-child(1){animation-delay:40ms}
.reveal.in .stag>*:nth-child(2){animation-delay:120ms}
.reveal.in .stag>*:nth-child(3){animation-delay:200ms}
.reveal.in .stag>*:nth-child(4){animation-delay:280ms}
.reveal.in .stag>*:nth-child(5){animation-delay:360ms}
.reveal.in .stag>*:nth-child(6){animation-delay:440ms}
/* Photos breathe on hover */
.zoom{overflow:hidden}
.zoom img,img.zoom{transition:transform 520ms cubic-bezier(.2,.7,.3,1)}
.zoom:hover img,img.zoom:hover{transform:scale(1.06)}
/* A shine sweeps the primary CTAs */
.cta{position:relative;overflow:hidden}
.cta>.sh{position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 4.2s ease-in-out infinite;pointer-events:none}
/* FAQ chevron */
details summary{display:flex;align-items:center;gap:12px}
details summary::before{content:"";width:12px;height:12px;flex:0 0 auto;border-right:3px solid #DD6C1C;border-bottom:3px solid #DD6C1C;transform:rotate(-45deg);transition:transform 240ms cubic-bezier(.34,1.56,.64,1)}
details[open] summary::before{transform:rotate(45deg)}
html[lang="ar"] details summary::before{border-right:none;border-left:3px solid #DD6C1C;transform:rotate(45deg)}
html[lang="ar"] details[open] summary::before{transform:rotate(-45deg)}
/* The colour band that marches between sections */
@keyframes march{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.band{overflow:hidden;height:14px;display:flex}
.band>div{display:flex;flex:0 0 auto;animation:march 26s linear infinite}
.band i{display:block;width:74px;height:14px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}.reveal{opacity:1;transform:none}.stag>*{opacity:1;transform:none}}

.disp{font-family:Fredoka,Nunito,sans-serif;font-weight:700}
.body{font-family:Nunito,'Trebuchet MS',sans-serif}

/* The joy devices, all lifted from the brand's own covers and app tiles */
.tile{border-radius:24px;border:3px solid var(--kl,#FDA429);position:relative;box-shadow:0 8px 0 var(--kl,#FDA429);transition:transform 260ms cubic-bezier(.34,1.56,.64,1),box-shadow 260ms cubic-bezier(.2,.7,.3,1)}
.tile:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 14px 0 var(--kl,#FDA429),0 20px 34px rgba(0,46,96,.22)}
.rule{height:6px;border-radius:0 0 50% 50%/0 0 100% 100%;border-bottom:6px solid #FBCA41;width:var(--rw,220px)}
.star{position:absolute;color:#FFD058;line-height:1;pointer-events:none;user-select:none}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 620ms cubic-bezier(.2,.7,.3,1),transform 620ms cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.wave{display:block;width:100%;height:64px}
@keyframes flap{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
.flap{animation:flap 3s cubic-bezier(.4,0,.6,1) infinite}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.86)}50%{opacity:1;transform:scale(1.14)}}
.tw{animation:twinkle 2.6s ease-in-out infinite}.yt:hover .ytplay{transform:scale(1.1)}.tw-slow{animation-duration:4.2s}.tw-fast{animation-duration:1.7s}
.ocard:hover .ocard-arr{transform:translateX(5px)}[dir="rtl"] .ocard-arr{transform:scaleX(-1)}[dir="rtl"] .ocard:hover .ocard-arr{transform:scaleX(-1) translateX(5px)}
@keyframes drift{0%{transform:translate(0,0) rotate(-1.2deg)}50%{transform:translate(8px,-8px) rotate(1.2deg)}100%{transform:translate(0,0) rotate(-1.2deg)}}
.drift{animation:drift 9s ease-in-out infinite}
.navlink{position:relative}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:4px;border-radius:999px;background:#DD6C1C;transform:scaleX(0);transition:transform 200ms cubic-bezier(.34,1.56,.64,1)}
.navlink:hover::after{transform:scaleX(1)}
.cta{transition:transform 160ms cubic-bezier(.34,1.56,.64,1),filter 200ms}
.cta:hover{transform:translateY(-3px) scale(1.03)}
.cta:active{transform:scale(.97)}
details summary::-webkit-details-marker{display:none}
details summary{list-style:none;cursor:pointer}
.lvlmodal[data-lvl="1"]{--kl:#00705A}.lvlmodal[data-lvl="2"]{--kl:#FCA41F}.lvlmodal[data-lvl="3"]{--kl:#C8007C}.lvlmodal[data-lvl="4"]{--kl:#0045A4}.lvlmodal[data-lvl="5"]{--kl:#3B5D5F}.lvlmodal[data-lvl="6"]{--kl:#FD0000}
.lvlmodal .lvlhead{background:var(--kl) !important}.lvlmodal[data-lvl="2"] .lvlhead{color:#111 !important}
.stag2[data-series="SDG"]{background:#0045A4 !important}
.two{display:grid;gap:48px;align-items:center}
.two.hero{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
.two.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two.alpha{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:980px){.two.hero,.two.even,.two.alpha{grid-template-columns:minmax(0,1fr);gap:34px}.beeflier{display:none}}
a{color:#01607D;text-decoration-thickness:2px;text-underline-offset:2px}
a:hover{color:#DD6C1C}

/* production additions */
html{scroll-behavior:smooth}
img{max-width:100%;height:auto}
.beeflier{height:auto}
html:not([lang="ar"]) .ar,html[lang="ar"] .en{display:none}
.skip{position:absolute;inset-inline-start:16px;top:8px;transform:translateY(-200%);background:#002E60;color:#fff;padding:10px 16px;border-radius:999px;z-index:999}
.skip:focus{transform:none}
:focus-visible{outline:3px solid #DD6C1C;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}.beeflier{display:none}}
.menu-btn{display:none}
.chip-k{background:#E6F6F7;color:#01607D;font-weight:800;font-size:14px;padding:8px 16px;border-radius:999px;border:2px solid #019FA7}
@media (max-width:1100px){
  .topbar{padding:6px 16px!important;gap:12px!important;flex-wrap:nowrap!important}
  .topbar .tb-mail{display:none}
  .site-head{padding:10px 16px!important;gap:12px!important;flex-wrap:nowrap!important}
  .site-head>img{height:40px!important;width:auto!important}
  .site-head .head-cta{margin-inline-start:auto;padding:9px 16px!important;font-size:14px!important}
  .menu-btn{order:3;display:grid;gap:5px;place-content:center;width:44px;height:44px;flex:none;border:0;border-radius:12px;background:#EEF3F7;cursor:pointer}
  .menu-btn span{display:block;width:20px;height:2.5px;border-radius:2px;background:#002E60;transition:transform .2s,opacity .2s}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  #site-nav{display:none!important;position:absolute;top:100%;inset-inline:0;margin:0!important;background:#fff;flex-direction:column;align-items:stretch!important;gap:0!important;padding:8px 16px 16px;box-shadow:0 12px 20px rgba(0,46,96,.12)}
  #site-nav.open{display:flex!important}
  #site-nav a{padding:13px 4px;border-bottom:1px solid #EEF3F7;font-size:17px!important}
}
@media (max-width:380px){.site-head .head-cta{display:none}}
.cover-row{display:flex;align-items:flex-end;gap:14px;padding:14px 6px 4px;background:linear-gradient(#fff 72%,#F3F6FA 72%);border-radius:14px}
.cv{margin:0;flex:1 1 0;min-width:0;text-align:center}
.cv-book{flex:1.45 1 0}
.cv img{display:block;width:100%;height:auto;aspect-ratio:1/1.414;object-fit:cover;border-radius:6px 10px 10px 6px;box-shadow:0 10px 22px rgba(0,46,96,.22),inset 0 0 0 1px rgba(0,0,0,.04);transition:transform .25s ease}
.cv:hover img{transform:translateY(-6px) rotate(-1.5deg)}
.cv figcaption{margin-top:9px;font-size:12px;line-height:1.3;color:#5A6B7B;font-weight:700}
.cv figcaption b{display:block;color:#002E60;font-weight:800;font-size:12.5px}
.cv-book figcaption b{font-size:13.5px}
@media (max-width:520px){.cover-row{gap:8px}.cv figcaption{font-size:10.5px}.cv figcaption b{font-size:11px}}
/* covers: gentle float, lift on hover, click to enlarge */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.cv-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;animation:bob 4.2s ease-in-out infinite}
.cv:nth-child(2) .cv-btn{animation-delay:-1.1s}.cv:nth-child(3) .cv-btn{animation-delay:-2.2s}.cv:nth-child(4) .cv-btn{animation-delay:-3.1s}
.cv-btn:hover,.cv-btn:focus-visible{animation-play-state:paused}
.cv:hover img{transform:translateY(-10px) scale(1.04) rotate(-2deg);box-shadow:0 18px 30px rgba(0,46,96,.3)}
/* intro: fanned stack of student books */
.book-fan{position:relative;height:370px;margin:6px 0 4px;display:flex;justify-content:center;align-items:flex-start}
.fan-book{position:absolute;top:18px;width:min(34%,190px);padding:0;border:0;background:none;cursor:zoom-in;transform-origin:50% 115%;transition:transform .45s cubic-bezier(.2,.9,.3,1.25),z-index 0s}
.fan-book img{display:block;width:100%;height:auto;border-radius:8px 12px 12px 8px;border:4px solid var(--c);box-shadow:0 16px 34px rgba(0,46,96,.28);background:#fff}
.fan-book.fb1{transform:translateX(-88%) rotate(-14deg);z-index:1}
.fan-book.fb2{transform:translateX(-34%) rotate(-5deg) translateY(-8px);z-index:2}
.fan-book.fb3{transform:translateX(34%) rotate(5deg) translateY(-8px);z-index:3}
.fan-book.fb4{transform:translateX(88%) rotate(14deg);z-index:2}
.book-fan:hover .fb1{transform:translateX(-110%) rotate(-18deg)}
.book-fan:hover .fb2{transform:translateX(-44%) rotate(-6deg) translateY(-10px)}
.book-fan:hover .fb3{transform:translateX(44%) rotate(6deg) translateY(-10px)}
.book-fan:hover .fb4{transform:translateX(110%) rotate(18deg)}
.book-fan .fan-book:hover,.book-fan .fan-book:focus-visible{z-index:5}
.book-fan .fb1:hover{transform:translateX(-110%) rotate(-8deg) translateY(-20px) scale(1.07)}
.book-fan .fb2:hover{transform:translateX(-44%) rotate(-2deg) translateY(-26px) scale(1.07)}
.book-fan .fb3:hover{transform:translateX(44%) rotate(2deg) translateY(-26px) scale(1.07)}
.book-fan .fb4:hover{transform:translateX(110%) rotate(8deg) translateY(-20px) scale(1.07)}
.fan-tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;background:var(--c);color:#fff;font-weight:800;font-size:13px;padding:6px 14px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.fan-hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-weight:700;font-size:13.5px;color:#5A6B7B}

@media (max-width:520px){.book-fan{height:330px}.fan-tag{font-size:11px;padding:4px 10px}}
/* Alpha Explorers video: glowing screen, pulsing play, floating letters */
.ae-video{position:relative;margin-top:40px;padding:14px 10px 0}
.ae-screen{position:relative;border-radius:26px;padding:7px;background:conic-gradient(from var(--a,0deg),#019FA7,#FAAC00,#FF751F,#7A65AC,#00B159,#019FA7);animation:spin 6s linear infinite;box-shadow:0 22px 46px rgba(1,96,125,.28)}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.ae-screen .yt{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;cursor:pointer;background:#002E60}
.ae-screen .yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ae-screen .yt:hover img{transform:scale(1.05)}
.ae-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#FAAC00;color:#002E60;display:grid;place-items:center;box-shadow:0 6px 0 #DD6C1C,0 14px 28px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.ae-play svg{margin-inline-start:4px}
.ae-play::before,.ae-play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid rgba(250,172,0,.75);animation:ring 2.2s ease-out infinite}
.ae-play::after{animation-delay:1.1s}
@keyframes ring{from{transform:scale(.8);opacity:1}to{transform:scale(1.6);opacity:0}}
.ae-screen .yt:hover .ae-play{transform:scale(1.12)}
.ae-badge{position:absolute;top:14px;inset-inline-start:14px;background:rgba(0,46,96,.85);color:#fff;font-weight:800;font-size:13px;padding:7px 14px;border-radius:999px;backdrop-filter:blur(4px)}
.ae-cap{margin-top:14px;text-align:center;color:#5A6B7B;font-weight:700;font-size:14px}
.ae-cap b{display:block;color:#019FA7;font-family:var(--font-display,Fredoka,sans-serif);font-size:21px;margin-bottom:2px}
.fl{position:absolute;z-index:2;font-family:Fredoka,Nunito,sans-serif;font-weight:700;font-size:30px;line-height:1;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.18);animation:drift 5s ease-in-out infinite;pointer-events:none}
.fl1{top:-6px;left:-14px;background:#FF3131;transform:rotate(-12deg)}
.fl2{top:-18px;left:30%;background:#FAAC00;animation-delay:-1s;width:40px;height:40px;font-size:24px}
.fl3{top:-10px;right:18%;background:#7A65AC;animation-delay:-2s}
.fl4{top:24%;right:-16px;background:#00B159;animation-delay:-3s}
.fl5{bottom:34%;left:-20px;background:#019FA7;animation-delay:-1.6s;width:42px;height:42px;font-size:24px}
.fl6{bottom:18%;right:-12px;background:#FF751F;animation-delay:-2.6s;width:40px;height:40px;font-size:22px}
.fl7{display:none}.fl8{display:none}
@keyframes drift{0%,100%{translate:0 0;rotate:-8deg}50%{translate:0 -12px;rotate:8deg}}
@media (max-width:520px){.fl{width:36px;height:36px;font-size:20px}.fl1,.fl5{left:-6px}.fl4,.fl6{right:-6px}.ae-play{width:66px;height:66px;margin:-33px 0 0 -33px}}
/* partner logos: percentage max-height doesn't resolve in the grid cell, so cap it explicitly */
#partners .stag>div{overflow:hidden}
#partners .stag img{width:auto!important;height:auto!important;max-width:100%!important;max-height:60px!important}
.faq-group{display:flex;align-items:center;gap:10px;margin:34px 0 14px;font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:22px;color:#002E60}
.faq-group:first-of-type{margin-top:6px}
.faq-group::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}
#faq details a{color:#01607D;font-weight:800}
@keyframes turn{to{transform:rotate(360deg)}}
.sdg-wheel{animation:turn 40s linear infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15))}
.sdg-wheel:hover{animation-play-state:paused}
#cover-modal figure{margin:0;max-width:min(560px,92vw);text-align:center}
#cover-modal img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;margin:0 auto;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.45);animation:pop .3s ease}
#cover-modal figcaption{margin-top:14px;color:#fff;font-weight:800;font-size:16px}
#cover-modal .x{position:fixed;top:18px;inset-inline-end:18px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.22);color:#fff;font-size:28px;line-height:1;cursor:pointer}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.lr-modal{position:fixed;inset:0;z-index:200;background:rgba(0,28,59,.72);display:grid;place-items:center;padding:24px;backdrop-filter:blur(4px)}
.lr-modal[hidden]{display:none}