@font-face{font-family:"Alexandria";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/alexandria-arabic-600-normal.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}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/alexandria-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/alexandria-arabic-700-normal.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}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/alexandria-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/alexandria-arabic-800-normal.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}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/alexandria-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-arabic-400-normal.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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/tajawal-arabic-500-normal.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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/tajawal-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-arabic-700-normal.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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/tajawal-arabic-800-normal.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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/tajawal-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Hessa Play design system: tokens, type scale and spacing shared by the home and curricula pages ----
   Headings and buttons: Alexandria. Body: Tajawal. Spacing steps: 8 / 12 / 16 / 24 / 32. */
:root{
  --bg:#F2F4FC;--surface:#FFFFFF;--surface-2:#F4F5FD;--ink:#182344;--muted:#52658D;--line:#E3E7F2;
  --v:#6947E8;--v-2:#8468F0;--v-soft:#E8E2FF;
  --r-sm:12px;--r-card:24px;--r-sec:28px;
  --sh-card:0 12px 32px rgba(24,35,68,.07);
  --fh:"Alexandria","Tajawal","Segoe UI",system-ui,sans-serif;
  --f:"Tajawal","Alexandria","Segoe UI",system-ui,sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.7;overflow-x:hidden}
h1,h2,h3,.btn,.logo,.all2,.pill{font-family:var(--fh);letter-spacing:0}
.in{width:min(100% - 2*clamp(16px,4vw,56px),1440px);max-width:none;margin-inline:auto;padding-inline:0}

/* header: 72px, quiet links, only the current one is tinted */
.top{background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line)}
.top .in{min-height:72px;gap:16px;flex-wrap:nowrap;padding-block:8px}
.logo{gap:12px;font-size:1.55rem;font-weight:800;flex:none}
.logo i{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--v),var(--v-2))}
.nav{gap:6px;flex:1 1 auto;justify-content:center;min-width:0;margin:0}
.nav a{font-family:var(--f);font-weight:700;font-size:1rem;gap:8px;padding:0 12px;min-height:44px;border-radius:var(--r-sm);color:var(--ink);white-space:nowrap}
.nav a svg{width:24px;height:24px;flex:none}
.nav a.on{background:var(--v-soft);color:var(--v)}.nav a.on::after{bottom:-14px;inset-inline:12px;height:3px}
.lang{flex:none;border-color:var(--line)}.lang button{font-family:var(--f);font-weight:700;padding:6px 16px;min-height:36px}
.lang button[aria-pressed=true]{background:var(--ink)}
.who,.acct .who{flex:none;font-family:var(--f);font-weight:700;border-color:var(--line);max-width:200px}
.hamb{display:none;flex:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);place-items:center;padding:0}
.hamb svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.top .sp{display:none}
@media (max-width:1559px){.nav a svg{display:none}.nav a{padding:0 10px}}
@media (min-width:1560px){.who,.acct .who{max-width:150px}.top .hps-f{width:170px}.nav{gap:4px}.nav a{padding:0 10px}}
@media (max-width:1559px){.nav{gap:2px}.nav a{padding:0 8px}.top .in{gap:12px}}
/* the Subjects link lives in the phone menu only: on wide screens the row has no room for it next to the search box */
.nav a.nsub{display:none}
@media (max-width:1239px){
  .hamb{display:grid}.logo{flex:1}
  .nav{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:stretch;gap:4px;padding:12px clamp(16px,4vw,56px) 16px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--sh-card)}
  .nav.open{display:flex}.nav.open a.nsub{display:inline-flex}.nav a{min-height:48px;font-size:1.05rem}.nav a svg{display:block}.nav a.on::after{display:none}
  .top{position:sticky}.top .in{position:static}
}
@media (max-width:560px){.top .in{gap:8px}.logo{font-size:1.1rem;gap:8px;min-width:0}.logo span{overflow:hidden;text-overflow:ellipsis}.logo i{width:38px;height:38px}.lang{padding:3px}.lang button{padding:6px 12px;font-size:.9rem}.lang button[aria-pressed=true]{display:none}.who span,.acct .who span{display:none}.who,.acct .who,[dir=rtl] .acct .who{padding:4px}.top .btn{min-height:42px;padding:6px 12px;font-size:.88rem}}
@media (max-width:420px){.logo span{display:none}.logo{flex:1}}

/* hero: text column never runs under the side illustrations */
.hero{padding-block:32px 24px;overflow:visible}
.hero .in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(700px,52%)) minmax(0,1fr);align-items:center;column-gap:24px;min-height:0}
.hero .in>.hx{grid-column:2;grid-row:1;max-width:none;margin:0;width:100%}
.hero img.art,.hero .art{position:static;grid-row:1;width:100%;max-width:340px;height:auto;transform:none;inset:auto;display:block}
.hero .art.a1{grid-column:1;justify-self:start}.hero .art.a2{grid-column:3;justify-self:end}
.pill{font-size:.95rem;font-weight:700;padding:6px 18px;margin-bottom:8px}
.hello{font-family:var(--fh);font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:700;margin:4px 0 0}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.9rem);font-weight:800;line-height:1.3;margin:4px 0 10px;text-wrap:balance;overflow-wrap:anywhere}
.hero h1 span,.hero h1 b{display:inline-block}
.hero p{font-family:var(--f);font-size:clamp(1rem,1.3vw,1.18rem);font-weight:400;color:var(--muted);line-height:1.7;margin:0 auto 24px;max-width:56ch}
.hero .cta{gap:12px}
.spk{display:none}
@media (max-width:1100px){.hero .in{grid-template-columns:minmax(0,1fr)}.hero .in>.hx{grid-column:1}.hero .art{display:none!important}}

/* buttons */
.btn{font-weight:600;font-size:1rem;min-height:48px;border-radius:14px;padding:8px 22px;background:var(--v);white-space:nowrap;transition:background .18s,transform .18s,border-color .18s}
.btn.big{min-height:54px;font-size:1.08rem;padding:8px 28px;border-radius:16px}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn:hover{filter:none;background:#5a39d6}.btn.ghost:hover{background:var(--surface);border-color:var(--v)}
.all2{font-size:.92rem;font-weight:600;min-height:44px;padding:6px 20px;color:var(--v)}

/* search */
.srch{gap:12px}.sin{border:1px solid var(--line);border-radius:16px;min-height:56px}
.sin input{font-family:var(--f);font-size:1rem}
.srch .btn{min-height:56px;border-radius:16px;flex:none}
@media (max-width:560px){.srch{flex-direction:column}.srch .btn{width:100%}}

/* sections */
section.blk{padding-block:12px}
.panel{background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:var(--r-sec);padding:clamp(16px,2vw,28px)}
.hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hd h2{font-size:clamp(1.45rem,2.2vw,2rem);font-weight:700;line-height:1.35;margin:0;gap:12px}
.hd h2 svg{width:30px;height:30px}
.hd p{font-family:var(--f);color:var(--muted);font-weight:400;margin:4px 0 0}

/* subject cards */
.subs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sub{border-radius:var(--r-card);padding:20px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,var(--st) 0%,var(--st) 40%,#fff 100%);border:1px solid var(--line);overflow:hidden;transition:transform .18s,box-shadow .18s}
.sub:hover{transform:translateY(-3px);box-shadow:var(--sh-card)}
.sub .bk{position:static;order:2;width:clamp(96px,9.5vw,136px);height:auto;flex:none;align-self:center}
.sub .sx{order:1;padding:0;min-height:0;flex:1;min-width:0}
.sub .hrow{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.sub h3{font-size:clamp(1.15rem,1.55vw,1.5rem);font-weight:700;line-height:1.4;gap:8px;flex-wrap:wrap}
.sub h3 i{font-family:var(--fh);font-size:1.05em}
.sub p{font-family:var(--f);color:var(--muted);font-weight:400;font-size:.98rem;line-height:1.7;margin:6px 0 0}
.sub small{font-family:var(--f);font-weight:700;font-size:.92rem;margin:0}
.chipsG{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0}
.chipsG a{font-family:var(--f);font-weight:700;font-size:clamp(.76rem,.92vw,.9rem);padding:0;min-height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--surface);white-space:nowrap;overflow:hidden}
.sub .all{font-family:var(--fh);font-weight:600;font-size:.98rem;min-height:46px;padding:6px;border-radius:var(--r-sm);border:1px solid var(--line);margin:0}
@media (max-width:1279px){.chipsG{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1199px){.subs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.subs{grid-template-columns:minmax(0,1fr);gap:16px}}

/* game cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{border-radius:20px;border:1px solid var(--line);box-shadow:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-card);border-color:var(--line)}
.card .pv{aspect-ratio:16/7}
.card .tx{padding:12px 16px 16px;gap:4px}
.card b{font-family:var(--fh);font-size:1.12rem;font-weight:700;line-height:1.5}
.card span.d{font-family:var(--f);color:var(--muted);font-weight:400;font-size:.95rem;line-height:1.7}
.card .pv .tag{font-family:var(--f);font-weight:700}
@media (max-width:1199px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.grid{grid-template-columns:minmax(0,1fr);gap:16px}}

/* stage cards (curricula page) */
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-block:8px 16px;align-items:stretch}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;box-shadow:var(--sh-card);display:flex;flex-direction:column}
.stage .t{min-height:0;margin-bottom:24px;gap:16px}
.stage h2{font-size:clamp(1.3rem,1.9vw,1.7rem);font-weight:700;line-height:1.4;white-space:normal;text-wrap:balance}
.stage .ico{width:clamp(88px,8.5vw,128px)}
.gr{gap:12px}
.gr a{font-family:var(--fh);font-weight:600;font-size:1rem;min-height:54px;padding:0 20px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);transition:border-color .18s,background .18s}
.gr a:last-child:nth-child(odd){width:calc(50% - 6px)}
@media (max-width:1199px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.stages{grid-template-columns:minmax(0,1fr);gap:16px}.stage{padding:20px}}
.cc{font-family:var(--f)}

/* remaining home blocks keep the same rhythm */
.tools{gap:16px}.tool{border-radius:20px;border:1px solid var(--line);box-shadow:none;font-family:var(--f);font-weight:700}
.wide{border-radius:20px;border:1px solid var(--line);box-shadow:none}.wide b{font-family:var(--fh)}
.soonbox{border-radius:var(--r-sec)}
footer{font-family:var(--f)}
/* small country switch (home subjects panel, curricula and subjects pages) */
.ccs{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-weight:700;font-size:.92rem;color:var(--muted);white-space:nowrap}
.ccs>div{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface)}
.ccs button{border:0;background:none;min-height:36px;padding:0 14px;border-radius:999px;font-family:var(--f);font-weight:700;font-size:.92rem;color:var(--muted);cursor:pointer}
.ccs button[aria-pressed=true]{background:var(--v-soft);color:var(--v)}
.hdr{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.chipsG a{text-decoration:none;color:inherit}
.chipsG.n3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* sixth subject card: a quiet door to subjects.html */
.sub.more{background:var(--surface);border:2px dashed #cdd3ea;text-decoration:none;color:inherit}
.sub.more:hover{border-color:var(--v)}
.sub.more h3{color:var(--v)}
.mini{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;flex:1}
.mi{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-family:var(--f);font-size:.92rem;line-height:1.4;max-width:100%}
[dir=rtl] .mi{padding:5px 5px 5px 12px}
.mi b{font-weight:700;font-size:.92rem;font-family:var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi .sji{width:30px;height:30px;border-radius:9px;font-size:.78rem}.mi .sji svg{width:18px;height:18px}
.sub.more .all{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--v);background:var(--v-soft);border-color:transparent}

/* "Suggested for you" */
.sug{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sgc{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:box-shadow .18s}
.sgc:hover{box-shadow:var(--sh-card)}
.sgh{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;border-radius:12px}
.sgh>span{min-width:0}
.sgh b{display:block;font-family:var(--fh);font-weight:700;font-size:1.12rem;line-height:1.45;overflow-wrap:anywhere}
.sgh small{display:block;color:var(--muted);font-weight:700;font-size:.9rem;line-height:1.5}
.sgh:hover b{color:var(--v)}
.sgc .chipsG a:hover{border-color:var(--v);color:var(--v)}
.sug.st{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.sgt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;text-align:center;min-height:118px;padding:16px 8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:20px;text-decoration:none;min-width:0;transition:border-color .18s,transform .18s}
.sgt:hover{border-color:var(--v);transform:translateY(-2px)}
.sgt b{font-family:var(--fh);font-weight:700;font-size:1rem;line-height:1.45;overflow-wrap:anywhere}
.sugmore{margin:16px auto 0;display:flex}
@media (max-width:1199px){.sug{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.sug{grid-template-columns:minmax(0,1fr);gap:12px}.sug.st{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* subjects page */
.sjs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-block:8px 16px}
.sj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:var(--sh-card)}
.sj .sjh{display:flex;align-items:center;gap:14px;min-width:0}
.sj h2{margin:0;font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.sj .sji{width:56px;height:56px;border-radius:16px;font-size:1.2rem}.sj .sji svg{width:30px;height:30px}
.sjr{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.sjr small{font-family:var(--f);font-weight:700;font-size:.9rem;color:var(--muted)}
.sjr .chipsG a:hover{border-color:var(--sc);color:var(--sc)}
.sjr .chipsG{grid-template-columns:repeat(6,minmax(0,1fr))}
.sjr .chipsG a{font-size:.95rem;min-height:42px}
.sjr .chipsG a.me{border-color:var(--sc);background:var(--st);color:var(--sc)}
.pgh{padding-block:28px 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pgh h1{margin:0;font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:800;line-height:1.35}
.pgh p{margin:4px 0 0;color:var(--muted);font-family:var(--f)}
@media (max-width:1199px){.sjs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.sjs{grid-template-columns:minmax(0,1fr);gap:16px}}

:focus-visible{outline:3px solid var(--v);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.top .nav{gap:2px}.top .nav a{padding-inline:8px;font-size:.95rem;gap:6px}
@media (max-width:1320px) and (min-width:1101px){.top .nav a svg{display:none}}
@media (max-width:1320px) and (min-width:1101px){.top .nav a{font-size:.88rem;padding-inline:5px}.top .in{gap:10px}}
.top .nav a{font-size:.9rem;padding-inline:5px;gap:5px}.top .in{gap:10px}@media (max-width:900px){.top .in{gap:6px}.top .hpbell>button{width:40px;height:40px}.top .logo{font-size:1.2rem;gap:8px}.top .logo i{width:36px;height:36px}}
@media (max-width:1320px) and (min-width:1101px){.top .nav a{font-size:.82rem;padding-inline:3px}.top .in{gap:6px}}
@media (min-width:1560px){.top .nav a svg{width:17px;height:17px}.top .nav a{gap:4px;padding-inline:3px;font-size:.88rem}}
/* small lessons search in every header (markup: HP.searchHtml in shared.js). Appended to site.css and top.css by build.py.
   Wide screens: a compact field. Narrow screens: an icon that opens the field across the whole header row. */
.hps{display:flex;align-items:center;gap:8px;flex:none;margin:0}
.hps svg{width:20px;height:20px;fill:none;stroke:var(--muted,#52658D);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.hps-f{display:flex;align-items:center;gap:8px;height:44px;width:clamp(170px,14vw,230px);padding:0 14px;border:1px solid var(--line,#E3E7F2);border-radius:999px;background:var(--surface,#fff);cursor:text;transition:border-color .18s}
.hps-f:focus-within{border-color:var(--v,#6947E8)}
.hps input{flex:1;min-width:0;width:100%;border:0;outline:0;background:none;font:inherit;font-family:var(--f,inherit);font-size:.95rem;font-weight:500;color:var(--ink,#182344);padding:0;margin:0;height:100%;-webkit-appearance:none;appearance:none}
.hps input::placeholder{color:var(--muted,#52658D);opacity:1}
.hps input::-webkit-search-cancel-button{display:none}
.hps-o,.hps-x{display:none;width:44px;height:44px;flex:none;border-radius:var(--r-sm,12px);border:1px solid var(--line,#E3E7F2);background:var(--surface,#fff);place-items:center;padding:0;cursor:pointer}
.hps-o svg,.hps-x svg{stroke:var(--ink,#182344)}
.hps-go{display:none;flex:none;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--v,#6947E8);color:#fff;font:inherit;font-family:var(--fh,inherit);font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap}
/* collapsed: below 1560px the nav links, language switch and account leave no room for the field */
@media (max-width:1559px){
  .top .hps-o{display:grid}.top .hps-f{display:none}
  .top .hps.open{position:absolute;inset:0;z-index:6;background:var(--bg,#F2F4FC);padding-inline:clamp(16px,4vw,56px)}
  .top .hps.open .hps-o{display:none}.top .hps.open .hps-f{display:flex;flex:1;width:auto;min-width:0}
  .top .hps.open .hps-x{display:grid}.top .hps.open .hps-go{display:block}
}
@media (max-width:1559px){
  #hpTop .hps-o{display:grid}#hpTop .hps-f{display:none}
  #hpTop .hps.open{position:absolute;inset:0;z-index:6;background:var(--bg,#F2F4FC);padding-inline:clamp(16px,4vw,56px)}
  #hpTop .hps.open .hps-o{display:none}#hpTop .hps.open .hps-f{display:flex;flex:1;width:auto;min-width:0}
  #hpTop .hps.open .hps-x{display:grid}#hpTop .hps.open .hps-go{display:block}
}
@media (max-width:420px){.hps.open .hps-go{padding:0 12px}}