*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
    background:#080c10;
    color:#e8edf2;
    font-family:'Inter',sans-serif;
    font-size:1rem;
    line-height:1.7;
    font-weight:300;
    overflow-x:hidden;
}

h1,h2,h3{
    font-family:'IBM Plex Mono',monospace;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.green{color:#00e5a0}
.red{color:#e04040}
.amber{color:#f0a830}

/* HUD FRAME */
.hud-frame{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:100;
    border:1px solid #00e5a0;
    margin:8px;
}
.hud-edge{
    position:absolute;
    display:flex;
    align-items:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.6rem;
    letter-spacing:0.15em;
    color:#00e5a0;
    opacity:0.6;
    font-variant-numeric:tabular-nums;
}
.hud-top{top:0;left:0;right:0;justify-content:space-between;padding:4px 12px}
.hud-bottom{bottom:0;left:0;right:0;justify-content:space-between;padding:4px 12px}
.hud-left{
    top:0;bottom:0;left:0;
    flex-direction:column;
    justify-content:space-around;
    padding:40px 6px;
}
.hud-right{
    top:0;bottom:0;right:0;
    flex-direction:column;
    justify-content:space-around;
    padding:40px 6px;
}
.hud-tick{
    display:block;
    width:8px;height:1px;
    background:#00e5a0;
}
.hud-label{
    text-transform:uppercase;
}

/* PANELS */
.panels{
    scroll-snap-type:y mandatory;
    overflow-y:auto;
    height:100vh;
}
.panel{
    min-height:100vh;
    scroll-snap-align:start;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4rem 3rem;
    position:relative;
}

/* HERO */
.panel-hero{
    flex-direction:column;
    text-align:center;
}
.telomere-strand{margin-bottom:2rem}
.strand-svg{
    width:min(600px,90vw);
    height:200px;
}
.hex{
    stroke-dasharray:200;
    stroke-dashoffset:200;
    animation:drawHex 1.5s ease forwards;
}
.hex:nth-child(2){animation-delay:0.15s}
.hex:nth-child(3){animation-delay:0.3s}
.hex:nth-child(4){animation-delay:0.45s}
.hex:nth-child(5){animation-delay:0.6s}
.hex:nth-child(6){animation-delay:0.75s}
.hex:nth-child(7){animation-delay:0.9s}

@keyframes drawHex{
    to{stroke-dashoffset:0}
}

.hero-title{
    font-size:clamp(2.5rem,5vw,5rem);
    margin-bottom:0.5rem;
    color:#e8edf2;
}
.hero-sub{
    color:#7a8a9e;
    font-size:1rem;
    max-width:500px;
}

/* OBSERVATION PANEL */
.observation-panel{
    max-width:700px;
    width:100%;
    background:rgba(15,25,35,0.8);
    border:1px solid rgba(0,229,160,0.15);
    padding:3rem;
    position:relative;
}
.observation-panel::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:40px;height:40px;
    border-top:2px solid #00e5a0;
    border-left:2px solid #00e5a0;
}
.observation-panel::after{
    content:'';
    position:absolute;
    bottom:0;right:0;
    width:40px;height:40px;
    border-bottom:2px solid #00e5a0;
    border-right:2px solid #00e5a0;
}

.panel-heading{
    font-size:clamp(1.4rem,3vw,2rem);
    margin-bottom:1.5rem;
    color:#e8edf2;
}
.label-tag{
    color:#00e5a0;
    font-size:0.8rem;
    margin-right:0.5rem;
    opacity:0.7;
}

.observation-panel p{
    color:#7a8a9e;
    line-height:1.8;
}

/* METRICS GRID */
.metrics-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
    margin-top:1.5rem;
}
.metric-card{
    background:rgba(0,229,160,0.04);
    border:1px solid rgba(0,229,160,0.1);
    padding:1.5rem;
    text-align:center;
}
.metric-value{
    font-family:'IBM Plex Mono',monospace;
    font-size:2.5rem;
    font-weight:600;
    color:#e8edf2;
    display:block;
    line-height:1.2;
}
.metric-unit{
    font-size:1rem;
    opacity:0.6;
}
.metric-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:#7a8a9e;
    margin-top:0.5rem;
    display:block;
}

/* PROCESS STEPS */
.process-steps{
    display:flex;
    flex-direction:column;
    gap:2rem;
    margin-top:1.5rem;
}
.step{
    padding-left:2rem;
    border-left:2px solid rgba(0,229,160,0.2);
    position:relative;
}
.step-num{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    color:#00e5a0;
    position:absolute;
    left:-0.75rem;
    top:0;
    background:#080c10;
    padding:0.2rem 0.3rem;
}
.step h3{
    font-size:1rem;
    margin-bottom:0.3rem;
    color:#e8edf2;
}
.step p{
    font-size:0.9rem;
    color:#7a8a9e;
}

/* FOOTER */
.panel-footer{
    min-height:auto;
    padding:3rem;
}
.footer-text{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.8rem;
    color:#7a8a9e;
    text-align:center;
    margin-bottom:0.5rem;
}
.footer-seq{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:#2874a6;
    text-align:center;
    letter-spacing:0.2em;
}

/* MOBILE */
@media(max-width:640px){
    .hud-frame{margin:4px}
    .panel{padding:3rem 1.5rem}
    .observation-panel{padding:2rem 1.5rem}
    .metrics-grid{grid-template-columns:1fr}
    .hud-left,.hud-right{display:none}
}