:root{ --bg:#020202; --fg:#ccc; --accent:#4a6; --dim:#444; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:"Courier New",monospace; overflow-x:hidden; }

/* HERO */
.hero{ position:relative; height:100vh; min-height:500px; background:#010101; overflow:hidden; }
canvas{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }

.scanlines{ position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.15) 50%); background-size:100% 4px; pointer-events:none; z-index:5; opacity:0.4; }
.vignette{ position:absolute; inset:0; background:radial-gradient(circle, transparent 55%, #000 120%); pointer-events:none; z-index:6; }

.ui{ position:absolute; top:20px; left:20px; z-index:20; }
.back-btn{ text-decoration:none; color:var(--accent); border:1px solid var(--accent); padding:6px 12px; background:rgba(0,10,0,0.9); font-size:12px; text-transform:uppercase; transition:0.2s; }
.back-btn:hover{ background:var(--accent); color:#000; }

/* SCROLL PROMPT */
.scroll-hint{
    position: absolute; bottom: 30px; left:0; width:100%; text-align:center;
    color: #555; font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
    z-index: 10; animation: blink 3s infinite; pointer-events:none;
}
@keyframes blink { 0%,100%{opacity:0.3} 50%{opacity:1} }

/* INFO SECTION */
.info{ position:relative; z-index:10; background:var(--bg); padding:100px 20px 150px; border-top:1px solid #111; max-width: 800px; margin: 0 auto; }
h1{ font-size: 2.5em; color: #fff; margin: 0 0 10px; letter-spacing: 2px; }
.meta{ display:flex; gap:15px; margin-bottom: 40px; font-size: 0.8em; color: var(--dim); text-transform: uppercase; }
.tag{ border:1px solid #333; padding: 4px 8px; }
p{ line-height: 1.7; color: #aaa; margin-bottom: 25px; font-size: 1.05em; }
.highlight{ color: var(--accent); }

/* MOBILE FALLBACK */
.mobile-msg{ display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; width: 100%; }
@media (max-width: 800px){
  .hero canvas { display:none; }
  .mobile-msg { display:block; }
  .scroll-hint { display:none; }
}