:root { color-scheme: light; font-family: Georgia, serif; color: #173c3b; background: #f2f5ed; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at top right, #d7e8dd, transparent 65%); }
main { width: min(100%, 640px); padding: clamp(24px, 6vw, 52px); background: #fffefa; border-top: 6px solid #18776b; box-shadow: 0 18px 60px #173c3b12; }
h1 { font-size: clamp(30px, 7vw, 46px); line-height: 1.1; }
p { line-height: 1.6; }
.label, button, #result, #details { font-family: Verdana, sans-serif; }
.label { font-size: 11px; letter-spacing: .16em; }
#result { padding: 18px; background: #edf3ee; overflow-wrap: anywhere; }
#result[data-state="error"] { background: #fbe8df; color: #8b301f; }
#details, .note { font-size: 13px; }
button { background: #17685e; color: white; border: 0; padding: 13px 20px; cursor: pointer; }
button:disabled { opacity: .5; }