/* One <style> block, lifted in place. Separate per block: merging
   blocks changes which rule wins. */

:root { color-scheme: light dark; }
  * { box-sizing: border-box; }
  body {
    margin: 0; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    background: #fbfbfa; color: #1a1a18;
    padding: 2rem;
  }
  main { max-width: 30rem; text-align: center; }
  h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .75rem; }
  p { margin: 0; color: #6b6b66; }
  .rule { width: 2.5rem; height: 2px; background: #d8d8d2; margin: 1.5rem auto; border: 0; }
  @media (prefers-color-scheme: dark) {
    body { background: #16161a; color: #ececea; }
    p { color: #9a9a95; }
    .rule { background: #33333a; }
  }