:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 28px 18px; font-family: Arial, sans-serif; color: #edf5ff; background: radial-gradient(circle at 50% 25%, #1b3155, #06101f 58%, #020611); }
.card { width: min(680px, 100%); padding: clamp(24px, 6vw, 52px); border: 1px solid #91b4e05c; border-radius: 28px; background: #0b1935d9; box-shadow: 0 20px 80px #0008; }
.planet-icon { width: 92px; aspect-ratio: 1; border-radius: 50%; margin-bottom: 18px; background: var(--planet); box-shadow: inset -16px -10px 20px #0008, 0 0 24px #fff3; }
h1 { margin: 0; font-size: clamp(2.2rem, 8vw, 4.5rem); }
.intro { color: #bcd6f6; line-height: 1.65; font-size: 1.08rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 13px 22px; padding-top: 18px; }
dt { color: #95caff; font-weight: 700; } dd { margin: 0; line-height: 1.4; }
.quiz { margin-top: 30px; padding: 18px; border-radius: 16px; background: #14294c; }.quiz h2 { margin: 0 0 8px; font-size: 1.1rem; }.quiz p { line-height: 1.45; }.quiz button { margin: 4px 6px 4px 0; border: 1px solid #9dd6ff55; border-radius: 999px; padding: 8px 12px; color: #eaf6ff; background: #223f70; cursor: pointer; font-weight: 700; }.quiz button:hover { background: #3261a6; } #result { min-height: 1.4em; color: #ffe27c; font-weight: bold; }
a { display: inline-block; margin-top: 28px; padding: 11px 16px; color: #06101f; background: #9cd7ff; border-radius: 999px; text-decoration: none; font-weight: bold; }
#favourite-button { margin-top: 28px; padding: 11px 16px; border: 0; border-radius: 999px; background: #ffe27c; color: #3b2700; cursor: pointer; font-weight: bold; }