:root{
--bg: #0a0e0f;
--panel: #101614;
--border: #1e2b28;
--text-dim: #5c7a70;
--text: #d8f3e6;
--green: #39d98a;
--amber: #e8b339;
--red: #e85d5d;
}

* { box-sizing: border-box; }

body{
margin:0;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:
    radial-gradient(circle at 50% 0%, #0e1513 0%, #060908 70%);
font-family: ui-monospace, "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
padding: 40px 20px;
}

.frame{
width: 100%;
max-width: 860px;
}

.terminal{
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
box-shadow:
    0 0 0 1px rgba(57,217,138,0.04),
    0 20px 60px -20px rgba(0,0,0,0.8),
    0 0 40px -10px rgba(57,217,138,0.08);
}

.titlebar{
display:flex;
align-items:center;
gap:10px;
padding: 11px 14px;
background: #0d1412;
border-bottom: 1px solid var(--border);
}

.dots{ display:flex; gap:7px; }

.dot{
width:11px; height:11px;
border-radius:50%;
position:relative;
cursor:default;
}
.dot.red{ background: var(--red); }
.dot.amber{ background: var(--amber); }
.dot.green{ background: var(--green); }

.dot::after{
content: attr(data-label);
position:absolute;
top: 18px;
left: 50%;
transform: translateX(-50%) translateY(-4px);
background:#0d1412;
border:1px solid var(--border);
color: var(--text-dim);
font-size: 10px;
letter-spacing: 0.05em;
padding: 3px 6px;
border-radius: 4px;
white-space: nowrap;
opacity:0;
pointer-events:none;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.dot:hover::after{
opacity:1;
transform: translateX(-50%) translateY(0);
}

.path{
color: var(--text-dim);
font-size: 12.5px;
letter-spacing: 0.02em;
margin-left: 4px;
}
.path b{ color: var(--text); font-weight:500; }

.screen{
position:relative;
background:#000;
aspect-ratio: 16 / 9;
display:flex;
align-items:center;
justify-content:center;
}

.screen video{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

.screen::after{
content:"";
position:absolute; inset:0;
pointer-events:none;
background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.06) 3px
);
mix-blend-mode: multiply;
opacity: 0.5;
}

.placeholder{
color: var(--text-dim);
font-size: 13px;
text-align:center;
padding: 0 20px;
line-height:1.6;
}
.placeholder span{ color: var(--green); }

.caption{
padding: 16px 18px 20px;
border-top: 1px solid var(--border);
}

.prompt{
font-size: 13px;
color: var(--text-dim);
display:flex;
flex-wrap:wrap;
gap: 6px;
align-items:center;
}
.prompt .user{ color: var(--green); }
.prompt .at{ color: var(--text-dim); }
.prompt .host{ color: var(--green); }
.prompt .sep{ color: var(--text-dim); }
.prompt .line{ color: var(--text); }

.cursor{
display:inline-block;
width: 7px;
height: 14px;
background: var(--green);
margin-left: 2px;
animation: blink 1s steps(1) infinite;
vertical-align: -2px;
}
@keyframes blink{
0%, 49%{ opacity: 1; }
50%, 100%{ opacity: 0; }
}

.meta{
margin-top: 12px;
display:flex;
gap: 18px;
flex-wrap: wrap;
font-size: 11.5px;
color: var(--text-dim);
letter-spacing: 0.03em;
}
.meta b{ color: var(--text); font-weight: 500; }