:root{
--bg:#0d1117;--term:#161b22;--border:#30363d;
--text:#c9d1d9;--green:#3fb950;--blue:#58a6ff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
background:var(--bg);
display:flex;
align-items:center;
justify-content:center;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
color:var(--text);
}
.terminal{
width:min(860px,92vw);
border:1px solid var(--border);
border-radius:10px;
overflow:hidden;
background:var(--term);
box-shadow:0 20px 60px rgba(0,0,0,.45);
opacity:0;
animation:fade .25s forwards;
}
@keyframes fade{to{opacity:1}}
.titlebar{
height:42px;
display:flex;
align-items:center;
border-bottom:1px solid var(--border);
padding:0 14px;
color:#8b949e;
}
.dots span{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}
.red{background:#ff5f56}.yellow{background:#ffbd2e}.green{background:#27c93f}
.title{margin-left:10px}
.screen{padding:28px;white-space:pre-wrap;line-height:1.8;min-height:320px}
.prompt{color:var(--green)}
.host{color:var(--blue)}
.cursor{display:inline-block;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}