.ug{--bg:#b6e5eb;--paper:#fbfeff;--tint:#e9f6f8;--line:#c3dde2;--ink:#0f2a30;--soft:#36525a;
  --nile:#0f3b45;--nile2:#1b5562;--acc:#b8400f;--acc2:#93320b;--r:16px;--rs:11px;
  --disp:'Qahiri','Fustat',sans-serif;--ui:'Fustat','IBM Plex Sans Arabic',system-ui,sans-serif;
  min-height:100vh;color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:clip;
  background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%230f3b45%22%20stroke-opacity%3D%22.05%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.28%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%221.4%22%20fill%3D%22%230f3b45%22%20fill-opacity%3D%22.06%22%2F%3E%3C%2Fsvg%3E");background-size:44px 44px}
.ug *{box-sizing:border-box}
.ug :where(a){color:inherit;text-decoration:none}
.ug :where(button,input,select){font:inherit;color:inherit}
.ug :where(button){cursor:pointer}
.ug :focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.ug-wrap{max-width:1320px;margin-inline:auto;padding-inline:16px}
@media (min-width:1800px){.ug-wrap{max-width:1580px}}
.ug-n{font-variant-numeric:tabular-nums}

/* header: brand row on paper, then the nile nav band */
.ug-top{background:var(--paper);border-bottom:1px solid var(--line)}
.ug-brand{display:flex;align-items:center;gap:12px;min-height:74px;padding-block:6px}
.ug-logo{display:flex;align-items:center;gap:10px;min-width:0}
.ug-mark{flex:none;position:relative;width:48px;height:48px;border-radius:50%;background:repeating-radial-gradient(circle,#123842 0 1.6px,#1d4b56 1.6px 3.2px);box-shadow:0 2px 6px rgba(15,59,69,.25)}
.ug-mark span{position:absolute;inset:13px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-family:var(--ui);font-weight:800;font-size:13px;line-height:1;padding-bottom:.1em}
.ug-lt{margin:0;font-family:var(--disp);font-weight:400;font-size:58px;line-height:1.3;padding-top:.08em;color:var(--nile);white-space:nowrap}
.ug-tld{color:var(--acc)}
.ug-chips{display:flex;gap:8px;align-items:center;margin-inline-start:auto;flex-wrap:wrap;justify-content:flex-end}
.ug-idn{font-size:12.5px;font-weight:600;color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap;background:#fff}
.ug-sale{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--acc);color:#fff;white-space:nowrap}
.ug-sale i{width:7px;height:7px;border-radius:50%;background:#fff}
.ug-nav{background:var(--nile)}
.ug-nav .ug-wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.ug-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;color:#d5ecf0;font-weight:700;font-size:14.5px;border-bottom:3px solid transparent;text-align:center;line-height:1.3}
.ug-nav a:hover{color:#fff}
.ug-nav a[aria-current]{color:#fff;border-bottom-color:#ff9b6e}

/* section heads + boxes */
.ug-sec{margin-top:30px}
.ug-sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.ug-sh h2{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(27px,2.5vw,38px);line-height:1.45;color:var(--nile)}
.ug-sh p{margin:0;font-size:15px;font-weight:600;color:var(--ink);opacity:.88}
.ug-sh a{text-decoration:underline;text-underline-offset:3px}
.ug-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.ug-crumb{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none;font-size:13.5px;font-weight:600;color:var(--soft)}
.ug-crumb li+li::before{content:"‹";margin-inline-end:6px}
.ug-crumb a{text-decoration:underline;text-underline-offset:3px}

/* the dial (client island) */
.ug-dial{margin-top:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-width:0}
.ug-dh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 2px 8px}
.ug-dh h2{margin:0;font-family:var(--disp);font-weight:400;font-size:26px;line-height:1.45;color:var(--nile)}
.ug-dh small{font-size:13px;font-weight:600;color:var(--soft)}
.ug-ctl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center}
.ug-year{display:flex;align-items:center;gap:6px}
.ug-year output{font-size:40px;font-weight:800;line-height:1;color:var(--acc);font-variant-numeric:tabular-nums;min-width:3.1ch;text-align:center}
.ug-step{min-width:40px;height:38px;padding:0 8px;border-radius:999px;border:1.5px solid var(--nile);background:#fff;font-weight:800;font-size:14px;line-height:1;display:grid;place-items:center;color:var(--nile);direction:ltr;font-variant-numeric:tabular-nums}
.ug-step:hover{background:var(--tint)}
.ug-range{width:100%;accent-color:var(--acc);height:30px;margin:0}
.ug-roles{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1.5px solid var(--nile);border-radius:var(--rs);overflow:hidden;background:#fff}
.ug-roles button{min-height:38px;border:0;background:transparent;font-weight:700;font-size:14px;padding:0 6px}
.ug-roles button+button{border-inline-start:1px solid var(--line)}
.ug-roles button[aria-pressed=true]{background:var(--nile);color:#fff}
.ug-sum{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.ug-sum li{background:var(--tint);border-radius:var(--rs);padding:6px 8px;text-align:center;font-size:12.5px;font-weight:700;color:var(--soft);line-height:1.35}
.ug-sum b{display:block;font-size:22px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.ug-sum li.on b{color:var(--acc)}
.ug-chart{position:relative;margin-top:10px;--nm:118px}
@media (min-width:700px){.ug-chart{--nm:170px}}
.ug-axis{display:grid;grid-template-columns:var(--nm) minmax(0,1fr);gap:8px;font-size:11.5px;font-weight:700;color:var(--soft)}
.ug-axis div{position:relative;height:18px}
.ug-axis em{display:block}
.ug-axis div span{position:absolute;top:0;transform:translateX(50%);font-variant-numeric:tabular-nums;white-space:nowrap}
.ug-axis div span.odd{display:none}
@media (min-width:700px){.ug-axis div span.odd{display:inline}}
.ug-rows{position:relative;margin:0;padding:0;list-style:none}
.ug-row{display:grid;grid-template-columns:var(--nm) minmax(0,1fr);gap:8px;align-items:center;min-height:22px}
.ug-row[hidden]{display:none}
.ug-row > a{font-size:13px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.ug-row > a:hover{color:var(--acc);text-decoration:underline}
.ug-row.off > a{color:var(--soft);font-weight:600}
.ug-trk{position:relative;height:22px;background:linear-gradient(180deg,transparent 10.5px,rgba(15,59,69,.1) 10.5px 11.5px,transparent 11.5px)}
.ug-bar{position:absolute;top:7px;height:8px;border-radius:4px;background:#9cc3ca}
.ug-bar.alt{border-inline-end:3px dotted #6a9aa3}
.ug-row.on .ug-bar{background:var(--nile)}
.ug-row.alive-now .ug-bar{border-radius:4px 0 0 4px}
.ug-age{position:absolute;top:2px;transform:translateX(50%);background:var(--acc);color:#fff;border-radius:999px;font-size:11px;font-weight:800;line-height:18px;padding:0 6px;font-variant-numeric:tabular-nums;z-index:2}
.ug-gl{display:block;margin:8px 0 2px;padding:3px 10px;border-radius:999px;background:var(--nile);color:#fff;font-size:12px;font-weight:700;width:max-content;max-width:100%}
.ug-needle{position:absolute;top:0;bottom:0;width:2px;background:var(--acc);transform:translateX(50%);pointer-events:none;z-index:1}
.ug-nwrap{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--nm) + 8px);inset-inline-end:0;pointer-events:none}
.ug-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 2px 0;font-size:12.5px;font-weight:600;color:var(--soft)}
.ug-legend i{display:inline-block;width:18px;height:8px;border-radius:4px;vertical-align:middle;margin-inline-end:5px}
.ug-legend .k1{background:var(--nile)}.ug-legend .k2{background:#9cc3ca}.ug-legend .k3{background:var(--acc);width:2px;height:14px;border-radius:0}

/* generation tiles (home) */
.ug-gens{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:760px){.ug-gens{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1150px){.ug-gens{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ug-gen{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-width:0}
.ug-gen header{background:var(--nile);color:#fff;padding:10px 14px}
.ug-gen header small{display:block;font-size:12.5px;font-weight:700;color:#bfe3ea}
.ug-gen h3{margin:0;font-family:var(--disp);font-weight:400;font-size:24px;line-height:1.45}
.ug-gen h3 a:hover{text-decoration:underline}
.ug-gen p{margin:10px 14px 0;font-size:15.5px;line-height:1.8}
.ug-names{display:flex;flex-wrap:wrap;gap:6px;margin:10px 14px 0;padding:0;list-style:none}
.ug-names a{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 10px;font-size:13.5px;font-weight:700}
.ug-names a:hover{border-color:var(--acc);color:var(--acc)}
.ug-gstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:12px 14px 0;border-top:1px solid var(--line);padding-top:10px;gap:4px;text-align:center}
.ug-gstats span{font-size:12px;font-weight:700;color:var(--soft);line-height:1.3}
.ug-gstats b{display:block;font-size:20px;font-weight:800;color:var(--ink)}
.ug-more{margin:auto 14px 12px;padding-top:10px;font-weight:700;font-size:14.5px;color:var(--acc)}
.ug-more:hover{text-decoration:underline}

/* craft tiles (home) */
.ug-crafts{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:760px){.ug-crafts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ug-crafts a{display:flex;flex-direction:column;gap:4px;height:100%;background:var(--paper);border:1px solid var(--line);border-inline-start:5px solid var(--acc);border-radius:var(--r);padding:14px 16px}
.ug-crafts a:hover{border-color:var(--acc)}
.ug-crafts b{font-family:var(--disp);font-weight:400;font-size:24px;line-height:1.45;color:var(--nile)}
.ug-crafts span{font-size:15px;line-height:1.75}
.ug-crafts em{font-style:normal;font-weight:800;color:var(--acc);font-size:14px}

/* person cards (generation pages) */
.ug-cards{display:grid;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:760px){.ug-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.ug-cards[data-r2="1"] > :last-child{grid-column:1/-1}}
@media (min-width:1150px){.ug-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.ug-cards[data-r2="1"] > :last-child{grid-column:auto}.ug-cards[data-r3="1"] > :last-child{grid-column:1/-1}.ug-cards[data-r3="2"] > :last-child{grid-column:span 2}}
.ug-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0;scroll-margin-top:12px}
.ug-card:target{outline:3px solid var(--acc);outline-offset:2px}
.ug-card h3{margin:0;font-family:var(--disp);font-weight:400;font-size:25px;line-height:1.45;color:var(--nile)}
.ug-life{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:2px;font-size:14px;font-weight:700;color:var(--soft)}
.ug-life b{color:var(--ink);font-variant-numeric:tabular-nums}
.ug-tags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0;padding:0;list-style:none}
.ug-tags li{font-size:12px;font-weight:800;border-radius:999px;padding:2px 9px;background:var(--tint);color:var(--nile2);line-height:1.6}
.ug-card p{margin:10px 0 0;font-size:16px;line-height:1.85}
.ug-listen{margin-top:auto;padding-top:12px}
.ug-listen > div{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.ug-dz{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border-radius:var(--rs);background:var(--acc);color:#fff;font-weight:800;font-size:14.5px}
.ug-dz:hover{background:var(--acc2)}
.ug-dz svg{width:18px;height:18px;flex:none}
.ug-tracks{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:0;padding:0;list-style:none}
.ug-tracks a{display:block;font-size:13.5px;font-weight:600;color:var(--nile2);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ug-nodz{font-size:13.5px;font-weight:600;color:var(--soft);line-height:1.6}
.ug-src{font-size:12.5px;font-weight:600;color:var(--soft);line-height:1.6}
.ug-src a{text-decoration:underline;text-underline-offset:3px}

/* inner page head */
.ug-ph1{margin-top:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;min-width:0}
.ug-ph1 h1{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.4;color:var(--nile)}
.ug-ph1 p{margin:6px 0 0;font-size:17px;line-height:1.85}
.ug-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}
@media (min-width:760px){.ug-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ug-facts li{background:var(--tint);border-radius:var(--rs);padding:8px 10px;font-size:15px;font-weight:700;line-height:1.45;min-width:0}
.ug-facts small{display:block;font-size:12px;font-weight:700;color:var(--soft)}
.ug-facts a{text-decoration:underline;text-underline-offset:3px}

/* tables (craft + sources pages) */
.ug-tbl{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14.5px}
.ug-tblw{overflow-x:auto;border-radius:var(--r)}
.ug-tbl th,.ug-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top;line-height:1.6}
.ug-tbl th{background:var(--nile);color:#fff;font-weight:700;font-size:13px}
.ug-tbl td a{text-decoration:underline;text-underline-offset:3px}
.ug-tbl tr:last-child td{border-bottom:0}
.ug-tbl .ug-n{white-space:nowrap}

/* reading blocks */
.ug-prose{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;columns:1;font-size:17px;line-height:1.9}
@media (min-width:1000px){.ug-prose{columns:2;column-gap:36px}}
.ug-prose p{margin:0 0 12px;break-inside:avoid}
.ug-prose a{text-decoration:underline;text-underline-offset:3px}
.ug-how{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:s}
@media (min-width:900px){.ug-how{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ug-how li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:15.5px;line-height:1.8;counter-increment:s;min-width:0}
.ug-how li::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;font-weight:800;margin-inline-end:8px}
.ug-how b{display:block;margin-bottom:2px;font-size:16.5px;color:var(--nile)}

/* questions + editorial chapters */
.ug-faq{display:grid;gap:10px;margin:0}
@media (min-width:900px){.ug-faq{grid-template-columns:repeat(2,minmax(0,1fr))}.ug-faq > div:last-child:nth-child(odd){grid-column:1/-1}}
.ug-faq > div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;min-width:0}
.ug-faq dt{font-weight:800;font-size:16px;line-height:1.6;color:var(--nile)}
.ug-faq dd{margin:4px 0 0;font-size:16px;line-height:1.85}
.ug-intro{margin:0 0 10px;font-size:17px;line-height:1.9}
.ug-chap{display:grid;gap:8px}
@media (min-width:900px){.ug-chap{grid-template-columns:repeat(2,minmax(0,1fr))}.ug-chap > details:last-child:nth-child(odd){grid-column:1/-1}}
.ug-chap details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:4px 14px;min-width:0}
.ug-chap summary{cursor:pointer;font-weight:800;font-size:16px;line-height:1.6;padding:8px 0;color:var(--nile)}
.ug-chap p{margin:0 0 10px;font-size:16.5px;line-height:1.85}

/* the address + the offer */
.ug-duo{display:grid;gap:14px;margin-top:34px}
@media (min-width:1000px){.ug-duo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.ug-dm{background:var(--nile);color:#e3f3f6;border-radius:var(--r);padding:18px 20px;min-width:0}
.ug-dm h2{margin:0 0 6px;font-family:var(--disp);font-weight:400;font-size:clamp(25px,2.3vw,33px);line-height:1.45;color:#fff}
.ug-dm p{margin:0 0 12px;font-size:16.5px;line-height:1.85}
.ug-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ug-btn{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:var(--rs);background:var(--acc);color:#fff;font-weight:800;font-size:15px;padding:0 10px;cursor:pointer;list-style:none;text-align:center}
.ug-btn::-webkit-details-marker{display:none}
.ug-ghost{background:transparent;border:1.5px solid #9fd0d9;color:#fff}
.ug-offer{grid-column:auto}
.ug-offer[open]{grid-column:1/-1}
.ug-formbox{margin-top:10px;background:#fff;color:var(--ink);border-radius:var(--rs);padding:12px}
.ug-ds{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;min-width:0}
.ug-ds small{font-weight:800;font-size:13px;color:var(--soft)}
.ug-d{font-family:var(--disp);font-size:clamp(34px,3.6vw,48px);line-height:1.35;padding-top:.1em;color:var(--nile);white-space:nowrap}
.ug-d span{color:var(--acc)}
.ug-ds p{margin:4px 0 10px;font-size:16px;line-height:1.85}
.ug-ds bdi{font-size:14.5px;word-break:break-all}

/* footer + shared pages */
.ug-foot{margin-top:34px;background:var(--nile);color:#d5ecf0;padding:18px 0 22px}
.ug-foot p{margin:0 0 10px;font-size:15.5px;line-height:1.85}
.ug-foot nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px;font-weight:700;font-size:14.5px}
.ug-foot nav a{text-decoration:underline;text-underline-offset:3px}
.ug-cred{font-size:13px!important;opacity:.85}
.ug-shared{margin-top:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;font-size:17px;line-height:1.85}

@media (max-width:620px){
  .ug-brand{flex-wrap:wrap;gap:6px 10px;min-height:0;padding-block:8px}
  .ug-mark{width:40px;height:40px}.ug-mark span{inset:11px;font-size:13px}
  .ug-lt{font-size:46px}
  .ug-chips{margin-inline-start:0;width:100%;justify-content:flex-start}
  .ug-nav a{font-size:13px;min-height:42px}
  .ug-year output{font-size:34px}
  .ug-ctl{grid-template-columns:minmax(0,1fr)}
  .ug-year{justify-content:center}
  .ug-btns{grid-template-columns:minmax(0,1fr)}
  .ug-d{font-size:34px}
}
@media print{.ug-top,.ug-nav,.ug-duo,.ug-foot{display:none!important}}