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

html,
body{

    width:100%;
    height:100%;

    font-family:
    Inter,
    Segoe UI,
    sans-serif;

    background:#08131F;

    color:#F8FAFC;

    overflow-x:hidden;

}

body{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    padding:40px;

}

/* ===========================
   Background
=========================== */

#stars{

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.18) 1px,transparent 1px),
    radial-gradient(circle at 80% 30%,rgba(255,255,255,.15) 1px,transparent 1px),
    radial-gradient(circle at 60% 80%,rgba(255,255,255,.18) 1px,transparent 1px),
    radial-gradient(circle at 30% 70%,rgba(255,255,255,.12) 1px,transparent 1px);

    background-size:
    240px 240px;

    animation:
    starsMove 90s linear infinite;

    z-index:-2;

}

@keyframes starsMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-240px);

    }

}

/* ===========================
   Main
=========================== */

.container{

    width:100%;

    max-width:900px;

}

/* ===========================
   Header
=========================== */

.hero{

    text-align:center;

    margin-bottom:35px;

}

.logo{

    font-size:72px;

    margin-bottom:10px;

    animation:
    float 3s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero h1{

    font-size:48px;

    font-weight:700;

    margin-bottom:12px;

}

.subtitle{

    color:#94A3B8;

    font-size:18px;

}
/* ===========================
   STATUS
=========================== */

.status{

    width:220px;

    margin:0 auto 35px;

    padding:14px 24px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    background:#111827;

    border:1px solid rgba(255,255,255,.05);

    border-radius:14px;

    box-shadow:0 0 25px rgba(0,255,136,.08);

}

.status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#00ff88;

    box-shadow:
    0 0 12px #00ff88,
    0 0 22px #00ff88;

    animation:pulse 1.8s infinite;

}

.status span{

    color:#00ff88;

    font-weight:700;

    letter-spacing:2px;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

    }

}

/* ===========================
   TERMINAL
=========================== */

.terminal{

    background:#0b0f14;

    border-radius:16px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:
    0 0 45px rgba(0,255,136,.08);

    margin-bottom:35px;

}

.terminal-top{

    height:46px;

    background:#161b22;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

}

.buttons{

    display:flex;

    gap:8px;

}

.buttons span{

    width:12px;

    height:12px;

    border-radius:50%;

}

.red{

    background:#ff5f57;

}

.yellow{

    background:#febc2e;

}

.green{

    background:#28c840;

}

.terminal-title{

    color:#94A3B8;

    font-size:14px;

}

.terminal-body{

    padding:28px;

}

#terminal-output{

    color:#00ff88;

    font-family:

    Consolas,

    monospace;

    line-height:1.8;

    white-space:pre-wrap;

    margin-bottom:20px;

}

.input-line{

    display:flex;

    align-items:center;

    gap:10px;

}

.prompt{

    color:#00ff88;

    font-family:Consolas,monospace;

}

#terminal{

    flex:1;

    background:none;

    border:none;

    outline:none;

    color:white;

    font-size:16px;

    font-family:Consolas,monospace;

}
/* ===========================
   INFO CARDS
=========================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-bottom:40px;

}

.card{

    background:#111827;

    border-radius:16px;

    padding:22px;

    border:1px solid rgba(255,255,255,.05);

    transition:.25s;

    box-shadow:0 0 20px rgba(0,255,136,.05);

}

.card:hover{

    transform:translateY(-6px);

    border-color:#00ff88;

    box-shadow:
    0 0 30px rgba(0,255,136,.20);

}

.card-title{

    color:#94A3B8;

    font-size:14px;

    margin-bottom:12px;

    text-transform:uppercase;

    letter-spacing:2px;

}

.card-value{

    font-size:24px;

    font-weight:700;

    color:#00ff88;

}

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

footer{

    text-align:center;

    color:#64748B;

    font-size:14px;

    margin-top:20px;

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#08131F;

}

::-webkit-scrollbar-thumb{

    background:#00ff88;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#35ff9d;

}

/* ===========================
   SELECTION
=========================== */

::selection{

    background:#00ff88;

    color:#08131F;

}

/* ===========================
   RESPONSIVE
=========================== */

@media (max-width:768px){

.hero h1{

    font-size:36px;

}

.logo{

    font-size:56px;

}

.subtitle{

    font-size:16px;

}

.terminal-body{

    padding:20px;

}

.cards{

    grid-template-columns:1fr;

}

.status{

    width:100%;

}

body{

    padding:20px;

}

}

/* ===========================
   SMALL GLOW
=========================== */

.hero h1{

    text-shadow:
    0 0 12px rgba(0,255,136,.15);

}

.logo{

    filter:drop-shadow(0 0 18px rgba(0,255,136,.25));

}

.status{

    backdrop-filter:blur(10px);

}

.card{

    backdrop-filter:blur(10px);

}

.terminal{

    backdrop-filter:blur(8px);

}

.matrix-mode{

    filter:hue-rotate(120deg);

    transition:.3s;

}

.logo img{
    width:90px;
    height:90px;
    display:block;
    margin:auto;
}

@keyframes shake{

0%{transform:translate(0,0);}
20%{transform:translate(-2px,2px);}
40%{transform:translate(2px,-2px);}
60%{transform:translate(-2px,-2px);}
80%{transform:translate(2px,2px);}
100%{transform:translate(0,0);}

}

.shake{

animation:shake .25s infinite;

}