.science-page {
    --explainer-primary: #1b4f8b;
    --explainer-secondary: #7bc6f0;
    --explainer-accent: #ffc965;
    --explainer-hero-top: #173e74;
    --explainer-hero-bottom: #214f8f;
    --explainer-visual-top: #86c9f0;
    --explainer-visual-mid: #f4ca72;
    --explainer-visual-bottom: #d97a4a;
    --stage-top: rgba(133, 203, 244, 1);
    --stage-mid: rgba(76, 145, 197, 1);
    --stage-bottom: rgba(25, 65, 109, 1);
    --stage-glow: rgba(255, 229, 163, 0.5);
    --stage-pattern: rgba(255, 255, 255, 0.24);
    --stage-signal: rgba(255, 255, 255, 0.2);
    --stage-foreground: rgba(12, 33, 54, 0.72);
    --stage-focus-x: 74;
    --stage-focus-y: 24;
    --stage-pattern-angle: 110deg;
    --stage-pattern-opacity: 0.48;
    --stage-signal-opacity: 0.34;
    --stage-foreground-opacity: 0.64;
    --stage-focus-layer:
        radial-gradient(circle at calc(var(--stage-focus-x) * 1%) calc(var(--stage-focus-y) * 1%), var(--stage-glow), transparent 20%),
        radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.2), transparent 16%);
    --stage-mid-layer:
        linear-gradient(var(--stage-pattern-angle), transparent 0 22%, var(--stage-pattern) 23% 27%, transparent 28% 100%),
        linear-gradient(calc(var(--stage-pattern-angle) - 18deg), transparent 0 46%, var(--stage-pattern) 47% 50%, transparent 51% 100%);
    --stage-signal-layer:
        radial-gradient(circle at 18% 62%, var(--stage-signal) 0 0.4rem, transparent 0.5rem),
        radial-gradient(circle at 42% 42%, var(--stage-signal) 0 0.32rem, transparent 0.42rem),
        radial-gradient(circle at 66% 74%, var(--stage-signal) 0 0.34rem, transparent 0.44rem),
        radial-gradient(circle at 82% 38%, var(--stage-signal) 0 0.36rem, transparent 0.46rem);
    --stage-foreground-layer: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--stage-foreground));
}

.science-page .section-heading {
    margin-bottom: 1.25rem;
}

.science-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.9fr);
    gap: 1.5rem;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(135deg, var(--explainer-hero-top), var(--explainer-hero-bottom)),
        linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent);
}

.science-hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -22% auto;
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--explainer-accent) 24%, transparent), transparent 70%);
    pointer-events: none;
}

.science-hero__content {
    position: relative;
    z-index: 1;
}

.science-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.science-hero__highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1.5rem;
}

.science-chip-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.1rem;
    padding: 1rem;
    backdrop-filter: blur(6px);
    color: rgba(248, 251, 255, 0.94);
}

.science-chip-card__label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--explainer-accent) 84%, white);
}

.science-hero__visual {
    display: grid;
    gap: 1rem;
    align-content: center;
}

.science-visual {
    position: relative;
    min-height: 24rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
    background:
        radial-gradient(circle at 24% 78%, rgba(255, 255, 255, 0.1), transparent 24%),
        linear-gradient(180deg, var(--explainer-visual-top) 0%, var(--explainer-visual-mid) 52%, var(--explainer-visual-bottom) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.science-visual__glow,
.science-visual__ring,
.science-visual__core,
.science-visual__band {
    position: absolute;
    inset: 0;
}

.science-visual__glow {
    background: radial-gradient(circle at 68% 26%, color-mix(in srgb, var(--explainer-accent) 42%, white) 0%, transparent 24%);
}

.science-visual__ring {
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.science-visual__ring--one {
    inset: 14% 15% auto auto;
    width: 13rem;
    height: 13rem;
    animation: science-spin 26s linear infinite;
}

.science-visual__ring--two {
    inset: auto auto 11% 12%;
    width: 10rem;
    height: 10rem;
    border-style: dashed;
    animation: science-spin-reverse 20s linear infinite;
}

.science-visual__core {
    inset: 28% 22% 26% 18%;
    border-radius: 2.2rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        rgba(12, 28, 43, 0.22);
    backdrop-filter: blur(4px);
}

.science-visual__band {
    opacity: 0.72;
}

.science-visual__band--one {
    background: linear-gradient(112deg, transparent 0 28%, rgba(255, 255, 255, 0.26) 29% 33%, transparent 34% 100%);
}

.science-visual__band--two {
    background: linear-gradient(86deg, transparent 0 47%, rgba(255, 255, 255, 0.16) 48% 51%, transparent 52% 100%);
}

.science-visual__band--three {
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0 22%, transparent 23% 100%);
    mix-blend-mode: screen;
}

.science-hero__caption {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(248, 251, 255, 0.92);
}

.science-lab__grid {
    display: grid;
    grid-template-columns: minmax(20rem, 22rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.science-lab__controls {
    display: grid;
    gap: 1rem;
}

.science-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.science-control {
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(18, 52, 88, 0.04);
    border: 1px solid rgba(18, 52, 88, 0.08);
}

.science-control__header,
.science-control__ends,
.science-summary__chips,
.science-bars__meta,
.science-driver__meta,
.science-scenes__facts {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
}

.science-control__header output {
    font-weight: 700;
    color: var(--explainer-primary);
}

.science-control__ends {
    color: var(--site-muted);
    font-size: 0.86rem;
}

.science-summary {
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--explainer-primary) 7%, white), color-mix(in srgb, var(--explainer-accent) 9%, white));
    border: 1px solid rgba(18, 52, 88, 0.1);
}

.science-summary__lead {
    font-size: 1rem;
}

.science-summary__chips {
    flex-wrap: wrap;
}

.science-summary__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
}

.science-lab__display {
    display: grid;
    gap: 1rem;
}

.science-stage {
    position: relative;
    min-height: 23rem;
    border-radius: 1.6rem;
    border: 1px solid rgba(18, 52, 88, 0.1);
    overflow: hidden;
    background: #dcecff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.science-stage__backdrop,
.science-stage__focus,
.science-stage__mid,
.science-stage__signal,
.science-stage__foreground {
    position: absolute;
    inset: 0;
}

.science-stage__backdrop {
    background: linear-gradient(180deg, var(--stage-top) 0%, var(--stage-mid) 55%, var(--stage-bottom) 100%);
    transition: background 220ms ease;
}

.science-stage__focus {
    background: var(--stage-focus-layer);
    animation: science-breathe 10s ease-in-out infinite;
}

.science-stage__mid {
    opacity: var(--stage-pattern-opacity);
    background: var(--stage-mid-layer);
    mix-blend-mode: screen;
}

.science-stage__signal {
    opacity: var(--stage-signal-opacity);
    background: var(--stage-signal-layer);
    animation: science-drift 18s linear infinite;
}

.science-stage__foreground {
    inset: auto 0 0;
    height: 24%;
    opacity: var(--stage-foreground-opacity);
    background: var(--stage-foreground-layer);
}

.science-stage__badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--explainer-primary);
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(18, 52, 88, 0.08);
}

.science-stage__badge--one {
    top: 1.15rem;
    left: 1rem;
}

.science-stage__badge--two {
    right: 1rem;
    bottom: 1rem;
}

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

.science-bar-card,
.science-driver-card,
.science-step-card,
.science-info-card,
.science-scenes__panel,
.science-related__card {
    border: 1px solid rgba(18, 52, 88, 0.1);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 12px 24px rgba(18, 52, 88, 0.05);
}

.science-bar-card,
.science-driver-card {
    padding: 1rem;
}

.science-card__eyebrow,
.science-scenes__kicker,
.science-related__label {
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--site-accent);
}

.science-bars,
.science-drivers {
    display: grid;
    gap: 0.85rem;
}

.science-bars__meta span,
.science-driver__meta span {
    color: var(--site-muted);
    font-size: 0.92rem;
}

.science-bars__track,
.science-driver__meter {
    height: 0.72rem;
    border-radius: 999px;
    background: rgba(18, 52, 88, 0.08);
    overflow: hidden;
}

.science-bars__fill,
.science-driver__fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 220ms ease;
}

.science-bars__fill {
    background: linear-gradient(90deg, var(--explainer-secondary), var(--explainer-primary));
}

.science-driver__fill {
    background: linear-gradient(90deg, var(--explainer-accent), var(--explainer-secondary));
}

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

.science-step-card {
    position: relative;
    padding: 1.2rem 1.2rem 1.2rem 4rem;
}

.science-step-card__number {
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--explainer-primary), color-mix(in srgb, var(--explainer-secondary) 70%, var(--explainer-primary)));
    color: #fff;
    font-weight: 700;
}

.science-info-card {
    padding: 1.2rem;
}

.science-scenes__grid {
    display: grid;
    gap: 1rem;
}

.science-scenes__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.science-scenes__panel {
    display: grid;
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.science-scenes__preview {
    min-height: 18rem;
    border-radius: 1.2rem;
    overflow: hidden;
    background: linear-gradient(180deg, var(--explainer-visual-top) 0%, var(--explainer-visual-mid) 50%, var(--explainer-visual-bottom) 100%);
}

.science-scenes__preview-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--explainer-visual-top) 0%, var(--explainer-visual-mid) 50%, var(--explainer-visual-bottom) 100%);
    transition: background 220ms ease;
}

.science-scenes__copy {
    display: grid;
    align-content: start;
}

.science-scenes__facts {
    flex-wrap: wrap;
    margin-top: 1rem;
}

.science-scenes__fact {
    flex: 1 1 11rem;
    padding: 0.8rem 0.9rem;
    border-radius: 1rem;
    background: rgba(18, 52, 88, 0.05);
    display: grid;
    gap: 0.25rem;
}

.science-scenes__fact span {
    color: var(--site-muted);
    font-size: 0.88rem;
}

.science-faq__accordion .accordion-item {
    border-color: rgba(18, 52, 88, 0.08);
    border-radius: 1rem;
    overflow: hidden;
}

.science-faq__accordion .accordion-item + .accordion-item {
    margin-top: 0.75rem;
}

.science-faq__accordion .accordion-button {
    font-weight: 600;
}

.science-faq__accordion .accordion-button:not(.collapsed) {
    background: rgba(18, 52, 88, 0.06);
    color: var(--explainer-primary);
}

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

.science-related__card {
    padding: 1rem;
    color: var(--site-text);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--explainer-primary) 6%, white), color-mix(in srgb, var(--explainer-secondary) 10%, white)),
        rgba(255, 255, 255, 0.74);
}

.science-related__card strong {
    display: block;
    line-height: 1.4;
}

@keyframes science-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes science-spin-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes science-breathe {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

@keyframes science-drift {
    from {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(1.2%, -1.4%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 991.98px) {
    .science-hero,
    .science-lab__grid,
    .science-scenes__panel {
        grid-template-columns: 1fr;
    }

    .science-hero__highlights,
    .science-readout-grid,
    .science-process__grid,
    .science-insights__grid,
    .science-related__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .science-visual,
    .science-stage,
    .science-scenes__preview {
        min-height: 20rem;
    }

    .science-stage__badge {
        max-width: calc(100% - 2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .science-visual__ring--one,
    .science-visual__ring--two,
    .science-stage__focus,
    .science-stage__signal {
        animation: none;
    }
}