:root{
  --bg:#060606;
  --panel:#111111;
  --border:#2a2a2a;
  --text:#eaeaea;
  --muted:#9a9a9a;
  --accent:#d30d0d;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, system-ui, sans-serif;
  position:relative;
  overflow-x:hidden;
}

/* flying text background */

.bg-stream{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
  background:#060606;
}

.bg-line{
  position:absolute;
  white-space:nowrap;
  font-family:"Share Tech Mono", monospace;
  font-size:14px;
  color:rgba(255,255,255,0.06);
  letter-spacing:2px;
  animation:bgFly linear infinite;
}

.bg-line:nth-child(1){
  top:20%;
  animation-duration:28s;
}

.bg-line:nth-child(2){
  top:50%;
  animation-duration:34s;
}

.bg-line:nth-child(3){
  top:75%;
  animation-duration:40s;
}

@keyframes bgFly{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(100vw); }
}

/* layout */

.wrap{
  max-width:1000px;
  margin:auto;
  padding:24px;
}

/* header */

.brand h1{
  margin:0;
  font-size:2rem;
  font-weight:800;
  letter-spacing:1px;
}

.brand p{
  margin:6px 0 0;
  color:var(--muted);
  font-family:"Share Tech Mono", monospace;
}

.nav{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.nav a{
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--border);
  padding:6px 12px;
  font-size:.9rem;
  transition:.15s;
}

.nav a:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* panels */

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  padding:20px;
  margin-top:18px;
}

.panel h2,
.panel h3{
  margin-top:0;
}

/* grid */

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

/* tags */

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.tags span{
  border:1px solid var(--border);
  padding:6px 10px;
  font-family:"Share Tech Mono", monospace;
}

/* links */

.link-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:12px;
}

.link-grid a{
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--border);
  padding:14px;
  display:flex;
  gap:10px;
  align-items:center;
  transition:.15s;
}

.link-grid a:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* contact */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:12px;
}

.contact-card{
  border:1px solid var(--border);
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
  font-family:"Share Tech Mono", monospace;
}

.contact-title{
  font-size:.85rem;
  color:var(--muted);
}

.contact-value{
  font-weight:600;
}

.contact-note{
  font-size:.8rem;
  color:var(--muted);
  margin-left:6px;
}

.contact-tip{
  margin-top:12px;
  color:var(--muted);
  font-family:"Share Tech Mono", monospace;
}

/* footer */

.footer{
  margin-top:40px;
  color:var(--muted);
}

/* loader */

.loader{
  position:fixed;
  inset:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.loader-box{
  width:260px;
  text-align:center;
  font-family:"Share Tech Mono", monospace;
}

.loader-bar{
  height:4px;
  background:var(--accent);
  animation:load 1.2s infinite linear;
  margin-bottom:12px;
}

@keyframes load{
  0%{width:0}
  50%{width:100%}
  100%{width:0}
}

/* reveal */

.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:.5s;
}

.reveal.show{
  opacity:1;
  transform:none;
}

/* responsive */

@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .link-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}