@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@600;700&display=swap');
:root { color-scheme: dark; font-family: "DM Sans", system-ui, sans-serif; background:#071a31; color:#f6f8fc; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 90% 0%, #144c70 0, transparent 31rem), #071a31; }
.shell { width:min(100%, 540px); min-height:100dvh; margin:auto; padding:calc(28px + env(safe-area-inset-top)) 22px calc(36px + env(safe-area-inset-bottom)); }
.brand { display:flex; align-items:center; gap:12px; } .brand p,.label,.eyebrow { margin:0; color:#9bb5ca; font-size:.7rem; letter-spacing:.13em; font-weight:700; } .brand h1 { margin:1px 0 0; font:700 1.36rem Outfit, sans-serif; }
.mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#f1b84b; color:#071a31; font:700 1.5rem Outfit,sans-serif; box-shadow:0 8px 24px #0004; }
.hero { padding:62px 3px 35px; } .hero h2 { margin:9px 0 10px; font:700 clamp(2.3rem, 9vw, 3.5rem)/.98 Outfit,sans-serif; letter-spacing:-.055em; } .hero p { max-width:390px; margin:0; color:#c5d5e2; line-height:1.55; }
.card { margin:14px 0; padding:21px; border:1px solid #31526a; border-radius:20px; background:#0d2843dd; box-shadow:0 15px 35px #0002; } .card-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; } .card-heading strong { display:block; margin-top:5px; font-size:1.05rem; } .dot { width:10px; height:10px; border-radius:50%; background:#d5a43e; box-shadow:0 0 0 4px #d5a43e22; } .dot.ok { background:#5ddb9e; box-shadow:0 0 0 4px #5ddb9e22; } .dot.bad { background:#ed6b6b; box-shadow:0 0 0 4px #ed6b6b22; }
button { width:100%; border:0; border-radius:12px; min-height:50px; cursor:pointer; font:700 .96rem "DM Sans",sans-serif; } button:disabled { opacity:.55; cursor:wait; } .primary { color:#071a31; background:#f1b84b; } .secondary { margin:15px 0 2px; background:#1b4664; color:#edf6fc; } .hint { margin:13px 0 0; color:#9bb5ca; font-size:.84rem; line-height:1.45; }
.code { display:block; width:100%; margin-top:10px; padding:17px 10px; overflow-wrap:anywhere; border-radius:12px; background:#06192d; color:#f5c761; text-align:center; letter-spacing:.1em; font:700 1.14rem/1.4 ui-monospace,monospace; } ol { margin:19px 0 0; padding-left:22px; color:#d9e6f0; line-height:1.7; } .install-tip { margin:28px 4px 0; color:#aac0d1; font-size:.86rem; line-height:1.5; } .install-tip strong { color:#f5c761; } em { font-style:normal; color:#f6f8fc; }