:root {
--paper: #F4F6F3;
--surface: #FFFFFF;
--surface-2: #EEF2EE;
--ink: #17302A;
--ink-2: #3F524C;
--ink-3: #56665F;
--rule: #D6DFDA;
--line: #B3C2BB;
--lapis: #24508F;
--lapis-soft: #DCE6F4;
--gold: #B8862A;
--gold-ink: #835D0E;
--gold-soft: #F5EBD3;
--maternal: #A0496B;
--maternal-soft: #F5E4EB;
--f-muslim: #1D7A52;
--f-not: #C4501A;
--f-disputed: #7A4FA3;
--f-pre: #858F96;
--font-latin: "Gentium Book Plus", "Gentium Fallback", Georgia, serif;
--font: var(--font-latin);
--font-ar: "Amiri", "Amiri Fallback", "Noto Naskh Arabic", "Geeza Pro", serif;
--dir: 1;
--topbar-h: 64px;
--radius: 14px;
--shadow: 0 1px 2px rgba(23, 48, 42, .06), 0 8px 24px rgba(23, 48, 42, .08);
--ease: cubic-bezier(.2, .8, .2, 1);
--gen-w: 46px;
--m: 52px;
--m-base: 52px;
--pad-y: 14px;
--spine-w: 284px;
--lane-w: 124px;
--lane-col: var(--lane-w);
--axis: calc(var(--gen-w) + var(--m-base) / 2);
--lane-x: calc(var(--gen-w) + var(--spine-w) + var(--lane-w) / 2);
--mid: calc(var(--pad-y) + var(--m-base) / 2);
}
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: optional; src: url("/assets/fonts/amiri-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: optional; src: url("/assets/fonts/amiri-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: optional; src: url("/assets/fonts/amiri-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: optional; src: url("/assets/fonts/amiri-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: optional; src: url("/assets/fonts/amiri-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: optional; src: url("/assets/fonts/amiri-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Gentium Book Plus"; font-style: italic; font-weight: 400; font-display: optional; src: url("/assets/fonts/gentium-400i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Gentium Book Plus"; font-style: italic; font-weight: 400; font-display: optional; src: url("/assets/fonts/gentium-400i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 400; font-display: optional; src: url("/assets/fonts/gentium-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 400; font-display: optional; src: url("/assets/fonts/gentium-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 700; font-display: optional; src: url("/assets/fonts/gentium-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Gentium Book Plus"; font-style: normal; font-weight: 700; font-display: optional; src: url("/assets/fonts/gentium-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "LT Naskh"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("/assets/fonts/noto-naskh-arabic.woff2") format("woff2"); unicode-range: U+0020, U+00A0, U+0600-06FF, U+200C-200E, U+2010, U+FDF2, U+FDFA; }
@font-face { font-family: "LT Vazirmatn"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("/assets/fonts/vazirmatn.woff2") format("woff2"); unicode-range: U+0020, U+00A0, U+0600-06FF, U+200C-200E, U+2010-2011, U+FDF2; }
@font-face { font-family: "LT Nastaliq"; font-style: normal; font-weight: 400; font-display: optional; src: local("Noto Nastaliq Urdu"), local("NotoNastaliqUrdu"), local("NotoNastaliqUrdu-Regular"), local("Noto Nastaliq Urdu Regular"), url("/assets/fonts/noto-nastaliq-urdu.woff2") format("woff2"); unicode-range: U+0020, U+00A0, U+0600-06FF, U+200C-200E, U+2010-2011, U+FDF2; }
@font-face { font-family: "LT Nastaliq"; font-style: normal; font-weight: 700; font-display: optional; src: local("Noto Nastaliq Urdu Bold"), local("NotoNastaliqUrdu-Bold"), url("/assets/fonts/noto-nastaliq-urdu.woff2") format("woff2"); unicode-range: U+0020, U+00A0, U+0600-06FF, U+200C-200E, U+2010-2011, U+FDF2; }
@font-face { font-family: "Amiri Marks"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("/assets/fonts/amiri-400-arabic.woff2") format("woff2"); unicode-range: U+FD3E-FD3F, U+FDFA; }
@font-face { font-family: "Gentium Fallback"; src: local("Georgia"); size-adjust: 100%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Amiri Fallback"; src: local("Geeza Pro"), local("Times New Roman"); size-adjust: 112%; ascent-override: 110%; descent-override: 55%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font);
font-size: 17px;
line-height: 1.6;
text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
a { color: var(--lapis); }
button { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--lapis); outline-offset: 2px; border-radius: 6px; }
[lang="ar"], .ar { font-family: var(--font-ar); }
.ar-honor { font-family: var(--font-ar); font-weight: 400; white-space: nowrap; font-size: .9em; }
.nowrap { white-space: nowrap; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px; padding: 10px 20px; border-radius: 999px;
border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
font-size: 17px; font-weight: 700;
transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #24453C; }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-quiet:hover { border-color: var(--ink-3); background: var(--surface); }
.icon-btn {
display: inline-grid; place-items: center; width: 44px; height: 44px;
border: 0; background: transparent; border-radius: 999px; cursor: pointer; color: var(--ink);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg, .search-icon {
width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
.text-btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; font-size: 16px;
}
.text-btn[aria-expanded="true"] { border-color: var(--ink); }
.link-btn {
border: 0; background: none; padding: 0; cursor: pointer; color: var(--lapis);
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
font: inherit;
}
.link-btn:hover { color: var(--ink); }
.topbar {
position: sticky; top: 0; z-index: 40;
height: var(--topbar-h);
display: flex; align-items: center; gap: 16px;
padding: 0 20px;
background: rgba(244, 246, 243, .92);
-webkit-backdrop-filter: saturate(1.2) blur(10px);
backdrop-filter: saturate(1.2) blur(10px);
border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.brand-mark { width: 30px; height: 30px; fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.brand-mark circle:nth-child(2) { stroke: var(--gold); stroke-width: 2.2; }
.brand-mark circle:nth-child(3) { stroke: var(--maternal); }
.brand-name { font-weight: 700; font-size: 19px; letter-spacing: .01em; white-space: nowrap; }
.search { position: relative; margin-inline-start: auto; width: min(420px, 40vw); }
.search input {
width: 100%; height: 44px; padding-block: 0; padding-inline: 42px 44px;
border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface);
font: inherit; font-size: 16px; color: var(--ink);
-webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--lapis); box-shadow: 0 0 0 3px var(--lapis-soft); }
.search input::-webkit-search-cancel-button { display: none; }
.search-icon { position: absolute; inset-inline-start: 14px; top: 11px; color: var(--ink-3); pointer-events: none; }
.search-close { position: absolute; inset-inline-end: 0; top: 0; display: none; }
.search-results {
position: absolute; top: calc(100% + 8px); left: 0; right: 0;
max-height: min(70vh, 460px); overflow: auto;
background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 6px;
}
.result {
display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: center;
width: 100%; text-align: start; padding: 8px 10px; border: 0; border-radius: 10px;
background: none; cursor: pointer; min-height: 52px;
}
.result-medal { grid-row: span 2; display: grid; place-items: center; }
.result .medal { --m: 26px; }
.result-name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.result-role { font-size: 14px; color: var(--ink-3); line-height: 1.35; }
.result[aria-selected="true"], .result:hover { background: var(--surface-2); }
.results-empty { padding: 12px 12px 14px; font-size: 15px; color: var(--ink-2); }
.results-empty strong { color: var(--ink); }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.search + .topbar-actions { margin-inline-start: 0; }
.only-compact { display: none; }
.hero {
padding-block: 36px 32px; padding-inline: 22px 28px; border-bottom: 1px solid var(--rule);
display: grid; gap: 16px; justify-items: start;
}
.center { min-width: 0; }
.hero-title { font-size: clamp(32px, 4.4vw, 50px); font-weight: 700; letter-spacing: -.01em; max-width: 24ch; text-wrap: balance; }
.hero-title .nowrap { white-space: nowrap; }
.hero-title .ar-honor { font-size: .62em; color: var(--gold-ink); vertical-align: .08em; }
.hero-chain-ar {
width: 100%;
font-size: clamp(21px, 2.2vw, 27px); line-height: 1.95; color: var(--ink);
text-align: right;
}
.hero-chain-ar button, .hero-chain button {
border: 0; background: none; padding: 0 1px; cursor: pointer; color: inherit; border-radius: 6px;
transition: color .15s var(--ease), background-color .15s var(--ease);
}
.hero-chain-ar button { font-family: var(--font-ar); font-size: inherit; line-height: inherit; }
.hero-chain-ar button:hover, .hero-chain button:hover { color: var(--gold-ink); background: var(--gold-soft); }
.hero-chain-ar .bin { color: var(--ink-3); }
.hero-chain-ar .pair, .hero-chain .pair { white-space: nowrap; }
.hero-chain-ar .first, .hero-chain .first { color: var(--gold-ink); font-weight: 700; }
.hero-chain { font-size: 16px; line-height: 1.9; color: var(--ink-3); max-width: 78ch; }
.hero-chain button { font-size: 16px; color: var(--ink); font-family: var(--font); }
.hero-chain .son { font-style: italic; }
.hero-intro { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) clamp(390px, 26vw, 520px);
}
.rail { border-inline-end: 1px solid var(--rule); }
.rail-list {
position: sticky; top: var(--topbar-h);
height: calc(100dvh - var(--topbar-h));
display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin;
list-style: none; margin: 0; padding-block: 22px; padding-inline: 18px 14px;
}
.rail-era {
flex: 1 1 0;
display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px;
}
.rail-dots {
grid-column: 1; grid-row: 1; position: relative;
list-style: none; margin: 0; padding: 4px 0;
display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.rail-dots::before {
content: ""; position: absolute; top: 8px; bottom: 8px; left: calc(50% - 1px); width: 2px; background: var(--rule);
}
.rail-era.is-uncertain .rail-dots::before {
background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px);
}
.rail-dots li { position: relative; line-height: 0; min-height: 0; }
.rail-dot {
position: relative; display: block; width: 9px; height: 9px; padding: 0; border-radius: 50%;
border: 2px solid var(--line); background: var(--line); cursor: pointer;
transition: transform .15s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.rail-dot::after { content: ""; position: absolute; inset: -4px -7px; }
.rail-era.is-uncertain .rail-dot { background: var(--paper); width: 8px; height: 8px; }
.rail-dot:hover { transform: scale(1.5); border-color: var(--ink-2); }
.rail-dot.is-here { border-color: var(--ink); background: var(--ink); transform: scale(1.35); }
.rail-dot.is-path { border-color: var(--gold); background: var(--gold); }
.rail-dot.is-picked { border-color: var(--lapis); background: var(--lapis); transform: scale(1.6); }
.rail-era-link {
grid-column: 2; grid-row: 1; align-self: start;
display: block; padding: 2px 6px; border-radius: 8px;
text-decoration: none; color: var(--ink-2); font-size: 15px; line-height: 1.3;
}
.rail-era-link:hover { background: var(--surface); color: var(--ink); }
.rail-era-link[aria-current="true"] { color: var(--ink); font-weight: 700; }
.rail-count { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.tree { min-width: 0; padding-block: 20px 64px; padding-inline: 22px 28px; outline: none; container: tree / inline-size; }
body:not(.is-rendered) .tree { visibility: hidden; min-height: 100vh; }
@container tree (min-width: 900px) {
.track, .household {
--gen-w: 52px; --m: 58px; --m-base: 58px; --spine-w: 340px; --lane-w: 150px; --lane-col: var(--lane-w);
--axis: calc(var(--gen-w) + var(--m-base) / 2);
--mid: calc(var(--pad-y) + var(--m-base) / 2);
--lane-x: calc(var(--gen-w) + var(--spine-w) + var(--lane-w) / 2);
}
.node-name { font-size: 20.5px; }
.node-role { font-size: 15.5px; }
.medal { font-size: 18.5px; }
.chip { --m: 28px; min-height: 44px; padding-inline-end: 14px; }
.chip-name { font-size: 16px; }
.lane-node { --m: 46px; }
.lane-name { font-size: 15px; }
.era-title { font-size: 25px; }
.era-blurb { font-size: 17px; }
.wives { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.families { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}
@container tree (min-width: 1120px) {
.track, .household {
--gen-w: 56px; --m: 64px; --m-base: 64px; --spine-w: 420px; --lane-w: 176px;
--axis: calc(var(--gen-w) + var(--m-base) / 2);
--mid: calc(var(--pad-y) + var(--m-base) / 2);
--lane-x: calc(var(--gen-w) + var(--spine-w) + var(--lane-w) / 2);
}
.node-name { font-size: 22px; }
.node-role { font-size: 16px; }
.medal { font-size: 20px; }
.lane-node { --m: 50px; }
.row--prophet { --m: 86px; --mid: calc(var(--pad-y) + 86px / 2); }
}
.legend { display: grid; gap: 14px; }
.legend-group h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.legend-items { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.legend-item {
display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
width: 100%; min-height: 40px; padding: 4px 8px; border-radius: 10px;
border: 1.5px solid transparent; background: none; cursor: pointer; text-align: start;
}
.legend-item:hover { background: var(--surface-2); }
.legend-item[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); }
.legend-swatch {
width: 22px; height: 22px; border-radius: 50%; background: var(--surface);
border: 3px solid var(--ring, var(--ink-3));
}
.legend-swatch.is-dashed { border-style: dashed; background: var(--paper); }
.legend-swatch.is-line { border: 0; border-radius: 3px; height: 4px; background: var(--ring); }
.legend-swatch.is-double { border-radius: 0; height: 6px; background: linear-gradient(var(--ring) 0 2px, transparent 2px 4px, var(--ring) 4px); }
.legend-label { font-size: 15px; line-height: 1.3; }
.legend-label small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.legend-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.legend-hint { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.legend-clear { justify-self: start; font-size: 14px; }
.legend-inline {
display: none;
background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
padding: 14px 14px 12px; margin-bottom: 18px;
}
.legend-pop {
position: fixed; z-index: 60; top: calc(var(--topbar-h) + 8px); inset-inline-end: 12px;
width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - var(--topbar-h) - 24px); overflow: auto;
background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 12px 14px 16px;
}
.legend-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.legend-pop-title { font-size: 18px; }
.legend-jumps { border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px; }
.legend-jumps h3 { font-size: 15px; margin-bottom: 6px; }
.legend-jumps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.legend-jumps button {
min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line);
background: var(--surface); cursor: pointer; font-size: 15px;
}
.legend-jumps button:hover { border-color: var(--ink-3); }
.medal {
--ring: var(--f-pre);
flex: none;
width: var(--m); height: var(--m); border-radius: 50%;
display: grid; place-items: center;
background: var(--surface);
border: 2.5px solid var(--ring);
font-family: var(--font-ar); font-size: 17px; line-height: 1; color: var(--ink);
transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
position: relative;
}
.medal .ar { display: block; padding: 0 3px; text-align: center; white-space: nowrap; transform: translateY(2px); }
.medal[data-len="m"] { font-size: 14px; }
.medal[data-len="l"] { font-size: 12px; }
.medal[data-len="xl"] { font-size: 10.5px; }
.medal.is-two .ar { white-space: normal; line-height: 1.02; max-width: calc(var(--m) - 8px); transform: translateY(1px); }
[data-faith="muslim"] > .medal, .medal[data-faith="muslim"] { --ring: var(--f-muslim); }
[data-faith="not-muslim"] > .medal, .medal[data-faith="not-muslim"] { --ring: var(--f-not); }
[data-faith="disputed"] > .medal, .medal[data-faith="disputed"] { --ring: var(--f-disputed); }
[data-faith="pre-islam"] > .medal, .medal[data-faith="pre-islam"] { --ring: var(--f-pre); }
[data-certainty="uncertain"] > .medal, .medal[data-certainty="uncertain"] { border-style: dashed; background: var(--paper); }
:root {
--mark-yes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.5l2.8 2.8 6-6.4'/%3E%3C/svg%3E");
--mark-yes-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.5l2.8 2.8 6-6.4'/%3E%3C/svg%3E");
--mark-no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 8h8.4'/%3E%3C/svg%3E");
--mark-no-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 8h8.4'/%3E%3C/svg%3E");
--mark-maybe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 5.9a2.5 2.5 0 1 1 3.6 2.2c-.7.4-1.1.9-1.1 1.6v.4'/%3E%3Cpath d='M8 12.9v.1'/%3E%3C/svg%3E");
--mark-maybe-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 5.9a2.5 2.5 0 1 1 3.6 2.2c-.7.4-1.1.9-1.1 1.6v.4'/%3E%3Cpath d='M8 12.9v.1'/%3E%3C/svg%3E");
}
[data-faith="muslim"] > .medal, .legend-swatch[data-faith="muslim"] { --mark: var(--mark-yes); --mark-w: var(--mark-yes-w); }
[data-faith="not-muslim"] > .medal, .legend-swatch[data-faith="not-muslim"] { --mark: var(--mark-no); --mark-w: var(--mark-no-w); }
[data-faith="disputed"] > .medal, .legend-swatch[data-faith="disputed"] { --mark: var(--mark-maybe); --mark-w: var(--mark-maybe-w); }
:is([data-faith="muslim"], [data-faith="not-muslim"], [data-faith="disputed"]) > .medal::before,
.legend-swatch:is([data-faith="muslim"], [data-faith="not-muslim"], [data-faith="disputed"])::before {
content: ""; position: absolute; pointer-events: none;
}
.medal:empty::before, .legend-swatch::before {
inset: 20%; background: var(--ring);
-webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
}
.medal:not(:empty)::before {
--pip: clamp(14px, calc(var(--m) * .3), 22px);
width: var(--pip); height: var(--pip); bottom: -3px; inset-inline-end: -6px; border-radius: 50%;
background: var(--mark-w) center / 74% no-repeat, var(--ring);
box-shadow: 0 0 0 2px var(--surface);
}
.legend-swatch { position: relative; }
.is-selected > .medal:empty::before { background: #fff; }
.is-prophet > .medal:not(:empty)::before { bottom: -6px; inset-inline-end: -9px; }
.is-prophet > .medal::after, .medal.is-prophet::after {
content: ""; position: absolute; inset: -6px; border-radius: 50%;
border: 1.5px solid var(--gold); pointer-events: none;
}
.node {
display: flex; align-items: center; gap: 14px;
border: 0; background: none; padding: 0; margin: 0; cursor: pointer; text-align: start;
border-start-start-radius: 999px; border-start-end-radius: 14px; border-end-end-radius: 14px; border-end-start-radius: 999px;
transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.node:hover > .medal { box-shadow: 0 0 0 5px var(--surface-2); }
.node-name { display: block; font-weight: 700; font-size: 19px; line-height: 1.25; }
.node-name .ar-honor { font-size: .9em; color: var(--gold-ink); }
.node-role { display: block; font-size: 14.5px; line-height: 1.4; color: var(--ink-3); margin-top: 2px; }
.node-text { min-width: 0; }
.node.is-on-path > .medal { box-shadow: 0 0 0 4px var(--gold-soft); border-color: var(--gold); }
.node.is-related > .medal { box-shadow: 0 0 0 4px var(--lapis-soft); }
.node.is-meet > .medal { box-shadow: 0 0 0 4px var(--gold-soft), 0 0 0 6px var(--gold); }
.node.is-meet.is-meet-uncertain > .medal { box-shadow: 0 0 0 4px var(--gold-soft); outline: 2px dashed var(--gold); outline-offset: 4px; }
.d-section h3 .badge { margin-inline-start: 6px; vertical-align: middle; font-weight: 400; }
.node.is-selected > .medal {
background: var(--lapis); color: #fff; border-color: var(--lapis);
box-shadow: 0 0 0 5px var(--lapis-soft);
}
.node.is-selected .node-name { color: var(--lapis); }
@media (prefers-reduced-motion: no-preference) {
.node.is-selected > .medal { animation: pick .45s var(--ease); }
@keyframes pick { 0% { transform: scale(.88); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
}
body.is-filtering .node:not(.is-match) { opacity: .22; filter: grayscale(.6); }
body.is-filtering .node.is-match > .medal { box-shadow: 0 0 0 5px var(--surface-2); }
.track { list-style: none; margin: 0; padding: 0; position: relative; }
.row {
position: relative;
display: grid;
grid-template-columns: var(--gen-w) var(--spine-w) var(--lane-col) minmax(0, 1fr);
align-items: start;
padding: var(--pad-y) 0;
}
.row.has-lane { --lane-col: var(--lane-w); }
.row::before, .row::after, .era::before, .band::before {
content: ""; position: absolute; inset-inline-start: calc(var(--axis) - 1px); width: 2px;
background: var(--line); transition: background-color .3s var(--ease), width .2s var(--ease);
}
.row::before { top: 0; height: var(--mid); }
.row::after { top: var(--mid); bottom: 0; }
.row.is-first::before { display: none; }
.row.is-last::after { display: none; }
.row.p-up::before, .row.p-down::after, .era.p-through::before, .band.p-through::before {
background: var(--gold); width: 3px; inset-inline-start: calc(var(--axis) - 1.5px);
}
.row--dashed-below::after,
.row--dashed::before, .row--dashed::after,
.row--upper::before, .row--upper::after, .band::before {
background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 11px);
}
.row--dashed-below.p-down::after,
.row--dashed.p-up::before, .row--dashed.p-down::after,
.row--upper.p-up::before, .row--upper.p-down::after, .band.p-through::before {
background: repeating-linear-gradient(to bottom, var(--gold) 0 6px, transparent 6px 11px);
}
.row--upper[hidden] { display: none; }
.gen {
grid-column: 1; align-self: start;
height: var(--m); display: flex; align-items: center;
font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.spine-cell { grid-column: 2; min-width: 0; position: relative; z-index: 1; }
.spine-cell .node { width: 100%; }
.spine-cell .medal { background: var(--surface); }
.row--upper .spine-cell .medal { background: var(--paper); }
.spouse-line { margin-block: 6px 0; margin-inline: calc(var(--m) + 14px) 0; font-size: 14.5px; color: var(--ink-3); line-height: 1.45; }
.spouse-line .link-btn { font-size: 14.5px; }
.lane { grid-column: 3; position: relative; align-self: stretch; }
.branches { grid-column: 4; min-width: 0; padding-top: 2px; }
.branches-group + .branches-group { margin-top: 10px; }
.branches-label { font-size: 13.5px; color: var(--ink-3); margin-bottom: 6px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.chip { --m: 24px; gap: 8px; padding-block: 3px; padding-inline: 3px 12px; min-height: 40px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); }
.chip:hover { border-color: var(--line); }
.chip .medal { font-size: 11px; border-width: 2px; }
.chip .medal[data-len="m"], .chip .medal[data-len="l"], .chip .medal[data-len="xl"] { font-size: 9px; }
.chip-name { font-size: 15px; font-weight: 700; line-height: 1.2; }
.chip.is-selected { border-color: var(--lapis); }
.chip-kids { margin-block: 4px 2px; margin-inline: 40px 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.chip-kids .link-btn { font-size: 13.5px; }
.chip-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.chip-kids { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mini { --m: 18px; gap: 5px; padding-block: 2px; padding-inline: 2px 6px; border-radius: 999px; min-height: 28px; }
@media (pointer: coarse) { .mini { min-height: 40px; padding-block: 4px; padding-inline: 4px 8px; } .brand { min-width: 44px; } .legend-more { display: inline-block; padding: 6px 0; } }
.mini .medal { border-width: 2px; }
.mini-name { font-size: 13.5px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mini:hover .mini-name { text-decoration: none; }
.mini.is-selected .mini-name { color: var(--lapis); font-weight: 700; }
.mini.is-selected > .medal { box-shadow: 0 0 0 3px var(--lapis-soft); }
.spouse-line .mini, .family-meta .mini, .hh-others .mini { vertical-align: middle; margin: 0 2px; }
.spouse-line .mini-name, .family-meta .mini-name { font-size: inherit; }
.hh-others { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 14px; }
.hh-others .mini-name { font-size: 15px; }
.mini.is-on-path > .medal { box-shadow: 0 0 0 3px var(--gold-soft); border-color: var(--gold); }
.mini.is-related > .medal { box-shadow: 0 0 0 3px var(--lapis-soft); }
.lane::before {
content: ""; position: absolute; left: calc(50% - 3px); top: calc(-1 * var(--pad-y)); bottom: calc(-1 * var(--pad-y));
width: 6px; background: linear-gradient(to right, var(--maternal) 0 2px, transparent 2px 4px, var(--maternal) 4px);
opacity: .6; transition: opacity .3s var(--ease);
}
.lane-node { --m: 40px; flex-direction: column; gap: 4px; margin: 0 auto; position: relative; z-index: 1; border-radius: 14px; }
.lane-node .medal { font-size: 12.5px; }
.lane-name { font-size: 14px; font-weight: 700; text-align: center; line-height: 1.25; max-width: 12ch; color: var(--maternal); background: var(--paper); border-radius: 6px; padding: 0 3px; }
.lane-tag { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.lane-fork, .lane-join, .lane-through {
position: absolute; pointer-events: none; border-color: var(--maternal); opacity: .6; transition: opacity .3s var(--ease);
}
.lane-fork {
inset-inline-start: var(--axis); width: calc(var(--lane-x) - var(--axis) + 3px);
bottom: 0; height: 14px;
border-block-start: 6px double var(--maternal); border-inline-end: 6px double var(--maternal); border-start-end-radius: 14px;
}
.lane-join {
inset-inline-start: var(--axis); width: calc(var(--lane-x) - var(--axis) + 3px);
top: 0; height: 11px;
border-block-end: 6px double var(--maternal); border-inline-end: 6px double var(--maternal); border-end-end-radius: 14px;
}
.lane-through { inset-inline-start: calc(var(--lane-x) - 3px); top: 0; bottom: 0; border-inline-start: 6px double var(--maternal); }
.p-maternal .lane::before, .p-maternal .lane-through, .p-maternal .lane-fork, .p-maternal .lane-join { opacity: 1; }
.era, .band { position: relative; padding-block: 26px 18px; padding-inline: calc(var(--axis) + 26px) 0; }
.era::before, .band::before { top: 0; bottom: 0; }
.era.no-line::before { display: none; }
.lane--none::before { display: none; }
.era-title { font-size: 23px; font-weight: 700; }
.era-blurb { font-size: 16px; color: var(--ink-2); margin-top: 6px; max-width: 58ch; }
.era.has-lane .era-body { max-width: calc(var(--lane-x) - var(--axis) - 60px); }
.band-card {
border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--surface);
padding: 14px 16px; max-width: 560px; display: grid; gap: 10px; justify-items: start;
}
.band-title { font-size: 21px; font-weight: 700; }
.band-text { font-size: 16px; color: var(--ink-2); }
.band-toggle { min-height: 44px; }
.band-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s var(--ease); }
.track.upper-open .band-toggle svg { transform: rotate(180deg); }
.row--prophet { --m: 76px; --mid: calc(var(--pad-y) + 76px / 2); }
.row--prophet .spine-cell .node > .medal { margin-inline-start: calc((var(--m-base) - var(--m)) / 2); }
.row--prophet .medal { font-size: 26px; border-width: 3px; border-color: var(--gold); background: var(--gold-soft); }
.row--prophet .node-name { font-size: 24px; }
.row--prophet::after { display: block; }
.household { padding: 6px 0 0 0; position: relative; }
.household::before {
content: ""; position: absolute; inset-inline-start: calc(var(--axis) - 1px); top: 0; height: 26px; width: 2px; background: var(--line);
}
.household.p-through::before { background: var(--gold); width: 3px; }
.hh-group { margin: 26px 0 0; padding: 18px 18px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.hh-title { font-size: 21px; font-weight: 700; }
.hh-sub { font-size: 15px; color: var(--ink-3); margin-top: 4px; max-width: 64ch; }
.wives { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.wife .node { --m: 44px; width: 100%; padding-block: 6px; padding-inline: 6px 10px; border-start-start-radius: 999px; border-start-end-radius: 14px; border-end-end-radius: 14px; border-end-start-radius: 999px; }
.wife .node:hover { background: var(--surface-2); }
.wife-no { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; display: block; }
.wife .node-name { font-size: 16.5px; }
.wife .medal { font-size: 13px; }
.families { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.family { border: 1px solid var(--rule); border-radius: 12px; padding: 12px; background: var(--paper); display: grid; gap: 8px; align-content: start; }
.family > .node { --m: 46px; }
.family .node-name { font-size: 17.5px; }
.family-meta { font-size: 14px; color: var(--ink-3); line-height: 1.45; }
.family-kids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.family-kids-label { width: 100%; font-size: 13.5px; color: var(--ink-3); }
.panel {
border-inline-start: 1px solid var(--rule); background: var(--surface);
position: sticky; top: var(--topbar-h); align-self: start;
height: calc(100dvh - var(--topbar-h)); overflow-y: auto; overscroll-behavior: contain;
}
.panel-legend { padding: 14px 16px 10px; border-bottom: 1px solid var(--rule); }
.panel-legend .legend, .legend-inline .legend { gap: 8px; }
.panel-legend .legend-group h3, .legend-inline .legend-group h3 { font-size: 14px; margin-bottom: 2px; }
.panel-legend .legend-items, .legend-inline .legend-items { grid-template-columns: 1fr 1fr; gap: 0 4px; }
.panel-legend .legend-item, .legend-inline .legend-item { min-height: 36px; grid-template-columns: 20px 1fr auto; gap: 8px; padding: 2px 6px; }
.panel-legend .legend-swatch, .legend-inline .legend-swatch { width: 18px; height: 18px; border-width: 2.5px; }
.panel-legend .legend-swatch.is-line, .legend-inline .legend-swatch.is-line { height: 4px; }
.panel-legend .legend-swatch.is-double, .legend-inline .legend-swatch.is-double { height: 6px; }
.panel-legend .legend-label, .legend-inline .legend-label { font-size: 14px; }
.panel-legend .legend-label small, .legend-inline .legend-label small { display: none; }
.panel-legend .legend-group--lines .legend-items, .legend-inline .legend-group--lines .legend-items { grid-template-columns: 1fr; }
.panel-legend .legend-group--lines .legend-item, .legend-inline .legend-group--lines .legend-item { min-height: 28px; }
.panel-legend .legend-hint, .legend-inline .legend-hint { font-size: 12.5px; }
.legend-more { font-size: 13px; }
.detail { padding: 20px 22px 40px; outline: none; }
.sheet-bar {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-block: -8px 4px; margin-inline: 0 -10px;
}
.sheet-bar-title { font-size: 15px; color: var(--ink-3); }
.guide h2 { font-size: 21px; margin-bottom: 8px; }
.guide p { color: var(--ink-2); font-size: 16px; }
.guide h3 { font-size: 15px; margin: 22px 0 8px; }
.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
.glance div { background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px 11px; }
.glance dt { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.glance dd { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--ink-3); }
.guide-jumps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.guide-jumps button {
min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line);
background: var(--surface); cursor: pointer; font-size: 15px;
}
.guide-jumps button:hover { border-color: var(--ink-3); }
.guide-eras { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.guide-eras li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.guide-eras a { color: var(--ink); text-decoration: none; font-size: 15.5px; }
.guide-eras a:hover { color: var(--lapis); text-decoration: underline; }
.guide-eras span { font-size: 13px; color: var(--ink-3); text-align: end; white-space: nowrap; }
.d-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.d-head .medal { --m: 72px; font-size: 22px; border-width: 3px; }
.d-head .medal[data-len="m"] { font-size: 18px; }
.d-head .medal[data-len="l"], .d-head .medal[data-len="xl"] { font-size: 15px; }
.d-ar { font-family: var(--font-ar); font-size: 26px; line-height: 1.5; color: var(--ink-2); text-align: left; }
.d-name { font-size: 27px; font-weight: 700; line-height: 1.2; }
.d-name .ar-honor { color: var(--gold-ink); font-size: .85em; }
.d-honor { font-size: 14px; color: var(--ink-3); font-style: italic; margin-top: 2px; }
.d-role { margin-top: 14px; font-size: 17px; color: var(--ink-2); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.badge {
display: inline-flex; align-items: center; gap: 7px; padding-block: 4px; padding-inline: 8px 11px; min-height: 30px;
border-radius: 999px; font-size: 14px; background: var(--surface-2); color: var(--ink);
}
.badge::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ring, var(--ink-3)); background: var(--surface); }
.badge.is-dashed::before { border-style: dashed; }
.badge.no-dot::before { display: none; }
.badge.no-dot { gap: 0; }
.badge.is-gen { background: var(--gold-soft); color: var(--gold-ink); }
.d-section { margin-top: 22px; }
.d-section h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.d-story p + p { margin-top: 10px; }
.d-story p { font-size: 17px; line-height: 1.65; }
.d-family { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 16px; }
.d-family dt { color: var(--ink-3); }
.d-family dd { margin: 0; }
.d-family .note { color: var(--ink-3); font-size: 14.5px; }
.d-list { list-style: none; margin: 0; padding: 0; }
.d-list li + li { margin-top: 3px; }
.d-chain { font-size: 15.5px; line-height: 1.8; color: var(--ink-3); }
.d-chain .link-btn { font-size: 15.5px; }
.d-note { font-size: 15.5px; color: var(--ink-2); border-inline-start: 3px solid var(--line); padding-block: 2px; padding-inline: 12px 0; }
.d-note + .d-note { margin-top: 10px; }
.d-note.is-faith { border-color: var(--ring, var(--line)); }
.d-note.is-uncertain { border-inline-start-style: dashed; }
.d-facts { margin: 0; padding-inline-start: 20px; font-size: 16px; }
.d-facts li + li { margin-top: 4px; }
.d-sources { margin: 0; padding-inline-start: 20px; font-size: 14px; color: var(--ink-3); overflow-wrap: anywhere; }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.about { border-top: 1px solid var(--rule); padding: 48px 24px 40px; max-width: 1180px; margin: 0 auto; }
.about h2 { font-size: 30px; margin-bottom: 18px; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.about-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .about-grid--4 { grid-template-columns: 1fr 1fr; } }
.about h3 { font-size: 18px; margin-bottom: 8px; }
.about p { color: var(--ink-2); font-size: 16px; }
.footer {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 48px;
padding: 22px max(24px, calc((100% - 1180px) / 2 + 24px)); font-size: 14px; color: var(--ink-3); border-top: 1px solid var(--rule);
}
.dedication {
justify-self: end; max-width: 34ch; margin: 0; padding-top: 10px; border-top: 1.5px solid var(--gold);
text-align: end; font-size: 13px; font-style: italic; line-height: 1.55; color: var(--ink-2);
}
.notfound { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
.notfound .hero-intro { margin: 12px 0 24px; }
.backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(23, 48, 42, .42); }
@media (max-width: 1279px) {
.layout { grid-template-columns: minmax(0, 1fr) 380px; }
.rail { display: none; }
:root { --spine-w: 262px; --lane-w: 116px; }
}
@media (max-width: 1099px) {
.layout { grid-template-columns: minmax(0, 1fr); }
.only-compact { display: inline-flex; }
.legend-inline { display: block; }
.panel-legend { display: none; }
.tree { padding: 18px 20px 56px; }
.panel {
position: fixed; z-index: 50; top: 0; inset-inline-end: 0; bottom: 0; height: auto;
width: min(460px, 92vw); border-inline-start: 1px solid var(--rule);
box-shadow: var(--shadow);
transform: translateX(calc(105% * var(--dir))); visibility: hidden;
transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.panel.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease); }
.sheet-bar {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
position: sticky; top: 0; z-index: 2; background: var(--surface);
padding-block: 8px; padding-inline: 18px 10px; border-bottom: 1px solid var(--rule);
}
.detail { padding-top: 0; }
.sheet-bar { margin: 0 -22px 12px; padding-block: 8px; padding-inline: 22px 10px; }
}
@media (max-width: 860px) {
.search { width: min(340px, 42vw); }
.about-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 699px) {
:root {
--topbar-h: 58px;
--gen-w: 30px;
--m: 44px;
--m-base: 44px;
--pad-y: 12px;
--lane-w: 86px;
--lane-col: 0px;
--lane-x: calc(100% - var(--lane-w) / 2);
}
body { font-size: 16.5px; }
.topbar { padding-block: 0; padding-inline: 14px 8px; gap: 6px; }
.search + .topbar-actions { margin-inline-start: auto; }
.brand-name { font-size: 17px; }
.search {
display: none; position: fixed; z-index: 70; top: 0; left: 0; right: 0; width: auto;
height: var(--topbar-h); padding-block: 7px; padding-inline: 12px 8px; background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.search.is-open { display: block; }
.search input { padding-inline-end: 48px; }
.search-icon { inset-inline-start: 26px; top: 18px; }
.search-close { display: inline-grid; inset-inline-end: 8px; top: 7px; }
.search-results { left: 8px; right: 8px; max-height: calc(100dvh - var(--topbar-h) - 16px); }
.hero { padding: 32px 16px 28px; gap: 14px; }
.hero-intro { font-size: 17.5px; }
.hero-chain-ar { font-size: 19px; line-height: 1.9; }
.hero-chain { display: none; }
.hero-actions .btn { flex: 1 1 auto; }
.tree { padding-block: 14px 48px; padding-inline: 8px 12px; }
.legend-inline .legend-item[data-filter] { min-height: 44px; }
.legend-inline { padding: 12px 10px 10px; }
.row { grid-template-columns: var(--gen-w) minmax(0, 1fr) var(--lane-col); }
.row.has-lane { --lane-col: var(--lane-w); }
.spine-cell { grid-column: 2; grid-row: 1; }
.lane { grid-column: 3; grid-row: 1 / span 2; }
.branches { grid-column: 2; grid-row: 2; padding-block: 10px 0; padding-inline: calc(var(--m) / 2 + 10px) 0; }
.row:not(.has-lane) .branches { grid-column: 2 / -1; }
.gen { font-size: 12px; }
.node { gap: 11px; }
.node-name { font-size: 17.5px; }
.node-role { font-size: 14px; }
.spouse-line { margin-inline-start: calc(var(--m) + 11px); font-size: 14px; }
.chip-kids { margin-inline-start: 38px; }
.lane-node { --m: 34px; }
.lane-name { font-size: 12.5px; max-width: 10ch; }
.lane-tag { font-size: 11.5px; }
.era, .band { padding-block: 22px 14px; padding-inline: calc(var(--axis) + 18px) 6px; }
.era.has-lane .era-body { max-width: none; margin-inline-end: calc(var(--lane-w) + 6px); }
.era-title { font-size: 20px; }
.era-blurb { font-size: 15px; }
.band-title { font-size: 19px; }
.row--prophet { --m: 64px; --mid: calc(var(--pad-y) + 64px / 2); }
.row--prophet .medal { font-size: 22px; }
.row--prophet .node-name { font-size: 21px; }
.hh-group { padding: 14px 12px 16px; margin-top: 20px; }
.wives { grid-template-columns: 1fr 1fr; gap: 6px; }
.wife .node { --m: 38px; gap: 8px; padding-block: 4px; padding-inline: 4px 6px; }
.wife .node-name { font-size: 15px; }
.families { grid-template-columns: 1fr; }
.panel {
top: auto; left: 0; right: 0; width: auto; max-height: 88dvh;
border-inline-start: 0; border-radius: 18px 18px 0 0;
transform: translateY(105%);
}
.sheet-bar { margin: 0 -16px 12px; padding-block: 12px 6px; padding-inline: 16px 12px; border-radius: 18px 18px 0 0; }
.sheet-bar::before {
content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px;
border-radius: 2px; background: var(--line);
}
.detail { padding: 14px 16px calc(32px + env(safe-area-inset-bottom)); }
.d-head .medal { --m: 60px; font-size: 19px; }
.d-name { font-size: 24px; }
.d-ar { font-size: 22px; }
.d-family { grid-template-columns: 1fr; gap: 0; }
.d-family dt { margin-top: 8px; font-size: 14.5px; }
.about { padding: 36px 16px 32px; }
.about h2 { font-size: 26px; }
}
@media (max-width: 380px) {
.brand-name { font-size: 16px; }
:root { --lane-w: 78px; }
.wives { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
.topbar, .panel, .rail, .legend-inline, .hero-actions, .footer .dedication, .backdrop, .search, .chipbar, .chipbar-count,
.band-toggle, .dynasty-toggle, .clan-toggle, .d-actions, .ev-chevron, .ev-actions, .map-note, .quiz { display: none !important; }
.layout { display: block; }
.center { max-width: none; }
.row--upper[hidden] { display: grid !important; }
.ev-body[hidden], .clan-body[hidden], .reigns[hidden] { display: block !important; }
.ev-head, .card-btn, .reign-btn, .place-btn, .badr-btn, .clan { break-inside: avoid; border-color: #bbb; }
.node-name, .ev-title, .block-title, .era-title { color: #000; }
a { color: #000; text-decoration: none; }
.ev-sources a::after, .d-sources a::after { content: " (" attr(href) ")"; font-size: 11px; }
body { font-size: 12pt; background: #fff; }
.hero { padding: 0 0 16px; border: 0; }
.map { height: 0; border: 0; }
@page { margin: 16mm; }
}
.pages { position: relative; margin-inline-start: 6px; }
.pages-btn {
display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding-block: 0; padding-inline: 14px 10px; border-radius: 999px;
border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-size: 16px; font-weight: 700; color: var(--ink);
}
.pages-btn:hover, .pages-btn[aria-expanded="true"] { border-color: var(--ink); }
.pages-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s var(--ease); }
.pages-btn[aria-expanded="true"] .pages-chev { transform: rotate(180deg); }
.pages-icon, .pages-btn-menu { display: none; }
.pages-menu {
position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-start: 0; width: min(380px, calc(100vw - 24px));
list-style: none; margin: 0; padding: 6px;
background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.pages-menu a {
display: grid; gap: 1px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); min-height: 44px;
}
.pages-menu a:hover { background: var(--surface-2); }
.pages-menu a[aria-current="page"] { background: var(--ink); color: #fff; }
.pages-menu a[aria-current="page"] .pages-desc { color: rgba(255,255,255,.75); }
.pages-label { font-weight: 700; font-size: 16px; }
.pages-desc { font-size: 13px; color: var(--ink-3); line-height: 1.3; }
.hero-quote { font-family: var(--font-ar); font-size: clamp(26px, 3vw, 36px); line-height: 1.6; color: var(--gold-ink); width: 100%; text-align: left; }
.hero-note { font-size: 16px; color: var(--ink-3); }
.block { padding: 8px 0 36px; }
.block + .block { border-top: 1px solid var(--rule); padding-top: 32px; }
.block-title { font-size: 27px; font-weight: 700; }
.block-blurb { font-size: 16.5px; color: var(--ink-2); margin: 8px 0 18px; max-width: 72ch; }
.prose { font-size: 16.5px; color: var(--ink-2); max-width: 72ch; margin-top: 8px; }
.prose p { margin: 0 0 12px; }
.prose ol { margin: 0 0 14px; padding-inline-start: 24px; }
.prose li { margin-bottom: 6px; }
.office-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.office-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; line-height: 1.3; white-space: nowrap; border: 1.5px solid var(--ink); color: var(--ink); background: var(--surface); }
.office-tag--rasul { background: var(--ink); color: #fff; }
.office-tag--disputed { border-style: dashed; color: var(--ink-2); border-color: var(--ink-3); }
.office-tag--ulu { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.legend-item--tag { grid-template-columns: auto 1fr auto !important; }
.office-badge--rasul { background: var(--ink); color: #fff; }
.office-badge--disputed { background: var(--surface); border: 1.5px dashed var(--ink-3); }
.office-badge--ulu { background: var(--gold-soft); color: var(--gold-ink); }
.card[hidden] { display: none; }
.gen-badge {
display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border-radius: 6px;
font-size: 12.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
background: var(--surface-2); color: var(--ink-2);
}
.gen-badge.gen-sahabi { background: #DDEFE5; color: #155C3E; }
.gen-badge.gen-tabii { background: #E4E9F3; color: #2B4A80; }
.gen-badge.gen-later { background: var(--surface-2); color: var(--ink-3); }
.badge .gen-badge { margin: -2px -6px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cards--ten { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cards--people { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { position: relative; min-width: 0; display: flex; }
.card-btn {
width: 100%; height: 100%; align-items: flex-start; gap: 12px; padding-block: 12px; padding-inline: 12px 14px;
background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
transition: border-color .15s var(--ease), box-shadow .2s var(--ease);
}
.card-btn:hover { border-color: var(--line); box-shadow: var(--shadow); }
.card-btn > .medal { --m: 48px; margin-top: 2px; }
.cards--ten .card-btn > .medal { --m: 56px; }
.card .node-name { font-size: 18px; }
.card .node-role { font-size: 14px; }
.card-lived { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.card-no {
position: absolute; top: 8px; inset-inline-end: 12px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.card.is-missing { display: flex; gap: 12px; padding: 12px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-3); }
.card.is-missing .medal { --m: 56px; border-style: dashed; }
.card.is-selected .card-btn, .card .node.is-selected { border-color: var(--lapis); }
.node.is-selected.card-btn { border-color: var(--lapis); box-shadow: 0 0 0 3px var(--lapis-soft); }
.node.is-selected.reign-btn { border-color: var(--lapis); box-shadow: 0 0 0 3px var(--lapis-soft); }
.reigns { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reign-btn {
width: 100%; align-items: center; gap: 12px; padding-block: 8px; padding-inline: 8px 12px;
background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
transition: border-color .15s var(--ease);
}
.reign-btn:hover { border-color: var(--line); }
.reign-btn > .medal { --m: 44px; }
.reign-no { flex: none; width: 28px; text-align: end; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.reign .node-name { font-size: 17.5px; }
.reign-dates { display: block; font-size: 14px; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.reign .node-role { font-size: 14px; }
.reign .gen-badge { flex: none; margin-inline-start: auto; }
.reigns--long .reign-btn { padding-block: 5px; padding-inline: 6px 12px; border-radius: 10px; }
.reigns--long .reign-btn > .medal { --m: 36px; font-size: 13px; }
.reigns--long .reign .node-name { font-size: 16.5px; }
.reigns--long .reign .node-role { display: none; }
.empty { color: var(--ink-3); font-size: 15px; padding: 10px 0; }
.dynasty { padding: 18px 0 8px; }
.dynasty + .dynasty { border-top: 1px dashed var(--rule); }
.dynasty-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; margin-bottom: 12px; }
.dynasty-title { font-size: 21px; font-weight: 700; }
.dynasty-blurb { font-size: 15px; color: var(--ink-2); max-width: 64ch; margin: 0; }
.dynasty-toggle { grid-column: 2; grid-row: 1 / span 2; min-height: 40px; padding: 6px 14px; font-size: 15px; }
.dynasty-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s var(--ease); }
.dynasty-toggle[aria-expanded="false"] svg { transform: rotate(calc(-90deg * var(--dir))); }
.dynasty-aside { margin-top: 12px; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; }
.dynasty-aside .dynasty-blurb { margin-bottom: 8px; }
.chipbar { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbtn {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding-block: 0; padding-inline: 14px 12px; border-radius: 999px;
border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-size: 15px; color: var(--ink);
transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.chipbtn:hover { border-color: var(--ink-3); }
.chipbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chipbtn-n { font-size: 12.5px; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.chipbtn[aria-pressed="true"] .chipbtn-n { background: rgba(255,255,255,.18); color: #fff; }
.chipbar-count { margin: 10px 0 14px; font-size: 14px; color: var(--ink-3); min-height: 1.4em; }
.rail-era--sub .rail-era-link { padding-inline-start: 16px; font-size: 14px; }
.rail-dots--line { display: block; width: 2px; margin: 4px auto; background: var(--rule); align-self: stretch; }
.rail-era--sub .rail-dots--line { background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px); }
.guide-eras li.is-sub a { padding-inline-start: 14px; font-size: 14.5px; color: var(--ink-2); }
.legend-group--gens .legend-item { grid-template-columns: auto 1fr auto; }
.legend-group--gens .legend-label small { display: block; }
.panel-legend .legend-group--gens .legend-items, .legend-inline .legend-group--gens .legend-items { grid-template-columns: 1fr; }
.panel-legend .legend-group--gens .legend-label small, .legend-inline .legend-group--gens .legend-label small { display: block; }
.legend-jumps .jump {
display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line);
background: var(--surface); text-decoration: none; color: var(--ink); font-size: 15px;
}
@container tree (min-width: 900px) {
.cards--ten { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cards--people { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.reigns--long { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
.pages { margin-inline-start: 2px; }
}
@media (max-width: 699px) {
.pages { margin-inline-start: 0; }
.brand-name { display: none; }
.pages-btn { padding-block: 0; padding-inline: 10px 8px; font-size: 15px; min-width: 44px; }
.pages-menu::before { content: "Lightful Tree"; display: block; padding: 8px 12px 6px; font-size: 13px; color: var(--ink-3); }
.pages-btn-label { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pages-btn { padding-block: 0; padding-inline: 11px 14px; gap: 7px; }
.pages-btn .pages-btn-label, .pages-btn .pages-chev { display: none; }
.pages-icon { display: block; width: 20px; height: 20px; }
.pages-btn-menu { display: inline; }
.pages-menu::before { content: attr(data-title); }
.brand-name { font-size: 16px; }
.pages-menu { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 6px); width: auto; }
.block-title { font-size: 23px; }
.cards--ten, .cards--people { grid-template-columns: 1fr; }
.dynasty-head { grid-template-columns: 1fr; }
.dynasty-toggle { grid-column: 1; grid-row: auto; justify-self: start; }
.reign .gen-badge { display: none; }
.reign-btn { gap: 10px; }
.hero--companions { padding-bottom: 24px; }
.hero-quote { font-size: 22px; line-height: 1.7; }
}
.badr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 24px; align-items: start; }
.badr-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.badr-n { font-size: 13px; color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.badr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.badr-btn {
width: 100%; align-items: center; gap: 8px; padding-block: 4px; padding-inline: 4px 8px; min-height: 40px;
border-radius: 10px; background: transparent; border: 1px solid transparent;
transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.badr-btn:hover { background: var(--surface); border-color: var(--rule); }
.badr-btn > .medal { --m: 22px; border-width: 2px; }
.badr-no { flex: none; width: 26px; text-align: end; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.badr-row .node-name { font-size: 15.5px; font-weight: 400; }
.badr-clan { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.badr-mark {
flex: none; margin-inline-start: auto; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
color: var(--gold-ink); background: var(--gold-soft); border-radius: 6px; padding: 2px 7px;
}
.badr-row.is-martyr .node-name { font-weight: 700; }
.node.is-selected.badr-btn { background: var(--lapis-soft); border-color: var(--lapis); }
.node.is-selected.badr-btn .node-name { color: var(--lapis); }
.badr-row.is-prophet-row .badr-btn > .medal { --m: 30px; border-color: var(--gold); background: var(--gold-soft); font-size: 11px; }
.badr-row.is-prophet-row .node-name { font-weight: 700; }
.events { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.events::before { content: ""; position: absolute; inset-inline-start: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.ev-era { position: relative; padding-block: 22px 10px; padding-inline: 34px 0; }
.ev-era .era-title { font-size: 22px; }
.ev-era .era-blurb { margin-top: 4px; font-size: 15.5px; }
.ev { position: relative; margin: 0 0 8px; }
.ev-head {
position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "date chev" "title chev" "summary chev";
gap: 2px 10px; align-items: start; text-align: start;
padding-block: 12px; padding-inline: 34px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); cursor: pointer;
transition: border-color .15s var(--ease), box-shadow .2s var(--ease);
}
.ev-head:hover { border-color: var(--line); }
.ev.is-open .ev-head { border-color: var(--gold); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ev-dot {
position: absolute; inset-inline-start: -2px; top: 16px; width: 12px; height: 12px; border-radius: 50%;
background: var(--surface); border: 3px solid var(--gold); box-sizing: border-box;
}
.ev-head .ev-dot { inset-inline-start: 6px; }
.events .ev .ev-dot { inset-inline-start: -1px; margin-inline-start: 7px; }
.ev.is-uncertain .ev-dot { border-style: dashed; }
.ev.is-open .ev-dot { background: var(--gold); }
.ev-date { grid-area: date; font-size: 13.5px; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.ev-sep { color: var(--line); margin: 0 2px; }
.ev-title { grid-area: title; font-size: 18.5px; font-weight: 700; line-height: 1.25; }
.ev-ar { font-family: var(--font-ar); font-weight: 400; font-size: 1.05em; color: var(--ink-3); margin-inline-start: 6px; }
.ev-summary { grid-area: summary; font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.ev-chevron { grid-area: chev; width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; margin-top: 4px; transition: transform .2s var(--ease); }
.ev.is-open .ev-chevron { transform: rotate(180deg); }
.ev-body {
margin-inline-start: 22px; padding: 12px 16px 14px; border: 1px solid var(--gold); border-top: 0; border-radius: 0 0 14px 14px; background: var(--surface);
font-size: 15.5px; line-height: 1.6;
}
.ev-body p + p { margin-top: 10px; }
.ev-label { font-weight: 700; color: var(--ink-3); font-size: 13.5px; margin-inline-end: 6px; }
.ev-people { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ev-sources { font-size: 13.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.ev-actions { margin-top: 8px; font-size: 14px; }
.ev-body .d-note { margin: 10px 0; }
@container tree (min-width: 900px) {
.ev-head { grid-template-columns: 170px 1fr auto; grid-template-areas: "date title chev" "date summary chev"; gap: 2px 16px; padding-inline-start: 40px; }
.ev-date { padding-top: 3px; }
.ev-body { margin-inline-start: 22px; padding-inline-start: 40px; }
}
@media (max-width: 699px) {
.ev-head { padding-block: 10px; padding-inline: 30px 10px; }
.ev-title { font-size: 17px; }
.ev-summary { font-size: 14.5px; }
.ev-body { margin-inline-start: 12px; padding: 10px 12px 12px; }
}
.readers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.reader { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); padding: 10px 12px 12px; display: grid; gap: 8px; }
.reader-btn { width: 100%; align-items: center; gap: 10px; }
.reader-btn > .medal { --m: 44px; }
.reader-no { flex: none; width: 22px; text-align: end; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.reader .node-name { font-size: 18px; }
.reader .node-role { font-size: 14px; }
.rawis { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-inline-start: 32px; }
.node.is-selected.reader-btn > .medal { background: var(--lapis); color: #fff; border-color: var(--lapis); }
.flds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fld { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.fld-quran { background: var(--gold-soft); color: var(--gold-ink); }
.fld-hadith { background: #DDEFE5; color: #155C3E; }
.fld-fiqh { background: #E4E9F3; color: #2B4A80; }
.fld-tafsir { background: #F0E6F7; color: #5B3A85; }
.fld-sira { background: var(--maternal-soft); color: var(--maternal); }
.legend .fld { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; font-size: 12.5px; letter-spacing: .01em; white-space: nowrap; }
.chain { list-style: none; margin: 0; padding-block: 0; padding-inline: 14px 0; border-inline-start: 2px solid var(--gold); }
.chain-step { position: relative; padding-block: 2px; padding-inline: 14px 0; font-size: 16px; }
.chain-step::before { content: ""; position: absolute; inset-inline-start: -7px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--gold); }
.chain-end { color: var(--gold-ink); font-weight: 700; }
.chain-end::before { background: var(--gold); }
.gen-badge.gen-tabi-tabii { background: #EEE4F7; color: #5B3A85; }
.clans { list-style: none; margin: 0; padding: 0; }
.clans--root { display: grid; gap: 8px; }
.clan { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.clan .clan { border: 0; border-inline-start: 2px solid var(--rule); border-radius: 0; margin-block: 4px; margin-inline: 18px 0; background: transparent; }
.clan-head { display: flex; align-items: flex-start; gap: 6px; padding-block: 8px; padding-inline: 6px 10px; }
.clan .clan .clan-head { padding-block: 6px; padding-inline: 4px 8px; }
.clan-toggle { flex: none; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.clan-toggle:hover { background: var(--surface-2); }
.clan-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s var(--ease); }
.clan-toggle[aria-expanded="false"] svg { transform: rotate(calc(-90deg * var(--dir))); }
.clan-toggle.is-leaf { cursor: default; }
.clan-text { display: grid; gap: 2px; min-width: 0; padding-top: 6px; }
.clan-name { font-weight: 700; font-size: 17px; line-height: 1.25; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.clan-ar { font-family: var(--font-ar); font-weight: 400; font-size: 1.05em; color: var(--ink-3); }
.clan-n { font-size: 12px; font-weight: 400; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.clan-note { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.clan-anc { font-size: 13.5px; color: var(--ink-3); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.clan-body { padding-block: 0 8px; padding-inline: 48px 10px; }
.clan .clan .clan-body { padding-inline-start: 40px; }
.clan-members { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; }
.clan-link { color: var(--lapis); }
@media (max-width: 699px) {
.clan .clan { margin-inline-start: 8px; }
.clan-body { padding-inline-start: 14px; }
.clan .clan .clan-body { padding-inline-start: 12px; }
.clan-name { font-size: 16px; }
}
.map-wrap { margin: 12px 0 18px; }
.map { height: 420px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--surface-2); overflow: hidden; }
.map:focus-visible { outline-offset: 3px; }
.map-note { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.leaflet-container { font-family: var(--font); font-size: 14px; }
.leaflet-tooltip { font-family: var(--font); font-size: 14px; border-radius: 8px; border-color: var(--rule); }
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.place-btn {
display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: start; padding: 10px 12px; min-height: 56px;
border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); cursor: pointer; transition: border-color .15s var(--ease);
}
.place-btn:hover { border-color: var(--line); }
.place-btn.is-selected { border-color: var(--lapis); box-shadow: 0 0 0 3px var(--lapis-soft); }
.place-pin { flex: none; width: 16px; height: 16px; margin-top: 5px; overflow: visible; fill: #fff; stroke: var(--c, var(--gold)); stroke-width: 2.6; stroke-linejoin: round; }
.place-pin--big { width: 30px; height: 30px; margin-top: 0; stroke-width: 2.2; }
.map-pin { background: none; border: 0; }
.map-pin .place-pin { display: block; width: 100%; height: 100%; margin: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); transition: transform .2s var(--ease); }
.map-pin.is-selected { z-index: 1000 !important; }
.map-pin.is-selected .place-pin { stroke-width: 4; transform: scale(1.35); }
.map-pin:focus-visible { outline: 3px solid var(--lapis); outline-offset: 3px; border-radius: 4px; }
.place .node-name { font-size: 17px; }
.place .node-role { font-size: 14px; }
@media (max-width: 699px) {
.map { height: 300px; }
.places { grid-template-columns: 1fr; }
}
.as-mark { font-family: var(--font-ar); font-size: .8em; color: var(--gold-ink); font-weight: 400; margin-inline-start: 4px; }
.kins { list-style: none; margin: 0; padding: 0; }
.kins--root { display: grid; gap: 10px; }
.kin { position: relative; }
.kins .kins { margin-block: 4px; margin-inline: 14px 0; padding-inline-start: 16px; border-inline-start: 2px solid var(--gold); }
.kins .kins > .kin::before { content: ""; position: absolute; inset-inline-start: -16px; top: 16px; width: 12px; height: 2px; background: var(--gold); }
.kin-node { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 34px; }
.kin-note { font-size: 13px; color: var(--ink-3); }
.kin-father { font-weight: 700; font-size: 16px; }
.kin-h { font-size: 16px; margin: 18px 0 4px; }
.kin-sub { font-size: 14.5px; color: var(--ink-2); margin: 0 0 10px; max-width: 64ch; }
.kin-alone { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kin-alone li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.verses { display: flex; flex-wrap: wrap; gap: 6px; }
.verses a { font-size: 14px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); text-decoration: none; }
.chain-list .badr-btn > .medal { --m: 44px; font-size: 14px; }
.chain-list .badr-row.is-martyr .badr-mark { background: var(--gold-soft); }
.chain-list .badr-btn { min-height: 48px; }
.chain-fold { padding-block: 6px; padding-inline: 34px 0; }
.chain-list .badr-row.is-folded .badr-btn > .medal { background: var(--paper); }
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 1 !important; }
.leaflet-container { z-index: 0; }
.quiz-card { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); padding: 16px 18px 18px; }
.quiz-progress { font-size: 13.5px; color: var(--ink-3); margin-bottom: 8px; }
.quiz-text { font-size: 18px; line-height: 1.5; }
.quiz-score { font-size: 34px; font-weight: 700; }
.quiz-options { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.quiz-opt {
width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding-block: 8px; padding-inline: 8px 12px;
border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: start; font-size: 16px;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--ink); }
.quiz-opt > .medal { --m: 30px; }
.quiz-opt:disabled { cursor: default; opacity: .7; }
.quiz-opt.is-right { border-color: var(--f-muslim); background: #E6F3EC; opacity: 1; }
.quiz-opt.is-wrong { border-color: var(--f-not); background: #F8E6E3; opacity: 1; }
.quiz-feedback { margin-top: 12px; font-size: 16px; min-height: 1.5em; }
.quiz-actions { margin-top: 10px; }
#quiz-topics { margin: 4px 0 16px; }
.quiz-options--text .quiz-opt { justify-content: center; text-align: center; min-height: 52px; font-weight: 700; }
.quiz-summary { list-style: none; margin: 6px 0 16px; padding: 0; display: grid; gap: 2px; font-size: 15px; color: var(--ink-2); }
.narrators { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.narr-btn { width: 100%; align-items: center; gap: 10px; padding-block: 8px; padding-inline: 8px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.narr-btn > .medal { --m: 40px; }
.narr-bar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.narr-bar span { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.narr-n { flex: none; margin-inline-start: auto; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--gold-ink); font-weight: 700; }
.narr .node-role { font-size: 13.5px; }
.glossary { margin: 0; display: grid; gap: 10px; }
.gl { border-top: 1px solid var(--rule); padding-top: 10px; }
.gl dt { font-weight: 700; font-size: 16.5px; }
.gl dd { margin: 4px 0 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 699px) {
.quiz-options { grid-template-columns: 1fr; }
.quiz-text { font-size: 17px; }
}
.skeleton { height: 14px; margin: 10px 0; border-radius: 7px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--rule) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton.short { width: 60%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.node.is-selected > .medal { background: var(--lapis) !important; color: #fff !important; border-color: var(--lapis) !important; }
.hero-intro, .block-blurb, .prose p, .prose li, .about p, .guide > p, .d-story p, .d-note, .d-role,
.d-section > p:not(.verses):not(.ev-people):not(.note):not(.d-chain), .ev-body p, .kin-sub, .glossary dd, .footer > p:not(.dedication) {
text-align: justify; -webkit-hyphens: auto; hyphens: auto; text-wrap: pretty;
}
@media (max-width: 699px) {
.footer { grid-template-columns: 1fr; gap: 26px; }
.footer > p.dedication { max-width: 30ch; }
.footer { padding-left: 16px; padding-right: 16px; }
body[class*="page-"] .tree { padding-left: 16px; padding-right: 16px; }
}
.notfound-links { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 4px; }
.notfound-links a { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.notfound-links a:hover .pages-label { text-decoration: underline; }
.notfound-links .pages-desc { display: block; }
.langs { position: relative; flex: none; }
.langs-btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: 44px; padding-block: 0; padding-inline: 10px 12px;
border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); }
.langs-btn::-webkit-details-marker { display: none; }
.langs-btn:hover, .langs[open] > .langs-btn { border-color: var(--ink); }
.langs-globe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langs-menu { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-end: 0; min-width: 180px; list-style: none; margin: 0; padding: 6px;
background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.langs-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 16px; }
.langs-menu a:hover { background: var(--surface-2); }
.langs-menu a[aria-current="true"] { background: var(--ink); color: #fff; }
@media (max-width: 699px) { .langs-code { display: none; } .langs-btn { padding: 0; justify-content: center; width: 44px; } }
html[dir="rtl"] { --dir: -1; }
html[lang="ar"] { --font: "LT Naskh", "Amiri Marks", var(--font-latin); }
html[lang="fa"] { --font: "LT Vazirmatn", "Amiri Marks", var(--font-latin); }
html[lang="ur"] { --font: "LT Nastaliq", "Amiri Marks", var(--font-latin); }
html[dir="rtl"] :is(.d-ar, .hero-quote) { text-align: right; }
.d-ar.is-latn { font-family: var(--font-latin); font-size: 18px; line-height: 1.35; color: var(--ink-3); margin-bottom: 4px; }
html[dir="rtl"] .hero-chain { display: none; }
html[dir="rtl"] :is(.d-honor, .dedication) { font-style: normal; }
html[dir="rtl"] :is(.hero-title, .gen-badge, .badr-mark, .fld, .legend .fld) { letter-spacing: 0; }
.langs-menu a:is([lang="ur"], [lang="fa"]) { font-family: var(--font-ar); }
html[dir="rtl"] :is(.brand-name, .langs-code, [lang="en"], [lang="nl"], [lang="fr"], [lang="tr"], [data-latn]) { font-family: var(--font-latin); }
html[lang="fa"] :is(.d-sources, .prose ol) { list-style-type: persian; }
.text-btn { white-space: nowrap; min-width: 0; overflow: hidden; justify-content: center; justify-content: safe center; }
.topbar-actions { min-width: 0; }
@media (max-width: 380px) {
.topbar { padding-inline: 10px 6px; gap: 4px; }
.topbar-actions { gap: 4px; }
.pages-btn { padding-inline: 10px 12px; }
.text-btn { padding: 0 10px; font-size: 15px; }
}
.page-404 .langs-menu { inset-inline-end: auto; inset-inline-start: 0; }
html[lang="ur"] body { line-height: 2.1; }
html[lang="ur"] :is(h1, h2, h3, .node-name, .chip-name, .lane-name, .d-name, .ev-title, .clan-name, .result-name,
.rail-era-link, .legend-label, .pages-desc, .office-tag, .badr-clan) { line-height: 1.75; }
html[lang="ur"] :is(.node-role, .spouse-line, .chip-kids, .family-meta, .result-role, .legend-label small, .legend-hint,
.glance dd, .clan-note, .ev-summary) { line-height: 1.95; }
html[lang="ur"] :is(.hero-intro, .d-story p, .d-chain, .ev-body, .quiz-text, .gl dd, .dedication) { line-height: 2.25; }
@media (max-width: 699px) {
.langs-menu, .page-404 .langs-menu { position: fixed; top: calc(var(--topbar-h) + 6px); inset-inline: 12px; width: auto; min-width: 0; }
}
.footer:has(> .footer-app) { row-gap: 2px; }
.footer-app { grid-column: 1; margin: 0; }
.footer > .dedication { grid-column: 2; grid-row: 1 / span 2; }
.footer-app a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: none; }
.footer-app a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-app a[aria-current="page"] { color: var(--ink-3); }
.footer-app-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 699px) {
.footer > .dedication { grid-column: auto; grid-row: auto; }
.footer:has(> .footer-app) { row-gap: 26px; }
.footer > .footer-app { margin-top: -22px; }
.pages-menu { max-height: calc(100dvh - var(--topbar-h) - 18px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui), (display-mode: window-controls-overlay) {
.app-entry, .footer-app { display: none; }
.footer > .dedication { grid-row: auto; }
}
html.is-app :is(.app-entry, .footer-app) { display: none; }
html.is-app .footer > .dedication { grid-row: auto; }
.page-install .langs { margin-inline-start: auto; }
.install { max-width: 1180px; margin: 0 auto; }
.install .hero { padding-inline: 24px; border-bottom: 0; padding-block-end: 20px; }
body:not(.is-rendered) .install-guide { visibility: hidden; min-height: 100vh; }
.install-guide { display: grid; gap: 22px; padding: 4px 24px 56px; }
.install-guide:focus { outline: none; }
.install-now {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px;
background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.install-now-icon { width: 64px; height: 64px; flex: none; border-radius: 15px; border: 1px solid var(--rule); }
.install-now-text { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.install-now-name { font-weight: 700; font-size: 19px; }
.install-now-text p + p { color: var(--ink-2); }
.install-now-btn { flex: none; }
.devices { display: grid; gap: 12px; }
.device { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.device-title { font-size: 21px; }
.device-toggle {
display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 12px 18px;
border: 0; border-radius: var(--radius); background: none; cursor: pointer; text-align: start; font-weight: 700; color: var(--ink);
}
.device-toggle:hover { background: var(--surface-2); }
.device-icon { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.device-mine { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--lapis-soft); color: var(--lapis); font-size: 13.5px; line-height: 1.5; }
.device-chev { width: 20px; height: 20px; flex: none; margin-inline-start: auto; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s var(--ease); }
.device-toggle[aria-expanded="true"] .device-chev { transform: rotate(180deg); }
.device-body { padding: 0 20px 22px; border-top: 1px solid var(--rule); }
.device-lead { margin: 16px 0 14px; color: var(--ink-2); }
.device-note { margin-top: 18px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 15.5px; }
.device-note + .device-note { margin-top: 8px; }
.install-foot { color: var(--ink-3); font-size: 15px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "dw dw" "n text"; align-content: start; gap: 14px 12px; }
.step .dw { grid-area: dw; }
.step-n {
grid-area: n; display: grid; place-items: center; width: 30px; height: 30px;
border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: 15px; line-height: 1;
}
.step-text { grid-area: text; font-size: 16px; color: var(--ink-2); }
.step-text b, .device-note b, .install-foot b { color: var(--ink); }
.glyph { font-family: system-ui, -apple-system, "Segoe UI Symbol", sans-serif; font-size: 1.2em; line-height: 1; }
.dw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dw { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; direction: ltr; }
.dw--phone { max-width: 224px; }
.dw--screen { max-width: 330px; }
.dw .dw-frame { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.dw .dw-screen { fill: var(--paper); }
.dw .dw-ink { fill: var(--ink); }
.dw .dw-soft { fill: var(--line); }
.dw .dw-line { fill: var(--rule); }
.dw .dw-block, .dw .dw-group, .dw .dw-field, .dw .dw-tabs { fill: var(--surface-2); }
.dw .dw-pop, .dw .dw-sheet, .dw .dw-card, .dw .dw-bar, .dw .dw-btn, .dw .dw-dock, .dw .dw-icon { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.dw .dw-bar-flat, .dw .dw-tab, .dw .dw-knob { fill: var(--surface); }
.dw .dw-app { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.dw .dw-on { fill: var(--ink-2); }
.dw .dw-dim { fill: var(--ink); opacity: .3; }
.dw .dw-k { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dw .dw-hot { fill: var(--lapis-soft); stroke: var(--lapis); stroke-width: 2.4; }
.dw .dw-hot-k { fill: none; stroke: var(--lapis); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dw .dw-hot-f { fill: var(--lapis); }
.dw .dw-arrow { fill: none; stroke: var(--lapis); stroke-width: 2.6; stroke-linecap: round; }
.dw-head { fill: none; stroke: var(--lapis); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dw .dw-tree { fill: none; stroke: var(--line); stroke-width: 2; }
.dw .dw-node { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.dw .dw-node-g { stroke: var(--gold); stroke-width: 2.6; }
.dw .dw-mark { fill: var(--surface); stroke: var(--ink); stroke-width: 2.4; }
.dw .dw-mark path { fill: none; }
.dw .dw-mark .dw-mark-g { stroke: var(--gold); stroke-width: 3; }
.dw .dw-mark .dw-mark-r { stroke: var(--maternal); }
.dw .dw-text { font-family: var(--font-latin); font-size: 10px; font-weight: 700; fill: var(--ink); }
@media (max-width: 860px) {
.steps { grid-template-columns: 1fr; gap: 26px; }
.step { grid-template-columns: 200px 30px minmax(0, 1fr); grid-template-areas: "dw n text"; align-items: start; column-gap: 16px; }
.step .dw--phone { max-width: 200px; }
.step .dw--screen { max-width: 200px; align-self: center; }
}
@media (max-width: 559px) {
.step { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "dw dw" "n text"; }
.step .dw--phone { max-width: 224px; }
.step .dw--screen { max-width: 300px; }
}
@media (max-width: 699px) {
.install .hero { padding-inline: 16px; }
.install-guide { padding-inline: 16px; }
.install-now { padding: 16px; column-gap: 14px; }
.install-now-icon { width: 56px; height: 56px; border-radius: 13px; }
.install-now-btn { width: 100%; }
.device-title { font-size: 19px; }
.device-toggle { padding-inline: 14px; gap: 10px; }
.device-body { padding-inline: 14px; }
}
.offline-saved { margin-top: 36px; }
.offline-saved h2 { font-size: 20px; }
.offline-saved .notfound-links { margin-top: 12px; }
.offline-saved .notfound-links + .notfound-links { margin-top: 0; }