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

.lra-page {
    --lra-panel: rgba(5, 13, 29, .9);
    --lra-panel-soft: rgba(10, 25, 43, .78);
    --lra-border: rgba(108, 246, 194, .18);
    --lra-copy: rgba(235, 247, 248, .72);
    --lra-muted: rgba(222, 239, 243, .5);
    --lra-accent: #27e6a2;
    --lra-cyan: #46d5f1;
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 88% 8%, rgba(23, 162, 164, .16), transparent 31rem),
        radial-gradient(circle at 8% 48%, rgba(99, 63, 181, .14), transparent 34rem),
        linear-gradient(180deg, rgba(6, 10, 25, .22), rgba(3, 11, 22, .38));
}

.lra-page::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .22;
    background-image:
        linear-gradient(rgba(104, 241, 200, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(104, 241, 200, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

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

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

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

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

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

.lra-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(225px, .28fr);
    gap: clamp(1.2rem, 4vw, 3.8rem);
    align-items: end;
    border-color: rgba(64, 230, 181, .24);
    background:
        linear-gradient(126deg, rgba(9, 29, 43, .94), rgba(18, 11, 47, .9)),
        radial-gradient(circle at 84% 16%, rgba(39, 230, 162, .18), transparent 24rem);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .25);
}

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

.lra-entity-subtitle {
    margin: .45rem 0 .75rem;
    color: rgba(230, 248, 245, .64);
    font-family: Georgia, serif;
    font-size: clamp(.9rem, 1.3vw, 1.08rem);
}

.lra-hero .portal-lede {
    max-width: 950px;
}

.lra-hero-dataset {
    display: flex;
    min-height: 190px;
    padding: 1.25rem;
    border: 1px solid rgba(75, 235, 187, .22);
    border-radius: 18px;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(155deg, rgba(8, 34, 42, .86), rgba(7, 12, 31, .82));
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.lra-hero-dataset > span {
    color: var(--lra-muted);
    font-size: .62rem;
    font-weight: 780;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.lra-hero-dataset > strong {
    margin-top: .3rem;
    color: #fff;
    font: 850 clamp(1.3rem, 2.2vw, 1.9rem)/1.2 'Orbitron', sans-serif;
}

.lra-hero-dataset > small {
    margin-top: .34rem;
    color: var(--lra-copy);
    font-size: .68rem;
}

.lra-dataset-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .9rem;
}

.lra-dataset-switch a {
    padding: .48rem .38rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .03);
    font-size: .58rem;
    font-weight: 780;
    text-align: center;
    text-decoration: none;
}

.lra-dataset-switch a:hover,
.lra-dataset-switch a.is-active {
    border-color: rgba(39, 230, 162, .48);
    color: #071d19;
    background: var(--lra-accent);
}

.lra-dataset-switch a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

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

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

.lra-metrics .portal-metric {
    border-color: rgba(85, 236, 191, .16);
    background: linear-gradient(145deg, rgba(8, 27, 38, .86), rgba(11, 7, 31, .84));
}

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

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

.lra-warning {
    border-color: rgba(255, 190, 79, .38);
    background: linear-gradient(110deg, rgba(56, 32, 9, .72), rgba(22, 15, 29, .86));
}

.lra-warning strong {
    color: #ffd27f;
}

.lra-analysis-section,
.lra-method-section {
    border-color: rgba(97, 236, 195, .13);
    background:
        linear-gradient(160deg, rgba(6, 15, 31, .76), rgba(13, 8, 35, .73));
    box-shadow: 0 22px 72px rgba(0, 0, 0, .16);
}

.lra-section-head {
    max-width: 920px;
}

.lra-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.lra-panel {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--lra-border);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(41, 224, 169, .07), transparent 19rem),
        linear-gradient(155deg, var(--lra-panel-soft), var(--lra-panel));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.lra-panel-head {
    display: flex;
    gap: .72rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.lra-panel-head > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(39, 230, 162, .25);
    border-radius: 9px;
    color: var(--lra-accent);
    background: rgba(39, 230, 162, .055);
    font: 800 .62rem/1 'Orbitron', sans-serif;
}

.lra-panel-head h3 {
    margin: 0;
    color: #fff;
    font: 820 clamp(.88rem, 1.2vw, 1.06rem)/1.32 'Orbitron', sans-serif;
}

.lra-panel-head p {
    margin: .24rem 0 0;
    color: var(--lra-muted);
    font-size: .66rem;
    line-height: 1.5;
}

.lra-composition {
    display: grid;
    gap: .72rem;
}

.lra-composition-row > div {
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    align-items: baseline;
}

.lra-composition-row > div span {
    color: rgba(245, 252, 252, .82);
    font-size: .68rem;
    font-weight: 720;
}

.lra-composition-row > div strong {
    color: var(--lra-muted);
    font-size: .6rem;
}

.lra-composition-track,
.lra-gene-track {
    display: block;
    height: 8px;
    margin-top: .34rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
}

.lra-composition-track > span,
.lra-gene-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lra-accent), var(--lra-cyan));
    box-shadow: 0 0 14px rgba(39, 230, 162, .2);
}

.lra-library-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: rgba(39, 230, 162, .45) rgba(255, 255, 255, .04);
}

.lra-library-scroll:focus-visible {
    outline: 2px solid var(--lra-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

.lra-library-chart {
    display: flex;
    min-width: max(650px, 100%);
    height: 252px;
    gap: 5px;
    align-items: stretch;
    padding: .35rem .25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.lra-library-column {
    display: grid;
    min-width: 38px;
    height: 100%;
    flex: 1 1 42px;
    grid-template-rows: 1.25rem 150px 1fr;
    justify-items: center;
    color: var(--lra-muted);
}

.lra-library-value {
    font-size: .48rem;
    font-weight: 720;
}

.lra-library-bar {
    width: min(18px, 60%);
    align-self: end;
    min-height: 7px;
    border-radius: 5px 5px 1px 1px;
    background: linear-gradient(180deg, var(--lra-cyan), var(--lra-accent));
    box-shadow: 0 0 12px rgba(39, 230, 162, .12);
}

.lra-library-name {
    display: block;
    max-width: 66px;
    margin-top: .32rem;
    overflow: hidden;
    color: rgba(232, 246, 247, .46);
    font-size: .46rem;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lra-panel-note {
    margin: .75rem 0 0;
    color: var(--lra-muted);
    font-size: .58rem;
    line-height: 1.55;
}

.lra-pattern-grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.lra-pca-plot {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(40, 207, 177, .06), transparent 64%),
        rgba(2, 9, 21, .65);
    background-size: 20% 20%, 20% 20%, auto, auto;
}

.lra-pca-axis {
    position: absolute;
    background: rgba(255, 255, 255, .17);
}

.lra-pca-axis.is-x {
    right: 6%;
    bottom: 50%;
    left: 6%;
    height: 1px;
}

.lra-pca-axis.is-y {
    top: 6%;
    bottom: 6%;
    left: 50%;
    width: 1px;
}

.lra-pca-dot {
    position: absolute;
    z-index: 2;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .22), 0 0 12px currentColor;
}

.lra-pca-dot:hover,
.lra-pca-dot:focus-visible {
    z-index: 3;
    width: 18px;
    height: 18px;
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.lra-pca-x-label,
.lra-pca-y-label {
    position: absolute;
    z-index: 1;
    color: rgba(241, 251, 251, .55);
    background: rgba(3, 10, 22, .72);
    font-size: .52rem;
    font-weight: 720;
}

.lra-pca-x-label {
    right: .45rem;
    bottom: .38rem;
}

.lra-pca-y-label {
    top: .45rem;
    left: .5rem;
}

.lra-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    margin-top: .75rem;
}

.lra-legend span {
    display: inline-flex;
    gap: .34rem;
    align-items: center;
    color: rgba(242, 251, 251, .68);
    font-size: .56rem;
}

.lra-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tone-0 { color: #32e6a5; background-color: #32e6a5 !important; }
.tone-1 { color: #48cdf4; background-color: #48cdf4 !important; }
.tone-2 { color: #f0b95f; background-color: #f0b95f !important; }
.tone-3 { color: #e776ba; background-color: #e776ba !important; }
.tone-4 { color: #ab8bf4; background-color: #ab8bf4 !important; }
.tone-5 { color: #83e670; background-color: #83e670 !important; }
.tone-6 { color: #ff826f; background-color: #ff826f !important; }
.tone-7 { color: #72e1d6; background-color: #72e1d6 !important; }

.lra-chart-unavailable {
    display: grid;
    min-height: 310px;
    padding: 1.3rem;
    place-content: center;
    border: 1px dashed rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: var(--lra-muted);
    background: rgba(255, 255, 255, .018);
    text-align: center;
}

.lra-chart-unavailable strong {
    color: rgba(255, 255, 255, .78);
    font: 760 .82rem/1.4 'Orbitron', sans-serif;
}

.lra-chart-unavailable p {
    max-width: 420px;
    margin: .55rem auto 0;
    font-size: .66rem;
    line-height: 1.6;
}

.lra-gene-bars {
    display: grid;
    gap: .62rem;
}

.lra-gene-label {
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    align-items: baseline;
}

.lra-gene-label strong {
    max-width: 66%;
    overflow: hidden;
    color: rgba(251, 255, 255, .88);
    font-size: .63rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lra-gene-label span {
    color: var(--lra-accent);
    font-size: .52rem;
    font-weight: 730;
}

.lra-gene-row small {
    display: block;
    margin-top: .22rem;
    color: rgba(233, 247, 248, .4);
    font-size: .48rem;
}

.lra-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--lra-border);
    border-radius: 15px;
    background: rgba(3, 10, 24, .72);
    scrollbar-color: rgba(39, 230, 162, .45) rgba(255, 255, 255, .04);
}

.lra-table-wrap:focus-visible {
    outline: 2px solid var(--lra-accent);
    outline-offset: 4px;
}

.lra-sample-table {
    width: 100%;
    min-width: 830px;
    border-collapse: collapse;
    color: var(--lra-copy);
    font-size: .63rem;
}

.lra-sample-table th,
.lra-sample-table td {
    padding: .72rem .78rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    text-align: left;
}

.lra-sample-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--lra-accent);
    background: #071523;
    font-size: .54rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.lra-sample-table tbody th {
    color: rgba(255, 255, 255, .82);
    font-weight: 720;
}

.lra-sample-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .018);
}

.lra-sample-table tbody tr:hover {
    background: rgba(39, 230, 162, .04);
}

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

.lra-method-grid article {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(3, 12, 27, .58);
}

.lra-method-grid article > span {
    color: var(--lra-accent);
    font-size: .53rem;
    font-weight: 780;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lra-method-grid h3 {
    margin: .42rem 0 0;
    color: #fff;
    font: 790 .76rem/1.35 'Orbitron', sans-serif;
}

.lra-method-grid p {
    margin: .42rem 0 0;
    color: var(--lra-copy);
    font-size: .62rem;
    line-height: 1.58;
}

.lra-method-grid code {
    overflow-wrap: anywhere;
    color: rgba(114, 225, 214, .82);
    font-size: .52rem;
}

.lra-footer-actions {
    margin-top: 1rem;
}

.lra-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) {
    .lra-hero {
        grid-template-columns: minmax(0, 1fr) minmax(205px, .34fr);
    }

    .lra-panel-grid,
    .lra-pattern-grid {
        grid-template-columns: 1fr;
    }

    .lra-pca-plot {
        min-height: 430px;
    }
}

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

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

    .lra-hero-dataset {
        min-height: 0;
    }

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

    .lra-method-grid {
        grid-template-columns: 1fr;
    }

    .lra-pca-plot {
        min-height: 360px;
    }
}

@media (max-width: 470px) {
    .lra-breadcrumb {
        font-size: .62rem;
    }

    .lra-panel {
        padding: .85rem;
        border-radius: 14px;
    }

    .lra-pca-plot {
        min-height: 310px;
    }

    .lra-library-chart {
        min-width: 620px;
    }
}

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