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

:root {
--bg:      #090c11;
--surface: #0e1318;
--border:  #1c2530;
--green:   #00d97e;
--cyan:    #56b8d4;
--text:    #c8d8e8;
--muted:   #4a6278;
}

body {
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: 'JetBrains Mono', monospace;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}

body::before {
content: '';
position: fixed;
inset: 0;
background-image: radial-gradient(circle, rgba(0,217,126,.07) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}

.top {
position: fixed;
top: 1.8rem;
left: 2rem;
right: 2rem;
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
letter-spacing: .14em;
text-transform: uppercase;
opacity: 0;
animation: up .5s ease .1s forwards;
}

.card {
width: 100%;
max-width: 560px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
overflow: hidden;
opacity: 0;
transform: translateY(16px);
animation: rise .6s cubic-bezier(.22,1,.36,1) .3s forwards;
}

.bar {
display: flex;
align-items: center;
gap: 7px;
padding: 11px 16px;
border-bottom: 1px solid var(--border);
background: #0a0e14;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.r { background: #d05252; } .y { background: #d0a452; } .g { background: #52b86a; }
.bar-title { margin: 0 auto; font-size: 11px; color: var(--muted); }

.body { padding: 2.2rem 2.4rem 2rem; }

.prompt { font-size: 12px; color: var(--muted); margin-bottom: 1.8rem; }
.prompt span { color: var(--green); margin-right: 6px; }

h1 {
font-family: 'Syne', sans-serif;
font-size: clamp(2rem, 7vw, 3rem);
font-weight: 800;
color: #e8f2ff;
line-height: 1.1;
letter-spacing: -.02em;
margin-bottom: 1.6rem;
}
h1 em { font-style: normal; color: var(--green); }

.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border: 1px solid rgba(0,217,126,.2);
border-radius: 3px;
background: rgba(0,217,126,.05);
font-size: 11px;
color: var(--green);
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 1.6rem;
}
.dot-live {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green);
animation: pulse 2s ease-in-out infinite;
}

.typing { font-size: 12px; color: var(--cyan); min-height: 20px; margin-bottom: 2rem; }
.cursor {
display: inline-block;
width: 2px; height: 13px;
background: var(--green);
margin-left: 1px;
vertical-align: middle;
animation: blink .85s step-end infinite;
}

hr { border: none; border-top: 1px solid var(--border); margin-bottom: 1.6rem; }

.footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .6rem;
font-size: 11px;
color: var(--muted);
letter-spacing: .08em;
}
.footer a { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--green); }
.links { display: flex; gap: 1.2rem; }

@keyframes up   { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

@media (max-width: 480px) {
.body { padding: 1.8rem 1.4rem 1.4rem; }
}