:root{font-family:Roboto,Arial,Helvetica,sans-serif;color:#2b2b2b;background:#f7f7f7}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:64px 24px;display:flex;justify-content:center;align-items:flex-start}
.wrap{width:100%;max-width:700px;min-width:0}
.credential{position:relative;width:100%;margin-top:20px;overflow:hidden;container-type:inline-size}
.art{display:block;width:100%;height:auto}
.holder{position:absolute;left:10%;top:45%;width:40%;margin:0;padding:2px;font-size:10px;font-weight:700;line-height:1.5;text-transform:uppercase;overflow-wrap:anywhere}
.qr{position:absolute;right:10%;top:22%;width:30%;aspect-ratio:1;display:block;image-rendering:pixelated}
.actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;margin-top:28px}
a{color:#2b2b2b;text-underline-offset:4px}
.wallet{padding:14px 22px;border-radius:12px;background:#111;color:#fff;font-weight:700;text-decoration:none;text-align:center}
.meta{text-align:center;font-size:13px;line-height:1.8;color:#666;margin-top:24px}
@media(min-width:900px){.qr{top:20%}}
@media(min-width:400px){.holder{font-size:13px}}
@media(min-width:558px){.holder{font-size:18px}}
@media(min-width:1168px){.holder{font-size:24px}}
@media(max-width:420px){body{padding:48px 16px}.actions{flex-direction:column;gap:18px}}