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


body{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:30px 20px;

background:#05070d;

color:#e6edf3;

font-family:'Inter',sans-serif;

overflow-x:hidden;

overflow-y:auto;

}



.background{

position:fixed;

inset:0;

z-index:0;


background:

radial-gradient(
circle at 15% 20%,
rgba(37,99,235,.35),
transparent 35%
),


radial-gradient(
circle at 85% 80%,
rgba(34,197,94,.18),
transparent 35%
),


linear-gradient(
135deg,
#05070d,
#090d18
);

}





.window{

position:relative;

z-index:2;

width:min(900px,100%);


background:

rgba(13,17,23,.92);


backdrop-filter:blur(20px);


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


border-radius:16px;


overflow:hidden;


box-shadow:

0 40px 100px rgba(0,0,0,.65);


}




.topbar{

height:42px;


background:#161b22;


display:flex;


align-items:center;


justify-content:center;


position:relative;


}





.dots{

position:absolute;

left:18px;

display:flex;

gap:8px;

}



.dots span{

width:12px;

height:12px;

border-radius:50%;

}



.dots span:nth-child(1){

background:#ff5f57;

}


.dots span:nth-child(2){

background:#febc2e;

}


.dots span:nth-child(3){

background:#28c840;

}





.filename{

font-family:'JetBrains Mono',monospace;

font-size:13px;

color:#8b949e;

}




.content{

padding:30px 42px 25px;

}




.boot{

font-family:'JetBrains Mono',monospace;

font-size:14px;

line-height:1.8;

color:#8b949e;

}



.ready{

color:#39d353;

}




.workspace{

display:none;

}




.command{

font-family:'JetBrains Mono',monospace;

color:#8b949e;

}



.command span{

color:#39d353;

}





h1{

font-size:clamp(34px,5vw,52px);

letter-spacing:-2px;

margin:12px 0 5px;

}



h2{

font-family:'JetBrains Mono',monospace;

font-size:18px;

font-weight:500;

color:#58a6ff;

margin-bottom:8px;

}



.position{

font-family:'JetBrains Mono',monospace;

font-size:14px;

color:#c9d1d9;

margin-bottom:18px;

}





.companies{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:22px;

}



.companies a{


font-family:'JetBrains Mono',monospace;


font-size:12px;


padding:7px 13px;


border-radius:20px;


background:#161b22;


border:1px solid #30363d;


color:#8b949e;


text-decoration:none;


transition:.3s;


}



.companies a::before{

content:"[ ";

color:#39d353;

}



.companies a::after{

content:" ]";

color:#39d353;

}




.companies a:hover{


color:#58a6ff;


border-color:#58a6ff;


background:#0d1117;


transform:translateY(-2px);


}







.status-box{


display:flex;


align-items:center;


gap:15px;


padding:15px;


background:#161b22;


border:1px solid #30363d;


border-radius:12px;


}



.status-light{


width:10px;


height:10px;


background:#39d353;


border-radius:50%;


box-shadow:0 0 15px #39d353;


}





.status-info{

flex:1;

}




.label{

font-size:11px;

color:#8b949e;

}



#status{

font-family:'JetBrains Mono',monospace;

font-size:13px;

}





.clock{


margin-left:auto;


text-align:right;


font-family:'JetBrains Mono',monospace;


font-size:13px;


color:#8b949e;


}







.editor{


margin-top:18px;


padding:16px;


background:#010409;


border:1px solid #21262d;


border-radius:12px;


font-family:'JetBrains Mono',monospace;


font-size:13px;


line-height:1.7;


overflow-x:auto;


}





.comment{

color:#8b949e;

}



.indent{

padding-left:20px;

}



.blue{

color:#58a6ff;

}


.green{

color:#7ee787;

}


.yellow{

color:#d29922;

}





.typing{

margin-top:18px;


font-family:'JetBrains Mono',monospace;


font-size:13px;


color:#8b949e;


}



.cursor{

animation:blink .8s infinite;

}



@keyframes blink{

50%{

opacity:0;

}

}







.bottom{


min-height:32px;


background:#161b22;


display:flex;


justify-content:flex-end;


align-items:center;


flex-wrap:wrap;


gap:18px;


padding:8px 18px;


font-family:'JetBrains Mono',monospace;


font-size:12px;


color:#8b949e;


}







@media(max-width:700px){


body{

padding:20px 12px;

align-items:flex-start;

}



.window{

width:100%;

margin:20px 0;

}



.content{

padding:24px 16px;

}



h1{

font-size:34px;

}



h2{

font-size:15px;

}



.companies{

gap:7px;

}



.companies a{

font-size:10px;

padding:6px 10px;

}



.status-box{

flex-direction:column;

align-items:flex-start;

}



.clock{

margin-left:0;

text-align:left;

}



.editor{

font-size:11px;

}



.bottom{

justify-content:center;

font-size:10px;

gap:10px;

}


}