:root{
  --bg:#0f1724;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0ea5a4;
  --gap:24px;
  font-family: "Fira Code", "Source Code Pro", monospace;
}

html{height:100%;margin:0}

body{
  background:var(--bg);
  color:var(--card);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  margin:0;
  min-height:100%;
}

/* Container split */
.split{
  width:100%;
  max-width:1100px;
  height:70vh;
  overflow:hidden;
  display:flex;
}

/* Left pane: image/illustration */
.left{
  flex:1;
  min-width:320px;
  min-height: 300px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.illustration{
  width:100%;
  max-width: 470px;
  display: block;
}

/* Right pane: content */
.right{
  padding: 20px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:15px;
}

h1{font-size:25px;margin:0 0 8px 0;color:var(--card);line-height:1.05;}
p.lead{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.lead a{color:var(--accent);text-decoration:none}


/* Responsive: stack on small screens */
@media (max-width:820px){
  .split{flex-direction:column;height:auto}
  h1{font-size:22px}
}

/* Small decorative footer */
.foot{position:absolute;left:16px;bottom:12px;color:rgba(255,255,255,0.06);font-size:12px}
/* Matrix rain animation */
.matrix-rain{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  font-family:"Fira Code", monospace;
  color:#0f0;
  opacity:0.18;
  font-size:22px;
  line-height:22px;
  white-space:nowrap;
  animation:rain 25s linear infinite;
}

@keyframes rain{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(100%)}
}

:root{
  --bg:#000000;
  --card:#ccffcc;
  --muted:#66aa66;
  --accent:#00ff88;
}