*{
 margin:0;
 padding:0;
 box-sizing:border-box;
 font-family:Inter,sans-serif;
}

body{
 background:#0f172a;
 color:white;
}

.nav{
 background:rgba(2,6,23,.9);
 padding:18px 40px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 position:sticky;
 top:0;
 backdrop-filter:blur(12px);
}

.links a{
 color:white;
 text-decoration:none;
 margin-left:20px;
 padding:8px 16px;
 border-radius:30px;
 transition:.3s;
}

.links a:hover{
 background:#1e293b;
}

.hero{
 padding:120px 20px;
 text-align:center;
 background:linear-gradient(135deg,#22c55e,#4f46e5);
}

.section{
 max-width:1000px;
 margin:auto;
 padding:80px 20px;
}

pre{
 background:#020617;
 padding:18px;
 border-radius:14px;
 overflow:auto;
 margin:15px 0;
}

.playground{
 background:#020617;
 padding:25px;
 border-radius:25px;
 box-shadow:0 20px 40px rgba(0,0,0,.5);
}

textarea{
 width:100%;
 height:220px;
 background:#0f172a;
 color:white;
 border:none;
 border-radius:12px;
 padding:14px;
}

button{
 margin-top:15px;
 padding:14px 30px;
 border:none;
 border-radius:30px;
 background:linear-gradient(135deg,#22c55e,#4f46e5);
 color:white;
 cursor:pointer;
 transition:.3s;
}

button:hover{
 transform:scale(1.05);
}

footer{
 text-align:center;
 padding:40px;
 background:#020617;
}