/* The palette is the main site's Deep Harbour, same hex values, so a visitor
   crossing from thenibras.com into a lesson does not feel they changed sites.
   Only the fonts differ, and deliberately: this is long-form Arabic reading,
   which Amiri and IBM Plex Sans Arabic set far better than the main site's
   Times-based stack. */
:root{
  --navy:#0C1F33; --blue:#2C6B99; --bluelt:#7FB3D5; --beige:#DCCFBC;
  --grey2:#C6CED8;
  --ink:#1B2B3A; --ink-soft:#48596B; --ink-faint:#7A8898;
  --line:#DDE3EA; --line-strong:#C6CED8;
  --bg:#FFFFFF; --bg-alt:#F4F6F9; --surface:#E6EAEF; --red:#D64545;
  --green:#2E7D5B;
  /* --navy is a panel background; --head is heading text. They are the same
     colour in light mode, which is why they were one token to begin with, and
     that is exactly what broke in dark: a heading painted in the panel colour
     lands on top of the panel colour. */
  --head:#0C1F33;
  /* The interactive models sit on their own surface inside the page. It is
     white in light mode and a lifted slate in dark, rather than pinned white
     in both: a white card is the one element that would glare on an otherwise
     dark lesson page. */
  --card:#FFFFFF; --card-alt:#FAFBFD;
  --serif:"Amiri","Noto Naskh Arabic",Georgia,serif;
  --sans:"IBM Plex Sans Arabic","Segoe UI",system-ui,-apple-system,sans-serif;
}

/* Dark mode. Only the tokens are redefined; every rule below is written against
   them, so nothing else needs a dark variant. The values match the main site's
   [data-theme="dark"] block, which is what makes the two read as one site when
   somebody has chosen dark. */
[data-theme="dark"]{
  --ink:#E6EDF4; --ink-soft:#9FB2C4; --ink-faint:#7E93A6;
  --line:#1A2C3C; --line-strong:#22384B;
  --bg:#0A1826; --bg-alt:#0F2233; --surface:#12293E;
  --navy:#12293E;                 /* panels that were navy-on-white */
  --head:#E6EDF4;                 /* heading text, not the panel behind it */
  --card:#0F2233; --card-alt:#162C40;
  --blue:#7FB3D5;                 /* links need to lift off a dark ground */
  --red:#E8756F;
  --green:#6FC79B;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.9;-webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
.wide{max-width:1100px}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* header
   Rebuilt to match the main site's header rather than the dark bar this used
   to have: same grey surface, same serif brand, same underline-on-hover links,
   same dark-mode toggle and the same blue call to action. Clicking through
   from thenibras.com should not feel like landing somewhere else. */
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;background:var(--blue);
  color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{inset-inline-start:0}
header.site{background:var(--surface);position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--line-strong)}
header.site .bar{display:flex;align-items:center;gap:22px;
  max-width:1100px;margin:0 auto;padding:15px 24px}
.brand{font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:.01em;
  color:var(--head)}
[data-theme="dark"] .brand{color:var(--ink)}
.brand span{color:var(--blue)}
.nav-links{display:flex;gap:22px;font-size:15px;margin-inline-start:8px}
.nav-links a{color:var(--ink-soft);position:relative;padding:3px 0}
.nav-links a::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;
  height:1.5px;width:0;background:var(--blue);transition:.25s}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.nav-back{font-size:15px;color:var(--ink-soft);white-space:nowrap;
  border-bottom:1px solid transparent;padding-bottom:2px}
.nav-back:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--blue)}

/* The link to the other language. It sits among the section links rather than
   beside the theme toggle, because .nav-back is dropped below 520px and the
   link between the Arabic course and its English page is the one that has to
   survive on the narrowest phone. Written as .nav-links a.nav-lang because a
   bare .nav-lang ties with .nav-links a on specificity and then loses on
   source order, which would leave it with the plain link's padding. */
.nav-links a.nav-lang{border:1px solid var(--line-strong);border-radius:999px;
  padding:2px 11px;font-size:13.5px;color:var(--ink-soft)}
.nav-links a.nav-lang:hover{border-color:var(--blue);color:var(--ink)}
.nav-links a.nav-lang::after{display:none}

/* The toggle carries both icons and shows one, rather than swapping an SVG in
   JavaScript, so the correct icon is already painted on first render. */
.theme-toggle{background:transparent;border:1px solid var(--line-strong);
  width:38px;height:38px;border-radius:8px;display:inline-flex;align-items:center;
  justify-content:center;color:var(--ink-soft);cursor:pointer}
.theme-toggle:hover{border-color:var(--blue);color:var(--ink)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
[data-theme="dark"] .theme-toggle .moon{display:none}

/* The menu button, same square as the theme toggle beside it. Hidden above
   820px, which is exactly where the section links are visible in the bar. */
.nav-toggle{display:none;background:transparent;border:1px solid var(--line-strong);
  width:38px;height:38px;border-radius:8px;align-items:center;justify-content:center;
  color:var(--ink-soft);cursor:pointer}
.nav-toggle:hover{border-color:var(--blue);color:var(--ink)}
.nav-toggle svg{width:19px;height:19px}
/* The icon follows aria-expanded rather than a class of its own, so it cannot
   show a state that disagrees with what a screen reader is told. */
.nav-toggle .shut{display:none}
.nav-toggle[aria-expanded="true"] .bars{display:none}
.nav-toggle[aria-expanded="true"] .shut{display:block}

/* .btn is already defined further down for the call-to-action band. These are
   variants layered on top of it, written as .btn.btn-sm rather than .btn-sm so
   they win: a single class ties with .btn on specificity and then loses on
   source order, which would silently leave the header button at the band's
   much larger size. */
.btn.btn-sm{font-size:14.5px;padding:9px 17px;border-radius:8px}
.btn.btn-primary{background:var(--blue);color:#fff}
.btn.btn-primary:hover{background:var(--navy);text-decoration:none}
[data-theme="dark"] .btn.btn-primary{color:#0A1826}
[data-theme="dark"] .btn.btn-primary:hover{background:#fff}

/* Below this width the links leave the bar and become a panel under it,
   opened by the menu button. Positioned against header.site, which is sticky
   and therefore already a containing block, so the panel travels with the bar
   rather than being left at the top of the document on scroll. inset-inline,
   so it spans the header the same way in Arabic. */
@media(max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;inset-inline:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--surface);border-top:1px solid var(--line-strong);
    border-bottom:1px solid var(--line-strong);padding:4px 24px 12px;
    box-shadow:0 14px 26px rgba(12,31,51,.12)}
  .nav-links.open{display:flex}
  .nav-links a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
  /* In the panel it is a row like the others, so it gets the panel's type
     size back and keeps its own outline instead of the row rule. */
  .nav-links a.nav-lang{align-self:flex-start;margin-top:12px;
    padding:7px 15px;font-size:15px;border:1px solid var(--line-strong)}
  /* The underline that grows on hover is a pointer affordance. On a panel
     opened by touch it only ever renders as a stray line. */
  .nav-links a::after{display:none}
}
@media(max-width:520px){.nav-back{display:none}}

/* hero */
.hero{background:linear-gradient(135deg,#0C1F33 0%,#1B4A6E 100%);color:#fff;
  padding:76px 0 68px;text-align:center}
.hero h1{font-family:var(--serif);font-size:clamp(30px,5.2vw,50px);line-height:1.35;
  font-weight:700;margin-bottom:20px}
.hero p.lede{font-size:19px;color:rgba(255,255,255,.86);max-width:620px;
  margin:0 auto 26px;line-height:1.85}
.hero .facts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fact{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:7px 16px;font-size:14px;color:#fff}

/* generic section */
section{padding:60px 0}
section.alt{background:var(--bg-alt)}
h2.sec{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--head);
  margin-bottom:10px}
p.sub{color:var(--ink-soft);margin-bottom:30px}

/* module list */
.mods{border-top:1px solid var(--line)}
.mod{display:flex;gap:18px;align-items:flex-start;padding:20px 4px;
  border-bottom:1px solid var(--line)}
.mod:hover{background:#fff}
.mod .n{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--bluelt);
  min-width:44px;line-height:1.3}
.mod h3{font-size:18px;font-weight:600;color:var(--head);margin-bottom:4px}
.mod .meta{font-size:14px;color:var(--ink-faint)}

/* Cards with artwork behind them.

   The drawing is decorative, so it carries an empty alt and the words sit in
   the HTML on top of it rather than inside the SVG: they stay selectable,
   translatable and readable by a screen reader. A scrim is painted between the
   two rather than trusting the artwork to stay dark exactly where the title
   lands. */
.cards{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:8px}
.cards.big{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.cards.big .card{aspect-ratio:21/9}
.cards.big .card h3{font-size:23px;font-family:var(--serif)}
.cards.big .card .cap{padding:46px 22px 20px}
.card .desc{display:block;font-size:14.5px;color:rgba(255,255,255,.8);
  line-height:1.7;margin-top:7px;max-width:60ch}
@media(max-width:560px){.cards.big .card{aspect-ratio:4/3}}
.card{position:relative;display:block;border-radius:12px;overflow:hidden;
  aspect-ratio:16/9;background:var(--navy);color:#fff;
  border:1px solid var(--line-strong);transition:transform .25s,box-shadow .25s}
.card:hover{text-decoration:none;transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(12,31,51,.22)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
.card .cap{position:absolute;inset-inline:0;bottom:0;padding:38px 18px 16px;
  background:linear-gradient(to top,rgba(6,17,29,.92) 30%,rgba(6,17,29,0))}
.card .n{display:block;font-family:var(--serif);font-size:15px;font-weight:700;
  color:var(--bluelt);letter-spacing:.06em;margin-bottom:2px}
.card h3{font-size:18px;font-weight:600;color:#fff;line-height:1.45;margin:0}
.card .meta{display:block;font-size:13.5px;color:rgba(255,255,255,.72);margin-top:4px}
@media(prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}}

/* tracks */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.tracks{grid-template-columns:1fr}}
.track{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}
.track h3{font-size:19px;color:var(--head);margin-bottom:6px}
.track .hrs{font-size:14px;color:var(--ink-faint);margin-bottom:12px}
.track p{font-size:15px;color:var(--ink-soft);margin-bottom:12px}
.track .seq{font-size:14px;color:var(--blue);font-weight:600}

/* downloads */
.dl{display:flex;gap:16px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:14px}
.dl .tag{background:var(--navy);color:#fff;font-size:12px;font-weight:700;
  border-radius:5px;padding:5px 9px;letter-spacing:.05em}
.dl h3{font-size:17px;color:var(--head);margin-bottom:3px}
.dl p{font-size:14px;color:var(--ink-soft);line-height:1.7}

/* article body */
article{padding:44px 0 20px}
article h1{font-family:var(--serif);font-size:clamp(26px,4.4vw,38px);color:var(--head);
  line-height:1.4;margin-bottom:18px}
article h2{font-family:var(--serif);font-size:26px;color:var(--head);
  margin:44px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
article h3{font-size:19px;color:var(--head);margin:28px 0 10px}
article h4{font-size:17px;color:var(--ink);margin:20px 0 8px}
article p{margin-bottom:16px}
article ul,article ol{margin:0 22px 18px 0;padding-inline-start:6px}
article li{margin-bottom:8px}
article strong{color:var(--head);font-weight:600}
article hr{border:0;border-top:1px solid var(--line);margin:32px 0}
article blockquote{border-inline-start:4px solid var(--bluelt);background:var(--bg-alt);
  padding:16px 20px;margin:20px 0;border-radius:0 8px 8px 0;color:var(--ink-soft)}
article blockquote p:last-child{margin-bottom:0}
article code{background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;
  padding:1px 6px;font-size:.92em;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  direction:ltr;unicode-bidi:isolate;display:inline-block}
/* The blocks are journal entries written in Arabic, not code. Forcing them
   ltr was reordering every line: the day number in "1 يناير 2026" was thrown
   to the far end, and a supplier reference like TR-4471 landed in front of the
   phrase that introduces it. They follow the page instead, which puts the
   account name at the start of the line and the amount at the end, the way a
   ledger is read. The ltr rule below is for the English course, whose entries
   are the same layout mirrored. */
article pre{background:var(--navy);color:#E8EEF4;padding:18px 20px;border-radius:8px;
  overflow-x:auto;margin:20px 0;direction:rtl;text-align:right}
html[dir="ltr"] article pre{direction:ltr;text-align:left}
article pre code{background:none;border:0;color:inherit;padding:0;display:block}
.tbl{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:8px}
article table{border-collapse:collapse;width:100%;font-size:15px;background:#fff}
/* Table headings start where the language starts. text-align:start would
   say this in one line, but Safari only learned it recently and a header
   silently centred is worse than two rules. */
article th{background:var(--bg-alt);color:var(--head);font-weight:600;text-align:right;
  padding:12px 14px;border-bottom:2px solid var(--line);white-space:nowrap}
html[dir="ltr"] article th{text-align:left}
article td{padding:11px 14px;border-bottom:1px solid var(--line);
  color:var(--ink-soft);vertical-align:top}
article tr:last-child td{border-bottom:0}

/* The narrated clip, at the top of the module it belongs to.

   preload="metadata" rather than "auto": the file is nine megabytes and most
   visitors on a phone are here to read, not to watch. The browser fetches the
   header, shows the first frame and the duration, and downloads nothing else
   until somebody presses play. */
.vid{margin:24px 0 10px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line-strong);background:var(--navy);line-height:0}
.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0C1F33}
.vid-note{line-height:1.7;font-size:14.5px;color:var(--ink-faint);margin:10px 0 30px}

/* prev / next */
.pager{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:26px 0 0;margin-top:40px}
.pager a{display:block;border:1px solid var(--line);border-radius:8px;padding:14px 18px;
  min-width:210px;background:#fff}
.pager a:hover{border-color:var(--bluelt);text-decoration:none}
.pager .lbl{display:block;font-size:13px;color:var(--ink-faint);margin-bottom:3px}
.pager .ttl{color:var(--head);font-weight:600;font-size:16px}

/* callouts */
.note{background:#FFF8E8;border:1px solid #EBD9A8;border-radius:8px;padding:18px 20px;
  margin:24px 0;font-size:15px;color:#6B5518;line-height:1.8}
.note strong{color:#5A470F}
.cta-band{background:var(--navy);color:#fff;text-align:center;padding:56px 0}
.cta-band h2{font-family:var(--serif);font-size:29px;margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 24px}
.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:600;
  padding:13px 30px;border-radius:7px;font-size:16px}
.btn:hover{background:#356F9E;text-decoration:none}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.4)}

/* footer
   The main site's navy footer band, same structure: brand and tagline on one
   side, link columns on the other, a thin rule, then the small print. The
   colours are fixed rather than tokenised because this band is dark in both
   themes on the main site too, and a footer that inverts with the toggle would
   be the one element that visibly does not match. */
footer.site{background:#0C1F33;color:#93A9BC;padding:56px 0 26px;font-size:15px}
footer.site .bar{display:grid;grid-template-columns:1.6fr 2fr;gap:48px;
  max-width:1100px;margin:0 auto;padding:0 24px 30px;
  border-bottom:1px solid rgba(255,255,255,.1)}
footer.site a{color:#93A9BC}
footer.site a:hover{color:var(--bluelt);text-decoration:none}
footer.site .brand{color:#fff;display:inline-block;margin-bottom:12px;font-size:22px}
.foot-brand p{max-width:42ch;color:#7E93A6;font-size:15px;line-height:1.8}
.foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.foot-col h4{color:#fff;font-size:12px;letter-spacing:.16em;margin-bottom:14px;font-weight:700}
.foot-col a{display:block;padding:5px 0;font-size:15px}
.foot-bottom{max-width:1100px;margin:0 auto;padding:20px 24px 0;font-size:13.5px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:#7E93A6}
@media(max-width:760px){
  footer.site .bar{grid-template-columns:1fr;gap:32px}
}

/* ---------- interactive widgets ---------- */
.widget{margin:34px 0}
.w-box-outer{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--card);box-shadow:0 1px 3px rgba(12,31,51,.05);
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.w-box-outer.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .w-box-outer{opacity:1;transform:none;transition:none}
}
.w-title{background:var(--navy);color:#fff;padding:13px 20px;font-weight:600;
  font-size:16px;display:flex;align-items:center;gap:10px}
.w-badge{background:var(--bluelt);color:var(--navy);font-size:11px;font-weight:700;
  border-radius:999px;padding:3px 10px;letter-spacing:.03em}
.w-body{padding:22px 20px}
.w-h{font-size:16px;color:var(--head);font-weight:600;margin-bottom:14px}
.w-sub{font-size:14px;color:var(--ink-faint);margin:10px 0}
.w-note{font-size:14px;color:var(--ink-soft);background:var(--bg-alt);
  border-radius:8px;padding:12px 15px;margin-top:14px;line-height:1.75}

.w-ctl{margin-bottom:14px}
.w-ctl-top{display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;margin-bottom:5px}
.w-ctl-label{color:var(--ink-soft)}
.w-ctl-val{color:var(--head);font-weight:700;font-variant-numeric:tabular-nums}
.w-ctl input[type=range]{width:100%;accent-color:var(--blue);height:22px;cursor:pointer}

.w-checks{display:grid;gap:8px;margin-bottom:18px}
.w-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;
  color:var(--ink-soft);cursor:pointer;line-height:1.6}
.w-check input{margin-top:6px;accent-color:var(--blue);width:17px;height:17px;flex:none}

.w-stats{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:16px 0}
.w-stat{flex:1 1 130px;border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;background:var(--bg-alt);transition:background .25s}
.w-stat-l{font-size:13px;color:var(--ink-faint);margin-bottom:3px}
.w-stat-v{font-size:20px;font-weight:700;color:var(--head);
  font-variant-numeric:tabular-nums;transition:color .25s}
.w-stat.blue .w-stat-v{color:var(--blue)}
.w-stat.green .w-stat-v{color:#2E7D5B}
.w-stat.amber .w-stat-v{color:#B07A16}
.w-stat.red .w-stat-v{color:var(--red)}
.w-stat.grey .w-stat-v{color:var(--ink-faint)}
.w-eqsign{align-self:center;font-size:22px;color:var(--ink-faint);font-weight:700;padding:0 2px}

.w-bar{display:flex;height:38px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);margin:14px 0;background:var(--bg-alt)}
.w-seg{display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.w-seg.blue{background:var(--blue)} .w-seg.green{background:#2E7D5B}
.w-seg.amber{background:#C08A20} .w-seg.red{background:var(--red)}
.w-seg.grey{background:#8A97A6}

.w-verdict{margin-top:14px;padding:11px 15px;border-radius:8px;font-size:14.5px;
  font-weight:600;line-height:1.7}
.w-verdict.ok{background:#EAF6F0;color:#1F6248;border:1px solid #BFE0D0}
.w-verdict.bad{background:#FDECEC;color:#9A2C2C;border:1px solid #F0C4C4}

.w-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.w-tab{font-family:inherit;font-size:13.5px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-soft);border-radius:999px;padding:7px 14px;
  cursor:pointer;transition:all .2s}
.w-tab:hover{border-color:var(--bluelt)}
.w-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}

.w-jrn{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.w-jrow{display:flex;border-bottom:1px solid var(--line);font-size:15px;
  animation:wfade .35s ease both}
.w-jrow:last-child{border-bottom:0}
.w-jhead{background:var(--bg-alt);font-weight:600;color:var(--head);font-size:13.5px}
.w-jtot{background:var(--bg-alt);font-weight:700;color:var(--head)}
.w-jacc{flex:1;padding:10px 14px;color:var(--ink-soft)}
.w-jnum{width:110px;padding:10px 14px;text-align:center;
  font-variant-numeric:tabular-nums;border-inline-start:1px solid var(--line)}
.w-jnum.dr{color:var(--blue);font-weight:600}
.w-jnum.cr{color:#2E7D5B;font-weight:600}
@keyframes wfade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.w-btns{display:flex;gap:9px;margin-bottom:12px}
.w-btn{font-family:inherit;font-size:14px;font-weight:600;border:0;
  background:var(--blue);color:#fff;border-radius:7px;padding:9px 18px;cursor:pointer;
  transition:background .2s}
.w-btn:hover{background:#356F9E}
.w-btn:disabled{background:#B9C4CF;cursor:default}
.w-btn.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.w-btn.ghost:hover{background:var(--bg-alt)}

.w-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:11px}
.w-t{border:1px solid var(--line);border-radius:9px;overflow:hidden;
  animation:wfade .35s ease both}
.w-t-name{background:var(--bg-alt);padding:8px 10px;font-size:13.5px;font-weight:600;
  color:var(--head);text-align:center;border-bottom:1px solid var(--line)}
.w-t-body{display:flex}
.w-t-side{flex:1;padding:8px 6px;text-align:center}
.w-t-side:first-child{border-inline-end:1px solid var(--line)}
.w-t-h{font-size:11.5px;color:var(--ink-faint);margin-bottom:2px}
.w-t-v{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.w-t-bal{font-size:12px;color:var(--ink-faint);text-align:center;padding:6px;
  border-top:1px solid var(--line);background:var(--card)}

.w-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.w-3col{grid-template-columns:1fr}}
.w-card{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.w-card-h{background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;
  padding:9px 12px;text-align:center}
.w-line{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;
  font-size:14px;color:var(--ink-soft);border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.w-line:last-child{border-bottom:0}
.w-line.sub{background:var(--card-alt);font-weight:600;color:var(--ink)}
.w-line.tot{background:var(--bg-alt);font-weight:700;color:var(--head)}
.w-line .neg{color:var(--red)}

.w-layers{display:grid;gap:10px;margin-bottom:6px}
.w-layer-h{font-size:13.5px;color:var(--ink-soft);margin-bottom:4px}
.w-layer-track{height:16px;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:999px;overflow:hidden}
.w-layer-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--bluelt));
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.w-layer-n{font-size:12px;color:var(--ink-faint);margin-top:3px}

.w-boxes{display:grid;gap:8px;margin-top:14px}
.w-box{border:1px solid var(--line);border-radius:8px;padding:10px 14px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.w-box-l{color:var(--ink-soft)}
.w-box-v{color:var(--head);font-weight:600;font-variant-numeric:tabular-nums}

/* The green, amber and red inside the models are readable on white and muddy
   on slate, so dark mode lifts them rather than leaving them to fail quietly
   on exactly the figures a learner is meant to be reading. */
[data-theme="dark"] .w-stat.green .w-stat-v{color:#6FD3A5}
[data-theme="dark"] .w-stat.amber .w-stat-v{color:#E4B85C}
[data-theme="dark"] .w-jnum.cr{color:#6FD3A5}
[data-theme="dark"] .w-verdict.ok{background:#12332A;color:#8FE0BC;border-color:#1E5443}
[data-theme="dark"] .w-verdict.bad{background:#3A1D1D;color:#F0A9A5;border-color:#5E2C2C}

@media(max-width:600px){
  body{font-size:16px}
  .hero{padding:56px 0 48px}
  section{padding:44px 0}
  .mod{gap:12px}
  .mod .n{font-size:21px;min-width:34px}
}

.quiz{border:1px solid var(--line-strong);border-radius:10px;background:var(--card);
  padding:6px 22px 20px;margin:24px 0}
.quiz-qs{list-style:none;margin:0;padding:0;counter-reset:q}
.quiz-qs>li{counter-increment:q;padding:20px 0;border-bottom:1px solid var(--line)}
.quiz-qs>li:last-child{border-bottom:0}
.q-t{font-weight:600;color:var(--head);line-height:1.8}
.q-t::before{content:counter(q) ".";color:var(--blue);font-weight:700;
  margin-inline-end:8px}
.q-o{display:grid;gap:8px;margin-top:14px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:start;width:100%;
  background:var(--card-alt);border:1px solid var(--line);border-radius:8px;
  padding:11px 14px;color:var(--ink);font:inherit;font-size:16px;line-height:1.65;
  cursor:pointer}
.opt:hover:not([disabled]){border-color:var(--blue)}
.opt b{flex:0 0 auto;color:var(--ink-faint);font-weight:600}
.opt[disabled]{cursor:default}
/* The chosen answer and the right answer are marked differently on purpose:
   a learner who picked wrong needs to see both at once. */
.opt.is-right{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%, var(--card-alt))}
.opt.is-wrong{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%, var(--card-alt))}
.opt.is-right b,.opt.is-right .mark{color:var(--green)}
.opt.is-wrong b,.opt.is-wrong .mark{color:var(--red)}
.opt .mark{margin-inline-start:auto;font-weight:700}
.q-w{margin-top:12px;padding:11px 14px;border-inline-start:3px solid var(--blue);
  background:var(--bg-alt);border-radius:0 6px 6px 0;color:var(--ink-soft);
  font-size:15.5px;line-height:1.8}
html[dir="ltr"] .q-w{border-radius:6px 0 0 6px}
.quiz-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line-strong);padding-top:16px;margin-top:4px}
.quiz-score{font-weight:600;color:var(--head)}
.quiz-score .verdict{margin-inline-start:8px;font-weight:700}
.quiz-score.pass .verdict{color:var(--green)}
.quiz-score.fail .verdict{color:var(--red)}
.quiz-reset{margin-inline-start:auto;background:transparent;color:var(--blue);
  border:1px solid var(--line-strong);border-radius:8px;padding:7px 15px;
  font:inherit;font-size:14.5px;cursor:pointer}
.quiz-reset:hover{border-color:var(--blue)}
.quiz-key{margin-top:14px;font-size:15px;color:var(--ink-soft)}
@media(max-width:560px){.quiz{padding:4px 16px 18px}.opt{font-size:15.5px}}