body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: white;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
text-align: center;
padding: 2rem;
}
h1 {
margin-bottom: 1.5rem;
}
.card {
width: 280px;
height: 280px;
background: #020617;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.katakana {
font-size: 4.5rem;
margin-bottom: 0.5rem;
}
.romaji {
font-size: 1.25rem;
color: #94a3b8;
}
.buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 1rem;
}
button {
padding: 0.6rem 1.2rem;
border-radius: 999px;
border: none;
cursor: pointer;
font-size: 0.9rem;
}
.secondary {
background: #334155;
color: white;
}
.primary {
background: #6366f1;
color: white;
}
.tertiary{
background:#0f172a;
color: white;
}
.hint {
font-size: 0.8rem;
color: #94a3b8;
margin-top: 1.5rem;
}