:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #1d2939; background: #f7f8fa; }
* { box-sizing: border-box; }
body { margin: 0; }
.container { width: min(100% - 2rem, 680px); margin: 7vh auto; padding: 2rem; background: #fff; border: 1px solid #d8dee8; border-radius: 10px; }
h1 { margin: 0 0 2rem; font-size: clamp(1.65rem, 4vw, 2rem); }
label { display: block; margin-bottom: .5rem; font-weight: 650; }
.search-wrap { position: relative; }
input { width: 100%; padding: .85rem 1rem; font: inherit; border: 1px solid #98a2b3; border-radius: 6px; }
input:focus { outline: 3px solid #b9d7ff; border-color: #1769d1; }
button { margin-top: 1rem; padding: .8rem 1.1rem; color: #fff; font: inherit; font-weight: 650; background: #1769d1; border: 0; border-radius: 6px; cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
.suggestions { position: absolute; z-index: 1; width: 100%; max-height: 19rem; margin: .25rem 0 0; padding: .25rem 0; overflow-y: auto; list-style: none; background: #fff; border: 1px solid #98a2b3; border-radius: 6px; box-shadow: 0 8px 20px #10182826; }
.suggestion { padding: .75rem 1rem; cursor: pointer; }
.suggestion:hover, .suggestion[aria-selected="true"] { background: #eff6ff; }
.message { min-height: 1.5rem; margin: 1rem 0; }
.message.error { color: #b42318; }.message.success { color: #067647; }
.result { display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid #b9d7ff; border-radius: 6px; background: #f5faff; }
.result h2 { margin: 0 0 .2rem; font-size: .9rem; font-weight: 650; }.result p { margin: 0; font-size: 1.1rem; white-space: pre-line; }
details { border-top: 1px solid #c8d3e1; padding-top: .8rem; } summary { cursor: pointer; } pre { overflow-x: auto; font-size: .78rem; }
@media (max-width: 520px) { .container { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; padding: 1.25rem; } button { width: 100%; } }