:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 240px; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #13120f; color: #f5f0e7; font: 16px/1.6 Arial, sans-serif; }
#mrConnect { width: 100%; max-width: 470px; padding: 38px 30px; border: 1px solid #51452f; border-radius: 24px; background: #211e17; text-align: center; overflow-wrap: anywhere; }
#mrConnect .connect-mark { width: 52px; height: 52px; margin: 0 auto 22px; border: 1px solid #b6975e; border-radius: 50%; color: #e1c68f; font: 30px/50px Georgia, serif; }
#mrConnect .connect-eyebrow { margin: 0 0 15px; color: #dfbf83; font-size: 11px; letter-spacing: 2.5px; }
#mrConnect h1 { margin: 0 0 16px; font: 34px/1.15 Georgia, serif; }
#mrConnect #connectStatus { min-height: 52px; margin: 0 0 22px; color: #eee3d0; }
#mrConnect .connect-note, #mrConnect #connectReturn { margin: 20px 0 0; color: #bcb3a2; font-size: 14px; }
#mrConnect .connect-progress { height: 3px; overflow: hidden; border-radius: 4px; background: #403728; }
#mrConnect .connect-progress span { display: block; width: 40%; height: 100%; background: #e1c68f; animation: mrConnectPulse 1.4s ease-in-out infinite alternate; }
#mrConnect button { min-height: 44px; margin-top: 26px; padding: 10px 28px; border: 1px solid #9d855a; border-radius: 24px; background: transparent; color: #f5e1b8; font: inherit; cursor: pointer; }
#mrConnect button:hover { background: #332b1e; }
#mrConnect button:focus-visible { outline: 3px solid #f1d29b; outline-offset: 4px; }
[hidden] { display: none !important; }
@keyframes mrConnectPulse { to { transform: translateX(150%); } }
@media (max-width: 360px) { body { padding: 16px; } #mrConnect { padding: 28px 20px; } #mrConnect h1 { font-size: 29px; } }
@media (prefers-reduced-motion: reduce) { #mrConnect .connect-progress span { animation: none; width: 100%; } }