body{margin:0}
.ew-wrap{
background:#030d14;
color:#d7f2ff;
font-family:Arial,sans-serif;
padding:20px;
min-height:100vh;
}
.hero{
text-align:center;
padding:30px;
border-bottom:2px solid #00ffe7;
margin-bottom:20px;
}
.hero h1{
margin:0;
font-size:42px;
color:#00ffe7;
}
.tabs{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:20px;
}
.tab{
padding:12px 20px;
background:#0b1f2d;
border:1px solid #15445c;
border-radius:10px;
cursor:pointer;
color:white;
}
.tab.active{
border-color:#00ffe7;
color:#00ffe7;
}
.lesson{display:none}
.lesson.active{display:block}
.panel{
background:#0a1d28;
padding:20px;
border-radius:16px;
border:1px solid #134056;
margin-bottom:20px;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
}
.card{
background:#102a39;
padding:18px;
border-radius:14px;
border:1px solid #15445c;
}
canvas{
width:100%;
background:#021019;
border-radius:12px;
margin-top:15px;
}
.tech li{
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}