:root{
--bg:#050805;--green:#66ff91;--muted:#b1c8b4;
--line:#25472d;--white:#f0fff2
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--white);
font-family:ui-monospace,Consolas,monospace;line-height:1.7
}
a{color:var(--green)}
button,textarea{font:inherit}
button,.button{
background:var(--green);color:#071107;border:0;
padding:1rem 1.4rem;cursor:pointer;text-decoration:none;
display:inline-block;font-weight:bold
}
button:hover,.button:hover{background:white}
button:focus-visible,a:focus-visible,textarea:focus-visible{
outline:3px solid white;outline-offset:4px
}
.skip{position:absolute;top:-100px;z-index:100}
.skip:focus{top:12px}
#rain{
position:fixed;inset:0;width:100%;height:100%;
z-index:-1;opacity:.19;pointer-events:none
}
#intro{
position:fixed;inset:0;background:#000;z-index:99;
display:grid;place-items:center;
animation:leave 1s ease-in-out forwards
}
.intro-text{
color:var(--green);font-size:clamp(3rem,12vw,10rem);
font-weight:900;letter-spacing:.12em;text-shadow:0 0 35px #22ff66
}
.cursor{animation:blink .4s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes leave{
0%,65%{opacity:1}
100%{opacity:0;visibility:hidden}
}
header{
display:flex;justify-content:space-between;align-items:center;
gap:1rem;padding:1.2rem 5%;border-bottom:1px solid var(--line);
background:#050805e8;flex-wrap:wrap
}
header button{padding:.5rem;font-size:.75rem}
section{padding:6rem max(5%,calc((100% - 1150px)/2))}
.hero{min-height:85vh;display:flex;flex-direction:column;justify-content:center}
.eyebrow{color:var(--green);font-size:.8rem;letter-spacing:.2em}
h1{font-size:clamp(5rem,17vw,15rem);line-height:.85;margin:2rem 0;letter-spacing:-.09em}
h1 em{color:var(--green);font-style:normal;text-shadow:0 0 60px #1cff4d55}
h2{font-size:clamp(2rem,5vw,4.5rem);line-height:1.15}
h3{font-size:1.4rem;color:var(--green)}
.lead{font-size:clamp(1.2rem,2.5vw,2rem);max-width:700px}
.manifesto{background:#071209}
.manifesto p,.resources p{max-width:850px}
.green{color:var(--green)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
article{
border:1px solid var(--line);padding:2rem;
background:#071109e8;transition:transform .3s,border-color .3s
}
article:hover{transform:translateY(-6px);border-color:var(--green)}
article span{font-size:.75rem;color:var(--muted)}
.experiment{background:#09160b}
.experiment>p{max-width:760px}
label{display:block;margin:1rem 0}
textarea{
width:100%;padding:1.2rem;color:white;background:#030803;
border:1px solid var(--green);resize:vertical
}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}
.result{border:1px solid var(--line);padding:2rem;min-height:130px}
.result h3{margin-bottom:.2rem}
.resources{background:#060e07}
footer{
padding:3rem 5%;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between
}
@media(max-width:600px){
section{padding:4rem 6%}
h1{font-size:18vw}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
#intro{display:none}
#rain{display:none}
}