:root{
    --bg:#05050b;
    --panel:#0b0b16;
    --brand:#7a5cff;
    --brand2:#a997ff;
    --text:#e8e9ff;
    --muted:#7a7b9f;
}

*{ box-sizing:border-box }

body{
    margin:0;
    width:100vw;
    height:100vh;
    background:radial-gradient(circle at top, #141428, var(--bg));
    font-family:Consolas, monospace;
    color:var(--text);
    overflow:hidden;
}

#screen{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

#terminal{
    position:relative;
    width:820px;
    max-width:95%;
    padding:26px;
    background:linear-gradient(180deg,#0e0e1c,var(--panel));
    border-radius:16px;
    border:1px solid rgba(122,92,255,.25);
    box-shadow:0 0 80px rgba(122,92,255,.35);
    overflow:hidden;
}

.glow{
    position:absolute;
    inset:-40%;
    background:radial-gradient(circle, rgba(122,92,255,.18), transparent 65%);
    animation:breath 6s ease-in-out infinite;
}

@keyframes breath{
    0%,100%{opacity:.3}
    50%{opacity:.6}
}

.noise{
    position:absolute;
    inset:0;
    opacity:.04;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

#header{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
}

.logo{
    font-size:20px;
    color:var(--brand2);
    font-weight:700;
}

.subtitle{
    font-size:11px;
    color:var(--muted);
    letter-spacing:1px;
}

#status{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:#7dff9b;
}

.dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#7dff9b;
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{opacity:.4}
    50%{opacity:1}
}

#log{
    min-height:220px;
    font-size:13px;
    color:var(--muted);
}

.hint{ opacity:.6 }

#progress{
    height:8px;
    background:#121228;
    border-radius:6px;
    overflow:hidden;
    margin-top:16px;
}

#bar{
    width:40%;
    height:100%;
    background:linear-gradient(90deg,var(--brand),var(--brand2));
    animation:idlebar 4s ease-in-out infinite;
}

@keyframes idlebar{
    0%,100%{width:35%}
    50%{width:55%}
}

#footer{
    margin-top:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    color:var(--muted);
}

#state{
    letter-spacing:2px;
    color:var(--brand2);
}

#cursor{
    width:8px;
    height:16px;
    background:var(--text);
    animation:blink 1s steps(2,end) infinite;
}

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

.scanlines{
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:100% 3px;
    opacity:.12;
}

.vignette{
    position:absolute;
    inset:0;
    box-shadow:inset 0 0 120px rgba(0,0,0,.75);
}