/* sprite 图标样式（/timeline/sprite.svg，与 /icons/sprite.svg 同一份，Lucide）：与 /css/icons.css、首页内联块同步；取代 Font Awesome */
.i{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;overflow:visible}
.i-fill{fill:currentColor}
.i-spin{animation:i-spin 1s linear infinite}
@keyframes i-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.i-spin{animation-duration:2.5s}}

    :root {
      --bg-deep: #02063c;
      --bg-mid: #021a66;
      --line-dark: rgba(0, 14, 64, 0.92);
      --line-soft: rgba(13, 44, 118, 0.55);
      --bar-main: #1782f5;
      --bar-edge: #071f66;
      --gold: #f0cb41;
      --gold-strong: #ffd617;
      --green: #42ff1a;
      --white: #f7f8ff;
      --muted: rgba(255,255,255,0.82);
      --stage-left: 20px;
      --year-scale: 1px;
      --row-height: 43px;
      --row-gap: 14px;
      --timeline-width: 1260px;
      --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;

      --modal-bg: linear-gradient(180deg, rgba(21,27,79,0.98) 0%, rgba(17,23,70,0.98) 100%);
      --modal-header: linear-gradient(180deg, #1875d8 0%, #1569c7 100%);
      --modal-shadow: 0 24px 70px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.06);
      --radius-lg: 20px;
      --radius-md: 16px;
      --radius-sm: 12px;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font);
      color: var(--white);
      background: linear-gradient(180deg, #01053e 0%, #021055 34%, #021766 100%);
      overflow-x: auto;
    }

    body.modal-open {
      overflow-x: auto;
    }

    .page {
      min-width: 1440px;
      padding: 140px 28px 120px;
      position: relative;
      margin-top: 100px;
    }

    .title {
      margin: 0 0 8px;
      font-size: 30px;
      font-weight: 900;
      letter-spacing: -0.5px;
    }

    .subtitle {
      margin: 0 0 24px;
      font-size: 15px;
      color: rgba(255,255,255,0.88);
      font-weight: 500;
    }

    .timeline-wrap {
      position: relative;
      width: var(--timeline-width);
      margin-top: 52px;
    }

    .grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .grid-line {
      position: absolute;
      left: 0;
      right: 0;
      height: calc(var(--row-height) + var(--row-gap));
      border-top: 5px solid rgba(15, 38, 92, 0.62);
      opacity: 0.42;
    }

    .rows {
      position: relative;
      z-index: 2;
      padding-top: 50px;
    }

    .row {
      position: relative;
      height: var(--row-height);
      margin-bottom: var(--row-gap);
    }

    .row.enos-row {
      margin-bottom: calc(var(--row-gap) + 45 * (var(--row-height) + var(--row-gap)));
    }

    .bar {
      position: absolute;
      top: 0;
      height: var(--row-height);
      display: flex;
      align-items: center;
      background: linear-gradient(90deg, #2b6ef5 0%, #3579F7 60%, #3070f0 100%);
      box-shadow: 0 6px 16px rgba(0,0,0,0.28);
      border-radius: 0;
      overflow: hidden;
      transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
    }

    .bar:hover {
      transform: translateY(-3px) scale(1.015);
      filter: brightness(1.08);
      box-shadow: 0 12px 28px rgba(0,0,0,0.38), 0 0 20px rgba(23, 130, 245, 0.25);
    }

    .bar.adam { left: var(--stage-left); width: calc(930 * var(--year-scale)); }
    .bar.seth { left: calc(var(--stage-left) + 130px); width: calc(912 * var(--year-scale)); }
    .bar.enos { left: calc(var(--stage-left) + 235px); width: calc(905 * var(--year-scale)); }

    .bar.cainan {
      top: calc(var(--row-height) + var(--row-gap));
      left: calc(var(--stage-left) + 1140px);
      width: calc(910 * var(--year-scale));
    }

    .bar.mahalaleel {
      top: calc(2 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 2050px);
      width: calc(895 * var(--year-scale));
    }

    .bar.jared {
      top: calc(3 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 2945px);
      width: calc(962 * var(--year-scale));
    }

    .bar.enoch {
      top: calc(4 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 3907px);
      width: calc(365 * var(--year-scale));
    }

    .bar.methuselah {
      top: calc(5 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 4272px);
      width: calc(969 * var(--year-scale));
    }

    .bar.lamech {
      top: calc(6 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 5241px);
      width: calc(777 * var(--year-scale));
    }

    /* Noah: row 7, starts yr 5423, width 950 */
    .bar.noah {
      top: calc(7 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 5423px);
      width: calc(950 * var(--year-scale));
    }

    /* Shem: row 8, starts yr 5925, width 600 */
    .bar.shem {
      top: calc(8 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 5925px);
      width: calc(600 * var(--year-scale));
    }

    /* Arphaxad: row 9, starts yr 6525, width 438 */
    .bar.arphaxad {
      top: calc(9 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6525px);
      width: calc(438 * var(--year-scale));
    }

    /* Salah: row 10, starts yr 6963, width 433 */
    .bar.salah {
      top: calc(10 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6963px);
      width: calc(433 * var(--year-scale));
    }

    /* Eber: row 11, starts yr 7396, width 464 */
    .bar.eber {
      top: calc(11 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 7396px);
      width: calc(464 * var(--year-scale));
    }

    /* Peleg: row 12, starts yr 7860, width 239 */
    .bar.peleg {
      top: calc(12 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 7860px);
      width: calc(239 * var(--year-scale));
    }

    /* Reu: row 13, starts yr 8099, width 239 */
    .bar.reu {
      top: calc(13 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8099px);
      width: calc(239 * var(--year-scale));
    }

    /* Serug: row 14, starts yr 8338, width 230 */
    .bar.serug {
      top: calc(14 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8338px);
      width: calc(230 * var(--year-scale));
    }

    /* Nahor: row 15, starts yr 8568, width 148 */
    .bar.nahor {
      top: calc(15 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8568px);
      width: calc(148 * var(--year-scale));
    }

    /* Terah: row 16, starts yr 8716, width 205 */
    .bar.terah {
      top: calc(16 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8716px);
      width: calc(205 * var(--year-scale));
    }

    /* Abraham: row 17, starts yr 8846 (immediate son of Terah, exception) */
    /* Abraham: born 2167 BC yr 8846, dies 1992 BC yr 9021, width=175 */
    .bar.abraham {
      top: calc(17 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8846px);
      width: calc(175 * var(--year-scale));
    }

    /* ── Flood marker ── */
    .flood-marker {
      position: absolute;
      left: calc(var(--stage-left) + 6023px);
      /* Start just above Lamech row (row 6): rows padding-top 50px + 6*(43+14) = 50+342 = 392px, minus label space */
      top: calc(50px + 6 * (var(--row-height) + var(--row-gap)) - 28px);
      width: 2px;
      height: calc(12 * (var(--row-height) + var(--row-gap)) + var(--row-height) + 40px);
      background: linear-gradient(to bottom, transparent, #42ff1a 8%, #42ff1a 92%, transparent);
      z-index: 6;
      pointer-events: none;
    }

    .flood-circle {
      position: absolute;
      left: -8px;
      top: 4px;
      width: 18px;
      height: 18px;
      background: #42ff1a;
      border-radius: 50%;
      box-shadow: 0 0 10px 4px #42ff1a, 0 0 24px 10px rgba(66,255,26,0.6);
      animation: floodPulse 1.8s infinite ease-in-out;
      cursor: pointer;
      pointer-events: all;
      z-index: 7;
    }

    /* Flood-toggled chip state */
    .offset-chip-below.flood-active {
      background: rgba(66,255,26,0.18) !important;
      outline-color: #42ff1a !important;
      color: #42ff1a !important;
      animation: floodChipPulse 2s ease-in-out infinite !important;
    }

    .offset-chip-below.flood-active::before {
      background: conic-gradient(
        from var(--shimmer-angle, 0deg),
        transparent 0deg,
        rgba(66,255,26,0.9) 40deg,
        rgba(100,255,60,0.6) 80deg,
        transparent 120deg,
        transparent 360deg
      ) !important;
    }

    .offset-chip-below.flood-active::after {
      background: rgba(10, 38, 10, 0.85) !important;
    }

    @keyframes floodChipPulse {
      0%, 100% { box-shadow: 0 0 6px 1px rgba(66,255,26,0.6), 0 0 14px 3px rgba(66,255,26,0.25); }
      50%       { box-shadow: 0 0 14px 4px rgba(66,255,26,0.95), 0 0 30px 10px rgba(66,255,26,0.4); }
    }

    @keyframes floodPulse {
      0%, 100% { transform: scale(1); opacity: 0.9; box-shadow: 0 0 10px 4px #42ff1a, 0 0 24px 10px rgba(66,255,26,0.5); }
      50%       { transform: scale(1.4); opacity: 1;   box-shadow: 0 0 20px 8px #42ff1a, 0 0 40px 18px rgba(66,255,26,0.75); }
    }

    .flood-label {
      position: absolute;
      left: calc(var(--stage-left) + 6046px);
      top: calc(50px + 6 * (var(--row-height) + var(--row-gap)) - 26px);
      font-size: 13px;
      font-weight: 900;
      color: #0a1a0a;
      white-space: nowrap;
      z-index: 6;
      letter-spacing: 0.06em;
      display: flex;
      align-items: center;
      gap: 5px;
      background: #42ff1a;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 4px;
      padding: 3px 8px;
      box-shadow: 0 0 10px rgba(66,255,26,0.7), 0 0 22px rgba(66,255,26,0.35);
      cursor: pointer;
      user-select: none;
      transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    }

    .flood-label:hover {
      background: #5fff3a;
      box-shadow: 0 0 16px rgba(66,255,26,0.9), 0 0 32px rgba(66,255,26,0.5);
      transform: translateY(-1px);
    }

    .flood-label:active {
      transform: translateY(0px) scale(0.97);
    }

    /* ── Flood timepath button ── */
    .tp-flood-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1px 5px;
      margin-left: 5px;
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(0,0,0,0.4);
      border-radius: 4px;
      color: #0a1a0a;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
      vertical-align: middle;
      line-height: 1.4;
      transition: background 0.15s, transform 0.1s;
      flex-shrink: 0;
    }
    .tp-flood-btn:hover {
      background: rgba(0,0,0,0.4);
      transform: scale(1.12);
    }
    .tp-flood-btn.active {
      background: rgba(0,0,0,0.45);
    }

    /* ── 20 × 10px ticks immediately right of Noah's 950 bar ── */
    .noah-ticks {
      position: absolute;
      top: calc(7 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6373px);
      height: var(--row-height);
      display: flex;
      gap: 0;
      z-index: 6;
    }
    .noah-tick {
      width: 10px;
      height: var(--row-height);
      background: linear-gradient(90deg, #2b6ef5 0%, #3579F7 60%, #3070f0 100%);
      border: 1px solid #14306b;
      opacity: 0.7;
      cursor: pointer;
      transform-origin: center bottom;
      transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
    }
    .noah-tick + .noah-tick { margin-left: -1px; }
    .noah-arrow { margin-left: -1px; }
    .noah-tick:last-child { border-right: 1px solid #14306b; }
    .noah-ticks:not(.expanded) .noah-tick:hover {
      animation: noahTickWarp 0.5s ease-out;
      z-index: 7;
    }
    @keyframes noahTickWarp {
      0%   { transform: scaleY(1) scaleX(1);        filter: brightness(1);   box-shadow: 0 0 0 rgba(53,121,247,0); }
      35%  { transform: scaleY(1.5) scaleX(1.8);    filter: brightness(1.6); box-shadow: 0 0 18px rgba(53,121,247,1); border-radius: 3px; }
      65%  { transform: scaleY(0.92) scaleX(1.1);   filter: brightness(1.2); }
      100% { transform: scaleY(1) scaleX(1);        filter: brightness(1);   box-shadow: 0 0 0 rgba(53,121,247,0); }
    }
    .noah-arrow {
      width: 30px;
      height: var(--row-height);
      background: linear-gradient(90deg, #2b6ef5 0%, #3579F7 60%, #3070f0 100%);
      border: 1px solid #14306b;
      opacity: 0.5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      overflow: hidden;
      transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    }
    .noah-arrow:hover {
      opacity: 1;
      transform: scaleY(1.18) scaleX(1.12);
      filter: brightness(1.3);
      box-shadow: 0 0 16px rgba(53,121,247,0.95);
      z-index: 7;
    }
    /* expanded state: each tick stretches to 950px and shows "950 years" */
    .noah-ticks.expanded .noah-tick {
      width: 950px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 0.6s cubic-bezier(.25,.9,.3,1), opacity 0.4s ease, filter 0.15s ease;
    }
    .noah-ticks.expanded .noah-tick:hover { filter: brightness(0.7); }
    .noah-ticks.expanded .noah-tick::after {
      content: '950 岁';
      font-size: 15px;
      font-weight: 900;
      color: #fff;
      white-space: nowrap;
      opacity: 0;
      animation: noahLabelFade 0.4s ease 0.35s forwards;
    }
    @keyframes noahLabelFade { to { opacity: 1; } }
    .noah-ticks.expanded .noah-arrow span { animation: none; }
    .noah-ticks.expanded .noah-arrow { display: none; }
    .noah-arrow span {
      display: inline-block;
      animation: noahArrowNudge 1.1s ease-in-out infinite;
    }
    @keyframes noahArrowNudge {
      0%, 100% { transform: translateX(-3px); }
      50%      { transform: translateX(3px); }
    }

    /* ── 350-year blue timepath (×20 = 7,000 years, 4,990 BC → 2,011 AD) ── */
    .timepath-350 {
      position: absolute;
      top: calc(50px + 8 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6023px);
      width: 7000px;
      height: var(--row-height);
      display: none;
      z-index: 5;
    }
    .timepath-350.revealed { display: flex; }
    .tp350-seg {
      width: 350px;
      height: 100%;
      background: linear-gradient(90deg, #2b6ef5 0%, #3579F7 60%, #3070f0 100%);
      border-right: 1px solid rgba(255,255,255,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      transition: filter 0.15s, transform 0.12s;
    }
    .tp350-seg:first-child { border-radius: 0; }
    .tp350-seg:last-child { border-right: none; border-radius: 0 8px 8px 0; }
    .tp350-seg:hover { filter: brightness(0.7); z-index: 6; }
    .tp350-seg .seg-num {
      font-size: 17px; font-weight: 900; color: rgba(255,255,255,0.95);
      pointer-events: none;
    }
    .timepath-350:hover { box-shadow: 0 0 22px rgba(59,130,246,0.35); }
    /* glow on the whole strip */
    .timepath-350::after {
      content: ''; position: absolute; inset: 0; border-radius: 0 8px 8px 0;
      box-shadow: 0 0 18px rgba(59,130,246,0.4), 0 0 40px rgba(59,130,246,0.15);
      pointer-events: none; z-index: -1;
    }
    .tp350-label {
      font-size: 18px;
      font-weight: 900;
      color: #fff !important;
      white-space: nowrap;
      letter-spacing: 0.05em;
      text-shadow: none !important;
      pointer-events: none;
    }

    /* ── 7000-year timepath bar ── */
    .timepath-flood {
      position: absolute;
      top: calc(50px + 7 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6023px);
      width: 7000px;
      height: var(--row-height);
      background: #42ff1a;
      border: none;
      border-radius: 0 10px 10px 0;
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      z-index: 5;
      box-shadow: 0 0 24px rgba(66,255,26,0.6), 0 0 56px rgba(66,255,26,0.25);
      animation: tpFloodGlow 2.4s ease-in-out infinite;
    }
    .timepath-flood.visible { display: flex; }
    @keyframes tpFloodGlow {
      0%,100% { box-shadow: 0 0 24px rgba(66,255,26,0.6), 0 0 56px rgba(66,255,26,0.25); }
      50%      { box-shadow: 0 0 40px rgba(66,255,26,0.9), 0 0 80px rgba(66,255,26,0.4); }
    }
    .tp-start, .tp-end {
      font-size: 13px;
      font-weight: 700;
      color: #000 !important;
      white-space: nowrap;
      letter-spacing: 0.04em;
      flex-shrink: 0;
      text-shadow: none !important;
    }
    .tp-highlight {
      font-size: 17px;
      font-weight: 900;
      color: #000 !important;
      letter-spacing: 0.04em;
      text-shadow: none !important;
    }
    .tp-center {
      font-size: 14px;
      font-weight: 900;
      color: #000 !important;
      white-space: nowrap;
      letter-spacing: 0.06em;
      text-align: center;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: none !important;
    }
    .timepath-flood * {
      color: #000 !important;
      text-shadow: none !important;
    }

    .flood-ark-icon {
      display: inline-block;
      line-height: 1;
      font-size: 13px;
    }

    .bar-content {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      position: relative;
      z-index: 2;
    }

    .center-label {
      flex: 1;
      text-align: center;
      font-size: 17px;
      font-weight: 900;
    }

    .right-label {
      font-size: 17px;
      font-weight: 900;
      padding-left: 12px;
      padding-right: 6px;
      text-align: right;
      min-width: 52px;
    }

    .star {
      color: #ffd632;
      margin-right: 5px;
    }

    .muted {
      color: rgba(255,255,255,0.75);
      font-weight: 500;
      font-size: 0.92em;
    }


    /* ── Begat chip glow animations ── */
    @keyframes borderSpin {
      0%   { --angle: 0deg; }
      100% { --angle: 360deg; }
    }

    @keyframes glowPulse {
      0%, 100% { box-shadow: 0 0 6px 1px rgba(23,130,245,0.55), 0 0 14px 3px rgba(23,130,245,0.25), inset 0 0 8px rgba(23,130,245,0.08); }
      50%       { box-shadow: 0 0 12px 3px rgba(80,180,255,0.85), 0 0 28px 8px rgba(23,130,245,0.45), inset 0 0 14px rgba(80,180,255,0.15); }
    }

    @keyframes borderTravel {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .offset-chip,
    .offset-chip-below {
      position: absolute;
      height: var(--row-height);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 800;
      color: rgba(255,255,255,0.92);
      background: rgba(5, 29, 91, 0.30);
      text-shadow: 0 1px 2px rgba(0,0,0,0.4);
      user-select: none;
      cursor: pointer;
      border-radius: 4px;
      /* Animated glow border via outline + box-shadow layers */
      outline: 1.5px solid rgba(23,130,245,0.7);
      animation: glowPulse 2.4s ease-in-out infinite;
      z-index: 3;
      transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
      /* Rotating top-border shimmer via pseudo — handled with box-shadow only */
    }

    /* Spinning highlight overlay using ::before */
    .offset-chip::before,
    .offset-chip-below::before {
      content: '';
      position: absolute;
      inset: -1.5px;
      border-radius: 5px;
      background: conic-gradient(
        from var(--shimmer-angle, 0deg),
        transparent 0deg,
        rgba(100,200,255,0.9) 40deg,
        rgba(23,130,245,0.6) 80deg,
        transparent 120deg,
        transparent 360deg
      );
      z-index: -1;
      animation: shimmerSpin 2.8s linear infinite;
      pointer-events: none;
    }

    @property --shimmer-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    @keyframes shimmerSpin {
      to { --shimmer-angle: 360deg; }
    }

    /* Inner mask so the conic shows only as a border */
    .offset-chip::after,
    .offset-chip-below::after {
      content: '';
      position: absolute;
      inset: 1.5px;
      background: rgba(5, 22, 75, 0.82);
      border-radius: 3px;
      z-index: -1;
      pointer-events: none;
    }

    .offset-chip {
      top: 0;
      border-right: none;
      transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    }

    .offset-chip-below {
      top: calc(var(--row-height) + var(--row-gap));
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    .offset-chip:hover,
    .offset-chip-below:hover {
      background: #f0cb41;
      color: #0f1e3a;
      text-shadow: none;
      outline-color: #f0cb41;
      box-shadow: 0 10px 20px rgba(0,0,0,0.24), 0 0 20px rgba(240,203,65,0.45);
      animation: none;
    }

    .offset-chip:hover::before,
    .offset-chip-below:hover::before {
      background: conic-gradient(
        from var(--shimmer-angle, 0deg),
        transparent 0deg,
        rgba(255,220,80,0.9) 40deg,
        rgba(240,203,65,0.6) 80deg,
        transparent 120deg,
        transparent 360deg
      );
    }

    .offset-chip:hover::after,
    .offset-chip-below:hover::after {
      background: rgba(180,120,0,0.12);
    }

    .offset-chip.begat-trigger:hover {
      transform: translateY(-2px);
    }

    .offset-s1 { left: var(--stage-left); width: 130px; }
    .offset-s2 { left: calc(var(--stage-left) + 130px); width: 105px; }

    .offset-s3-below { 
      left: calc(var(--stage-left) + 235px); 
      width: 905px; 
      top: calc(var(--row-height) + var(--row-gap)); 
    }

    .offset-s4-below { 
      left: calc(var(--stage-left) + 1140px); 
      width: 910px; 
      top: calc(2 * (var(--row-height) + var(--row-gap)));
    }

    .offset-s5-below {
      left: calc(var(--stage-left) + 2050px);
      width: 895px;
      top: calc(3 * (var(--row-height) + var(--row-gap)));
    }

    .offset-s6-below {
      left: calc(var(--stage-left) + 2945px);
      width: 962px;
      top: calc(4 * (var(--row-height) + var(--row-gap)));
    }

    .offset-s7-below {
      left: calc(var(--stage-left) + 3907px);
      width: 365px;
      top: calc(5 * (var(--row-height) + var(--row-gap)));
    }

    .offset-s8-below {
      left: calc(var(--stage-left) + 4272px);
      width: 969px;
      top: calc(6 * (var(--row-height) + var(--row-gap)));
    }

    .offset-s9-below {
      left: calc(var(--stage-left) + 5241px);
      width: 182px;
      top: calc(7 * (var(--row-height) + var(--row-gap)));
    }

    /* Noah chip (immediate son, sits on Lamech row) */
    .offset-s10-below {
      left: calc(var(--stage-left) + 5423px);
      width: 502px;
      top: calc(8 * (var(--row-height) + var(--row-gap)));
    }

    /* Shem chip (descendant of Noah) */
    .offset-s11-below {
      left: calc(var(--stage-left) + 5925px);
      width: 600px;
      top: calc(9 * (var(--row-height) + var(--row-gap)));
    }

    /* Arphaxad chip */
    .offset-s12-below {
      left: calc(var(--stage-left) + 6525px);
      width: 438px;
      top: calc(10 * (var(--row-height) + var(--row-gap)));
    }

    /* Salah chip */
    .offset-s13-below {
      left: calc(var(--stage-left) + 6963px);
      width: 433px;
      top: calc(11 * (var(--row-height) + var(--row-gap)));
    }

    /* Eber chip */
    .offset-s14-below {
      left: calc(var(--stage-left) + 7396px);
      width: 464px;
      top: calc(12 * (var(--row-height) + var(--row-gap)));
    }

    /* Peleg chip */
    .offset-s15-below {
      left: calc(var(--stage-left) + 7860px);
      width: 239px;
      top: calc(13 * (var(--row-height) + var(--row-gap)));
    }

    /* Reu chip */
    .offset-s16-below {
      left: calc(var(--stage-left) + 8099px);
      width: 239px;
      top: calc(14 * (var(--row-height) + var(--row-gap)));
    }

    /* Serug chip */
    .offset-s17-below {
      left: calc(var(--stage-left) + 8338px);
      width: 230px;
      top: calc(15 * (var(--row-height) + var(--row-gap)));
    }

    /* Nahor chip */
    .offset-s18-below {
      left: calc(var(--stage-left) + 8568px);
      width: 148px;
      top: calc(16 * (var(--row-height) + var(--row-gap)));
    }

    /* Terah chip (Abraham is immediate — offset-s1 style) */
    .offset-s19-below {
      left: calc(var(--stage-left) + 8716px);
      width: 130px;
      top: calc(17 * (var(--row-height) + var(--row-gap)));
    }

    /* Abraham chip (for next patriarch) */
    .offset-s20-below {
      left: calc(var(--stage-left) + 8846px);
      width: 100px;
      top: calc(20 * (var(--row-height) + var(--row-gap)));
    }

    .span-2050 {
      position: absolute;
      top: calc(3 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 2050px;
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid #f0cb41;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(240, 203, 65, 0.95);
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 8px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .span-2945 {
      position: absolute;
      top: calc(4 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 2945px;
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid #f0cb41;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(240, 203, 65, 0.95);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      padding: 0 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .span-3907 {
      position: absolute;
      top: calc(5 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 3907px;
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid #f0cb41;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(240, 203, 65, 0.95);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      padding: 0 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .span-4272 {
      position: absolute;
      top: calc(6 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 4272px;
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid #f0cb41;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(240, 203, 65, 0.95);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      padding: 0 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .span-5241 {
      position: absolute;
      top: calc(7 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 5241px;
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid #f0cb41;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(240, 203, 65, 0.95);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      padding: 0 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    /* Shared styles for all remaining spans */
    .span-5423, .span-5925, .span-6525, .span-6963,
    .span-7396, .span-7860, .span-8099, .span-8338,
    .span-8568, .span-8716, .span-8846 {
      position: absolute;
      height: var(--row-height);
      left: var(--stage-left);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid #f0cb41;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(240, 203, 65, 0.95);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      padding: 0 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .span-5423  { top: calc(8  * (var(--row-height) + var(--row-gap))); width: 5423px; }
    .span-5925  { top: calc(9  * (var(--row-height) + var(--row-gap))); width: 5925px; }
    .span-6525  { top: calc(10 * (var(--row-height) + var(--row-gap))); width: 6525px; }
    .span-6963  { top: calc(11 * (var(--row-height) + var(--row-gap))); width: 6963px; }
    .span-7396  { top: calc(12 * (var(--row-height) + var(--row-gap))); width: 7396px; }
    .span-7860  { top: calc(13 * (var(--row-height) + var(--row-gap))); width: 7860px; }
    .span-8099  { top: calc(14 * (var(--row-height) + var(--row-gap))); width: 8099px; }
    .span-8338  { top: calc(15 * (var(--row-height) + var(--row-gap))); width: 8338px; }
    .span-8568  { top: calc(16 * (var(--row-height) + var(--row-gap))); width: 8568px; }
    .span-8716  { top: calc(17 * (var(--row-height) + var(--row-gap))); width: 8716px; }
    .span-8846  { top: calc(20 * (var(--row-height) + var(--row-gap))); width: 8846px; }

    .span-130,
    .span-235 {
      position: absolute;
      top: calc(var(--row-height) + var(--row-gap));
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid #f0cb41;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(240, 203, 65, 0.95);
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 8px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .span-1140 {
      position: absolute;
      top: calc(2 * (var(--row-height) + var(--row-gap)));  /* moved down one layer below +905 */
      left: var(--stage-left);
      width: 1140px;
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid #f0cb41;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(240, 203, 65, 0.95);
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 8px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .span-130 { left: var(--stage-left); width: 130px; gap: 0; }

    .span-235 {
      left: var(--stage-left);
      width: 235px;
      border-color: rgba(240, 203, 65, 0.7);
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
    }

    .span-text-main {
      text-align: center;
      line-height: 1.15;
      font-size: 13px;
    }

    .span-text-date {
      font-size: 13px;
      font-weight: 600;
      color: var(--green);
      opacity: 0.92;
      white-space: nowrap;
      text-align: right;
    }

    /* Side-by-side layout for the larger span boxes */
    .span-1140,
    .span-2050 {
      flex-direction: row !important;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      padding: 0 14px;
    }

    .creation-marker {
      position: absolute;
      left: var(--stage-left);
      top: -18px;
      width: 4px;
      height: calc(46 * (var(--row-height) + var(--row-gap)) + 2 * var(--row-height) + 60px);
      background: linear-gradient(to bottom, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
      z-index: 5;
      pointer-events: none;
    }

    .glow-circle {
      position: absolute;
      left: -8px;
      top: -22px;
      width: 22px;
      height: 22px;
      background: var(--gold);
      border-radius: 50%;
      box-shadow: 0 0 14px 5px var(--gold), 0 0 32px 14px rgba(240,203,65,0.75);
      animation: pulse 2.3s infinite ease-in-out;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 0.92; }
      50% { transform: scale(1.35); opacity: 1; }
    }

    .creation-label {
      position: absolute;
      left: calc(var(--stage-left) + 18px);
      top: -38px;
      font-size: 15px;
      font-weight: 800;
      color: var(--gold);
      line-height: 1.25;
      text-shadow: 0 1px 4px rgba(0,0,0,0.7);
      z-index: 5;
      white-space: nowrap;
    }

    /* ── Modal ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 999999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-card {
      position: absolute;
      top: 20px;
      right: 20px;
      width: min(560px, calc(100vw - 40px));
      background: linear-gradient(160deg, rgba(14,22,72,0.97) 0%, rgba(10,17,58,0.97) 100%);
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.09);
      box-shadow: 0 18px 52px rgba(0,0,0,0.52), 0 0 0 1px rgba(255,255,255,0.05);
      transform: translateY(-10px) scale(0.96);
      opacity: 0;
      transition: transform 0.24s cubic-bezier(.2,.8,.2,1), opacity 0.2s ease;
      backdrop-filter: blur(14px);
      overflow: hidden;
    }

    .modal-overlay.active .modal-card {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .modal-header {
      position: relative;
      background: #3579F7;
      user-select: none;
      -webkit-user-select: none;
      padding: 12px 52px 12px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .modal-header::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 15% 50%, rgba(255,255,255,0.14), transparent 55%);
      pointer-events: none;
    }

    .modal-badge {
      position: relative;
      z-index: 1;
      background: rgba(0,0,0,0.18);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 6px;
      padding: 2px 7px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .modal-header-title {
      position: relative;
      z-index: 1;
      font-size: 18px;
      font-weight: 900;
      color: #f6f7fb;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }

    .modal-header-title .star-inline {
      color: var(--gold-strong);
      margin-right: 5px;
    }

    .modal-close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      width: 26px;
      height: 26px;
      border: 0;
      border-radius: 50%;
      background: rgba(220, 38, 38, 0.3);
      color: #f87171;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .modal-badge-row { padding: 8px 14px 0; }
    .REMOVE_PLACEHOLDER {nsform 0.16s ease, background 0.18s ease;
      z-index: 2;
      line-height: 1;
    }
    .modal-close:hover {
      background: rgba(220, 38, 38, 0.55);
      color: #fff;
    }

    /* ── Mobile responsive modal ── */
    @media (max-width: 1100px) {
      /* Bottom sheet style — anchored to bottom, scrollable */
      .modal-overlay {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
        padding-top: 0 !important;
      }
      .modal-card {
        position: relative !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 92vh !important;
        overflow: hidden !important;
        border-radius: 18px 18px 0 0 !important;
        transform: translateY(100%) !important;
        display: flex !important;
        flex-direction: column !important;
      }
      .modal-overlay.active .modal-card {
        transform: translateY(0) !important;
      }
      .modal-header {
        flex-shrink: 0 !important;
        border-radius: 18px 18px 0 0 !important;
      }
      .modal-badge-row {
        flex-shrink: 0 !important;
      }
      .modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: none !important;
      }
      .modal-close {
        position: absolute !important;
        top: 10px !important;
        right: 12px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 26px !important;
        background: rgba(220, 38, 38, 0.35) !important;
        color: #ff6b6b !important;
        border-radius: 50% !important;
        z-index: 999 !important;
      }
      .modal-header {
        padding: 14px 60px 14px 16px !important;
      }
      .modal-header-title {
        font-size: 16px !important;
      }
      .modal-body {
        max-height: calc(100vh - 52px - 80px) !important;
        overflow-y: auto !important;
      }
      /* Explore button at top of modal */
      .modal-explore-top {
        display: flex !important;
      }
    }

    .modal-close:hover {
      background: rgba(220, 38, 38, 0.6) !important;
      color: #fff;
    }

    .modal-body {
      padding: 14px 18px 18px;
      color: #f6f7fb;
      display: flex;
      flex-direction: column;
      gap: 9px;
      max-height: calc(100vh - 190px);   /* taller: use most of the viewport below the header */
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.2) transparent;
    }

    /* ═══════════════════════════════════════════════════════════════
       LAYOUT COMPARE MODAL — Second-level popup that visually shows
       the two patriarch-placement options side by side. Top panel is
       a STATIC display of the overlapping (immediate-son) layout;
       bottom panel is the same setup but with the child bar DRAGGABLE
       from the overlap position to the at-death position. Helps the
       reader physically work through Camping's "Qara Sem" rule by
       moving the bar from one interpretation to the other.
       ═══════════════════════════════════════════════════════════════ */
    .lc-overlay {
      position: fixed; inset: 0;
      /* 最上层：高于站内顶栏（8600）、标签栏（9000）、先祖弹窗（999999） */
      z-index: 1000004;
      background: rgba(2,8,40,0.78);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      opacity: 0; pointer-events: none;
      transition: opacity .3s ease;
    }
    .lc-overlay.active { opacity: 1; pointer-events: auto; }
    .lc-modal {
      background: linear-gradient(160deg, #131e5e 0%, #0a1242 60%, #060c2e 100%);
      border: 1px solid rgba(96,165,250,0.32);
      border-radius: 18px;
      box-shadow: 0 28px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
      width: 100%; max-width: 660px;
      max-height: 92vh;
      overflow-y: auto;
      padding: 22px 24px 24px;
      transform: translateY(20px) scale(0.96);
      transition: transform .35s cubic-bezier(.18,.89,.32,1.18);
      position: relative;
    }
    .lc-overlay.active .lc-modal { transform: translateY(0) scale(1); }

    .lc-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; margin-bottom: 6px;
    }
    .lc-title {
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.01em;
      margin: 0;
      line-height: 1.25;
    }
    .lc-close {
      width: 30px; height: 30px;
      flex-shrink: 0;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
      transition: all .15s ease;
      display: flex; align-items: center; justify-content: center;
    }
    .lc-close:hover { background: rgba(255,90,90,0.20); border-color: rgba(255,90,90,0.55); }
    .lc-subtitle {
      font-size: 13px;
      color: rgba(255,255,255,0.68);
      line-height: 1.55;
      margin: 0 0 18px;
    }
    .lc-subtitle strong { color: var(--gold); font-weight: 700; }

    .compare-panel {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 14px 16px 18px;
      margin-bottom: 14px;
    }
    .compare-panel.draggable-panel {
      background: linear-gradient(180deg, rgba(240,203,65,0.04), rgba(240,203,65,0.01));
      border-color: rgba(240,203,65,0.22);
    }

    .panel-badge {
      display: inline-block;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 999px;
      margin-bottom: 8px;
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.14);
    }
    .panel-badge.static-badge {
      background: rgba(96,165,250,0.12);
      color: #8fc1ff;
      border-color: rgba(96,165,250,0.32);
    }
    .panel-badge.draggable-badge {
      background: rgba(240,203,65,0.14);
      color: var(--gold);
      border-color: rgba(240,203,65,0.40);
    }
    .panel-badge.draggable-badge .i {
      margin-right: 4px;
      animation: drag-hint-pulse 1.8s ease-in-out infinite;
    }
    @keyframes drag-hint-pulse {
      0%, 100% { opacity: 0.55; }
      50%      { opacity: 1; transform: translateX(2px); }
    }
    .panel-title {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin: 0 0 4px;
    }
    .panel-desc {
      font-size: 13px;
      color: rgba(255,255,255,0.6);
      line-height: 1.45;
      margin: 0 0 14px;
    }

    /* ── Mini-timeline visualization ── */
    .mini-timeline {
      position: relative;
      width: 100%;
      height: 92px;
      background: rgba(0,0,0,0.18);
      border-radius: 8px;
      overflow: hidden;
      user-select: none;
    }
    .mini-row {
      position: absolute;
      left: 0; right: 0;
      height: 24px;
    }
    .mini-row.parent-row { top: 14px; }
    .mini-row.child-row  { top: 46px; }
    .mini-row-label {
      position: absolute;
      left: 6px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      z-index: 2;
      pointer-events: none;
    }

    .mini-bar {
      position: absolute;
      top: 0;
      height: 24px;
      border-radius: 0 5px 5px 0;
      background: linear-gradient(90deg, #2b6ef5 0%, #3579F7 60%, #3070f0 100%);
      box-shadow: 0 3px 8px rgba(0,0,0,0.35);
      display: flex; align-items: center;
      padding: 0 8px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,0.95);
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
    }
    .mini-bar.child-bar {
      background: linear-gradient(90deg, #34d399 0%, #10b981 60%, #059669 100%);
    }
    .mini-bar.draggable-bar {
      cursor: grab;
      transition: box-shadow .2s ease, transform .15s ease;
      touch-action: none;
    }
    .mini-bar.draggable-bar:hover {
      box-shadow: 0 4px 14px rgba(16,185,129,0.55);
      transform: translateY(-1px);
    }
    .mini-bar.draggable-bar.grabbing {
      cursor: grabbing;
      box-shadow: 0 6px 18px rgba(16,185,129,0.7), 0 0 0 1px rgba(255,255,255,0.4);
    }
    .mini-bar.draggable-bar.snapped {
      animation: snap-pulse 0.5s ease-out;
    }
    @keyframes snap-pulse {
      0%   { box-shadow: 0 4px 14px rgba(16,185,129,0.6); }
      40%  { box-shadow: 0 4px 22px rgba(240,203,65,1.0), 0 0 0 3px rgba(240,203,65,0.4); }
      100% { box-shadow: 0 3px 8px rgba(0,0,0,0.35); }
    }

    /* Dashed ghost outline showing the at-death target position */
    .drag-target-ghost {
      position: absolute;
      top: 0;
      height: 24px;
      border: 1.5px dashed rgba(240,203,65,0.5);
      border-radius: 0 5px 5px 0;
      background: rgba(240,203,65,0.04);
      pointer-events: none;
    }
    .drag-target-ghost.hidden { opacity: 0; }

    /* Vertical reference line at parent's death year */
    .parent-death-line {
      position: absolute;
      top: 4px;
      bottom: 24px;
      width: 1.5px;
      background: linear-gradient(180deg, rgba(240,203,65,0.7), rgba(240,203,65,0.1));
      pointer-events: none;
    }
    .parent-death-line::after {
      content: '去世';
      position: absolute;
      top: -14px;
      left: -10px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(240,203,65,0.85);
      white-space: nowrap;
    }

    /* Year axis at the bottom of each mini-timeline */
    .mini-axis {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 16px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .mini-tick {
      position: absolute;
      bottom: 0;
      width: 1px; height: 5px;
      background: rgba(255,255,255,0.20);
    }
    .mini-tick-label {
      position: absolute;
      bottom: 4px;
      transform: translateX(-50%);
      font-family: system-ui, monospace;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.45);
      white-space: nowrap;
    }

    /* Live readout below the draggable panel */
    .lc-readout {
      margin-top: 10px;
      padding: 9px 12px;
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.5;
      color: rgba(255,255,255,0.78);
      transition: all .25s ease;
      display: flex; align-items: center; gap: 8px;
    }
    .lc-readout strong { color: var(--gold); font-weight: 700; }
    .lc-readout.at-snap {
      background: rgba(240,203,65,0.10);
      border-color: rgba(240,203,65,0.42);
      color: #fff;
    }
    .lc-readout.at-snap strong { color: #ffd617; }
    .lc-readout-icon {
      flex-shrink: 0;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: rgba(255,255,255,0.10);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 13px;
    }
    .lc-readout.at-snap .lc-readout-icon {
      background: var(--gold);
      color: #1a1f5e;
    }

    /* Reset button at bottom of draggable panel */
    .lc-reset-btn {
      margin-top: 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.16);
      color: rgba(255,255,255,0.78);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all .15s ease;
    }
    .lc-reset-btn:hover {
      background: rgba(255,255,255,0.12);
      color: #fff;
    }
    .lc-reset-btn .i { margin-right: 5px; }

    /* The Compare Layouts trigger button on the original patriarch modal */
    .modal-compare-btn {
      display: none;  /* JS reveals it when patriarch has begatData */
      align-items: center; gap: 6px;
      background: rgba(240,203,65,0.16);
      border: 1px solid rgba(240,203,65,0.40);
      border-radius: 8px;
      padding: 7px 14px;
      margin: 8px 14px 0;
      color: var(--gold);
      font-size: 13px; font-weight: 700;
      font-family: var(--font);
      text-decoration: none;
      cursor: pointer;
      transition: background .15s, border-color .15s, transform .15s;
    }
    .modal-compare-btn:hover {
      background: rgba(240,203,65,0.26);
      border-color: rgba(240,203,65,0.65);
      transform: translateY(-1px);
    }
    .modal-compare-btn .i { font-size: 13px; }

    @media (max-width: 600px) {
      .lc-modal { padding: 18px 16px 18px; }
      .lc-title { font-size: 16px; }
      .compare-panel { padding: 12px 12px 14px; }
      .mini-timeline { height: 100px; }
    }

    .verse-text {
      font-size: 13px;
      line-height: 1.55;
      font-weight: 500;
      color: rgba(255,255,255,0.88);
      margin: 0;
      padding: 9px 11px;
      background: rgba(255,255,255,0.04);
      border-left: 3px solid var(--gold);
      border-radius: 0 6px 6px 0;
    }

    .hl-gold {
      color: var(--gold-strong);
      font-weight: 700;
    }

    .stat-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
    }

    .stat-box {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 8px;
      padding: 7px 8px;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }

    .stat-box:hover {
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.13);
      transform: translateY(-1px);
    }

    .stat-label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.45);
      font-weight: 800;
      margin-bottom: 4px;
    }

    .stat-value {
      font-size: 15px;
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .stat-value.gold  { color: var(--gold-strong); }
    .stat-value.green { color: #f0f0f0; }
    .stat-value.white { color: var(--green); }

    .stat-sub {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.45);
      margin-top: 2px;
    }

    .math-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: -0.02em;
    }

    .math-pill .eq-gold { color: var(--gold-strong); }
    .math-pill .eq-white { color: rgba(255,255,255,0.85); }
    .math-pill .eq-green { color: var(--green); }

    /* inline Qara Sem note inside popups */
    .qs-inline-note {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255,255,255,0.75);
      font-weight: 500;
      padding: 8px 10px;
      border-radius: 6px;
      background: rgba(66,255,26,0.07);
      border: 1px solid rgba(66,255,26,0.18);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .qs-inline-note.descendant {
      background: rgba(240,203,65,0.07);
      border-color: rgba(240,203,65,0.2);
    }
    .qs-inline-note strong { color: #fff; font-weight: 800; }

    .qs-inline-tag {
      display: inline-block;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 1px 7px;
      border-radius: 4px;
      margin-bottom: 3px;
      width: fit-content;
    }
    .qs-inline-tag.immediate {
      background: rgba(66,255,26,0.15);
      color: var(--green);
      border: 1px solid rgba(66,255,26,0.3);
    }
    .qs-inline-tag.descendant {
      background: rgba(240,203,65,0.12);
      color: var(--gold-strong);
      border: 1px solid rgba(240,203,65,0.3);
    }

    /* ── Qara Sem Tab ── */
    .tabs-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 18px;
      position: fixed;
      top: 68px;
      left: 0;
      z-index: 9000;
      width: 100vw;
      max-width: 100vw;
      box-sizing: border-box;
      background: rgba(2,6,60,0.97);
      backdrop-filter: blur(10px);
      padding: 8px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      flex-wrap: nowrap;
      align-items: center;
    }

    .tab-btn {
      padding: 7px 18px;
      border-radius: 8px 8px 0 0;
      border: 1px solid rgba(255,255,255,0.1);
      border-bottom: none;
      background: rgba(5,20,70,0.6);
      color: rgba(255,255,255,0.55);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: 0.02em;
      transition: background 0.18s, color 0.18s;
      user-select: none;
    }

    .tab-btn.active {
      background: rgba(14,28,88,0.98);
      color: var(--gold);
      border-color: rgba(255,255,255,0.14);
    }

    .tab-btn:hover:not(.active) {
      background: rgba(14,28,88,0.7);
      color: rgba(255,255,255,0.8);
    }

    .highlight-toggle {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid rgba(240,203,65,0.35);
      background: rgba(240,203,65,0.08);
      color: var(--gold);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background 0.18s, border-color 0.18s, color 0.18s;
      white-space: nowrap;
      align-self: center;
    }

    .highlight-toggle:hover {
      background: rgba(240,203,65,0.16);
      border-color: rgba(240,203,65,0.6);
    }

    .highlight-toggle.off {
      border-color: rgba(255,255,255,0.12);
      background: rgba(5,15,50,0.7);
      color: rgba(255,255,255,0.4);
    }

    .highlight-toggle.off:hover {
      background: rgba(5,15,50,0.9);
      color: rgba(255,255,255,0.6);
    }

    .toggle-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gold);
      flex-shrink: 0;
      transition: background 0.18s;
    }

    .highlight-toggle.off .toggle-dot {
      background: rgba(255,255,255,0.25);
    }

    /* ── Space Background button ── */
    .space-toggle {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid rgba(120,120,220,0.35);
      background: rgba(20,10,60,0.5);
      color: rgba(180,170,255,0.8);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: background 0.18s, border-color 0.18s, color 0.18s;
      white-space: nowrap;
      align-self: center;
    }

    .space-toggle:hover {
      background: rgba(40,20,100,0.7);
      border-color: rgba(140,120,255,0.6);
      color: rgba(210,200,255,1);
    }

    .space-toggle.on {
      border-color: rgba(160,140,255,0.7);
      background: rgba(30,15,80,0.85);
      color: #c8bcff;
    }

    .space-toggle .toggle-dot {
      background: rgba(150,130,255,0.6);
    }

    .space-toggle.on .toggle-dot {
      background: #c8bcff;
      box-shadow: 0 0 6px rgba(180,160,255,0.8);
    }

    /* ── Star canvas ── */
    #starCanvas {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 0.8s ease;
    }

    #starCanvas.visible { opacity: 1; }

    body.space-mode {
      background: linear-gradient(180deg, #000008 0%, #02010f 40%, #010118 100%);
    }

    /* ── Return to patriarch button ── */
    .return-btn {
      position: fixed;
      bottom: 130px;
      right: 28px;
      z-index: 8500;
      display: none;
      align-items: center;
      gap: 7px;
      padding: 9px 16px;
      border-radius: 10px;
      border: 1px solid rgba(23,130,245,0.5);
      background: rgba(10,20,70,0.92);
      color: #7bbfff;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.03em;
      cursor: pointer;
      white-space: nowrap;
      backdrop-filter: blur(10px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(23,130,245,0.2);
      animation: returnBtnPop 0.22s cubic-bezier(.2,.8,.2,1) both;
      transition: background 0.15s, border-color 0.15s, transform 0.15s;
    }

    .return-btn.visible { display: flex; }

    .return-btn:hover {
      background: rgba(23,130,245,0.25);
      border-color: rgba(23,130,245,0.8);
      color: #fff;
      transform: translateY(-2px);
    }

    @keyframes returnBtnPop {
      from { opacity: 0; transform: translateY(10px) scale(0.94); }
      to   { opacity: 1; transform: translateY(0)   scale(1);    }
    }

    /* Span boxes dark state — border and bg only, text colors unchanged */
    .spans-hidden .span-130, .spans-hidden .span-235,
    .spans-hidden .span-1140, .spans-hidden .span-2050,
    .spans-hidden .span-2945, .spans-hidden .span-3907,
    .spans-hidden .span-4272, .spans-hidden .span-5241,
    .spans-hidden .span-5423, .spans-hidden .span-5925,
    .spans-hidden .span-6525, .spans-hidden .span-6963,
    .spans-hidden .span-7396, .spans-hidden .span-7860,
    .spans-hidden .span-8099, .spans-hidden .span-8338,
    .spans-hidden .span-8568, .spans-hidden .span-8716,
    .spans-hidden .span-8846,
    .spans-hidden .span-8946,
    .spans-hidden .span-9006,
    .spans-hidden .span-9076,
    .spans-hidden .span-9213,
    .spans-hidden .span-9346,
    .spans-hidden .span-9483 {
      border-color: rgba(255,255,255,0.06) !important;
      background: rgba(3,8,32,0.30) !important;
    }

    .tab-panel {
      display: none;
    }

    .tab-panel.active {
      display: block;
    }

    /* ── Qara Sem Explainer Panel ── */
    .qs-panel {
      background: linear-gradient(160deg, rgba(10,18,65,0.98) 0%, rgba(8,14,52,0.98) 100%);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 0 12px 12px 12px;
      padding: 28px 32px 32px;
      margin-bottom: 32px;
      max-width: 900px;
    }

    .qs-heading {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.02em;
      color: var(--gold);
      margin: 0 0 6px;
    }

    .qs-sub {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      font-weight: 600;
      margin: 0 0 22px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .qs-rule-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(240,203,65,0.22);
      border-left: 4px solid var(--gold);
      border-radius: 0 10px 10px 0;
      padding: 14px 16px;
      margin-bottom: 20px;
    }

    .qs-rule-title {
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--gold);
      margin-bottom: 8px;
    }

    .qs-rule-text {
      font-size: 13.5px;
      line-height: 1.65;
      color: rgba(255,255,255,0.85);
      font-weight: 500;
      margin: 0;
    }

    .qs-rule-text strong { color: #fff; font-weight: 800; }
    .qs-rule-text em { color: var(--gold-strong); font-style: normal; font-weight: 700; }

    .qs-examples {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 20px;
    }

    .qs-example {
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 10px;
      padding: 13px 15px;
      transition: border-color 0.18s, background 0.18s;
    }

    .qs-example:hover {
      border-color: rgba(255,255,255,0.13);
      background: rgba(255,255,255,0.055);
    }

    .qs-example-tag {
      display: inline-block;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 4px;
      margin-bottom: 8px;
    }

    .qs-example-tag.immediate {
      background: rgba(66,255,26,0.12);
      color: var(--green);
      border: 1px solid rgba(66,255,26,0.25);
    }

    .qs-example-tag.descendant {
      background: rgba(240,203,65,0.1);
      color: var(--gold);
      border: 1px solid rgba(240,203,65,0.25);
    }

    .qs-example-tag.exception {
      background: rgba(23,130,245,0.15);
      color: #7bbfff;
      border: 1px solid rgba(23,130,245,0.3);
    }

    .qs-example-verse {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.5);
      margin-bottom: 5px;
      font-style: italic;
    }

    .qs-example-title {
      font-size: 14px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 5px;
      letter-spacing: -0.01em;
    }

    .qs-example-desc {
      font-size: 13px;
      line-height: 1.6;
      color: rgba(255,255,255,0.65);
      font-weight: 500;
    }

    .qs-example-desc strong { color: rgba(255,255,255,0.9); font-weight: 700; }

    .qs-divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.07);
      margin: 18px 0;
    }

    .qs-timeline-note {
      background: rgba(23,130,245,0.08);
      border: 1px solid rgba(23,130,245,0.2);
      border-radius: 8px;
      padding: 11px 14px;
      font-size: 13px;
      line-height: 1.6;
      color: rgba(255,255,255,0.75);
      font-weight: 500;
    }

    .qs-timeline-note strong { color: #7bbfff; font-weight: 800; }
    .qs-timeline-note em { color: var(--gold-strong); font-style: normal; font-weight: 700; }

    /* ── Scroll Pad ── */
    .scroll-pad {
      position: fixed;
      bottom: 28px;
      right: 108px;
      z-index: 8000;
      display: grid;
      grid-template-columns: repeat(3, 36px);
      grid-template-rows: repeat(3, 36px);
      gap: 4px;
      filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
    }

    .scroll-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(10,20,70,0.88);
      color: rgba(255,255,255,0.75);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s, color 0.15s, transform 0.1s;
      backdrop-filter: blur(8px);
    }

    .scroll-btn:hover {
      background: var(--gold);
      color: #0f1e3a;
      border-color: var(--gold);
      transform: scale(1.08);
    }

    .scroll-btn:active {
      transform: scale(0.94);
    }

    .scroll-btn.center {
      background: rgba(23,130,245,0.18);
      border-color: rgba(23,130,245,0.35);
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    .scroll-btn.center:hover {
      background: rgba(23,130,245,0.35);
      border-color: rgba(23,130,245,0.7);
      color: #fff;
      transform: scale(1.08);
    }

    .scroll-btn.center.fast {
      background: rgba(255,180,0,0.25);
      border-color: rgba(255,180,0,0.6);
      color: #ffd617;
      box-shadow: 0 0 10px rgba(255,180,0,0.3);
    }

    .scroll-btn.center.fast:hover {
      background: rgba(255,180,0,0.4);
      border-color: rgba(255,180,0,0.9);
    }

  
  /* ── Number line for BC vs AD tab ── */
  function buildNumLine(containerId, includeZero) {
    const el = document.getElementById(containerId);
    if (!el) return;
    const range = [-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    range.forEach((n, i) => {
      const box = document.createElement('div');
      box.className = 'nbox';
      if (n < 0) {
        box.classList.add('neg');
        box.textContent = n;
      } else if (n === 0) {
        if (includeZero) {
          box.classList.add('zero');
          box.textContent = '0';
        } else {
          box.classList.add('missing');
          box.textContent = 'NO 0';
        }
      } else {
        box.classList.add('pos');
        box.textContent = n;
      }
      // Stagger animation
      box.style.opacity = '0';
      box.style.transform = 'translateY(12px)';
      box.style.transition = `opacity 0.3s ease ${i * 28}ms, transform 0.3s ease ${i * 28}ms`;
      el.appendChild(box);
    });
  }

  // Build immediately
  buildNumLine('numlineMath', true);
  buildNumLine('numlineGreg', false);

  // Animate in when BC vs AD tab is shown
  function animateNumLines() {
    document.querySelectorAll('#numlineMath .nbox, #numlineGreg .nbox').forEach(box => {
      box.style.opacity = '1';
      box.style.transform = 'translateY(0)';
    });
  }

  // Trigger animation when tab becomes active
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      if (btn.dataset.tab === 'bcvsad') {
        setTimeout(animateNumLines, 80);
      }
    });
  });


    /* ══ Enos → Cainan Begat Reveal ══
     Enos bar starts at x=255px (stage-left 20 + 235).
     90yr mark = 255 + 90 = 345px.
     Cainan normal left = 20 + 1140 = 1160px.
     Cainan begat-mode left = 345px = 20 + 325.              */
  (function() {
    const btn       = document.getElementById('enosBegatBtn');
    const enosRow   = document.querySelector('.row.enos-row');
    const cainanBar = document.querySelector('.bar.cainan');
    if (!btn || !enosRow || !cainanBar) return;

    let on = false;

    btn.addEventListener('click', function(e) {
      e.stopPropagation();
      on = !on;

      if (on) {
        btn.classList.add('on');
        enosRow.classList.add('br-on');
        cainanBar.classList.add('br-red');
        cainanBar.style.left = 'calc(var(--stage-left) + 325px)';
      } else {
        btn.classList.remove('on');
        enosRow.classList.remove('br-on');
        cainanBar.classList.remove('br-red');
        cainanBar.style.left = 'calc(var(--stage-left) + 1140px)';
      }
    });
  })();

  /* ── Welcome Popup ── */
    .welcome-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 20, 0.75);
      z-index: 9999999;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(12px) brightness(0.5);
      -webkit-backdrop-filter: blur(12px) brightness(0.5);
      animation: welcomeFadeIn 0.4s ease both;
      overflow-y: auto;
      padding: 100px 40px 40px;
      box-sizing: border-box;
    }
    @keyframes welcomeFadeIn { from { opacity:0; } to { opacity:1; } }
    .welcome-card {
      background: linear-gradient(160deg, rgba(8,14,58,0.99) 0%, rgba(5,10,42,0.99) 100%);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: 32px 48px;
      max-width: 900px;
      width: 100%;
      max-height: none;
      overflow-y: visible;
      box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.07);
      position: relative;
      margin: 0 auto;
      margin-top: 100px;
      animation: welcomeSlideUp 0.45s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes welcomeSlideUp {
      from { opacity:0; transform: translateY(28px) scale(0.96); }
      to   { opacity:1; transform: translateY(0) scale(1); }
    }
    .welcome-close {
      position: absolute; top:14px; right:14px;
      width:42px; height:42px; border:none; border-radius:50%;
      background:rgba(220,38,38,0.35); color:#ff6b6b;
      font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center;
      transition: background 0.15s, color 0.15s, transform 0.15s;
      z-index: 2;
    }
    .welcome-close:hover { background:rgba(220,38,38,0.6); color:#fff; transform:rotate(90deg); }
    .welcome-eyebrow {
      font-size:13px; font-weight:900; letter-spacing:0.18em;
      text-transform:uppercase; color:var(--gold); margin-bottom:10px;
    }
    .welcome-title {
      font-size:26px; font-weight:900; letter-spacing:-0.03em;
      line-height:1.15; color:#fff; margin-bottom:16px;
    }
    /* Prevent welcome CSS leaking into nav */
    #main-nav {
      z-index: 99100 !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      max-width: 100vw !important;
      box-sizing: border-box !important;
    }
    #main-nav span, #main-nav a, #main-nav div, #main-nav button {
      -webkit-text-fill-color: unset !important;
      background-clip: unset !important;
      -webkit-background-clip: unset !important;
      background-image: none !important;
    }

    .welcome-title .title-blue {
      background: linear-gradient(90deg, #1782f5, #42c8ff, #1782f5, #42c8ff);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: titleShimmer 3s ease-in-out infinite;
      display: inline-block;
    }
    @keyframes titleShimmer {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .welcome-title span { color:var(--gold-strong); }
    .welcome-body {
      font-size:14px; line-height:1.7; color:rgba(255,255,255,0.78);
      font-weight:500; margin-bottom:20px;
    }
    .welcome-body strong { color:#fff; font-weight:800; }
    .welcome-body em { color:var(--gold-strong); font-style:normal; font-weight:700; }
    .welcome-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:0 0 18px; }
    .welcome-how-title {
      font-size:13px; font-weight:900; letter-spacing:0.14em;
      text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:12px;
    }
    .welcome-instructions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:18px; }
    .welcome-tip {
      background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
      border-radius:12px; padding:16px; display:flex; align-items:flex-start; gap:12px;
    }
    .welcome-tip-icon { font-size:22px; flex-shrink:0; line-height:1.2; margin-top:2px; }
    .welcome-tip-text { font-size:13px; line-height:1.55; color:rgba(255,255,255,0.72); font-weight:500; }
    .welcome-tip-text strong { color:#fff; font-weight:800; }
    .dpad-wrap {
      display:flex; align-items:center; gap:16px;
      background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07);
      border-radius:10px; padding:14px 18px; margin-bottom:20px;
    }
    .dpad {
      display:grid; grid-template-columns:repeat(3,30px);
      grid-template-rows:repeat(3,30px); gap:3px; flex-shrink:0;
    }
    .dkey {
      width:30px; height:30px; border-radius:6px;
      background:rgba(23,130,245,0.2); border:1px solid rgba(23,130,245,0.45);
      color:#7bbfff; font-size:13px; display:flex; align-items:center;
      justify-content:center; font-weight:800;
    }
    .dkey.empty { background:transparent; border:none; }
    .dkey.speed {
      background:rgba(255,180,0,0.18); border-color:rgba(255,180,0,0.45);
      color:#ffd617; font-size:13px; font-weight:900; letter-spacing:0.02em;
    }
    .dpad-desc { font-size:13px; line-height:1.65; color:rgba(255,255,255,0.72); font-weight:500; }
    .dpad-desc strong { color:#fff; font-weight:800; }
    .dpad-desc em { color:var(--gold-strong); font-style:normal; }
    .welcome-enter-btn {
      width:100%; padding:13px; border-radius:12px; border:none;
      background:linear-gradient(135deg,#1466c8 0%,#1052a8 100%);
      color:#fff; font-family:var(--font); font-size:15px; font-weight:900;
      letter-spacing:0.02em; cursor:pointer;
      transition: filter 0.18s, transform 0.15s, box-shadow 0.18s;
      box-shadow: 0 8px 24px rgba(14,82,200,0.4);
    }
    .welcome-enter-btn:hover { filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 14px 32px rgba(14,82,200,0.55); }
    .welcome-enter-btn:active { transform:translateY(0); }

    /* ── Patriarch Grid ── */
    .patriarch-grid {
      display: grid;
      grid-template-columns: 36px 1fr 36px 1fr 36px 1fr 36px 1fr;
      gap: 6px 4px;
      margin-top: 18px;
    }
    .patriarch-num {
      background: rgba(23,130,245,0.18);
      border: 1px solid rgba(23,130,245,0.35);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      color: #7bbfff;
      height: 36px;
    }
    .patriarch-name {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,0.88);
      height: 36px;
      transition: background 0.15s, border-color 0.15s;
    }
    .patriarch-name:hover {
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.16);
    }

    /* ── BC vs AD ── */
    .bcad-legend {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .bcad-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: rgba(255,255,255,0.82);
      font-weight: 500;
    }
    .bcad-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .numline-section { margin-bottom: 20px; }
    .numline-label {
      font-size: 13px;
      color: rgba(255,255,255,0.65);
      font-weight: 500;
      margin-bottom: 8px;
    }
    .numline-label strong { color: #fff; }
    .numline {
      display: flex;
      gap: 3px;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .nbox {
      min-width: 46px;
      height: 46px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      color: #fff;
      flex-shrink: 0;
      transition: transform 0.2s, box-shadow 0.2s;
      cursor: default;
    }
    .nbox:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 8px 18px rgba(0,0,0,0.4); }
    .nbox.neg { background: #c0392b; }
    .nbox.zero { background: #fff; color: #111; font-size: 18px; box-shadow: 0 0 12px rgba(255,255,255,0.3); }
    .nbox.pos { background: #27ae60; }
    .nbox.missing { background: rgba(200,30,30,0.25); border: 2px dashed rgba(255,80,80,0.5); color: rgba(255,100,100,0.7); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }

    /* ── "Why 11,013 BC?" link button ──
       Sits above the conversion formulas to give curious readers a path
       to the dedicated explainer (why-11013.html). Gold-themed pill with
       a question-mark icon and a right-arrow that nudges on hover, making
       it feel like a clear call-to-action without being heavy. */
    .why-11013-btn {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 18px;
      margin: 4px 0 22px;
      background: linear-gradient(135deg, rgba(240,203,65,0.10), rgba(240,203,65,0.04));
      border: 1px solid rgba(240,203,65,0.32);
      border-radius: 14px;
      text-decoration: none;
      color: inherit;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .why-11013-btn:hover {
      background: linear-gradient(135deg, rgba(240,203,65,0.18), rgba(240,203,65,0.08));
      border-color: rgba(240,203,65,0.55);
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(240,203,65,0.20);
    }
    .why-11013-btn:hover .why-11013-arrow { transform: translateX(4px); }
    .why-11013-icon {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border-radius: 50%;
      background: rgba(240,203,65,0.20);
      border: 1px solid rgba(240,203,65,0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-strong, #ffd617);
      font-size: 15px;
    }
    .why-11013-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .why-11013-title {
      font-size: 14px;
      font-weight: 700;
      color: rgba(255,255,255,0.95);
      letter-spacing: 0.01em;
    }
    .why-11013-title strong { color: var(--gold-strong, #ffd617); font-weight: 800; }
    .why-11013-sub {
      font-size: 13px;
      font-weight: 500;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.02em;
    }
    .why-11013-arrow {
      color: var(--gold-strong, #ffd617);
      font-size: 14px;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }
    @media (max-width: 560px) {
      .why-11013-btn { padding: 12px 14px; gap: 12px; }
      .why-11013-icon { width: 34px; height: 34px; font-size: 13px; }
      .why-11013-title { font-size: 13px; }
      .why-11013-sub { font-size: 13px; }
    }

    .conversion-formula {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 10px 16px;
      margin-bottom: 14px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .cf-label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.4);
      font-weight: 800;
      flex-shrink: 0;
    }
    .cf-eq { font-weight: 700; color: rgba(255,255,255,0.85); }
    .cf-eq em { color: var(--gold-strong); font-style: normal; font-weight: 900; }
    .cf-eq strong { color: #42ff1a; }

    .conv-examples {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .conv-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 14px 16px;
      transition: background 0.15s, transform 0.15s;
    }
    .conv-card:hover { background: rgba(255,255,255,0.07); transform: translateY(-2px); }
    .conv-event {
      font-size: 14px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 8px;
    }
    .conv-math {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .cv-bc { font-size: 18px; font-weight: 900; color: var(--gold-strong); }
    .cv-op { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.5); }
    .cv-ea { font-size: 18px; font-weight: 900; color: #42ff1a; }
    .conv-note { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 600; }



    /* ══ Begat Reveal: Enos → Cainan ══ */

    /* The chunky clickable "90" box sitting on the Enos bar at the 90yr mark.
       Enos bar starts at: stage-left(20px) + 235px = 255px from section edge.
       90yr mark = 255px + 90px = 345px. Box is 43px wide, so center at 345. */


/* ── Begat Reveal: All Patriarchs ── */

    /* Shared: toggle switch track/knob */
    .br-track {
      width: 34px; height: 18px; border-radius: 9px;
      background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.3);
      position: relative; transition: background 0.25s, border-color 0.25s; flex-shrink: 0;
      pointer-events: none;
    }
    .br-track::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 12px; height: 12px; border-radius: 50%;
      background: rgba(255,255,255,0.6);
      transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.25s;
    }
    /* Active track (via body class) */
    .br-track.active, body[class*="br-"] .br-track.active {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    .br-track.active::after { transform: translateX(16px); background: #ffd617; }

    .br-label {
      font-size: 13px; font-weight: 900; letter-spacing: 0.08em;
      text-transform: uppercase; color: rgba(255,255,255,0.5); white-space: nowrap;
      transition: color 0.25s; pointer-events: none;
    }
    .br-label.active { color: #ffd617; }

    /* All shifted child bars sit above the begat chips */
    .bar.br-red {
      z-index: 15 !important;
    }

    /* ── Enos (90 yrs) ── */
    .enos-begat-btn {
      position: absolute;
      top: 0;
      left: calc(var(--stage-left) + 235px);
      width: 90px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-enos .enos-begat-btn,
    body.br-master .enos-begat-btn { opacity: 1; }

    .enos-toggle {
      position: absolute;
      top: 0;
      left: calc(var(--stage-left) + 335px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .enos-toggle:hover .br-track { border-color: #ffd617; }
    body.br-enos .enos-toggle .br-track,
    body.br-master .enos-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-enos .enos-toggle .br-track::after,
    body.br-master .enos-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-enos .enos-toggle .br-label,
    body.br-master .enos-toggle .br-label { color: #ffd617; }

    /* Yellow overlay on Cainan's row (row 1) */
    .enos-yellow-ov {
      position: absolute;
      top: calc(1 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 235px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-enos .enos-yellow-ov,
    body.br-master .enos-yellow-ov { width: 90px; }

    body.br-enos .bar.cainan,
    body.br-master .bar.cainan {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-enos .bar.cainan:hover,
    body.br-master .bar.cainan:hover { filter: brightness(1.1); }

    /* ── Cainan (70 yrs) ── */
    .cainan-begat-btn {
      position: absolute;
      top: calc(1 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 1140px);
      width: 70px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-cainan .cainan-begat-btn,
    body.br-master .cainan-begat-btn { opacity: 1; }

    .cainan-toggle {
      position: absolute;
      top: calc(1 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 1220px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .cainan-toggle:hover .br-track { border-color: #ffd617; }
    body.br-cainan .cainan-toggle .br-track,
    body.br-master .cainan-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-cainan .cainan-toggle .br-track::after,
    body.br-master .cainan-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-cainan .cainan-toggle .br-label,
    body.br-master .cainan-toggle .br-label { color: #ffd617; }

    .cainan-yellow-ov {
      position: absolute;
      top: calc(2 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 1140px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-cainan .cainan-yellow-ov,
    body.br-master .cainan-yellow-ov { width: 70px; }

    body.br-cainan .bar.mahalaleel,
    body.br-master .bar.mahalaleel {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-cainan .bar.mahalaleel:hover,
    body.br-master .bar.mahalaleel:hover { filter: brightness(1.1); }

    /* ── Mahalaleel (65 yrs) ── */
    .mahalaleel-begat-btn {
      position: absolute;
      top: calc(2 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 2050px);
      width: 65px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-mahalaleel .mahalaleel-begat-btn,
    body.br-master .mahalaleel-begat-btn { opacity: 1; }

    .mahalaleel-toggle {
      position: absolute;
      top: calc(2 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 2125px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .mahalaleel-toggle:hover .br-track { border-color: #ffd617; }
    body.br-mahalaleel .mahalaleel-toggle .br-track,
    body.br-master .mahalaleel-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-mahalaleel .mahalaleel-toggle .br-track::after,
    body.br-master .mahalaleel-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-mahalaleel .mahalaleel-toggle .br-label,
    body.br-master .mahalaleel-toggle .br-label { color: #ffd617; }

    .mahalaleel-yellow-ov {
      position: absolute;
      top: calc(3 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 2050px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-mahalaleel .mahalaleel-yellow-ov,
    body.br-master .mahalaleel-yellow-ov { width: 65px; }

    body.br-mahalaleel .bar.jared,
    body.br-master .bar.jared {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-mahalaleel .bar.jared:hover,
    body.br-master .bar.jared:hover { filter: brightness(1.1); }

    /* ── Jared (162 yrs) ── */
    .jared-begat-btn {
      position: absolute;
      top: calc(3 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 2945px);
      width: 162px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-jared .jared-begat-btn,
    body.br-master .jared-begat-btn { opacity: 1; }

    .jared-toggle {
      position: absolute;
      top: calc(3 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 3117px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .jared-toggle:hover .br-track { border-color: #ffd617; }
    body.br-jared .jared-toggle .br-track,
    body.br-master .jared-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-jared .jared-toggle .br-track::after,
    body.br-master .jared-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-jared .jared-toggle .br-label,
    body.br-master .jared-toggle .br-label { color: #ffd617; }

    .jared-yellow-ov {
      position: absolute;
      top: calc(4 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 2945px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-jared .jared-yellow-ov,
    body.br-master .jared-yellow-ov { width: 162px; }

    body.br-jared .bar.enoch,
    body.br-master .bar.enoch {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-jared .bar.enoch:hover,
    body.br-master .bar.enoch:hover { filter: brightness(1.1); }

    /* ── Enoch (65 yrs) ── */
    .enoch-begat-btn {
      position: absolute;
      top: calc(4 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 3907px);
      width: 65px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-enoch .enoch-begat-btn,
    body.br-master .enoch-begat-btn { opacity: 1; }

    .enoch-toggle {
      position: absolute;
      top: calc(4 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 3982px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .enoch-toggle:hover .br-track { border-color: #ffd617; }
    body.br-enoch .enoch-toggle .br-track,
    body.br-master .enoch-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-enoch .enoch-toggle .br-track::after,
    body.br-master .enoch-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-enoch .enoch-toggle .br-label,
    body.br-master .enoch-toggle .br-label { color: #ffd617; }

    .enoch-yellow-ov {
      position: absolute;
      top: calc(5 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 3907px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-enoch .enoch-yellow-ov,
    body.br-master .enoch-yellow-ov { width: 65px; }

    body.br-enoch .bar.methuselah,
    body.br-master .bar.methuselah {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-enoch .bar.methuselah:hover,
    body.br-master .bar.methuselah:hover { filter: brightness(1.1); }

    /* ── Methuselah (187 yrs) ── */
    .methuselah-begat-btn {
      position: absolute;
      top: calc(5 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 4272px);
      width: 187px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-methuselah .methuselah-begat-btn,
    body.br-master .methuselah-begat-btn { opacity: 1; }

    .methuselah-toggle {
      position: absolute;
      top: calc(5 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 4469px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .methuselah-toggle:hover .br-track { border-color: #ffd617; }
    body.br-methuselah .methuselah-toggle .br-track,
    body.br-master .methuselah-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-methuselah .methuselah-toggle .br-track::after,
    body.br-master .methuselah-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-methuselah .methuselah-toggle .br-label,
    body.br-master .methuselah-toggle .br-label { color: #ffd617; }

    .methuselah-yellow-ov {
      position: absolute;
      top: calc(6 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 4272px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-methuselah .methuselah-yellow-ov,
    body.br-master .methuselah-yellow-ov { width: 187px; }

    body.br-methuselah .bar.lamech,
    body.br-master .bar.lamech {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-methuselah .bar.lamech:hover,
    body.br-master .bar.lamech:hover { filter: brightness(1.1); }

    /* ── Shem (100 yrs) ── */
    .shem-begat-btn {
      position: absolute;
      top: calc(8 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 5925px);
      width: 100px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-shem .shem-begat-btn,
    body.br-master .shem-begat-btn { opacity: 1; }

    .shem-toggle {
      position: absolute;
      top: calc(8 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6035px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .shem-toggle:hover .br-track { border-color: #ffd617; }
    body.br-shem .shem-toggle .br-track,
    body.br-master .shem-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-shem .shem-toggle .br-track::after,
    body.br-master .shem-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-shem .shem-toggle .br-label,
    body.br-master .shem-toggle .br-label { color: #ffd617; }

    .shem-yellow-ov {
      position: absolute;
      top: calc(9 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 5925px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-shem .shem-yellow-ov,
    body.br-master .shem-yellow-ov { width: 100px; }

    body.br-shem .bar.arphaxad,
    body.br-master .bar.arphaxad {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-shem .bar.arphaxad:hover,
    body.br-master .bar.arphaxad:hover { filter: brightness(1.1); }

    /* ── Arphaxad (35 yrs) ── */
    .arphaxad-begat-btn {
      position: absolute;
      top: calc(9 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6525px);
      width: 35px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-arphaxad .arphaxad-begat-btn,
    body.br-master .arphaxad-begat-btn { opacity: 1; }

    .arphaxad-toggle {
      position: absolute;
      top: calc(9 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6570px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .arphaxad-toggle:hover .br-track { border-color: #ffd617; }
    body.br-arphaxad .arphaxad-toggle .br-track,
    body.br-master .arphaxad-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-arphaxad .arphaxad-toggle .br-track::after,
    body.br-master .arphaxad-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-arphaxad .arphaxad-toggle .br-label,
    body.br-master .arphaxad-toggle .br-label { color: #ffd617; }

    .arphaxad-yellow-ov {
      position: absolute;
      top: calc(10 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6525px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-arphaxad .arphaxad-yellow-ov,
    body.br-master .arphaxad-yellow-ov { width: 35px; }

    body.br-arphaxad .bar.salah,
    body.br-master .bar.salah {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-arphaxad .bar.salah:hover,
    body.br-master .bar.salah:hover { filter: brightness(1.1); }

    /* ── Salah (30 yrs) ── */
    .salah-begat-btn {
      position: absolute;
      top: calc(10 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6963px);
      width: 30px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-salah .salah-begat-btn,
    body.br-master .salah-begat-btn { opacity: 1; }

    .salah-toggle {
      position: absolute;
      top: calc(10 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 7003px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .salah-toggle:hover .br-track { border-color: #ffd617; }
    body.br-salah .salah-toggle .br-track,
    body.br-master .salah-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-salah .salah-toggle .br-track::after,
    body.br-master .salah-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-salah .salah-toggle .br-label,
    body.br-master .salah-toggle .br-label { color: #ffd617; }

    .salah-yellow-ov {
      position: absolute;
      top: calc(11 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 6963px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-salah .salah-yellow-ov,
    body.br-master .salah-yellow-ov { width: 30px; }

    body.br-salah .bar.eber,
    body.br-master .bar.eber {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-salah .bar.eber:hover,
    body.br-master .bar.eber:hover { filter: brightness(1.1); }

    /* ── Eber (34 yrs) ── */
    .eber-begat-btn {
      position: absolute;
      top: calc(11 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 7396px);
      width: 34px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-eber .eber-begat-btn,
    body.br-master .eber-begat-btn { opacity: 1; }

    .eber-toggle {
      position: absolute;
      top: calc(11 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 7440px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .eber-toggle:hover .br-track { border-color: #ffd617; }
    body.br-eber .eber-toggle .br-track,
    body.br-master .eber-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-eber .eber-toggle .br-track::after,
    body.br-master .eber-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-eber .eber-toggle .br-label,
    body.br-master .eber-toggle .br-label { color: #ffd617; }

    .eber-yellow-ov {
      position: absolute;
      top: calc(12 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 7396px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-eber .eber-yellow-ov,
    body.br-master .eber-yellow-ov { width: 34px; }

    body.br-eber .bar.peleg,
    body.br-master .bar.peleg {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-eber .bar.peleg:hover,
    body.br-master .bar.peleg:hover { filter: brightness(1.1); }

    /* ── Peleg (30 yrs) ── */
    .peleg-begat-btn {
      position: absolute;
      top: calc(12 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 7860px);
      width: 30px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-peleg .peleg-begat-btn,
    body.br-master .peleg-begat-btn { opacity: 1; }

    .peleg-toggle {
      position: absolute;
      top: calc(12 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 7900px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .peleg-toggle:hover .br-track { border-color: #ffd617; }
    body.br-peleg .peleg-toggle .br-track,
    body.br-master .peleg-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-peleg .peleg-toggle .br-track::after,
    body.br-master .peleg-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-peleg .peleg-toggle .br-label,
    body.br-master .peleg-toggle .br-label { color: #ffd617; }

    .peleg-yellow-ov {
      position: absolute;
      top: calc(13 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 7860px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-peleg .peleg-yellow-ov,
    body.br-master .peleg-yellow-ov { width: 30px; }

    body.br-peleg .bar.reu,
    body.br-master .bar.reu {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-peleg .bar.reu:hover,
    body.br-master .bar.reu:hover { filter: brightness(1.1); }

    /* ── Reu (32 yrs) ── */
    .reu-begat-btn {
      position: absolute;
      top: calc(13 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8099px);
      width: 32px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-reu .reu-begat-btn,
    body.br-master .reu-begat-btn { opacity: 1; }

    .reu-toggle {
      position: absolute;
      top: calc(13 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8141px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .reu-toggle:hover .br-track { border-color: #ffd617; }
    body.br-reu .reu-toggle .br-track,
    body.br-master .reu-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-reu .reu-toggle .br-track::after,
    body.br-master .reu-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-reu .reu-toggle .br-label,
    body.br-master .reu-toggle .br-label { color: #ffd617; }

    .reu-yellow-ov {
      position: absolute;
      top: calc(14 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8099px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-reu .reu-yellow-ov,
    body.br-master .reu-yellow-ov { width: 32px; }

    body.br-reu .bar.serug,
    body.br-master .bar.serug {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-reu .bar.serug:hover,
    body.br-master .bar.serug:hover { filter: brightness(1.1); }

    /* ── Serug (30 yrs) ── */
    .serug-begat-btn {
      position: absolute;
      top: calc(14 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8338px);
      width: 30px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-serug .serug-begat-btn,
    body.br-master .serug-begat-btn { opacity: 1; }

    .serug-toggle {
      position: absolute;
      top: calc(14 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8378px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .serug-toggle:hover .br-track { border-color: #ffd617; }
    body.br-serug .serug-toggle .br-track,
    body.br-master .serug-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-serug .serug-toggle .br-track::after,
    body.br-master .serug-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-serug .serug-toggle .br-label,
    body.br-master .serug-toggle .br-label { color: #ffd617; }

    .serug-yellow-ov {
      position: absolute;
      top: calc(15 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8338px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-serug .serug-yellow-ov,
    body.br-master .serug-yellow-ov { width: 30px; }

    body.br-serug .bar.nahor,
    body.br-master .bar.nahor {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-serug .bar.nahor:hover,
    body.br-master .bar.nahor:hover { filter: brightness(1.1); }

    /* ── Nahor (29 yrs) ── */
    .nahor-begat-btn {
      position: absolute;
      top: calc(15 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8568px);
      width: 29px; height: var(--row-height);
      z-index: 16; cursor: default; user-select: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 900; color: #1a1400;
      background: linear-gradient(135deg, #c8a800 0%, #e8c000 50%, #c8a800 100%);
      border-right: 3px solid #ffd617;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    body.br-nahor .nahor-begat-btn,
    body.br-master .nahor-begat-btn { opacity: 1; }

    .nahor-toggle {
      position: absolute;
      top: calc(15 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8607px);
      height: var(--row-height);
      z-index: 17; display: flex; align-items: center; gap: 5px;
      cursor: pointer; user-select: none;
    }
    .nahor-toggle:hover .br-track { border-color: #ffd617; }
    body.br-nahor .nahor-toggle .br-track,
    body.br-master .nahor-toggle .br-track {
      background: rgba(255,200,0,0.35); border-color: #ffd617;
    }
    body.br-nahor .nahor-toggle .br-track::after,
    body.br-master .nahor-toggle .br-track::after {
      transform: translateX(16px); background: #ffd617;
    }
    body.br-nahor .nahor-toggle .br-label,
    body.br-master .nahor-toggle .br-label { color: #ffd617; }

    .nahor-yellow-ov {
      position: absolute;
      top: calc(16 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8568px);
      height: var(--row-height); width: 0;
      background: rgba(255,210,0,0.42); border-right: 3px solid #ffd617;
      z-index: 13; pointer-events: none;
      transition: width 0.5s cubic-bezier(.2,.8,.2,1);
    }
    body.br-nahor .nahor-yellow-ov,
    body.br-master .nahor-yellow-ov { width: 29px; }

    body.br-nahor .bar.terah,
    body.br-master .bar.terah {
      background: linear-gradient(90deg,#b01818 0%,#cc2020 60%,#be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
    }
    body.br-nahor .bar.terah:hover,
    body.br-master .bar.terah:hover { filter: brightness(1.1); }

    /* Hide chips/spans per patriarch on toggle */

    body.br-master .offset-s3-below,
    body.br-master .span-1140,
    body.br-master .offset-s4-below,
    body.br-master .span-2050,
    body.br-master .offset-s5-below,
    body.br-master .span-2945,
    body.br-master .offset-s6-below,
    body.br-master .span-3907,
    body.br-master .offset-s7-below,
    body.br-master .span-4272,
    body.br-master .offset-s8-below,
    body.br-master .span-5241,
    body.br-master .offset-s11-below,
    body.br-master .span-5925,
    body.br-master .offset-s12-below,
    body.br-master .span-6525,
    body.br-master .offset-s13-below,
    body.br-master .span-6963,
    body.br-master .offset-s14-below,
    body.br-master .span-7396,
    body.br-master .offset-s15-below,
    body.br-master .span-7860,
    body.br-master .offset-s16-below,
    body.br-master .span-8099,
    body.br-master .offset-s17-below,
    body.br-master .span-8338,
    body.br-master .offset-s18-below,
    body.br-master .span-8568,
    body.br-master .offset-s19-below,
    body.br-master .span-8716 {
      opacity: 0 !important; pointer-events: none; transition: opacity 0.3s ease;
    }

    /* Master toggle button */
    .master-begat-btn {
      display: flex; align-items: center; gap: 7px;
      padding: 6px 14px; border-radius: 8px;
      border: 1px solid rgba(255,210,0,0.35);
      background: rgba(255,210,0,0.08);
      color: rgba(255,210,0,0.8);
      font-family: var(--font); font-size: 13px; font-weight: 800;
      letter-spacing: 0.04em; cursor: pointer;
      transition: background 0.18s, border-color 0.18s, color 0.18s;
      white-space: nowrap; align-self: center;
    }
    .master-begat-btn:hover { background: rgba(255,210,0,0.16); border-color: rgba(255,210,0,0.7); color: #ffd617; }
    .master-begat-btn.on { background: rgba(255,210,0,0.2); border-color: #ffd617; color: #ffd617; }
    .master-begat-btn .toggle-dot { background: rgba(255,210,0,0.5); }
    .master-begat-btn.on .toggle-dot { background: #ffd617; box-shadow: 0 0 6px rgba(255,210,0,0.8); }


    /* ── False Timeline Mode ── */

    body.false-tl .enos-toggle,
    body.false-tl .cainan-toggle,
    body.false-tl .mahalaleel-toggle,
    body.false-tl .jared-toggle,
    body.false-tl .enoch-toggle,
    body.false-tl .methuselah-toggle,
    body.false-tl .shem-toggle,
    body.false-tl .arphaxad-toggle,
    body.false-tl .salah-toggle,
    body.false-tl .eber-toggle,
    body.false-tl .peleg-toggle,
    body.false-tl .reu-toggle,
    body.false-tl .serug-toggle,
    body.false-tl .nahor-toggle,
    body.false-tl .enos-yellow-ov,
    body.false-tl .cainan-yellow-ov,
    body.false-tl .mahalaleel-yellow-ov,
    body.false-tl .jared-yellow-ov,
    body.false-tl .enoch-yellow-ov,
    body.false-tl .methuselah-yellow-ov,
    body.false-tl .shem-yellow-ov,
    body.false-tl .arphaxad-yellow-ov,
    body.false-tl .salah-yellow-ov,
    body.false-tl .eber-yellow-ov,
    body.false-tl .peleg-yellow-ov,
    body.false-tl .reu-yellow-ov,
    body.false-tl .serug-yellow-ov,
    body.false-tl .nahor-yellow-ov {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 0.3s ease;
    }

    /* All shifted child bars turn red when false mode on */
    body.false-tl .bar.sarah,
    body.false-tl .bar.ishmael,
    body.false-tl .bar.isaac,
    body.false-tl .bar.jacob,
    body.false-tl .bar.cainan,
    body.false-tl .bar.mahalaleel,
    body.false-tl .bar.jared,
    body.false-tl .bar.enoch,
    body.false-tl .bar.methuselah,
    body.false-tl .bar.lamech,
    body.false-tl .bar.noah,
    body.false-tl .bar.shem,
    body.false-tl .bar.arphaxad,
    body.false-tl .bar.salah,
    body.false-tl .bar.eber,
    body.false-tl .bar.peleg,
    body.false-tl .bar.reu,
    body.false-tl .bar.serug,
    body.false-tl .bar.nahor,
    body.false-tl .bar.terah,
    body.false-tl .bar.abraham {
      background: linear-gradient(90deg, #b01818 0%, #cc2020 60%, #be1c1c 100%) !important;
      box-shadow: 0 6px 20px rgba(160,20,20,0.55) !important;
      z-index: 15 !important;
      transition: left 0.7s cubic-bezier(.2,.8,.2,1),
                  background 0.4s ease, box-shadow 0.4s ease !important;
    }

    /* Hide all glowing begat chips in false mode */
    body.false-tl .offset-chip,
    body.false-tl .offset-chip-below,
    body.false-tl .enos-begat-btn,
    body.false-tl .cainan-begat-btn,
    body.false-tl .mahalaleel-begat-btn,
    body.false-tl .jared-begat-btn,
    body.false-tl .enoch-begat-btn,
    body.false-tl .methuselah-begat-btn,
    body.false-tl .shem-begat-btn,
    body.false-tl .arphaxad-begat-btn,
    body.false-tl .salah-begat-btn,
    body.false-tl .eber-begat-btn,
    body.false-tl .peleg-begat-btn,
    body.false-tl .reu-begat-btn,
    body.false-tl .serug-begat-btn,
    body.false-tl .nahor-begat-btn {
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* Hide span boxes in false mode */
    body.false-tl .span-8856,
    body.false-tl .span-8932,
    body.false-tl .span-8946,
    body.false-tl .span-9006,
    body.false-tl .span-1140,
    body.false-tl .span-2050,
    body.false-tl .span-2945,
    body.false-tl .span-3907,
    body.false-tl .span-4272,
    body.false-tl .span-5241,
    body.false-tl .span-5423,
    body.false-tl .span-5925,
    body.false-tl .span-6525,
    body.false-tl .span-6963,
    body.false-tl .span-7396,
    body.false-tl .span-7860,
    body.false-tl .span-8099,
    body.false-tl .span-8338,
    body.false-tl .span-8568,
    body.false-tl .span-8716,
    body.false-tl .span-8846 {
      opacity: 0 !important;
      transition: opacity 0.3s ease;
    }

    /* Red BC date text on span boxes */
    body.false-tl .span-text-date {
      color: #ff4444 !important;
    }
    body.false-tl .span-text-main {
      color: rgba(255,80,80,0.9) !important;
    }

    /* False mode banner */
    .false-tl-banner {
      position: fixed;
      top: 74px; left: 0; right: 0;
      z-index: 8999;
      background: rgba(160,20,20,0.92);
      border-bottom: 2px solid #ff4444;
      padding: 6px 20px;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.04em;
      backdrop-filter: blur(6px);
      transition: opacity 0.3s ease;
      pointer-events: none;
      opacity: 0;
    }
    .false-tl-banner.visible {
      display: flex;
      opacity: 1;
    }
    .false-tl-banner .banner-icon { font-size: 16px; }
    .false-tl-banner .banner-note {
      font-weight: 500;
      color: rgba(255,200,200,0.85);
      font-size: 13px;
    }

    /* ── False Timeline Chips ── */
    .false-chip {
      position: absolute;
      height: var(--row-height);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      color: #fff;
      background: rgba(180, 20, 20, 0.85);
      border: 1.5px solid rgba(255, 80, 80, 0.8);
      border-radius: 4px;
      z-index: 20;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.35s ease;
      white-space: nowrap;
      padding: 0 5px;
      box-shadow: 0 0 8px rgba(255,60,60,0.5), 0 0 18px rgba(255,40,40,0.25);
      animation: falseChipGlow 2s ease-in-out infinite;
    }

    @keyframes falseChipGlow {
      0%, 100% { box-shadow: 0 0 6px 1px rgba(255,60,60,0.6), 0 0 14px 3px rgba(255,40,40,0.25); }
      50%       { box-shadow: 0 0 12px 3px rgba(255,80,80,0.9), 0 0 26px 8px rgba(255,40,40,0.45); }
    }

    body.false-tl .false-chip {
      opacity: 1;
    }

    /* ── False Flood Marker ── */
    .false-flood-marker {
      position: absolute;
      /* false flood at position 1656px from creation */
      left: calc(var(--stage-left) + 1656px);
      top: calc(50px + 7 * (var(--row-height) + var(--row-gap)));
      width: 2px;
      height: calc(11 * (var(--row-height) + var(--row-gap)) + var(--row-height) + 40px);
      background: linear-gradient(to bottom, transparent, #ff3333 8%, #ff3333 92%, transparent);
      z-index: 6;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    body.false-tl .false-flood-marker { opacity: 1; }

    .false-flood-circle {
      position: absolute;
      left: -8px;
      top: 4px;
      width: 18px;
      height: 18px;
      background: #ff3333;
      border-radius: 50%;
      box-shadow: 0 0 10px 4px #ff3333, 0 0 24px 10px rgba(255,50,50,0.6);
      animation: falsePulse 1.8s infinite ease-in-out;
    }

    @keyframes falsePulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 8px 3px #ff3333, 0 0 20px 8px rgba(255,50,50,0.5); }
      50%       { transform: scale(1.4); box-shadow: 0 0 18px 7px #ff3333, 0 0 36px 16px rgba(255,50,50,0.7); }
    }

    .false-flood-label {
      position: absolute;
      left: calc(var(--stage-left) + 1666px);
      top: calc(50px + 7 * (var(--row-height) + var(--row-gap)) - 26px);
      font-size: 13px;
      font-weight: 900;
      color: #0a0000;
      white-space: nowrap;
      z-index: 6;
      letter-spacing: 0.06em;
      display: flex;
      align-items: center;
      gap: 5px;
      background: #ff3333;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 4px;
      padding: 3px 8px;
      box-shadow: 0 0 10px rgba(255,50,50,0.7), 0 0 22px rgba(255,50,50,0.35);
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }
    body.false-tl .false-flood-label { opacity: 1; }

    /* ── Ussher Creation Marker ── */
    .ussher-marker {
      position: absolute;
      /* 4004 BC = 11013 - 4004 = 7009 from creation */
      left: calc(var(--stage-left) + 7009px);
      top: -18px;
      width: 2px;
      height: calc(19 * (var(--row-height) + var(--row-gap)) + 60px);
      background: linear-gradient(to bottom, transparent, #ff9900 8%, #ff9900 92%, transparent);
      z-index: 6;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s ease 0.3s;
    }
    body.false-tl .ussher-marker { opacity: 1; }

    .ussher-circle {
      position: absolute;
      left: -8px;
      top: -8px;
      width: 18px;
      height: 18px;
      background: #ff9900;
      border-radius: 50%;
      box-shadow: 0 0 10px 4px #ff9900, 0 0 24px 10px rgba(255,153,0,0.6);
      animation: ussherPulse 2.5s infinite ease-in-out;
    }
    @keyframes ussherPulse {
      0%, 100% { transform: scale(1); opacity: 0.9; }
      50%       { transform: scale(1.35); opacity: 1; }
    }

    .ussher-label {
      position: absolute;
      left: calc(var(--stage-left) + 7019px);
      top: -40px;
      font-size: 13px;
      font-weight: 900;
      color: #0a0500;
      white-space: nowrap;
      z-index: 6;
      background: #ff9900;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 4px;
      padding: 3px 8px;
      box-shadow: 0 0 10px rgba(255,153,0,0.7);
      opacity: 0;
      transition: opacity 0.5s ease 0.3s;
      pointer-events: none;
    }
    body.false-tl .ussher-label { opacity: 1; }

    /* False chip positions */
    .fc-enos { top: calc(50px + 3 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 235px); width: 90px; font-size: 13px; }
    .fc-cainan { top: calc(50px + 4 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 325px); width: 70px; font-size: 13px; }
    .fc-mahalaleel { top: calc(50px + 5 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 395px); width: 65px; font-size: 13px; }
    .fc-jared { top: calc(50px + 6 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 460px); width: 162px; font-size: 13px; }
    .fc-enoch { top: calc(50px + 7 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 622px); width: 65px; font-size: 13px; }
    .fc-methuselah { top: calc(50px + 8 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 687px); width: 187px; font-size: 13px; }
    .fc-lamech { top: calc(50px + 9 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 874px); width: 182px; font-size: 13px; }
    .fc-noah { top: calc(50px + 10 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1056px); width: 502px; font-size: 13px; }
    .fc-shem { top: calc(50px + 11 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1558px); width: 100px; font-size: 13px; }
    .fc-arphaxad { top: calc(50px + 12 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1658px); width: 35px; font-size: 13px; }
    .fc-salah { top: calc(50px + 13 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1693px); width: 30px; font-size: 13px; }
    .fc-eber { top: calc(50px + 14 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1723px); width: 34px; font-size: 13px; }
    .fc-peleg { top: calc(50px + 15 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1757px); width: 30px; font-size: 13px; }
    .fc-reu { top: calc(50px + 16 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1787px); width: 32px; font-size: 13px; }
    .fc-serug { top: calc(50px + 17 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1819px); width: 30px; font-size: 13px; }
    .fc-nahor { top: calc(50px + 18 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1849px); width: 29px; font-size: 13px; }
    .fc-terah { top: calc(50px + 19 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 1878px); width: 130px; font-size: 13px; }

    /* Isaac: row 18, born 2067 BC yr 8946, dies 1887 BC yr 9126, width=180 */
    .bar.isaac {
      top: calc(20 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 8946px);
      width: calc(180 * var(--year-scale));
    }

    /* Jacob: row 19, born 2007 BC yr 9006, dies 1860 BC yr 9153, width=147 */
    .bar.jacob {
      top: calc(21 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9006px);
      width: calc(147 * var(--year-scale));
    }

    /* Levi: row 20, born 1937 BC yr 9076, dies 1800 BC yr 9213, width=113 */
    .bar.levi {
      top: calc(22 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9076px);
      width: calc(137 * var(--year-scale));
    }

    /* Kohath: row 21, born 1800 BC yr 9213, dies 1667 BC yr 9346, width=133 */
    .bar.kohath {
      top: calc(24 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9213px);
      width: calc(133 * var(--year-scale));
    }

    /* Amram: row 22, born 1667 BC yr 9346, dies 1530 BC yr 9483, width=137 */
    .bar.amram {
      top: calc(25 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9346px);
      width: calc(137 * var(--year-scale));
    }

    /* Aaron: row 23, born 1530 BC yr 9483, dies ~1407 BC = yr 9606, use Exodus endpoint */
    .bar.aaron {
      top: calc(26 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9483px);
      width: calc(123 * var(--year-scale));
    }

    /* New patriarch span boxes */
    .span-8946, .span-9006, .span-9076, .span-9213, .span-9346, .span-9483 {
      position: absolute;
      left: var(--stage-left);
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid #f0cb41;
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(240, 203, 65, 0.95);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      padding: 0 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .span-8946 { top: calc(21 * (var(--row-height) + var(--row-gap))); width: 8946px; }
    .span-9006 { top: calc(22 * (var(--row-height) + var(--row-gap))); width: 9006px; }
    .span-9076 { top: calc(24 * (var(--row-height) + var(--row-gap))); width: 9076px; }
    .span-9213 { top: calc(25 * (var(--row-height) + var(--row-gap))); width: 9213px; }
    .span-9346 { top: calc(26 * (var(--row-height) + var(--row-gap))); width: 9346px; }
    .span-9483 { top: calc(27 * (var(--row-height) + var(--row-gap))); width: 9483px; }

    /* New patriarch offset chips */
    .offset-s21-below { left: calc(var(--stage-left) + 8946px); width: 60px;  top: calc(21 * (var(--row-height) + var(--row-gap))); z-index: 16; }
    .offset-s22-below { left: calc(var(--stage-left) + 9006px); width: 70px;  top: calc(22 * (var(--row-height) + var(--row-gap))); z-index: 8; }
    .offset-s23-below { left: calc(var(--stage-left) + 9076px); width: 137px; top: calc(24 * (var(--row-height) + var(--row-gap))); z-index: 8; }
    .offset-s24-below { left: calc(var(--stage-left) + 9213px); width: 133px; top: calc(25 * (var(--row-height) + var(--row-gap))); z-index: 8; }
    .offset-s25-below { left: calc(var(--stage-left) + 9346px); width: 137px; top: calc(26 * (var(--row-height) + var(--row-gap))); z-index: 8; }

    /* ── Special Timeline Patriarchs (teal) ── */
    .bar.special-patriarch {
      background: linear-gradient(90deg, #3ab0e8 0%, #5BC6FA 60%, #4dbff7 100%) !important;
      box-shadow: 0 6px 16px rgba(91,198,250,0.35);
    }
    .bar.special-patriarch:hover {
      box-shadow: 0 12px 28px rgba(91,198,250,0.5), 0 0 20px rgba(91,198,250,0.3);
    }
    .bar.sarah   { top: calc(18 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 8856px);  width: calc(127 * var(--year-scale)); }
    .bar.ishmael { top: calc(19 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 8932px);  width: calc(137 * var(--year-scale)); }
    .bar.joseph  { top: calc(23 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9097px);  width: calc(110 * var(--year-scale)); }
    .bar.moses   { top: calc(28 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9486px);  width: calc(120 * var(--year-scale)); }

    /* Special patriarch span boxes */
    .span-8856, .span-8932, .span-9097, .span-9486 {
      position: absolute;
      left: var(--stage-left);
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid rgba(10,180,160,0.6);
      border-radius: 0;
      font-size: 13px;
      font-weight: 700;
      color: rgba(10,220,200,0.95);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      padding: 0 14px;
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .span-8856 { top: calc(18 * (var(--row-height) + var(--row-gap))); width: 8856px; }
    .span-8932 { top: calc(19 * (var(--row-height) + var(--row-gap))); width: 8932px; }
    .span-9097 { top: calc(23 * (var(--row-height) + var(--row-gap))); width: 9097px; }
    .span-9486 { top: calc(28 * (var(--row-height) + var(--row-gap))); width: 9486px; }

    /* spans-hidden for special spans */
    .spans-hidden .span-8856,
    .spans-hidden .span-8932,
    .spans-hidden .span-9097,
    .spans-hidden .span-9486 {
      border-color: rgba(255,255,255,0.06) !important;
      background: rgba(3,8,32,0.30) !important;
    }

    /* Prevent text wrapping on narrow bars */
    .bar.abraham .center-label,
    .bar.isaac .center-label {
      white-space: nowrap;
      font-size: 15px;
      overflow: hidden;
    }
    .bar.jacob .center-label {
      white-space: nowrap;
      font-size: 14px;
      overflow: visible;
    }

    /* Joseph bar is only 110px — compact to fit name + age */
    .bar.joseph .bar-content { padding: 0 6px; }
    .bar.joseph .center-label {
      white-space: nowrap; font-size: 15px;
      overflow: hidden; text-align: left;
    }
    .bar.joseph .right-label {
      font-size: 13px; min-width: 28px;
      padding-left: 4px; padding-right: 4px;
    }

    /* Sarah explicit color override */
    .bar.sarah {
      background: linear-gradient(90deg, #3ab0e8 0%, #5BC6FA 60%, #4dbff7 100%) !important;
      box-shadow: 0 6px 16px rgba(91,198,250,0.35) !important;
    }

    /* Aaron lifespan chips: +83 (Exodus age) and +40 */
    /* Aaron lifespan chips — use standard offset-chip-below positioning */
    .offset-aaron-83 {
      left: calc(var(--stage-left) + 9483px);
      top: calc(27 * (var(--row-height) + var(--row-gap)));
      width: 83px;
    }
    .offset-aaron-40 {
      left: calc(var(--stage-left) + 9566px);
      top: calc(27 * (var(--row-height) + var(--row-gap)));
      width: 40px;
    }

    /* ── Zoom control ── */
    .zoom-pad {
      position: fixed;
      bottom: 28px;
      right: 20px;
      z-index: 8000;
      display: flex;
      flex-direction: row;
      gap: 8px;
      filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
    }
    .zoom-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(10,20,70,0.88);
      color: rgba(255,255,255,0.75);
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s, color 0.15s, transform 0.1s;
      backdrop-filter: blur(8px);
    }
    .zoom-btn:hover {
      background: var(--gold);
      color: #0f1e3a;
      border-color: var(--gold);
      transform: scale(1.08);
    }
    .zoom-btn:active { transform: scale(0.94); }
        .zoom-level { display: none; }id rgba(23,130,245,0.35);
      background: rgba(23,130,245,0.18);
      color: rgba(255,255,255,0.7);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.02em;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      font-family: var(--font);
    }

    /* False timeline chips for Abraham → Isaac/Sarah/Ishmael and Isaac → Jacob */
    .fc-abraham-sarah   { top: calc(50px + 20 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 2008px); width: 10px;  font-size: 13px; }
    .fc-abraham-ishmael { top: calc(50px + 21 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 2008px); width: 86px;  font-size: 13px; }
    .fc-abraham-isaac   { top: calc(50px + 22 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 2008px); width: 100px; font-size: 13px; }
    .fc-isaac-jacob     { top: calc(50px + 23 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 2108px); width: 60px;  font-size: 13px; }

    /* ── Ussher False Timeline Bars ── */
    .ussher-bar {
      position: absolute;
      height: var(--row-height);
      background: linear-gradient(90deg, #b35c00 0%, #e07800 60%, #c96800 100%);
      box-shadow: 0 4px 14px rgba(200,100,0,0.4);
      z-index: 12;
      display: flex;
      align-items: center;
      padding: 0 10px;
      font-size: 13px;
      font-weight: 900;
      color: #fff8ee;
      white-space: nowrap;
      border-radius: 3px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    .ussher-bar .ussher-bc {
      margin-left: auto;
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,240,200,0.85);
      padding-left: 8px;
    }
    body.false-tl .ub-abraham,
    body.false-tl .ub-isaac,
    body.false-tl .ub-jacob,
    body.false-tl .ub-levi,
    body.false-tl .ub-kohath,
    body.false-tl .ub-amram,
    body.false-tl .ub-aaron,
    body.false-tl .ub-moses { opacity: 0 !important; pointer-events: none !important; }

    /* Individual Ussher bar positions */
    .ub-abraham { top: calc(50px + 37 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9017px); width: 100px; }
    .ub-isaac   { top: calc(50px + 38 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9117px); width: 100px; }
    .ub-jacob   { top: calc(50px + 39 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9177px); width: 100px; }
    .ub-levi    { top: calc(50px + 40 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9264px); width: 100px; }
    .ub-kohath  { top: calc(50px + 41 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9344px); width: 100px; }
    .ub-amram   { top: calc(50px + 42 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9477px); width: 100px; }
    .ub-aaron   { top: calc(50px + 43 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9439px); width: 100px; }
    .ub-moses   { top: calc(50px + 44 * (var(--row-height) + var(--row-gap))); left: calc(var(--stage-left) + 9442px); width: 100px; }

    /* Ussher event markers */
    .ussher-event-marker {
      position: absolute;
      width: 2px;
      background: linear-gradient(to bottom, transparent, #e07800 8%, #e07800 92%, transparent);
      z-index: 6;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    body.false-tl .ussher-event-marker { opacity: 1; }

    .ussher-event-label {
      position: absolute;
      font-size: 13px;
      font-weight: 900;
      color: #0a0500;
      white-space: nowrap;
      z-index: 6;
      background: #e07800;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 4px;
      padding: 2px 7px;
      box-shadow: 0 0 10px rgba(200,100,0,0.6);
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }
    body.false-tl .ussher-event-label { opacity: 1; }

    /* Canaan marker: 1921 BC = pos 9092 */
    .ue-canaan { left: calc(var(--stage-left) + 9092px); top: calc(50px + 37 * (var(--row-height) + var(--row-gap))); height: calc(8 * (var(--row-height) + var(--row-gap))); }
    .uel-canaan { left: calc(var(--stage-left) + 9096px); top: calc(50px + 28 * (var(--row-height) + var(--row-gap)) + 2px); }
    /* Egypt marker: 1706 BC = pos 9307 */
    .ue-egypt { left: calc(var(--stage-left) + 9307px); top: calc(50px + 39 * (var(--row-height) + var(--row-gap))); height: calc(6 * (var(--row-height) + var(--row-gap))); }
    .uel-egypt { left: calc(var(--stage-left) + 9311px); top: calc(50px + 30 * (var(--row-height) + var(--row-gap)) + 2px); }
    /* Exodus marker: 1491 BC = pos 9522 */
    .ue-exodus { left: calc(var(--stage-left) + 9522px); top: calc(50px + 43 * (var(--row-height) + var(--row-gap))); height: calc(3 * (var(--row-height) + var(--row-gap))); }
    .uel-exodus { left: calc(var(--stage-left) + 9526px); top: calc(50px + 34 * (var(--row-height) + var(--row-gap)) + 2px); }

    /* Ussher section label */
    .ussher-section-label {
      position: absolute;
      top: calc(50px + 32 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 20px);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #e07800;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
      white-space: nowrap;
    }
    body.false-tl .ussher-section-label { opacity: 1; }

    /* ── 430-Year Egypt Sojourn Bar — row 29, under Moses ── */

    /* Span rectangle: from creation to start of 430 (yr 9136, 1877 BC) */
    .span-430 {
      position: absolute;
      top: calc(50px + 31 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 9136px;
      height: var(--row-height);
      background: rgba(5, 29, 91, 0.30);
      border: 1px solid rgba(34,194,69,0.5);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      padding: 0 14px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(80,220,100,0.9);
      transition: background 0.3s, border-color 0.3s;
    }
    .span-430:hover {
      background: rgba(34,194,69,0.1);
      border-color: rgba(34,194,69,0.9);
    }
    .span-430 .span-text-main { color: rgba(80,220,100,0.85); }
    .span-430 .span-text-date { color: rgba(80,220,100,0.85); }

    /* The two green chips side by side */
    .bar-430-wrap {
      position: absolute;
      top: calc(50px + 31 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9136px);
      height: var(--row-height);
      display: flex;
      z-index: 10;
      cursor: default;
    }

    /* 30-year chip */
    .bar-430-30 {
      width: 30px;
      height: 100%;
      background: linear-gradient(135deg, #17882f 0%, #1eaa3c 100%);
      border-right: 2px solid rgba(255,255,255,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      color: #d0ffd8;
      flex-shrink: 0;
      border-radius: 0;
      box-shadow: 0 6px 16px rgba(0,0,0,0.28);
      transition: filter 0.18s;
    }

    /* 400-year affliction bar */
    .bar-430-400 {
      width: 400px;
      height: 100%;
      background: linear-gradient(90deg, #1eaa3c 0%, #25d04e 55%, #20c048 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 0.02em;
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
      flex-shrink: 0;
      border-radius: 0 10px 10px 0;
      box-shadow: 0 6px 16px rgba(0,0,0,0.28);
      transition: filter 0.18s, transform 0.18s, box-shadow 0.18s;
    }

    /* Hover: patriarch-style pop/lift */
    .bar-430-wrap {
      transition: transform 0.18s ease;
    }
    .bar-430-wrap:hover {
      transform: translateY(-3px) scale(1.015);
    }
    .bar-430-wrap:hover .bar-430-30,
    .bar-430-wrap:hover .bar-430-400 {
      filter: brightness(1.08);
    }
    .bar-430-wrap:hover .bar-430-400 {
      box-shadow: 0 12px 28px rgba(0,0,0,0.38), 0 0 20px rgba(30,180,60,0.25);
    }

    /* ── Exodus Layer — row 32 ── */
    .exodus-span {
      position: absolute;
      top: calc(50px + 32 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 9566px;
      height: var(--row-height);
      background: rgba(80, 5, 5, 0.28);
      border: 1px solid rgba(220,60,60,0.7);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 18px;
      padding: 0 14px;
      font-weight: 700;
      color: rgba(255,120,120,0.9);
      transition: background 0.25s, border-color 0.25s;
      cursor: default;
      box-sizing: border-box;
    }
    .exodus-span:hover {
      background: rgba(180,30,30,0.18);
      border-color: rgba(255,80,80,1);
    }
    .exodus-quote {
      font-size: 13px;
      font-style: italic;
      font-weight: 600;
      color: rgba(255,160,160,0.85);
      white-space: nowrap;
    }
    .exodus-meta {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 18px;
      flex-shrink: 0;
    }
    .exodus-bc   { font-size: 13px; font-weight: 900; color: rgba(255,100,100,0.95); white-space: nowrap; }
    .exodus-yr   { font-size: 13px; font-weight: 700; color: rgba(255,140,140,0.8);  white-space: nowrap; }
    .exodus-word { font-size: 22px; font-weight: 900; color: #ff6666; white-space: nowrap; letter-spacing: 0.06em; text-shadow: 0 0 12px rgba(255,80,80,0.6); }

    /* 10px red end marker — right edge at 1447 BC = yr 9566 */
    .exodus-marker {
      position: absolute;
      top: calc(50px + 32 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9556px);
      width: 10px;
      height: var(--row-height);
      background: linear-gradient(90deg, #cc2020 0%, #ff3333 100%);
      z-index: 11;
      border-radius: 0 3px 3px 0;
      box-shadow: 0 0 10px rgba(255,50,50,0.7), 0 0 22px rgba(255,50,50,0.35);
      animation: exodusMarkerPulse 2s ease-in-out infinite;
    }
    @keyframes exodusMarkerPulse {
      0%, 100% { box-shadow: 0 0 8px rgba(255,50,50,0.6), 0 0 18px rgba(255,50,50,0.3); }
      50%       { box-shadow: 0 0 18px rgba(255,50,50,1),  0 0 36px rgba(255,50,50,0.6); }
    }

    /* ── Wilderness / Jordan Crossing — row 33 ── */
    .wilderness-span {
      position: absolute;
      top: calc(50px + 33 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 9566px;
      height: var(--row-height);
      background: rgba(60, 10, 80, 0.28);
      border: 1px solid rgba(160, 60, 210, 0.7);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 18px;
      padding: 0 14px;
      font-weight: 700;
      color: rgba(200, 120, 255, 0.9);
      transition: background 0.25s, border-color 0.25s;
      cursor: default;
      box-sizing: border-box;
    }
    .wilderness-span:hover {
      background: rgba(120, 30, 160, 0.18);
      border-color: rgba(180, 80, 255, 1);
    }
    .wilderness-quote {
      font-size: 13px;
      font-style: italic;
      font-weight: 600;
      color: rgba(210, 160, 255, 0.85);
      white-space: nowrap;
    }
    .wilderness-meta {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 18px;
      flex-shrink: 0;
    }
    .wilderness-bc   { font-size: 13px; font-weight: 900; color: rgba(200,120,255,0.95); white-space: nowrap; }
    .wilderness-yr   { font-size: 13px; font-weight: 700; color: rgba(200,140,255,0.8);  white-space: nowrap; }
    .wilderness-word { font-size: 22px; font-weight: 900; color: #cc66ff; white-space: nowrap; letter-spacing: 0.06em; text-shadow: 0 0 12px rgba(160,60,255,0.6); }

    /* 40px purple bar starting at yr 9566 */
    .wilderness-bar {
      position: absolute;
      top: calc(50px + 33 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9566px);
      width: 40px;
      height: var(--row-height);
      background: linear-gradient(90deg, #7b12b8 0%, #9b30d8 60%, #8a1fc8 100%);
      z-index: 10;
      border-radius: 3px;
      box-shadow: 0 6px 18px rgba(130,30,200,0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      color: rgba(255,220,255,0.9);
      cursor: default;
      transition: filter 0.18s, transform 0.18s, box-shadow 0.18s;
      animation: wildernessGlow 3s ease-in-out infinite;
    }
    @keyframes wildernessGlow {
      0%, 100% { box-shadow: 0 6px 18px rgba(130,30,200,0.45); }
      50%       { box-shadow: 0 8px 30px rgba(160,60,255,0.75), 0 0 40px rgba(140,40,220,0.35); }
    }
    .wilderness-bar:hover {
      filter: brightness(1.18);
      transform: translateY(-2px) scaleY(1.04);
      box-shadow: 0 12px 36px rgba(160,60,255,0.85), 0 0 50px rgba(140,40,220,0.4);
      animation: none;
    }

    /* ── Solomon's Temple 480-year bar — row 34 ── */
    .solomon-span {
      position: absolute;
      top: calc(50px + 34 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 9566px;
      height: var(--row-height);
      background: rgba(10, 20, 80, 0.28);
      border: 1px solid rgba(111,144,248,0.7);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 18px;
      padding: 0 14px;
      font-weight: 700;
      color: rgba(111,144,248,0.9);
      transition: background 0.25s, border-color 0.25s;
      cursor: default;
      box-sizing: border-box;
    }
    .solomon-span:hover {
      background: rgba(111,144,248,0.1);
      border-color: rgba(111,144,248,1);
    }
    .solomon-meta {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 18px;
      flex-shrink: 0;
    }
    .solomon-bc   { font-size: 13px; font-weight: 900; color: rgba(111,144,248,0.95); white-space: nowrap; }
    .solomon-yr   { font-size: 13px; font-weight: 700; color: rgba(140,165,255,0.8);  white-space: nowrap; }
    .solomon-word { font-size: 16px; font-weight: 900; color: #6F90F8; white-space: nowrap; letter-spacing: 0.04em; text-shadow: 0 0 12px rgba(111,144,248,0.6); }

    .solomon-bar {
      position: absolute;
      top: calc(50px + 34 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9566px);
      width: 480px;
      height: var(--row-height);
      background: linear-gradient(90deg, #4a6de0 0%, #6F90F8 60%, #5c7ef0 100%);
      z-index: 10;
      border-radius: 0 10px 10px 0;
      box-shadow: 0 6px 16px rgba(0,0,0,0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      font-weight: 900;
      color: #000;
      text-align: center;
      padding: 0 10px;
      cursor: default;
      transition: filter 0.18s, transform 0.18s, box-shadow 0.18s;
    }
    .solomon-bar:hover {
      transform: translateY(-3px) scale(1.015);
      filter: brightness(1.08);
      box-shadow: 0 12px 28px rgba(0,0,0,0.38), 0 0 20px rgba(111,144,248,0.25);
    }

    /* ── 460 Year Reign of the 42 Kings — row 35 ── */
    .kings-span {
      position: absolute;
      top: calc(50px + 35 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 9566px;
      height: var(--row-height);
      background: rgba(30, 5, 50, 0.28);
      border: 1px solid rgba(140,60,200,0.6);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 14px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(180,100,255,0.9);
      transition: background 0.25s, border-color 0.25s;
      cursor: default;
      box-sizing: border-box;
    }
    .kings-span:hover {
      background: rgba(100,30,150,0.15);
      border-color: rgba(170,80,255,1);
    }
    .kings-span-text {
      white-space: nowrap;
      color: rgba(180,100,255,0.85);
    }

    /* +400 chip — position only, styling from offset-chip-below */
    .kings-chip {
      top: calc(50px + 35 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9566px);
      width: 400px;
    }

    /* 460px violet bar */
    .kings-bar {
      position: absolute;
      top: calc(50px + 35 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9966px);
      width: 460px;
      height: var(--row-height);
      background: linear-gradient(90deg, #3b08c0 0%, #4D0AF5 60%, #4208d8 100%);
      z-index: 10;
      border-radius: 0 10px 10px 0;
      box-shadow: 0 6px 16px rgba(0,0,0,0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      color: #fff;
      white-space: nowrap;
      padding: 0 12px;
      cursor: default;
      transition: filter 0.18s, transform 0.18s, box-shadow 0.18s;
    }
    .kings-bar:hover {
      transform: translateY(-3px) scale(1.015);
      filter: brightness(1.08);
      box-shadow: 0 12px 28px rgba(0,0,0,0.38), 0 0 20px rgba(120,50,200,0.25);
    }

    /* ── Kings 460 chip row — row 36 ── */
    .kings2-span {
      position: absolute;
      top: calc(50px + 36 * (var(--row-height) + var(--row-gap)));
      left: var(--stage-left);
      width: 9966px;
      height: var(--row-height);
      background: rgba(30, 5, 50, 0.28);
      border: 1px solid rgba(140,60,200,0.6);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 14px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(180,100,255,0.9);
      white-space: nowrap;
      transition: background 0.25s, border-color 0.25s;
      cursor: default;
      box-sizing: border-box;
    }
    .kings2-span:hover {
      background: rgba(100,30,150,0.15);
      border-color: rgba(170,80,255,1);
    }
    .kings2-chip {
      top: calc(50px + 36 * (var(--row-height) + var(--row-gap)));
      left: calc(var(--stage-left) + 9966px);
      width: 460px;
    }

    /* Hide Levi and all subsequent bars/spans/chips in false-tl mode */
    body.false-tl .bar.levi,
    body.false-tl .bar.kohath,
    body.false-tl .bar.amram,
    body.false-tl .bar.aaron,
    body.false-tl .bar.moses,
    body.false-tl .bar.joseph,
    body.false-tl .span-9076,
    body.false-tl .span-9097,
    body.false-tl .span-9213,
    body.false-tl .span-9346,
    body.false-tl .span-9483,
    body.false-tl .span-9486,
    body.false-tl .offset-s23-below,
    body.false-tl .offset-s24-below,
    body.false-tl .offset-s25-below,
    body.false-tl .offset-aaron-83,
    body.false-tl .offset-aaron-40 {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 0.3s ease;
    }

    /* Hide all timeline content except red bars and false chips in false-tl */
    body.false-tl .span-430,
    body.false-tl .bar-430-wrap,
    body.false-tl .exodus-span,
    body.false-tl .exodus-marker,
    body.false-tl .wilderness-span,
    body.false-tl .wilderness-bar,
    body.false-tl .solomon-span,
    body.false-tl .solomon-bar,
    body.false-tl .kings-span,
    body.false-tl .kings-bar,
    body.false-tl .kings-chip,
    body.false-tl .kings2-span,
    body.false-tl .kings2-chip,
    body.false-tl .flood-marker,
    body.false-tl .flood-label,
    body.false-tl .creation-label,
    body.false-tl .creation-marker,
    body.false-tl .ussher-section-label,
    body.false-tl .ue-canaan,
    body.false-tl .uel-canaan,
    body.false-tl .ue-egypt,
    body.false-tl .uel-egypt,
    body.false-tl .ue-exodus,
    body.false-tl .uel-exodus,
    body.false-tl .span-8946,
    body.false-tl .span-9006,
    body.false-tl .offset-s22-below {
      opacity: 0 !important;
      pointer-events: none !important;
      transition: opacity 0.3s ease;
    }

    /* ── Navigate Dropdown ── */
    .nav-dropdown-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .nav-dropdown-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 12px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(10,20,70,0.88);
      color: rgba(255,255,255,0.85);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
      cursor: pointer;
      white-space: nowrap;
      align-self: center;
      transition: background 0.18s, border-color 0.18s, color 0.18s;
      user-select: none;
    }
    .nav-dropdown-btn:hover {
      background: rgba(23,130,245,0.25);
      border-color: rgba(23,130,245,0.6);
      color: #fff;
    }
    .nav-dropdown-btn .nav-arrow {
      font-size: 13px;
      opacity: 0.7;
      transition: transform 0.2s;
    }
    .nav-dropdown-wrap.open .nav-dropdown-btn .nav-arrow {
      transform: rotate(180deg);
    }
    .nav-dropdown-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 260px;
      background: rgba(8,16,60,0.98);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.6);
      z-index: 99999;
      overflow: hidden;
      display: none;
      flex-direction: column;
      max-height: 70vh;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.15) transparent;
    }
    .nav-dropdown-wrap.open .nav-dropdown-menu {
      display: flex;
    }
    .nav-group-label {
      padding: 8px 14px 4px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .nav-group-label:first-child {
      border-top: none;
    }
    .nav-item {
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,0.8);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
    }
    .nav-item:hover {
      background: rgba(23,130,245,0.2);
      color: #fff;
    }
    .nav-item .nav-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .nav-item .nav-bc {
      margin-left: auto;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.4);
    }

    /* Nav highlight flash */
    @keyframes navHighlight {
      0%   { box-shadow: 0 0 0 0 rgba(255,215,0,0); filter: brightness(1); }
      20%  { box-shadow: 0 0 24px 8px rgba(255,215,0,0.9), 0 0 60px 20px rgba(255,215,0,0.4); filter: brightness(1.4); }
      60%  { box-shadow: 0 0 20px 6px rgba(255,215,0,0.6), 0 0 40px 12px rgba(255,215,0,0.25); filter: brightness(1.2); }
      100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); filter: brightness(1); }
    }
    .nav-highlighted {
      animation: navHighlight 1.8s ease-out forwards !important;
    }
  
    /* ══════════════════════════════════════════
       MOBILE STYLES (max-width: 700px)
       ══════════════════════════════════════════ */
    @media (max-width: 1100px), (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {

      /* ── Tabs bar: two dropdowns side by side ── */
      .tabs-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 10px;
      }

      /* Hide desktop tab buttons and toggle buttons */
      .tab-btn,
      .highlight-toggle,
      .master-begat-btn,
      .space-toggle {
        display: none !important;
      }

      /* Tab dropdown - takes half width */
      .mobile-tab-select {
        display: block !important;
        flex: 1 1 0;
        min-width: 0;
        background: rgba(5,20,70,0.9);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 8px;
        color: var(--gold);
        font-family: var(--font);
        font-size: 14px;
        font-weight: 700;
        padding: 8px 10px;
        cursor: pointer;
      }

      /* Options dropdown - takes other half */
      .mobile-options-select {
        display: block !important;
        flex: 1 1 0;
        min-width: 0;
        background: rgba(5,20,70,0.9);
        border: 1px solid rgba(255,255,255,0.15);
        border-radius: 8px;
        color: rgba(255,255,255,0.75);
        font-family: var(--font);
        font-size: 14px;
        font-weight: 700;
        padding: 8px 10px;
        cursor: pointer;
      }

      /* Go To dropdown full width on mobile */
      .nav-dropdown-wrap {
        flex: 1 1 100%;
        width: 100%;
      }
      .nav-dropdown-btn {
        width: 100%;
        justify-content: center;
        font-size: 13px !important;
        padding: 8px 14px !important;
      }

      /* ── Hide arrow buttons, keep only + and - ── */
      #scrollLeft,
      #scrollRight,
      #scrollUp,
      #scrollDown,
      #scrollSpeedBtn {
        display: none !important;
      }

      /* Bigger zoom buttons */
      .zoom-pad {
        right: 16px !important;
        left: auto !important;
        transform: none !important;
        bottom: 24px !important;
        flex-direction: row-reverse !important;
        gap: 10px !important;
      }
      .zoom-btn {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
        border-radius: 14px !important;
      }

      /* Hide scroll-pad entirely */
      .scroll-pad {
        display: none !important;
      }

      /* ── Modal handled by separate 600px media query below ── */

      /* ── Welcome/Instructions: scrollable, tips stacked vertically ── */
      .welcome-overlay {
        padding: 16px !important;
        /* 底部让出 .tlx-dock 与 iPhone 底部安全区，免得“进入”按钮被压住 */
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
      }

      .welcome-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        border-radius: 16px !important;
        padding: 20px 18px 32px !important;
        overflow-y: visible !important;
      }

      .welcome-close {
        width: 44px !important;
        height: 44px !important;
        font-size: 24px !important;
        background: rgba(220,38,38,0.35) !important;
        color: #ff6b6b !important;
        top: 12px !important;
        right: 12px !important;
      }

      .welcome-instructions {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }

      .welcome-tip[style*="grid-column"] {
        grid-column: span 1 !important;
      }

      .welcome-title {
        font-size: 1.3rem !important;
      }

      .welcome-body {
        font-size: 13px !important;
      }

      .dpad {
        display: none !important;
      }

      .welcome-enter-btn {
        width: 100% !important;
        font-size: 16px !important;
        padding: 16px !important;
        margin-top: 12px !important;
      }
    }

    /* Desktop: hide mobile-only elements */
    .mobile-tab-select {
      display: none;
    }
    .mobile-options-select {
      display: none;
    }
    .modal-explore-top {
      display: none;
    }

    
    /* Arrow pad vs swipe tip */
    .dpad-desktop { display: block; }
    @keyframes dkeyPulse {
      0%, 100% { background:rgba(23,130,245,0.2); border-color:rgba(23,130,245,0.45); color:#7bbfff; }
      50% { background:rgba(240,203,65,0.35); border-color:rgba(240,203,65,0.8); color:#f0cb41; box-shadow:0 0 10px rgba(240,203,65,0.5); }
    }
    .dkey-anim { animation:dkeyPulse 1.6s ease-in-out infinite; }
    #dkey-up    { animation-delay:0s; }
    #dkey-left  { animation-delay:0.4s; }
    #dkey-right { animation-delay:0.8s; }
    #dkey-down  { animation-delay:1.2s; }
    .mobile-nav-tip { display: none; }
    body.false-tl .span-130, body.false-tl .span-235 { opacity: 0; pointer-events: none; }
    @media (max-width: 1100px), (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
      .dpad-desktop { display: none !important; }
      .mobile-nav-tip { display: block !important; width: 100%; }
    }
    @media (max-width: 1100px) {
      .page.text-tab { min-width: 0 !important; width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; overflow-x: hidden !important; }
      .page.text-tab .qs-panel { max-width: 100% !important; padding: 18px 16px !important; box-sizing: border-box !important; }
      .qs-examples { grid-template-columns: 1fr !important; }
      .patriarch-grid { grid-template-columns: 36px 1fr 36px 1fr !important; }
      .numline { flex-wrap: wrap !important; overflow-x: auto !important; }
      .conversion-formula { flex-direction: column !important; gap: 4px !important; }
      .conv-examples { grid-template-columns: 1fr !important; }
    }
    @media (max-width: 480px) { .patriarch-grid { grid-template-columns: 36px 1fr !important; } }
    .scroll-btn.kb-active { background: var(--gold); color: #0f1e3a; border-color: var(--gold); transform: scale(0.94); box-shadow: 0 0 10px rgba(240,203,65,0.7); }
    .kb-hint { position: fixed; bottom: 148px; right: 28px; z-index: 8000; background: rgba(2,6,60,0.88); border: 1px solid rgba(240,203,65,0.3); color: rgba(255,255,255,0.75); font-size: 13px; font-family: var(--font); padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 1; transition: opacity 1s ease; }
    .kb-hint.fade-out { opacity: 0; }
    @media (max-width: 1100px) { .kb-hint { display: none !important; } }


/* ── 430 年寄居弹窗 ── */

#sojournOverlay{
  /* 最上层：高于站内顶栏、标签栏与先祖弹窗 */
  position:fixed; inset:0; z-index:1000004; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(2,6,23,0.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
#sojournOverlay.active{ display:flex; }
#sojournCard{
  position:relative; width:min(1180px, 96vw); max-height:92vh; overflow:auto;
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(40,90,180,0.20), transparent 60%),
    linear-gradient(180deg, #060c1f 0%, #04081a 100%);
  border:1px solid rgba(120,160,255,0.18); border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  padding:26px 30px 22px; color:#eaf0ff;
  transform:translateY(14px) scale(0.985); opacity:0; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s;
}
#sojournOverlay.active #sojournCard{ transform:none; opacity:1; }
#sojournClose{
  position:absolute; top:14px; right:16px; width:34px; height:34px; border-radius:9px;
  border:1px solid rgba(255,255,255,0.14); background:rgba(255,80,80,0.14); color:#ff9a9a;
  font-size:20px; line-height:1; cursor:pointer; z-index:2;
}
#sojournClose:hover{ background:rgba(255,80,80,0.28); }
#sojournHead .sj-title{ font-size:24px; font-weight:800; letter-spacing:.01em; color:#fff; }
#sojournHead .sj-sub{ font-size:13px; color:#9fb2dc; margin-top:4px; }

#sojournStage{ display:flex; gap:8px; margin-top:30px; min-height:360px; }

#sjChart{
  position:relative; flex:1; min-width:0; padding-top:8px; margin-left:118px;
  /* the chart uses 1px = 1 year. 430px green bar + room for Aaron's +40 overhang.
     left margin leaves room for the "60" box (x=-60) and the start date label. */
}
/* date anchors at the start (1877 BC) and end (1447 BC) of the 430 */
.sj-date{
  position:absolute; font-size:13px; line-height:1.25; color:#9fb2dc;
  opacity:0; transition:opacity .5s; pointer-events:none; white-space:nowrap;
}
.sj-date b{ color:#fff; font-size:14px; font-weight:800; }
.sj-date-start{ left:0; top:-32px; transform:translateX(-100%); padding-right:12px; text-align:right; }
.sj-date-start b{ color:#7bdcff; }
.sj-date-end{ left:430px; top:-32px; padding-left:12px; text-align:left; }
.sj-date-end b{ color:#ffd14a; }
#sojournStage.overlap .sj-date{ opacity:1; }
#sjGreen{
  position:absolute; left:0; top:8px; width:430px; height:74px;
  background:linear-gradient(180deg,#7bf63a,#5fd91f); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:#0a2a06; font-weight:800; font-size:30px; letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(95,217,31,0.25);
}
.sj-guide{
  position:absolute; top:0; width:2px; height:340px;
  background:rgba(180,200,255,0.35);
}
#sjGuideStart{ left:0; }
#sjGuideEnd{ left:430px; }
.sj-guide::before{ content:''; position:absolute; top:0; left:-3px; width:8px; height:8px; border-radius:50%; background:rgba(200,215,255,0.8); }

.sj-bar{
  position:absolute; height:48px; border-radius:5px;
  background:linear-gradient(180deg,#2f9bf0,#1f7fd6);
  border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; padding:0 14px; gap:8px;
  color:#fff; font-weight:800; font-size:20px; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  transition:left .8s cubic-bezier(.3,.7,.2,1), top .8s cubic-bezier(.3,.7,.2,1), width .8s cubic-bezier(.3,.7,.2,1);
}
.sj-bar .sj-name{ flex:0 0 auto; }
.sj-bar .sj-life{
  font-size:13px; font-weight:700; color:rgba(255,255,255,0.78);
  background:rgba(0,0,0,0.18); border-radius:4px; padding:1px 6px; flex:0 0 auto;
}
/* generation label sits OUTSIDE the bar, to the right, so it never overlaps */
.sj-bar .sj-gen{
  position:absolute; left:calc(100% + 16px); top:50%; transform:translateY(-50%);
  font-size:17px; font-weight:800; color:#7bf63a; text-shadow:0 1px 2px rgba(0,0,0,0.5);
  opacity:1; transition:opacity .4s; pointer-events:none;
}
.sj-offset{
  position:absolute; height:48px; border-radius:5px; width:60px;
  background:rgba(150,190,240,0.45); border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  color:#0a2236; font-weight:800; font-size:20px;
  opacity:0; transition:opacity .5s; pointer-events:none;
}
.sj-off40{ width:40px; }

.sj-bracket{
  position:absolute; left:0; top:300px; width:430px; height:20px;
  display:flex; align-items:center; opacity:0; transition:opacity .5s;
}
.sj-bracket-line{ flex:1; height:2px; background:rgba(180,200,255,0.5); }
.sj-bracket-arrow{ width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent; }
.sj-bracket-arrow.left{ border-right:9px solid rgba(180,200,255,0.5); }
.sj-bracket-arrow.right{ border-left:9px solid rgba(180,200,255,0.5); }

/* ── VERTICAL STACK STATE (initial) ── */
#sojournStage.stack .sj-bar{ left:0; }
#sojournStage.stack .sj-levi  { top:96px;  width:137px; }
#sojournStage.stack .sj-kohath{ top:150px; width:133px; }
#sojournStage.stack .sj-amram { top:204px; width:137px; }
#sojournStage.stack .sj-aaron { top:258px; width:123px; }
#sojournStage.stack .sj-guide{ display:none; }
#sojournStage.stack .sj-bracket{ opacity:0; }
#sojournStage.stack .sj-offset{ opacity:0; }

/* ── OVERLAP STATE — 1yr=1px, chained end-to-end inside the 430 ──
   Levi enters Egypt at age 60, so his bar's 60-mark sits at green start (x=0):
     Levi   137 wide, starts at x=-60  → spans -60..77   (77 inside green)
     Kohath 133 wide, starts at x=77   → 77..210
     Amram  137 wide, starts at x=210  → 210..347
     Aaron  123 wide, starts at x=347  → 347..470  (overhangs end by 40)            */
#sojournStage.overlap .sj-levi  { top:96px;  left:-60px; width:137px; }
#sojournStage.overlap .sj-kohath{ top:150px; left:77px;  width:133px; }
#sojournStage.overlap .sj-amram { top:204px; left:210px; width:137px; }
#sojournStage.overlap .sj-aaron { top:258px; left:347px; width:123px; }
#sojournStage.overlap .sj-bar .sj-gen{ opacity:0; }
#sojournStage.overlap .sj-levi{ justify-content:flex-start; padding-left:66px; }
#sojournStage.overlap .sj-off60{ top:96px;  left:-60px; opacity:1; }   /* Levi's pre-Egypt 60 */
#sojournStage.overlap .sj-off40{ top:258px; left:430px; opacity:1; }   /* Aaron's post-Exodus 40 */
#sojournStage.overlap .sj-bracket{ opacity:1; }

#sojournFoot{ display:flex; align-items:center; justify-content:space-between; margin-top:26px; gap:16px; flex-wrap:wrap; }
.sj-foot-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.sj-math{ font-size:18px; font-weight:700; color:#cdd9f5; }
.sj-math .gold{ color:#ffd14a; } .sj-math .green{ color:#7bf63a; }

/* hypothetical mode: a marker line for Joseph's birth, and red "moved" Levi bar */
.sj-joseph-line{
  position:absolute; width:2px; top:0; height:300px; background:rgba(255,90,90,0.55);
  opacity:0; transition:opacity .5s; z-index:3;
}
.sj-joseph-line::after{
  content:'约瑟出生 · 公元前 1916 年'; position:absolute; top:44px; left:7px;
  font-size:13px; font-weight:700; color:#ff9a9a; white-space:nowrap;
}
#sojournStage.hypo .sj-joseph-line{ opacity:1; }
#sojournStage.hypo .sj-off60, #sojournStage.hypo .sj-off40{ opacity:0; }
#sojournStage.hypo .sj-date, #sojournStage.hypo .sj-bracket{ opacity:1; }
#sojournStage.hypo .sj-bar .sj-gen{ opacity:0; }
#sojournStage.hypo .sj-levi{ justify-content:flex-start; padding-left:14px; }
/* when impossible, Levi's bar turns red to flag the contradiction */
#sojournStage.hypo.impossible .sj-levi{
  background:linear-gradient(180deg,#ef4444,#c92d2d); border-color:rgba(255,160,160,0.6);
}
.sj-levi-newdate{
  position:absolute; font-size:13px; font-weight:800; color:#ff9a9a; white-space:nowrap;
  opacity:0; transition:opacity .4s; pointer-events:none;
}
#sojournStage.hypo .sj-levi-newdate{ opacity:1; }

#sjHypo{
  display:none; flex:0 0 318px; align-self:flex-start;
  margin-left:24px; padding:16px 18px; border-radius:12px;
  background:rgba(120,40,40,0.10); border:1px solid rgba(255,120,120,0.22);
}
#sojournStage.hypo #sjHypo{ display:block; }
.sj-hypo-head{ font-size:15px; font-weight:800; color:#ffd9d9; margin-bottom:14px; line-height:1.3; }
.sj-hypo-controls{ display:flex; flex-direction:column; gap:10px; }
.sj-hypo-controls label{ font-size:13px; color:#cdd9f5; font-weight:600; }
.sj-slider-row{ display:flex; align-items:center; gap:10px; }
#sjSlider{ flex:1; min-width:0; accent-color:#ef4444; }
#sjSliderVal{ font-size:14px; font-weight:800; color:#fff; min-width:64px; text-align:right; }
.sj-chip-btn{
  padding:8px 13px; border-radius:8px; border:1px solid rgba(255,150,150,0.4);
  background:rgba(255,90,90,0.14); color:#ffc9c9; font-weight:700; font-size:13px; cursor:pointer; align-self:flex-start;
}
.sj-chip-btn:hover{ background:rgba(255,90,90,0.26); }
.sj-hypo-explain{ font-size:13px; line-height:1.55; color:#d7e0f5; margin-top:14px; }
.sj-hypo-explain b{ color:#fff; }
.sj-hypo-verdict{ font-size:13px; line-height:1.5; margin-top:12px; padding:11px 13px; border-radius:9px; font-weight:600; }
.sj-hypo-verdict.bad{ background:rgba(239,68,68,0.16); border:1px solid rgba(239,68,68,0.4); color:#ffd0d0; }
.sj-hypo-verdict.ok{ background:rgba(91,198,250,0.12); border:1px solid rgba(91,198,250,0.3); color:#cdeaff; }
#sjToggle{
  padding:11px 20px; border-radius:10px; border:1px solid rgba(120,160,255,0.4);
  background:linear-gradient(180deg,#2f6fe0,#2257c4); color:#fff; font-weight:800; font-size:14px; cursor:pointer;
}
#sjToggle:hover{ filter:brightness(1.1); }

@media (max-width:900px){
  #sojournStage{ flex-direction:column; }
  #sjChart{ overflow-x:auto; margin-left:70px; }
}


/* ── 「错误的年表」滑动动画（main.js tlSlideBar） ── */
.tl-ghost {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed rgba(255, 214, 23, 0.75);
  background: rgba(255, 214, 23, 0.07);
  pointer-events: none;
  z-index: 12;
  opacity: 1;
  transition: opacity 1.4s ease 0.25s;
}
.tl-ghost.tl-ghost-fade { opacity: 0; }
/* 滑动中：身后一道淡红拖尾（往左移拖尾在右，往右移拖尾在左） */
html body .bar.tl-sliding.tl-sliding-left  { box-shadow: 46px 0 28px -14px rgba(255, 70, 70, 0.55), 0 6px 20px rgba(160, 20, 20, 0.55) !important; }
html body .bar.tl-sliding.tl-sliding-right { box-shadow: -46px 0 28px -14px rgba(120, 170, 255, 0.5), 0 6px 20px rgba(20, 60, 160, 0.4) !important; }
/* 到位：轻轻一亮 */
@keyframes tlArrive { 0% { filter: brightness(1.35); } 100% { filter: brightness(1); } }
.bar.tl-arrived { animation: tlArrive 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .tl-ghost { display: none; }
  .bar.tl-arrived { animation: none; }
}


/* ── 年表文字版（SEO：给不运行脚本的读者与搜索引擎；timelineService.seoIndexFor 生成） ── */
.tl-seo-index { max-width: min(880px, calc(100vw - 24px)); margin: 48px 28px 24px; color: rgba(255, 255, 255, 0.82); }
.tl-seo-index details { background: rgba(8, 16, 60, 0.72); border: 1px solid rgba(96, 165, 250, 0.22); border-radius: 14px; padding: 4px 22px; }
.tl-seo-index summary { cursor: pointer; list-style: none; padding: 14px 0; }
.tl-seo-index summary::-webkit-details-marker { display: none; }
.tl-seo-index summary h2 { display: inline; font-size: 16px; font-weight: 800; color: #fff; margin: 0; }
.tl-seo-index summary::after { content: ' ▾'; color: #93c5fd; }
.tl-seo-index details[open] summary::after { content: ' ▴'; }
.tl-seo-index h2 { font-size: 16px; font-weight: 800; color: #fff; margin: 22px 0 10px; }
.tl-seo-intro { font-size: 13.5px; line-height: 1.75; margin: 0 0 14px; max-width: 68ch; }
.tl-seo-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tl-seo-people li { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 10px 12px; }
.tl-seo-people h3 { font-size: 14.5px; margin: 0 0 3px; }
.tl-seo-people a, .tl-seo-tabs a { color: #93c5fd; text-decoration: none; }
.tl-seo-people a:hover, .tl-seo-tabs a:hover { text-decoration: underline; }
.tl-seo-people p { font-size: 13px; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.66); }
.tl-seo-people .tl-seo-year { color: #fcd34d; font-weight: 700; margin-bottom: 4px; }
.tl-seo-tabs { margin: 0 0 16px; padding-left: 18px; font-size: 13.5px; line-height: 1.9; }
@media (max-width: 700px) {
  .tl-seo-index { margin: 32px 12px 20px; }
  .tl-seo-people { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
   P3 · 对齐设计稿 pages/timeline.html —— theme-night 星空变体
   P1-07：变体只改底色和强调色；导航、按钮、字体、图标与全站一致（/css/tokens.css + /css/components.css）。
   - 年表画布里的条形、标签、时间线是数据图本身，配色不在这里改；内容块（tl_blocks / tl_popups）原文不改，
     只在显示层把字号拉到 ≥ 13px。
   - 本页新增的手机规则只写在本段末尾唯一的 720px 块里（上面老样式里 1100 / 700 / 600 / 480 的断点是原有的，没有动）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 基础 ── */
:root { --font: var(--font-sans); }
html, body { background: var(--night-bg); }
/* components.css 给 body 的行高是 1.7；年表画布、弹窗、标签页的老内容按 normal 排版（标签位置、数据格高度都按它算），
   这里还原；新加的页头 / 页脚自己用设计行高 */
body { line-height: normal; }
.timeline-wrap .row { display: block; }   /* components.css 的 .row 是 flex；这里的 .row 是绝对定位的年表行 */
.dkey.empty { padding: 0; }               /* components.css 的 .empty（空状态）带 32px 内边距 */
.i.i-16 { width: 16px; height: 16px; }    /* 上面的 .i 是 1em，尺寸类要更具体才生效 */
.i.i-24 { width: 24px; height: 24px; }
/* .page 的上边距只由 main.js 的 applyZoom 按「顶栏 + 工具栏 + 20px」算出；原来再加的 100px 外边距去掉 */
.page { margin-top: 0; }

/* ── 页头：面包屑 → 标题与一句话（内容块 heading）→ 操作 → 「建设中」提示 ──
   .page 随年表画布至少 1440px 宽；页头宽度限制在视口里（左右各让出 .page 的 28px 内边距） */
.tl-head { max-width: min(var(--container), calc(100vw - 56px)); padding: 0 0 var(--s-5); line-height: var(--lh-body); color: var(--night-text); }
.tl-head .crumbs { color: var(--night-text-2); margin-bottom: var(--s-2); }
.tl-head .crumbs a { color: var(--night-text-2); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -12px 0; }
.tl-head .crumbs a:hover { color: var(--night-text); }
.tl-head .crumbs [aria-current] { color: var(--night-text); }
.tl-head .crumbs .i { opacity: 0.6; }
.tl-head .title { font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: 0; margin: 0; color: var(--night-text); }
.tl-head .subtitle { font-size: var(--fs-lg); font-weight: 400; line-height: var(--lh-body); color: var(--night-text-2); margin: var(--s-2) 0 0; max-width: 36em; }
.tl-head .head-actions .btn-secondary { background: transparent; color: var(--night-text); border-color: rgba(255, 255, 255, 0.24); }
.tl-head .head-actions .btn-secondary:hover { background: rgba(255, 255, 255, 0.06); }
.tl-head .head-actions .btn-text { color: var(--night-accent); }
.tl-head .head-actions .btn-text:hover { background: rgba(242, 199, 92, 0.12); }
/* 「建设中」提示（H4：按默认保留）：文字与关闭按钮来自内容块，这里排成一枚小提示（设计稿里是图表栏上的 .tag） */
.tl-construction { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; min-height: 44px; margin: var(--s-4) 0 0; padding: 0 0 0 var(--s-4); border-radius: var(--r-sm); background: rgba(242, 199, 92, 0.1); border: 1px solid rgba(242, 199, 92, 0.35); color: var(--night-accent); font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; }
.tl-construction > span:first-child { display: inline-flex; flex: none; }
.tl-construction button { position: static !important; transform: none !important; flex: none; width: 44px !important; height: 44px !important; border: 0 !important; border-radius: var(--r-pill) !important; background: transparent !important; color: var(--night-accent) !important; font-size: 20px !important; }
.tl-construction button:hover { background: rgba(255, 255, 255, 0.08) !important; }

/* ── 工具栏：标签页 + 选项 + 跳转（照 components.css 的 .night .tabs / .night .btn-secondary） ── */
.tabs-bar { background: rgba(11, 16, 36, 0.96); border-bottom: 1px solid var(--night-line); padding: 6px 16px; gap: 4px; }
.tab-btn { height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--night-text-2); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
.tab-btn.active { background: transparent; color: var(--night-text); border-color: transparent; border-bottom-color: var(--night-accent); }
.tab-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.06); color: var(--night-text); }
.tab-btn .i { width: 16px; height: 16px; }
.highlight-toggle, .master-begat-btn, .space-toggle, .nav-dropdown-btn { height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.24); background: transparent; color: var(--night-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
.highlight-toggle:hover, .master-begat-btn:hover, .space-toggle:hover, .nav-dropdown-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.36); color: var(--night-text); }
.highlight-toggle.off { color: var(--night-text-2); }
.highlight-toggle:not(.off) { border-color: var(--night-accent); color: var(--night-accent); }
.master-begat-btn.on { border-color: #ff8a80; color: #ffb3ad; background: rgba(255, 138, 128, 0.12); }
.space-toggle.on { border-color: #c8bcff; color: #e0d8ff; background: rgba(160, 140, 255, 0.14); }
.toggle-dot { width: 8px; height: 8px; }
.nav-dropdown-btn .nav-arrow { font-size: inherit; }
.nav-dropdown-btn .nav-arrow .i { width: 14px; height: 14px; }
.nav-dropdown-menu { background: var(--night-surface); border-color: var(--night-line); border-radius: var(--r-md); }
.nav-item { min-height: 44px; font-size: var(--fs-sm); }
.nav-group-label { font-size: var(--fs-xs); letter-spacing: 0.06em; }
.mobile-tab-select, .mobile-options-select { min-height: 44px; border-radius: var(--r-md) !important; font-weight: 600; background-color: var(--night-surface) !important; border-color: rgba(255, 255, 255, 0.24) !important; }

/* ── 浮动控件：缩放、方向键、返回 —— 图标按钮（圆形，44px 点按区） ── */
.zoom-btn, .scroll-btn { width: 44px; height: 44px; border-radius: var(--r-pill); border-color: rgba(255, 255, 255, 0.24); background: var(--night-surface); color: var(--night-text); font-size: var(--fs-sm); }
.zoom-btn:hover, .scroll-btn:hover { background: var(--night-accent); border-color: var(--night-accent); color: #1a1405; }
.zoom-btn .i, .scroll-btn .i { width: 20px; height: 20px; }
.scroll-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); right: 124px; }
.return-btn { min-height: 44px; border-radius: var(--r-pill); border-color: rgba(255, 255, 255, 0.24); background: var(--night-surface); color: var(--night-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; box-shadow: var(--shadow-2); }
.return-btn:hover { background: var(--night-accent); border-color: var(--night-accent); color: #1a1405; }
/* 键盘提示放在方向键上方，不压住上键和「返回」按钮 */
.kb-hint { bottom: 184px; right: 124px; font-size: var(--fs-xs); background: var(--night-surface); border-color: var(--night-line); color: var(--night-text-2); }

/* ── 弹层：先祖弹窗、对比布局、欢迎层、Qara Sem 等文字标签页 —— 面用 --night-surface（不用渐变） ── */
:root { --modal-bg: var(--night-surface); }
.modal-card, .lc-modal, .welcome-card, .qs-panel { background: var(--night-surface); }
/* 关闭按钮：圆形图标按钮，在标题栏里垂直居中（老样式 ≤1100 写死 top:10px 又保留了 translateY(-50%)，按钮会顶出弹窗上沿） */
.modal-close { width: 44px !important; height: 44px !important; top: 50% !important; right: 6px !important; transform: translateY(-50%) !important; padding: 0; border-radius: var(--r-pill) !important; background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; font-size: 20px !important; }
.modal-close:hover { background: rgba(255, 255, 255, 0.28) !important; color: #fff !important; }
.modal-close .i { width: 20px; height: 20px; }
.modal-header { padding-right: 58px; }
/* 弹窗顶部「浏览年表」（≤1100 显示，点了关闭弹窗回到年表）：次按钮样式 */
.modal-explore-top { align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 8px 14px 0; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.24); background: transparent; color: var(--night-text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.modal-explore-top:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.modal-explore-top .i { color: var(--night-accent); }
.modal-compare-btn { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); font-weight: 600; letter-spacing: 0; }
.welcome-close { border-radius: var(--r-pill) !important; background: rgba(255, 255, 255, 0.08) !important; color: var(--night-text) !important; }
.welcome-close:hover { background: rgba(255, 255, 255, 0.16) !important; color: var(--night-text) !important; transform: none; }
/* 欢迎层「探索年表」：本页唯一的主按钮 */
.welcome-enter-btn { min-height: 48px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font-weight: 600; letter-spacing: 0; box-shadow: none; transition: background 0.15s; }
.welcome-enter-btn:hover { background: var(--primary-hover); filter: none; transform: none; box-shadow: none; }
.welcome-eyebrow, .welcome-how-title { letter-spacing: 0.06em; }

/* ── 内容块里的内联小字（内容块原文不改）：≥ 13px ── */
.welcome-card [style*="font-size:9px"], .welcome-card [style*="font-size:10px"], .welcome-card [style*="font-size:11px"], .welcome-card [style*="font-size:12px"],
.welcome-card [style*="font-size: 9px"], .welcome-card [style*="font-size: 10px"], .welcome-card [style*="font-size: 11px"], .welcome-card [style*="font-size: 12px"],
.modal-body [style*="font-size:9px"], .modal-body [style*="font-size:10px"], .modal-body [style*="font-size:11px"], .modal-body [style*="font-size:12px"],
.modal-body [style*="font-size: 9px"], .modal-body [style*="font-size: 10px"], .modal-body [style*="font-size: 11px"], .modal-body [style*="font-size: 12px"],
.tab-panel [style*="font-size:6px"], .tab-panel [style*="font-size:9px"], .tab-panel [style*="font-size:10px"], .tab-panel [style*="font-size:11px"], .tab-panel [style*="font-size:12px"],
.tab-panel [style*="font-size: 6px"], .tab-panel [style*="font-size: 9px"], .tab-panel [style*="font-size: 10px"], .tab-panel [style*="font-size: 11px"], .tab-panel [style*="font-size: 12px"] { font-size: 13px !important; }
/* 错误年表里撒拉的「+10」格只有 10px 宽：字放大后往左伸（左边是空行），不压住右边撒拉的横条 */
.tab-panel .false-chip.fc-abraham-sarah { justify-content: flex-end !important; padding: 0 2px 0 0 !important; }
/* 欢迎层方向键示意（main.js 把 ◀ ▶ ▲ ▼ 换成 sprite 箭头） */
.dkey .i { width: 16px; height: 16px; }

/* ── 年表文字版（SEO）：夜空卡片；手机上人名链接给足点按高度 ── */
.tl-seo-index { color: var(--night-text-2); }
.tl-seo-index details { background: var(--night-surface); border-color: var(--night-line); }
.tl-seo-index summary { min-height: 44px; display: flex; align-items: center; }
.tl-seo-people a, .tl-seo-tabs a { color: var(--night-accent); }
.tl-seo-people h3 a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -12px 0; }
.tl-seo-tabs { list-style: disc; }   /* components.css 去掉了列表符号 */

/* ── 年表里能点的「生」字框：点按区高度从 43px 补到 44px（多出的 1px 落在行间距里） ── */
.offset-chip, .offset-chip-below { min-height: 44px; }
/* 洪水标签里的「7000 年时间路径」按钮：点按区 44×44（本身透明，负外边距不改变标签行高），看得见的小方块画在 ::before 里 */
.tp-flood-btn { position: relative; isolation: isolate; min-width: 44px; min-height: 44px; margin-top: -13px; margin-bottom: -13px; padding: 0 10px; background: transparent !important; border-color: transparent !important; }
.tp-flood-btn::before { content: ""; position: absolute; inset: 13px 6px; z-index: -1; border-radius: 4px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.4); pointer-events: none; transition: background 0.15s; }
.tp-flood-btn:hover::before { background: rgba(0, 0, 0, 0.4); }

/* 页脚（components.css 的 .footer）放在年表画布下面：随视口宽，不参与 .page 的最小宽度 */
/* 底部让出左下探索工具条与右下方向键 / 缩放按钮（它们一直浮在页面上），滚到底时版权行不被盖住 */
.footer { position: relative; z-index: 1; line-height: var(--lh-body); background: var(--night-surface); border-top-color: var(--night-line); color: var(--night-text); padding-bottom: calc(var(--s-7) + 140px); }

/* ── 手机（≤ 720px）：本页新增的手机规则都在这里 ── */
@media (max-width: 720px) {
  /* 页头：左右 16px 边距（.page 的内边距是 28px，往左让 12px） */
  .tl-head { max-width: calc(100vw - 32px); margin-left: -12px; padding-bottom: var(--s-4); }
  .page.text-tab .tl-head { margin-left: 0; }
  .tl-head .title { font-size: 26px; }
  .tl-head .subtitle { font-size: var(--fs-md); }
  .tl-construction { display: flex; }
  /* 工具栏一行：标签页下拉 · 选项下拉 · 跳转（原来分两行，占掉 96px） */
  .tabs-bar { flex-wrap: nowrap; gap: var(--s-2); padding: 8px var(--s-4); }
  .mobile-tab-select, .mobile-options-select { flex: 1 1 0; min-width: 0; padding: 0 8px !important; }
  .nav-dropdown-wrap { flex: 1 1 0; width: auto; min-width: 0; }
  .nav-dropdown-btn { width: 100%; min-height: 44px; padding: 0 8px !important; }
  /* 缩放按钮：44px 圆形，放在左下探索工具条的上方右侧，不和工具条重叠 */
  .zoom-pad { bottom: calc(24px + 44px + 12px) !important; gap: var(--s-2) !important; }
  .zoom-btn { width: 44px !important; height: 44px !important; border-radius: var(--r-pill) !important; font-size: 20px !important; }
  /* 亚伦「40」这一格按年份只有 40px 宽：手机上左右各补 2px 点按区 */
  .offset-aaron-40 { min-width: 44px; margin-left: -2px; }
  /* 底部标签栏（NavBar.js，tabbar:true）在最底：浮动控件和欢迎层都让出它的高度（64 + 22 + 安全区） */
  body.wnx-has-tabbar .zoom-pad { bottom: calc(24px + 86px + 44px + 12px + env(safe-area-inset-bottom)) !important; }
  body.wnx-has-tabbar .return-btn { bottom: calc(24px + 86px + 44px + 12px + 44px + 12px + env(safe-area-inset-bottom)); right: 16px; }
  body.wnx-has-tabbar .welcome-overlay { padding-bottom: calc(96px + 86px + env(safe-area-inset-bottom)) !important; }
  .welcome-close { width: 44px !important; height: 44px !important; }
  /* 底部标签栏的高度已由 body 的内边距让出（NavBar.js），这里再让出工具条和缩放按钮两行 */
  .footer { padding-bottom: calc(var(--s-5) + 140px); }
}