/* Chatter public page, "Sleek Midnight" colours (docs/mockups/mockup-midnight.html).
   System fonts only: this page loads nothing from anywhere else. */
:root { color-scheme: dark; --bg: #060817; --panel: #0D1031; --line: rgba(150,160,255,.13);
        --text: #EEF0FF; --text-2: #BCC1E6; --accent: #8B7CFF; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, sans-serif; }
body { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px;
  background: radial-gradient(60rem 40rem at 20% -10%, rgba(108,84,255,.30), transparent 60%),
              radial-gradient(50rem 30rem at 110% 110%, rgba(40,200,220,.13), transparent 60%), var(--bg); }
main { width: 100%; max-width: 34rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 32px 28px; }
h1 { margin: 0 0 8px; font-size: 2rem; letter-spacing: -.01em;
  background: linear-gradient(135deg,#8B7CFF,#45E3D3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { color: var(--text); font-weight: 600; margin-top: 0; }
p { color: var(--text-2); }