:root {
    --bg: #e0e5ec;
    --shadow-light: #ffffff;
    --shadow-dark: #a3b1c6;
    --text: #4a5568;
}

body { background-color: var(--bg); font-family: sans-serif; color: var(--text); display: flex; justify-content: center; padding: 20px; }

.neumo-card {
    background: var(--bg);
    border-radius: 20px;
    box-shadow: 9px 9px 16px var(--shadow-dark), -9px -9px 16px var(--shadow-light);
    padding: 20px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.btn-main { display: block; text-align: center; padding: 15px; border-radius: 12px; box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light); color: var(--text); text-decoration: none; font-weight: bold; margin-top: 20px; }

.btn-ans { display: block; width: 100%; padding: 12px; margin: 8px 0; border: none; border-radius: 10px; background: var(--bg); box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light); cursor: pointer; }

.btn-ans:active { box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light); }

.hidden { display: none; }