:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-height: 100dvh; margin: 0; background: #f7f7f7; color: #303030; }
.invite-page { width: min(100% - 32px, 560px); margin: 0 auto; padding: clamp(48px, 6vh, 88px) 0 60px; text-align: center; }
.group-photo { display: grid; place-items: center; overflow: hidden; width: clamp(180px, 42vw, 240px); aspect-ratio: 1; margin: 0 auto 36px; border-radius: 50%; background: #e5e9e8; color: #347c72; font-size: 80px; font-weight: 700; }
.group-photo img { width: 100%; height: 100%; object-fit: cover; }
.group-photo img[hidden], .qr-image[hidden] { display: none; }
h1 { max-width: 640px; margin: 0 auto 46px; font-size: clamp(30px, 5vw, 42px); font-weight: 700; line-height: 1.18; overflow-wrap: anywhere; }
.invite-actions { display: grid; gap: 14px; }
button { width: 100%; min-height: 64px; padding: 12px 20px; border-radius: 11px; font: inherit; font-size: clamp(19px, 3.5vw, 25px); cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: wait; }
.enter-button { border: 1px solid #81df86; background: #8ded90; color: #171f17; }
.enter-button:hover:not(:disabled) { background: #78e87e; }
.copy-button { border: 1px solid #c9c9c9; background: transparent; color: #303030; }
.copy-button:hover:not(:disabled) { background: #ededed; }
.help-text { max-width: 500px; margin: 20px auto 8px; color: #555; font-size: 16px; line-height: 1.5; }
a { display: inline-block; color: #2369bf; font-size: 16px; text-decoration: none; }
a:hover { text-decoration: underline; }
.qr-image { display: block; width: min(100%, 292px); height: auto; margin: 18px auto 0; image-rendering: pixelated; }
#invite-message { min-height: 24px; margin: 16px auto 0; color: #8f3030; font-size: 15px; line-height: 1.4; }
#invite-message[data-tone="success"] { color: #216c3a; }
button:focus-visible, a:focus-visible { outline: 3px solid #155d99; outline-offset: 3px; }
@media (max-width: 600px) { .invite-page { padding-top: 38px; } .group-photo { margin-bottom: 28px; } h1 { margin-bottom: 34px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } button { transition: none; } }