:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; background: #d9cfbb; color: #eee3cd; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
.scene { position: relative; isolation: isolate; width: min(100%, 520px); min-height: 100svh; margin: auto; overflow: hidden; background: #918d7b; }
.background, .shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.background { object-fit: cover; object-position: center; z-index: -2; }
.shade { z-index: -1; background: linear-gradient(180deg, rgba(24,30,34,.22), transparent 38%, rgba(31,27,19,.14) 65%, rgba(31,27,19,.24)); }
.content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(82%, 350px); }
header { --name-size: clamp(24px, 6.5vw, 36px); position: absolute; bottom: calc(100% + 14px); left: 0; width: 100%; text-align: center; display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr); align-items: center; column-gap: 1px; }
h1 { grid-column: 2; grid-row: 1; margin: 0; font-family: 'Bodoni 72', Didot, 'Times New Roman', serif; font-size: var(--name-size); font-weight: 400; letter-spacing: .055em; line-height: 1.1; white-space: nowrap; text-shadow: 0 2px 5px #00000070, 0 4px 16px #00000050; }
.verified-badge { grid-column: 3; grid-row: 1; justify-self: start; width: calc(var(--name-size) * .72); height: calc(var(--name-size) * .72); filter: drop-shadow(0 1px 3px #00000030); }
.first-name, .last-name { display: inline; }
.last-name { margin-left: .08em; }
.online-badge { position: absolute; top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid #ffffff66; border-radius: 999px; background: #eee2cdeb; color: #423925; font-size: 10px; font-weight: 600; letter-spacing: .08em; line-height: 1; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #35be62; box-shadow: 0 0 6px #35be6240; animation: online-blink 6s step-end infinite; }
.links { display: grid; gap: 17px; }
.pill { position: relative; display: flex; align-items: center; justify-content: center; min-height: 70px; padding: 10px 65px; border: 1px solid rgba(255,255,255,.85); border-radius: 999px; background: linear-gradient(110deg, #eee4d0f5, #e2cda8ee); color: #423925; font-size: 16px; font-weight: 600; line-height: 1.35; text-decoration: none; text-align: center; box-shadow: 0 4px 25px #42371720, inset 0 1px 0 #ffffffa0; transition: transform .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
.pill[href]:hover { transform: translateY(-2px); box-shadow: 0 7px 28px #42371740; }
.pill[href]:active { transform: scale(.98); }
.pill:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.logo { position: absolute; left: 7px; top: 7px; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.logo img { display: block; object-fit: contain; }
.logo-first { background: white; }
@media (max-width: 360px) { .content { width: 88%; } .pill { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .pill { transition: none; } }

@keyframes online-blink {
  0%, 70%, 80%, 90%, 100% { opacity: 1; }
  75%, 85% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .online-dot { animation: none; } }

@media (max-width: 600px) { .pill { font-size: 17px; } }
@media (max-width: 360px) { .pill { font-size: 16px; } }