:root { --bg: #fafaf9; --fg: #1c1917; --muted: #78716c; --line: #d6d3d1; --accent: #2563eb; --field: #fff; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #161514; --fg: #e7e5e4; --muted: #a8a29e; --line: #3a3634; --accent: #60a5fa; --field: #1f1d1c; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; text-decoration: none; }
.logo { margin: 0 0 1.5rem; font-size: 3rem; font-weight: 700; letter-spacing: -.04em; }
.logo span, .logo-sm span { color: var(--accent); }
.logo-sm { flex: none; width: 4.5rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -.04em; }
form { display: flex; width: 100%; max-width: 36rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--field); overflow: hidden; }
form:focus-within { border-color: var(--accent); }
input { flex: 1; min-width: 0; padding: .75rem 1.25rem; border: 0; outline: 0; background: none; color: inherit; font: inherit; }
button { padding: 0 1.25rem; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px 15vh; }
.bar { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 16px; border-bottom: 1px solid var(--line); }
.result { flex: 1; max-width: 50rem; padding: 2.5rem 16px 2.5rem var(--indent, calc(16px + 4.5rem + 1.5rem + 1.25rem)); }
.result h1 { margin: 0 0 .5rem; font-size: 1.25rem; }
.result p { margin: 0; color: var(--muted); }
footer { padding: 1rem 16px; color: var(--muted); font-size: .8rem; text-align: center; }
@media (max-width: 40rem) { .bar { flex-direction: column; align-items: stretch; gap: .75rem; } .result { --indent: 16px; } }