* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f5f3ed; background: #111; }
body { margin: 0; }
main { position: relative; min-height: 100svh; height: 100dvh; overflow: hidden; }
.globe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #111; }
.shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8,9,10,.83), transparent 44%); }
.status { position: absolute; top: max(28px, env(safe-area-inset-top)); right: max(32px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; pointer-events: none; text-shadow: 0 1px 10px #000; }
.status-dot { width: 7px; height: 7px; border: 1px solid #a1a3a3; border-radius: 50%; }
.status-country { color: #e8c775; }
.pt .status-country { color: #9bbfc9; }
.status-state { margin-left: 6px; color: #a1a3a3; letter-spacing: .1em; }
.signature { position: absolute; left: max(5vw, env(safe-area-inset-left)); bottom: max(5vh, env(safe-area-inset-bottom)); display: flex; align-items: end; gap: 14px; max-width: calc(100vw - 10vw); text-shadow: 0 1px 12px #000; }
.signature-copy { min-width: 0; }
.signature p { margin: 0; }
.symbols { font-size: clamp(15px, 1.45vw, 20px); line-height: 1.35; white-space: nowrap; }
.divider { color: #e8c775; font-size: 17px; line-height: 1.45; }
.pt .divider { color: #9bbfc9; }
.locations { color: #d0ccc2; font-size: clamp(11px, .9vw, 13px); line-height: 1.4; letter-spacing: .035em; white-space: nowrap; }
.avatar { width: 46px; height: 46px; flex: none; overflow: hidden; border-radius: 50%; border: 1px solid rgba(255,255,255,.76); background: #31536a; box-shadow: 0 2px 12px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.1); transform: rotate(-5deg); transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar:hover { transform: rotate(8deg); box-shadow: 0 5px 20px rgba(0,0,0,.65), 0 0 0 4px rgba(232,199,117,.3); }
.pt .avatar:hover { box-shadow: 0 5px 20px rgba(0,0,0,.65), 0 0 0 4px rgba(155,191,201,.3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
 .status { top: max(23px, env(safe-area-inset-top)); right: max(22px, env(safe-area-inset-right)); font-size: 10px; gap: 7px; }
 .status-state { margin-left: 2px; }
 .signature { left: max(22px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); gap: 10px; max-width: calc(100vw - 44px); }
 .avatar { width: 38px; height: 38px; }
 .symbols { font-size: clamp(11px, 3vw, 13px); }
 .divider { font-size: 14px; }
 .locations { font-size: clamp(9px, 2.35vw, 11px); letter-spacing: 0; }
 .shade { background: linear-gradient(0deg, rgba(8,9,10,.94), rgba(8,9,10,.35) 24%, transparent 58%); }
}
@media (max-width: 360px) {
 .signature { left: 14px; gap: 7px; max-width: calc(100vw - 28px); }
 .avatar { width: 34px; height: 34px; }
 .symbols { font-size: 10px; }
 .locations { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
 .avatar { transition: none; }
}