/* Registered so the gradient can cross-fade between themes; snaps where unsupported. */ @property --grad-a { syntax: ""; inherits: true; initial-value: #5b6bb5; } @property --grad-b { syntax: ""; inherits: true; initial-value: #8a7cc0; } :root { /* Neutral default; overridden per-theme by app.js on . */ --grad-a: #5b6bb5; --grad-b: #8a7cc0; --ink: rgba(255, 255, 255, 0.96); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.5rem, 6vh, 3rem); padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom)); font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: linear-gradient(160deg, var(--grad-a), var(--grad-b)); /* Soft transition when the next message (and its gradient) arrives. */ transition: --grad-a 600ms ease, --grad-b 600ms ease; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } .card { flex: 0 1 auto; max-width: 32rem; text-align: center; } .message { margin: 0; font-size: clamp(1.7rem, 7vw, 2.6rem); line-height: 1.3; font-weight: 600; letter-spacing: 0.01em; text-wrap: balance; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.18); opacity: 1; transition: opacity 320ms ease; } .message.fading { opacity: 0; } .reactions { display: flex; gap: 1.25rem; } .react { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; font-size: 1.25rem; color: var(--ink); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 140ms ease, background 200ms ease; } .react:hover { background: rgba(255, 255, 255, 0.22); } .react:active { transform: scale(0.9); } .react[aria-pressed="true"] { background: rgba(255, 255, 255, 0.92); color: #3a3a55; border-color: transparent; } @media (prefers-reduced-motion: reduce) { body, .message, .react { transition: none; } }