/* =========================================================
   BIOLOGY BRAIN
   WATER AS A MEDIUM
========================================================= */

:root {

    --bb-green:
        #1f7a45;

    --bb-green-dark:
        #155b33;

    --bb-green-soft:
        #eaf6ef;

    --ink:
        #1f2933;

    --muted:
        #667085;

    --line:
        #d9e2dc;

    --surface:
        #ffffff;

    --workspace:
        #eef8f3;

    --water:
        #74c6e8;

    --water-light:
        #dff4fc;

    --air:
        #f5f8fb;

    --shadow:
        0 18px 45px
        rgba(29, 45, 36, .14);
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing:
        border-box;
}


html,
body {

    margin:
        0;

    width:
        100%;

    height:
        100%;

    min-width:
        0;

    min-height:
        0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        var(--ink);

    background:
        #edf1ee;

    overflow:
        hidden;
}


/* =========================================================
   SHELL
========================================================= */

.module-shell {

    width:
        100%;

    height:
        100vh;

    min-width:
        0;

    min-height:
        0;

    display:
        grid;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    background:
        white;

    border:
        1px solid
        #dfe6e1;

    border-radius:
        22px;

    overflow:
        hidden;

    box-shadow:
        var(--shadow);
}


.module-shell:fullscreen,
.module-shell:-webkit-full-screen {

    width:
        100vw;

    height:
        100vh;

    border:
        none;

    border-radius:
        0;

    box-shadow:
        none;
}


/* =========================================================
   TOPBAR
========================================================= */

.module-topbar {

    min-height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        10px 20px;

    border-bottom:
        1px solid
        var(--line);

    background:
        white;

    z-index:
        50;
}


.module-brand {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.module-brand > div:last-child {

    min-width:
        0;
}


.brand-mark {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-mark img {
    width: 42px;
    height: 42px;

    display: block;

    object-fit: contain;
}


.module-eyebrow {

    margin:
        0 0 2px;

    color:
        var(--bb-green);

    font-size:
        .75rem;

    font-weight:
        850;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.module-title {

    margin:
        0;

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.5rem
        );

    line-height:
        1.15;
}


.module-meta {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.badge {

    padding:
        7px 10px;

    border:
        1px solid
        var(--line);

    border-radius:
        999px;

    background:
        #f8faf8;

    font-size:
        .78rem;

    font-weight:
        800;
}


.icon-button {

    min-width:
        40px;

    height:
        40px;

    padding:
        0 12px;

    border:
        1px solid
        var(--line);

    border-radius:
        11px;

    background:
        white;

    color:
        #334039;

    font-weight:
        800;

    white-space:
        nowrap;

    cursor:
        pointer;
}


.icon-button:hover,
.control-button:hover {

    background:
        #f7faf8;
}


/* =========================================================
   WORKSPACE
========================================================= */

.workspace {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #f9fcfa,
            var(--workspace)
        );
}


/* =========================================================
   LESSON SCENES
========================================================= */

.lesson-scene {

    position:
        absolute;

    inset:
        0;

    display:
        none;

    padding:
        26px 390px 24px 34px;

    overflow:
        hidden;
}


.lesson-scene.active {

    display:
        flex;

    flex-direction:
        column;
}


/* =========================================================
   SCENE HEADING
========================================================= */

.comparison-heading {

    flex:
        0 0 auto;

    margin-bottom:
        18px;
}


.comparison-kicker {

    color:
        var(--bb-green);

    font-size:
        .74rem;

    font-weight:
        900;

    letter-spacing:
        .1em;
}


.comparison-heading h2 {

    margin:
        3px 0 4px;

    font-size:
        1.5rem;
}


.comparison-heading p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        .9rem;
}


/* =========================================================
   COMPARISON GRID
========================================================= */

.comparison-panels {

    flex:
        1;

    min-width:
        0;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(280px, 1fr)
        52px
        minmax(280px, 1fr);

    gap:
        16px;

    align-items:
        stretch;
}


.medium-panel {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    border:
        1px solid
        rgba(31, 122, 69, .12);

    border-radius:
        22px;

    background:
        rgba(255, 255, 255, .88);

    box-shadow:
        0 12px 28px
        rgba(31, 70, 48, .07);

    overflow:
        hidden;
}


.water-panel {

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, .94),
            rgba(223, 244, 252, .75)
        );
}


/* =========================================================
   PANEL HEADINGS
========================================================= */

.panel-heading {

    position:
        absolute;

    top:
        16px;

    left:
        18px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    z-index:
        20;
}


.panel-heading h3 {

    margin:
        0;

    font-size:
        .95rem;
}


.panel-heading p {

    margin:
        2px 0 0;

    color:
        var(--muted);

    font-size:
        .72rem;
}


.medium-icon {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        var(--bb-green-soft);
}


/* =========================================================
   VS DIVIDER
========================================================= */

.comparison-divider {

    display:
        grid;

    place-items:
        center;
}


.comparison-divider span {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        white;

    border:
        1px solid
        var(--line);

    color:
        var(--bb-green-dark);

    font-size:
        .76rem;

    font-weight:
        900;

    box-shadow:
        0 7px 18px
        rgba(31, 70, 48, .08);
}


/* =========================================================
   STEP 1 — BUOYANCY
========================================================= */

.buoyancy-stage {

    position:
        absolute;

    inset:
        64px 16px 16px;

    overflow:
        hidden;
}


.air-buoyancy-stage {

    background:
        linear-gradient(
            to bottom,
            #fbfdff,
            #f3f7fa
        );

    border-radius:
        16px;
}


.water-buoyancy-stage {

    border-radius:
        16px;

    background:
        #f8fcfd;
}


.air-particles {

    position:
        absolute;

    inset:
        0;

    opacity:
        .25;

    background-image:
        radial-gradient(
            circle,
            #8ba2ae 1px,
            transparent 1px
        );

    background-size:
        28px 28px;
}


.water-body {

    position:
        absolute;

    left:
        4%;

    right:
        4%;

    bottom:
        5%;

    height:
        62%;

    border-radius:
        45% 45% 16px 16px /
        10% 10% 8px 8px;

    background:
        linear-gradient(
            to bottom,
            rgba(153, 220, 244, .65),
            rgba(74, 175, 218, .82)
        );
}


.water-line {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        4px;

    background:
        #57add4;
}


.comparison-loon {

    position:
        absolute;

    width:
        min(
            280px,
            65%
        );

    height:
        auto;

    user-select:
        none;

    -webkit-user-drag:
        none;
}


.air-loon {

    left:
        50%;

    top:
        34%;

    transform:
        translate(-50%, -50%);
}


.draggable-loon {

    left:
        50%;

    top:
        26%;

    transform:
        translate(-50%, -50%);

    cursor:
        grab;

    touch-action:
        none;

    z-index:
        12;
}


.draggable-loon:active {

    cursor:
        grabbing;
}


.loon-drop-target {

    position:
        absolute;

    left:
        50%;

    top:
        64%;

    width:
        190px;

    height:
        90px;

    transform:
        translate(-50%, -50%);

    display:
        grid;

    place-items:
        center;

    border:
        3px dashed
        rgba(31, 122, 69, .52);

    border-radius:
        50%;

    color:
        var(--bb-green-dark);

    font-size:
        .76rem;

    font-weight:
        850;

    background:
        rgba(255, 255, 255, .22);

    pointer-events:
        none;
}


.loon-drop-target.hidden {

    opacity:
        0;
}


.gravity-arrow,
.buoyant-arrow {

    position:
        absolute;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    color:
        #536057;

    font-size:
        2.4rem;

    font-weight:
        900;
}


.gravity-arrow span,
.buoyant-arrow span {

    font-size:
        .72rem;

    font-weight:
        800;

    white-space:
        nowrap;
}


.air-gravity {

    left:
        50%;

    top:
        58%;

    transform:
        translateX(-50%);
}


.buoyant-arrow {

    left:
        74%;

    top:
        49%;

    transform:
        translate(-50%, -50%);

    flex-direction:
        row;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--bb-green);

    opacity:
        0;

    transition:
        opacity .3s ease;
}


.buoyant-arrow.visible {

    opacity:
        1;
}


.force-label {

    position:
        absolute;

    left:
        50%;

    bottom:
        7%;

    transform:
        translateX(-50%);

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .92);

    font-size:
        .75rem;

    font-weight:
        850;

    white-space:
        nowrap;
}


.water-support-label {

    opacity:
        0;
}


.water-support-label.visible {

    opacity:
        1;
}


/* =========================================================
   STEP 2 — VISCOSITY
========================================================= */

.movement-stage {

    position:
        absolute;

    inset:
        68px 18px 18px;

    overflow:
        hidden;

    border-radius:
        16px;

    background:
        #fafcfd;
}


/* =========================================================
   AIR SCENE
========================================================= */

.air-movement-stage {

    background:
        linear-gradient(
            to bottom,
            #bfe6f5 0%,
            #edf8fc 62%,
            #d7e8d0 100%
        );
}


.air-sky {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(124, 199, 231, .42),
            rgba(255, 255, 255, .10)
        );
}


.air-cloud {

    position:
        absolute;

    width:
        100px;

    height:
        28px;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .72);

    filter:
        blur(.3px);
}


.air-cloud::before,
.air-cloud::after {

    content:
        "";

    position:
        absolute;

    border-radius:
        50%;

    background:
        inherit;
}


.air-cloud::before {

    width:
        42px;

    height:
        42px;

    left:
        18px;

    top:
        -18px;
}


.air-cloud::after {

    width:
        55px;

    height:
        55px;

    right:
        12px;

    top:
        -26px;
}


.air-cloud-1 {

    left:
        12%;

    top:
        23%;

    transform:
        scale(.8);
}


.air-cloud-2 {

    right:
        7%;

    top:
        18%;

    transform:
        scale(.55);

    opacity:
        .7;
}


.air-hills {

    position:
        absolute;

    left:
        -5%;

    right:
        -5%;

    bottom:
        -12%;

    height:
        42%;

    border-radius:
        50% 50% 0 0;

    background:
        linear-gradient(
            to bottom,
            #a5c79c,
            #789f70
        );

    opacity:
        .65;
}


/* =========================================================
   LAKE SCENE
========================================================= */

.water-movement-stage {

    background:
        #dff3fb;
}


.lake-sky {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        44%;

    background:
        linear-gradient(
            to bottom,
            #bfe6f6,
            #edf8fc
        );
}


.lake-distant-hills {

    position:
        absolute;

    left:
        -8%;

    right:
        -8%;

    top:
        30%;

    height:
        28%;

    border-radius:
        50% 50% 0 0;

    background:
        linear-gradient(
            to bottom,
            #799c79,
            #547454
        );

    opacity:
        .75;
}


.lake-water {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        58%;

    background:
        linear-gradient(
            to bottom,
            rgba(91, 184, 221, .74),
            rgba(44, 129, 171, .92)
        );
}


.lake-reflection {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        47%;

    height:
        4px;

    background:
        rgba(255, 255, 255, .65);

    box-shadow:
        0 12px 0
        rgba(255, 255, 255, .14),

        0 26px 0
        rgba(255, 255, 255, .10);
}


/* =========================================================
   MOVEMENT TRACK
========================================================= */

.movement-track {

    position:
        absolute;

    left:
        7%;

    right:
        7%;

    top:
        52%;

    border-top:
        2px dashed
        rgba(255, 255, 255, .45);

    z-index:
        4;
}


.water-track {

    top:
        57%;
}


/* =========================================================
   LOONS
========================================================= */

.moving-loon {

    position:
        absolute;

    left:
        17%;

    top:
        51%;

    width:
        min(
            210px,
            45%
        );

    transform:
        translate(-50%, -50%);

    user-select:
        none;

    -webkit-user-drag:
        none;

    z-index:
        10;
}


.air-flight-loon {

    top:
        46%;
}


.swimming-loon {

    top:
        55%;
}


.moving-loon.air-moving {

    transition:
        left 1.05s
        cubic-bezier(.2, .8, .25, 1);
}


.moving-loon.water-moving {

    transition:
        left 3.1s
        cubic-bezier(.3, .15, .2, 1);
}


/* =========================================================
   SPEED DISPLAY
========================================================= */

.speed-display {

    position:
        absolute;

    right:
        14px;

    top:
        14px;

    min-width:
        145px;

    padding:
        9px 12px;

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, .90);

    box-shadow:
        0 6px 18px
        rgba(29, 45, 36, .10);

    z-index:
        20;
}


.speed-label {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--muted);

    font-size:
        .65rem;

    font-weight:
        750;
}


.speed-display strong {

    color:
        var(--bb-green-dark);

    font-size:
        1.12rem;
}


/* =========================================================
   MEDIUM RESISTANCE
========================================================= */

.medium-resistance {

    position:
        absolute;

    left:
        28%;

    top:
        40%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    z-index:
        5;
}


.medium-resistance span {

    display:
        block;

    height:
        3px;

    border-radius:
        999px;
}


.low-resistance {

    opacity:
        .25;
}


.low-resistance span {

    width:
        65px;

    background:
        rgba(255, 255, 255, .9);
}

/* =========================================================
   VISCOSITY NOTE
========================================================= */

.comparison-note {

    flex:
        0 0 auto;

    max-width:
        760px;

    margin:
        12px auto 0;

    padding:
        8px 14px;

    border:
        1px solid
        rgba(31, 122, 69, .10);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, .78);

    color:
        var(--muted);

    font-size:
        .72rem;

    text-align:
        center;

    line-height:
        1.4;
}


/* =========================================================
   SHARED ACTION BUTTON
========================================================= */

.scene-action {

    position:
        absolute;

    left:
        50%;

    bottom:
        18px;

    transform:
        translateX(-50%);

    padding:
        10px 15px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--bb-green);

    color:
        white;

    font-weight:
        850;

    white-space:
        nowrap;

    cursor:
        pointer;

    z-index:
        20;

    box-shadow:
        0 6px 16px
        rgba(31, 122, 69, .18);
}


.scene-action:hover:not(:disabled) {

    background:
        var(--bb-green-dark);
}


.scene-action:disabled {

    opacity:
        .52;

    cursor:
        default;
}


/* =========================================================
   STEP 3 — THERMAL CONDUCTIVITY
========================================================= */

.thermal-stage {

    position:
        absolute;

    inset:
        66px 18px 18px;

    border-radius:
        16px;

    overflow:
        hidden;

    background:
        #fafcfd;
}


/* =========================================================
   AIR / ROCKY SHORE
========================================================= */

.air-thermal-stage {

    background:
        linear-gradient(
            to bottom,
            #d8ecf4 0%,
            #eef6f8 55%,
            #d8cfbc 56%,
            #b8aa8c 100%
        );
}


.shore-sky {

    position:
        absolute;

    inset:
        0 0 44%;

    background:
        linear-gradient(
            to bottom,
            #c3e3ef,
            #f4f9fa
        );
}


.shore-horizon {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        43%;

    height:
        12%;

    background:
        #98c7d3;

    opacity:
        .7;
}


.shore-ground {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        48%;

    background:
        linear-gradient(
            to bottom,
            #cbbd9e,
            #a28e6b
        );
}


.shore-rock {

    position:
        absolute;

    bottom:
        18%;

    border-radius:
        50% 55% 40% 45%;

    background:
        linear-gradient(
            145deg,
            #8b8a82,
            #64655f
        );

    box-shadow:
        inset 3px 3px 5px
        rgba(255, 255, 255, .12);
}


.shore-rock-1 {

    left:
        16%;

    width:
        105px;

    height:
        55px;

    transform:
        rotate(-7deg);
}


.shore-rock-2 {

    left:
        40%;

    width:
        140px;

    height:
        62px;

    transform:
        rotate(4deg);
}


.shore-rock-3 {

    right:
        10%;

    width:
        92px;

    height:
        45px;

    transform:
        rotate(-3deg);
}


/* =========================================================
   WATER ENVIRONMENT
========================================================= */

.water-thermal-stage {

    background:
        linear-gradient(
            to bottom,
            #a9def1,
            #4fa9d0
        );
}


.underwater-light {

    position:
        absolute;

    inset:
        0;

    background:
        repeating-linear-gradient(
            106deg,
            rgba(255, 255, 255, .15) 0,
            rgba(255, 255, 255, .15) 12px,
            transparent 12px,
            transparent 58px
        );

    opacity:
        .5;
}


.underwater-floor {

    position:
        absolute;

    left:
        -5%;

    right:
        -5%;

    bottom:
        -8%;

    height:
        28%;

    border-radius:
        50% 50% 0 0;

    background:
        #8b9a79;
}


/* =========================================================
   SEALS
========================================================= */

.thermal-seal {

    position:
        absolute;

    left:
        50%;

    width:
        min(
            330px,
            74%
        );

    transform:
        translate(-50%, -50%);

    user-select:
        none;

    -webkit-user-drag:
        none;

    z-index:
        10;
}


.air-thermal-seal {

    top:
        50%;
}


.water-thermal-seal {

    top:
        48%;
}


/* =========================================================
   HEAT CORE
========================================================= */

.heat-core {

    position:
        absolute;

    left:
        50%;

    top:
        31%;

    transform:
        translateX(-50%);

    padding:
        7px 11px;

    border-radius:
        999px;

    background:
        rgba(235, 104, 64, .96);

    color:
        white;

    font-size:
        .75rem;

    font-weight:
        900;

    z-index:
        16;

    box-shadow:
        0 0 0 5px
        rgba(235, 104, 64, .13);
}


.air-thermal-stage
.heat-core {

    top:
        32%;
}


.air-thermal-stage
.heat-core {

    top:
        54%;
}


/* =========================================================
   THERMAL PARTICLES
========================================================= */

.thermal-particles {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        15;
}

.thermal-particles span {

    position:
        absolute;

    left:
        50%;

    top:
        49%;

    width:
        13px;

    height:
        13px;

    border-radius:
        50%;

    background:
        #f58252;

    opacity:
        0;

    box-shadow:
        0 0 14px
        rgba(245, 130, 82, .82);
}


.air-thermal-stage
.thermal-particles span {

    top:
        54%;
}


/* =========================================================
   AIR PARTICLES
========================================================= */

.air-thermal-particles.active span:nth-child(1) {

    animation:
        airHeatParticle1
        2.2s ease-out forwards;
}


.air-thermal-particles.active span:nth-child(2) {

    animation:
        airHeatParticle2
        2.2s .12s ease-out forwards;
}


.air-thermal-particles.active span:nth-child(3) {

    animation:
        airHeatParticle3
        2.2s .22s ease-out forwards;
}


.air-thermal-particles.active span:nth-child(4) {

    animation:
        airHeatParticle4
        2.2s .32s ease-out forwards;
}


.air-thermal-particles.active span:nth-child(5) {

    animation:
        airHeatParticle5
        2.2s .42s ease-out forwards;
}


.air-thermal-particles.active span:nth-child(6) {

    animation:
        airHeatParticle6
        2.2s .52s ease-out forwards;
}


/* =========================================================
   WATER PARTICLES
========================================================= */

.water-thermal-particles.active span:nth-child(1) {

    animation:
        waterHeatParticle1
        1.05s ease-out forwards;
}


.water-thermal-particles.active span:nth-child(2) {

    animation:
        waterHeatParticle2
        1.05s .08s ease-out forwards;
}


.water-thermal-particles.active span:nth-child(3) {

    animation:
        waterHeatParticle3
        1.05s .16s ease-out forwards;
}


.water-thermal-particles.active span:nth-child(4) {

    animation:
        waterHeatParticle4
        1.05s .24s ease-out forwards;
}


.water-thermal-particles.active span:nth-child(5) {

    animation:
        waterHeatParticle5
        1.05s .32s ease-out forwards;
}


.water-thermal-particles.active span:nth-child(6) {

    animation:
        waterHeatParticle6
        1.05s .40s ease-out forwards;
}


.water-thermal-particles.active span:nth-child(7) {

    animation:
        waterHeatParticle7
        1.05s .48s ease-out forwards;
}


.water-thermal-particles.active span:nth-child(8) {

    animation:
        waterHeatParticle8
        1.05s .56s ease-out forwards;
}


/* =========================================================
   HEAT PARTICLE KEYFRAMES
========================================================= */

@keyframes airHeatParticle1 {

    15% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(72px, -38px);

        opacity:
            0;
    }
}


@keyframes airHeatParticle2 {

    15% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(82px, 4px);

        opacity:
            0;
    }
}


@keyframes airHeatParticle3 {

    15% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(54px, 46px);

        opacity:
            0;
    }
}


@keyframes airHeatParticle4 {

    15% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(-64px, -35px);

        opacity:
            0;
    }
}


@keyframes airHeatParticle5 {

    15% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(-78px, 10px);

        opacity:
            0;
    }
}


@keyframes airHeatParticle6 {

    15% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(-45px, 50px);

        opacity:
            0;
    }
}


@keyframes waterHeatParticle1 {

    10% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(145px, -82px);

        opacity:
            0;
    }
}


@keyframes waterHeatParticle2 {

    10% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(170px, -20px);

        opacity:
            0;
    }
}


@keyframes waterHeatParticle3 {

    10% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(150px, 65px);

        opacity:
            0;
    }
}


@keyframes waterHeatParticle4 {

    10% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(55px, 105px);

        opacity:
            0;
    }
}


@keyframes waterHeatParticle5 {

    10% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(-145px, -82px);

        opacity:
            0;
    }
}


@keyframes waterHeatParticle6 {

    10% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(-170px, -12px);

        opacity:
            0;
    }
}


@keyframes waterHeatParticle7 {

    10% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(-145px, 70px);

        opacity:
            0;
    }
}


@keyframes waterHeatParticle8 {

    10% {
        opacity:
            1;
    }

    100% {
        transform:
            translate(-45px, 112px);

        opacity:
            0;
    }
}


/* =========================================================
   CONDUCTIVITY METERS
========================================================= */

.conductivity-meter {

    position:
        absolute;

    left:
        10%;

    right:
        10%;

    bottom:
        13%;

    z-index:
        20;
}


.conductivity-meter > span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #425149;

    font-size:
        .7rem;

    font-weight:
        800;
}


.conductivity-track {

    height:
        14px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .62);
}


.conductivity-fill {

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    background:
        #ec7954;

    transition:
        width 1.5s ease;
}


.air-conductivity-fill.active {

    width:
        22%;
}


.water-conductivity-fill.active {

    width:
        92%;
}


/* =========================================================
   THERMAL RESULT
========================================================= */

.thermal-result {

    position:
        absolute;

    left:
        50%;

    bottom:
        7%;

    transform:
        translateX(-50%);

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .92);

    color:
        #405047;

    font-size:
        .73rem;

    font-weight:
        850;

    white-space:
        nowrap;

    opacity:
        0;

    transition:
        opacity .3s ease;

    z-index:
        20;
}


.thermal-result.visible {

    opacity:
        1;
}


/* =========================================================
   STEP 4 — SPECIFIC HEAT CAPACITY
========================================================= */

.temperature-stage {

    position:
        absolute;

    inset:
        70px 18px 18px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;
}


/* =========================================================
   SAMPLE + THERMOMETER
========================================================= */

.temperature-apparatus {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    gap:
        34px;
}


.sample-container {

    position:
        relative;

    width:
        150px;

    height:
        150px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border:
        3px solid
        #8ba09a;

    border-top:
        none;

    border-radius:
        8px 8px 32px 32px;

    background:
        rgba(255, 255, 255, .72);

    box-shadow:
        inset 0 -8px 15px
        rgba(38, 72, 59, .07);
}


.sample-container > span {

    position:
        relative;

    z-index:
        5;

    color:
        #405047;

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .08em;
}


.air-sample {

    background:
        linear-gradient(
            to bottom,
            rgba(243, 249, 252, .85),
            rgba(218, 232, 239, .8)
        );
}


.air-sample-particles {

    position:
        absolute;

    inset:
        0;
}


.air-sample-particles i {

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        rgba(94, 127, 143, .5);
}


.air-sample-particles i:nth-child(1) {

    left:
        20%;

    top:
        25%;
}


.air-sample-particles i:nth-child(2) {

    left:
        70%;

    top:
        22%;
}


.air-sample-particles i:nth-child(3) {

    left:
        45%;

    top:
        45%;
}


.air-sample-particles i:nth-child(4) {

    left:
        24%;

    top:
        72%;
}


.air-sample-particles i:nth-child(5) {

    left:
        74%;

    top:
        65%;
}


.air-sample-particles i:nth-child(6) {

    left:
        52%;

    top:
        82%;
}


.water-sample {

    background:
        linear-gradient(
            to bottom,
            rgba(179, 225, 243, .75),
            rgba(72, 171, 214, .85)
        );
}


.water-sample-wave {

    position:
        absolute;

    left:
        -10%;

    top:
        9%;

    width:
        120%;

    height:
        24px;

    border-radius:
        50%;

    border-top:
        4px solid
        rgba(255, 255, 255, .55);
}


/* =========================================================
   LAB THERMOMETER
========================================================= */

.lab-thermometer {

    position:
        relative;

    width:
        74px;

    height:
        220px;

    display:
        flex;

    justify-content:
        center;
}


.thermometer-tube {

    position:
        absolute;

    left:
        50%;

    top:
        10px;

    width:
        25px;

    height:
        174px;

    transform:
        translateX(-50%);

    overflow:
        hidden;

    border:
        3px solid
        #59645f;

    border-radius:
        15px 15px 5px 5px;

    background:
        linear-gradient(
            90deg,
            #f8faf9,
            #ffffff,
            #edf1ef
        );
}


.thermometer-bulb {

    position:
        absolute;

    left:
        50%;

    bottom:
        4px;

    width:
        54px;

    height:
        54px;

    transform:
        translateX(-50%);

    border:
        3px solid
        #59645f;

    border-radius:
        50%;

    background:
        #df654d;

    box-shadow:
        inset 6px 5px 8px
        rgba(255, 255, 255, .14);
}


.temperature-fill {

    position:
        absolute;

    left:
        5px;

    right:
        5px;

    bottom:
        0;

    height:
        30%;

    border-radius:
        999px 999px 0 0;

    background:
        #df654d;

    transition:
        height 1.3s ease;
}


.air-temp-fill.heated {

    height:
        83%;
}


.water-temp-fill.heated {

    height:
        49%;
}


/* =========================================================
   THERMOMETER SCALE
========================================================= */

.thermometer-scale {

    position:
        absolute;

    right:
        -3px;

    top:
        11px;

    height:
        170px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    color:
        #66736c;

    font-size:
        .58rem;

    font-weight:
        750;
}


.thermometer-scale span::before {

    content:
        "";

    display:
        inline-block;

    width:
        7px;

    margin-right:
        3px;

    border-top:
        1px solid
        #79857f;

    vertical-align:
        middle;
}


/* =========================================================
   TEMPERATURE READOUT
========================================================= */

.temperature-reading {

    margin-top:
        4px;

    color:
        var(--ink);

    font-size:
        1.32rem;

    font-weight:
        900;
}


.temperature-change {

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);

    font-size:
        .76rem;

    font-weight:
        850;
}


.temperature-caption {

    color:
        var(--muted);

    font-size:
        .76rem;

    font-weight:
        750;
}


/* =========================================================
   EQUAL ENERGY INDICATOR
========================================================= */

.equal-energy-indicator {

    position:
        absolute;

    left:
        calc(50% - 175px);

    bottom:
        73px;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .90);

    color:
        #59645f;

    font-size:
        .72rem;

    white-space:
        nowrap;

    box-shadow:
        0 6px 14px
        rgba(29, 45, 36, .08);

    z-index:
        24;
}


/* =========================================================
   SHARED HEAT BUTTON
========================================================= */

.heat-both-button {

    position:
        absolute;

    left:
        calc(50% - 175px);

    bottom:
        28px;

    transform:
        translateX(-50%);

    padding:
        11px 18px;

    border:
        none;

    border-radius:
        11px;

    background:
        var(--bb-green);

    color:
        white;

    font-weight:
        850;

    white-space:
        nowrap;

    cursor:
        pointer;

    z-index:
        25;

    box-shadow:
        0 8px 18px
        rgba(31, 122, 69, .18);
}


.heat-both-button:hover:not(:disabled) {

    background:
        var(--bb-green-dark);
}


.heat-both-button:disabled {

    opacity:
        .52;

    cursor:
        default;
}


.conductivity-button {

    bottom:
        27px;
}

.conductivity-button {

    left:
        50%;

    bottom:
        18px;

    transform:
        translateX(-50%);

    min-width:
        230px;
}

#conductivityScene .comparison-panels {

    padding-bottom:
        48px;
}


/* =========================================================
   FLOATING INSTRUCTIONS
========================================================= */

.instruction-popup {

    position:
        absolute;

    top:
        20px;

    right:
        20px;

    width:
        340px;

    max-width:
        calc(100% - 40px);

    border:
        1px solid
        #d9e5dd;

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, .97);

    box-shadow:
        0 18px 42px
        rgba(28, 44, 34, .15);

    overflow:
        hidden;

    z-index:
        40;
}


.instruction-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        12px 14px 11px 16px;

    background:
        var(--bb-green-soft);

    border-bottom:
        1px solid
        #dbe9df;

    cursor:
        grab;

    user-select:
        none;
}


.instruction-header:active {

    cursor:
        grabbing;
}


.instruction-step {

    color:
        var(--bb-green-dark);

    font-size:
        .76rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.popup-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.popup-action {

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #536057;

    font-size:
        1rem;

    cursor:
        pointer;
}


.popup-action:hover {

    background:
        rgba(31, 122, 69, .10);
}


.instruction-body {

    padding:
        16px 18px 17px;
}


.instruction-body h2 {

    margin:
        0 0 9px;

    font-size:
        1.18rem;

    line-height:
        1.25;
}


.instruction-body p {

    margin:
        0;

    color:
        #4e5b53;

    font-size:
        .91rem;

    line-height:
        1.5;
}


.instruction-goal {

    margin-top:
        14px;

    padding:
        11px 13px;

    border:
        1px solid
        #e0e8e3;

    border-radius:
        12px;

    background:
        #f7faf8;

    color:
        #435047;

    font-size:
        .84rem;

    line-height:
        1.4;
}


.instruction-goal strong {

    display:
        block;

    margin-bottom:
        3px;
}


.instruction-restore {

    position:
        absolute;

    top:
        20px;

    right:
        20px;

    display:
        none;

    padding:
        9px 13px;

    border:
        1px solid
        var(--line);

    border-radius:
        999px;

    background:
        white;

    color:
        var(--bb-green-dark);

    font-weight:
        850;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(28, 44, 34, .10);

    z-index:
        39;
}


/* =========================================================
   FOOTER
========================================================= */

.module-footer {

    min-height:
        60px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        16px;

    padding:
        8px 18px;

    border-top:
        1px solid
        var(--line);

    background:
        white;

    z-index:
        50;
}


.footer-left,
.footer-right {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.footer-right {

    justify-content:
        flex-end;
}


.control-button {

    min-height:
        40px;

    padding:
        0 14px;

    border:
        1px solid
        var(--line);

    border-radius:
        11px;

    background:
        white;

    color:
        #334039;

    font-weight:
        800;

    white-space:
        nowrap;

    cursor:
        pointer;
}


.control-button.primary {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green);

    color:
        white;
}


.control-button.primary:hover:not(:disabled) {

    background:
        var(--bb-green-dark);
}


.control-button.primary:disabled {

    opacity:
        .38;

    cursor:
        not-allowed;
}


.module-progress {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;
}


.progress-dot {

    width:
        10px;

    height:
        10px;

    border:
        2px solid
        #9db7a6;

    border-radius:
        50%;

    background:
        white;
}


.progress-dot.active {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green);
}


/* =========================================================
   SHORT VIEWPORTS
========================================================= */

@media (max-height: 760px) {

    .module-topbar {

        min-height:
            60px;

        padding:
            8px 16px;
    }


    .brand-mark {

        width:
            38px;

        height:
            38px;

        font-size:
            20px;
    }


    .module-footer {

        min-height:
            54px;

        padding:
            6px 14px;
    }


    .control-button {

        min-height:
            36px;

        font-size:
            .84rem;
    }


    .lesson-scene {

        padding-top:
            16px;

        padding-bottom:
            14px;
    }


    .comparison-heading {

        margin-bottom:
            12px;
    }


    .comparison-heading h2 {

        font-size:
            1.3rem;
    }


    .movement-stage,
    .thermal-stage {

        top:
            62px;
    }


    .thermal-seal {

        width:
            min(
                235px,
                64%
            );
    }


    .temperature-apparatus {

        transform:
            scale(.86);

        transform-origin:
            center bottom;

        margin-top:
            -15px;

        margin-bottom:
            -12px;
    }


    .instruction-popup {

        top:
            14px;

        right:
            14px;
    }
}


/* =========================================================
   RESPONSIVE — MEDIUM DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .lesson-scene {

        padding:
            22px 330px 20px 24px;
    }


    .instruction-popup {

        width:
            295px;

        right:
            16px;
    }


    .comparison-panels {

        grid-template-columns:
            minmax(220px, 1fr)
            44px
            minmax(220px, 1fr);

        gap:
            12px;
    }


    .speed-display {

        min-width:
            118px;

        padding:
            7px 9px;
    }


    .speed-display strong {

        font-size:
            .95rem;
    }


    .thermal-seal {

        width:
            min(
                230px,
                70%
            );
    }


    .temperature-apparatus {

        gap:
            16px;
    }


    .sample-container {

        width:
            115px;

        height:
            125px;
    }


    .lab-thermometer {

        height:
            190px;
    }


    .thermometer-tube {

        height:
            145px;
    }


    .thermometer-scale {

        height:
            141px;
    }
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 950px) {

    .lesson-scene {

        padding:
            18px;
    }


    .comparison-heading {

        padding-right:
            300px;
    }


    .comparison-panels {

        grid-template-columns:
            minmax(230px, 1fr)
            40px
            minmax(230px, 1fr);
    }


    .instruction-popup {

        top:
            14px;

        right:
            14px;

        width:
            290px;

        max-width:
            calc(100% - 28px);
    }


    .equal-energy-indicator,
    .heat-both-button {

        left:
            50%;
    }
}


/* =========================================================
   RESPONSIVE — SMALL SCREEN
========================================================= */

@media (max-width: 720px) {

    html,
    body {

        overflow:
            auto;
    }


    .module-shell {

        min-height:
            100vh;

        height:
            auto;
    }


    .workspace {

        min-height:
            980px;

        overflow:
            visible;
    }


    .lesson-scene {

        position:
            relative;

        inset:
            auto;

        min-height:
            980px;

        padding:
            12px;

        overflow:
            visible;
    }


    .lesson-scene:not(.active) {

        display:
            none;
    }


    .lesson-scene.active {

        display:
            flex;
    }


    .comparison-heading {

        padding-right:
            0;

        margin-bottom:
            12px;
    }


    .comparison-panels {

        flex:
            none;

        min-height:
            760px;

        grid-template-columns:
            1fr;

        grid-template-rows:
            minmax(330px, 1fr)
            36px
            minmax(330px, 1fr);

        gap:
            10px;
    }


    .comparison-divider {

        transform:
            rotate(90deg);
    }


    .instruction-popup {

        position:
            fixed;

        width:
            min(
                300px,
                calc(100% - 20px)
            );

        top:
            10px;

        right:
            10px;
    }


    .comparison-note {

        display:
            none;
    }


    .equal-energy-indicator,
    .heat-both-button {

        left:
            50%;
    }


    .temperature-apparatus {

        transform:
            scale(.82);
    }
}


/* =========================================================
   RESPONSIVE — PHONE
========================================================= */

@media (max-width: 560px) {

    .module-topbar {

        padding:
            8px 10px;

        gap:
            10px;
    }


    .module-meta {

        gap:
            5px;
    }


    .module-meta .badge {

        display:
            none;
    }


    .module-title {

        font-size:
            .98rem;
    }


    .brand-mark {

        width:
            36px;

        height:
            36px;
    }


    .icon-button {

        min-width:
            34px;

        height:
            34px;

        padding:
            0 8px;

        font-size:
            .8rem;
    }


    .module-footer {

        grid-template-columns:
            auto
            1fr
            auto;

        gap:
            8px;

        padding:
            6px 8px;
    }


    .footer-left {

        display:
            none;
    }


    .module-progress {

        justify-self:
            center;
    }


    .footer-right {

        grid-column:
            3;
    }


    .control-button {

        min-height:
            34px;

        padding:
            0 9px;

        font-size:
            .78rem;
    }


    .comparison-panels {

        grid-template-rows:
            minmax(340px, 1fr)
            34px
            minmax(340px, 1fr);
    }


    .moving-loon {

        width:
            min(
                180px,
                46%
            );
    }


    .speed-display {

        right:
            8px;

        top:
            8px;

        min-width:
            105px;
    }


    .temperature-apparatus {

        gap:
            8px;

        transform:
            scale(.72);
    }


    .equal-energy-indicator {

        max-width:
            calc(100% - 30px);

        white-space:
            normal;

        text-align:
            center;
    }
}

/* =========================================================
   BACKGROUND AUDIO
========================================================= */

.sound-active {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);
}

/* =========================================================
   MODULE COMPLETION SCREEN
========================================================= */

.module-completion-overlay {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(8, 12, 10, .72);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:
        9999;
}


/* =========================================================
   COMPLETION SCREEN — VISIBLE STATE
========================================================= */

.module-completion-overlay.visible {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* =========================================================
   COMPLETION CARD
========================================================= */

.module-completion-card {

    position:
        relative;

    width:
        min(
            560px,
            100%
        );

    max-height:
        calc(100vh - 48px);

    overflow-y:
        auto;

    padding:
        30px;

    border:
        1px solid
        #dce6df;

    border-radius:
        26px;

    background:
        #ffffff;

    color:
        var(--ink);

    text-align:
        center;

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, .32);

    transform:
        translateY(20px)
        scale(.96);

    transition:
        transform .4s
        cubic-bezier(.2, .8, .2, 1);
}


.module-completion-overlay.visible
.module-completion-card {

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.completion-close-button {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        9px;

    background:
        #f2f5f3;

    color:
        #58645d;

    font-size:
        1.25rem;

    cursor:
        pointer;
}


.completion-close-button:hover {

    background:
        #e8eeea;
}


/* =========================================================
   SUCCESS ICON
========================================================= */

.completion-success-icon {

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 13px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green);

    font-size:
        2.1rem;

    font-weight:
        950;

    animation:
        completionSuccessPop
        .55s
        cubic-bezier(.2, .8, .2, 1);
}

.completion-success-icon img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    display: block;
}

@keyframes completionSuccessPop {

    0% {

        transform:
            scale(.45)
            rotate(-12deg);

        opacity:
            0;
    }


    70% {

        transform:
            scale(1.12)
            rotate(3deg);

        opacity:
            1;
    }


    100% {

        transform:
            scale(1)
            rotate(0deg);
    }
}


/* =========================================================
   COMPLETION HEADING
========================================================= */

.completion-eyebrow {

    margin:
        0 0 5px;

    color:
        var(--bb-green);

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.module-completion-card h2 {

    margin:
        0;

    color:
        var(--ink);

    font-size:
        clamp(
            1.45rem,
            3vw,
            2rem
        );

    line-height:
        1.16;
}


.completion-subtitle {

    max-width:
        450px;

    margin:
        10px auto 0;

    color:
        var(--muted);

    font-size:
        .85rem;

    line-height:
        1.5;
}


/* =========================================================
   XP REWARD
========================================================= */

.completion-reward-card {

    margin:
        21px 0 14px;

    padding:
        15px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        1px solid
        #dce9df;

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #f4fbf6,
            #eaf6ef
        );
}


.completion-reward-card span {

    color:
        #57645c;

    font-size:
        .78rem;

    font-weight:
        800;
}


.completion-reward-card strong {

    color:
        #58b92f;

    font-size:
        1.6rem;

    font-weight:
        950;
}


/* =========================================================
   UNIT PROGRESS
========================================================= */

.completion-progress-card {

    padding:
        15px 16px;

    border:
        1px solid
        #e1e7e3;

    border-radius:
        16px;

    background:
        #f9fbfa;

    text-align:
        left;
}


.completion-progress-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        11px;
}


.completion-progress-heading div > span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--bb-green);

    font-size:
        .62rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.completion-progress-heading div > strong {

    display:
        block;

    color:
        var(--ink);

    font-size:
        .86rem;
}


.completion-progress-heading > strong {

    flex:
        0 0 auto;

    color:
        #48554d;

    font-size:
        .82rem;

    font-weight:
        900;
}


/* =========================================================
   UNIT PROGRESS BAR
========================================================= */

.completion-progress-track {

    width:
        100%;

    height:
        12px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #dce3df;
}


.completion-progress-fill {

    height:
        100%;

    border-radius:
        inherit;

    background:
        #59b832;

    transition:
        width 1.05s
        cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   BADGE PROGRESS
========================================================= */

.completion-badge-card {

    margin-top:
        14px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr;

    align-items:
        center;

    gap:
        13px;

    padding:
        15px 16px;

    border:
        1px solid
        #e5e1ec;

    border-radius:
        16px;

    background:
        #faf8fc;

    text-align:
        left;
}


.completion-badge-icon {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;

    display: grid;
    place-items: center;

    border-radius: 16px;
    background: #eef8f3;
}

.completion-badge-icon img {
    width: 60px;
    height: 60px;

    display: block;
    object-fit: contain;
}


.completion-badge-copy {

    min-width:
        0;
}


.completion-badge-copy span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #7a6092;

    font-size:
        .62rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.completion-badge-copy strong {

    display:
        block;

    color:
        #392f43;

    font-size:
        .88rem;
}


.completion-badge-copy p {

    margin:
        5px 0 0;

    color:
        #6c6571;

    font-size:
        .7rem;

    line-height:
        1.4;
}


/* =========================================================
   COMPLETION BUTTONS
========================================================= */

.completion-actions {

    margin-top:
        22px;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        10px;
}


.completion-primary-button,
.completion-secondary-button {

    min-height:
        46px;

    padding:
        0 16px;

    border-radius:
        12px;

    font:
        inherit;

    font-weight:
        850;

    cursor:
        pointer;
}


.completion-primary-button {

    border:
        0;

    background:
        var(--bb-green);

    color:
        white;

    box-shadow:
        0 9px 20px
        rgba(31, 122, 69, .20);
}


.completion-primary-button:hover {

    background:
        var(--bb-green-dark);
}


.completion-secondary-button {

    border:
        1px solid
        var(--line);

    background:
        white;

    color:
        #455248;
}


.completion-secondary-button:hover {

    background:
        #f7faf8;
}


/* =========================================================
   COMPLETION SCREEN — MOBILE
========================================================= */

@media (max-width: 600px) {

    .module-completion-overlay {

        padding:
            14px;
    }


    .module-completion-card {

        padding:
            24px 18px 20px;

        border-radius:
            20px;
    }


    .completion-actions {

        grid-template-columns:
            1fr;
    }


    .completion-success-icon {

        width:
            62px;

        height:
            62px;

        font-size:
            1.8rem;
    }
}

.conductivity-value {

    display:
        block;

    margin-top:
        2px;

    color:
        #7a857f;

    font-size:
        .64rem;

    font-weight:
        750;
}

/* =========================================================
   ACTIVITY FEEDBACK
========================================================= */

.activity-feedback {

    margin-top:
        14px;

    padding:
        16px;

    border:
        1px solid
        #dce6df;

    border-radius:
        16px;

    background:
        #f8fbf9;

    text-align:
        left;
}


.activity-feedback-question {

    margin:
        0 0 11px;

    color:
        var(--ink);

    font-size:
        .84rem;

    font-weight:
        850;

    text-align:
        center;
}


/* =========================================================
   YES / NO BUTTONS
========================================================= */

.activity-feedback-buttons {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        9px;
}


.activity-feedback-button {

    min-height:
        42px;

    padding:
        8px 12px;

    border:
        1px solid
        #d5dfd8;

    border-radius:
        11px;

    background:
        white;

    color:
        #455248;

    font:
        inherit;

    font-size:
        .78rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


.activity-feedback-button:hover {

    border-color:
        #a9c5b3;

    background:
        var(--bb-green-soft);

    transform:
        translateY(-1px);
}


.activity-feedback-button.selected {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);
}


/* =========================================================
   NEGATIVE FEEDBACK REASONS
========================================================= */

.activity-feedback-reasons {

    margin-top:
        13px;

    padding-top:
        13px;

    border-top:
        1px solid
        #e1e8e3;
}


.activity-feedback-reasons[hidden] {

    display:
        none;
}


.activity-feedback-reasons > p {

    margin:
        0 0 9px;

    color:
        #4f5d54;

    font-size:
        .74rem;

    font-weight:
        800;
}


.activity-feedback-reasons > p span {

    margin-left:
        4px;

    color:
        var(--muted);

    font-size:
        .66rem;

    font-weight:
        650;
}


.activity-feedback-reason-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        7px;
}


.activity-feedback-reason-grid button {

    min-height:
        35px;

    padding:
        6px 8px;

    border:
        1px solid
        #d9e2dc;

    border-radius:
        9px;

    background:
        white;

    color:
        #526057;

    font:
        inherit;

    font-size:
        .68rem;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}


.activity-feedback-reason-grid button:hover {

    border-color:
        #a9c5b3;

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);
}


.activity-feedback-reason-grid button.selected {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);
}


/* =========================================================
   THANK-YOU MESSAGE
========================================================= */

.activity-feedback-thanks {

    padding:
        10px 12px;

    border:
        1px solid
        #cfe3d5;

    border-radius:
        10px;

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);

    font-size:
        .74rem;

    font-weight:
        800;

    line-height:
        1.4;

    text-align:
        center;
}


.activity-feedback-thanks[hidden] {

    display:
        none;
}


/* =========================================================
   ACTIVITY FEEDBACK — MOBILE
========================================================= */

@media (max-width: 600px) {

    .activity-feedback {

        padding:
            14px;
    }


    .activity-feedback-buttons {

        grid-template-columns:
            1fr;
    }


    .activity-feedback-reason-grid {

        grid-template-columns:
            1fr;
    }

}