:root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; } #root { max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; } .app-container { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } h1 { font-size: 2.5em; line-height: 1.1; margin-bottom: 1rem; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #1a1a1a; cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: #646cff; } button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } button:disabled { background-color: #333; cursor: not-allowed; opacity: 0.6; } .initial-view, .waiting-view, .success-view, .failed-view { padding: 1.5rem; border: 1px solid #555; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 1rem; min-width: 300px; } .waiting-view img { background-color: white; /* Ensure QR code background is white */ padding: 10px; border-radius: 4px; } .address { font-family: monospace; background-color: #333; padding: 0.5em; border-radius: 4px; word-break: break-all; } .error-message { color: #ff6b6b; font-weight: bold; } @media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } button { background-color: #f9f9f9; } .app-container { /* Add light mode adjustments if needed */ } .initial-view, .waiting-view, .success-view, .failed-view { border-color: #ccc; } .address { background-color: #eee; } }