:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: #fff; color: #111; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 240px; min-height: 100%; }
body { position: relative; }
main { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 64px 24px; }
.brand-pair { position: relative; width: clamp(280px, 40vw, 440px); max-width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.brand-pair img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-first { grid-area: 1 / 1; }
.brand-second { grid-area: 2 / 2; }
footer { position: absolute; inset: auto 16px max(20px, env(safe-area-inset-bottom)); text-align: center; font-size: 12px; line-height: 1.6; }
footer a { color: #666; text-decoration: none; }
footer a:hover { color: #222; text-decoration: underline; }
footer a:focus-visible { outline: 2px solid #111; outline-offset: 4px; border-radius: 2px; }

.chat-bubble { position: absolute; z-index: 1; width: 45%; padding: 10px 12px; border: 1px solid #e9e9e9; border-radius: 14px; background: #fafafa; color: #555; font-size: clamp(12px, 1.2vw, 14px); line-height: 1.6; overflow-wrap: anywhere; opacity: 0; transform: translateY(5px); transition: opacity 300ms ease, transform 300ms ease; }
.chat-bubble.is-visible { opacity: 1; transform: translateY(0); }
.from-first { top: 14%; right: 0; border-bottom-left-radius: 3px; }
.from-second { bottom: 14%; left: 0; border-top-right-radius: 3px; }
.chat-bubble.is-typing { color: #999; letter-spacing: 3px; animation: typing 1.2s ease-in-out infinite; }
.chat-flow { position: absolute; left: 40%; top: 40%; width: 20%; height: 20%; display: flex; justify-content: space-evenly; align-items: center; transform: rotate(45deg); pointer-events: none; }
.chat-flow span { width: 3px; height: 3px; border-radius: 50%; background: #ccc; animation: talking 1.8s ease-in-out infinite; }
.chat-flow span:nth-child(2) { animation-delay: 200ms; }
.chat-flow span:nth-child(3) { animation-delay: 400ms; }
@keyframes typing { 50% { opacity: .45; } }
@keyframes talking { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-flow span, .chat-bubble.is-typing { animation: none; } .chat-bubble { transition: none; } }