html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.lrs-page {
    --lrs-accent: #27e6a2;
    --lrs-cyan: #49d9f4;
    --lrs-copy: rgba(235, 247, 248, .72);
    --lrs-muted: rgba(225, 241, 244, .5);
    --lrs-border: rgba(78, 235, 188, .17);
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 86% 4%, rgba(23, 163, 164, .16), transparent 32rem),
        radial-gradient(circle at 6% 46%, rgba(102, 60, 183, .14), transparent 34rem),
        linear-gradient(180deg, rgba(5, 13, 29, .18), rgba(4, 13, 24, .38));
}

.lrs-page::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .19;
    background-image:
        linear-gradient(rgba(91, 239, 193, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 239, 193, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.lrs-page > * {
    position: relative;
    z-index: 1;
}

.lrs-breadcrumb {
    display: flex;
    max-width: 1400px;
    margin: 0 auto .8rem;
    padding: 1rem clamp(1rem, 4vw, 3rem) 0;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    color: var(--lrs-muted);
    font-size: .72rem;
}

.lrs-breadcrumb a {
    color: color-mix(in srgb, var(--lrs-accent) 76%, #fff);
    text-decoration: none;
}

.lrs-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lrs-breadcrumb a:focus-visible {
    outline: 2px solid var(--lrs-accent);
    outline-offset: 3px;
}

.lrs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: clamp(1.2rem, 4vw, 3.5rem);
    align-items: center;
    border-color: rgba(57, 229, 178, .24);
    background:
        linear-gradient(126deg, rgba(8, 29, 43, .94), rgba(18, 10, 47, .91)),
        radial-gradient(circle at 84% 14%, rgba(39, 230, 162, .18), transparent 23rem);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .24);
}

.lrs-hero h1 span {
    color: var(--lrs-accent);
}

.lrs-latin {
    margin: .45rem 0 .75rem;
    color: rgba(230, 248, 245, .63);
    font: 600 clamp(.9rem, 1.3vw, 1.08rem)/1.4 Georgia, serif;
}

.lrs-hero .portal-lede {
    max-width: 930px;
}

.lrs-hero-mark {
    display: grid;
    min-height: 215px;
    padding: 1.2rem;
    place-content: center;
    border: 1px solid rgba(65, 235, 184, .22);
    border-radius: 20px;
    background:
        radial-gradient(circle, rgba(39, 230, 162, .11), transparent 67%),
        rgba(4, 18, 31, .72);
    text-align: center;
}

.lrs-hero-mark strong {
    color: #fff;
    font: 850 1.65rem/1 'Orbitron', sans-serif;
}

.lrs-hero-mark span {
    margin-top: .28rem;
    color: var(--lrs-muted);
    font-size: .62rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.lrs-hero-mark i {
    width: 80px;
    height: 1px;
    margin: .78rem auto;
    background: linear-gradient(90deg, transparent, var(--lrs-accent), transparent);
}

.lrs-page .portal-button.is-disabled {
    border-color: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .025);
    cursor: not-allowed;
}

.lrs-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lrs-metrics .portal-metric {
    border-color: rgba(82, 235, 189, .15);
    background: linear-gradient(145deg, rgba(8, 27, 38, .86), rgba(11, 7, 31, .84));
}

.lrs-metrics .portal-metric strong {
    color: var(--lrs-accent);
}

.lrs-boundary {
    max-width: 1400px;
    margin: 1rem auto 0;
    border-color: rgba(39, 230, 162, .26);
    background: linear-gradient(110deg, rgba(5, 30, 36, .9), rgba(8, 15, 32, .84));
}

.lrs-tissue-section,
.lrs-method-section {
    border-color: rgba(92, 235, 193, .13);
    background: linear-gradient(160deg, rgba(6, 15, 31, .76), rgba(13, 8, 35, .73));
    box-shadow: 0 22px 72px rgba(0, 0, 0, .15);
}

.lrs-tissue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.lrs-tissue-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid var(--lrs-border);
    border-radius: 18px;
    flex-direction: column;
    background:
        radial-gradient(circle at 100% 0, rgba(39, 230, 162, .07), transparent 19rem),
        linear-gradient(155deg, rgba(9, 27, 42, .88), rgba(5, 10, 26, .92));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.lrs-tissue-card-head {
    display: grid;
    grid-template-columns: auto 86px minmax(0, 1fr);
    gap: .72rem;
    align-items: center;
}

.lrs-tissue-index {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    color: var(--lrs-accent);
    background: rgba(255, 255, 255, .025);
    font: 790 .56rem/1 'Orbitron', sans-serif;
}

.lrs-tissue-icon {
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025) 62%, transparent);
}

.lrs-tissue-icon img {
    width: 74%;
    height: 74%;
    object-fit: contain;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .22));
}

.lrs-tissue-card-head > div:last-child > span {
    color: var(--lrs-muted);
    font-size: .52rem;
    font-weight: 770;
    letter-spacing: .07em;
}

.lrs-tissue-card h3 {
    margin: .3rem 0 0;
    color: #fff;
    font: 820 clamp(.86rem, 1.2vw, 1.04rem)/1.25 'Orbitron', sans-serif;
}

.lrs-tissue-card-head p {
    margin: .35rem 0 0;
    color: var(--lrs-copy);
    font-size: .62rem;
}

.lrs-tissue-card-head p strong {
    color: var(--lrs-accent);
    font-family: 'Orbitron', sans-serif;
}

.lrs-sample-list-wrap {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.lrs-sample-list-wrap h4 {
    margin: 0 0 .5rem;
    color: rgba(255, 255, 255, .58);
    font-size: .55rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.lrs-sample-list {
    display: grid;
    max-height: 260px;
    margin: 0;
    padding: 0 .2rem 0 0;
    overflow-y: auto;
    gap: .4rem;
    list-style: none;
    scrollbar-color: rgba(39, 230, 162, .4) rgba(255, 255, 255, .03);
}

.lrs-sample-list li {
    display: grid;
    min-width: 0;
    padding: .5rem .58rem;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 9px;
    background: rgba(255, 255, 255, .018);
}

.lrs-sample-list li span {
    color: rgba(248, 253, 253, .78);
    font-size: .57rem;
    font-weight: 690;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.lrs-sample-list li small {
    margin-top: .16rem;
    color: rgba(226, 242, 244, .42);
    font-size: .48rem;
    line-height: 1.35;
}

.lrs-tissue-link {
    display: flex;
    min-height: 44px;
    margin-top: auto;
    padding: .62rem .7rem;
    border: 1px solid rgba(39, 230, 162, .38);
    border-radius: 10px;
    align-items: center;
    justify-content: space-between;
    color: #061a13;
    background: linear-gradient(110deg, var(--lrs-accent), #8df7ca);
    font-size: .6rem;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(39, 230, 162, .09);
}

.lrs-sample-list-wrap + .lrs-tissue-link {
    margin-top: .85rem;
}

.lrs-tissue-link:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.lrs-tissue-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.lrs-error-hero {
    min-height: 420px;
    margin-top: 1rem;
    border-color: rgba(255, 184, 91, .2);
    background: linear-gradient(145deg, rgba(33, 21, 36, .92), rgba(6, 15, 29, .9));
}

@media (max-width: 1050px) {
    .lrs-tissue-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .lrs-breadcrumb {
        padding-inline: .85rem;
    }

    .lrs-hero {
        grid-template-columns: 1fr;
    }

    .lrs-hero-mark {
        grid-template-columns: auto auto 1px auto auto;
        min-height: 0;
        gap: .5rem;
        align-items: center;
    }

    .lrs-hero-mark i {
        width: 1px;
        height: 34px;
        margin: 0 .4rem;
    }

    .lrs-hero-mark span {
        margin: 0;
    }

    .lrs-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .lrs-tissue-grid {
        grid-template-columns: 1fr;
    }

    .lrs-tissue-card {
        border-radius: 15px;
    }
}

@media (max-width: 390px) {
    .lrs-tissue-card-head {
        grid-template-columns: auto 70px minmax(0, 1fr);
        gap: .55rem;
    }

    .lrs-tissue-icon {
        width: 70px;
        height: 70px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lrs-page *,
    .lrs-page *::before,
    .lrs-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}