:root{
  --bg:#000;
  --white:#f0f0e8;
  --green:#79ff4d;
  --dim:#777;
}
*{box-sizing:border-box}
html{background:#000;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:#000;
  color:var(--white);
  font-family:"Courier New",Courier,monospace;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      #fff 3px,
      transparent 4px
    );
}
.page{min-height:100vh;display:flex;flex-direction:column}
.home{
  width:min(1180px,94vw);
  margin:0 auto;
  padding:5vh 0 4vh;
  text-align:center;
}
.ascii{
  margin:0;
  color:#6d6d6d;
  font-size:clamp(7px,1.1vw,13px);
  line-height:1.05;
  white-space:pre;
  overflow:hidden;
}
.identity{margin:5vh 0 7vh}
.small-label{
  color:var(--green);
  font-size:12px;
  letter-spacing:.16em;
  margin-bottom:20px;
}
h1{
  margin:0;
  font-size:clamp(42px,8vw,100px);
  line-height:.95;
  letter-spacing:.07em;
  font-weight:700;
  text-shadow:0 0 14px rgba(121,255,77,.16);
}
.sub{
  margin-top:22px;
  color:#aaa;
  font-size:clamp(10px,1.4vw,14px);
  letter-spacing:.12em;
}
.ascii-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px 22px;
  align-items:stretch;
  margin:4vh auto 5vh;
  max-width:1000px;
}
.nav-item{
  border:1px solid #252525;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:all .18s ease;
  padding:18px 10px;
}
.nav-item:hover{
  border-color:var(--green);
  background:rgba(121,255,77,.035);
  transform:translateY(-3px);
}
.nav-item pre{
  margin:0 0 15px;
  font-size:clamp(5px,.76vw,9px);
  line-height:1.0;
}
.nav-item span{
  font-weight:700;
  font-size:16px;
  letter-spacing:.16em;
}
.green span,.green pre{color:var(--green)}
.white span,.white pre{color:var(--white)}
.wide{grid-column:1/-1}
.wide pre{font-size:clamp(4px,.66vw,8px)}
.bottom{
  color:#4c4c4c;
  line-height:1.1;
  margin-top:3vh;
}
footer{
  margin-top:auto;
  border-top:1px solid #1f1f1f;
  padding:16px 3vw;
  display:flex;
  justify-content:space-between;
  color:#555;
  font-size:10px;
  letter-spacing:.12em;
}
.section{
  width:min(1000px,92vw);
  margin:0 auto;
  padding:8vh 0;
}
.back{
  color:var(--green);
  font-size:12px;
  text-decoration:none;
  letter-spacing:.1em;
}
.back:hover{text-decoration:underline}
.section h1{
  margin:70px 0 18px;
  font-size:clamp(45px,9vw,100px);
}
.section .intro{
  color:#999;
  line-height:1.7;
  max-width:650px;
}
.rule{border-top:1px solid #222;margin:55px 0}
.placeholder{
  border:1px dashed #333;
  padding:70px 30px;
  text-align:center;
  color:#555;
}
.placeholder strong{display:block;color:var(--green);margin-bottom:10px}
@media(max-width:700px){
  .ascii-nav{grid-template-columns:1fr}
  .wide{grid-column:auto}
  .nav-item{min-height:160px}
  .ascii.top{display:none}
  .identity{margin-top:4vh}
  footer{flex-direction:column;gap:8px}
}