body{
margin:0;
font-family:Arial, sans-serif;
text-align:center;
color:white;
background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
}

/* INTRO */

#intro{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
}

#intro h1{
font-size:48px;
margin:0;
}

#intro .tag{
opacity:.8;
margin-bottom:10px;
}

#intro button{
padding:12px 30px;
border:none;
border-radius:25px;
cursor:pointer;
font-size:16px;
background:#00ff99;
color:black;
font-weight:bold;
}

/* APP */

#app{
display:none;
min-height:100vh;
padding:20px;
}

.top{
margin-top:20px;
}

/* BUTTON GRID */

#buttons{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
max-width:500px;
margin:30px auto;
}

.num{
padding:14px;
border:none;
border-radius:8px;
font-weight:bold;
font-size:16px;
cursor:pointer;
background:white;
color:black;
}

.num.active{
background:#00ff99;
color:black;
}

.num:disabled{
opacity:.4;
cursor:not-allowed;
}

/* CONTROLS */

.controls{
margin-top:20px;
}

button{
padding:10px 20px;
border-radius:10px;
border:none;
margin:5px;
cursor:pointer;
}