:root { --tx: #6b3fa0; --tx-soft: #f1eaf9; --tx-ink: #2b1a45; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tx-subnav { background: var(--tx-soft); border-bottom: 1px solid #ddd0ee; }
.tx-subnav-inner { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; padding-block: .6rem; }
.tx-subnav nav { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.tx-subnav a { color: var(--tx-ink); font-weight: 600; text-decoration: none; padding: .25rem .5rem; border-radius: 999px; }
.tx-subnav a:hover, .tx-subnav a:focus-visible { background: #fff; outline: 2px solid var(--tx); }
.tx-lang { display: flex; gap: .5rem; align-items: center; }
.tx-lang select { padding: .3rem .5rem; border-radius: .5rem; border: 1px solid #bba5d8; }
.tx-hero { background: linear-gradient(135deg, #f1eaf9, #fff6e0); text-align: center; padding: 2.5rem 0; }
.tx-hero h1 { color: var(--tx-ink); margin: .25rem 0; }
.tx-bird { font-size: 3.5rem; margin: 0; line-height: 1; }
.tx-lead { max-width: 42rem; margin: .5rem auto 1rem; }
.tx-page { padding-block: 1.5rem 3rem; }
.tx-page .tx-lead { margin-left: 0; }
.tx-search { position: relative; max-width: 40rem; margin: 1rem auto; }
.tx-search-box { display: flex; gap: .5rem; }
.tx-search input[type=search] { flex: 1; font-size: 1.15rem; padding: .8rem 1rem; border: 2px solid var(--tx); border-radius: 999px; min-width: 0; }
.tx-hint { font-size: .9rem; opacity: .75; }
.tx-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 3.6rem; margin: 0; padding: .3rem; list-style: none; background: #fff; border: 1px solid #ddd0ee; border-radius: 1rem; box-shadow: 0 10px 30px rgba(43,26,69,.18); text-align: left; }
.tx-suggest li a { display: block; padding: .55rem .8rem; border-radius: .6rem; color: inherit; text-decoration: none; }
.tx-suggest li a[aria-selected=true], .tx-suggest li a:hover { background: var(--tx-soft); }
.tx-suggest small { display: block; opacity: .7; }
.tx-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; margin-top: 1rem; }
.tx-chip { display: inline-block; background: #fff; border: 1px solid #ccb9e6; color: var(--tx-ink); padding: .3rem .8rem; border-radius: 999px; text-decoration: none; font-size: .95rem; }
.tx-chip:hover { background: var(--tx); color: #fff; }
.tx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem; text-align: center; padding-block: 1.5rem; }
.tx-stats strong { display: block; font-size: 2rem; color: var(--tx); }
.tx-tiles, .tx-tiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; padding-block: 1rem; }
.tx-tiles-grid { padding-inline: 0; }
.tx-tile { display: flex; flex-direction: column; gap: .25rem; padding: 1.2rem; border-radius: 1.2rem; background: var(--tx-soft); color: var(--tx-ink); text-decoration: none; transition: transform .15s; }
.tx-tile span { font-size: 2.2rem; }
.tx-tile:hover, .tx-tile:focus-visible { transform: translateY(-3px) rotate(-.5deg); outline: 2px solid var(--tx); }
.tx-tile--dice { background: #ffe9c7; } .tx-tile--quiz { background: #d9f2e6; } .tx-tile--browse { background: #dbe9ff; }
.tx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.tx-card { display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border: 1px solid #ddd0ee; border-radius: 1rem; background: #fff; color: inherit; text-decoration: none; }
.tx-card:hover, .tx-card:focus-visible { border-color: var(--tx); box-shadow: 0 4px 14px rgba(107,63,160,.18); }
.tx-card-emoji { font-size: 2rem; }
.tx-card-photo { width: 64px; height: 64px; object-fit: cover; object-position: 50% 25%; border-radius: .7rem; flex: none; background: var(--tx-soft); }
.tx-figure { margin: 0 auto 1rem; max-width: 640px; }
.tx-figure img, .tx-quiz-photo { display: block; width: auto; max-width: 100%; height: auto; max-height: 28rem; margin-inline: auto; object-fit: contain; border-radius: 1rem; background: var(--tx-soft); }
.tx-quiz-photo { margin: 0 auto 1rem; max-width: 640px; }
.tx-figure figcaption { font-size: .8rem; opacity: .75; margin-top: .4rem; }
.tx-card-body { display: flex; flex-direction: column; }
.tx-card-body small { opacity: .7; }
.tx-crumbs { font-size: .95rem; margin-bottom: 1rem; }
.tx-species { text-align: center; padding: 1rem 0; }
.tx-species h1 { margin: .25rem 0; color: var(--tx-ink); }
.tx-sci { font-size: 1.2rem; margin: 0; }
.tx-badges, .tx-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .8rem; }
.tx-section { margin-top: 2rem; }
.tx-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; }
.tx-name { background: var(--tx-soft); border-radius: .9rem; padding: .7rem .9rem; }
.tx-name small { display: block; opacity: .7; }
.tx-more summary { cursor: pointer; margin: 1rem 0 .5rem; font-weight: 600; color: var(--tx); }
.tx-langlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem 1rem; }
.tx-langlist div { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dotted #ccc; }
.tx-langlist dt { opacity: .7; } .tx-langlist dd { margin: 0; font-weight: 600; }
.tx-fact { background: #fff6e0; border-radius: 1rem; padding: 1rem 1.3rem; }
.tx-empty { text-align: center; padding: 2rem 0; }
.tx-source { font-size: .85rem; opacity: .7; margin-top: 2rem; }
.tx-quiz-bar { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1rem 0; }
.tx-quiz-card, .tx-quiz-end { background: var(--tx-soft); border-radius: 1.2rem; padding: 1.5rem; text-align: center; }
.tx-quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem; margin: 1rem 0; }
.tx-quiz-options button { font: inherit; padding: .9rem; border-radius: .9rem; border: 2px solid #bba5d8; background: #fff; cursor: pointer; }
.tx-quiz-options button:hover:not(:disabled), .tx-quiz-options button:focus-visible { border-color: var(--tx); }
.tx-quiz-options button.is-right { background: #c9f0d6; border-color: #2e9d57; }
.tx-quiz-options button.is-wrong { background: #ffd6d6; border-color: #c0392b; }
.tx-quiz-feedback { min-height: 1.6rem; font-weight: 600; }
.tx-confetti { position: fixed; top: -2rem; z-index: 50; pointer-events: none; font-size: 1.6rem; animation: tx-fall 1.8s ease-in forwards; }
@keyframes tx-fall { to { transform: translateY(110vh) rotate(360deg); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .tx-tile, .tx-tile:hover { transition: none; transform: none; }
  .tx-confetti { display: none; }
}