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

body{
    background: radial-gradient(circle at center,#0b1220 0%,#050a14 60%,#02040a 100%);
    color:#8fbaff;
    font-family:"Courier New",monospace;
    height:100vh;
    overflow:hidden;
    user-select:none;
}

canvas{
    position:absolute;
    top:0;
    left:0;
    opacity:.22;
}

/* Boot screen */
#boot{
    position:absolute;
    width:100%;
    height:100%;
    background:#000;
    padding:40px;
    font-size:14px;
    z-index:5;
    transition:opacity 1s ease;
    letter-spacing:1px;
}

/* Main content */
#main{
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 1.2s ease;
}

.center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    letter-spacing:2px;
    z-index:2;
}

.title{
    font-size:2.4rem;
    text-shadow:0 0 14px rgba(120,170,255,.45);
    animation:pulse 6s ease-in-out infinite;
}

.subtitle{
    margin-top:14px;
    font-size:.9rem;
    opacity:.55;
}

.status{
    margin-top:14px;
    font-size:.85rem;
    opacity:.38;
}

@keyframes pulse{
    0%,100%{text-shadow:0 0 14px rgba(120,170,255,.45);}
    50%{text-shadow:0 0 22px rgba(120,170,255,.65);}
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at center,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.35) 100%);
}