/* Alexandria and IBM Plex Sans Arabic: SIL Open Font License 1.1 */
@font-face{font-family:'Alexandria';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/alexandria-latin-wght-normal.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:'Alexandria';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/alexandria-arabic-wght-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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/ibm-plex-sans-arabic-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+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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/ibm-plex-sans-arabic-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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/ibm-plex-sans-arabic-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+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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/ibm-plex-sans-arabic-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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/ibm-plex-sans-arabic-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+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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/ibm-plex-sans-arabic-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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/ibm-plex-sans-arabic-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+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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/ibm-plex-sans-arabic-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}
/* src/styles.css: tokens */
:root {
  color-scheme: light;
  --paper: #F2F2F7; 
  --sheet: #FFFFFF; 
  --sheet-2: #F2F2F7; 
  --bg: #FFFFFF; 
  --sheet-up: #FFFFFF; 
  --sheet-up-2: #F2F2F7; 
  --ink: #000000; 
  --ink-2: #3C3C43; 
  --ink-3: #5F5F65; 
  --ink-4: #C5C5C7; 
  --line: #C6C6C8; 
  --line-2: #B4B4BA; 
  --hair: 1px; 
  --sw-off: #8E8E93; 
  --edge: #7A7A7F; 
  
  --fill-1: rgba(120, 120, 128, 0.2); 
  --fill-2: rgba(120, 120, 128, 0.16); 
  --fill-3: rgba(118, 118, 128, 0.12); 
  --fill-4: rgba(116, 116, 128, 0.08); 
  --seg-thumb: #FFFFFF; 
  --bar: #F9F9F9; 
  --mat: color-mix(in srgb, var(--bar) 90%, transparent); 
  --mat-bg: color-mix(in srgb, var(--bg) 90%, transparent); 
  --mat-sheet: color-mix(in srgb, var(--sheet) 90%, transparent); 
  --mat-blur: saturate(180%) blur(20px);
  --form: #93A8E8;
  --form-wash: #EDF1FD;
  
  --pen: #2242D6; 
  --pen-2: #1733AE;
  --tint-fill: #2242D6; 
  --tint-fill-2: #1733AE; 
  --pen-wash: #E6EBFF; 
  --on-pen: #FFFFFF;
  --hl: #FFE34D;
  --hl-mark: #FFE34D;
  --hl-paint: linear-gradient(100deg, transparent 0 1%, var(--hl-mark) 2% 98%, transparent 99%); --hl-h: .5em; --hl-y: .1em;
  --on-hl: #000000;
  --pro: #FFCC00; --pro-2: #F0BF00; --pro-wash: #FFF4CC; --on-pro: #000000; --on-pro-wash: #6B4F00; 
  --inverse: #1C1C1E; --on-inverse: #FFFFFF;
  --sel: var(--tint-fill); --on-sel: var(--on-pen);
  --ok: #1C7A35; 
  --ok-mark: #1F8039;
  --ok-wash: #E6F6EA;
  --on-ok: #FFFFFF;
  --bad: #D70015; 
  --bad-wash: #FDE8E9;
  --on-bad: #FFFFFF;
  --warn: #A05A00; 
  --warn-wash: #FFF1D6;
  --red-pen: #FF3B30;
  --grid: #E5E5EA; 
  --axis: #C7C7CC; 
  --fig-ink: #1C1C1E;
  --fig-wash: #EEF2FD;
  --fig-wash-2: #DCE4FB;
  --fig-shade: rgba(34, 66, 214, 0.2);
  --bub-ink: #4F68C4;
  --s1: #2873D0; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4;
  --s1-on: #FFFFFF; --s2-on: #111633; --s3-on: #111633; --s4-on: #111633; --s5-on: #111633;
  --c-orange: #C93400; --c-orange-wash: #FFEDE3; --on-c-orange: #FFFFFF;
  --c-green: #0F7A55; --c-green-wash: #DDF4EA;
  --c-pink: #B4235E; --c-pink-wash: #FCE7F0;
  
  --shadow-1: none;
  --shadow-hero: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.12);
  --scrim: rgba(0, 0, 0, 0.4);
  --scr-ink: var(--red-pen);
  
  --lvl-1: var(--ok); --lvl-1-wash: var(--ok-wash); 
  --lvl-2: var(--warn); --lvl-2-wash: var(--warn-wash); 
  --lvl-3: var(--bad); --lvl-3-wash: var(--bad-wash); 
  --rep: var(--c-orange); --rep-wash: var(--c-orange-wash); 
  --flag: var(--warn); 
  --outline: var(--ink-3); 
  
  --f-ui: -apple-system, BlinkMacSystemFont, "SF Arabic", "SF Pro Text", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Arabic", "SF Pro Display", "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-brand: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; 
  
  --t-display: clamp(2.125rem, 4.6vw, 3.25rem); 
  --t-h1: 2.125rem; 
  --t-h1-fit: clamp(1.75rem, 8.75vw, var(--t-h1)); 
  --t-title1: 1.75rem; 
  --t-h2: 1.375rem; 
  --t-title3: 1.25rem; 
  --t-h3: 1.0625rem; 
  --t-stem: 1.1875rem; 
  --t-read: 1.0625rem; 
  --t-body: 1.0625rem; 
  --t-callout: 1rem; 
  --t-meta: .9375rem; 
  --t-label: .8125rem; 
  --t-brand: 1.5rem; --t-brand-xs: min(1.5rem, 26px); 
  
  --t-fig: 15px; --t-fig-q: 18px; --t-chart: 12px; --t-chart-v: 12.5px; --t-chart-in: 13px;
  
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  
  --gutter: var(--s-4); 
  --pad-card: var(--s-4); 
  --gap-block: var(--s-3); 
  --sp-section: var(--s-6); 
  --sp-page: var(--s-7); 
  --sp-head: var(--s-3); 
  --sp-page-head: var(--s-4); 
  --pad-row-y: var(--s-3); --pad-row-x: var(--s-4); 
  --clear-dock: 80px; --clear-bar: 120px; 
  --dock-h: 50px; 
  
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --side-w: 248px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.32, .72, 0, 1); 
  --top-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #000000; --sheet: #1C1C1E; --sheet-2: #2C2C2E; --bg: #000000; --sheet-up: #2C2C2E; --sheet-up-2: #3A3A3C;
    --ink: #FFFFFF; --ink-2: #D1D1D6; --ink-3: #AEAEB2; --ink-4: #5C5C61;
    --line: #38383A; --line-2: #545458; --sw-off: #7C7C80; --edge: #98989D;
    --fill-1: rgba(120, 120, 128, 0.36); --fill-2: rgba(120, 120, 128, 0.32); --fill-3: rgba(118, 118, 128, 0.24); --fill-4: rgba(118, 118, 128, 0.18);
    --seg-thumb: #636366; --bar: #161618;
    --form: #4B5EA6; --form-wash: #161C38;
    --pen: #8AA0FF; --pen-2: #A9B9FF; --tint-fill: #3F5EFB; --tint-fill-2: #3A57F0; --pen-wash: #1A2350; --on-pen: #FFFFFF;
    --hl: #F4D63C; --hl-mark: rgba(244, 214, 60, .24); --on-hl: #000000;
    --hl-paint: radial-gradient(closest-side, rgba(244, 214, 60, .62) 40%, rgba(244, 214, 60, 0)); --hl-h: 1.1em; --hl-y: -.2em;
    --pro: #FFD60A; --pro-2: #FFE04D; --pro-wash: #2E2600; --on-pro: #000000; --on-pro-wash: #FFD60A;
    --inverse: #3A3A3C; --on-inverse: #FFFFFF;
    --ok: #30D158; --ok-mark: #30D158; --ok-wash: #0E2A17; --on-ok: #000000;
    --bad: #FF6961; --bad-wash: #3A1414; --on-bad: #000000;
    --warn: #FFB340; --warn-wash: #33240A;
    --red-pen: #FF453A;
    --grid: #3A3A3C; --axis: #48484A;
    --fig-ink: #E5E5EA; --fig-wash: #172042; --fig-wash-2: #1F2A55; --fig-shade: rgba(132, 155, 255, 0.28);
    --bub-ink: #8EA0E6;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
    --s1-on: #0A0E1C; --s2-on: #0A0E1C; --s3-on: #0A0E1C; --s4-on: #0A0E1C; --s5-on: #0A0E1C;
    --c-orange: #FF9F6B; --c-orange-wash: #3A1C0E; --on-c-orange: #1A0B03;
    --c-green: #4FD3A0; --c-green-wash: #0E2B22;
    --c-pink: #FF8DBB; --c-pink-wash: #3A1428;
    --shadow-1: none; --shadow-hero: none;
    --shadow-2: 0 0 0 .5px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.6);
    --scrim: rgba(0, 0, 0, 0.6);
    --lvl-1: var(--ok); --lvl-1-wash: var(--ok-wash); --lvl-2: var(--warn); --lvl-2-wash: var(--warn-wash); --lvl-3: var(--bad); --lvl-3-wash: var(--bad-wash);
    --rep: var(--c-orange); --rep-wash: var(--c-orange-wash); --flag: var(--warn); --outline: var(--ink-3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000000; --sheet: #1C1C1E; --sheet-2: #2C2C2E; --bg: #000000; --sheet-up: #2C2C2E; --sheet-up-2: #3A3A3C;
  --ink: #FFFFFF; --ink-2: #D1D1D6; --ink-3: #AEAEB2; --ink-4: #5C5C61;
  --line: #38383A; --line-2: #545458; --sw-off: #7C7C80; --edge: #98989D;
  --fill-1: rgba(120, 120, 128, 0.36); --fill-2: rgba(120, 120, 128, 0.32); --fill-3: rgba(118, 118, 128, 0.24); --fill-4: rgba(118, 118, 128, 0.18);
  --seg-thumb: #636366; --bar: #161618;
  --form: #4B5EA6; --form-wash: #161C38;
  --pen: #8AA0FF; --pen-2: #A9B9FF; --tint-fill: #3F5EFB; --tint-fill-2: #3A57F0; --pen-wash: #1A2350; --on-pen: #FFFFFF;
  --hl: #F4D63C; --hl-mark: rgba(244, 214, 60, .24); --on-hl: #000000;
  --hl-paint: radial-gradient(closest-side, rgba(244, 214, 60, .62) 40%, rgba(244, 214, 60, 0)); --hl-h: 1.1em; --hl-y: -.2em;
  --pro: #FFD60A; --pro-2: #FFE04D; --pro-wash: #2E2600; --on-pro: #000000; --on-pro-wash: #FFD60A;
  --inverse: #3A3A3C; --on-inverse: #FFFFFF;
  --ok: #30D158; --ok-mark: #30D158; --ok-wash: #0E2A17; --on-ok: #000000;
  --bad: #FF6961; --bad-wash: #3A1414; --on-bad: #000000;
  --warn: #FFB340; --warn-wash: #33240A;
  --red-pen: #FF453A;
  --grid: #3A3A3C; --axis: #48484A;
  --fig-ink: #E5E5EA; --fig-wash: #172042; --fig-wash-2: #1F2A55; --fig-shade: rgba(132, 155, 255, 0.28);
  --bub-ink: #8EA0E6;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
  --s1-on: #0A0E1C; --s2-on: #0A0E1C; --s3-on: #0A0E1C; --s4-on: #0A0E1C; --s5-on: #0A0E1C;
  --c-orange: #FF9F6B; --c-orange-wash: #3A1C0E; --on-c-orange: #1A0B03;
  --c-green: #4FD3A0; --c-green-wash: #0E2B22;
  --c-pink: #FF8DBB; --c-pink-wash: #3A1428;
  --shadow-1: none; --shadow-hero: none;
  --shadow-2: 0 0 0 .5px rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.6);
  --scrim: rgba(0, 0, 0, 0.6);
  --lvl-1: var(--ok); --lvl-1-wash: var(--ok-wash); --lvl-2: var(--warn); --lvl-2-wash: var(--warn-wash); --lvl-3: var(--bad); --lvl-3-wash: var(--bad-wash);
  --rep: var(--c-orange); --rep-wash: var(--c-orange-wash); --flag: var(--warn); --outline: var(--ink-3);
}
@media (min-width: 768px) { :root { --gutter: var(--s-5); --pad-card: var(--s-5); --gap-block: var(--s-4); --sp-section: var(--s-7); --sp-page-head: var(--s-5); } }

@media (min-resolution: 2dppx) { :root { --hair: .5px; } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --mat: var(--bar); --mat-bg: var(--bg); --mat-sheet: var(--sheet); } }
@media (prefers-reduced-transparency: reduce) { :root { --mat: var(--bar); --mat-bg: var(--bg); --mat-sheet: var(--sheet); --mat-blur: none; } }

@media (prefers-contrast: more) {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] { --mat: var(--bar); --mat-bg: var(--bg); --mat-sheet: var(--sheet); --mat-blur: none; --line: var(--ink-3); --fill-3: var(--grid); }
}
/* src/styles.css: the question markup, the brand, buttons, FAQ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sep { display: inline-block; width: 1.5px; height: .85em; margin-inline: .6em; background: currentColor; opacity: .3; vertical-align: -.08em; border-radius: 1px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); }
.brand-w { font-family: var(--f-brand); font-weight: 800; font-size: var(--t-brand); line-height: 1; }
.brand svg { width: 54px; height: 17px; flex: none; }
.brand .b-o { fill: none; stroke: var(--form); stroke-width: 1.6; }
.brand .b-f { fill: var(--pen); }
.btn { --b-bg: var(--pen-wash); --b-fg: var(--pen); --b-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-5); border-radius: var(--r-pill); border: 1.5px solid var(--b-bd);
  background: var(--b-bg); color: var(--b-fg); font-weight: 600; font-size: var(--t-h3); line-height: 1.2;
  text-decoration: none; white-space: nowrap; transition: background .15s, opacity .15s, border-color .15s; }
@media (hover: hover) {
.btn:hover { --b-bg: color-mix(in srgb, var(--pen-wash) 88%, var(--pen)); }
}
.btn:active { opacity: .7; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.primary { --b-bg: var(--tint-fill); --b-fg: var(--on-pen); }
@media (hover: hover) {
.btn.primary:hover { --b-bg: var(--tint-fill-2); }
}
.btn.primary:active { --b-bg: var(--tint-fill-2); opacity: 1; }
.btn.ghost { --b-bg: transparent; --b-fg: var(--pen); padding-inline: var(--s-3); }
@media (hover: hover) {
.btn.ghost:hover { --b-bg: var(--fill-4); }
}
.btn.ghost:active { opacity: .5; }
.btn.sm { min-height: 36px; padding: var(--s-1) var(--s-4); font-size: var(--t-meta); }
.btn.lg { min-height: 50px; padding: var(--s-3) var(--s-5); font-size: var(--t-h3); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btn-row > .btn { max-width: 100%; white-space: normal; }
.m { unicode-bidi: isolate; direction: rtl; white-space: nowrap; font-family: var(--f-ui); font-weight: 500; }
.fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.15; margin-inline: .12em; font-size: .9em; }
.fr > span:first-child { border-bottom: 1.5px solid currentColor; padding-inline: .2em; }
.fr > span { display: block; text-align: center; }
.mx { display: inline-flex; align-items: center; gap: .1em; direction: rtl; }
.rt { display: inline-flex; align-items: stretch; direction: rtl; vertical-align: middle; }
.rt::before { content: "√"; display: inline-block; transform: scaleX(-1); font-size: 1.15em; line-height: 1.2; margin-inline-start: -1px; }
.rt > span { border-top: 1.5px solid currentColor; padding-inline: .15em; line-height: 1.5; margin-top: .18em; }
.blank { display: inline-block; min-width: 4.2em; height: 1em; border-bottom: 2px dashed var(--ink-3); vertical-align: -0.1em; margin-inline: .2em; }
u.cu { text-decoration: none; border-bottom: 2.5px solid var(--pen); padding-bottom: 1px; font-weight: 600; }
.ana { display: flex; justify-content: center; margin-top: var(--s-3); }
.ana .pair { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 600; padding: var(--s-3) var(--s-5); border-radius: var(--r-md); background: var(--form-wash); border: 1px dashed var(--form); }
.pair { display: inline-flex; align-items: center; gap: .45em; }
.pair-sep { color: var(--ink-3); font-weight: 400; }
.cmp-cond { font-size: var(--t-body); color: var(--ink-2); background: var(--sheet-2); border-inline-start: 3px solid var(--form); padding: var(--s-2) var(--s-3); border-radius: var(--r-xs); margin-top: var(--s-2); }
.cmp { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s-3); border: 1.5px solid transparent; border-radius: var(--r-md); overflow: hidden; background: var(--fill-3); }
.cmp-cell { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-4); text-align: center; }
.cmp-cell + .cmp-cell { border-inline-start: var(--hair) solid var(--line); }
.cmp-k { font-size: var(--t-label); font-weight: 600; color: var(--ink-3); }
.cmp-v { font-size: var(--t-stem); font-weight: 600; line-height: 1.6; }
.rq { font-weight: 600; }
.psg-t { font-family: var(--f-ui); font-size: var(--t-h3); margin-bottom: var(--s-2); color: var(--ink-2); font-weight: 600; }
.qfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.qfig figcaption { font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); text-align: center; }
.fg { width: 100%; max-width: 360px; height: auto; display: block; overflow: visible; }
.qfig img { display: block; max-width: min(100%, 420px); height: auto; border-radius: var(--r-sm); background: #fff; padding: var(--s-2); border: 1px solid var(--line); }
.g-ln { stroke: var(--fig-ink); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.g-fl { fill: var(--fig-wash); }
.g-fl2 { fill: var(--fig-wash-2); }
.g-hid { stroke-dasharray: 5 5; stroke-width: 1.4; opacity: .6; }
.g-dash { stroke-dasharray: 6 5; stroke-width: 1.6; }
.g-sh { fill: var(--fig-shade); stroke: none; }
.g-ar { stroke: var(--fig-ink); stroke-width: 1.5; fill: none; }
.g-ar-q { stroke: var(--pen); stroke-width: 2; }
.g-dot { fill: var(--fig-ink); }
.g-t { fill: var(--ink); font-family: var(--f-ui); font-size: var(--t-fig); font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.g-q { fill: var(--pen); font-size: var(--t-fig-q); font-weight: 700; }
.c-grid { stroke: var(--grid); stroke-width: 1; }
.c-base { stroke: var(--axis); stroke-width: 1.2; }
.c-tick { fill: var(--ink-3); font-family: var(--f-ui); font-size: var(--t-chart); }
.c-bar { fill: var(--pen); }
.c-val { fill: var(--ink-2); font-family: var(--f-ui); font-size: var(--t-chart-v); font-weight: 700; text-anchor: middle; }
.c-lbl { fill: var(--ink-2); font-family: var(--f-ui); font-size: var(--t-chart); font-weight: 500; text-anchor: middle; }
.c-line { fill: none; stroke: var(--pen); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { fill: var(--pen); stroke: var(--sheet); stroke-width: 2; }
.c-slice { stroke: var(--sheet); stroke-width: 2; }
.c-slice.s1, .sw.s1 { fill: var(--s1); background: var(--s1); }
.c-slice.s2, .sw.s2 { fill: var(--s2); background: var(--s2); }
.c-slice.s3, .sw.s3 { fill: var(--s3); background: var(--s3); }
.c-slice.s4, .sw.s4 { fill: var(--s4); background: var(--s4); }
.c-slice.s5, .sw.s5 { fill: var(--s5); background: var(--s5); }
.c-in { font-family: var(--f-ui); font-size: var(--t-chart-in); font-weight: 700; text-anchor: middle; }
.c-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-5); }
.c-pie .fg { max-width: 210px; }
.c-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--t-meta); }
.c-legend li { display: flex; align-items: center; gap: var(--s-2); }
.c-legend b { margin-inline-start: auto; padding-inline-start: var(--s-4); font-variant-numeric: tabular-nums; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.dtable-wrap { overflow-x: auto; max-width: 100%; }
.dtable { border-collapse: collapse; font-size: var(--t-body); min-width: 320px; }
.dtable th, .dtable td { padding: var(--s-2) var(--s-4); border-bottom: var(--hair) solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.dtable thead th { font-size: var(--t-label); color: var(--ink-3); font-weight: 600; border-bottom: 1.5px solid var(--line-2); }
.dtable tbody th { text-align: start; font-weight: 600; }
.faq { display: grid; max-width: 820px; padding-inline-start: var(--s-4); background: var(--sheet); border-radius: var(--r-lg); }
.faq details + details { border-top: var(--hair) solid var(--line); }
.faq summary { list-style: none; cursor: pointer; min-height: 48px; padding: var(--s-3) 0; padding-inline-end: var(--s-4); font-weight: 600; font-size: var(--t-h3); display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--t-h2); color: var(--pen); transition: transform .2s; line-height: 1; }
.faq .a { padding: 0 0 var(--s-4); padding-inline-end: var(--s-4); color: var(--ink-2); max-width: 70ch; }
.faq .a > * + * { margin-top: var(--s-2); }
@media (max-width: 480px) {
.btn, .btn.lg { padding-inline: var(--s-4); }
}
/* ============ the guide pages (/qudrat/…): scripts/seo.mjs puts the fonts, src/styles.css's tokens and the rules the
   question markup needs (.pair, .fr, .cmp, the figures, .btn, .faq…) before this file, in /qudrat/seo.css. They follow the
   app's Apple-style look (docs/design/apple-hig.md): white cells on the grouped grey page told apart by their fill, no
   outlines, hairline separators, filled option rows ============ */
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-ui); font-size: var(--t-body); line-height: 1.8;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
a { color: var(--pen); text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--pen); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.45; text-wrap: balance; }
p, ul, ol, dl, dd, figure { margin: 0; }
table { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; } /* the mock's solutions and result, the countdown: shown by /qudrat/seo.js */
.nw { white-space: nowrap; }
.wrap {
  width: 100%; max-width: 820px; margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.skip { position: absolute; inset-inline-start: var(--s-3); top: -60px; background: var(--tint-fill); color: var(--on-pen); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); z-index: 10; }
.skip:focus { top: var(--s-3); }

/* the bar: the brand home, one quiet way into the app */
.top { border-bottom: var(--hair) solid var(--line); background: var(--bar); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--top-h); }
.top .brand { min-height: 44px; }
.top .btn.sm { white-space: normal; text-align: center; }
@media (max-width: 380px) { .top .brand svg { width: 42px; } .top .brand-w { font-size: var(--t-brand-xs); } }

/* breadcrumbs */
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--t-meta); color: var(--ink-3); }
.crumbs li { display: inline-flex; gap: var(--s-2); align-items: center; }
.crumbs li + li::before { content: "‹"; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--pen); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-2); }

main { display: block; padding-block: var(--s-5) var(--s-7); }
.page-h { display: grid; gap: var(--s-3); margin-block: var(--s-4) var(--s-5); }
.page-h h1 { font-family: var(--f-display); font-size: var(--t-h1-fit); font-weight: 700; line-height: 1.3; } /* 28px at 320: a guide's long title in two or three lines, not four */
.lede { font-size: var(--t-callout); color: var(--ink-2); line-height: 1.8; max-width: 42rem; }
.upd { font-size: var(--t-label); color: var(--ink-3); }

/* sections: one column of reading text */
.sec { margin-top: var(--sp-section); }
.sec > h2 { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 700; margin-bottom: var(--sp-head); }
.sec > * + * { margin-top: var(--s-3); }
.sec > h2 + * { margin-top: 0; }
.sec h3 { font-size: var(--t-h3); font-weight: 700; }
.sec p, .sec li { max-width: 42rem; }
.sec ul, .sec ol { padding-inline-start: var(--s-5); }
.sec li + li { margin-top: var(--s-1); }
.src { font-size: var(--t-meta); color: var(--ink-3); }

/* the quick answer and the key numbers */
.answer { background: var(--sheet); border: 1px solid transparent; border-inline-start: 4px solid var(--pen); border-radius: var(--r-lg); padding: var(--s-4) var(--pad-card); font-size: var(--t-read); }
.answer b { color: var(--ink); }
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.sec .facts { padding-inline-start: 0; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts li { background: var(--sheet); border: 1px solid transparent; border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-1); margin: 0; }
.facts b { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 700; color: var(--pen); line-height: 1.3; }
.facts span { font-size: var(--t-meta); color: var(--ink-2); line-height: 1.5; }

/* tables */
.tbl-wrap { overflow-x: auto; max-width: 100%; }
.tbl { border-collapse: collapse; width: 100%; font-size: var(--t-body); background: var(--sheet); border: 0; border-radius: var(--r-lg); }
.tbl caption { text-align: start; font-weight: 600; color: var(--ink); padding-bottom: var(--s-2); font-size: var(--t-meta); }
.tbl th, .tbl td { padding: var(--s-2) var(--s-3); border-bottom: var(--hair) solid var(--line); text-align: start; vertical-align: top; }
.tbl thead th { font-size: var(--t-label); color: var(--ink-3); font-weight: 600; border-bottom: var(--hair) solid var(--line-2); }
.tbl tbody th { font-weight: 600; }
.tbl td.n, .tbl th.n { text-align: center; white-space: nowrap; }
.tbl tfoot th, .tbl tfoot td { font-weight: 700; border-bottom: 0; }
.tbl tr:last-child > * { border-bottom: 0; }

/* cards that link (the hubs' types, the next pages) */
.cards { list-style: none; display: grid; gap: var(--s-3); }
.sec .cards { padding-inline-start: 0; }
@media (min-width: 640px) { .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards li { margin: 0; max-width: none; }
.cards a { display: grid; gap: var(--s-1); height: 100%; padding: var(--s-4) var(--pad-card); background: var(--sheet); border: 1px solid transparent; border-radius: var(--r-lg); color: var(--ink); text-decoration: none; transition: background .15s, opacity .15s; }
@media (hover: hover) { .cards a:hover { background: var(--sheet-2); } }
.cards a:active { opacity: .7; }
.cards b { font-size: var(--t-h3); color: var(--pen); }
.cards span { font-size: var(--t-meta); color: var(--ink-2); line-height: 1.7; }

/* how to solve */
.steps { counter-reset: st; list-style: none; }
.sec .steps { padding-inline-start: 0; }
.steps li { counter-increment: st; position: relative; padding-inline-start: var(--s-6); }
.steps li::before { content: counter(st, arabic-indic); position: absolute; inset-inline-start: 0; top: .15em; width: 24px; height: 24px; border-radius: 50%; background: var(--pen-wash); color: var(--pen); font-size: var(--t-label); font-weight: 700; display: grid; place-items: center; line-height: 1; }
.tip { background: var(--warn-wash); color: var(--ink); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.tip b { color: var(--warn); }

/* a worked example */
.ex { background: var(--sheet); border: 1px solid transparent; border-radius: var(--r-lg); padding: var(--pad-card); display: grid; gap: var(--s-3); }
.ex + .ex, .psg-group + .ex, .ex + .psg-group, .psg-group + .psg-group { margin-top: var(--s-4); }
.ex-h { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; }
.ex-h h3 { font-size: var(--t-h3); font-weight: 700; }
.ex-h span { font-size: var(--t-label); color: var(--ink-3); }
.q-stem { font-size: var(--t-stem); font-weight: 500; line-height: 2; }
.q-stem p + p { margin-top: var(--s-2); }
.psg { font-size: var(--t-read); line-height: 2.05; background: var(--fill-3); border: 1px solid transparent; border-radius: var(--r-md); padding: var(--s-4) var(--s-4); }
.psg p + p { margin-top: var(--s-3); }
.psg-group > .psg { margin-bottom: var(--s-4); }
.opts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.sec .opts { padding-inline-start: 0; }
.opts li { margin: 0; max-width: none; }
/* options: filled rounded rows; a state is a fill and a 2px ring, never an outline alone */
.opt { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); min-height: 48px; border-radius: var(--r-md); border: 1.5px solid transparent; background: var(--fill-3); font-size: var(--t-read); line-height: 1.7; }
.opt .opt-t { flex: 1; min-width: 0; }
.bub { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--outline); display: grid; place-items: center; font-size: var(--t-meta); font-weight: 700; color: var(--ink-2); line-height: 1; }
.sol { border-top: var(--hair) solid var(--line); padding-top: var(--s-3); }
.sol > summary { cursor: pointer; color: var(--pen); font-weight: 600; min-height: 44px; display: flex; align-items: center; list-style: none; }
.sol > summary::-webkit-details-marker { display: none; }
.sol > summary::after { content: "+"; margin-inline-start: var(--s-2); font-size: var(--t-h3); }
.sol[open] > summary::after { content: "−"; }
.sol-b { display: grid; gap: var(--s-3); font-size: var(--t-read); line-height: 1.95; }
.sol-b .ans { font-weight: 600; }
.sol-b .ans b { color: var(--ok); }
.sol-b p + p { margin-top: var(--s-1); }
.sol-b mark { background: var(--hl); color: var(--on-hl); padding-inline: .15em; border-radius: 3px; }
.sol-b h4 { font-size: var(--t-body); font-weight: 700; }
.sol-b .trick { padding-top: var(--s-3); border-top: 1px dashed var(--line-2); }
.why { padding-inline-start: var(--s-5); font-size: var(--t-body); color: var(--ink-2); }
.why li + li { margin-top: var(--s-1); }

/* the mock: radios in labels; after «صحّح إجاباتي» the right option is green, a wrong pick is struck */
.mq { border: 1px solid transparent; border-radius: var(--r-lg); background: var(--sheet); padding: var(--pad-card); margin: 0; min-width: 0; display: grid; gap: var(--s-3); }
.mq + .mq { margin-top: var(--s-4); }
.mq legend { float: inline-start; width: 100%; padding: 0; font-size: var(--t-label); color: var(--ink-3); font-weight: 600; }
.mq legend + * { clear: both; }
.mq .opt { cursor: pointer; }
.mq .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mq .opt:has(input:focus-visible) { outline: 2.5px solid var(--pen); outline-offset: 2px; }
.mq .opt:has(input:checked) { background: var(--pen-wash); box-shadow: inset 0 0 0 2px var(--pen); }
.mq .opt:has(input:checked) .bub { background: var(--tint-fill); border-color: var(--tint-fill); color: var(--on-pen); }
@media (hover: hover) { .mq:not(.done) .opt:hover { background: var(--fill-2); } }
.mq.done .opt { cursor: default; }
.mq .opt.is-ok { background: var(--ok-wash); box-shadow: inset 0 0 0 2px var(--ok-mark); }
.mq .opt.is-ok .bub { background: var(--ok-mark); border-color: var(--ok-mark); color: var(--on-ok); }
.mq .opt.is-bad { background: var(--fill-3); box-shadow: inset 0 0 0 2px var(--bad); }
.mq .opt.is-bad .bub { background: var(--bad); border-color: var(--bad); color: var(--on-bad); }
.mq .opt.is-bad .opt-t { text-decoration: line-through; text-decoration-color: var(--bad); }
.mq-st { font-weight: 700; font-size: var(--t-meta); }
.mq-st:empty { display: none; }
.mq.done .mq-st { color: var(--bad); }
.mq.done.is-right .mq-st { color: var(--ok); }
.mq .sol-b { border-top: var(--hair) solid var(--line); padding-top: var(--s-3); }
.part-h { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 700; margin-block: var(--s-6) var(--s-3); }
.go { margin-top: var(--s-5); display: grid; gap: var(--s-2); justify-items: start; }
.result { margin-top: var(--s-5); background: var(--sheet); border: 1.5px solid transparent; box-shadow: var(--shadow-hero); border-radius: var(--r-xl); padding: var(--pad-card); display: grid; gap: var(--s-3); scroll-margin-top: var(--s-4); }
.result:focus { outline: none; }
.result h2 { font-size: var(--t-h3); font-weight: 700; }
.score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.score b { font-family: var(--f-display); font-size: var(--t-display); line-height: 1.2; color: var(--pen); font-variant-numeric: tabular-nums; }
.caveat { font-size: var(--t-meta); color: var(--ink-2); background: var(--sheet-2); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }

/* the countdown */
.cd-box { background: var(--sheet); border: 1px solid transparent; border-radius: var(--r-lg); padding: var(--pad-card); display: grid; gap: var(--s-2); }
.cd-box h2 { font-size: var(--t-h3); font-weight: 700; }
.cd-date { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 700; color: var(--pen); line-height: 1.5; }
.cd { font-weight: 700; font-size: var(--t-read); }
.est { display: inline-block; font-size: var(--t-label); font-weight: 700; color: var(--warn); background: var(--warn-wash); border-radius: 999px; padding: 0 var(--s-2); margin-inline-start: var(--s-1); }

/* the call to action: one primary */
.cta { margin-top: var(--sp-section); background: var(--sheet); border: 1px solid transparent; box-shadow: var(--shadow-hero); border-radius: var(--r-xl); padding: var(--s-5) var(--pad-card); display: grid; gap: var(--s-3); justify-items: start; }
.cta h2 { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 700; }
.cta p { color: var(--ink-2); max-width: 40rem; }
.cta .btn { white-space: normal; text-align: center; }
.more { font-size: var(--t-meta); color: var(--ink-2); }

.faq { max-width: none; }

/* footer */
.foot { border-top: var(--hair) solid var(--line); padding-block: var(--s-6); color: var(--ink-3); font-size: var(--t-meta); }
.foot-in { display: grid; gap: var(--s-4); }
.foot nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.foot a { color: var(--ink-2); }
.foot .brand-w { font-size: var(--t-h2); }
.foot p { max-width: 62ch; }
.faq details[open] summary::after { transform: rotate(45deg); }
/* the comparison's four fixed options, lettered as on the test */
.opts-l { list-style: none; padding: 0; }
/* a line under a table saying how its numbers were rounded */
p.note { font-size: var(--t-meta); color: var(--ink-2); }