:root {
    --bg: #04130e;
    --panel: rgba(3, 28, 20, .91);
    --panel2: rgba(6, 40, 28, .84);
    --line: rgba(108, 225, 157, .24);

    --text: #f3fff7;
    --muted: #a3b9ae;

    --green: #71eda2;
    --olive: #a2c65a;
    --cyan: #57d9e8;

    --yellow: #f3c846;
    --orange: #ff8a38;
    --red: #ff5b52;
    --purple: #bd98ff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;

    min-height: 100%;

    background:
        #04130e;

    color:
        var(--text);

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

body {
    overflow: hidden;
}

button {
    font: inherit;
}

#app {
    height: 100vh;

    display: grid;

    grid-template-rows:
        auto 1fr auto;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(45, 125, 71, .15),
            transparent 38%
        ),
        #04130e;
}


/* HEADER */

.topbar {
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        12px 22px;

    border-bottom:
        1px solid
        rgba(111, 225, 161, .18);

    background:
        rgba(3, 22, 16, .96);

    z-index: 50;
}

.brand {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}

.brand-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(112, 234, 164, .35);

    border-radius: 15px;

    background:
        rgba(28, 103, 65, .40);

    font-size: 25px;
}

.brand strong {
    display: block;

    font-size:
        clamp(17px, 2vw, 25px);

    letter-spacing: .035em;
}

.brand small {
    display: block;

    margin-top: 2px;

    color:
        var(--muted);

    font-size: 10px;
}

.top-actions {
    display: flex;

    gap: 8px;
}

.top-actions button,
.timeline button {
    min-height: 44px;

    border:
        1px solid
        rgba(110, 227, 158, .30);

    border-radius: 14px;

    color:
        #eafff2;

    background:
        rgba(14, 69, 48, .50);

    cursor: pointer;
}

.top-actions button {
    padding:
        10px 14px;
}


/* STAGE */

.stage {
    position: relative;

    min-height: 0;

    overflow: hidden;
}

#threeCanvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;
}

.stage::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(1, 14, 10, .68),
            transparent 48%,
            rgba(1, 14, 10, .10)
        );
}


/* COPY */

.scene-copy {
    position: absolute;

    z-index: 20;

    left: 24px;
    top: 24px;

    width:
        min(460px, 39vw);

    padding:
        22px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 31, 22, .94),
            rgba(4, 26, 20, .88)
        );

    backdrop-filter:
        blur(13px);
}

.kicker {
    color:
        var(--green);

    font-size:
        12px;

    font-weight: 850;

    letter-spacing: .13em;
}

h1 {
    margin:
        10px 0 12px;

    font-size:
        clamp(29px, 4.2vw, 58px);

    line-height: .98;

    letter-spacing: -.025em;
}

.lead {
    margin: 0;

    color:
        #d9e9e0;

    font-size:
        clamp(13px, 1.5vw, 17px);

    line-height: 1.5;
}

.metric {
    margin-top: 18px;

    color:
        #8ff2b7;

    font-size:
        clamp(20px, 3vw, 39px);

    font-weight: 850;
}

.note {
    margin:
        13px 0 0;

    padding-top: 12px;

    border-top:
        1px solid
        rgba(255,255,255,.10);

    color:
        var(--muted);

    font-size: 11px;

    line-height: 1.5;
}


/* DETAIL PANEL */

.detail-panel {
    position: absolute;

    z-index: 22;

    right: 24px;
    top: 24px;

    width:
        min(360px, 30vw);

    padding: 18px;

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

    border-radius: 18px;

    background:
        rgba(3, 26, 19, .90);

    backdrop-filter:
        blur(14px);
}

.detail-panel h2 {
    margin:
        0 0 10px;

    font-size: 17px;
}

.detail-panel p {
    margin:
        6px 0;

    color:
        #bccfc5;

    font-size: 11px;

    line-height: 1.45;
}

.detail-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-top: 10px;
}

.detail-chip {
    padding:
        8px 9px;

    border:
        1px solid
        rgba(110, 227, 158, .17);

    border-radius: 10px;

    background:
        rgba(15, 68, 47, .26);

    color:
        #dcf4e6;

    font-size: 9px;
}

.warning {
    margin-top: 12px;

    padding: 10px;

    border:
        1px solid
        rgba(243, 200, 70, .38);

    border-radius: 11px;

    background:
        rgba(100, 73, 7, .17);

    color:
        #f7dfa0;

    font-size: 10px;

    line-height: 1.4;
}


/* SCIENTIFIC FLOW */

.scientific-strip {
    position: absolute;

    z-index: 25;

    left: 50%;
    bottom: 18px;

    transform:
        translateX(-50%);

    display: flex;
    align-items: center;

    gap: 8px;

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

    padding:
        9px 14px;

    overflow-x: auto;

    border:
        1px solid
        rgba(111, 230, 159, .22);

    border-radius: 999px;

    background:
        rgba(2, 25, 17, .92);

    color:
        #cce2d6;

    font-size: 9px;

    font-weight: 800;

    white-space: nowrap;
}

.scientific-strip span {
    color:
        var(--green);
}


/* TIMELINE */

.timeline {
    min-height: 84px;

    display: grid;

    grid-template-columns:
        55px 1fr 55px;

    align-items: center;

    gap: 12px;

    padding:
        9px 18px 12px;

    border-top:
        1px solid
        rgba(112,228,159,.17);

    background:
        rgba(3, 22, 16, .97);
}

.timeline button {
    width: 52px;

    font-size: 20px;
}

.timeline-center {
    min-width: 0;
}

.timeline-meta {
    display: flex;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;

    color:
        #b6c9bf;

    font-size: 10px;
}

.progress-track {
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

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

.progress-bar {
    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--cyan)
        );

    transition:
        width .35s ease;
}

.dots {
    display: flex;
    justify-content: center;

    gap: 5px;

    margin-top: 7px;
}

.dot {
    width: 7px;
    height: 7px;

    border: 0;

    padding: 0;

    border-radius: 50%;

    background:
        rgba(185, 210, 197, .22);

    cursor: pointer;
}

.dot.active {
    background:
        var(--green);

    box-shadow:
        0 0 0 4px
        rgba(113,237,162,.10);
}


/* MOBILE */

@media (max-width: 820px) {

    body {
        overflow: hidden;
    }

    .topbar {
        min-height: 70px;

        padding:
            9px 11px;
    }

    .brand-icon {
        width: 42px;
        height: 42px;
    }

    .brand small {
        display: none;
    }

    .top-actions button {
        padding:
            8px 9px;

        font-size: 11px;
    }

    .scene-copy {
        left: 10px;
        top: 10px;

        width:
            calc(100% - 20px);

        max-height:
            44%;

        overflow-y: auto;

        padding: 15px;

        border-radius: 16px;
    }

    h1 {
        font-size:
            clamp(27px, 9vw, 42px);
    }

    .lead {
        font-size: 12px;
    }

    .metric {
        margin-top: 11px;

        font-size: 25px;
    }

    .note {
        font-size: 10px;
    }

    .detail-panel {
        left: 10px;
        right: 10px;
        top: auto;
        bottom: 62px;

        width: auto;

        max-height: 34%;

        overflow-y: auto;

        padding: 12px;
    }

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

    .scientific-strip {
        display: none;
    }

    .timeline {
        min-height: 78px;

        padding:
            8px 10px;

        grid-template-columns:
            50px 1fr 50px;
    }

    .dots {
        gap: 4px;
    }

    .dot {
        width: 6px;
        height: 6px;
    }

}


/* SMALL MOBILE */

@media (max-width: 390px) {

    .brand strong {
        font-size: 15px;
    }

    .top-actions button {
        font-size: 10px;
    }

    .detail-panel {
        max-height: 31%;
    }

}