/* Burhan v3.1: exact original live CSS blocks, then exact original keys.js component CSS. */

/* Layout: a night-mode exam console. The landing states the thesis beside a live answer card that "scans" the
   student's choice; the app is a focused booklet column with an instrument-panel home and a thumb-reach tab bar.
   Motif: answer-sheet bubbles (أ ب ج د) on a faint bubble-grid; the gold square ∎ marks a proven answer. */
:root{
  --bg:#060A13; --bg-2:#0A1020; --panel:#0D1424; --panel-2:#121B2F; --line:#1D2942; --line-2:#2C3C5E;
  --ink:#E9EEF8; --ink-2:#C3CCDE; --muted:#8A97B3;
  --accent:#3DD6F5; --accent-ink:#03141B; --accent-soft:rgba(61,214,245,.12); --glow:rgba(61,214,245,.38);
  --proof:#F7C948; --proof-soft:rgba(247,201,72,.16);
  --good:#3DDC97; --good-soft:rgba(61,220,151,.13); --bad:#FF6B7A; --bad-soft:rgba(255,107,122,.13);
  --warn:#FF9F43; --warn-soft:rgba(255,159,67,.14); --on-sem:#04120C;
  --dot:rgba(140,170,230,.075); --halo:rgba(61,214,245,.11); --hi:rgba(255,255,255,.05); --scrim:rgba(2,5,12,.66);
  --card:var(--panel); --paper:var(--bg-2); --accent-2:var(--accent-soft); --shade:rgba(61,214,245,.24);
  --b1:#5CA8FF; --b2:#F7C948;
  --pie0:#1F3E5C; --pie1:#4A3C1C; --pie2:#1C4A36; --pie3:#3B2A4F; --pie4:#4F2430; --pie5:#26334A;
  --f-display:"Changa","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-ui:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --f-math:"Noto Naskh Arabic","IBM Plex Sans Arabic",serif;
  --mdir:rtl; --r:18px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#EEF2F8; --bg-2:#E5EBF4; --panel:#FFFFFF; --panel-2:#F5F8FC; --line:#DAE2ED; --line-2:#C2CDDE;
  --ink:#0B1324; --ink-2:#2B3750; --muted:#5A667D;
  --accent:#0A7EA4; --accent-ink:#FFFFFF; --accent-soft:rgba(10,126,164,.10); --glow:rgba(10,126,164,.24);
  --proof:#B7791F; --proof-soft:rgba(183,121,31,.13);
  --good:#14875A; --good-soft:#E2F4EB; --bad:#CF3F57; --bad-soft:#FBE7EB; --warn:#C0650A; --warn-soft:#FCEFDF; --on-sem:#FFFFFF;
  --dot:rgba(30,50,90,.07); --halo:rgba(10,126,164,.09); --hi:rgba(255,255,255,.8); --scrim:rgba(11,19,36,.42);
  --shade:#BFE3EF; --b1:#2F6EA8; --b2:#C98A12;
  --pie0:#CFE3F1; --pie1:#F3DFB8; --pie2:#D6EBDD; --pie3:#E9D7EE; --pie4:#F4D3CF; --pie5:#DDE3EA;
  color-scheme:light}}
:root[data-theme="light"]{
  --bg:#EEF2F8; --bg-2:#E5EBF4; --panel:#FFFFFF; --panel-2:#F5F8FC; --line:#DAE2ED; --line-2:#C2CDDE;
  --ink:#0B1324; --ink-2:#2B3750; --muted:#5A667D;
  --accent:#0A7EA4; --accent-ink:#FFFFFF; --accent-soft:rgba(10,126,164,.10); --glow:rgba(10,126,164,.24);
  --proof:#B7791F; --proof-soft:rgba(183,121,31,.13);
  --good:#14875A; --good-soft:#E2F4EB; --bad:#CF3F57; --bad-soft:#FBE7EB; --warn:#C0650A; --warn-soft:#FCEFDF; --on-sem:#FFFFFF;
  --dot:rgba(30,50,90,.07); --halo:rgba(10,126,164,.09); --hi:rgba(255,255,255,.8); --scrim:rgba(11,19,36,.42);
  --shade:#BFE3EF; --b1:#2F6EA8; --b2:#C98A12;
  --pie0:#CFE3F1; --pie1:#F3DFB8; --pie2:#D6EBDD; --pie3:#E9D7EE; --pie4:#F4D3CF; --pie5:#DDE3EA;
  color-scheme:light}
html.math-ltr{--mdir:ltr}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 var(--f-ui);direction:rtl;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70rem 34rem at 82% -14%,var(--halo),transparent 62%),radial-gradient(var(--dot) 1.15px,transparent 1.7px) 0 0/24px 24px}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:var(--accent)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.25;text-wrap:balance;margin:0}
p{margin:0}
.muted{color:var(--muted)}
.stack{display:grid;gap:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1;min-width:0}
.eyebrow{font-size:12.5px;color:var(--accent);font-weight:700}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);border-radius:12px;padding:8px 16px;font-weight:600;font-size:14.5px;line-height:1.3;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .1s}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px var(--glow)}
.btn.primary:hover:not(:disabled){box-shadow:0 12px 36px -8px var(--glow)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover:not(:disabled){border-color:var(--line-2)}
.btn.small{min-height:34px;padding:5px 12px;font-size:13px;border-radius:10px}
.btn.big{min-height:54px;padding:12px 24px;font-size:17px;border-radius:15px}
.btn:disabled{opacity:.45;cursor:default}
.btn.loading{opacity:.7;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}
/* brand */
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;background:none;border:0;padding:0}
.brand svg{width:36px;height:36px;flex:none}
.brand b{font:800 24px/1 var(--f-display)}
.brand small{display:block;font:500 11.5px/1.3 var(--f-ui);color:var(--muted);margin-top:3px}
.bm-bg{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1.5}
.bm-dot{fill:var(--accent)} .bm-l{fill:var(--accent-ink);font:800 15px var(--f-display)} .bm-q{fill:var(--proof)}

/* ---------- landing ---------- */
html.in-app #landing{display:none}
.fd-prev{color:var(--muted);font-size:.95em;margin:0}.fd-msteps{margin:0;padding-inline-start:22px;display:grid;gap:6px;line-height:1.8;list-style:arabic-indic}
html:not(.in-app) #app{display:none}
.lwrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.lhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.lnav{display:flex;align-items:center;gap:4px}
.lnav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14px;padding:7px 10px;border-radius:10px}
.lnav a:hover{color:var(--ink);background:var(--panel-2)}
@media (max-width:700px){.lnav a{display:none}}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;padding-block:34px 60px}
@media (max-width:920px){.hero{grid-template-columns:1fr;gap:28px;padding-block:14px 44px}}
.kicker{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);background:var(--panel);border-radius:30px;padding:5px 14px;font-size:13px;font-weight:600;color:var(--ink-2)}
.kicker .live{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px var(--good-soft)}
@media (prefers-reduced-motion:no-preference){.kicker .live{animation:pulse 2.2s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}}
.hero h1{font:800 clamp(40px,6.4vw,66px)/1.12 var(--f-display);margin-block:18px 16px}
.hero h1 .hl{color:var(--accent);text-shadow:0 0 34px var(--glow)}
.qed{display:inline-block;width:.38em;height:.38em;background:var(--proof);border-radius:.06em;margin-inline-start:.14em;vertical-align:.06em;box-shadow:0 0 24px var(--proof-soft)}
.lead{font-size:clamp(16px,1.9vw,18.5px);line-height:1.85;color:var(--ink-2);max-width:54ch}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;color:var(--muted);font-size:13.5px}
.trust li{display:flex;align-items:center;gap:6px}
.trust svg{width:16px;height:16px;color:var(--good);flex:none}
/* live answer card */
.demo{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line-2);border-radius:24px;padding:18px;box-shadow:0 34px 90px -46px var(--glow),inset 0 1px 0 var(--hi)}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:12px}
.demo-top .tag{display:inline-flex;align-items:center;gap:7px;color:var(--accent)}
.demo-top .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.demo-stem{font:600 19px/1.9 var(--f-math);margin:0 0 14px}
.demo-stem b{background:var(--accent-soft);padding:1px 9px;border-radius:8px;white-space:nowrap}
.demo .opts{grid-template-columns:1fr 1fr}
@media (max-width:520px){.demo{padding:14px}.demo .opt{font-size:15.5px;gap:8px;padding:8px;min-height:50px}.demo .opt .bub{width:28px;height:28px;font-size:13px}}
.scanline{position:absolute;inset-inline:0;top:-34%;height:34%;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,var(--accent-soft) 75%,var(--accent));box-shadow:0 3px 22px var(--glow)}
.demo.scanning .scanline{animation:scan .85s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes scan{0%{top:-34%;opacity:1}100%{top:100%;opacity:.85}}
.demo.scanning .opt .bub{animation:blink .85s steps(5) 1}
@keyframes blink{50%{border-color:var(--accent);color:var(--accent)}}
@media (prefers-reduced-motion:reduce){.demo.scanning .scanline,.demo.scanning .opt .bub{animation:none}}
.proof{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2)}
.proof ol{margin:0;padding-inline-start:22px;display:grid;gap:4px;font:500 15.5px/1.9 var(--f-math);list-style:arabic-indic}
.demo-note{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}
/* proof strip */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stats div{background:var(--panel);padding:18px;display:grid;gap:4px;align-content:start}
.stats b{font:800 clamp(32px,4.2vw,46px)/1 var(--f-display);font-variant-numeric:tabular-nums}
.stats div:first-child b{color:var(--accent)}
.stats span{font-size:13.5px;color:var(--muted);line-height:1.5}
@media (max-width:720px){.stats{grid-template-columns:1fr 1fr}}
.lsec{padding-top:64px}
.lsec>h2{font-size:clamp(27px,3.6vw,38px);margin-bottom:8px}
.lsec>.sub{color:var(--muted);max-width:62ch;margin-bottom:22px;font-size:15.5px}
/* 80+ ladder */
.ladder{display:grid;gap:8px;max-width:760px}
.rung{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(0,auto);align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 16px}
.rung b{font:800 25px/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.rung b small{font:600 12px var(--f-ui);color:var(--muted);margin-inline-start:4px}
.meter{height:8px;border-radius:9px;background:var(--panel-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:9px;background:var(--line-2)}
.rung .pct{font-weight:600;color:var(--ink-2);font-size:14px;white-space:nowrap}
.rung.goal{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 14px 40px -24px var(--glow)}
.rung.goal b{color:var(--accent)} .rung.goal .meter i{background:var(--accent);box-shadow:0 0 12px var(--glow)}
.goal-tag{font:700 11.5px var(--f-ui);color:var(--accent-ink);background:var(--accent);border-radius:20px;padding:1px 8px;margin-inline-start:6px;vertical-align:2px}
.src{font-size:12.5px;color:var(--muted);margin-top:10px}
/* نادي المئة: a whole full mock without a mistake */
.medal{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--proof);color:var(--accent-ink);font:800 22px/1 var(--f-display);font-variant-numeric:tabular-nums;box-shadow:0 0 0 4px var(--proof-soft),0 10px 30px -10px var(--proof);flex:none}
.medal.small{width:46px;height:46px;font-size:15px}
.medal.big{width:96px;height:96px;font-size:32px}
.clubband{display:flex;gap:16px;align-items:center;margin-top:16px;max-width:760px;background:radial-gradient(30rem 10rem at 100% 0%,var(--proof-soft),transparent 70%),var(--panel);border:1px solid var(--proof);border-radius:var(--r);padding:16px 18px}
.clubband h3{font-size:19px;color:var(--proof)}
.clubband p{color:var(--ink-2);font-size:14.5px;margin-top:2px}
.clubcard{display:grid;justify-items:center;gap:10px;text-align:center;padding:26px 18px;border-radius:22px;border:1px solid var(--proof);background:radial-gradient(24rem 14rem at 50% 0%,var(--proof-soft),transparent 72%),var(--panel)}
.clubcard h3{font-size:28px;color:var(--proof)}
.clubcard .big{font:800 30px/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.clubcard .when{font-size:13px;color:var(--muted)}
.secchip.gold{background:var(--proof-soft);border-color:var(--proof);color:var(--proof)}
@media (max-width:520px){.rung{grid-template-columns:74px minmax(0,1fr);row-gap:6px}.rung .meter{grid-column:1/-1;grid-row:2}.rung b{font-size:22px}}
/* how a question is made: a real sequence */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:6px;align-content:start}
.step .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:800 15px var(--f-display);color:var(--accent-ink);background:var(--accent);box-shadow:0 0 20px var(--glow);margin-bottom:6px}
.step h3{font-size:18px}
.step p{color:var(--muted);font-size:14.5px;line-height:1.75}
@media (max-width:920px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
/* how you train */
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.feat{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.feat .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.feat .ic svg{width:24px;height:24px}
.feat h3{font-size:18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.feat h3 small{font:700 12.5px var(--f-ui);color:var(--proof)}
.feat p{color:var(--muted);font-size:14.5px;line-height:1.75;margin-top:4px}
@media (max-width:720px){.feats{grid-template-columns:1fr}}
.fmt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}
.fmt div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:6px}
.fmt b{font:700 15px var(--f-display)} .fmt span{font-size:12.5px;color:var(--muted)}
.split{display:flex;height:8px;border-radius:9px;overflow:hidden;background:var(--b2)}
.split i{background:var(--accent);flex:13}.split u{flex:11}
.fmt-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin-top:10px}
.fmt-key span{display:inline-flex;align-items:center;gap:6px}
.fmt-key span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent)}
.fmt-key span.q::before{background:var(--b2)}
@media (max-width:640px){.fmt{grid-template-columns:1fr}.fmt div{grid-template-columns:70px minmax(0,1fr);align-items:center}.fmt .split{grid-column:1/-1}}
/* offer */
.offer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;border:1px solid var(--accent);border-radius:24px;padding:28px;background:radial-gradient(42rem 16rem at 92% 0%,var(--accent-soft),transparent 70%),var(--panel);box-shadow:0 30px 80px -50px var(--glow)}
.offer h2{font-size:clamp(26px,3.4vw,36px)}
.offer p{color:var(--ink-2);margin-top:8px;max-width:56ch}
@media (max-width:720px){.offer{grid-template-columns:1fr;padding:22px}}
/* faq */
.faq{display:grid;gap:8px;max-width:820px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding-inline:16px}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:15.5px;padding-block:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 22px/1 var(--f-display);color:var(--accent);flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:14px;color:var(--ink-2);line-height:1.85}
.lfoot{margin-top:64px;padding-block:28px 34px;border-top:1px solid var(--line);display:grid;gap:8px;color:var(--muted);font-size:13px}

/* ---------- app shell ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .in{max-width:860px;margin:0 auto;padding-inline:16px;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ba-header.btn.small{flex:none;min-height:44px;padding:7px 12px;white-space:nowrap;font-size:13px}
#landing .l2-head{gap:12px}
.top .in>.brand{flex:none}
.top .in{flex-wrap:wrap}
.ba-about.btn.small{flex:none;min-height:44px;padding:7px 8px;font-size:13px;white-space:nowrap}
@media(max-width:480px){.top .in{gap:8px}.top .brand small{display:none}.top .brand{gap:6px}.top .brand svg{width:30px;height:30px}.top .brand b{font-size:22px}}
@media(min-width:761px) and (max-width:900px){.top .in{gap:8px}.top .nav button{padding-inline:7px;gap:5px}}
.nav{display:flex;gap:2px}
.nav button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:7px 12px;border-radius:11px;color:var(--muted);font-weight:600;font-size:14px;position:relative;white-space:nowrap}
.nav button svg{width:18px;height:18px}
.nav button:hover{color:var(--ink)}
.nav button[aria-current="page"]{color:var(--ink);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:var(--on-sem);font:700 11px/1 var(--f-ui)}
.tabbar{display:none}
.wrap{max-width:860px;margin:0 auto;padding-inline:16px;padding-block:18px 48px}
@media (max-width:760px){
  .nav{display:none}
  .wrap{padding-block:14px 104px}
  .tabbar{position:fixed;inset-inline:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--panel);background:color-mix(in srgb,var(--panel) 90%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar button{display:grid;justify-items:center;gap:1px;border:0;background:none;color:var(--muted);font-size:11.5px;font-weight:600;padding:6px 2px;border-radius:12px;position:relative}
  .tabbar button svg{width:23px;height:23px}
  .tabbar button[aria-current="page"]{color:var(--accent)}
  .tabbar button[aria-current="page"] svg{filter:drop-shadow(0 0 7px var(--glow))}
  .tabbar .badge{position:absolute;top:1px;inset-inline-end:calc(50% - 22px)}
  /* after an answer the next step never hides below a long explanation: the button bar docks above the tabs */
  .qfoot.dock{position:fixed;inset-inline:0;bottom:0;z-index:29;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-2);background:var(--panel-2);background:color-mix(in srgb,var(--panel-2) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -12px 28px -20px rgba(0,0,0,.7)}
  .dockpad{height:84px}
}
body.focus .tabbar,body.focus .nav,body.focus .ba-about{display:none}
/* the redesign on phones (HQ, Abdullah's phone): «حسابي» is a tab, so the header's account button goes (iPad / laptop keep it: the top nav shows there) */
@media (max-width:760px){html.rd #app .ba-header{display:none!important}}
body.focus .wrap{padding-block:14px 40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card.glow{background:radial-gradient(30rem 14rem at 90% -10%,var(--accent-soft),transparent 70%),var(--panel)}
.card h2{font-size:22px}
.card h3{font-size:17.5px}
.chip{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent);vertical-align:1px}
.chip.hot{background:var(--warn-soft);color:var(--warn)}
.chip.off{background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.chip.gold{background:var(--proof-soft);color:var(--proof)}
/* home */
.hero-app{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:stretch}
@media (max-width:720px){.hero-app{grid-template-columns:1fr}}
.gauge{display:grid;justify-items:center;align-content:center;text-align:center;gap:6px;background:radial-gradient(20rem 12rem at 50% 0%,var(--accent-soft),transparent 72%),var(--panel)}
.gauge .lbl{font-size:12.5px;color:var(--muted);line-height:1.5}
.ringbox{position:relative;width:148px;height:148px}
.ring{width:100%;height:100%;display:block}
.ring-bg{fill:none;stroke:var(--panel-2);stroke-width:11}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:11;stroke-linecap:round;filter:drop-shadow(0 0 6px var(--glow))}
.ringbox .num{position:absolute;inset:0;display:grid;place-items:center;align-content:center;font:800 44px/1 var(--f-display);font-variant-numeric:tabular-nums}
.ringbox .num small{display:block;font:600 11.5px/1.4 var(--f-ui);color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin-top:6px}
.kpis div{display:grid;background:var(--panel-2);border-radius:12px;padding:8px 4px}
.kpis b{font:700 18px/1.3 var(--f-display);font-variant-numeric:tabular-nums}
.kpis span{font-size:11px;color:var(--muted)}
.trend{display:flex;align-items:flex-end;gap:5px;height:56px;margin-top:8px}
.trend span{width:14px;background:var(--accent);border-radius:4px 4px 0 0;opacity:.85}
.plan{display:grid;gap:8px}
.plan .item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.plan .item.done{opacity:.55}
.plan .tick{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font-weight:800;flex:none;color:var(--on-sem)}
.plan .item.done .tick{background:var(--good);border-color:var(--good)}
.plan .item b{font-size:15px;line-height:1.4}
.plan .item .sub{font-size:12.5px;color:var(--muted);line-height:1.5}
.vgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.vbox{display:grid;gap:6px;justify-items:start;text-align:start;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px;min-height:96px;width:100%}
button.vbox:hover{border-color:var(--accent)}
.vbox b{font:700 14px/1.35 var(--f-display)}
.vbox span{font-size:12px;color:var(--muted)}
.vbox .bar{width:100%}
@media (max-width:720px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.vgrid .vbox:last-child:nth-child(odd){grid-column:1/-1}}
.bar{height:7px;border-radius:9px;background:var(--panel-2);overflow:hidden}
.vbox .bar{background:var(--line)}
.bar i{display:block;height:100%;background:var(--accent);border-radius:9px}
.bar.good i{background:var(--good)} .bar.warn i{background:var(--warn)} .bar.bad i{background:var(--bad)}
.doms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:620px){.doms{grid-template-columns:1fr}}
.dom h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.dom h3 span{font:500 12px var(--f-ui);color:var(--muted)}
.unit{border-top:1px solid var(--line)}
.dom h3+.unit{border-top:0}
.uhead{display:grid;grid-template-columns:minmax(0,1fr) 92px 22px;gap:10px;align-items:center;width:100%;padding:9px 0;background:none;border:0;text-align:start}
.uhead .nm,.skrow .nm{font-weight:600;font-size:14px;line-height:1.4;min-width:0}
.uhead .nm small,.skrow .nm small{display:block;color:var(--muted);font-weight:400;font-size:12px}
.chev{font:700 18px var(--f-display);color:var(--muted);text-align:center}
.sks{padding:0 0 10px;padding-inline-start:12px;border-inline-start:2px solid var(--accent-soft);margin-bottom:8px}
.skrow{display:grid;grid-template-columns:minmax(0,1fr) 80px auto;gap:10px;align-items:center;padding-block:8px;border-top:1px dashed var(--line)}
.sks .skrow:first-child,.card h3+.skrow,.card p+.skrow{border-top:0}
@media (max-width:520px){.skrow{grid-template-columns:minmax(0,1fr) auto}.skrow .bar{display:none}.uhead{grid-template-columns:minmax(0,1fr) 64px 18px}}
.lvl{font-weight:600}
.lvl.new{color:var(--muted)} .lvl.weak{color:var(--bad)} .lvl.mid{color:var(--warn)} .lvl.good{color:var(--good)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--panel-2)}
.seg button{border:0;background:none;padding:7px 13px;font-weight:600;font-size:13px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
/* quiz */
.qhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qhead b{font:700 16px var(--f-display)}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:30px;padding:3px 12px;font:700 15px var(--f-display);font-variant-numeric:tabular-nums}
.pill.warn{border-color:var(--warn);color:var(--warn)}
.progress{flex:1;min-width:110px;height:6px;background:var(--panel-2);border-radius:9px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);box-shadow:0 0 10px var(--glow);border-radius:9px}
.qcard{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.qtop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);background:var(--panel-2)}
.qbody{padding:20px 18px;display:grid;gap:16px}
.stem{font:600 19px/1.95 var(--f-math)}
.stem b{display:inline-block;max-width:100%;color:var(--ink);background:var(--accent-soft);padding:0 8px;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.figwrap{display:grid;justify-items:center;gap:2px}
/* the lesson-bank figures (raw SVG from the lessons, drawn in fixed light-theme colours: black / navy labels) sit on white paper, as the lesson view
   already shows them (.lp-fig), so
   the dark theme never puts dark labels on a dark card (the render audit 2026-10-29: 132 of 329 had text under 2:1), and a fixed width never runs past
   the card (153 did: charts drawn 600+ wide spilled off the left edge). App-drawn figures all carry a class (.fig, .fd-svg) */
#view .figwrap > svg:not([class]),#view .kx-draw svg:not([class]){width:100%;max-width:100%;height:auto;background:#fff;border-radius:12px}
.figwrap .note{font-size:11px;color:var(--muted)}
.fig{max-width:100%;height:auto}
.cmp{width:100%;border-collapse:collapse;font:600 17px/1.7 var(--f-math);table-layout:fixed}
.cmp th{background:var(--accent-soft);color:var(--ink);font:600 13px var(--f-ui);padding:6px;border:1px solid var(--line-2)}
.cmp td{border:1px solid var(--line-2);padding:10px 8px;text-align:center;vertical-align:middle}
.opts{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.one{grid-template-columns:1fr}
@media (max-width:520px){.opts{grid-template-columns:1fr}}
.opt{display:flex;align-items:center;gap:12px;text-align:start;width:100%;background:var(--panel-2);border:1.5px solid var(--line-2);border-radius:15px;padding:10px 12px;font:600 17px/1.6 var(--f-math);min-height:56px;color:var(--ink);transition:border-color .12s,background .12s,box-shadow .12s}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt .bub{flex:none;width:32px;height:32px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font:700 14px var(--f-ui);color:var(--ink-2)}
.opt .val{min-width:0;flex:1}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel .bub{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 14px var(--glow)}
.opt.ok{border-color:var(--good);background:var(--good-soft)} .opt.ok .bub{background:var(--good);border-color:var(--good);color:var(--on-sem)}
.opt.no{border-color:var(--bad);background:var(--bad-soft)} .opt.no .bub{background:var(--bad);border-color:var(--bad);color:var(--on-sem)}
.opt:disabled{cursor:default}
.qfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);background:var(--panel-2)}
.sol{border-top:1px solid var(--line);padding:16px 18px;display:grid;gap:10px}
.sol h4,.proof h4{display:flex;align-items:center;gap:8px;font-size:16px}
.sol h4::before,.proof h4::before{content:"";width:11px;height:11px;border-radius:2px;background:var(--proof);box-shadow:0 0 12px var(--proof-soft);flex:none}
.sol ol{margin:0;padding-inline-start:24px;list-style:arabic-indic;display:grid;gap:4px;font:500 16px/1.9 var(--f-math)}
.tip{border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.75}
.tip b{font-weight:700}
.tip.trick{background:var(--accent-soft)} .tip.trap{background:var(--warn-soft)}
.tip.why{background:var(--bad-soft)}
details.how summary{cursor:pointer;font-weight:700;color:var(--accent);list-style:none}details.how summary::-webkit-details-marker{display:none}details.how summary::after{content:" ▾"}details.how[open] summary::after{content:" ▴"}details.how p{margin-top:8px}
/* Codex's explanations: the idea line, and the rest folded under «تفاصيل أكثر» */
.sol .idea{margin:0;line-height:1.85}
.sol details.more{border-top:1px dashed var(--line);padding-top:8px;display:grid;gap:8px}
.sol details.more summary{cursor:pointer;font-weight:700;color:var(--accent);list-style:none}
.sol details.more summary::-webkit-details-marker{display:none}
.sol details.more summary::after{content:" ▾"}.sol details.more[open] summary::after{content:" ▴"}
.sol details.more ul{margin:4px 0 0;padding-inline-start:18px} .whyslot:empty{display:none}
.fbfaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fbfaces button{display:grid;justify-items:center;gap:4px;padding:12px 6px;border-radius:14px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);font:inherit;cursor:pointer}
.fbfaces button span{font-size:34px;line-height:1.1}.fbfaces button small{font-size:13px;color:var(--ink-2)}
.fbfaces button[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}
.fbsheet textarea{width:100%;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);font:inherit;padding:10px;resize:vertical}
.fbconsent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.7}.fbconsent input{margin-top:5px;width:18px;height:18px;flex:none}
.verdict{font:700 17px var(--f-display)}
.verdict.ok{color:var(--good)} .verdict.no{color:var(--bad)}
.linkbtn{background:none;border:0;padding:4px 2px;color:var(--muted);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.linkbtn:hover{color:var(--ink)}
.linkbtn svg{width:15px;height:15px}
.navgrid{display:flex;flex-wrap:wrap;gap:5px}
.navgrid button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--panel-2);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.navgrid button.ans{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.navgrid button.cur{outline:2px solid var(--accent);outline-offset:1px}
.navgrid button.flag{border-color:var(--warn);box-shadow:inset 0 -3px 0 var(--warn)}
.passage{font:500 16.5px/2 var(--f-math);background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 12px;max-height:46vh;overflow:auto}
.vq{margin:0}
/* results */
.score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.score .k{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.score .k b{display:block;font:800 28px/1.2 var(--f-display);font-variant-numeric:tabular-nums}
.score .k span{font-size:12px;color:var(--muted)}
/* pay screen: two one-time passes, the longest highlighted */
.paybox{max-width:640px;margin:0 auto}
.paybox h2{font-size:26px}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.perks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);line-height:1.7;font-size:14.5px}
.perks li::before{content:"✓";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;display:grid;place-items:center;background:var(--good-soft);color:var(--good);font-weight:800;font-size:12px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:6px}
.planc{position:relative;display:grid;gap:6px;align-content:start;background:var(--panel-2);border:1px solid var(--line-2);border-radius:18px;padding:24px 18px 18px}
.planc.best{border-color:var(--accent);background:radial-gradient(20rem 10rem at 90% -20%,var(--accent-soft),transparent 70%),var(--panel-2);box-shadow:0 24px 60px -36px var(--glow)}
.planc .badge{position:absolute;top:-12px;inset-inline-start:16px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;padding:3px 11px;border-radius:20px}
.planc .price{display:flex;align-items:baseline;gap:6px}
.planc .price b{font:800 42px/1 var(--f-display);font-variant-numeric:tabular-nums}
.planc .price span{color:var(--ink-2);font-weight:700}
.planc .dur{font-weight:700;font-size:15.5px}
.planc .per{font-size:13px;min-height:1.6em}
.planc .btn{margin-top:8px;width:100%}
.paynote{font-size:13px;text-align:center}.paynote.trustpay{font-size:15px;font-weight:700;color:var(--ink)}
.valueline{font:700 17px/1.8 var(--f-display);color:var(--accent)}
.pvtext{display:grid;gap:8px}.pvtext ul{margin:0;padding-inline-start:20px}.pvtext p,.pvtext li{line-height:1.85}
.receipt{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-align:start}
.receipt h3{font-size:16px}.receipt dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:10px 0 0;font-size:14px}
.receipt dt{color:var(--muted)}.receipt dd{margin:0;font-weight:600}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}
.legal-nav{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:13.5px}
.fmtbox{border-top:1px solid var(--line);padding-top:10px}
.ms-adv{margin:0;color:var(--ink);font-weight:600;line-height:1.8}
.ms-more{margin:0;color:var(--ink-2)}
.ms-rv{font-size:13px;font-weight:700;color:var(--muted);text-align:end}
/* «برهان كامل» pay screen in the redesign (built off; 2026-10-28) */
.pay-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width:560px){.pay-cmp{grid-template-columns:1fr}}
.pay-col{padding:12px 14px;border-radius:14px;background:var(--panel-2)}.pay-col.full{box-shadow:inset 0 0 0 1.5px var(--accent)}
.pay-once{margin:0;padding:10px 14px;border-radius:12px;background:var(--accent-soft);color:var(--ink);font-weight:800;font-size:16px;text-align:center} /* HQ: the one-time payment, prominent */
.pay-col h3{margin:0 0 6px;font-size:16px}.pay-col ul{margin:0;padding-inline-start:18px;display:grid;gap:5px;line-height:1.65}.pay-col small{display:block;color:var(--muted);font-size:12.5px;font-weight:500}
html:not(.navk) .tabbar>*{visibility:hidden} /* the static tabs never show: keysNav fills the right ones first (Codex BH-05) */
/* «تقرير الاختبار» (EXAM_REPORT_BRIEF §2, 2026-10-28) */
.ex-rep .ex-sub{margin:4px 0 0;font-size:15px}
.ex-kind{display:grid;gap:6px;padding:12px 14px;border-radius:14px;background:var(--panel-2);justify-items:start}.ex-kind b{font-size:16px}.ex-kind p{margin:0;line-height:1.7}
.ex-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:8px;border-top:1px dashed var(--line)}.ex-row .grow{display:grid;gap:2px;min-width:0}.ex-row small{color:var(--muted)}.ex-row .btn{flex:none}
.ex-ans{display:grid;gap:4px}.ex-ans p{margin:0;padding:8px 12px;border-radius:12px;font-weight:700;line-height:1.7}.ex-ans .no{background:rgba(224,112,90,.12)}.ex-ans .ok{background:rgba(61,190,139,.12)}
.ex-sol h4{margin:0 0 4px}.ex-sol ol{margin:0;padding-inline-start:20px}
.ex-idea{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--line)}.ex-idea span{font-weight:700}
.rd-exsug{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.rd-exsug b{flex:1 1 100%;font-size:15px;font-weight:600;color:var(--ink)}/* the redesign's one separator (app.js sepFix): the original «·» stays in the text, drawn as a larger bullet with room around it, so it never reads as «٠» */
:root.rd .sep{position:relative;display:inline-block;padding:0 .3em;color:transparent}:root.rd .sep::after{content:'•';position:absolute;left:0;right:0;top:0;text-align:center;color:var(--muted);font-weight:400}
.fmtbox summary{cursor:pointer;font-weight:700;color:var(--ink-2);padding-block:4px}
.fmtbox[open] summary{margin-bottom:12px}
.havecode summary{cursor:pointer;color:var(--ink-2);font-weight:600;font-size:14px;width:max-content}
.havecode[open] summary{margin-bottom:10px}
.passcode{display:inline-block;margin:4px auto;font:800 clamp(26px,7vw,40px)/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em;padding:14px 20px;border-radius:16px;border:2px dashed var(--accent);background:var(--accent-soft);color:var(--ink);user-select:all}
.passcode.small{font-size:18px;padding:6px 12px;border-width:1px;margin:0}
.paysheet{width:min(460px,100%)}
.paysheet .mysr-form{min-height:120px}
@media (max-width:520px){.score{gap:8px}.score .k{padding:10px 6px}.score .k b{font-size:22px}.score .k span{font-size:11px}}
.brk{display:grid;gap:8px}
.brk .row{flex-wrap:nowrap}
.brk .lab{width:120px;flex:none;font-size:14px}
.brk .num{font-size:13px;color:var(--muted);width:52px;flex:none;text-align:left;font-variant-numeric:tabular-nums}
.brk .bar{flex:1}
.split2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:620px){.split2{grid-template-columns:1fr}}
.rev{display:grid;gap:8px}
.rev .it{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);width:100%;text-align:start;font:inherit;color:inherit}
button.it:hover{border-color:var(--line-2)}
.rev .it .mk{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--on-sem)}
.rev .it .mk.ok{background:var(--good)} .rev .it .mk.no{background:var(--bad)} .rev .it .mk.sk{background:var(--muted)}
.rev .it .tx{min-width:0;flex:1;font:500 15px/1.7 var(--f-math);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mocks{display:grid;gap:10px}
.mock{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:10px;background:var(--panel-2)}
.secchip{border:1px solid var(--line-2);background:var(--panel);border-radius:20px;padding:4px 12px;font-size:13px;font-weight:600}
button.secchip:hover{border-color:var(--accent)}
.secchip.done{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.empty{text-align:center;padding:30px 14px;color:var(--muted)}
.empty h2{color:var(--ink);margin-bottom:6px}
/* sheet (report, notices) */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:end center;background:var(--scrim);padding:16px}
@media (min-width:640px){.modal{place-items:center}}
.sheet{width:min(520px,100%);max-height:calc(100% - 24px);overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:22px;padding:18px;display:grid;gap:12px;box-shadow:0 30px 90px -30px var(--glow)}
.sheet h3{font-size:19px}
.reasons{display:grid;gap:6px}
.reasons label{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:14.5px}
.reasons label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.reasons input{accent-color:var(--accent);width:17px;height:17px;margin:0}
.field{width:100%;background:var(--panel-2);color:var(--ink);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;font:inherit}
textarea.field{min-height:84px;resize:vertical}
.field:focus{outline:2px solid var(--accent);outline-offset:1px}
@media (prefers-reduced-motion:no-preference){.card,.qcard{animation:rise .28s ease-out}@keyframes rise{from{transform:translateY(5px);opacity:.6}to{transform:none;opacity:1}}}
/* math */
.mx{unicode-bidi:isolate;direction:var(--mdir);font-family:var(--f-math)}
.pw{display:inline-flex;align-items:flex-start;direction:var(--mdir)}
.pw sup{font-size:.66em;line-height:1;margin-top:-.1em;padding-inline:.06em}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin-inline:.12em;line-height:1.25}
.fr .fn{border-bottom:1.6px solid currentColor;padding:0 .25em .05em}
.fr .fd{padding:.05em .25em 0}
.sq{display:inline-flex;align-items:stretch;direction:var(--mdir)}
.sq .sqs{display:inline-block}
html:not(.math-ltr) .sq .sqs{transform:scaleX(-1)}
.sq .sqi{border-top:1.6px solid currentColor;padding:0 .18em;margin-top:.12em}
/* figures drawn by the question generators */
.fig text{direction:var(--mdir)}
.fig .st{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.fig .sh{fill:var(--shade);stroke:none}
.fig .bgf{fill:var(--card);stroke:none}
.fig .tk{fill:none;stroke:var(--ink);stroke-width:1.4}
.fig .dsh{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:4 3}
.fig .ar{fill:none;stroke:var(--accent);stroke-width:1.4}
.fig .ah{fill:var(--ink)}
.fig .dot{fill:var(--ink)}
.fig .hh{stroke:var(--ink);stroke-width:4.5;stroke-linecap:round} .fig .mh{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
.fig .cn{fill:var(--ink);font:600 12.5px var(--f-ui)}
.fig .lb{fill:var(--ink);font:600 15px var(--f-math)}
.fig .grid{stroke:var(--line-2);stroke-width:1}
.fig .ax{fill:var(--muted);font:500 11.5px var(--f-ui)}
.fig .axn{fill:var(--muted);font:500 11.5px var(--f-ui)}
.fig .axn.ya{text-anchor:start} html.math-ltr .fig .axn.ya{text-anchor:end}
.fig .vl{fill:var(--ink);font:700 12px var(--f-ui)}
.fig .b1{fill:var(--b1)} .fig .b2{fill:var(--b2)}
.fig .ln{fill:none;stroke:var(--b1);stroke-width:2.2;stroke-linejoin:round}
.fig .lnd{fill:var(--card);stroke:var(--b1);stroke-width:2}
.fig .ln2{fill:none;stroke:var(--b2);stroke-width:2.2;stroke-dasharray:6 3;stroke-linejoin:round}
.fig .lnd2{fill:var(--card);stroke:var(--b2);stroke-width:2}
.fig .seat{fill:var(--accent-2);stroke:var(--accent);stroke-width:1.4}
.fig .pl{fill:var(--ink);font:600 12px var(--f-ui)}
.fig .pie0{fill:var(--pie0);stroke:var(--card);stroke-width:1.5} .fig .pie1{fill:var(--pie1);stroke:var(--card);stroke-width:1.5}
.fig .pie2{fill:var(--pie2);stroke:var(--card);stroke-width:1.5} .fig .pie3{fill:var(--pie3);stroke:var(--card);stroke-width:1.5}
.fig .pie4{fill:var(--pie4);stroke:var(--card);stroke-width:1.5} .fig .pie5{fill:var(--pie5);stroke:var(--card);stroke-width:1.5}
.colsum{margin:0 auto;border-collapse:collapse;font:600 22px/1.4 var(--f-math);font-variant-numeric:tabular-nums}
.colsum td{padding:0 .28em;text-align:center;min-width:1.1em}
.colsum tr.ln td{border-top:2px solid var(--ink)}
.colsum b{color:var(--accent)}
.tblwrap{overflow-x:auto;max-width:100%}
.dt{border-collapse:collapse;margin:0 auto;font:500 14px var(--f-ui);font-variant-numeric:tabular-nums}
.dt th,.dt td{border:1px solid var(--line-2);padding:5px 9px;text-align:center}
.dt thead th{background:var(--accent-soft)}
.dt tbody th{font-weight:600;background:var(--panel-2)}

/* ================= Burhan 2.0, phase 1: the ad look (navy, cyan glow, gold only for the brand), bigger targets, motion with a purpose ================= */
body{font-size:16px}
body::before{background:radial-gradient(70rem 34rem at 82% -14%,var(--halo),transparent 62%)}
:root:not([data-theme="light"]){--muted:#97A4C0}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--muted:#5A667D}}
.btn{min-height:46px;border-radius:13px;font-size:15px}
.btn.small{min-height:38px;font-size:13.5px}
.btn.big{min-height:56px;font-size:17.5px;border-radius:16px}
.btn.primary{box-shadow:0 10px 30px -10px var(--glow),0 0 0 1px var(--accent)}
.btn.primary:hover:not(:disabled){box-shadow:0 14px 40px -8px var(--glow),0 0 22px -6px var(--accent)}
.opt{min-height:58px;padding:12px 14px}
.opt .bub{width:34px;height:34px}
.plan .item{padding:13px 14px}.plan .item .sub{font-size:13.5px}
.qtop{font-size:13.5px}
.gauge .lbl{font-size:13.5px}.kpis span{font-size:12px}
.card h2{font-family:var(--f-display);font-weight:800}
/* the proof moment: scan sweep → the right answer glows, a wrong one shakes, then the برهان slides in */
.qcard{position:relative}
.qscan{display:none}
@media (prefers-reduced-motion:no-preference){
  .qcard.proofing .qscan{display:block;position:absolute;inset-inline:0;top:-30%;height:30%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,var(--accent-soft) 70%,var(--accent));box-shadow:0 3px 22px var(--glow);animation:scan .62s cubic-bezier(.45,.05,.3,1) forwards}
  .qcard.proofing .opt.ok{animation:optin .3s .6s both,okglow 1.1s .9s}
  .qcard.proofing .opt.ok.mine{animation:minein .3s .6s both,okglow 1.1s .9s}
  .qcard.proofing .opt.no{animation:minein .3s .6s both,shake .42s .9s}
  .qcard.proofing .opt.ok .bub,.qcard.proofing .opt.no .bub{animation:bubin .3s .6s both}
  .qcard.proofing .sol{animation:solin .45s .95s both}
  @keyframes optin{from{border-color:var(--line-2);background:var(--panel-2)}}
  @keyframes minein{from{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 18px -4px var(--glow)}}
  @keyframes bubin{from{background:transparent;border-color:var(--line-2);color:var(--ink-2)}}
  @keyframes okglow{40%{box-shadow:0 0 0 5px var(--good-soft),0 0 30px -2px var(--good)}100%{box-shadow:0 0 0 0 transparent}}
  @keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
  @keyframes solin{from{opacity:0;transform:translateY(12px)}}
  /* a new screen: its cards rise in, one after another; bars grow; rings fill */
  #view.enter > .stack > *, #view.enter > section{animation:enterRise .42s cubic-bezier(.2,.8,.2,1) both}
  #view.enter > .stack > *:nth-child(2){animation-delay:.06s} #view.enter > .stack > *:nth-child(3){animation-delay:.12s} #view.enter > .stack > *:nth-child(n+4){animation-delay:.18s}
  @keyframes enterRise{from{opacity:0;transform:translateY(14px)}}
  #view.enter .bar i{animation:grow .9s .25s cubic-bezier(.2,.8,.2,1) both}
  @keyframes grow{from{width:0}}
  #view.enter .ring-fg{animation:fill 1.1s .2s cubic-bezier(.2,.8,.2,1) both}
  @keyframes fill{from{stroke-dasharray:0 1000}}
}
/* Today: one big card on home */
.today{position:relative;overflow:hidden;border-radius:26px;padding:20px;border:1px solid var(--line-2);background:radial-gradient(34rem 18rem at 85% -20%,var(--accent-soft),transparent 70%),linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:0 30px 80px -50px var(--glow),inset 0 1px 0 var(--hi);display:grid;gap:16px}
.today .t-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.today .t-top .day{font:800 15px var(--f-display);color:var(--accent)}
.streak{display:inline-flex;align-items:center;gap:6px;border-radius:30px;padding:4px 12px;font-weight:700;font-size:14px;background:var(--proof-soft);color:var(--proof)}
.streak.zero{background:var(--panel-2);color:var(--ink-2)}
.today .t-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.today .ringbox{width:132px;height:132px}
.today .ringbox .num{font-size:40px}
.today h2{font:800 clamp(24px,5.6vw,30px)/1.25 var(--f-display);margin-bottom:6px}
.today .next{color:var(--ink-2);font-size:15.5px;margin-bottom:12px}
.today .t-prog{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px;color:var(--ink-2);font-weight:600}
.today .t-prog .bar{height:10px}.bar.acc i{background:var(--accent);box-shadow:0 0 10px var(--glow)}
@media (max-width:520px){.today .t-main{grid-template-columns:1fr;justify-items:center;text-align:center}.today .t-main .btn{width:100%}}
/* results: one ring, numbers that count up, one next action */
.res-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.res-head .ringbox{width:124px;height:124px}.res-head .ringbox .num{font-size:34px}
.res-head .ringbox .num small{font-size:12px}
@media (max-width:520px){.res-head{grid-template-columns:1fr;justify-items:center;text-align:center}}
.next-action{display:grid;gap:8px}.next-action .btn.big{width:100%}

/* تحدي اليوم */
.t-ch{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border:1px solid var(--proof);border-radius:18px;padding:12px 14px;background:linear-gradient(90deg,var(--proof-soft),transparent 80%),var(--panel-2);color:var(--ink);cursor:pointer;box-shadow:0 12px 34px -24px var(--proof)}
.t-ch:hover{border-color:var(--proof);box-shadow:0 12px 34px -16px var(--proof)}
.t-ch .t-ch-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--proof);color:var(--accent-ink);flex:none}
.t-ch b{display:block;font:800 17px var(--f-display)}.t-ch small{display:block;font-size:13px;color:var(--ink-2)}.t-ch small.g{letter-spacing:2px;font-size:15px}
.t-ch .t-ch-go{font-weight:800;color:var(--proof);flex:none}
.t-ch.done{border-color:var(--line-2);background:var(--panel-2);box-shadow:none}.t-ch.done .t-ch-ic{background:var(--panel);color:var(--proof)}
.daily{text-align:center;justify-items:center}
.dgrid{display:flex;gap:8px;justify-content:center;margin:6px 0}
.dgrid span{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font:800 22px var(--f-display);color:var(--on-sem)}
.dgrid .ok{background:var(--good);box-shadow:0 0 18px -4px var(--good)}.dgrid .no{background:var(--bad);box-shadow:0 0 18px -4px var(--bad)}.dgrid .sk{background:var(--panel-2);color:var(--muted);border:1px solid var(--line-2)}
.daily h2{font-size:34px}.dtime{color:var(--ink-2);font-weight:600;margin-top:-6px}.dtime bdi{font-variant-numeric:tabular-nums}.dstreak{font-weight:800;color:var(--proof);min-height:1.4em}
.daily .btn.big{width:min(100%,360px)}
@media (prefers-reduced-motion:no-preference){#view.enter .dgrid span{animation:pop .4s cubic-bezier(.2,.9,.3,1.4) both}#view.enter .dgrid span:nth-child(2){animation-delay:.08s}#view.enter .dgrid span:nth-child(3){animation-delay:.16s}#view.enter .dgrid span:nth-child(4){animation-delay:.24s}#view.enter .dgrid span:nth-child(5){animation-delay:.32s}@keyframes pop{from{opacity:0;transform:scale(.4)}}}

/* رحلتك إلى ١٠٠ */
.journey .j-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.j-est{font:800 68px/1 var(--f-display);color:var(--accent);text-shadow:0 0 30px var(--glow);font-variant-numeric:tabular-nums;text-align:center}
.j-lab{font-size:13px;color:var(--muted);text-align:center;margin-top:4px}
.journey h2{font-size:23px;margin-bottom:4px}
.j-split{font-size:14.5px;color:var(--ink-2);margin-top:6px}.j-split b{color:var(--ink)}
.gains{display:grid;gap:10px}
.gain{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}
.gain .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:800 15px var(--f-display);flex:none}
.gain b{display:block;font-size:15.5px}.gain .muted{font-size:13.5px}
.jhist{display:flex;align-items:stretch;gap:6px;height:150px;padding-top:6px}
.jb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:4px;text-align:center;font-size:11.5px;color:var(--muted);min-width:0}
.jb i{display:block;background:var(--accent-soft);border:1px solid var(--accent);border-bottom:0;border-radius:8px 8px 3px 3px;min-height:6px;transform-origin:50% 100%}.jb.last i{background:var(--accent);box-shadow:0 0 14px var(--glow)}.jb.last span{color:var(--accent);font-weight:800}
.j-up{color:var(--good)}
.jlock{position:relative;display:grid;gap:14px}
.jlock > section{filter:blur(6px);pointer-events:none;user-select:none}
.jlock-over{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:20px;background:linear-gradient(180deg,transparent,var(--bg) 35%)}
.jlock-over b{font:800 21px var(--f-display)}.jlock-over span{color:var(--ink-2);max-width:32ch}
.jrow{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border:1px solid var(--line-2);border-radius:18px;padding:14px 16px;background:radial-gradient(20rem 8rem at 100% 0%,var(--accent-soft),transparent 70%),var(--panel);color:var(--ink);cursor:pointer}
.jrow:hover{border-color:var(--accent)}
.jrow b{display:block;font:800 16.5px var(--f-display)}.jrow small{display:block;font-size:13px;color:var(--ink-2)}
.jr-go{font-weight:800;color:var(--accent);flex:none}
@media (max-width:420px){.journey .j-top{grid-template-columns:1fr;text-align:center}}
@media (prefers-reduced-motion:no-preference){
  #view.enter .jb i{animation:jbup .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--k) * .09s)}@keyframes jbup{from{transform:scaleY(0)}}
}
/* «لحظة الفهم»: the film page's bright world on this card and its follow-up only (stays bright in dark mode) */
.moment{--mf:#F7C948;--mi:#0B1B33;--mis:#3A4864;--mp:#FFFDF6;--mok:#0F8A4E;--moks:#DBF4E6;--mno:#D2333C;--mnos:#FDE2E2;color-scheme:light;background:var(--mf);border:2.5px solid var(--mi);border-radius:24px;padding:14px;margin:14px 0;color:var(--mi)}
.moment .mcard{background:var(--mp);border:2.5px solid var(--mi);border-radius:20px;box-shadow:0 6px 0 var(--mi);padding:16px 14px 14px;display:flex;flex-direction:column;gap:10px;animation:enterRise .45s cubic-bezier(.2,.9,.3,1.2) both}
.moment h3{font:800 1.2rem/1.5 var(--f-display);color:var(--mi)}
.moment p{margin:0;line-height:1.75;color:var(--mi)}
.moment .mtag{align-self:flex-start;font:700 .8rem/1 var(--f-display);background:var(--mf);border:2px solid var(--mi);border-radius:99px;padding:5px 10px 6px}
.moment .mex{background:#FFF6D6;border:2px dashed var(--mi);border-radius:14px;padding:10px 12px}
.moment .mline{color:var(--mis);font-size:.95rem}
.moment .mstem{font:700 1.12rem/1.7 var(--f-display)}
.moment .mpair{display:inline-block;white-space:nowrap;background:var(--mf);border:2px solid var(--mi);border-radius:10px;padding:0 10px;margin-inline-start:4px}
.moment .mopts{display:grid;gap:9px}
.moment .mopt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;cursor:pointer;font:700 1.05rem/1.4 var(--f-display);color:var(--mi);background:var(--mp);border:2px solid var(--mi);border-radius:14px;padding:10px 12px;min-height:52px;box-shadow:0 4px 0 var(--mi);transition:transform .12s,box-shadow .12s}
.moment .mopt b{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--mi);display:grid;place-items:center;font-weight:800}
.moment .mopt:active:not([disabled]){transform:translateY(3px);box-shadow:0 1px 0 var(--mi)}
.moment .mopt[disabled]{cursor:default}
.moment .mopt.ok{background:var(--moks);border-color:var(--mok);box-shadow:0 4px 0 var(--mok)}.moment .mopt.ok b{background:var(--mok);border-color:var(--mok);color:var(--mp)}
.moment .mopt.no{background:var(--mnos);border-color:var(--mno);box-shadow:0 4px 0 var(--mno)}.moment .mopt.no b{background:var(--mno);border-color:var(--mno);color:var(--mp)}
.moment .mfb:empty{display:none}.moment .mfb{display:flex;flex-direction:column;gap:6px}
.moment .mfb ol{margin:0;padding-inline-start:22px;line-height:1.8;list-style:arabic-indic}
.moment .mwin{font:800 1.1rem/1.5 var(--f-display);color:var(--mok)}.moment .mhelp{font:800 1.05rem/1.5 var(--f-display)}
.moment .mcta{width:100%;border:2.5px solid var(--mi);background:var(--mi);color:var(--mp);font:800 1.1rem/1 var(--f-display);border-radius:16px;padding:15px 12px;cursor:pointer;margin-top:4px}
.moment .mopt:focus-visible,.moment .mcta:focus-visible{outline:3px solid var(--mi);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.moment .mcard{animation:none}}
.moment.hello{margin:0}.moment.hello .mcard{gap:6px}
/* ux2 preview (Codex's phone review, config "ux2"): the ad's paper cards (cream paper, navy ink, an offset shadow) in the lesson
   screens, the practice result and «مهمة اليوم». The tokens are re-set on the card, so its buttons and options follow. */
.ux2 .learning-pilot .card,.ux2 #view[data-v="pdone"] .card,.ux2 .today.mission{--panel:#FFFDF6;--panel-2:#F7F1E1;--card:#FFFDF6;--paper:#FFFDF6;--bg-2:#F7F1E1;--line:#E6DCC3;--line-2:#B9AE93;--ink:#0B1B33;--ink-2:#2E3B55;--muted:#5B6478;--accent:#0B1B33;--accent-ink:#FFFDF6;--accent-soft:rgba(11,27,51,.07);--glow:transparent;--hi:transparent;--shade:#E6DCC3;--proof:#8A5A00;--proof-soft:#FBEFC9;--good:#0F8A4E;--good-soft:#DBF4E6;--bad:#D2333C;--bad-soft:#FDE2E2;--warn:#B45309;--warn-soft:#FDF0DA;--on-sem:#FFFFFF;color-scheme:light;color:var(--ink);background:var(--panel);border:2px solid #0B1B33;border-radius:20px;box-shadow:0 5px 0 #0B1B33}
.ux2 .today.mission{border-radius:24px;gap:14px}
.ux2 .learning-pilot .card .opt{border-width:2px}.ux2 .learning-pilot .card .opt:not(.ok):not(.no){border-color:var(--ink)}
.ux2 .today.mission .btn.primary,.ux2 .learning-pilot .card .btn.primary,.ux2 #view[data-v="pdone"] .card .btn.primary{border:2px solid #0B1B33}
.ux2 .learning-pilot .lp-actions>.btn.primary{flex:1 1 100%}
.msteps{list-style:none;padding:0;margin:0}.msteps .item:not(.done) .tick{color:var(--ink)}
details.plan-more>summary{cursor:pointer;list-style:none}details.plan-more>summary::-webkit-details-marker{display:none}details.plan-more>summary::after{content:" ▾";color:var(--muted)}details.plan-more[open]>summary::after{content:" ▴"}details.plan-more[open]>summary{margin-bottom:12px}
/* ux2: «كمّل» stays reachable (sticky above the phone tab bar); restrained yellow marks on the paper (labels, the current step,
   the solution's edge, the idea boxes, the mission's open steps) — never a full colour field, for comfortable long reading */
.ux2 .learning-pilot .card .lp-go{position:sticky;bottom:10px;z-index:4;background:var(--panel);padding-block:8px 4px}
@media (max-width:760px){.ux2 .learning-pilot .card .lp-go{bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
.ux2 .learning-pilot .lp-alt{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:-8px}.ux2 .learning-pilot .lp-alt .btn{min-height:40px;font-size:14px}
.ux2 .learning-pilot .card .eyebrow,.ux2 #view[data-v="pdone"] .card .eyebrow,.ux2 .today.mission .t-top .day{color:#8A5A00}
.ux2 .learning-pilot .lp-steps .btn[aria-current=step]{background:#FBE7A6;border-color:#0B1B33}
.ux2 .learning-pilot .lp-feedback{border-inline-start-color:#E5B53A}
.ux2 .learning-pilot .lp-check{background:#FFF7DD;border-color:#EBD58F}
.ux2 .today.mission .msteps .item:not(.done) .tick{border-color:#D9A21C;background:#FBE7A6}
.ux2 .today.mission .msteps .item.done{opacity:.9}.ux2 .today.mission .mwhy{font-size:14.5px;color:var(--ink-2);margin-top:6px;line-height:1.7}
.ux2 .today.mission .mlearn{border-inline-start:4px solid #E5B53A;background:#FFF7DD;border-radius:12px;padding:10px 12px}.ux2 .today.mission .mlearn p{margin:4px 0 0}
/* ux3 — the warm paper theme (Abdullah's redesign): cream page, paper cards, navy ink, a little yellow. «ورقي» in الإعدادات */
:root[data-theme="paper"]{--bg:#F6F0E3;--bg-2:#EDE5D2;--panel:#FFFDF8;--panel-2:#F8F3E8;--line:#ECE3CF;--line-2:#D9CDB2;--ink:#0B1B33;--ink-2:#36435B;--muted:#686B70;--accent:#0B1B33;--accent-ink:#FFFDF8;--accent-soft:rgba(11,27,51,.07);--glow:rgba(11,27,51,.14);--proof:#8F5F00;--proof-soft:#FBEBC0;--good:#137A4B;--good-soft:#DFF2E6;--bad:#C3313C;--bad-soft:#FBE4E3;--warn:#B45309;--warn-soft:#FCEFDB;--on-sem:#FFFFFF;--dot:rgba(11,27,51,.045);--halo:rgba(247,201,72,.14);--hi:rgba(255,255,255,.75);--scrim:rgba(11,27,51,.4);--card:var(--panel);--paper:var(--panel);--accent-2:var(--accent-soft);--shade:#EADFC4;--b1:#2F5E8C;--b2:#C98A12;--pie0:#DCE6F0;--pie1:#F6E2B5;--pie2:#D9EDDF;--pie3:#EADCEF;--pie4:#F5D7D2;--pie5:#E4E1D9;color-scheme:light}
:root[data-theme="paper"] .card{border-color:transparent;box-shadow:0 1px 0 rgba(11,27,51,.04),0 12px 28px -22px rgba(11,27,51,.45)}
:root[data-theme="paper"] .chip.hot{background:var(--proof-soft);color:var(--proof);border-color:transparent}
.ux3 body{font-size:16px}
/* Home: one next step */
.h3{gap:14px}
.ux3 .today.mission h2{font-size:clamp(26px,7vw,32px)}
.m-hello{margin:0;font:700 15.5px/1.5 var(--f-display);color:var(--ink-2)}
.h3-place{display:flex;align-items:center;gap:14px}.h3-place b{font:700 17px/1.4 var(--f-display)}.h3-place p{margin:2px 0 0;font-size:15px;line-height:1.65;color:var(--ink-2)}.h3-place .btn{min-height:46px;flex:none}
.h3-more{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;text-align:start;border:0;border-radius:18px;padding:14px 18px;background:var(--panel);color:var(--ink);box-shadow:0 1px 0 rgba(11,27,51,.04),0 12px 28px -22px rgba(11,27,51,.45)}
.h3-more b{display:block;font:700 17px/1.4 var(--f-display)}.h3-more small{display:block;font-size:14.5px;color:var(--muted)}.h3-arrow{font-size:22px;color:var(--ink-2)}
/* التدريب: كمي | لفظي, rows that open into kinds */
.t3{gap:14px}
.t3-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.t3-top h2{margin:0;font:800 28px/1.2 var(--f-display)}
.t3-link{border:0;background:none;padding:10px 2px;min-height:44px;font:700 15px var(--f-ui);color:var(--ink-2)}
.t3-seg{display:grid;grid-template-columns:1fr 1fr;width:100%;padding:4px;border:0;border-radius:16px;background:var(--bg-2)}
.t3-seg button{min-height:48px;border-radius:12px;font:700 17px var(--f-display);color:var(--ink-2)}
.t3-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(11,27,51,.16)}
.t3-crow{display:flex;align-items:center;gap:12px;padding:10px 0}.t3-crow+.t3-crow{border-top:1px solid var(--line)}
.t3-crow b{display:block;font:700 16.5px/1.4 var(--f-display)}.t3-crow small{display:block;font-size:14.5px;color:var(--muted)}.t3-crow .btn{min-height:46px;padding-inline:18px;font-size:15.5px;flex:none}
.t3-list{display:grid;gap:10px}
.t3-row{background:var(--panel);border-radius:20px;box-shadow:0 1px 0 rgba(11,27,51,.04),0 12px 28px -22px rgba(11,27,51,.45)}
.t3-head{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;padding:16px;border:0;background:none;text-align:start;color:var(--ink)}
.t3-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:var(--proof-soft);color:var(--ink)}.t3-ic svg{width:24px;height:24px}
.t3-head b{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:700 17.5px/1.35 var(--f-display)}.t3-head small{display:block;margin-top:2px;font-size:14.5px;color:var(--muted)}
.t3-acc{display:flex;align-items:center;gap:10px;margin-top:8px}.t3-acc .bar{flex:1;height:6px}.t3-acc em{min-width:3.6em;font-style:normal;font-size:13.5px;text-align:end;color:var(--ink-2)}
.t3-chev{flex:none;font-size:22px;line-height:1;color:var(--muted);transition:transform .2s}.t3-row.open .t3-chev{transform:rotate(180deg)}
.t3-kinds{padding:0 16px 12px}.t3-all{width:100%;min-height:48px;margin-bottom:6px;font-size:16px}
.t3-kind{display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.t3-kind b{display:block;font-size:16px;font-weight:700;line-height:1.45}.t3-kind small{display:block;font-size:14px;color:var(--muted)}.t3-kind .btn{flex:none;min-height:44px;padding-inline:14px;font-size:15px}
.t3-les{gap:6px;background:transparent;border:1.5px solid var(--line-2);color:var(--ink)}.t3-les svg{width:18px;height:18px;flex:none}
.t3-sub{margin-inline-start:6px;padding-inline-start:12px;border-inline-start:3px solid var(--proof-soft)}
.t3-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.t3-q{display:flex;align-items:center;gap:10px;min-height:64px;padding:12px;border:0;border-radius:16px;background:var(--panel);text-align:start;color:var(--ink);box-shadow:0 1px 0 rgba(11,27,51,.04),0 12px 28px -22px rgba(11,27,51,.45)}
.t3-q .t3-ic{width:38px;height:38px;border-radius:12px}.t3-q .t3-ic svg{width:20px;height:20px}.t3-q b{font:700 15.5px/1.3 var(--f-display)}
.t3-doms{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none}.t3-doms::-webkit-scrollbar{display:none}
.t3-doms button{flex:none;min-height:44px;padding:10px 18px;border:0;border-radius:999px;background:var(--bg-2);font:700 15.5px var(--f-display);color:var(--ink-2)}
.t3-doms button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.t3-how{padding:2px 4px}
/* «مستواك» on Home */
.lvl{display:grid;gap:12px}.lvl h3{margin:0;font:700 19px/1.35 var(--f-display)}
.lvl-top{display:flex;align-items:center;gap:16px}
.lvl-num{display:grid;justify-items:center;flex:none;min-width:96px;padding:12px 8px;border-radius:16px;background:var(--proof-soft)}
.lvl-num b{font:800 34px/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}.lvl-num small{margin-top:5px;font-size:13px;color:var(--ink-2)}
.lvl-bars{display:grid;gap:8px}.lvl-row{display:grid;grid-template-columns:4.4em 1fr 3.2em;align-items:center;gap:10px}
.lvl-row span{font-size:15px;font-weight:700}.lvl-row .bar{height:8px}.lvl-row b{font-size:15px;text-align:end;font-variant-numeric:tabular-nums}
.lvl-txt{margin:0;font-size:15px;line-height:1.7;color:var(--ink-2)}
.lvl>.btn{justify-self:start;min-height:46px;padding-inline:24px}
.lvl-gain{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--panel-2)}
.lvl-gain small{display:block;font-size:13.5px;color:var(--muted)}.lvl-gain b{display:block;font:700 16.5px/1.4 var(--f-display)}.lvl-gain .btn{flex:none;min-height:44px}
.lvl-link{justify-self:start;min-height:44px;padding:6px 0;border:0;background:none;font:700 15.5px var(--f-display);color:var(--ink)}
.lvl-note{margin:0;font-size:13px;color:var(--muted)}
.lvl-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:14px;background:var(--panel-2);text-align:start;color:var(--ink)}
.lvl-item small{display:block;font-size:13.5px;color:var(--muted)}.lvl-item b{display:block;font:700 17px/1.4 var(--f-display)}
.lvl-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--panel);font-weight:800;font-size:17px}
.lvl-ic .ok,.lvl-ic.ok{color:var(--good)}.lvl-ic .up,.lvl-ic.up{color:var(--proof)}.lvl-ic i{font-style:normal}
.lvl-pct{flex:none;font:800 18px var(--f-display)!important;font-variant-numeric:tabular-nums}
.lvl-none .grow{font-size:15.5px;font-weight:700}
.m3{gap:12px}.m3 h2{margin-bottom:2px}.m3 .mwhy{margin:2px 0 0}
.m-note{margin:6px 0 0;font-size:14px;color:var(--ink-2)}.m-time{margin:0;font-size:14px;color:var(--muted)}
.m3-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.m3-steps li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2)}.m3-steps li b{color:var(--ink)}.m3-steps li small{font-size:14px;color:var(--muted)}
.m3-steps .tick{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:2px solid #D9A21C;background:#FBE7A6;font-size:13px;font-weight:800;color:var(--ink)}
.m3-steps li.done .tick{border-color:var(--good);background:var(--good);color:#fff}
.mdone .mcounts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mdone .mcounts>div{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:var(--panel-2)}
.mdone .mcounts span{font-size:14px;color:var(--muted)}.mdone .mcounts b{font:800 22px var(--f-display);font-variant-numeric:tabular-nums}
.learning-pilot .lp-quiet{flex-basis:100%;margin:0;text-align:center;font-size:14px}
.lvl-line{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;color:var(--ink-2)}.lvl-line b{color:var(--ink)}.t3-h{margin:8px 2px 0;font:700 17px var(--f-display);color:var(--ink-2)}
/* "Glow" (HQ spec 2026-10-13, config "glow"): light on answers, an answer sheet in practice rounds, an accuracy ring and a mission
   track on Home, a medal at the end. Same flow and numbers. Nothing loops; everything is static under reduced motion. */
.glow{--gold:#C98A12;--gold-deep:#8F5F00;--gold-soft:#FBEBC0;--glight:rgba(247,201,72,.42);--glight2:rgba(247,201,72,.16);--spring:cubic-bezier(.2,.9,.25,1.12);--gease:cubic-bezier(.2,.7,.2,1)}
.glow .top{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--line)}
.glow .tabbar{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid var(--line);box-shadow:0 -10px 24px -18px rgba(11,27,51,.35)}
.glow .tabbar button[aria-current="page"]{color:var(--ink)}.glow .tabbar button[aria-current="page"] svg{filter:none}
.glow .tabbar button[aria-current="page"]::before{content:"";position:absolute;top:-6px;inset-inline:calc(50% - 11px);height:3px;border-radius:0 0 4px 4px;background:var(--gold);box-shadow:0 2px 10px var(--glight)}
/* answers: the right one draws a check (sparks, +١), the wrong one shows ✗ — no shake; the others stay readable, no fade */
.glow .opt{position:relative}
.glow .opt[disabled]:not(.ok):not(.no){border-color:var(--line);background:var(--panel-2);color:var(--ink-2)}
.glow .opt.ok{box-shadow:0 0 0 4px rgba(19,122,75,.12),0 10px 26px -12px rgba(19,122,75,.55)}
.glow .opt .bub .gmark{width:16px;height:16px;stroke-dasharray:24;stroke-dashoffset:0}
.glow .qcard.proofing .opt.ok .bub .gmark{stroke-dashoffset:24;animation:gdraw .45s .1s var(--gease) forwards}
.glow .qcard.proofing .qscan{display:none}
.glow .qcard.proofing .opt.ok,.glow .qcard.proofing .opt.ok.mine,.glow .qcard.proofing .opt.no,.glow .qcard.proofing .opt.ok .bub,.glow .qcard.proofing .opt.no .bub{animation:none}
.gplus{position:absolute;inset-inline-start:50%;top:-6px;font:800 18px var(--f-display);color:var(--good);animation:gfloat 1s var(--gease) forwards;pointer-events:none}
#gburst{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.gspark{position:absolute;width:7px;height:7px;border-radius:50%;background:#C98A12;box-shadow:0 0 8px rgba(247,201,72,.42);animation:gburst .75s cubic-bezier(.2,.7,.2,1) forwards}
/* the answer sheet: inert and off-screen until it opens; «عرض السؤال» folds it to a bar */
.gsheet{position:fixed;left:50%;bottom:0;z-index:35;width:min(100%,860px);max-height:72%;overflow:auto;transform:translate(-50%,105%);transition:transform .5s var(--spring);visibility:hidden;background:var(--panel);border-radius:26px 26px 0 0;box-shadow:0 -24px 50px -26px rgba(11,27,51,.6);padding:8px 18px calc(16px + env(safe-area-inset-bottom,0px));font-size:16px;line-height:1.75}
.gsheet.open{transform:translate(-50%,0);visibility:visible}
.gsheet.now{transition:none}
.gsheet.open.peek{transform:translate(-50%,calc(100% - 58px - env(safe-area-inset-bottom,0px)));overflow:hidden}
.gsheet.peek .gs-body{visibility:hidden}
.gs-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.gs-handle{width:44px;height:5px;border-radius:99px;background:var(--line-2)}
.gs-peek{min-height:38px;padding:7px 14px;border:0;border-radius:99px;background:var(--gold-soft);color:var(--gold-deep);font:700 14px var(--f-display)}
.gverdict{display:flex;align-items:center;gap:10px;font:800 19px/1.3 var(--f-display)}
.gverdict .vi{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;color:#fff}.gverdict .vi svg{width:18px;height:18px}
.gverdict.ok{color:var(--good)}.gverdict.ok .vi{background:var(--good);box-shadow:0 0 0 6px var(--good-soft)}
.gverdict.no{color:var(--bad)}.gverdict.no .vi{background:var(--bad);box-shadow:0 0 0 6px var(--bad-soft)}
.gs-time{font:500 13px var(--f-ui);color:var(--muted)}
.grecap{display:grid;gap:6px;margin-top:12px;font-size:15px}.grecap div{display:flex;gap:8px;align-items:baseline}
.grecap small{flex:none;width:96px;color:var(--muted);font-size:13px}.grecap b{font:700 17px/1.5 var(--f-math)}
.grecap .yours b{color:var(--bad)}.grecap .right b{color:var(--good)}
.gwhy .tip.why{margin-top:12px;padding:12px 14px;border-radius:14px;font-size:16px}
.gproof{margin-top:12px}.gproof h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:800 15px var(--f-display)}
.gproof h4::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--gold)}
/* quick start (config "quick") */
.qs .qs-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qs-step{font-weight:800;font-size:14px;color:var(--ink-2)}.qs-dots{display:flex;gap:6px}.qs-dots i{width:22px;height:6px;border-radius:99px;background:var(--line-2)}.qs-dots i.on{background:var(--proof,#C98A12)}.qs-dots i.cur{background:var(--ink)}
.qs-card .stem{font-size:18px;font-weight:700}.qs-box{margin:8px 0 10px}
.qbox{display:grid;gap:6px}.qbox svg{width:100%;max-width:420px;max-height:min(210px,32vh);margin-inline:auto;display:block;touch-action:pan-y;cursor:grab;border-radius:16px;background:#FFFDF8;box-shadow:inset 0 0 0 1px #ECE3CF}
.qbox svg:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.qbox-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-2)}
.qbox-turn{min-height:36px;padding:6px 12px;border:0;border-radius:99px;background:var(--gold-soft,#FBEBC0);color:var(--gold-deep,#8F5F00);font:700 13.5px var(--f-display)}
.qbox-cap{margin:0;min-height:1.4em;text-align:center;font-weight:800;color:#8F5F00}
.qs .opts:not(.one){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qs .opts > .opt{min-width:0} /* two columns never wider than the card; an option that can't fit its half stacks the row (fitOpts in app.js) */.qs .qbox{gap:2px}
.qs-verdict{margin:0;font:800 18px var(--f-display)}.qs-verdict.ok{color:var(--ok,#1E8E5A)}.qs-verdict.no{color:var(--ink)}
.qs-why{margin:0;line-height:1.7}
.xh-qs{gap:4px}.xh-qs p{margin:0}.xh-qs-t{font-size:16px}
.xk-plc{background:var(--proof,#C98A12)}
mark.gev{background:var(--gold-soft,#FBEBC0);color:inherit;border-radius:4px;padding:0 2px;box-shadow:0 0 0 1px rgba(201,138,18,.28)}
mark.gev.flash{animation:gevflash 1.6s ease-out 1}@keyframes gevflash{0%,35%{background:var(--glight,rgba(247,201,72,.42))}100%{background:var(--gold-soft,#FBEBC0)}}
@media (prefers-reduced-motion:reduce){mark.gev.flash{animation:none}}
.gs-ev{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:40px;padding:8px 14px;border:1px solid var(--gold,#C98A12);border-radius:99px;background:transparent;color:var(--gold-deep,#8F5F00);font:700 14px var(--f-display)}
.slowit{display:grid;gap:4px}.slowtip{margin:0 12px 6px;font-size:13.5px;color:var(--ink-2)}
.lp-exanswer{margin:0;padding:10px 12px;border-radius:12px;background:var(--proof-soft);color:var(--ink)}
.gproof p,.gproof li{font-size:16px}.gproof ol{padding-inline-start:22px;color:var(--ink-2);list-style:arabic-indic}
.gs-lesson{display:block;width:100%;margin-top:12px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--panel-2);color:var(--ink);font-weight:600;font-size:14px;text-align:start}
.gs-actions{display:grid;gap:8px;margin-top:14px}.gs-minor{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
@media (prefers-reduced-motion:no-preference){.gsheet.open:not(.now) .gwhy{animation:grise .45s .15s var(--gease) both}.gsheet.open:not(.now) .gproof{animation:grise .45s .25s var(--gease) both}}
/* Home: the facts as rows with round icons and an accuracy ring that fills once */
.glow .gknow{display:grid;grid-template-columns:1fr auto;gap:12px 14px;align-items:center}.glow .gknow .eyebrow{grid-column:1/-1}
.gfacts{display:grid;gap:8px;min-width:0}
.gfact{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--panel-2)}
.gfact .ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--panel)}.gfact .ic svg{width:16px;height:16px}
.gfact small{display:block;font-size:11.5px;line-height:1.3;color:var(--muted)}.gfact b{display:block;font:700 15px/1.35 var(--f-display)}
.gfact .n{margin-inline-start:auto;white-space:nowrap;font:700 14px var(--f-display);font-variant-numeric:tabular-nums}
.gfact.ok .ic{color:var(--good)}.gfact.work .ic{color:var(--gold-deep)}
.gring{position:relative;width:104px;height:104px;filter:drop-shadow(0 8px 18px var(--glight))}
.gring svg{width:104px;height:104px;transform:rotate(-90deg)}
.gring .num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gring .num b{font:800 25px/1 var(--f-display);font-variant-numeric:tabular-nums}.gring .num small{margin-top:3px;font-size:10.5px;line-height:1.25;color:var(--muted)}
.gr-track{fill:none;stroke:var(--line);stroke-width:9}
.gr-val{fill:none;stroke:url(#gk);stroke-width:9;stroke-linecap:round;stroke-dasharray:263.9;stroke-dashoffset:var(--off);animation:grfill 1.2s var(--gease) both}
.gjourney{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;border-top:1px dashed var(--line-2);font-size:13px;color:var(--ink-2)}
/* the mission: a two-node track (done green, now gold with a still halo) and one light sweep on the main button */
.glow .m3-steps{gap:0}.glow .m3-steps li{position:relative;align-items:flex-start;padding-bottom:12px}.glow .m3-steps li:last-child{padding-bottom:0}
.glow .m3-steps li::after{content:"";position:absolute;inset-inline-start:13px;top:30px;bottom:2px;width:2px;background:var(--line-2)}
.glow .m3-steps li:last-child::after{display:none}.glow .m3-steps li.done::after{background:var(--good)}
.glow .m3-steps .tick{width:28px;height:28px;border:2px solid var(--line-2);background:var(--panel-2);color:var(--ink-2)}
.glow .m3-steps li.done .tick{background:var(--good);border-color:var(--good);color:#fff}
.glow .m3-steps li.now .tick{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-deep);box-shadow:0 0 0 4px var(--glight2)}
.glow .today.mission .btn.big.primary{position:relative;overflow:hidden}
.glow .today.mission .btn.big.primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(247,201,72,.35) 50%,transparent 70%);transform:translateX(-130%);animation:gsweep 1.6s ease-in-out .9s 1 both}
/* the streak: an SVG flame, one flicker and a pop only when it went up */
.gstreak{display:inline-flex;align-items:center;gap:6px}.gstreak .flame{width:18px;height:20px;transform-origin:50% 90%}
.gstreak.up{animation:gpop .7s var(--spring)}.gstreak.up .flame{animation:gflicker .9s ease-in-out 1}
/* mission done: the ring completes, one burst, the flame flickers once */
.gmedal{position:relative;display:grid;place-items:center;width:150px;height:150px;margin:4px auto 0}
.gmedal svg.r{position:absolute;inset:0;width:150px;height:150px;transform:rotate(-90deg)}
.gmedal .m-track{fill:none;stroke:var(--line);stroke-width:10}
.gmedal .m-val{fill:none;stroke:url(#gk2);stroke-width:10;stroke-linecap:round;stroke-dasharray:471;stroke-dashoffset:0;animation:gmring 1.2s .2s var(--gease) both}
.gmedal .core{display:grid;place-items:center;width:98px;height:98px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FFF6D8,var(--gold-soft));box-shadow:0 0 0 8px rgba(247,201,72,.12),0 0 60px var(--glight)}
.gmedal .core svg{width:50px;height:56px;transform-origin:50% 90%;animation:gflicker .9s ease-in-out .3s 1}
@keyframes gdraw{to{stroke-dashoffset:0}}
@keyframes gburst{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
@keyframes gfloat{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-34px)}}
@keyframes gsweep{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@keyframes gflicker{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.04,.97) rotate(-2deg)}60%{transform:scale(.98,1.04) rotate(1.5deg)}}
@keyframes gpop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes grise{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes grfill{from{stroke-dashoffset:263.9}}
@keyframes gmring{from{stroke-dashoffset:471}}
@media (prefers-reduced-motion:reduce){.glow *,.glow *::before,.glow *::after{animation:none!important;transition:none!important}.gspark,.gplus{display:none}}
/* «خطتك إلى يوم الاختبار» (config plan): the two questions, the plan reveal, the day pill and the paywall moment
   (from notes/exam_plan_prototype_2026-10-13.html) */
.xp-chips{display:flex;flex-wrap:wrap;gap:8px}
.xp-chip{min-height:44px;padding:9px 15px;border:0;border-radius:14px;background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2);font:700 15px var(--f-display);cursor:pointer}
.xp-chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 18px -10px var(--glow)}
.xp-note{margin:0;font-size:13px;color:var(--muted)}
.xp-ask{display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--proof-soft);color:var(--ink-2);font-size:14px;text-align:start}
.xp-ask b{font:800 16px var(--f-display);color:var(--ink)}
.xp-hero{position:relative;overflow:hidden;padding:20px 18px;border-radius:24px;background:#0B1B33;color:#FFFDF8;box-shadow:0 24px 40px -24px rgba(11,27,51,.9)}
.xp-hero::before{content:"";position:absolute;inset:-30% -20% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(247,201,72,.45),transparent 65%);pointer-events:none}
.xp-hero .eyebrow{position:relative;color:rgba(255,253,248,.72)}
.xp-hero h1{position:relative;margin-top:4px;color:#FFFDF8;font:800 clamp(23px,6.4vw,28px)/1.3 var(--f-display)}
.xp-stats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.xp-stats>div{padding:10px 6px;border:1px solid rgba(255,253,248,.14);border-radius:14px;background:rgba(255,253,248,.08);text-align:center}
.xp-stats b{display:block;color:#F7C948;font:800 24px/1.15 var(--f-display);font-variant-numeric:tabular-nums}
.xp-stats small{color:rgba(255,253,248,.78);font-size:11.5px}
.xp .card.xp-today{border:2px solid var(--ink)}
.xp-vp summary{color:var(--muted);font-size:13px;cursor:pointer}
.xp-vptext{max-height:240px;overflow:auto;margin-top:6px;padding:10px;border-radius:10px;background:var(--panel);font-size:14px;line-height:1.8}
.xp-today h2{margin-top:4px}
.xp-rowh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.xp-pill{display:inline-block;padding:3px 10px;border-radius:99px;background:var(--proof-soft);color:var(--proof);font:700 12.5px var(--f-display);white-space:nowrap}
.xp-sub{margin:4px 0 0;color:var(--ink-2);font-size:14.5px}
.xp-go{width:100%;margin-top:12px}
.xp-ev{display:grid;gap:6px;margin-top:12px;padding:12px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.xp-ev-h{margin:0;color:var(--proof);font:800 13px var(--f-display)}
.xp-ev .stem,.xp-bac .stem{font-size:15px;line-height:1.7}
.xp-ev .figwrap,.xp-bac .figwrap{max-width:240px}
.xp-ev-a{margin:0;font-size:14px;font-weight:700}
.xp-ev-a.no{color:var(--bad)}.xp-ev-a.ok{color:var(--good)}.xp-ev-a .val{color:var(--ink);font-weight:500}
.xp-less{width:100%;margin-top:8px;padding:10px;border:0;border-radius:14px;background:none;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line-2);font:700 14px var(--f-display);cursor:pointer}
.xp-lessbox{display:grid;gap:6px;margin-top:8px;padding:12px;border-radius:14px;background:var(--proof-soft);font-size:14px}
.xp-lessbox b{font-family:var(--f-display)}
.xp-cov{display:flex;align-items:center;gap:14px}
.xp-ring{position:relative;flex:none;width:86px;height:86px}
.xp-ring svg{width:86px;height:86px;transform:rotate(-90deg)}
.xp-ring .t{fill:none;stroke:var(--line);stroke-width:9}
.xp-ring .v{fill:none;stroke:var(--proof);stroke-width:9;stroke-linecap:round;stroke-dasharray:226.2;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}
.xp-enter .xp-ring .v{animation:xpring 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes xpring{from{stroke-dashoffset:226.2}}
.xp-ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 20px var(--f-display)}
.xp-slider{display:grid;gap:6px;margin-top:12px;color:var(--ink-2);font-size:14px}
.xp-slider input{width:100%;accent-color:var(--proof)}
.xp-honest{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--panel-2);color:var(--ink-2);font-size:13.5px}
.xp-grp{display:grid;gap:6px;margin-top:12px}
.xp-grp>small{display:flex;align-items:center;gap:6px;color:var(--muted);font:700 12.5px var(--f-ui)}
.xp-grp>small i{display:inline-block;width:10px;height:10px;border-radius:3px}
.xp-map{display:flex;flex-wrap:wrap;gap:6px}
.xp-t{padding:5px 10px;border-radius:10px;font:600 13px var(--f-ui)}
.xp-enter .xp-t{animation:xppop .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes xppop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.xs-need{background:var(--warn-soft);color:var(--warn);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 30%,transparent)}
.xs-good{background:var(--good-soft);color:var(--good);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 25%,transparent)}
.xs-new{background:var(--panel-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.xs-proven{background:var(--good);color:var(--on-sem)}
.xp-weeks{display:grid;margin:12px 0 0;padding:0;list-style:none}
.xp-wk{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding-bottom:14px}
.xp-wk::after{content:"";position:absolute;inset-inline-start:16px;top:34px;bottom:0;width:2px;background:var(--line-2)}
.xp-wk:last-child::after{display:none}
.xp-wk .n{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--line-2);font:800 13px var(--f-display)}
.xp-wk.now .n{background:var(--proof-soft);color:var(--proof);box-shadow:inset 0 0 0 2px var(--proof)}
.xp-wk.final .n{background:#0B1B33;color:#F7C948;box-shadow:none}
.xp-wk b{font:800 15px/1.4 var(--f-display)}
.xp-wk small{display:block;color:var(--muted);font-size:13px}
.xp-prog{display:grid;gap:8px}
.xp-prog>div{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;background:var(--panel-2);font-size:14px}
.xp-prog b{font-family:var(--f-display);white-space:nowrap}.xp-prog em{font-style:normal;color:var(--good)}
.xp-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.xp-bac{display:grid;align-content:start;gap:4px;min-width:0;padding:10px;border-radius:14px;font-size:13.5px}
.xp-bac small{color:var(--muted);font-size:12px}
.xp-bac.before{background:var(--bad-soft)}.xp-bac.before b{color:var(--bad);font-size:12.5px}
.xp-bac.after{background:var(--good-soft)}.xp-bac.after b{color:var(--good);font-size:12.5px}
.xp-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.xp-plan{display:grid;gap:2px;padding:14px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line-2);text-align:center}
.xp-plan.best{box-shadow:inset 0 0 0 2px var(--proof)}
.xp-plan .tag{min-height:1.4em;color:var(--proof);font:700 11.5px var(--f-display)}
.xp-plan b{font:800 24px var(--f-display)}.xp-plan small{color:var(--muted);font-size:12.5px}
.xp-link{align-self:center;padding:6px 0;border:0;background:none;color:var(--accent);font:700 14px var(--f-display);cursor:pointer}
.xp-ring b.sm{padding:0 12px;font-size:12.5px;line-height:1.25;text-align:center}
.xp-sprint{margin:6px 0 0;color:var(--ink);font:700 16px/1.7 var(--f-display)}
.xp-allsteps summary{margin-top:6px;color:var(--accent);font:700 13.5px var(--f-display);cursor:pointer}
.xp-dp{display:grid;gap:10px;margin:0;padding:0;list-style:none}.xp-dp li{display:grid;gap:2px}.xp-dp b{color:var(--proof);font:800 14px var(--f-display)}.xp-dp span{color:var(--ink-2);font-size:14px}
.m3 .t-top:has(.xp-pill){flex-wrap:wrap;row-gap:6px}.m3 .t-top .day{white-space:nowrap}
/* Home with a plan «طريقك إلى يوم الاختبار» (config plan; notes/home_plan_prototype_2026-10-13.html): the road, today's mission
   pinned to today's node, the map */
.xh-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xh-rowh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.xh>*,.xh-m>*{min-width:0} /* grid items: a one-line «ليش؟» must not widen the page */
.xh-tags{display:flex;align-items:center;gap:6px}
.xh-road{position:relative;overflow:hidden;padding:12px 14px 8px;border-radius:24px;background:#0B1B33;color:#FFFDF8;box-shadow:0 24px 40px -24px rgba(11,27,51,.9)}
.xh-road::before{content:"";position:absolute;inset-block-start:-55%;inset-inline-end:-30%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(247,201,72,.45),transparent 65%);pointer-events:none}
.xh-road>*{position:relative}
.xh-road .eyebrow{margin:0;color:rgba(255,253,248,.72)}
.xh-link{padding:0;border:0;background:none;color:#F7C948;font:700 13px var(--f-display);white-space:nowrap;cursor:pointer}
.xh-link2{padding:0;border:0;background:none;color:var(--proof);font:700 13px var(--f-display);white-space:nowrap;cursor:pointer}
.xh-stk{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:99px;background:rgba(247,201,72,.16);color:#F7C948;font:700 12.5px var(--f-display)}
.xh-stk .xh-i{width:14px;height:14px;fill:currentColor;stroke:none}
.xh-stk.up{animation:xhbump .7s cubic-bezier(.2,.9,.25,1.12) .25s both}
.xh-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:2px 0 0}
.xh-count b{color:#F7C948;font:800 30px/1.15 var(--f-display);font-variant-numeric:tabular-nums}
.xh-count span{font:700 17px var(--f-display)}
.xh-sub{margin:0;color:rgba(255,253,248,.72);font-size:13.5px}
.xh-pill{padding:3px 10px;border-radius:99px;background:rgba(247,201,72,.16);color:#F7C948;font:700 12.5px var(--f-display);white-space:nowrap}
.xh-journey{position:relative;height:4px;margin-top:8px;border-radius:4px;background:rgba(255,253,248,.24)}
.xh-journey i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--p);border-radius:4px;background:#F7C948}
.xh-journey b{position:absolute;top:-3px;inset-inline-start:calc(var(--p) - 5px);width:10px;height:10px;border-radius:50%;background:#F7C948;box-shadow:0 0 0 3px rgba(247,201,72,.25),0 0 10px rgba(247,201,72,.45)}
.xh-jlab{display:flex;justify-content:space-between;margin:4px 0 0;color:rgba(255,253,248,.72);font-size:11px}
.xh-strip{--n:7;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:8px 0 0;padding:0;list-style:none}
.xh-strip::before,.xh-strip::after{content:"";position:absolute;top:36px;inset-inline-start:calc(100% / var(--n) / 2);height:2px;border-radius:2px}
.xh-strip::before{inset-inline-end:calc(100% / var(--n) / 2);background:rgba(255,253,248,.24)}
.xh-strip::after{width:calc(100% / var(--n) * var(--t,0));background:#F7C948;box-shadow:0 0 10px rgba(247,201,72,.45)}
.xh-dn{position:relative;z-index:1;display:grid;justify-items:center;gap:4px;min-width:0}
.xh-dn .dw{max-width:100%;height:18px;overflow:hidden;color:rgba(255,253,248,.72);font-size:10.5px;line-height:18px;white-space:nowrap}
.xh-dn .dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0B1B33;box-shadow:inset 0 0 0 2px rgba(255,253,248,.24);color:rgba(255,253,248,.72);font:700 12.5px/1 var(--f-display)}
.xh-dn .dot .xh-i{width:14px;height:14px}
.xh-dn .dl{min-height:16px;color:#F7C948;font:700 10.5px/16px var(--f-display);white-space:nowrap}
.xh-dn.is-done .dot{background:#F7C948;color:#0B1B33;box-shadow:none}
.xh-dn.is-today .dot{background:#FFFDF8;color:#0B1B33;box-shadow:0 0 0 4px rgba(247,201,72,.3),0 0 20px 3px rgba(247,201,72,.45);animation:xhpulse 2.4s ease-in-out infinite}
.xh-dn.is-today.done .dot{background:#F7C948}
.xh-dn.is-today .dw{color:#F7C948;font-weight:700}
.xh-dn.is-missed .dot{box-shadow:none;outline:2px dashed rgba(255,253,248,.24);outline-offset:-2px;color:rgba(255,253,248,.24)}
.xh-dn.is-missed .dl{color:rgba(255,253,248,.72);font-weight:600}
.xh-dn.is-exam .dot{color:#F7C948;box-shadow:inset 0 0 0 2px #F7C948}
.xh-dn.is-light .dot,.xh-dn.is-sec .dot,.xh-dn.is-les .dot{color:#F7C948}
.xh-legs{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0;color:rgba(255,253,248,.72);font-size:11px}
.xh-legs span{display:inline-flex;align-items:center;gap:4px}.xh-legs .xh-i{width:12px;height:12px;color:#F7C948}
.xh .card.xh-m{position:relative;display:grid;gap:7px;padding:13px 14px;border:2px solid var(--ink)}
.xh-m.ptr::before{content:"";position:absolute;top:-10px;inset-inline-start:calc(16px + (100% - 32px) * var(--f) - 8px);width:16px;height:16px;background:var(--panel);border-top:2px solid var(--ink);border-left:2px solid var(--ink);transform:rotate(45deg)}
.xh .card.xh-m.calm{background:linear-gradient(180deg,var(--proof-soft),var(--panel) 55%)}
.xh-m.calm.ptr::before{background:var(--proof-soft)}
.xh-m h2{margin:0;font-size:18px;line-height:1.4}
.xh-m .eyebrow{margin:0}
.xh-free{padding:2px 9px;border-radius:99px;background:var(--good-soft);color:var(--good);font:700 11.5px var(--f-display);white-space:nowrap}
.xh-pill2{padding:3px 10px;border-radius:99px;background:var(--proof-soft);color:var(--proof);font:700 12.5px var(--f-display);white-space:nowrap}
.xh-why{border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.xh-why summary{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:7px 10px;white-space:nowrap;color:var(--proof);font:700 12.5px/1.5 var(--f-display);list-style:none;cursor:pointer}
.xh-why summary::-webkit-details-marker{display:none}
.xh-why summary::after{content:"";flex:none;width:8px;height:8px;margin-inline-start:auto;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.xh-why[open] summary::after{margin-top:4px;transform:rotate(-135deg)}
.xh-why .wq{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font:700 14px/1.4 var(--f-display);unicode-bidi:isolate}
.xh-why .wq sup{line-height:0}
.xh-why .body{display:grid;gap:8px;padding:0 12px 12px;font-size:14px}
.xh-ans{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xh-ans div{display:grid;gap:2px;padding:8px 10px;border-radius:12px;font-size:13px}
.xh-ans small{color:var(--muted);font-size:11.5px}.xh-ans b{font:700 15px var(--f-display)}
.xh-ans .no{background:var(--bad-soft)}.xh-ans .no b{color:var(--bad)}.xh-ans .ok{background:var(--good-soft)}.xh-ans .ok b{color:var(--good)}
.xh-whyline{margin:0;padding:9px 12px;border-radius:12px;background:var(--panel-2);color:var(--ink-2);font-size:13.5px}
.xh-why.plain .wq{color:var(--ink-2);font:500 13.5px/1.5 var(--f-ui)}
.xh-why.plain[open] summary{white-space:normal;align-items:flex-start}
.xh-tbar{display:flex;gap:3px;height:12px}
.xh-tbar i{display:block;flex:var(--m) 1 0;min-width:8px;border-radius:4px}
.xk-les{background:var(--ink)}.xk-prac{background:#F7C948}.xk-chk{background:#93A4BF}.xk-rev{background:#6E9F87}.xk-sec,.xk-tim{background:#C98A12}.xk-mis{background:#E0A458}
.xh-tleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:-4px 0 0;color:var(--ink-2);font-size:12.5px}
.xh-tleg span{display:inline-flex;align-items:center;gap:6px}.xh-tleg i{display:inline-block;width:10px;height:10px;border-radius:3px}.xh-tleg b{font:700 12.5px var(--f-display)}
.xh-go{width:100%}
.xh-sec2{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.xh-sec2 button{padding:9px 8px;border:0;border-radius:12px;background:none;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink-2);font:700 13.5px var(--f-display);cursor:pointer}
.xh-sec2 button[aria-expanded="true"]{background:var(--panel-2);color:var(--ink)}
.xh-banner{display:flex;align-items:flex-start;gap:8px;margin:0;padding:7px 10px;border-radius:14px;background:var(--good-soft);color:var(--good);font-size:13px;line-height:1.5}.xh-banner b{font-family:var(--f-display)}
.xh-ask{background:var(--proof-soft);color:var(--ink)}
.xh-askb{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:0}
.xh-inl{min-height:26px;padding:0;border:0;background:none;color:var(--proof);font:700 13px/26px var(--f-display);cursor:pointer}
.xh-inl.mute{color:var(--ink-2)}
.xp-datego{display:inline;min-height:0;padding:0;font-size:inherit}
.xp-hero .xp-datego{color:#F7C948}
.xh-res{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0}.xh-res b{font:800 28px/1 var(--f-display);font-variant-numeric:tabular-nums}.xh-res span{color:var(--ink-2);font-size:14px}
.xh-chg{display:grid;gap:8px}.xh-chg div{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.5}
.xh-chg .g{background:var(--good-soft);color:var(--good)}.xh-chg .n{background:var(--warn-soft);color:var(--warn)}.xh-chg b{font-family:var(--f-display)}
.xh-next{display:grid;gap:2px;padding:12px 14px;border-radius:16px;background:#0B1B33;color:#FFFDF8}.xh-next small{color:#F7C948;font:700 12px var(--f-display)}.xh-next b{font:700 15.5px/1.45 var(--f-display)}
.xh-ghost{width:100%;background:none}
.xh-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:16px;background:var(--panel-2);color:var(--ink);text-align:start;cursor:pointer}
.xh-row .ric{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--panel);color:var(--proof)}.xh-row .grow{flex:1;min-width:0}
.xh-row b{display:block;font:700 15px/1.3 var(--f-display)}.xh-row small{display:block;color:var(--muted);font-size:12px}.xh-row .arr{color:var(--muted);font:700 16px var(--f-display)}
.xh-locked{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.xh-locked .si{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:#0B1B33;color:#F7C948}.xh-locked .si .xh-i{width:16px;height:16px}
.xh-locked b{display:block;font:700 14px/1.4 var(--f-display)}.xh-locked small{display:block;color:var(--muted);font-size:12px}
.xh-msub{margin:0;color:var(--ink-2);font-size:13.5px}
.xh-ba{display:grid;grid-template-columns:1fr 1fr;gap:8px}.xh-ba>div{display:grid;align-content:start;gap:4px;min-width:0;padding:10px;border-radius:14px;font-size:13px}
.xh-ba small{color:var(--muted);font-size:11.5px}.xh-ba .qq{margin:0;font:700 14.5px/1.45 var(--f-display)}.xh-ba b{font:700 13px/1.45 var(--f-display)}
.xh-ba .before{background:var(--bad-soft)}.xh-ba .before b{color:var(--bad)}.xh-ba .after{background:var(--good-soft)}.xh-ba .after b{color:var(--good)}
.xh-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xh-plan{display:grid;gap:2px;padding:12px;border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--line-2);text-align:center}.xh-plan.best{box-shadow:inset 0 0 0 2px var(--proof)}
.xh-plan b{font:800 22px var(--f-display)}.xh-plan small{color:var(--muted);font-size:12px}.xh-plan .tg{min-height:18px;color:var(--proof);font:700 11.5px var(--f-display)}
.xh-note{margin:0;color:var(--muted);font-size:12.5px}
.xh-btns{display:grid;gap:8px}
.xh-eplan{display:grid;gap:6px;padding:12px;border-radius:14px;background:var(--panel)}.xh-eplan b{font:700 14.5px var(--f-display)}.xh-eplan ul{display:grid;gap:4px;margin:0;padding-inline-start:18px;font-size:14px}
.xh-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.xh-sum div{display:grid;padding:10px 6px;border-radius:14px;background:var(--panel-2);text-align:center}
.xh-sum b{font:800 22px/1.2 var(--f-display);font-variant-numeric:tabular-nums}.xh-sum small{color:var(--ink-2);font-size:12px;line-height:1.35}
.xh-feel{display:flex;flex-wrap:wrap;gap:8px}
.xh-chip{padding:10px 14px;border:0;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font:700 14px var(--f-display);cursor:pointer}.xh-chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.xh-invite{position:relative;display:grid;gap:10px;overflow:hidden;padding:18px;border-radius:24px;background:#0B1B33;color:#FFFDF8;box-shadow:0 24px 40px -24px rgba(11,27,51,.9)}
.xh-invite::before{content:"";position:absolute;inset-block-start:-50%;inset-inline-end:-30%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(247,201,72,.45),transparent 65%)}
.xh-invite>*{position:relative}.xh-invite .eyebrow{margin:0;color:rgba(255,253,248,.72)}.xh-invite p{margin:0;color:rgba(255,253,248,.72);font-size:14.5px}.xh-invite h2{margin:0;color:#FFFDF8;font-size:24px}
.xh .btn.xh-gold{width:100%;border:0;background:#F7C948;color:#0B1B33;box-shadow:0 10px 24px -12px rgba(201,138,18,.9)}
.xh-map{display:grid;gap:10px}
.xh-legend{display:flex;flex-wrap:wrap;gap:6px}
.xh-lg{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font:600 12px var(--f-ui)}.xh-lg i{width:9px;height:9px;border-radius:3px;background:currentColor}
.xh-gl{margin:0;color:var(--ink-2);font:700 12.5px var(--f-display)}
.xh-vrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.xh-vt{display:grid;place-items:center;min-height:58px;padding:6px 4px;border:0;border-radius:12px;font:700 11.5px/1.35 var(--f-display);text-align:center;cursor:pointer}
.xh-qgrp{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px}.xh-qgrp small{color:var(--muted);font-size:12px}
.xh-qsq{display:flex;flex-wrap:wrap;gap:5px}
.xh-sq{width:24px;height:24px;padding:0;border:0;border-radius:7px;cursor:pointer}
.xh-sq.sel,.xh-vt.sel{outline:2.5px solid var(--ink);outline-offset:1.5px}
.xh-sq.pop,.xh-vt.pop{animation:xhpop 1.1s cubic-bezier(.2,.9,.25,1.12) .5s both}
.xh-mcap{min-height:42px;margin:0;padding:10px 12px;border-radius:12px;background:var(--panel-2);color:var(--ink-2);font-size:13px}.xh-mcap b{font-family:var(--f-display)}
.xh-cnts{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:8px;margin-top:10px}
.xh-cnts>div{display:grid;align-content:start;gap:2px;padding:10px 6px;border-radius:14px;background:var(--panel-2);text-align:center}
.xh-cnts b{font:800 26px/1.15 var(--f-display);font-variant-numeric:tabular-nums}
.xp-trs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xp-rec{margin:0;padding:10px 12px;border-radius:12px;background:var(--proof-soft);color:var(--ink);font-size:13.5px;line-height:1.6}
.xp-tr{display:grid;gap:2px;align-content:start;min-height:0;padding:10px 12px;text-align:start}
.xp-tr b{font:700 15px var(--f-display)}
.xp-tr small{color:var(--ink-2);font-size:12px;font-weight:500;line-height:1.45}
.xp-tr[aria-pressed="true"] small{color:inherit;opacity:.85}
.xh-prog{display:grid;gap:4px;padding:13px 14px}
.xh-prog .eyebrow{margin:0}
.xh-pl,.xh-pm{margin:0;font:700 15px/1.5 var(--f-display)}
.xh-pl b,.xh-pm b{color:var(--proof);font-variant-numeric:tabular-nums}
.xh-pl.mute{color:var(--ink-2);font-weight:600}
.xh-pm{font-size:14px}
.xh-prog small{color:var(--ink-2);font-size:12px;line-height:1.5}
.xh-cnts b.w,.xh-sum b.w,.xp-stats b.w{font-size:17px;line-height:1.76}
.xh-m .xh-sum{grid-template-columns:repeat(var(--c,3),minmax(0,1fr))}
.xh-sub.xh-back{margin:2px 0 0;color:#FFFDF8}
.xh-sub.xh-back b{color:#F7C948;font-family:var(--f-display)}
.xh-m .xh-ask{margin:2px 0}.xh-cnts b .xh-i{width:26px;height:26px;color:var(--good);vertical-align:middle}
.xh-cnts small{color:var(--ink-2);font-size:12px;line-height:1.35}.xh-cnts em{color:var(--good);font-size:11.5px;font-style:normal;font-weight:600;line-height:1.35}
.xh-honest{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--panel-2);color:var(--ink-2);font-size:13px}
@keyframes xhpulse{0%,100%{box-shadow:0 0 0 4px rgba(247,201,72,.3),0 0 20px 3px rgba(247,201,72,.45)}50%{box-shadow:0 0 0 7px rgba(247,201,72,.16),0 0 28px 6px rgba(247,201,72,.45)}}
@keyframes xhbump{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes xhpop{0%{transform:scale(.6)}60%{transform:scale(1.2);box-shadow:0 0 0 6px rgba(247,201,72,.45)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.xh-dn.is-today .dot,.xh-stk.up,.xh-sq.pop,.xh-vt.pop{animation:none}}
.kb .kb-link{margin:0;padding:10px 12px;border-radius:12px;background:var(--panel-2);font:600 13px/1.5 ui-monospace,Menlo,monospace;word-break:break-all;-webkit-user-select:all;user-select:all}
.kb .row{gap:8px;flex-wrap:wrap}
.kb-msg{margin:0;color:var(--good);font-size:13px}
.kb-msg:empty{display:none}
.kb-del{color:var(--bad)}
.inapp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:9px 12px;border-radius:14px;background:var(--proof-soft);color:var(--ink);font-size:13.5px;line-height:1.5}
.inapp>span{flex:1}
.inapp-go{flex:none;padding:0;border:0;background:none;color:var(--proof);font:700 13.5px var(--f-display);cursor:pointer}
.inapp-x{flex:none;padding:2px 6px;border:0;background:none;color:var(--ink-2);font-size:18px;line-height:1;cursor:pointer}
.inapp .kb-msg{flex-basis:100%}
.inapp.open{position:relative;display:grid;gap:6px;padding:12px 14px}
.inapp.open .inapp-x{position:absolute;top:6px;inset-inline-end:6px}
.inapp ol{margin:0;padding-inline-start:20px}
.inapp b{font-family:var(--f-display)}
.xp-sim{display:grid;gap:8px;background:repeating-linear-gradient(135deg,var(--proof-soft) 0 12px,var(--panel) 12px 24px)}
.mdone .mcounts.xpc{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
.xp-datebtn{justify-self:start;text-decoration:underline;text-underline-offset:4px}
.xp-date{display:grid;gap:6px}
.xp-date label{color:var(--ink-2);font-size:13.5px}
.xp-date input{min-height:46px;padding:8px 12px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--panel);color:var(--ink);font:600 16px var(--f-ui)}
.xp-dateerr{margin:0;color:var(--bad);font-size:13.5px}
@media (prefers-reduced-motion:reduce){.xp-enter .xp-t,.xp-enter .xp-ring .v{animation:none}.xp-ring .v{transition:none}}
/* paywall package (pw2): the day-4 card, the cards' perks, the parent link, the save prompt */
.pw .pw-done{margin:0;color:var(--good);font:800 15px/1.5 var(--f-display)}
.pw h3{margin:6px 0 0;font-size:15px}
.pw-acc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pw-acc>div{display:grid;gap:2px;padding:12px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.pw-acc span{color:var(--muted);font-size:13px}.pw-acc b{font:800 26px/1.25 var(--f-display);font-variant-numeric:tabular-nums}.pw-acc b.mute{font:700 14px/1.6 var(--f-display);color:var(--ink-2)}.pw-acc small{color:var(--muted);font-size:12px}
.pw-need{display:flex;flex-wrap:wrap;gap:6px}.pw-need span{padding:5px 11px;border-radius:999px;background:var(--bad-soft);font:700 13px/1.5 var(--f-display)}
.pw-prev{padding:12px 14px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}.pw-prev .eyebrow{margin:0 0 6px}
.pw-prev ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}.pw-prev li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;line-height:1.5;color:var(--ink-2);filter:blur(.3px)}.pw-prev li small{flex:none;color:var(--muted)}
.pw>*{min-width:0}.pw-days{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-width:0;max-width:100%}
.pw-days li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--panel-2);min-width:0}
.pw-days .n{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--line);font:800 12.5px var(--f-display)}
.pw-days li>div{flex:1;min-width:0}.pw-days b{display:block;font:700 13.5px/1.4 var(--f-display)}.pw-days small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pw-days .lk{flex:none;font-size:13px;opacity:.75}
.pw .pw-from{text-align:center}
.pw-more{justify-self:start;border:0;background:none;padding:2px 0;color:var(--accent);font:700 13.5px/1.6 var(--f-display);cursor:pointer}
.pw-gift{display:grid;gap:6px;padding:14px;border-radius:16px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.pw-gift small{color:var(--ink-2);font-size:13px}
.planc .once{margin:0;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.pperks{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px}.pperks li{display:flex;gap:6px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}.pperks li::before{content:"✓";flex:none;color:var(--good);font-weight:800}.pperks a{color:inherit;text-decoration:underline}
.pf-btn{width:100%}.pf-msg{margin:0;padding:10px 12px;border-radius:12px;background:var(--panel-2);font-size:13.5px;line-height:1.75}
.wa-ok{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.6}.wa-ok input{flex:none;width:18px;height:18px;margin-top:3px}
/* «أسلحة» pilot (config weapons) */
.wp-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.wp-dots{display:flex;gap:5px;color:var(--muted);font-size:13px}.wp-dots i{width:18px;height:5px;border-radius:3px;background:var(--line)}.wp-dots i.d{background:var(--good)}.wp-dots i.n{background:var(--accent)}
.wp-ph{font-size:13px;margin:0}.wp-eqnote{margin:-4px 0 0;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.7}.wp-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wp-pair .wp-rv{grid-template-columns:minmax(0,1fr)}.wp-units{width:100%;border-collapse:collapse;font-size:13.5px}.wp-units th,.wp-units td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}.wp-units thead th{font:800 13.5px var(--f-display)}.wp-units tbody th{color:var(--muted);font-weight:700;white-space:nowrap}.wp-why summary,.wp-more summary,.wp-others summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--accent)}.wp-others .wp-rvs{margin-top:8px}.wp-rules{margin:0;padding-inline-start:20px;display:grid;gap:4px;font:700 16px/1.7 var(--f-display)}.wp-hook{margin:0;font:700 17px/1.7 var(--f-display)}.wp-weapon{padding:12px 14px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}.wp-weapon .eyebrow{margin:0}.wp-same{margin:0;padding:8px 10px;border-radius:10px;background:var(--accent-soft)}.wp-rule{margin:0;font-size:16px;line-height:1.8}
.wp-eq{padding:12px 14px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);font:800 18px/1.6 var(--f-display);text-align:center}
.wp-cue{padding:10px 12px;border-radius:12px;background:var(--accent-soft);font-size:14.5px;line-height:1.7}
.wp-traps{margin:0;padding-inline-start:20px;display:grid;gap:6px;font-size:14.5px;line-height:1.7}
.wp-clock{font:800 18px var(--f-display);font-variant-numeric:tabular-nums}.wp-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.wp-bar i{display:block;height:100%;width:100%;background:var(--accent);transition:width .2s linear}.wp-bar.fast i{background:var(--warn,#C0650A)}
.wp-rvs{display:grid;gap:8px}.wp-rv{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 12px;border-radius:12px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}.wp-rv p{margin:0;font-size:13.5px;line-height:1.6}.wp-rv small{color:var(--muted)}.wp-rv.ok{box-shadow:inset 0 0 0 1px var(--good)}.wp-rv.no{box-shadow:inset 0 0 0 1px var(--bad)}
@media (min-width:640px){.wp-rv{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.wp-rv small{grid-column:1/-1}}
.wp-mask{margin:0;font:700 13.5px/1.6 var(--f-display);color:var(--accent)}.wp-close{margin:0;text-align:center;font:800 16px/1.6 var(--f-display)}
.lp-weapon{padding:10px 12px;border-radius:12px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.lp-wp-engine{margin:0;font:800 15px/1.7 var(--f-display)}.lp-wp-more summary{cursor:pointer;font-weight:700;font-size:13.5px;margin-top:4px}.lp-wp-more ol{margin:6px 0;padding-inline-start:20px;line-height:1.7}.lp-wp-more p{margin:4px 0}
.fd{--fdz:1;font-size:calc(var(--fdz,1)*18px)}.fd.fd-big{--fdz:1.15}.fd-az{min-width:44px;font-weight:800}.fd-az[aria-pressed=true]{background:var(--accent-soft);color:var(--ink)}.fd-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.fd-top .btn{width:auto;margin:0;min-height:44px}.fd-where{color:var(--muted);font-size:calc(var(--fdz,1)*13.5px);font-weight:700}.fd-card{gap:12px}.fd-card h2{font:800 calc(var(--fdz,1)*21px)/1.6 var(--f-display);margin:0}.fd-line,.fd-step{margin:0;font:600 calc(var(--fdz,1)*18px)/1.85 var(--f-math)}.fd-given{padding:8px 12px;border-radius:12px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}.fd-given .fd-line{font-size:calc(var(--fdz,1)*16px);color:var(--ink-2)}.fd-ask{margin:2px 0 0;font:800 calc(var(--fdz,1)*19px)/1.7 var(--f-display)}.fd-opts{display:grid;gap:10px}.fd-opt{display:flex;align-items:center;text-align:start;width:100%;min-height:52px;padding:10px 14px;border-radius:14px;border:2px solid var(--line-2);background:var(--panel-2);color:var(--ink);font:700 calc(var(--fdz,1)*18px)/1.6 var(--f-math);cursor:pointer}.fd-opt:disabled{cursor:default}.fd-opt.ok{border-color:var(--good);background:var(--good-soft)}.fd-opt.no{border-color:var(--bad);background:var(--bad-soft)}.fd-fb{margin:0;font:700 calc(var(--fdz,1)*18px)/1.75 var(--f-display);padding:10px 12px;border-radius:12px}.fd-fb.ok{color:var(--good);background:var(--good-soft)}.fd-fb.no{background:var(--warn-soft)}.fd-hint{margin:0;padding:8px 12px;border-radius:12px;background:var(--accent-soft);font-weight:600;font-size:calc(var(--fdz,1)*18px)}.fd-hintb{width:auto!important;align-self:flex-start}.fd-math{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:12px;background:var(--panel-2);font:800 calc(var(--fdz,1)*20px)/1.9 var(--f-math)}.fd-ans{margin:0;font-size:calc(var(--fdz,1)*18px)}.fd-nav{display:flex;gap:10px;flex-wrap:wrap}.fd-nav .btn{flex:1 1 140px;min-height:50px;margin:0}.fd-fig{margin:0;display:flex;justify-content:center}.fd-svg{max-width:100%;height:auto;color:var(--ink)}
/* text on a light accent fill (gold, a pale hue) is drawn in dark ink in the dark theme (the scene renderer marks it .fd-onfill) */
:root:not(.ql) .fd-svg .fd-onfill text{fill:#14202E}:root:not(.ql) .fd-svg .fd-onfill line{stroke:#14202E}:root:not(.ql) .fd-svg .fd-onfill .fd-mxi{color:#14202E}
/* scene maths drawn as HTML inside the drawing (foundations.js mxBox): one line, never wrapped; app.js figFit fits the box to it */
.fd-mxi{display:flex;align-items:center;width:100%;height:100%;line-height:normal;white-space:nowrap}
.fd-mxt{display:inline-block;white-space:nowrap}.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.2;margin:0 3px;font-size:.9em}.fr>span:first-child{border-bottom:2px solid currentColor;padding:0 3px}.fr>span:last-child{padding:0 3px}
/* the bar spans the whole fraction, not just its numerator; a fraction holding a fraction (frn) stands clear of the inner bar (Codex BH-13:
   «\frac{٩}{\frac{٣}{٤}}» read as (٩/٣)/٤ with two bars of one width) */
.fr>span{align-self:stretch;text-align:center}
.fr.frn>span{padding-inline:.5em}.fd-intro{margin:0;color:var(--muted);font-weight:700}.fd-open{text-align:center}.fd-open .fd-nav{justify-content:center}.fd-nf{width:auto!important;align-self:flex-start;margin-top:4px}.fd-offer{margin:4px 0 0;font-weight:600;color:var(--ink-2)}.fd-sol{display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}.fd-sol summary{cursor:pointer;font-weight:800;min-height:32px}.fd-picked .fd-opt{cursor:default;gap:10px}.fd-pk{flex:none;font:700 calc(var(--fdz,1)*12.5px)/1 var(--f-display);padding:5px 8px;border-radius:8px;background:var(--panel);color:var(--ink-2)}.fd-card{scroll-margin-top:12px}.fd-prog{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:2px}.fd-prog i{display:block;height:100%;background:var(--ink-2);opacity:.45;border-radius:2px}.fd-progl{margin:2px 0 0;font-size:calc(var(--fdz,1)*12.5px);color:var(--muted)}.fd-time{margin:0;color:var(--ink-2);font-size:calc(var(--fdz,1)*15px)}.fd-pass{padding:10px 12px;border-radius:12px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);font:600 calc(var(--fdz,1)*17px)/1.9 var(--f-math);max-height:40vh;overflow:auto}.fd-tbl{border-collapse:collapse;margin:0 auto;font:600 calc(var(--fdz,1)*16px)/1.6 var(--f-math)}.fd-tbl th,.fd-tbl td{border:1px solid var(--line-2);padding:6px 12px;text-align:center}.fd-tbl th{background:var(--panel-2)}.fd-tkey{margin:4px 0 0;text-align:center;color:var(--ink-2)}.tex{unicode-bidi:isolate;white-space:nowrap;direction:var(--mdir)} /* «طريقة كتابة الرياضيات» (Codex BH-02): a formula follows the choice, even one drawn before it changed; --mdir is rtl unless «من اليسار» */.tex sup,.tex sub{unicode-bidi:isolate} /* the exponent sits left of its base in right-to-left maths, digits or letters alike (never joined to the base's digits) */.tex sup:not(.sqn){font-size:.7em;vertical-align:.6em;line-height:0} /* an exponent smaller and clearly raised (Content 2026-11-01: the browser's 83% and 4 px left «(٩^س)» reading «(٩س)», «٥^{٦٢}» like «٦٢٥»); the root index (.sqn) keeps its own */.sq{white-space:nowrap}.sqn{font-size:.62em;vertical-align:.9em;margin-inline-start:-1px}.sqb{border-top:2px solid currentColor;padding-inline:2px}.fd-desc{padding:10px 12px;border:1.5px dashed var(--line-2);border-radius:12px;color:var(--ink-2);font-size:calc(var(--fdz,1)*15px);line-height:1.8}.fd-alt{color:var(--ink-2)}.fd-hl{margin:0;padding:10px 12px;border-inline-start:4px solid var(--accent);background:var(--panel-2);border-radius:8px;line-height:2.1;white-space:pre-line}.fd-mk{background:rgba(61,214,245,.26);box-shadow:inset 0 -2px 0 var(--accent);border-radius:4px;padding:0 3px}.rd-rev{margin:0;color:var(--muted);font-size:.92em;line-height:1.6}.rd-allr>small.rd-mq{color:var(--now-ink);font-weight:700}.rd-mb{flex:none;font-weight:400;font-size:15px}:root.rd #view .rd-fin.rd-fin-x .rd-fin-h{font-size:26px;line-height:1.35} /* the «ready withdrawn» note: quiet, never an alert */.vw{font-weight:800;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.35em} /* «⟦كلمة⟧»: a word the exam marks in its sentence (V08's real form) */[data-theme=light] .fd-mk,[data-theme=paper] .fd-mk{background:var(--accent-soft)}@media (prefers-color-scheme: light){:root:not([data-theme=dark]) .fd-mk{background:var(--accent-soft)}}.fd-mkl{display:inline-block;margin-inline-start:4px;padding:0 6px;border-radius:6px;font-size:.72em;line-height:1.6;vertical-align:.25em;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}.fd-sp{--mk:rgba(61,214,245,.24);--mk-now:rgba(61,214,245,.46);--mk-line:#3DD6F5;border-radius:4px;padding:0 3px;transition:background-color .35s,box-shadow .35s,color .35s,opacity .35s}[data-theme=light] .fd-sp,[data-theme=paper] .fd-sp{--mk:#FFF0B3;--mk-now:#FFDB4D;--mk-line:#C98A12}@media (prefers-color-scheme: light){:root:not([data-theme=dark]) .fd-sp{--mk:#FFF0B3;--mk-now:#FFDB4D;--mk-line:#C98A12}}.fd-sp-on{background:var(--mk);box-shadow:inset 0 -2px 0 var(--mk-line)}.fd-sp-now{background:var(--mk-now);box-shadow:inset 0 -3px 0 var(--mk-line)}.fd-sp-clue{background:var(--accent);color:var(--accent-ink);font-weight:800;box-shadow:none}.fd-sp-x{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--bad);color:var(--muted);background:none;box-shadow:none}.fd-sp-fade{opacity:.35}.fd-sp-n{display:inline;padding:.12em .42em;margin-inline:2px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.62em;font-weight:800;line-height:1;vertical-align:.6em}.tf-label .fd-sp-n{vertical-align:.12em;margin-inline-end:6px;font-size:.78em}.tf-label-end{font-weight:800;color:var(--ink)}.kx-slabels .tex,.tf-labels .tex{white-space:normal}.rd-today{gap:14px}.rd-main{display:grid;gap:10px;padding:22px 18px}.rd-main h2{margin:0;font:800 23px/1.55 var(--f-display)}.rd-main p{margin:0}.rd-eb{color:var(--now,#AD7415);font-weight:800;font-size:14px}.rd-k{color:var(--muted);font-weight:700;font-size:15px}.rd-next{font-weight:700}.rd-path{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;width:100%;min-height:52px;padding:12px 16px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;text-align:start}.rd-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.rd-path .rd-dots{flex-wrap:nowrap;justify-content:flex-start}.rd-path-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rd-dots i{display:block;width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2)}.rd-dots i.ok{background:var(--good);border-color:var(--good)}.rd-dots i.now{background:var(--now,#AD7415);border-color:var(--now,#AD7415)}.rd-dots i.p{border-color:var(--now,#AD7415)}.rd-week{padding:4px 2px}.rd-week-t{margin:0;font-weight:700;color:var(--muted);font-size:14px}.rd-week ol{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;list-style:none;margin:8px 0 0;padding:0;text-align:center}.rd-week li i{display:block;width:14px;height:14px;margin:0 auto 4px;border-radius:50%;border:2px solid var(--line-2)}.rd-week li.on i{background:var(--good);border-color:var(--good)}.rd-week li span{font-size:12px;color:var(--muted)}.rd-week li.rd-d0 span{font-weight:800;color:var(--ink)}.rd-jhead{gap:10px}.rd-jt{margin:0;font:800 28px/1.4 var(--f-display)}.rd-jsub{margin:0;color:var(--ink-2)}.rd-jlinks{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.rd-why summary{cursor:pointer;color:var(--muted);font-weight:700;font-size:14px;min-height:44px;display:flex;align-items:center}.rd-journey{list-style:none;margin:0;padding:4px 0;position:relative;display:grid;gap:12px}.rd-journey::before{content:'';position:absolute;inset-inline-start:16px;top:16px;bottom:16px;width:2px;background:var(--line-2)}.rd-jn,.rd-js{position:relative;display:flex;align-items:center;gap:12px;padding-inline-start:44px;min-height:48px}.rd-jn>span,.rd-js>span,.rd-jn summary>span{display:grid;gap:2px;flex:1;min-width:0}.rd-jn small,.rd-js small{color:var(--muted);font-size:14px}.rd-node{position:absolute;inset-inline-start:7px;top:15px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);background:var(--bg)}.rd-jn.ok .rd-node,.rd-js.ok .rd-node{background:var(--good);border-color:var(--good)}.rd-jn.ok .rd-node::after,.rd-js.ok .rd-node::after{content:'';position:absolute;inset-inline-start:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.rd-jn.now .rd-node,.rd-js.now .rd-node{background:var(--now,#AD7415);border-color:var(--now,#AD7415)}.rd-jn.p .rd-node{border:3px solid var(--now,#AD7415)}.rd-jcard{flex:1;display:grid;gap:8px;padding:16px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--now,#AD7415)}.rd-jcard h3{margin:0;font:800 21px/1.5 var(--f-display)}.rd-jn-k{margin:0;color:var(--now,#AD7415);font-weight:700;font-size:14px}.rd-jcue{margin:0;color:var(--ink-2)}.rd-jp{margin:0;color:var(--now,#AD7415);font-weight:700}.rd-jn details{width:100%}.rd-jn summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:48px}.rd-jn summary::-webkit-details-marker{display:none}.rd-jact{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 8px}.rd-jtag{font-size:13px;font-weight:700;color:var(--good)}.rd-stages{margin-top:2px;padding-top:12px;border-top:1px dashed var(--line-2)}.rd-jn .btn,.rd-js .btn{width:auto;margin:0;flex:none}.rd-prog{display:grid;gap:2px}.rd-pr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.rd-pr:last-child{border-bottom:0}.rd-pr span{color:var(--ink-2)}.rd-pr b{font-size:18px;white-space:nowrap}.rd-acc h3{margin:6px 0 0;font-size:17px}.rd-install{gap:8px}.rd-install.inline{display:grid;gap:6px}.rd-chip{display:inline-block;justify-self:start;margin-top:4px;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:800}.rd-chip.ok{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
/* the frequency meter (HQ + Abdullah 2026-10-27): 4 rising steps from kpi f (W8) in a neutral cyan/ice, never amber (current) or green (earned) */
:root{--freq:#7DD3FC}@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--freq:#0E7490}}:root[data-theme="light"],:root[data-theme="paper"]{--freq:#0E7490}
.rd-sig{display:inline-flex;align-items:flex-end;gap:6px;justify-self:start;min-height:15px;color:var(--freq)}
.rd-sb{display:inline-flex;align-items:flex-end;gap:2px;height:15px;flex:none}.rd-sb i{width:4px;border-radius:1.5px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--freq) 45%,transparent)}
.rd-sb i:nth-child(1){height:6px}.rd-sb i:nth-child(2){height:9px}.rd-sb i:nth-child(3){height:12px}.rd-sb i:nth-child(4){height:15px}.rd-sb i.on{background:var(--freq);box-shadow:none}
.rd-sig em{font-style:normal;font-size:12px;font-weight:800;line-height:15px;white-space:nowrap}
@keyframes rdSigOn{from{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--freq) 45%,transparent)}to{background:var(--freq);box-shadow:none}}
:root.alive .rd-sig.play .rd-sb i.on{animation:rdSigOn .15s ease-out both;animation-delay:calc(var(--n) * .15s)}@media (prefers-reduced-motion: reduce){:root.alive .rd-sig.play .rd-sb i.on{animation:none}}
:root.rd #view .kx-meterkey{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--muted)}:root.rd #view .kx-meterkey .rd-sb{color:var(--freq)}
:root.rd #view .kx-sub{margin:-2px 2px 2px;font-size:13px;line-height:1.6;color:var(--muted)}
/* two skill cards per row down to 320 wide (Abdullah 2026-10-27: one card per row left half of each card empty); the old view keeps 150px */
:root.rd #view .kx-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
:root.rd #view .sk-freq,:root.rd #view .rd-freq{margin:0;font-size:13px;font-weight:700;color:var(--freq)}
:root.rd #view .sk-freq{line-height:1.3;margin-top:-2px} /* the D intro still fits a 664px-tall screen with no scrolling */
/* «فكرة المهارة» on the skill page, every visit (Abdullah 2026-10-27): a compact glass card, the idea in 2 lines until tapped, the example folded, the one main button */
:root.rd #view .rd-ideac{display:grid;gap:6px;margin:2px 0 4px;padding:12px 14px 14px;border-radius:18px;background:var(--glass,var(--panel));box-shadow:inset 0 0 0 1px var(--glass-b,var(--line-2))}
:root.rd #view .rd-ideac .rd-eb{margin:0}
:root.rd #view .rd-ideat{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
:root.rd #view .rd-ideat.open{display:block;-webkit-line-clamp:unset;overflow:visible}
:root.rd #view .rd-ideax summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:14px;color:var(--ink-2)}
:root.rd #view .rd-ideax summary::-webkit-details-marker{display:none}
:root.rd #view .rd-ideax summary::after{content:'';flex:none;width:8px;height:8px;margin-inline-start:auto;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
:root.rd #view .rd-ideax[open] summary::after{transform:translateY(2px) rotate(-135deg)}
:root.rd #view .rd-ideae{margin:0 0 6px;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
:root.rd #view .rd-ideac .btn.big{margin-top:4px}
:root.rd #view .rd-ideac .rd-cnx{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
/* the one-screen skill page (HQ + Abdullah 2026-10-29, content/review/2026-10-29-simple-skill-page): name + pill, the big idea, one segment per idea
   and one status line, the main button, «شرح المهارة», «كل الأفكار» folded (the explanation's list of ideas shares its rows) */
:root.rd #view .rd-jtr{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
:root.rd #view .rd-pill{flex:none;font-size:12px;font-weight:700;color:var(--freq);border:1px solid currentColor;border-radius:999px;padding:3px 10px;white-space:nowrap}
:root.rd #view .rd-prog{display:grid;gap:8px}
:root.rd #view .rd-segs{display:grid;grid-template-columns:repeat(var(--n,10),minmax(0,1fr));gap:4px}
:root.rd #view .rd-segs i{height:8px;border-radius:4px;background:var(--line-2)}
:root.rd #view .rd-segs i.d{background:var(--now-ink)}
:root.rd #view .rd-segs i.n{background:transparent;box-shadow:inset 0 0 0 2px var(--now-ink)}
:root.rd #view .rd-st{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
:root.rd #view .rd-st b{color:var(--ink);font-weight:700}
:root.rd #view .rd-jgo{display:grid;gap:10px}
:root.rd #view .rd-jx{width:100%}
:root.rd #view .rd-all{border-top:1px solid var(--line);padding-top:4px}
:root.rd #view .rd-all>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:44px;font-weight:700;font-size:16px;cursor:pointer}
:root.rd #view .rd-all>summary::-webkit-details-marker{display:none}
:root.rd #view .rd-all>summary::after{content:'⌄';color:var(--ink-2);font-size:20px;transition:transform .2s}
:root.rd #view .rd-all[open]>summary::after{transform:rotate(180deg)}
:root.rd #view .rd-alll{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px}
:root.rd #view .rd-allr{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 4px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:start}
:root.rd #view button.rd-allr{cursor:pointer}
:root.rd #view button.rd-allr:hover{background:var(--line)}
:root.rd #view .rd-allr>i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;color:#fff}
:root.rd #view .rd-alll li.d .rd-allr>i{background:var(--good);border-color:var(--good)}
:root.rd #view .rd-alll li.n .rd-allr>i{border-color:var(--now-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--now-ink) 22%,transparent)}
:root.rd #view .rd-allr>span{flex:1;min-width:0;font-size:15.5px;line-height:1.5}
:root.rd #view .rd-alll li.n .rd-allr>span{font-weight:700}
:root.rd #view .rd-allr>small{flex:none;font-size:13px;color:var(--ink-2)}
:root.rd #view .rd-allx{display:flex;align-items:center;min-height:44px;margin-top:4px;padding:0 4px;border:0;background:none;color:var(--ink-2);font:inherit;font-size:13.5px;cursor:pointer}
/* «شرح المهارة» · «اختبرني مباشرة»: equal outlined buttons side by side, stacked when the labels don't fit (never cut); one alone takes the row */
:root.rd #view .rd-ideab{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
:root.rd #view .rd-ideab .btn{flex:1 1 0;min-width:max-content;padding-inline:12px;white-space:nowrap}
/* «فهمتها، أعطني السؤال الجديد» under «مثال إضافي» (2026-10-28): a quiet text link, a full tap target */
:root.rd #view .kx-sskip{justify-self:center;min-height:44px;padding:0 10px;font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
/* loading on weak data (2026-10-28): a slim moving bar under «نجهّز…» (still with reduced motion); the error card's two buttons */
.ld-bar{position:relative;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.ld-bar i{position:absolute;top:0;bottom:0;width:40%;border-radius:2px;background:var(--freq,var(--accent));animation:ldMove 1.2s ease-in-out infinite}
@keyframes ldMove{from{inset-inline-start:-40%}to{inset-inline-start:100%}}
@media (prefers-reduced-motion: reduce){.ld-bar i{animation:none;width:100%;opacity:.5}}
.ld-fail h2{font-size:20px;line-height:1.5}
/* the in-app browser hint on the redesign (HQ 2026-10-27): a slim neutral line, never the amber of «current» */
:root.rd #view .rd-inapp{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);font-size:13px;padding:0 12px}:root.rd #view .rd-inapp.open{padding:12px 14px}
:root.rd #view .rd-inapp .inapp-go{color:var(--freq);min-height:44px;padding:0 4px}:root.rd #view .rd-inapp .sa-go{width:100%;min-height:44px;margin:2px 0 10px}.sa-steps{list-style:none;padding:0;margin:4px 0;display:grid;gap:8px}.sa-steps li{display:flex;align-items:center;gap:10px;line-height:1.5}.sa-steps svg{flex:none;color:var(--freq)}:root.rd #view .rd-inapp .inapp-x{min-height:44px;min-width:44px}.rd-wall{margin:0;font-size:15px;font-weight:700;color:var(--ink-2)}/* the redesign's visual system (HQ 2026-10-26, BRIEF §10.2): only while the flag is on (html.rd). Surface, ink and meaning tokens; the figure tokens (b1, b2, shade, pie) stay. Amber marks the current step only, green an earned outcome only; amber TEXT uses --now-ink (#AD7415 is 4.0:1 on white, below AA for small text). */:root.rd[data-theme="paper"],:root.rd[data-theme="light"]{--bg:#F7F6F2;--bg-2:#EFEDE6;--panel:#FFFFFF;--panel-2:#F7F6F2;--line:#E1E5E9;--line-2:#C9D0D7;--ink:#10223A;--ink-2:#33445A;--muted:#586575;--accent:#10223A;--accent-ink:#FFFFFF;--accent-soft:rgba(16,34,58,.07);--glow:rgba(16,34,58,.14);--good:#147D68;--good-soft:#E1F1EC;--bad:#B14336;--bad-soft:#F8E6E3;--now:#AD7415;--now-ink:#8A5A0E;--now-soft:#F7ECD9;--card:var(--panel);--paper:var(--panel);--halo:transparent;--dot:transparent;color-scheme:only light}@media (prefers-color-scheme: light){:root.rd:not([data-theme]){--bg:#F7F6F2;--bg-2:#EFEDE6;--panel:#FFFFFF;--panel-2:#F7F6F2;--line:#E1E5E9;--line-2:#C9D0D7;--ink:#10223A;--ink-2:#33445A;--muted:#586575;--accent:#10223A;--accent-ink:#FFFFFF;--accent-soft:rgba(16,34,58,.07);--glow:rgba(16,34,58,.14);--good:#147D68;--good-soft:#E1F1EC;--bad:#B14336;--bad-soft:#F8E6E3;--now:#AD7415;--now-ink:#8A5A0E;--now-soft:#F7ECD9;--card:var(--panel);--paper:var(--panel);--halo:transparent;--dot:transparent;color-scheme:only light}}:root.rd[data-theme="dark"]{--bg:#0B1522;--bg-2:#0F1B2B;--panel:#132234;--panel-2:#182A40;--line:#22344B;--line-2:#33496A;--ink:#EAF0F6;--ink-2:#C4CFDB;--muted:#9AA8B8;--accent:#EAF0F6;--accent-ink:#0B1522;--accent-soft:rgba(234,240,246,.08);--glow:rgba(234,240,246,.16);--good:#45C4A2;--good-soft:rgba(69,196,162,.14);--bad:#F08A7C;--bad-soft:rgba(240,138,124,.14);--now:#E2A33E;--now-ink:#E9B45C;--now-soft:rgba(226,163,62,.16);--card:var(--panel);--paper:var(--panel-2);--halo:transparent;--dot:transparent;color-scheme:dark}@media (prefers-color-scheme: dark){:root.rd:not([data-theme]){--bg:#0B1522;--bg-2:#0F1B2B;--panel:#132234;--panel-2:#182A40;--line:#22344B;--line-2:#33496A;--ink:#EAF0F6;--ink-2:#C4CFDB;--muted:#9AA8B8;--accent:#EAF0F6;--accent-ink:#0B1522;--accent-soft:rgba(234,240,246,.08);--glow:rgba(234,240,246,.16);--good:#45C4A2;--good-soft:rgba(69,196,162,.14);--bad:#F08A7C;--bad-soft:rgba(240,138,124,.14);--now:#E2A33E;--now-ink:#E9B45C;--now-soft:rgba(226,163,62,.16);--card:var(--panel);--paper:var(--panel-2);--halo:transparent;--dot:transparent;color-scheme:dark}}:root.rd #view{font-size:17px;line-height:1.75}:root.rd #view h1,:root.rd #view h2,:root.rd #view h3,:root.rd #view h4{font-family:var(--f-ui);font-weight:700}:root.rd #view h2{font-size:21px}:root.rd #view h3{font-size:18px}:root.rd #view .rd-jt,:root.rd #view .rd-fin-h,:root.rd #view .rd-main h2,:root.rd #view .rd-pt,:root.rd #view .kx-hero>h2.kx-h:first-child{font:800 28px/1.4 var(--f-display)}:root.rd #view .kx-stem{font-size:19px;line-height:1.75;font-weight:500}:root.rd #view .kx-opt{font-size:17px;font-weight:600;border-radius:14px}:root.rd #view .kx-lead{font-size:17px;line-height:1.75}:root.rd #view .kx-note,:root.rd #view .muted{font-size:15px}:root.rd #view .kx-eyebrow{font-size:14px}:root.rd #view .kx-h{font-size:22px}:root.rd #view .card{border-radius:18px;border:1px solid var(--line);box-shadow:none}:root.rd #view .rd-main,:root.rd #view .rd-fin{border-color:transparent;box-shadow:0 12px 30px -18px rgba(16,34,58,.38)}:root.rd[data-theme="dark"] #view .rd-main,:root.rd[data-theme="dark"] #view .rd-fin{box-shadow:0 12px 30px -16px rgba(0,0,0,.6)}:root.rd #view .btn{min-height:48px;border-radius:14px;font-size:16px}:root.rd #view .btn.small{min-height:44px;font-size:15px}:root.rd #view .btn.big{min-height:54px;font-size:17px;border-radius:16px}:root.rd #view .seg button{min-height:44px}:root.rd #view .kx-stem,:root.rd #view .kx-opts,:root.rd #view .kx-pass,:root.rd #view .kx-sfb,:root.rd #view .kx-q>.kx-shint,:root.rd #view .kx-q>.kx-note{width:100%;max-width:640px;margin-inline:auto} /* tablets and laptops (HQ): a reading column, not ~90 characters a line */:root.rd #view .rd-eb,:root.rd #view .rd-jn-k,:root.rd #view .rd-jp,:root.rd #view .rd-strip li.now{color:var(--now-ink)}:root.rd #view .btn{transition:transform 100ms ease-out,background-color 150ms,border-color 150ms,color 150ms}:root.rd #view .btn:active{transform:scale(.98)}:root.rd #view .kx-opt{transition:background-color 150ms,box-shadow 150ms,color 150ms}:root.rd #view details>*:not(summary){animation:rdIn .2s ease-out}@keyframes rdIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){:root.rd #view *,:root.rd #view *::before,:root.rd #view *::after{transition:none!important;animation:none!important}}.rd-skel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.rd-skel{display:block;height:84px;border-radius:16px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}@media (prefers-reduced-motion:no-preference){.rd-skel{animation:rdPulse 1.2s ease-in-out infinite}@keyframes rdPulse{50%{opacity:.55}}}.rd-total{margin:0;padding:0 4px;font-weight:700;color:var(--ink-2)}body.rd-learn header.top{display:none}body.rd-learn .wrap{padding-top:max(10px,env(safe-area-inset-top,0px))}.rd-lh{display:flex;align-items:center;gap:8px;min-height:48px}.rd-back{flex:none;width:44px;height:44px;display:grid;place-items:center;margin-inline-start:-8px;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer}.rd-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.rd-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rd-back.rd-backl{width:auto;display:inline-flex;align-items:center;gap:2px;padding-inline:2px 10px;font:inherit;font-size:15px;font-weight:700;white-space:nowrap}.rd-lt{margin:0;display:flex;flex-wrap:wrap;gap:0 6px;min-width:0;font-size:15px;line-height:1.6;color:var(--muted)}.rd-lt b{color:var(--ink);font-weight:700}.rd-lt b:not(:last-child)::after{content:'•';display:inline-block;margin-inline-start:6px;color:var(--muted);font-weight:400} /* the separator stays with the skill when the idea's name wraps (HQ 2026-10-27); the redesign's bullet, never a «·» that reads as «٠» */.rd-strip{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.rd-strip li{padding-top:6px;border-top:4px solid var(--line);text-align:center;font-size:14px;font-weight:700;color:var(--muted)}.rd-strip li.past{border-color:var(--line-2);color:var(--ink-2)}.rd-strip li.now{border-color:var(--now,#AD7415);color:var(--now,#AD7415)}.rd-fin{gap:10px;padding:24px 18px;text-align:center;box-shadow:0 10px 30px rgba(16,34,58,.08)}.rd-fin-q{text-align:start}.rd-chk{display:block;width:72px;height:72px;margin:0 auto 2px;overflow:visible}.rd-chk circle{fill:color-mix(in srgb,var(--good) 12%,transparent);transform-box:fill-box;transform-origin:center}.rd-chk path{fill:none;stroke:var(--good);stroke-width:6;stroke-linecap:round}.rd-fin-h{margin:0;font:800 28px/1.4 var(--f-display);color:var(--ink)}.rd-fin-s{margin:0;color:var(--muted);font-weight:700}.rd-fin-path{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;font-size:15px;font-weight:700;color:var(--muted)}.rd-fin-path .rd-dots{justify-content:center}.rd-fin-l{margin:0;color:var(--ink-2)}.rd-fin-all{margin:0;font-weight:800;color:var(--good)}.rd-fin-n{margin:0;font-weight:700}.rd-fin-b{display:grid;gap:8px;margin-top:6px}.rd-fin-x{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;text-align:start}.rd-rule{width:100%}.rd-rule summary{display:flex;align-items:center;justify-content:center;min-height:44px;cursor:pointer;font-weight:700;color:var(--ink-2)}.rd-guest{margin:0;font-size:14px;color:var(--muted)}.rd-link{min-height:44px;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}@media (prefers-reduced-motion:no-preference){.rd-chk circle{animation:rdC .3s ease-out both}.rd-chk .s1{animation:rdS1 .42s cubic-bezier(.2,.8,.2,1) .08s both}.rd-chk .s2{animation:rdS2 .5s cubic-bezier(.2,.8,.2,1) .2s both}.rd-dots i.fill{animation:rdF .32s ease-out .55s both}@keyframes rdC{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}@keyframes rdS1{from{transform:translate(-14px,-10px);opacity:0}to{transform:none;opacity:1}}@keyframes rdS2{from{transform:translate(14px,-14px);opacity:0}to{transform:none;opacity:1}}@keyframes rdF{from{transform:scale(.6);background:transparent;border-color:var(--line-2)}to{transform:none}}}.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.rv-ideas{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}.rv-ideas li{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.rv-ideas small{color:var(--muted);white-space:nowrap}.rv-ideas small.due{color:var(--warn);font-weight:700}.rv-ideas small.ok{color:var(--good);font-weight:700}@media (prefers-reduced-motion:reduce){.fd-sp{transition:none}}.fd-res{padding:8px 10px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}.fd-res.ok{background:var(--good-soft)}.fd-res.no{background:var(--warn-soft)}.fd-opt.locked{border-color:var(--line-2);background:var(--panel-2)}
.wp-expl .idea{margin:0 0 6px}.wp-expl ol{margin:0;padding-inline-start:20px;display:grid;gap:4px;line-height:1.7}

/* Preview: quiet reporting and comfortable Arabic reading in the skill journey. */
.kx,.fd{line-height:1.85;letter-spacing:normal}
.kx .kx-eyebrow,.fd .eyebrow{letter-spacing:normal}
.kx p,.fd p,.kx .kx-stem,.kx .kx-q .kx-stem,.kx .kx-lead,.kx .kx-ex p,.kx .kx-pick p,.kx .kx-fb,.fd .fd-ask{line-height:1.85}
.kx .kx-sol,.kx .kx-ex,.kx .kx-pick,.fd .fd-sol,.fd .fd-given{display:grid;gap:12px}
.kx .kx-sol>p,.kx .kx-ex>p,.kx .kx-pick>p,.fd .fd-sol>p,.fd .fd-given>p{margin:0}
.kx .kx-sol ol,.kx .kx-ex ol,.fd .fd-msteps{display:grid;gap:12px;line-height:1.85;margin:0;padding-inline-start:24px}
.kx .kx-sol li,.kx .kx-ex li,.fd .fd-msteps li{padding-inline-start:3px;line-height:1.85}
.kx .kx-pass>p,.fd .fd-pass>p{margin:0}
.kx .kx-pass>p+p,.fd .fd-pass>p+p{margin-block-start:12px}
.kx .btn.kx-report,.fd .btn.fd-report{display:inline-flex;justify-self:start;align-self:flex-start;flex:0 0 auto;width:max-content;max-width:100%;min-width:44px;min-height:44px;padding:6px 4px;margin:0;border:0;border-radius:4px;background:transparent;box-shadow:none;color:var(--muted);font-size:13px;font-weight:500;line-height:1.5;text-align:start;text-decoration:underline;text-underline-offset:4px;letter-spacing:normal}
.kx .btn.kx-report:hover,.fd .btn.fd-report:hover{background:transparent;box-shadow:none;color:var(--ink);border:0}
.kx .btn.kx-report:focus-visible,.fd .btn.fd-report:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Android forced dark (Chrome, TikTok's in-app browser) repaints a page that doesn't say which schemes it supports: the paper and
   light themes are light only; the dark theme, and «تلقائي» on a phone in dark mode, are dark (HQ 2026-10-24). Last in the sheet,
   with the same weight as the per-theme color-scheme lines above, so it settles them. */
:root[data-theme="paper"],:root[data-theme="light"],:root:not([data-theme]){color-scheme:only light}:root[data-theme="dark"]{color-scheme:dark}@media (prefers-color-scheme: dark){:root:not([data-theme]){color-scheme:dark}}
/* «٣٣ فكرة» first visit (html.ad-land, HQ 2026-10-24): the stories card's «اكشف الرابط» on the first screen of TikTok's in-app browser
   (375×720, 360×700). Same copy: the trust row moves under the card, a slightly smaller headline, compact chips. Everyone else unchanged. */
@media (max-width:760px){.ad-land #landing .l2-hero{gap:0}.ad-land #landing .l2-htext{display:contents}.ad-land #landing .l2-hero>div:not(.l2-htext){order:1;margin-top:12px}.ad-land #landing .l4-trust{order:2;margin-top:14px}.ad-land #landing h1{font-size:29px;margin-bottom:8px}.ad-land #landing .st-chips{margin-top:10px;margin-bottom:12px;gap:6px}.ad-land #landing .st-chips li{padding-top:7px;padding-bottom:7px}.ad-land #landing .ch-top{margin-bottom:8px}}
/* «برهان حيّ» (HQ + Abdullah 2026-10-26, content/review/2026-10-26-redesign-r1/alive/BRIEF.md): the redesign's look, only with html.rd.alive
   (config alive). The frame is always navy: glass surfaces, amber = the current step only, green = earned things only. The question area (html.qs:
   a TRY, SEE, D, review / check item, test section, explanation) is dark by default and paper with html.ql («وضع الأسئلة: فاتح»). */
:root.rd.alive{--bg:#0A1628;--bg-2:#0D1B31;--panel:#111F35;--panel-2:#16263F;--line:rgba(255,255,255,.10);--line-2:rgba(238,243,250,.28);--ink:#EEF3FA;--ink-2:#D6DFEB;--muted:#A3B3C9;--accent:#F4B642;--accent-ink:#0A1628;--accent-soft:rgba(244,182,66,.12);--glow:rgba(244,182,66,.30);--good:#34D399;--good-soft:rgba(52,211,153,.14);--bad:#F07A6E;--bad-soft:rgba(240,122,110,.12);--now:#F4B642;--now-ink:#F4B642;--now-soft:rgba(244,182,66,.14);--proof:#F4B642;--proof-soft:rgba(244,182,66,.14);--warn:#FFB86B;--warn-soft:rgba(255,184,107,.14);--on-sem:#0A1628;--card:var(--panel);--paper:var(--panel-2);--halo:rgba(244,182,66,.12);--dot:transparent;--glass:rgba(255,255,255,.06);--glass-b:rgba(255,255,255,.12);--f-display:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;--f-title:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;color-scheme:dark}
:root.rd.alive.qs{--halo:transparent}
:root.rd.alive.qs:not(.ql){--glass:#111F35;--glass-b:rgba(255,255,255,.08)}
:root.rd.alive.qs.ql{--bg:#F7F6F2;--bg-2:#EFEDE6;--panel:#FFFFFF;--panel-2:#F7F6F2;--line:#E1E5E9;--line-2:#C9D0D7;--ink:#10223A;--ink-2:#33445A;--muted:#586575;--accent:#10223A;--accent-ink:#FFFFFF;--accent-soft:rgba(16,34,58,.07);--glow:rgba(16,34,58,.14);--good:#147D68;--good-soft:#E1F1EC;--bad:#B14336;--bad-soft:#F8E6E3;--now:#AD7415;--now-ink:#8A5A0E;--now-soft:#F7ECD9;--card:var(--panel);--paper:var(--panel);--halo:transparent;--dot:transparent;--proof:#8F5F00;--proof-soft:#FBEBC0;--warn:#B45309;--warn-soft:#FCEFDB;--on-sem:#FFFFFF;--hi:rgba(255,255,255,.75);--scrim:rgba(11,27,51,.4);--accent-2:var(--accent-soft);--shade:#EADFC4;--b1:#2F5E8C;--b2:#B07810;--pie0:#DCE6F0;--pie1:#F6E2B5;--pie2:#D9EDDF;--pie3:#EADCEF;--pie4:#F5D7D2;--pie5:#E4E1D9;--glass:#FFFFFF;--glass-b:#E1E5E9;color-scheme:only light}
:root.rd.alive body{background:var(--bg)}
/* glass, titles, buttons */
:root.rd.alive #view .card{background:var(--glass);border:1px solid var(--glass-b);box-shadow:none}
:root.rd.alive #view h1,:root.rd.alive #view h2,:root.rd.alive #view .kx-h,:root.rd.alive #view .rd-jcard h3{font-family:var(--f-title);font-weight:700}
:root.rd.alive #view .rd-jt{font:700 28px/1.3 var(--f-title)}:root.rd.alive #view .kx-hero>h2.kx-h:first-child{font:700 30px/1.3 var(--f-title)}
:root.rd.alive #view .btn{background:var(--glass);border:1px solid var(--glass-b);color:var(--ink)}
:root.rd.alive #view .btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
:root.rd.alive #view .btn.primary{background:var(--accent);border:1px solid transparent;color:var(--accent-ink);font-family:var(--f-title);font-weight:700;box-shadow:0 10px 30px var(--glow)}
:root.rd.alive.qs.ql #view .btn.primary{box-shadow:none}
:root.rd.alive #view .btn.big{min-height:56px;border-radius:18px;font-size:19px}
:root.rd.alive #view .seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
/* the question area */
:root.rd.alive.qs:not(.ql) #view .opt:not(.ok):not(.no):not(.sel){background:rgba(255,255,255,.04);border-color:rgba(238,243,250,.16)}
:root.rd.alive.qs:not(.ql) #view .bub{border-color:rgba(238,243,250,.35)}
:root.rd.alive #view .opt{border-radius:16px}
:root.qm-sw *,:root.qm-sw *::before,:root.qm-sw *::after{transition:none!important}
/* taps (HQ, Abdullah's iPhone 2026-10-27): no double-tap-zoom wait on anything tappable, a tap colour, and a pressed state on options that changes colour only (options never move) */
:root.rd button,:root.rd a,:root.rd summary,:root.rd [data-act],:root.rd .opt{touch-action:manipulation;-webkit-tap-highlight-color:rgba(244,182,66,.18)}
:root.rd #view .opt:active:not(:disabled):not(.ok):not(.no){border-color:var(--now);background:var(--now-soft)}
/* the skill page (HQ): a compact header, the route on the first screen */
:root.rd #view .rd-jhead{display:grid;gap:4px;padding:0 2px}
:root.rd #view .rd-jhead .rd-jt{font-size:28px;line-height:1.3;margin:0}
:root.rd #view .rd-jlinks{gap:4px 10px}
:root.rd #view .rd-jlinks .btn.small{min-height:44px;padding-inline:0;font-size:14px;color:var(--now-ink)}
/* «التدريب» (HQ + Abdullah 2026-10-27, TRAINING_CLEAN_BRIEF.md): one suggestion card, then short groups of rows (icon · name · one status · chevron) */
:root.rd #view .tr-grp{display:grid;margin:0}
:root.rd #view .tr-gh{margin:4px 4px 8px;font-size:13px;font-weight:700;color:var(--muted)}
:root.rd #view .tr-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:0;padding:10px 16px;border:1px solid var(--line);border-top-width:0;background:var(--panel);color:var(--ink);font:inherit;text-align:start;cursor:pointer;border-radius:0}
:root.rd #view .tr-grp .tr-gh+.tr-row{border-top-width:1px;border-radius:16px 16px 0 0}
:root.rd #view .tr-grp .tr-row:last-child{border-radius:0 0 16px 16px}
:root.rd #view .tr-grp .tr-gh+.tr-row:last-child{border-radius:16px}
:root.rd #view .tr-ic{flex:none;width:24px;height:24px}
:root.rd #view .tr-nm{flex:1;min-width:0;font-weight:700;font-size:16px;line-height:1.4}
:root.rd #view .tr-st{flex:0 1 auto;max-width:46%;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:end}
:root.rd #view .tr-ch{flex:none;width:8px;height:8px;border:solid var(--muted);border-width:0 0 2px 2px;transform:rotate(45deg)}
:root.rd #view .tr-row.locked{cursor:default;color:var(--ink-2)}
:root.rd #view .tr-row.locked .tr-ic{opacity:.45;filter:grayscale(1)}
:root.rd #view .tr-row:not(.locked):active{background:var(--panel-2)}
:root.rd.alive #view .tr-row{background:var(--glass);border-color:var(--glass-b)}
:root.rd #view .tr-rd{gap:18px}
/* Pro round 2 (HQ 2026-10-27): the handoff line's idea name, quietly under it; the split's five mock cards (status, one action, parts inside) */
:root.rd #view .rd-fin-ho{margin:-4px 0 0;font-size:14px;color:var(--muted)}
#view .ms-card{gap:10px}
#view .ms-card h3{margin:0}
#view .ms-st{flex:none;font-size:13px;font-weight:700}
#view .ms-st.done{color:var(--good)}
#view .ms-st.seen{color:var(--ink-2)}
#view .ms-seen{margin:0;padding:8px 12px;border-radius:12px;background:var(--accent-soft);font-size:14px;line-height:1.6;color:var(--ink-2)}
#view .ms-parts summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}
#view .ms-part{margin:12px 0 6px;font-size:14px;color:var(--muted)}
:root.rd #view .secchip{min-height:44px} /* the section chips: a full tap target (they were 33px) */
/* «فكرة المهارة» (HQ + Abdullah 2026-10-27, alive/SKILL_INTRO_BRIEF.md): a skill's first open. The big idea in a card with an amber edge, a quick
   example, the ideas as the journey's route (compact, lighting up one by one, static with reduced motion), one button held at the bottom. */
:root.rd #view .sk-in{gap:14px}
:root.rd #view .sk-h{display:grid;gap:2px;padding:0 2px}
:root.rd #view .sk-h .rd-eb{margin:0}
:root.rd #view .sk-t{margin:0;font-size:28px;line-height:1.3}
:root.rd #view .sk-from{margin:0;padding:10px 14px;border-radius:14px;background:var(--accent-soft);color:var(--ink-2);font-size:15px;line-height:1.6}
:root.rd #view .sk-from b{color:var(--ink)}
:root.rd #view .sk-idea{display:grid;gap:10px;padding:18px;border-inline-start:3px solid var(--now,#AD7415)}
:root.rd #view .sk-big{margin:0;font-size:19px;line-height:1.75;font-weight:700;color:var(--ink)}
:root.rd #view .sk-ex{margin:0;padding-top:10px;border-top:1px solid var(--line);font-size:15px;line-height:1.75;color:var(--ink-2)}
:root.rd #view .sk-ex b{margin-inline-end:6px;color:var(--now-ink)}
:root.rd #view .sk-map{gap:6px}
:root.rd #view .sk-map small{font-size:14px;line-height:1.6}
:root.rd #view .sk-map .sk-lit{color:var(--good);font-weight:700}
:root.rd #view .sk-go{position:sticky;bottom:0;z-index:2;padding:14px 0 calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--bg) 30%)}
:root.rd #view .sk-go .btn{margin:0;width:100%}
@media (max-height:640px){:root.rd #view .sk-go{position:static;padding-top:6px}} /* short phones: the button follows the content instead of covering the folded rows */
:root.rd #view .sk-map.lit>li{animation:skLit .45s calc(var(--i) * var(--st,110ms)) ease-out both}
:root.rd #view .sk-map.lit>li:not(.now):not(.ok) .rd-node{animation:skNode .7s calc(var(--i) * var(--st,110ms)) ease-out both}
:root.rd #view .sk-start{margin:0;padding:0 2px;font-size:16px;line-height:1.6;color:var(--ink-2)}
:root.rd #view .sk-start b{color:var(--ink)}
:root.rd #view .sk-fold summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;color:var(--ink-2)}
:root.rd #view .sk-fold summary::-webkit-details-marker{display:none}
:root.rd #view .sk-fold summary::after{content:'';flex:none;width:8px;height:8px;margin-inline-start:auto;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
:root.rd #view .sk-fold[open] summary::after{transform:translateY(2px) rotate(-135deg)}
:root.rd #view .sk-fold[open] summary{color:var(--ink)}
:root.rd #view .sk-fold summary{list-style:none;border-bottom:1px solid var(--line)}
:root.rd #view .sk-fold .sk-map{margin-top:6px}
:root.rd #view .sk-exd .sk-ex{border-top:0;padding-top:0}
@keyframes skLit{from{opacity:.3}to{opacity:1}}
@keyframes skNode{40%{border-color:#F4B642;box-shadow:0 0 12px rgba(244,182,66,.6)}}
:root.rd.alive #view .sk-t{font:700 28px/1.3 var(--f-title)}
:root.rd.alive #view .sk-idea{border:1px solid rgba(244,182,66,.5);box-shadow:0 0 28px rgba(244,182,66,.08)}
:root.rd.alive #view .sk-ex b{color:#F4B642}
@media (prefers-reduced-motion:reduce){:root.rd #view .sk-map.lit>li,:root.rd #view .sk-map.lit>li .rd-node{animation:none}}
:root.rd #view .rd-why .rd-jsub{margin:4px 0 6px;font-size:15px;color:var(--ink-2)}
:root.rd #view .rd-js .rd-jcard h3{margin:0}
.qm-t{flex:none;width:44px;height:44px;display:grid;place-items:center;margin-inline-start:auto;padding:0;border-radius:14px;border:1px solid var(--glass-b);background:var(--glass);color:var(--now-ink);cursor:pointer}
.qm-t svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.qm-t:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
:root.rd:not(.alive) .qm-t{display:none}
/* the simpler session (HQ + Abdullah 2026-10-28): the learning header's one «⋯» menu; quiet links; the SEE's replay as a small icon on its picture */
.rd-mw{position:relative;margin-inline-start:auto;flex:none}
.rd-more{width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:14px;border:1px solid var(--glass-b,var(--line));background:var(--glass,transparent);color:var(--now-ink,var(--ink));font-size:22px;font-weight:700;line-height:1;cursor:pointer}
.rd-more:focus-visible,.rd-mi:focus-visible,.kx-replay:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rd-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:40;min-width:210px;display:grid;gap:2px;padding:6px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 14px 32px -14px rgba(0,0,0,.5)}
.rd-menu[hidden]{display:none}
.rd-mi{display:block;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--ink);font:inherit;font-size:15px;font-weight:600;text-align:start;cursor:pointer}
.rd-mi:hover{background:var(--panel-2)}
.rd-menu .rd-mi.kx-report{margin:0;justify-self:stretch;align-self:stretch;width:100%;min-height:44px;padding:10px 12px;font-size:15px;font-weight:600;text-decoration:none;color:var(--ink)}
:root.rd #view .rd-quiet{justify-self:center;min-height:44px;padding:0 10px;font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.kx-seew{position:relative}
/* the replay icon sits in the «شوف الطريقة» row, never over the drawing or its text (Codex BH-11: it covered the first line at 320) */
.kx-seeh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kx-replay{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink-2);cursor:pointer}
.kx-replay svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kx-shelp{display:grid;gap:8px}
/* the tab bar and the top bar */
:root.rd.alive header.top{background:rgba(10,22,40,.88);border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root.rd.alive.qs.ql header.top{background:rgba(247,246,242,.92);border-bottom-color:#E1E5E9}
:root.rd.alive .tabbar{background:rgba(10,22,40,.9);border-top:1px solid rgba(255,255,255,.08);box-shadow:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root.rd.alive .tabbar button{min-height:48px;color:#A3B3C9}
:root.rd.alive .tabbar button[aria-current="page"],:root.rd.alive .nav button[aria-current="page"]{color:#F4B642}
:root.rd.alive .tabbar button[aria-current="page"] svg{filter:drop-shadow(0 0 7px rgba(244,182,66,.55))}
:root.rd.alive .tabbar button[aria-current="page"]::before{display:none}
/* «المراجعة» as its own tab (HQ + Abdullah 2026-10-28): the due set or the next one on top; «أفكار تعلمتها» by skill, each with its status and «تدرّب عليها» */
.rt .rt-next{margin:0;color:var(--muted);font-weight:600}
.rt-learned h3 small,.rt-sk summary small{color:var(--muted);font-weight:600;font-size:13px}
.rt-sk{border-top:1px solid var(--line);padding-top:4px}
.rt-sk:first-of-type{border-top:0;padding-top:0}
.rt-sk summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;gap:8px}
.rt-sk summary::-webkit-details-marker{display:none}
.rt-sk summary::after{content:"▾";margin-inline-start:auto;color:var(--muted)}.rt-sk[open] summary::after{content:"▴"}
.rt-ideas{list-style:none;margin:0 0 6px;padding:0;display:grid}
.rt-ideas li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--line)}
.rt-i{display:grid;gap:2px;min-width:0}
.rt-n{font-weight:600;overflow-wrap:anywhere}
.rt-st{font-size:12.5px;color:var(--muted)}
.rt-st.ok{color:var(--good)}.rt-st.due{color:var(--warn)}
.rt-ideas .btn.small{min-height:44px;white-space:nowrap}
:root.rd.alive .nav button{color:#A3B3C9}
/* «اليوم» */
:root.rd.alive #view .rd-main{gap:12px;padding:22px 20px 20px;border-radius:26px;background:var(--glass);border:1px solid var(--glass-b);box-shadow:none}
:root.rd.alive #view .rd-main h2{font:700 32px/1.25 var(--f-title)}
:root.rd.alive #view .rd-eb{font-size:13px;font-weight:600;color:var(--now-ink)}
:root.rd.alive #view .rd-k{font-size:15px;font-weight:500;color:var(--muted)}
:root.rd.alive #view .rd-main p:not(.rd-eb):not(.rd-k):not(.rd-total):not(.rd-freq){color:var(--ink-2)}
.al-route{display:flex;align-items:center;padding:8px 2px 4px}
.al-route .al-n{flex:none;display:block;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(238,243,250,.32);box-sizing:border-box}
.al-route .al-n.ok{width:16px;height:16px;background:#34D399;border-color:#34D399;box-shadow:0 0 12px rgba(52,211,153,.75)}
.al-route .al-n.now{width:18px;height:18px;background:var(--bg);border:3px solid #F4B642;animation:alPulse 2.2s ease-out infinite}
.al-route .al-l{flex:1 1 0;min-width:6px;height:2px;border-radius:2px;background:rgba(238,243,250,.14)}
.al-route .al-l.ok{height:3px;background:linear-gradient(to left,#34D399,#F4B642);box-shadow:0 0 8px rgba(52,211,153,.5)}
:root.rd.alive #view .al-map{display:grid;gap:10px;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);cursor:pointer}
.al-map-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.al-map-h span{font-size:13px;color:var(--muted)}
.al-map-t{display:flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:600 17px/1.4 var(--f-title);cursor:pointer}
.al-map-g{margin:0;font-size:12px;color:var(--muted)}
.al-dots{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.al-d{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(238,243,250,.26);box-sizing:border-box}
.al-d.r{background:#34D399;border-color:#34D399;box-shadow:0 0 10px rgba(52,211,153,.8)}
.al-d.s{border:2.5px solid #F4B642;box-shadow:0 0 8px rgba(244,182,66,.45);animation:alTw 3s ease-in-out infinite}
.al-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font-size:13px;color:#C9D4E3}
.al-legend span{display:inline-flex;align-items:center;gap:6px}
.al-legend .al-d{width:9px;height:9px;animation:none}
:root.rd.alive #view .rd-week li i{width:12px;height:12px;border:1.5px solid rgba(238,243,250,.26)}
:root.rd.alive #view .rd-week li.on i{background:#34D399;border-color:#34D399;box-shadow:0 0 8px rgba(52,211,153,.7)}
:root.rd.alive #view .rd-week li.rd-d0 i{outline:2px solid #F4B642;outline-offset:3px}
:root.rd.alive #view .rd-week li span{color:var(--muted)}
:root.rd.alive #view .rd-week li.rd-d0 span{color:var(--ink);font-weight:700}
:root.rd.alive #view .rd-exsug{background:var(--glass);border-color:var(--glass-b)}
/* the skill journey: the solved route flows with light, the current idea glows amber, the rest dashed */
:root.rd.alive #view .rd-journey::before{display:none}
:root.rd.alive #view .rd-journey>li::after{content:"";position:absolute;inset-inline-start:16px;top:38px;bottom:-12px;width:2px;border-radius:2px;background:repeating-linear-gradient(to bottom,rgba(238,243,250,.2) 0 5px,transparent 5px 10px)}
:root.rd.alive #view .rd-journey>li:last-child::after{display:none}
:root.rd.alive #view .rd-journey>li.ok::after{width:3px;inset-inline-start:15.5px;background:linear-gradient(to bottom,#34D399 0,#34D399 60%,#7CF0C4 80%,#34D399 100%) 0 0/3px 40px;box-shadow:0 0 10px rgba(52,211,153,.55);animation:alFlow 1.6s linear infinite}
:root.rd.alive #view .rd-node{width:16px;height:16px;inset-inline-start:9px;top:16px;border:1.5px solid rgba(238,243,250,.32);background:var(--bg)}
:root.rd.alive #view .rd-jn.ok .rd-node,:root.rd.alive #view .rd-js.ok .rd-node{width:26px;height:26px;inset-inline-start:4px;top:11px;background:#34D399;border-color:#34D399;box-shadow:0 0 14px rgba(52,211,153,.7)}
:root.rd.alive #view .rd-jn.ok .rd-node::after,:root.rd.alive #view .rd-js.ok .rd-node::after{inset-inline-start:9px;top:5px;border-color:#0A1628}
:root.rd.alive #view .rd-jn.now .rd-node,:root.rd.alive #view .rd-js.now .rd-node{width:26px;height:26px;inset-inline-start:4px;top:11px;background:var(--bg);border:3px solid #F4B642;animation:alPulse 2.2s ease-out infinite}
:root.rd.alive #view .rd-jn.p .rd-node{border:2.5px solid #F4B642}
:root.rd.alive #view .rd-jcard{background:rgba(255,255,255,.06);border:1px solid rgba(244,182,66,.45);border-radius:22px;box-shadow:0 0 28px rgba(244,182,66,.10)}
:root.rd.alive #view .rd-jcard h3{font-size:21px}
:root.rd.alive #view .rd-jcue{color:var(--ink-2)}
:root.rd.alive #view .rd-jtag{color:#34D399}
:root.rd.alive #view .rd-stages{margin-top:6px;padding:14px 16px 14px 12px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.04)}
/* the finish: the ring scales in, the check draws itself, one light ring bursts; the route's node turns green; the buttons never wait */
.rd-chk .bu{display:none}
:root.rd.alive #view .rd-fin{position:relative}
:root.rd.alive #view .rd-fin::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px 240px at 50% 0,rgba(52,211,153,.16),rgba(52,211,153,0) 70%);pointer-events:none}
:root.rd.alive #view .rd-fin>*{position:relative}
:root.rd.alive #view .rd-fin-h{font:700 36px/1.2 var(--f-title)}
:root.rd.alive #view .rd-chk{width:112px;height:112px}
:root.rd.alive #view .rd-chk.sm{display:inline-block;width:28px;height:28px;margin:0 0 0 6px;vertical-align:-8px}
:root.rd:not(.alive) .rd-chk.sm{display:none}
:root.rd.alive #view .rd-chk circle{fill:rgba(52,211,153,.14);stroke:#34D399;stroke-width:2;animation:alRing .35s cubic-bezier(.2,.8,.2,1) both}
:root.rd.alive #view .rd-chk path{stroke:#34D399;stroke-width:5.5}
:root.rd.alive #view .rd-chk .s1{stroke-dasharray:13;animation:alDraw1 .2s .2s cubic-bezier(.65,0,.35,1) both}
:root.rd.alive #view .rd-chk .s2{stroke-dasharray:26;animation:alDraw2 .35s .4s cubic-bezier(.65,0,.35,1) both}
:root.rd.alive #view .rd-chk .bu{display:inline;fill:none;stroke:rgba(52,211,153,.6);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:alBurst .9s .55s ease-out both}
:root.rd.alive #view .rd-fin .rd-dots i{border:1.5px solid rgba(238,243,250,.32)}
:root.rd.alive #view .rd-fin .rd-dots i.ok{background:#34D399;border-color:#34D399;box-shadow:0 0 10px rgba(52,211,153,.75)}
:root.rd.alive #view .rd-fin .rd-dots i.fill{background:#34D399;border-color:#34D399;box-shadow:0 0 12px rgba(52,211,153,.8);animation:alLight .4s .75s ease-out both}
:root.rd.alive #view .rd-fin-all{color:#34D399}
:root.rd.alive #view .rd-fin-b{animation:none}
/* motion: a frame screen slides in once, its first cards rise in a short stagger; the current node pulses */
.al-in{animation:alIn .22s cubic-bezier(.2,.8,.2,1) both}
.al-in>:nth-child(1){animation:alRise .4s cubic-bezier(.2,.8,.2,1) both}
.al-in>:nth-child(2){animation:alRise .4s .06s cubic-bezier(.2,.8,.2,1) both}
.al-in>:nth-child(3){animation:alRise .4s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes alIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes alRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes alPulse{0%{box-shadow:0 0 0 0 rgba(244,182,66,.55)}70%{box-shadow:0 0 0 10px rgba(244,182,66,0)}100%{box-shadow:0 0 0 0 rgba(244,182,66,0)}}
@keyframes alTw{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes alFlow{from{background-position:0 0}to{background-position:0 -40px}}
@keyframes alRing{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes alDraw1{from{stroke-dashoffset:13}to{stroke-dashoffset:0}}@keyframes alDraw2{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@keyframes alBurst{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.9);opacity:0}}
@keyframes alLight{0%{background:transparent;border-color:#F4B642;box-shadow:none}100%{background:#34D399;border-color:#34D399;box-shadow:0 0 12px rgba(52,211,153,.8)}}
:root.rd.alive #view .rd-chk circle{transform-box:fill-box;transform-origin:center}
/* the landing (BRIEF §6): the same navy frame; the stories block stays as built until HQ's new version */
:root.rd.alive #landing{background:radial-gradient(560px 520px at 100% -140px,rgba(244,182,66,.18),rgba(244,182,66,0) 70%),radial-gradient(520px 520px at 0 820px,rgba(52,211,153,.10),rgba(52,211,153,0) 70%),#0A1628;color:#EEF3FA}
:root.rd.alive #landing h1,:root.rd.alive #landing h2,:root.rd.alive #landing h3,:root.rd.alive #landing .brand b{font-family:var(--f-title);font-weight:700}
:root.rd.alive:not(.ad-land) #landing .l2-hero h1{font-size:clamp(40px,5.4vw,58px);line-height:1.22}
:root.rd.alive #landing .l2-hero h1 .hl{color:var(--ink)}:root.rd.alive:not(.ad-land) #landing .l2-hero h1 .hl{display:block}
:root.rd.alive #landing .l2-hero h1 .qed{display:none}
.al-100{color:#F4B642;text-shadow:0 0 18px rgba(244,182,66,.35);animation:alGlow 3.2s ease-in-out infinite}
:root.rd.alive #landing .kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:500;color:#D6DFEB}
:root.rd.alive #landing .kicker .live{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 8px rgba(52,211,153,.9)}
:root.rd.alive #landing .l2-line{color:#C9D4E3}
:root.rd.alive #landing .btn{background:var(--glass);border:1px solid var(--glass-b);color:var(--ink)}
:root.rd.alive #landing .btn.primary{background:#F4B642;border:1px solid transparent;color:#0A1628;font-family:var(--f-title);font-weight:700;box-shadow:0 12px 34px rgba(244,182,66,.32)}
:root.rd.alive:not(.ad-land) #landing .btn.big{min-height:56px;border-radius:18px;font-size:19px}
:root.rd.alive:not(.ad-land) #landing .l4-cta .btn{width:100%;max-width:440px}
:root.rd.alive #landing .l4-trust{color:#C9D4E3}
:root.rd.alive #landing .l4-trust svg{color:#34D399}
:root.rd.alive #landing .st-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:24px;box-shadow:none}
:root.rd.alive #landing .st-chips li{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
:root.rd.alive #landing .ch-tag{font-family:var(--f-title);font-weight:600;color:#F4B642;text-shadow:none}
:root.rd.alive #landing .st-chips li{opacity:1;transform:none;font-size:15px;font-weight:500;line-height:1.75;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:none;border:1px solid rgba(255,255,255,.10)}
:root.rd.alive:not(.ad-land) #landing .st-chips li{padding:12px 14px}
:root.rd.alive #landing .st-card.joined .st-chips{height:auto;overflow:visible;margin:14px 0 16px}
:root.rd.alive #landing .st-card.joined .st-chips li{opacity:1;transform:none}
.st-hl{padding:1px 0;border-radius:7px;transition:all .45s ease}
:root.rd.alive #landing .st-card.joined .st-hl{padding:1px 6px;background:rgba(244,182,66,.22);color:#FFD27A;box-shadow:0 0 14px rgba(244,182,66,.45),inset 0 -2px 0 #F4B642}
:root.rd.alive #landing #st-go{min-height:50px;border-radius:16px;background:rgba(244,182,66,.12);border:1px solid rgba(244,182,66,.55);color:#F4B642;font:700 17px var(--f-ui);box-shadow:none}
:root.rd.alive #landing .st-link{gap:8px;padding:14px;border-radius:16px;background:rgba(52,211,153,.10);border:1px solid rgba(52,211,153,.45)}
:root.rd.alive #landing .st-key{justify-self:start;padding:0;border:0;box-shadow:none;color:#34D399;font:700 20px var(--f-title)}
:root.rd.alive #landing .st-link p{font-size:15px;line-height:1.75;color:#E3EAF4}
:root.rd.alive #landing .st-link p~p,:root.rd.alive #landing .st-card .scanline{display:none}
:root.rd.alive #landing .st-note{margin-top:10px;font-size:13px;color:#A3B3C9} /* HQ: the honest note stays, quiet */
:root.rd.alive #landing .st-link .btn{min-height:48px;border-radius:14px;font-size:16px}
:root.rd.alive #landing .al-lmap{display:grid;gap:12px;margin-top:40px;padding:18px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
:root.rd.alive #landing .al-lmap h2{margin:0;font-size:18px;font-weight:600}
:root.rd.alive #landing .al-lmap p{margin:0;font-size:14px;line-height:1.7;color:#C9D4E3}
.al-ldots{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0}
.al-ldots i{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(238,243,250,.22);box-sizing:border-box;animation:alLit 6s ease-in-out infinite both}
:root.rd.alive #landing .l4-steps{gap:0}
:root.rd.alive #landing .l4-steps li{position:relative;grid-template-columns:30px 1fr;column-gap:14px;padding:0 0 18px;background:none;box-shadow:none;border-radius:0}
:root.rd.alive #landing .l4-steps .n{width:30px;height:30px;border-radius:50%;background:none;border:2.5px solid #F4B642;box-shadow:none;color:#F4B642;font-size:14px;font-weight:700}
:root.rd.alive #landing .l4-steps li:last-child .n{background:#34D399;border-color:#34D399;color:#0A1628;box-shadow:0 0 12px rgba(52,211,153,.7)}
:root.rd.alive #landing .l4-steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:13.5px;top:34px;bottom:4px;width:3px;border-radius:2px;background:linear-gradient(to bottom,rgba(244,182,66,.6),rgba(52,211,153,.6))}
:root.rd.alive #landing .l4-steps h3{font-size:17px;margin:2px 0 0}
:root.rd.alive #landing .l4-steps p{font-size:14px;line-height:1.7;color:#C9D4E3}
:root.rd.alive #landing .l2-end{margin-top:16px;padding:22px 18px;border-radius:24px;background:rgba(244,182,66,.08);border:1px solid rgba(244,182,66,.35)}
:root.rd.alive #landing .l2-end h2{font-size:22px;margin:0}
:root.rd.alive #landing .l2-end .btn{width:100%;max-width:420px}
.al-endp{margin:0;font-size:13px;color:#A3B3C9}
:root.rd.alive #landing .l2-faq details{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)}
:root.rd.alive #landing .l2-faq summary::after{color:#F4B642}
:root.rd.alive #landing .l2-sticky{background:rgba(10,22,40,.9)}
:root.rd:not(.alive) .al-lmap{display:none}
@keyframes alGlow{0%,100%{text-shadow:0 0 18px rgba(244,182,66,.35)}50%{text-shadow:0 0 28px rgba(244,182,66,.65)}}
@keyframes alLit{0%{background:transparent;border-color:rgba(238,243,250,.22);box-shadow:none}35%{background:#F4B642;border-color:#F4B642;box-shadow:0 0 10px rgba(244,182,66,.7)}60%,100%{background:#34D399;border-color:#34D399;box-shadow:0 0 10px rgba(52,211,153,.75)}}
@media (prefers-reduced-motion:reduce){.st-hl{transition:none!important}.al-100,.al-ldots i,.al-in,.al-in>*,.al-route .al-n.now,.al-d.s,:root.rd.alive #view .rd-journey>li.ok::after,:root.rd.alive #view .rd-jn.now .rd-node,:root.rd.alive #view .rd-chk circle,:root.rd.alive #view .rd-chk .bu,:root.rd.alive #view .rd-fin .rd-dots i.fill{animation:none!important}:root.rd.alive #view .rd-chk .s1,:root.rd.alive #view .rd-chk .s2{animation:none!important}}

/* «تحدّي الـ٣٣» (Abdullah's approved mockup, 2026-10-31): the main-page hero and the header pill, only with html.qs-on (build.js QS_ON_JS) */
.qs-pill,.qs-hero{display:none}
.qs-on .qs-pill{display:inline-flex}.qs-on .qs-hero{display:flex}.qs-on .qs-old{display:none}
body.focus .qs-pill,body.rd-learn .qs-pill{display:none!important}
.qs-pill{align-items:center;gap:6px;border:1.5px solid var(--now);background:var(--now-soft);color:var(--now-ink);border-radius:999px;padding:4px 11px;min-height:36px;font-family:var(--f-display);font-weight:700;font-size:13px;white-space:nowrap;cursor:pointer;flex:none}
.qs-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--now);animation:qsblink 1.6s ease-in-out infinite}
@keyframes qsblink{50%{opacity:.25}}
.qs-hero{flex-direction:column;gap:12px;border:2px solid var(--now);background:var(--panel);border-radius:18px;padding:18px;box-shadow:0 10px 30px -18px var(--glow)}
.qs-hero h1{margin:0}
.qs-eyebrow{font-size:13px;font-weight:600;color:var(--now-ink);letter-spacing:.3px}
.qs-score{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qs-score div{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.qs-score b{font-family:var(--f-display);font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.qs-score span{font-size:12px;color:var(--muted);line-height:1.35}
.qs-score .won{background:var(--now-soft);border-color:var(--now)}.qs-score .won b{color:var(--now-ink)}
.qs-hero .qs-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}.qs-hero .qs-ghost{width:100%;border-color:var(--line-2)}
@media (prefers-reduced-motion: reduce){.qs-pill .dot{animation:none}}


/* v2: no dotted background (page and app), one accent colour, gold only in the brand mark, more room, bigger text */
body::before{background:radial-gradient(70rem 34rem at 82% -14%,var(--halo),transparent 62%)}
.l2{max-width:1060px;margin:0 auto;padding-inline:20px}
.l2-head{display:flex;align-items:center;justify-content:space-between;padding-block:16px}
.l2-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:52px;align-items:center;padding-block:30px 64px}
@media (max-width:900px){.l2-hero{grid-template-columns:1fr;gap:40px;padding-block:18px 48px}}
.l2-hero h1{font:800 clamp(38px,6.2vw,64px)/1.15 var(--f-display);margin:0 0 18px}
.l2-hero h1 .hl{color:var(--accent)}
.l2-hero h1 .nb{white-space:nowrap}
.l2-line{font-size:clamp(18px,2.3vw,21px);line-height:1.8;color:var(--ink-2);margin:0 0 28px;max-width:30ch}
.l2-go{min-height:58px;padding:14px 30px;font-size:18px;border-radius:16px}
.l2-trust{margin-top:16px;font-size:14px;color:var(--muted);line-height:1.8}
.l2-demo-h{font:700 15px var(--f-display);color:var(--ink-2);margin:0 0 10px}
.l2-sec{padding-top:72px}
.l2-sec>h2{font-size:clamp(27px,3.6vw,38px);margin-bottom:10px}
.l2-sec>.sub{color:var(--muted);font-size:16.5px;line-height:1.85;margin-bottom:26px;max-width:58ch}
.l2-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.l2-step{padding:24px 22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.l2-step .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:800 16px var(--f-display);margin-bottom:12px}
.l2-step h3{font-size:21px;margin-bottom:8px}
.l2-step p{color:var(--muted);font-size:15.5px;line-height:1.85}
@media (max-width:760px){.l2-steps{grid-template-columns:1fr}.l2-step{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:18px}.l2-step .n{grid-row:span 2;margin:0}}
.l2-price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:640px}
.l2-plan{position:relative;padding:22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line-2);display:grid;gap:2px}
.l2-plan.best{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.l2-plan .tag{position:absolute;top:-12px;inset-inline-start:16px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;padding:3px 11px;border-radius:20px}
.l2-plan b{font:800 40px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.l2-plan span{color:var(--ink-2);font-weight:600}
.l2-small{font-size:13.5px;color:var(--muted);margin-top:14px}
.l2-trustpay{color:var(--ink);font-weight:700;font-size:15px}
.l2-pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.l2-pay[hidden]{display:none}
.l2-pay span{border:1px solid var(--line-2);border-radius:8px;padding:2px 10px;font-size:12.5px;font-weight:600;color:var(--ink-2);unicode-bidi:isolate}
@media (max-width:480px){.l2-price{grid-template-columns:1fr}}
.l2-price.one{grid-template-columns:1fr;max-width:460px}.l2-plan.free b{font-size:30px}
.l2-faq{display:grid;gap:10px;max-width:760px}
.l2-faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding-inline:18px}
.l2-faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:16px;padding-block:16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.l2-faq summary::-webkit-details-marker{display:none}
.l2-faq summary::after{content:"+";font:700 22px/1 var(--f-display);color:var(--accent);flex:none}
.l2-faq details[open] summary::after{content:"−"}
.l2-faq details p{padding-bottom:16px;color:var(--ink-2);line-height:1.9}
.l2-end{display:grid;justify-items:center;gap:14px;text-align:center;padding-top:64px}
.l2-end h2{font-size:clamp(25px,3.2vw,34px)}
.l2-foot{margin-top:64px;padding-block:26px 34px;border-top:1px solid var(--line);display:grid;gap:8px;color:var(--muted);font-size:13px}

/* the 5-second challenge (the same question as the «٥ ثواني» TikTok ad) */
.ch-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ch-tag{font:800 18px var(--f-display);color:var(--proof);text-shadow:0 0 18px var(--proof-soft)}
.ch-ring{position:relative;width:58px;height:58px;flex:none}
.ch-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ch-ring circle{fill:none;stroke-width:5}
.ch-ring .bg{stroke:var(--panel-2)}
.ch-ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:0;filter:drop-shadow(0 0 6px var(--glow))}
.ch.running .ch-ring .fg{transition:stroke-dashoffset 5s linear;stroke-dashoffset:176}
.ch.low .ch-ring .fg{stroke:var(--warn);filter:drop-shadow(0 0 6px var(--warn))}
.ch-ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 23px var(--f-display);font-variant-numeric:tabular-nums}
.ch .opt.ok{box-shadow:0 0 0 4px var(--good-soft),0 0 26px -4px var(--good)}
.ch-out{display:grid;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2)}
.ch-proof{color:var(--ink-2);line-height:1.9;font-size:15.5px}.ch-proof .trap{color:var(--warn)}
.l2-cta{display:grid;gap:10px;justify-items:start;margin-top:4px}
.l2-hero{grid-template-areas:"t c" "a c";align-items:start}
.l2-htext{grid-area:t;align-self:end}.l2-hero > #ch{grid-area:c}.l2-hero > .l2-cta{grid-area:a;align-self:start}
@media (max-width:900px){.l2-hero{grid-template-areas:"t" "c" "a";gap:22px}.l2-hero .l2-line{margin-bottom:0}.l2-cta{justify-items:stretch}.l2-cta .btn{width:100%}}
/* inside Burhan: 3 real app screens (the app's own markup and styles with a sample student), swipeable on phones.
   The frame scales a phone-width copy (desktop-width on big screens) to fit; the landing script sets --s. */
.l3-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.l3-card{display:flex;align-items:flex-start;gap:14px;padding:18px;border-radius:20px;background:var(--panel);box-shadow:0 1px 0 rgba(11,27,51,.05),0 18px 36px -26px rgba(11,27,51,.55)}
.l3-card .ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--proof-soft);color:var(--ink)}.l3-card .ic svg{width:22px;height:22px}
.l3-card h3{margin:0 0 4px;font:700 18px/1.35 var(--f-display)}.l3-card p{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink-2)}
@media (max-width:640px){.l3-why{grid-template-columns:1fr}}
.peek .gsheet.gs-static{position:relative;left:auto;bottom:auto;z-index:2;width:auto;max-height:none;overflow:visible;margin-top:-118px;transform:none;visibility:visible;transition:none}
.peek-f:not(.play) .gr-val,.peek-f:not(.play) .m-val,.peek-f:not(.play) .btn.big.primary::after,.peek-f:not(.play) .gmedal .core svg{animation-play-state:paused}
.l2-peek{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.peek{margin:0;display:grid;gap:10px;align-content:start}
.peek-f{position:relative;height:340px;overflow:hidden;border-radius:24px;border:1px solid var(--line-2);background:var(--bg);box-shadow:0 18px 44px -26px var(--glow)}
.peek-f::after{content:"";position:absolute;inset-inline:0;bottom:0;height:56px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.peek-in{position:absolute;top:14px;left:50%;width:375px;transform:translateX(-50%) scale(var(--s,.6));transform-origin:top center;pointer-events:none}
.peek .opts{grid-template-columns:repeat(2,minmax(0,1fr))} /* short options side by side (the app's wide layout), so البرهان fits in the frame */
.peek figcaption{text-align:center;font-weight:700;font-size:15px;color:var(--ink-2)}
@media (max-width:760px){
  .l2-peek{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-20px;padding:2px 20px 6px;scrollbar-width:none}
  .l2-peek::-webkit-scrollbar{display:none}
  .peek{flex:0 0 74%;scroll-snap-align:center}
  .peek-f{height:390px}
}
/* phones: a slim start bar whenever the hero button is off screen (not near the closing button or the footer) */
.l2-sticky{position:fixed;inset-inline:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
.l2-sticky.on{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
.l2-sticky .btn{width:100%;min-height:50px;font-size:16.5px}
@media (min-width:901px){.l2-sticky{display:none}}
/* phones: less empty space between sections */
@media (max-width:760px){
  .l2-head{padding-block:10px}
  .l2-hero{padding-block:4px 30px;gap:16px}
  .l2-hero h1{font-size:35px;margin-bottom:10px}
  .l2-line{font-size:17.5px;line-height:1.7}
  .l2-trust{margin-top:10px}
  .l2-sec{padding-top:44px}
  .l2-sec>h2{margin-bottom:12px}
  .l2-sec>.sub{margin-bottom:18px}
  .l2-step{padding:16px}
  .l2-end{padding-top:44px}
  .l2-foot{margin-top:44px}
}
@media (prefers-reduced-motion:no-preference){
  .peek-f:not(.play) .ring-fg,.peek-f:not(.play) .bar i{opacity:0}
  .peek-f.play .ring-fg{animation:fill 1.1s .15s cubic-bezier(.2,.8,.2,1) both}
  .peek-f.play .bar i{animation:grow .9s .3s cubic-bezier(.2,.8,.2,1) both}
  .l2-cta.nudge .btn{animation:l2nudge 1.3s ease-out 1}
  @keyframes l2nudge{30%{box-shadow:0 0 0 6px var(--accent-soft),0 0 34px -4px var(--glow)}}
  .l2-cta.show,.ch-out.show{animation:l2rise .45s cubic-bezier(.2,.8,.2,1) both}
  .ch .opt.no.shake{animation:l2shake .42s}
  @keyframes l2rise{from{opacity:0;transform:translateY(12px)}}
  @keyframes l2shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
}
/* v4 «مهارات» (HQ 2026-10-20, notes/landing_skills_copy_2026-10-20.md): the stories demo, five steps, three honest states, the real app peek */
.l4-lead{max-width:44ch}
.l4-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.l4-trust{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:16px 0 0;font-size:14px;color:var(--muted)}
.l4-trust li{display:inline-flex;align-items:center;gap:6px}.l4-trust svg{width:16px;height:16px;color:var(--good)}
.l4-why{flex-direction:column;gap:10px;margin:4px 0 0;font-size:16px;line-height:1.7;color:var(--ink-2)}.l4-why li{align-items:flex-start}.l4-why svg{flex:none;margin-top:5px}
.st-card{position:relative;overflow:hidden}
.st-chips{display:grid;gap:8px;margin:14px 0 16px;list-style:none;padding:0}
.st-chips li{padding:11px 14px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:700;line-height:1.6;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.st-card.joined .st-chips li{opacity:0;transform:translateY(calc(var(--k) * -14px)) scale(.92)}
.st-card.joined .st-chips{height:0;margin:0;overflow:hidden;transition:height .3s .45s}
.st-link{display:none;gap:10px}
.st-card.joined .st-link{display:grid;animation:kxIn4 .5s .35s cubic-bezier(.2,.8,.2,1) both}
.st-key{justify-self:start;padding:10px 18px;border-radius:16px;border:2px solid var(--proof);box-shadow:0 0 22px var(--proof-soft);font:800 20px var(--f-display)}
.st-link p{margin:0;line-height:1.85}
.st-note{font-size:13px;color:var(--muted);margin-top:10px}
@keyframes kxIn4{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.st-chips li,.st-card.joined .st-link,.st-card.joined .st-chips{transition:none;animation:none}}
.l4-steps{display:grid;gap:12px;list-style:none;padding:0;margin:0;counter-reset:s}
.l4-steps li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:16px 18px;border-radius:20px;background:var(--panel);box-shadow:0 1px 0 rgba(11,27,51,.05),0 18px 36px -26px rgba(11,27,51,.55)}
.l4-steps .n{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:800}
.l4-steps h3{margin:0;font-size:18px}.l4-steps p{margin:0;color:var(--ink-2);line-height:1.8}
.l4-states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:700px){.l4-states{grid-template-columns:1fr}}
.l4-state{display:grid;gap:6px;padding:16px 18px;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2)}
.l4-state b{display:inline-flex;align-items:center;gap:8px;font-size:18px}.l4-state b svg{width:20px;height:20px}
.l4-state p{margin:0;color:var(--ink-2);line-height:1.8}
.l4-state.s1 b svg{color:var(--muted)}.l4-state.s2 b svg{color:var(--good)}.l4-state.s3 b svg{color:var(--proof)}
.l4-peek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:700px){.l4-peek{grid-template-columns:1fr}}
.l4-panel{padding:16px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;gap:10px}
.l4-tile{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.l4-tile b{font-size:15px}.l4-tile small{font-weight:700;color:var(--muted)}.l4-tile.done small{color:var(--good)}
.l4-row{display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);line-height:1.8}
.l4-row .chip{justify-self:start;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1px var(--line-2)}
.l4-cap{font-size:13px;color:var(--muted);margin:10px 0 0}
.l4-band{padding:22px;border-radius:24px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;gap:8px}
.l4-band h2{margin:0}.l4-band p{margin:0;color:var(--ink-2);line-height:1.85;max-width:60ch}

/* Original keys.js CSS (unchanged). */

.kx{--kx-gold:var(--proof,#F7C948);--kx-gold-soft:var(--proof-soft,rgba(247,201,72,.16));gap:14px}
.kx .kx-ico{width:1.15em;height:1.15em;vertical-align:-.2em}
.kx-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kx-dots{display:flex;gap:6px}.kx-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2,#2C3C5E)}.kx-dots i.d{background:var(--accent)}.kx-dots i.n{background:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.kx-eyebrow{margin:0;font-size:13px;font-weight:800;letter-spacing:.2px;color:var(--muted)}
.kx-chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;justify-self:start;width:max-content;max-width:100%;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:800;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.kx-h{margin:0;font-size:24px;line-height:1.35}
.kx-lead{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2)}
.kx-note{margin:0;font-size:13.5px;color:var(--muted)}
.kx-report{justify-self:start;align-self:flex-start;min-height:40px;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.kx-stem{font-size:17px;line-height:1.75;font-weight:600}
.kx-pass{padding:10px 12px;border-radius:12px;background:var(--panel-2);font-size:15.5px;line-height:1.85;max-height:44vh;overflow:auto}.kx-pass .lp-table{border-collapse:collapse;margin:8px auto;min-width:60%;white-space:normal;font-size:15px}.kx-pass .lp-table th,.kx-pass .lp-table td{border:1px solid var(--line-2);padding:6px 10px;text-align:center}.kx-pass .lp-table thead th{background:var(--panel)}
.kx-opts{display:grid;gap:8px}
.kx-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:13px 14px;border-radius:14px;border:0;background:var(--panel-2);box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.kx-opt:active{transform:scale(.99)}
.kx-opt .b{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:13px}
.kx-opt.ok{box-shadow:inset 0 0 0 2px #3DBE8B}.kx-opt.no{box-shadow:inset 0 0 0 2px #E0705A}.kx-opt[disabled]{cursor:default}
.kx-opt.locked{box-shadow:inset 0 0 0 2px var(--accent)}
.kx-timer{height:6px;border-radius:99px;background:var(--line,#1D2942);overflow:hidden}.kx-timer i{display:block;height:100%;width:100%;background:var(--accent);transition:width .25s linear}
.kx-timer.late i{background:var(--muted)}
.kx-late{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.kx-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kx-skip{align-self:center}
/* the map */
.kx-hero{position:relative;overflow:hidden;padding:18px;border-radius:20px;background:linear-gradient(135deg,var(--accent-soft),transparent 70%),var(--panel);box-shadow:inset 0 0 0 1px var(--line-2)}
.kx-sec{display:grid;gap:8px}.kx-sec h3{margin:6px 2px 0;font-size:15px;color:var(--muted)}
.kx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.kx-tile{display:grid;gap:6px;align-content:start;min-height:92px;padding:12px;border-radius:16px;border:0;text-align:start;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:inherit;cursor:pointer}
.kx-tile b{font-size:15px;line-height:1.45}.kx-tile small{font-size:12.5px;font-weight:700;color:var(--muted)}
.kx-tile .kx-nm{font-size:11.5px;font-weight:700;color:var(--muted)}
.kx-tile .w{display:flex;gap:3px}.kx-tile .w i,.kx-legend .w i{width:14px;height:4px;border-radius:2px;background:var(--line-2)}.kx-tile .w i.on,.kx-legend .w i.on{background:var(--accent)}.kx-legend{margin:0;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.kx-legend .w{display:inline-flex;gap:3px}.kx-legend span{display:inline-flex;align-items:center;gap:6px}.kx-legend .kx-lg{gap:8px;white-space:nowrap}
.kx-tile.go{box-shadow:inset 0 0 0 1.5px var(--accent)}.kx-tile.done small{color:#3DBE8B}
.kx-tile.par{background:linear-gradient(160deg,var(--kx-gold-soft),transparent 75%),var(--panel)}
/* the reveal: the moment */
.kx-rv{gap:16px;text-align:center}
.kx-score{margin:0 auto;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:800;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.kx-rv .kx-h{font-size:26px}
.kx-five{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 0}
.kx-face{display:grid;gap:2px;min-width:92px;max-width:150px;padding:9px 10px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;font-weight:800;line-height:1.45;animation:kxIn .5s cubic-bezier(.2,.8,.2,1) both}
.kx-face small{font-weight:700;color:var(--muted)}.kx-face.ok small{color:#3DBE8B}.kx-face.no small{color:#E0705A}
.kx-ops{display:grid;gap:10px;text-align:start}.kx-op{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);animation:kxIn .5s cubic-bezier(.2,.8,.2,1) both}.kx-oph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}.kx-oph small{font-weight:800}.kx-op.ok .kx-oph small{color:#3DBE8B}.kx-op.no .kx-oph small{color:#E0705A}.kx-opn{margin:0;font-size:14px}.kx-opq{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink)}
.kx-arrow{font-size:22px;color:var(--muted);animation:kxIn .5s .95s both}
.kx-key{justify-self:center;display:inline-flex;align-items:center;gap:10px;margin:0 auto;padding:13px 20px;border-radius:18px;background:linear-gradient(135deg,#FCDD72,#EBA93A);color:#2a1d00;font-size:20px;font-weight:900;box-shadow:0 12px 32px -12px rgba(235,169,58,.85);animation:kxPop .6s 1.15s cubic-bezier(.2,1.4,.3,1) both,kxGlow 1.6s 1.8s ease-out 1}
.kx-pair{display:grid;gap:8px;text-align:start}
.kx-same{justify-self:center;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,#FCDD72,#EBA93A);color:#2a1d00;font-size:13px;font-weight:900;animation:kxIn .5s 1.6s both}
@media (min-width:720px){.kx-pair{grid-template-columns:1fr auto 1fr;align-items:center}}
.kx-pc{display:grid;gap:8px;align-content:start;padding:12px;border-radius:16px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);animation:kxIn .5s 1.5s both}
.kx-pc+.kx-pc{animation-delay:1.7s}
.kx-pc .kx-stem{font-size:15px;line-height:1.7}
.kx-mask .kx-ico{color:#B07A12;margin-inline-end:4px}
.kx-mask{margin:0;padding:8px 10px;border-radius:12px;background:var(--kx-gold-soft);box-shadow:inset 0 0 0 1px var(--kx-gold);font-size:14.5px;font-weight:800;line-height:1.6}
.kx-eq{padding:14px;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--kx-gold);font-size:20px;font-weight:800;line-height:1.8;animation:kxIn .5s 1.9s both}
.kx-close{margin:0;font-size:15.5px;line-height:1.8;color:var(--ink-2);animation:kxIn .5s 2.05s both}
.kx-more summary{cursor:pointer;font-weight:700;color:var(--accent,inherit)}.kx-more[open] summary{margin-bottom:8px}.kx-more p{margin:6px 0}.kx-card{display:grid;gap:10px;padding:16px;border-radius:18px;text-align:start;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2)}
.kx-card h3{margin:0;font-size:18px}.kx-card ul{margin:0;padding-inline-start:20px;display:grid;gap:6px;line-height:1.7}
.kx-cue{margin:0;padding:10px 12px;border-radius:12px;background:var(--accent-soft);line-height:1.7}
.kx-traps li b{color:#E0705A}
@keyframes kxIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes kxGlow{0%{box-shadow:0 0 0 0 rgba(235,169,58,.7),0 12px 32px -12px rgba(235,169,58,.85)}100%{box-shadow:0 0 0 22px rgba(235,169,58,0),0 12px 32px -12px rgba(235,169,58,.85)}}
@keyframes kxPop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
.kx-rows{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px;text-align:start}.kx-rows li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:12px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2);min-width:0}.kx-rows .t{min-width:0;overflow-wrap:anywhere;font-weight:700}.kx-rows .m{flex:none;font-size:13.5px;font-weight:800;white-space:nowrap}.kx-rows .ok .m{color:var(--good)}.kx-rows .no .m{color:var(--bad,#b4441f)}.kx-rows .sk .m{color:var(--muted)}.kx-link{display:grid;justify-items:center;gap:10px}.kx-gchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-height:160px;overflow:hidden;animation:kxCollapse .45s ease 1.55s forwards}.kx-gchips .kx-chip{align-self:center;animation:kxGather .7s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(.45s + var(--k) * .12s)}.kx-gold{display:inline-flex;align-items:center;padding:6px 16px;border-radius:999px;font-weight:800;font-size:16px;color:var(--ink);background:var(--proof-soft,rgba(247,201,72,.16));box-shadow:inset 0 0 0 2px var(--proof,#C98A12);animation:kxGold .55s cubic-bezier(.2,.9,.25,1.12) 1.25s both}@keyframes kxGather{to{opacity:0;transform:translateY(26px) scale(.55)}}@keyframes kxCollapse{to{max-height:0;opacity:0;margin:0}}@keyframes kxGold{from{opacity:0;transform:scale(.7)}}@media (prefers-reduced-motion:reduce){.kx *{animation:none!important;transition:none!important}}
/* part 2: drill, practice, key home */
.kx-brs{margin:0;padding:0;list-style:none;display:grid;gap:6px}.kx-brs li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--panel-2)}
.kx-brs li small{flex:none;font-weight:800;font-size:12.5px}.kx-brs li.ready small{color:#3DBE8B}.kx-brs li.needs small{color:#E0705A}.kx-brs li.some small{color:var(--muted)}
.kx-state{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;justify-self:start;padding:5px 12px;border-radius:999px;font-weight:900;font-size:14px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.kx-state.ready{background:rgba(61,190,139,.14);box-shadow:inset 0 0 0 1.5px #3DBE8B}
.kx-q .stem,.kx-q .kx-stem{font-size:17px;line-height:1.75}.kx-q .figwrap svg{max-width:100%;height:auto}
.kx-hcue{display:grid;gap:4px;padding:12px;border-radius:14px;background:var(--panel-2);line-height:1.75}.kx-hcue p{margin:0}
.kx-sol{display:grid;gap:6px;padding:12px;border-radius:14px;background:var(--panel-2);line-height:1.75}.kx-sol ol{margin:0;padding-inline-start:20px;list-style:arabic-indic}
/* a miss */
.kx-pick{display:grid;gap:6px}.kx-pick p{margin:0;line-height:1.7}
.kx-fb{margin:0;padding:9px 12px;border-radius:12px;line-height:1.7;font-weight:700}.kx-fb.no{background:rgba(224,112,90,.12)}.kx-fb.ok{background:rgba(61,190,139,.12)}
body.focus.kx-test .ba-header{display:none!important}.kx-more-dots{position:relative;margin-inline-start:auto}.kx-more-dots>summary{list-style:none;cursor:pointer;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:12px;font-size:22px;line-height:1;color:var(--muted)}.kx-more-dots>summary::-webkit-details-marker{display:none}.kx-more-list{position:absolute;inset-inline-end:0;top:46px;z-index:20;display:grid;gap:4px;min-width:200px;padding:8px;border-radius:14px;background:var(--panel);box-shadow:0 12px 30px -12px rgba(0,0,0,.45),inset 0 0 0 1px var(--line-2)}.kx-more-list .linkbtn{justify-content:flex-start;text-align:start;padding:10px 12px;min-height:44px}
.kx-ex{display:grid;gap:6px;padding:12px;border-radius:14px;background:var(--panel-2)}.kx-ex p{margin:0;line-height:1.75}.kx-ex .rec{font-weight:800}
.kx-done{display:grid;gap:8px}.kx-done li{line-height:1.7}

/* idea sessions (Q17 preview, HQ 2026-10-26) */
.kx-smap-tag{display:inline-block;margin-top:2px;font-weight:700;color:var(--accent)}.kx-smap-row.done .kx-smap-tag{color:var(--good)}
.kx-opt.valid{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.kx-fb.kx-fb-valid{color:var(--ink);font-weight:600}
.kx-shint{margin:0;padding:8px 12px;border-radius:12px;background:var(--accent-soft);font-weight:600}
.kx-draw{display:grid;gap:6px}.kx-draw .kx-note{margin:0;font-weight:600}.kx-sol .kx-draw{margin-top:10px}
.kx-sfb{display:grid;gap:8px;margin-top:4px}.kx-sfb .btn.big{width:100%}.kx-sdone{color:var(--good)}
.kx-ssee svg{overflow:visible}.kx-slabels{min-height:1.4em}.kx-slabels .tf-label{text-align:center;font-weight:700;margin:2px 0}
.kx-srule{gap:6px}.kx-srule p{margin:0}.kx-stip{display:flex;gap:8px;align-items:baseline;padding:9px 12px;border-radius:12px;border-inline-start:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}.kx-stip b{color:var(--accent);white-space:nowrap}
.kx-smap{list-style:none;margin:0;padding:0;display:grid;gap:8px}.kx-smap-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}.kx-smap-row small{display:block;color:var(--muted);font-size:13px}
.kx-smap-row.here{box-shadow:inset 0 0 0 2px var(--accent)}.kx-smap-row.done .kx-smap-mark{color:var(--good)}.kx-smap-mark{margin-inline-start:auto;font-weight:700}.kx-smap-fig{flex:0 0 64px}.kx-smap-fig svg{max-width:64px;height:auto}.kx-smap.mini .kx-smap-row{padding:6px 10px}
#view .rd-voc{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:0;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:600;text-align:start;cursor:pointer}
#view .rd-voc i{font-style:normal;color:var(--ink-2,var(--muted));font-size:18px}#view .rd-voc:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rd-voc-top{justify-content:space-between}.rd-voc-w{margin:4px 0 6px;text-align:center;font:800 34px/1.5 var(--f-display,inherit);color:var(--ink)}
.rd-voc-s .kx-opt.ok::after,.rd-voc-s .kx-opt.no::after{margin-inline-start:auto;font-weight:800}.rd-voc-s .kx-opt.ok::after{content:'✓';color:#3DBE8B}.rd-voc-s .kx-opt.no::after{content:'✗';color:#E0705A}
.rd-voc-fb{display:grid;gap:6px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 9%,transparent)}.rd-voc-fb p{margin:0;line-height:1.75}.rd-voc-an span{unicode-bidi:plaintext}

/* Flow-only integration helpers: no replacement palette, typeface, button or layout system. */
.mastery-native .math{direction:rtl;unicode-bidi:isolate;display:inline-block;white-space:nowrap;max-width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;vertical-align:middle;padding-block:.25em;overscroll-behavior-x:contain;scrollbar-width:thin;line-height:1.55}
.mastery-native :is(.math-row,.math-product,.math-signed,.math-postfix,.math-group,.math-coordinate,.math-mixed,.math-radical){display:inline-flex;direction:rtl;unicode-bidi:isolate;align-items:center;white-space:nowrap;vertical-align:middle}
.mastery-native .math-number{direction:ltr;unicode-bidi:isolate;display:inline-block;font-variant-numeric:tabular-nums}
.mastery-native .math-identifier{unicode-bidi:isolate;display:inline-block}
.mastery-native :is(.math-operator,.math-sign,.math-separator){white-space:pre;unicode-bidi:isolate;display:inline-block}
.mastery-native .math-bracket{direction:rtl;unicode-bidi:isolate;display:inline-block}
.mastery-native .math-space{white-space:pre;min-width:.15em}
.mastery-native .math-power{display:inline-flex;direction:rtl;unicode-bidi:isolate;align-items:baseline;white-space:nowrap;vertical-align:baseline}
.mastery-native .math .math-exponent{display:inline-block;direction:rtl;unicode-bidi:isolate;font-size:.72em;line-height:1.15;position:relative;top:-.5em;vertical-align:baseline;margin-inline-start:.06em}
.mastery-native .math .math-subscript{display:inline-block;direction:rtl;unicode-bidi:isolate;font-size:.72em;line-height:1.15;position:relative;top:.28em;vertical-align:baseline}
.mastery-native .math-fraction{display:inline-flex;flex-direction:column;direction:rtl;unicode-bidi:isolate;align-items:stretch;text-align:center;vertical-align:middle;margin-inline:.12em;line-height:1.3}
.mastery-native :is(.math-numerator,.math-denominator){display:block;min-width:.75em;padding:.05em .16em}
.mastery-native .math-fraction-bar{display:block;border-top:1px solid currentColor;margin-block:.05em}
.mastery-native .math-fraction .math-fraction{font-size:.9em}
.mastery-native .math-radicand{display:inline-block;border-top:1px solid currentColor;padding-inline:.08em;padding-top:.02em}
.mastery-native .math-radical{align-items:stretch}
/* A scalable hook joins the overbar at its exact edge; font glyph ascenders
   otherwise leave a gap, especially for nested roots and tall fractions. The
   original radical character remains in the semantic/accessible formula. */
.mastery-native .math-radical-sign{display:inline-block;position:relative;align-self:stretch;flex:0 0 .65em;width:.65em;visibility:hidden;transform:none}
.mastery-native .math-radical-sign::before{content:"";visibility:visible;position:absolute;inset:0;background:currentColor;clip-path:polygon(0 0,8% 0,58% 88%,74% 62%,100% 62%,100% 70%,82% 70%,59% 100%)}
.mastery-native .math .math-radical-index{display:inline-block;font-size:.65em;line-height:1;align-self:flex-start;position:relative;top:-.05em;margin-inline-end:-.1em}
.mastery-native .math-line-break{display:block}
.mastery-native [data-mock-clock],.mastery-native [data-timer]{direction:ltr;unicode-bidi:isolate;display:inline-block;font-variant-numeric:tabular-nums}
.mastery-native .math-scroll-hint{display:block;margin-block:4px 0;font-size:13px;line-height:1.6;direction:rtl;unicode-bidi:normal;white-space:normal}
.mastery-native .math[data-math-scrollable]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mastery-native .geometry-label{direction:rtl;unicode-bidi:isolate;display:inline-flex;align-items:baseline;white-space:nowrap}
.mastery-native .geometry-angle{align-items:center}
.mastery-native .geometry-angle-symbol{display:inline-block;font-family:Arial,"DejaVu Sans",sans-serif;font-size:1.3em;font-weight:700;line-height:1;min-inline-size:.7em;text-align:center}
.mastery-native .geometry-point{display:inline-block}
.mastery-native .geometry-gap{display:inline-block;min-width:.18em}
.mastery-native .geometry-equality{display:inline-flex;flex-wrap:nowrap;align-items:baseline;gap:.25em;direction:rtl}
.mastery-native .geometry-equality .equality-sign{direction:ltr}
.mastery-native .figure{margin:0;min-width:0}.mastery-native .figure img{display:block;max-width:100%;height:auto;margin-inline:auto}
.mastery-native .figure details{font-size:13px;margin-top:8px}.mastery-native .figure-zoom{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
/* Constrain existing single-column grids so long formulas scroll within
   their text column instead of enlarging cards, options or feedback. */
.mastery-native .kx-q,.mastery-native .kx-opts,.mastery-native .kx-sol{grid-template-columns:minmax(0,1fr)}
.mastery-native .question>*,.mastery-native .reason-panel>*{min-width:0}.mastery-native .question p{margin:0}
.mastery-native .kx-opt>span:last-child{min-width:0;overflow-wrap:anywhere}.mastery-native .kx-opt p{margin:0}
.mastery-native .question .selected-answer{gap:4px}.mastery-native .between{justify-content:space-between}
.mastery-native .answer-actions .btn.primary{flex:1;min-width:120px}.mastery-native .answer-actions .btn{min-height:48px}
.mastery-native .reason-panel h2{font-size:22px}.mastery-native .feedback h1{font-size:24px}.mastery-native .feedback h2{font-size:18px}
.mastery-native .feedback .distractor{display:grid;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.mastery-native .feedback .distractor h3{font-size:16px}.mastery-native .rule{font-weight:700}
.mastery-native .question-return[open]{display:grid;gap:12px}
.mastery-native .network-notice{position:sticky;top:0;z-index:80;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);font-size:14px}
.mastery-native .network-notice .btn{min-height:44px}.mastery-native .network-notice:not([hidden]){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mastery-native .mastery-skip:focus{position:fixed;top:8px;inset-inline-start:8px;width:auto;height:auto;clip:auto;padding:10px;background:var(--panel);z-index:1000}

/* v3.2: original storage-note dimensions; comparison columns retain the original .cmp palette/type. */
.mastery-native .st-warn{margin:10px auto 0;max-width:620px;width:calc(100% - 32px);box-sizing:border-box}
.mastery-native .cmp td{overflow-wrap:anywhere}
.mastery-native .figure-viewer{width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;color:var(--ink);margin:auto}
.mastery-native .figure-viewer:not([open]){display:none}
.mastery-native .figure-viewer::backdrop{background:var(--scrim)}