*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
:root{
    --text-light:#F5F5F0;
    --text-dark: #0d0d0d;
    --dark:#0d0d0d;
    --lime:#C8FF00;
    --border-dark:rgba(255,255,255,0.08);
}

body{
    font-family: 'Space Grotesk', sans-serif;
    background: var(--dark);
    color: var(--text-light);
    /* overflow: hidden; */
    cursor: none;
}
#cursor{
    width: 12px;
    height: 12px;
    background: var(--lime);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition:width 0.2s,height 0.2s;
    transform:translate(-50%,-50%);
}
#cursor-ring{
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--lime);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%,-50%);
    opacity: 0.4;
}

.hero-terminal{
  position: absolute;
  top: 35%; 
  left: 60%;
  transform: translate(-60%,-62%);
  width: min(420px,80%);
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.04);
  animation: term-float 6s ease-in-out infinite;
  z-index: 0;
}

@keyframes term-float{
  0%,100%{transform:translate(-60%,-62%) translateY(0)}
  50%{transform:translate(-60%,-62%) translateY(-12px)}
}
.ht-bar{
  display:flex;align-items:center;gap:6px;
  padding:0.65rem 1rem;
  background:#1a1a1a;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.ht-dot{width:11px;height:11px;border-radius:50%}
.ht-filename{
  font-family:'Space Mono',monospace;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  margin-left: auto;
  letter-spacing: 0.05em;
}
.ht-body{padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:4px}
.ht-line{
  font-family:'Space Mono',monospace;
  font-size:0.72rem;line-height:1.7;
  white-space:nowrap;overflow:hidden;
  width:0;
  animation:type-in 0.5s steps(30,end) forwards;
}


/* stagger each line */
.ht-line:nth-child(1){animation-delay:0.3s}
.ht-line:nth-child(2){animation-delay:0.9s}
.ht-line:nth-child(3){animation-delay:1.5s}
.ht-line:nth-child(4){animation-delay:2.1s}
.ht-line:nth-child(5){animation-delay:2.7s}
.ht-line:nth-child(6){animation-delay:3.3s}
.ht-line:nth-child(7){animation-delay:3.9s}
.ht-line:nth-child(8){animation-delay:4.5s}
.ht-line:nth-child(9){animation-delay:5.1s}
@keyframes type-in{to{width:100%}}


/* cursor blink on last line */
.ht-line:last-child::after{
  content:'█';color:var(--lime);
  animation:blink 1s step-end infinite;
  font-size:0.65rem;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}


/* syntax colours */
.ht-kw{color:#c792ea}
.ht-fn{color:#82aaff}
.ht-str{color:var(--lime)}
.ht-cmt{color:#546e7a;font-style:italic}
.ht-num{color:#f78c6c}
.ht-var{color:#eefff7}

/* dot-grid background on hero-left */
.hero-left{
  background-image:radial-gradient(rgba(255,255,255,0.07) 1px,transparent 1px);
  background-size:28px 28px;
}