:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0; padding: 2rem;
  background: #0f172a; color: #e2e8f0;
}
#app { max-width: 680px; margin: 0 auto; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
.hint { color: #94a3b8; font-size: .9rem; margin: 0 0 1.25rem; }
form { display: flex; gap: .5rem; }
input {
  flex: 1; padding: .6rem .75rem; font-size: 1rem;
  border: 1px solid #334155; border-radius: 8px;
  background: #1e293b; color: #e2e8f0;
}
button {
  padding: .6rem 1rem; font-size: 1rem; cursor: pointer;
  border: 0; border-radius: 8px; background: #2563eb; color: white;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.examples { margin: .75rem 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.examples span { color: #94a3b8; font-size: .85rem; }
.chip { background: #334155; padding: .3rem .7rem; font-size: .8rem; }
.status { margin: 1rem 0 .25rem; color: #fbbf24; font-size: .9rem; }
.error { margin: 1rem 0; color: #f87171; }
.answer {
  margin-top: 1rem; padding: 1rem; min-height: 3rem;
  white-space: pre-wrap; word-wrap: break-word;
  background: #1e293b; border-radius: 8px; border: 1px solid #334155;
  font-family: inherit; font-size: 1rem; line-height: 1.5;
}