.container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }
    #header2 {
      background: linear-gradient(to right, #3b82f6, #1d4ed8);
      color: white;
      padding: 48px 16px;
      text-align: center;
    }
    #header2 h1 {
      font-size: 2.5rem;
      font-weight: 800;
      margin: 0;
    }
    #header2 p {
      font-size: 1.25rem;
      /* margin: 16px 0; */
    }
    #header2 input {
      width: 90%;
      max-width: 400px;
      padding: 12px;
      border-radius: 8px;
      border: none;
      font-size: 1rem;
      color: #1f2937;
    }
    #header2 input:focus {
      outline: none;
      box-shadow: 0 0 0 2px #93c5fd;
    }
    main {
      padding: 48px 16px;
    }
   .term-of-day {
      background: white;
      padding: 32px;
     max-width:600px;
     margin:auto;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 40px;
    }
    section h2 {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1d4ed8;
      margin-bottom: 16px;
    }
     .title-container {
      display: flex;
      align-items: center;
     gap:15px;
       margin:auto;
      width:90%;
    }
    .term-of-day img {
      width: 150px;
        
      height:100px;     
      border-radius: 50%;
      object-fit: cover;
      align-content:left;
    }
    .term-of-day h3 {
      font-size: 1.5rem;
      font-weight: 600;
      color: #1f2937;
      flex: 1; 
      text-align:left;
    }
    .term-of-day p {
      font-size: 1rem;
      color: #4b5563;
      margin: 12px 0;
      text-align:justify;
    }
    .term-of-day a {
      color: #1d4ed8;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }
    .term-of-day a:hover {
      color: #1e40af;
    }
    .grid-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
    }
    @media (min-width: 768px) {
      .grid-container {
        grid-template-columns: 1fr 2fr;
      }
    }
    #alphabet-index {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .letter-link {
      display: block;
      text-align: center;
      padding: 8px;
      border-radius: 8px;
      color: #1d4ed8;
      text-decoration: none;
      font-weight: 500;
      transition: background-color 0.2s;
    }
    .letter-link:hover {
      background-color: #e0f2fe;
    }
    .letter-link.active {
      background-color: #bfdbfe;
      font-weight: 700;
    }
/* Animation 1: Scale Pulse */
        .animscale {
         
        font-size:10px;
            animation: twinkle 2s ease-in-out infinite;
        }
       
  /* Animation Flip */
        .animflip {
            animation: flip 3s ease-in-out infinite;
             
        }
        @keyframes flip {
            0%, 100% { 
              transform: perspective(400px) rotateY(0deg); }
            50% { transform: perspective(400px) rotateY(30deg); }
       
            0%, 100%  {  
              text-shadow: 0 0 3px #FFEB3B; color: #0089cb; }
            50% {  text-shadow: 0 0 3px #FF5722;  color: #0e7202; }
            
        }
    #featured-terms {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
    #featured-terms a {
      color: #1d4ed8;
      text-decoration: none;
      font-weight: 500;
      padding: 12px;
      border-radius: 8px;
      transition: background-color 0.2s;
    }
    #featured-terms a:hover {
      background-color: #e0f2fe;
    }
    #featured-terms .error {
      color: #ef4444;
      font-weight: 500;
    }
    .categories {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }
    @media (min-width: 640px) {
      .categories {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 1024px) {
      .categories {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .categories div {
      padding: 16px;
      border-radius: 8px;
      background:#0000ff05;
      transition: background-color 0.2s;
    }
    .categories div:hover {
      background-color: #e0f2fe;
    }
    .categories a {
      color: #1d4ed8;
      text-decoration: none;
      font-weight: 500;
      display: block;
    }
    .categories a:hover {
      color: #1e40af;
    }
    .categories p {
      font-size: 0.875rem;
      color: #4b5563;
      margin-top: 8px;
      text-align:justify;
    }
    footer {
      background: #1d4ed8;
      color: white;
      text-align: center;
      padding: 24px 16px;
    }
    footer p {
      margin: 0;
      font-size: 1rem;
    }

.catimage {
    margin:5px;
      width:70%;
  border-radius:25%;
    }
	
	/* ── Other Definitions block ── */
.other-defs-wrap {
    margin-top: 2rem;
    border-top: 2px solid #d5cfc3;
    padding-top: 1.4rem;
}

.other-defs-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7a7060;
    margin-bottom: 1.1rem;
}

.other-defs-country-block {
    margin-bottom: 1.4rem;
}

.other-defs-country {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1a1a2e;
    border-left: 3px solid #c9a84c;
    padding-left: .6rem;
    margin-bottom: .75rem;
}

.other-def-item {
    margin-bottom: .9rem;
    padding: .75rem 1rem;
    background: #faf9f6;
    border: 1px solid #e8e3da;
    border-radius: 5px;
}

.other-def-text {
    font-size: .92rem;
    line-height: 1.65;
    color: #2d2a22;
    margin-bottom: .5rem;
	border-left: 1px solid #e8e3da;
	padding-left:5px;
}

.source {
		color: #607D8B;
    
		}
.other-def-source {
    display: inline-flex;
    align-items: left;
    gap: .35rem;
    font-size: .78rem;
    color: #601616;
    text-decoration: none;
    font-style: italic;
    transition: color .15s;
	margin-left:50px;
}

.other-def-source:hover {
    color: #1a1a2e;
    text-decoration: ;
}

.src-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: currentColor;
}

/* end of other defs */

/*   ANCESTRY ---------------------*/

/* ── Ancestry Block ──────────────────────────────────────────────────────── */
.anc-wrap {
    margin: 0 0 1.5rem 0;
    background: #fdfaf5;
    border: 1.5px solid #ddd9cf;
    border-radius: 10px;
    overflow: hidden;
    font-family: 'Source Serif 4', Georgia, serif;
}

.anc-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    background: linear-gradient(to right, rgba(26,26,46,.04), transparent);
    border-bottom: 1px solid #ddd9cf;
}

.anc-icon  { font-size: .95rem; }

.anc-title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b6760;
    font-family: 'JetBrains Mono', monospace;
}

.anc-count {
    font-size: .65rem;
    font-family: 'JetBrains Mono', monospace;
    padding: 2px 7px;
    border-radius: 100px;
    background: rgba(26,26,46,.07);
    color: #6b6760;
    margin-left: auto;
}

.anc-paths {
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.anc-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.anc-path-idx {
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    color: #9ca3af;
    margin-right: .5rem;
    width: 1.2rem;
    text-align: right;
    flex-shrink: 0;
}

.anc-arrow {
    padding: 0 .3rem;
    color: #9ca3af;
    font-size: .9rem;
    user-select: none;
}

/* Nodes */
.anc-node {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .65rem;
    border-radius: 100px;
    font-size: .82rem;
    border: 1.5px solid transparent;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    white-space: nowrap;
}

.anc-node.anc-d0 { background: rgba(26,26,46,.06);  border-color: rgba(26,26,46,.18);  color: #1a1a2e; }
.anc-node.anc-d1 { background: #fffbeb;             border-color: rgba(217,119,6,.3);  color: #92400e; }
.anc-node.anc-d2 { background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.22); color: #1e40af; }
.anc-node.anc-d3 { background: rgba(21,128,61,.07); border-color: rgba(21,128,61,.22); color: #14532d; }

.anc-node.anc-current {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #c9a84c;
    font-weight: 600;
    cursor: default;
}

a.anc-node:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.anc-pos {
    font-family: 'JetBrains Mono', monospace;
    font-size: .57rem;
    opacity: .65;
}

/*----------------------end of ancestry---------------*/