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

:root{
    --cream:#f2e6d9;
    --warm-gray:#ede3d7;
    --tan:#c9b8a8;
    --gold:#d4a574;
    --burgundy:#8b1c35;
    --deep-burgundy:#6b2d3e;
    --void:#1a0a12;
}

html{scroll-behavior:smooth}

body{
    background:var(--void);
    color:var(--cream);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    overflow-x:hidden;
    position:relative;
}

/* Scanlines overlay */
.scanlines{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1000;
    background:repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(26,10,18,0.15) 2px,
        rgba(26,10,18,0.15) 4px
    );
}

/* Waveform background layer */
.waveform-layer{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:0.3;
}

#waveform-svg{
    width:100%;
    height:100%;
}

#waveform-svg path{
    fill:none;
    stroke:var(--burgundy);
    stroke-width:1.5;
    opacity:0.6;
}

/* Grid overlay */
.grid-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(201,184,168,0.03) 1px,transparent 1px),
        linear-gradient(0deg,rgba(201,184,168,0.03) 1px,transparent 1px);
    background-size:60px 60px;
}

/* Panels */
.panel{
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    padding:4rem 2rem;
}

.panel-content{
    max-width:800px;
    width:100%;
    position:relative;
    z-index:2;
}

/* Typography */
.display-heading{
    font-family:'Chakra Petch',sans-serif;
    font-weight:600;
    font-size:clamp(2rem,6vw,4.5rem);
    letter-spacing:0.04em;
    line-height:1.05;
    text-transform:uppercase;
    color:var(--cream);
    margin-bottom:2rem;
}

.body-text{
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:300;
    font-size:clamp(1rem,1.8vw,1.25rem);
    line-height:1.7;
    color:var(--tan);
    margin-bottom:2rem;
}

.mono-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    color:var(--gold);
    text-transform:uppercase;
}

.mono-value{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.9rem;
    color:var(--cream);
    margin-left:0.5rem;
}

/* Data readouts */
.data-readout{
    display:flex;
    align-items:baseline;
    gap:1rem;
    padding:0.75rem 0;
    border-bottom:1px solid rgba(212,165,116,0.15);
}

/* Data grid */
.data-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;
    margin-top:2rem;
}

.data-cell{
    border:1px solid rgba(139,28,53,0.3);
    padding:1.5rem;
    position:relative;
    background:rgba(26,10,18,0.6);
}

.data-cell .mono-label{
    display:block;
    margin-bottom:1rem;
}

.mini-waveform{
    height:40px;
    position:relative;
    overflow:hidden;
}

.mini-waveform canvas{
    width:100%;
    height:100%;
}

/* Spectrum bar */
.spectrum-bar{
    height:4px;
    width:100%;
    margin-top:2rem;
    background:linear-gradient(90deg,var(--void),var(--burgundy),var(--gold),var(--burgundy),var(--void));
    border-radius:2px;
    position:relative;
    overflow:hidden;
}

.spectrum-bar::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
    animation:spectrumSweep 3s linear infinite;
}

@keyframes spectrumSweep{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(100%)}
}

/* Status block */
.status-block{
    margin-top:2rem;
    border:1px solid rgba(139,28,53,0.3);
    padding:2rem;
    background:rgba(26,10,18,0.7);
}

.status-row{
    display:flex;
    align-items:baseline;
    gap:1rem;
    padding:0.6rem 0;
    border-bottom:1px solid rgba(212,165,116,0.08);
}

.status-row:last-child{border-bottom:none}

.status-active{
    color:var(--gold);
    animation:blink 1.5s step-end infinite;
}

@keyframes blink{
    0%,100%{opacity:1}
    50%{opacity:0.3}
}

/* Reconstruction viz */
.reconstruction-viz{
    margin-top:2rem;
    height:200px;
    position:relative;
    border:1px solid rgba(139,28,53,0.3);
    background:rgba(26,10,18,0.5);
}

#recon-canvas{
    width:100%;
    height:100%;
    display:block;
}

/* Parallax depth via scroll */
#panel-signal .panel-content{
    opacity:0;
    transform:translateY(30px);
    animation:fadeInUp 1.2s ease forwards;
}

@keyframes fadeInUp{
    to{opacity:1;transform:translateY(0)}
}

/* Responsive */
@media(max-width:600px){
    .data-grid{grid-template-columns:1fr}
    .panel{padding:2rem 1rem}
}