.twins { overflow: hidden; }
.twins-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 98px;
  padding: 16px 112px 16px 22px;
  background: var(--clouds);
}
.twins-head h2 { font-size: clamp(22px,2.4vw,34px); }
.twins-head p { margin-top: 3px; font-weight: 800; line-height: 1.2; }
.twins-star {
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  flex: none;
  color: #4d138e;
  border-radius: 36%;
  background: #ffe345;
  box-shadow: 0 3px 8px #6941a433;
}
.twins-head > img {
  position: absolute;
  right: 9px;
  bottom: 0;
  width: clamp(93px,11vw,155px);
  height: auto;
  z-index: -1;
}
.twins-body { padding: 14px 19px 18px; }
.twins-lead { font-size: clamp(17px,1.65vw,24px); font-weight: 1000; line-height: 1.15; }
.twins-note { margin: 5px 0 10px; color: #594770; font-size: 13px; line-height: 1.35; }
.twins-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; align-items: start; }
.twin-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #e9e1f9;
  background: #fff;
  box-shadow: 0 4px 12px #54368615;
}
.twin-card.featured { animation: enter .35s both; }
.twin-card.featured:nth-child(2) { animation-delay: 70ms; }
.twin-card.featured:nth-child(3) { animation-delay: 140ms; }
.twin-portrait {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,#e7dbfc,#d0f9f6);
  aspect-ratio: 5 / 3;
}
.twin-placeholder { width: 100%; height: 100%; display: grid; place-items: center; }
.twin-placeholder > img { width: 58px; height: auto; }
.twin-portrait > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 29%; }
.twin-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px 10px; }
.twin-profession { font-size: 12px; font-weight: 800; color: #5a4770; margin: 3px 0 5px; line-height: 1.15; }
.twin-metrics { display: flex; margin-bottom: 4px; align-items: center; gap: 6px; flex-wrap: wrap; }
.twin-metrics strong { font-weight: 1000; }
.twin-delta { font-size: 12px; font-weight: 950; padding: 3px 6px; border-radius: 12px; background: #e9defc; color: #5413ac; }
.twin-delta.exact { background: #b7f2e8; color: #084d47; }
.twin-choose { width: 100%; min-height: 42px; padding: 5px; margin-top: auto; font-size: 12px; }
.twins-toggle { display: flex; margin: 12px auto 0; }
.twins-explorer { margin-top: 17px; border-top: 1px solid #e8def7; padding-top: 12px; }
.twins-explorer > h3,.twin-export h3 { margin: 0; font-size: clamp(19px,1.7vw,25px); font-weight: 1000; }
.twins-filters { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; margin-top: 8px; }
.twins-filters label { display: grid; gap: 3px; min-width: 0; font-size: 13px; font-weight: 900; }
.twins-filters input,.twins-filters select {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid #d9c8f2;
  padding: 6px 7px;
  background: #fbf8ff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
#twinLoad { display: flex; margin: 12px auto 0; }
.twin-bars { display: grid; width: 100%; gap: 2px; margin: 7px 0 3px; font-size: 10px; font-weight: 850; }
.twin-bars div { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 3px; }
.twin-bars i { height: 5px; border-radius: 8px; background: #eae5f6; display: block; overflow: hidden; }
.twin-bars i span { height: 100%; display: block; border-radius: inherit; background: #751cdb; }
.twin-bars div + div i span { background: #00b9b2; }
.twin-export { margin-top: 14px; border-radius: 21px; background: #f5efff; padding: 9px; display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1fr); align-items: center; gap: 12px; }
.twin-export-preview { background: var(--clouds); border-radius: 17px; min-height: 116px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 6px; text-align: center; }
.twin-export-preview img { max-width: 80%; width: 112px; height: auto; }
.twin-export-preview strong { font-size: 22px; font-weight: 1000; }
.twin-export-preview span { font-size: 12px; font-weight: 850; }
.twin-export-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.twin-export-actions .btn { padding-inline: 10px; min-height: 44px; font-size: 13px; }
#twinExportTitle:focus { outline: none; }
@media (max-width: 620px) {
  .twins-head { padding: 13px 74px 13px 13px; min-height: 79px; }
  .twins-head h2 { font-size: clamp(18px,5.5vw,23px); gap: 5px; }
  .twins-head p { font-size: 13px; }
  .twins-head > img { right: 1px; width: 77px; }
  .twins-body { padding: 12px; }
  #twinMatches { grid-template-columns: 1fr; }
  #twinMatches .twin-card { display: grid; grid-template-columns: 79px minmax(0,1fr); }
  #twinMatches .twin-portrait { aspect-ratio: auto; min-height: 108px; }
  #twinMatches .twin-card-body { padding: 7px 8px; }
  #twinMatches .twin-choose { width: auto; padding-inline: 10px; min-height: 44px; }
  .twins-filters,.twins-explorer .twins-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .twins-filters label:first-child { grid-column: 1/-1; }
  .twins-explorer .twin-portrait { aspect-ratio: 5 / 4; }
  .twin-export { grid-template-columns: 1fr; }
}
.twin-card .twin-name { margin: 0; color: var(--ink); font-weight: 1000; line-height: 1.12; font-size: clamp(15px,1.2vw,20px); overflow-wrap: anywhere; }
.twin-flag { margin-left: 5px; font-size: .83em; white-space: nowrap; }
.twin-full-name { margin: 2px 0 0; color: #594770; font-size: 11px; line-height: 1.15; }

.twin-credit-list { padding-inline-start: 22px; }
.twin-credit-list li { margin: 7px 0; }
.twin-credit-list small { display: block; overflow-wrap: anywhere; }