:root { color-scheme: dark; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top, #16304f, #07111d 62%); color: #f5f7fa; }
main { width: min(680px, calc(100% - 40px)); padding: 56px; border: 1px solid #2c4b6f; border-radius: 24px; background: rgba(9, 24, 40, 0.88); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); }
.eyebrow { color: #72d6ff; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; }
h1 { margin: 10px 0 16px; font-size: clamp(34px, 7vw, 64px); line-height: 1.05; }
p { color: #b8c7d9; line-height: 1.75; }
button { margin-top: 16px; padding: 12px 20px; border: 0; border-radius: 999px; background: #72d6ff; color: #06111d; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { filter: brightness(1.08); }
#result { color: #9ef0b8; font-weight: 700; }