@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
:root { --ink: #10231a; --muted: #6b7570; --green: #004300; --line: #e8ede6; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: #fbfcfa radial-gradient(60rem 40rem at 50% 42%, #eef4ea 0%, rgba(238,244,234,0) 60%) no-repeat; color: var(--ink); font: 400 16px/1.5 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.top { padding: 28px 32px; }
.lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.lockup svg { width: 30px; height: 30px; }
.lockup img { height: 21px; width: auto; }
main { flex: 1; display: grid; place-items: center; padding: 8px 20px 56px; }
.card { width: 100%; max-width: 400px; text-align: center; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 22px; }
.code { width: min(340px, 80vw); aspect-ratio: 1; margin: 0 auto; padding: 18px; background: #fff; border-radius: 32px; box-shadow: 0 1px 0 rgba(16,35,26,.04), 0 24px 60px -30px rgba(16,35,26,.28); }
.code svg { display: block; width: 100%; height: 100%; }
.hint { color: var(--muted); margin: 22px auto 0; max-width: 30ch; }
.store { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 10px 18px; border-radius: 999px; color: var(--green); font-weight: 500; font-size: 15px; text-decoration: none; border: 1px solid var(--line); background: #fff; transition: border-color .2s, transform .2s; }
.store:hover { border-color: #b9ccb5; transform: translateY(-1px); }
.store svg { width: 16px; height: 16px; }
footer { padding: 0 20px 28px; text-align: center; font-size: 13px; color: var(--muted); }
footer a { color: var(--muted); text-decoration: none; margin: 0 8px; }
footer a:hover { color: var(--ink); }
@media (max-width: 480px) { .top { padding: 20px; } h1 { font-size: 20px; } }