@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

:root{
  --void:#000000;
  --panel:#050B05;
  --line:#0F3D1B;
  --green-dim:#2FA83E;
  --green:#3FF35A;
  --green-bright:#B6FFC0;
  --amber:#3FF35A;
  --red-fail:#FF4D4D;
}

*{box-sizing:border-box;}
html,body{
  height:100%;
  background:#000;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
html.from-waypoint .frame,
html.from-waypoint .glitch-corner{
  opacity:0;
  animation:waypoint-arrive 0.65s ease 0.12s forwards;
}
@keyframes waypoint-arrive{
  to{opacity:1;}
}
body{
  margin:0;
  background:var(--void);
  color:var(--green-dim);
  font-family:'Share Tech Mono', monospace;
  line-height:1.5;
  position:relative;
  overflow-x:hidden;
}

canvas#rain{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  z-index:0;
  opacity:0.45;
}

.scanlines{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,255,70,0.025) 3px,
    rgba(0,0,0,0) 4px
  );
}

.frame{
  position:relative;
  z-index:1;
  max-width:1080px;
  margin:0 auto;
  padding:32px 28px 90px 28px;
}

header{
  border:1px solid var(--line);
  background:rgba(2,10,2,0.82);
  padding:20px 24px;
  margin-bottom:26px;
  backdrop-filter: blur(1px);
  overflow:visible;
}
.brand-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.brand-row h1{
  width:max-content;
  max-width:100%;
  margin:0;
  font-family:'VT323', monospace;
  font-size:34px;
  font-weight:400;
  letter-spacing:2px;
  line-height:1.05;
  color:var(--green-bright);
  text-shadow:0 0 6px rgba(63,243,90,0.55), 0 0 18px rgba(63,243,90,0.25);
}
.brand-row .path{
  font-size:12px;
  color:var(--green-dim);
  opacity:0.8;
}
.whisper-line{
  font-family:'Share Tech Mono', monospace;
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.25;
  color:var(--green-dim);
  text-shadow:none;
  overflow-wrap:anywhere;
}
.cursor{
  display:inline-block;
  width:8px; height:14px;
  background:var(--green);
  margin-left:4px;
  animation:blink 1s steps(1) infinite;
  vertical-align:-2px;
}
@keyframes blink{50%{opacity:0;}}

nav{display:flex; gap:0; border-top:1px solid var(--line); padding-top:14px;}

.page{display:none;}
.page.active{display:block;}

.page-head{margin-bottom:28px;}
.page-head h2{
  font-family:'VT323', monospace;
  font-size:28px;
  color:var(--green-bright);
  letter-spacing:1px;
  margin:0 0 8px 0;
  text-shadow:0 0 6px rgba(63,243,90,0.4);
}
.page-head h2::before{content:"> ";}
.page-head p{font-size:13px; color:var(--green-dim); max-width:600px; margin:0;}
.enchant-line{
  letter-spacing:0.14em;
  color:#fff;
  text-shadow:0 0 4px rgba(255,255,255,0.45);
}

.route{display:flex; gap:16px;}
.zone{
  flex:1;
  border:1px solid var(--line);
  background:rgba(2,10,2,0.7);
  padding:16px;
}
.zone-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
  margin-bottom:14px;
}
.zone-head h3{
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin:0;
  color:var(--green-bright);
}
.zone-count{font-size:12px; color:var(--green-dim); opacity:0.7;}

.stop{
  border:1px solid var(--line);
  padding:12px 14px;
  margin-bottom:12px;
  position:relative;
  background:rgba(0,0,0,0.4);
}
.stop.progress{border-color:var(--green); box-shadow:0 0 10px rgba(63,243,90,0.15) inset;}
.stop.done{opacity:0.55;}
.stop h4{
  font-family:'Share Tech Mono', monospace;
  font-size:14px;
  color:var(--green-bright);
  margin:0 0 6px 0;
  letter-spacing:0.3px;
}
.stop p{font-size:12px; color:var(--green-dim); margin:0 0 8px 0;}
.stop .stamp{font-size:10.5px; color:var(--green-dim); opacity:0.6;}
.stop .stamp::before{content:"// ";}

.glitch-corner{
  position:fixed;
  top:14px;
  right:14px;
  z-index:10;
}
@media (max-width:720px){
  .frame{padding:20px 12px 80px;}
  header{padding:14px 12px;}
  nav{
    flex-wrap:nowrap;
    justify-content:center;
    gap:0;
  }
  .glitch-corner{ position:static; margin:0 0 18px 0; text-align:right; }
  .route{flex-direction:column;}
}

.lock-note{
  margin-top:28px;
  font-size:11px;
  color:var(--green-dim);
  opacity:0.6;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.lock-note::before{content:"root@waypoint:~$ ";}

.roadmap-lewstar{
  position:fixed;
  left:14px;
  bottom:12px;
  z-index:3;
  width:auto;
  height:72px;
  opacity:1;
  transition:filter 0.25s ease, opacity 0.25s ease;
}
.roadmap-lewstar:hover{
  opacity:0.38;
  filter:invert(1) sepia(1) saturate(500%) hue-rotate(80deg) brightness(1.15);
}