.pairing-lab {
  --pairing-ink: #e7eef5;
  --pairing-muted: #92a8b9;
  --pairing-line: rgba(150, 181, 204, .14);
  --pairing-mint: #83e3c4;
  position: relative;
  overflow: hidden;
  margin-top: 26px;
  border: 1px solid var(--pairing-line);
  border-radius: 20px;
  background: linear-gradient(125deg, rgba(32, 54, 66, .28), transparent 56%), #0c1621;
  color: var(--pairing-ink);
  font-family: inherit;
  isolation: isolate;
}
.pairing-lab *, .pairing-lab *::before, .pairing-lab *::after { box-sizing: border-box; }
.pairing-lab button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pairing-lab button:disabled { opacity: .35; cursor: default; }
.pairing-lab button:focus-visible, .pairing-lab a:focus-visible, .pairing-lab summary:focus-visible { outline: 2px solid var(--pairing-mint); outline-offset: 4px; }
.pairing-lab-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; padding: 28px 30px 23px; }
.pairing-lab-eyebrow { margin: 0 0 10px; color: var(--pairing-mint); font-size: 10px; font-weight: 600; letter-spacing: .17em; }
.pairing-lab h2 { margin: 0; color: var(--pairing-ink); font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -.03em; font-weight: 500; }
.pairing-lab-header > div > p:last-child { margin: 9px 0 0; color: var(--pairing-muted); font-size: 12px; line-height: 1.65; }
.pairing-lab-badge { flex-shrink: 0; margin-top: 4px; padding: 8px 10px; border: 1px solid rgba(131, 227, 196, .2); border-radius: 6px; background: rgba(131, 227, 196, .035); color: #9ac9bd; font-size: 9px; letter-spacing: .07em; }
.pairing-lab-types { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; padding: 0 30px 22px; }
.pairing-lab-types button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 13px 12px 12px; border: 1px solid rgba(145, 174, 197, .15); border-radius: 8px; background: rgba(14, 27, 39, .55); color: #9aafbf; text-align: left; transition: border-color 150ms ease, background 150ms ease; }
.pairing-lab-types button > span { color: inherit; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.pairing-lab-types button > small { color: #6e899b; font-size: 9px; line-height: 1.4; }
.pairing-lab-types button[aria-pressed=true] { border-color: rgba(131, 227, 196, .45); background: rgba(131, 227, 196, .065); color: #ccede4; }
.pairing-lab-types button[aria-pressed=true] > small { color: #87b4a9; }
.pairing-lab-types button:hover { border-color: rgba(131, 227, 196, .35); }
.pairing-lab-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 13px 30px; border-top: 1px solid var(--pairing-line); border-bottom: 1px solid var(--pairing-line); background: rgba(2, 9, 16, .2); }
.pairing-lab-toolbar > span { margin-right: 6px; color: #718b9d; font-size: 10px; }
.pairing-lab-toolbar > button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(145, 174, 197, .12); border-radius: 5px; background: transparent; color: #7f97aa; font-size: 10px; line-height: 1.2; }
.pairing-lab-toolbar > button > i { display: grid; place-items: center; width: 12px; height: 12px; border: 1px solid rgba(145, 174, 197, .22); border-radius: 3px; color: #6b8799; font-size: 9px; font-style: normal; }
.pairing-lab-toolbar > button[aria-pressed=true] { color: #b9d4cf; border-color: rgba(131, 227, 196, .25); background: rgba(131, 227, 196, .035); }
.pairing-lab-toolbar > button[aria-pressed=true] > i { color: var(--pairing-mint); border-color: rgba(131, 227, 196, .4); }
.pairing-lab-view { display: flex; margin-left: auto; border: 1px solid rgba(145, 174, 197, .18); border-radius: 5px; padding: 2px; }
.pairing-lab-view button { padding: 5px 8px; border: 0; border-radius: 3px; background: transparent; color: #7c95a7; font-size: 10px; }
.pairing-lab-view button[aria-pressed=true] { background: rgba(131, 227, 196, .09); color: #b6d9d0; }
.pairing-lab-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .85fr); }
.pairing-lab-visual { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 18px 3px 21px 11px; background: radial-gradient(ellipse at 50% 45%, rgba(80, 122, 142, .055), transparent 68%); }
.pairing-lab-svg { display: block; width: 100%; max-height: 470px; height: auto; overflow: visible; }
.pairing-lab-svg text { user-select: none; }
.pairing-lab-key { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 19px; padding: 12px 15px 0; }
.pairing-lab-key > span { display: inline-flex; align-items: center; gap: 7px; color: #758e9f; font-size: 9px; }
.pairing-lab-key i { display: inline-block; width: 17px; height: 9px; }
.pairing-lab-key-plate { border: 1px solid rgba(131, 227, 196, .6); border-radius: 3px; background: rgba(131, 227, 196, .12); }
.pairing-lab-key-base { border: 1px solid var(--base-color); border-radius: 3px; background: var(--base-color); }
.pairing-lab-key-contact { border-top: 2px dashed #edc27b; transform: translateY(4px); }
.pairing-lab-key-chain { height: 3px !important; border-radius: 2px; background: #86b7ff; }
.pairing-lab-copy { min-width: 0; padding: 27px 29px 25px 25px; border-left: 1px solid var(--pairing-line); }
.pairing-lab-category { margin: 0 0 12px; color: #7baea0; font-size: 9px; letter-spacing: .13em; }
.pairing-lab h3 { margin: 0 0 13px; color: var(--pairing-ink); font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.025em; }
.pairing-lab-overview { margin: 0; color: #a6bac9; font-size: 12px; line-height: 1.8; }
.pairing-lab-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 21px; }
.pairing-lab-facts > span { padding: 5px 8px; border: 1px solid rgba(141, 172, 194, .13); border-radius: 4px; background: rgba(141, 172, 194, .025); color: #849eb0; font-size: 9px; line-height: 1.5; }
.pairing-lab-facts strong { color: #bddcd4; font-weight: 600; }
.pairing-lab-point { padding: 15px 15px 8px; border: 1px solid rgba(131, 227, 196, .13); border-radius: 9px; background: rgba(131, 227, 196, .025); }
.pairing-lab-point-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pairing-lab-point-head > span { color: #75a798; font-size: 9px; letter-spacing: .1em; }
.pairing-lab-point-head > div { display: flex; gap: 5px; }
.pairing-lab-point-head button { display: grid; place-items: center; width: 25px; height: 23px; padding: 0; border: 1px solid rgba(141, 172, 194, .14); border-radius: 4px; background: transparent; color: #a6c7bd; font-size: 12px; }
.pairing-lab h4 { margin: 13px 0 9px; color: #c2ded6; font-size: 14px; line-height: 1.4; font-weight: 500; }
.pairing-lab-point > p { margin: 0; color: #97b0bf; font-size: 11px; line-height: 1.8; }
.pairing-lab-dots { display: flex; justify-content: center; margin-top: 10px; }
.pairing-lab-dots button { display: grid; place-items: center; width: 25px; height: 24px; padding: 0; border: 0; background: transparent; }
.pairing-lab-dots button > span { width: 5px; height: 5px; border-radius: 50%; background: #415b6c; }
.pairing-lab-dots button[aria-pressed=true] > span { background: #8accb9; box-shadow: 0 0 0 3px rgba(131, 227, 196, .07); }
.pairing-lab-charge { display: flex; gap: 9px; margin-top: 15px; padding: 11px 0 0; border-top: 1px solid rgba(237, 194, 123, .16); }
.pairing-lab-charge > span { color: #edc27b; font-size: 22px; line-height: 1; }
.pairing-lab-charge > p { margin: 0; color: #b6a886; font-size: 10px; line-height: 1.7; }
.pairing-lab-hint { color: #c3ac83; font-size: 10px; line-height: 1.6; }
.pairing-lab-structure { margin-top: 18px; padding: 5px 0; border: 0; background: transparent; color: #9cc9bb; font-size: 11px !important; text-align: left; }
.pairing-lab-structure:hover { color: #cbf5e8; }
.pairing-lab-primer { padding: 16px 30px; border-top: 1px solid var(--pairing-line); border-bottom: 1px solid var(--pairing-line); background: rgba(3, 11, 18, .2); }
.pairing-lab-primer summary { cursor: pointer; color: #adbfcc; font-size: 12px; line-height: 1.5; }
.pairing-lab-primer summary::marker { color: #6f9d91; font-size: 10px; }
.pairing-lab-primer summary > span { margin-right: 20px; }
.pairing-lab-primer summary > small { color: #6e899b; font-size: 10px; }
.pairing-lab-primer > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 30px; align-items: center; margin-top: 16px; padding: 5px 0 3px; }
.pairing-lab-primer > div > p { margin: 0; color: #8da6b8; font-size: 11px; line-height: 1.8; }
.pairing-lab-primer strong { color: #b8cec7; font-weight: 500; }
.pairing-lab-donor { display: flex; align-items: center; justify-content: center; gap: 15px; padding: 16px 10px; border: 1px solid rgba(131, 227, 196, .12); border-radius: 8px; background: rgba(131, 227, 196, .035); }
.pairing-lab-donor > span { color: #a9d9ca; font-size: 20px; }
.pairing-lab-donor > i { color: #edc27b; font-size: 21px; font-style: normal; letter-spacing: 4px; }
.pairing-lab-rna-note { margin: 0; padding: 17px 30px 0; color: #bba180; font-size: 11px; line-height: 1.7; }
.pairing-lab-limit { padding: 18px 30px; }
.pairing-lab-limit > span { color: #607f92; font-size: 9px; letter-spacing: .11em; }
.pairing-lab-limit > p { margin: 7px 0 0; color: #829dad; font-size: 11px; line-height: 1.7; }
.pairing-lab-sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 16px; padding: 15px 30px; border-top: 1px solid var(--pairing-line); background: rgba(2, 8, 15, .16); }
.pairing-lab-sources > span { color: #648094; font-size: 10px; }
.pairing-lab-sources a { color: #8fb2c1; font-size: 10px; text-decoration: none; text-underline-offset: 3px; }
.pairing-lab-sources a:hover { color: #acd9c9; text-decoration: underline; }
.pairing-lab-enter { animation: pairing-lab-reveal 210ms ease-out both; }
.pairing-lab-reduced *, .pairing-lab-reduced *::after { animation: none !important; transition: none !important; }
@keyframes pairing-lab-reveal { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 1100px) {
  .pairing-lab-grid { grid-template-columns: minmax(0, 1fr); }
  .pairing-lab-visual { padding: 20px 25px; }
  .pairing-lab-svg { max-height: 435px; }
  .pairing-lab-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 25px; align-items: start; padding: 24px 30px; border-top: 1px solid var(--pairing-line); border-left: 0; }
  .pairing-lab-category, .pairing-lab h3 { grid-column: 1; }
  .pairing-lab-overview { grid-column: 1; }
  .pairing-lab-facts { grid-column: 1; }
  .pairing-lab-point { grid-column: 2; grid-row: 1 / 5; }
  .pairing-lab-charge, .pairing-lab-hint { grid-column: 1 / -1; }
  .pairing-lab-structure { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
}
@media (max-width: 700px) {
  .pairing-lab { margin-top: 20px; border-radius: 14px; }
  .pairing-lab-header { display: block; padding: 23px 19px 19px; }
  .pairing-lab-badge { display: inline-block; margin-top: 16px; font-size: 8px; }
  .pairing-lab-types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 19px 18px; }
  .pairing-lab-types button { padding: 10px 10px 9px; }
  .pairing-lab-types button > span { font-size: 16px; }
  .pairing-lab-types button > small { font-size: 8px; }
  .pairing-lab-toolbar { padding: 13px 19px; gap: 6px; }
  .pairing-lab-toolbar > span { display: none; }
  .pairing-lab-toolbar > button { padding: 7px 6px; font-size: 9px; gap: 5px; }
  .pairing-lab-view { margin-top: 3px; }
  .pairing-lab-visual { padding: 17px 1px 16px; }
  .pairing-lab-key { gap: 8px 13px; font-size: 8px; }
  .pairing-lab-copy { display: block; padding: 23px 19px; }
  .pairing-lab h3 { font-size: 21px; }
  .pairing-lab-overview { font-size: 12px; }
  .pairing-lab-facts { margin-bottom: 18px; }
  .pairing-lab-point > p { font-size: 12px; }
  .pairing-lab-structure { margin-top: 16px; }
  .pairing-lab-primer { padding: 16px 19px; }
  .pairing-lab-primer summary > small { display: block; margin-top: 6px; }
  .pairing-lab-primer > div { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pairing-lab-donor { width: 200px; }
  .pairing-lab-limit { padding: 17px 19px; }
  .pairing-lab-rna-note { padding: 17px 19px 0; }
  .pairing-lab-sources { padding: 15px 19px; gap: 7px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pairing-lab *, .pairing-lab *::after { animation: none !important; transition: none !important; }
}