:root { color-scheme: light; font-family: Inter, "Noto Sans SC", system-ui, sans-serif; color: #102a43; background: #f1f5f9; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
main { width: min(680px, 100%); background: #fff; border: 1px solid #d9e2ec; border-radius: 20px; padding: clamp(30px, 7vw, 64px); box-shadow: 0 22px 70px rgba(15, 45, 75, .12); }
.mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #087f6d; color: #fff; font-size: 24px; font-weight: 800; }
.eyebrow { margin: 24px 0 8px; color: #087f6d; font-weight: 800; letter-spacing: .04em; }
h1 { margin: 0; font-size: clamp(34px, 7vw, 52px); letter-spacing: -.03em; }
#hint { color: #486581; line-height: 1.7; }
.choices { display: grid; gap: 12px; margin: 30px 0; }
.choice { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 15px 18px; border-radius: 12px; background: #087f6d; color: #fff; text-decoration: none; font-weight: 760; }
.choice span { font-size: 13px; opacity: .82; }
.choice[aria-disabled="true"] { background: #9fb3c8; pointer-events: none; }
.boundary { border-left: 4px solid #f59e0b; background: #fff7e6; padding: 12px 16px; color: #734b00; line-height: 1.6; }
pre { white-space: pre-wrap; color: #9b1c1c; background: #fff1f1; padding: 14px; border-radius: 10px; }