:root{color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;background:#160d22;color:#f7f3ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;isolation:isolate}
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#1a0d2c65,#160b267d 45%,#10091de8),url('background.jpg') center/cover no-repeat}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 20%,#10081d66)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid #a8b0ff;outline-offset:4px}
main{flex:1;display:grid;place-items:center;padding:64px 24px 32px}
.invite-card{position:relative;width:min(100%,464px);padding:40px 32px 32px;text-align:center;background:linear-gradient(145deg,#392441c9,#1a122bd9 65%);border:1px solid #e3c5ff38;border-radius:22px;box-shadow:inset 0 1px 0 #ffffff0c,0 24px 80px #0d051b66,0 0 90px #c271d51a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.invite-card::before{content:"";position:absolute;top:-1px;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,#f4daff99,transparent)}
.community-icon{display:block;object-fit:cover;width:80px;height:80px;margin:0 auto 24px;background:linear-gradient(145deg,#b38ce8,#7251b4);border:1px solid #ead6ff66;border-radius:23px;box-shadow:inset 0 1px 0 #ffffff33,0 10px 35px #b387ed30;color:#fff;font-size:46px;font-weight:750;letter-spacing:-5px;padding:0;line-height:1}
.invite-label{margin:0 0 8px;color:#d3bedf;font-size:14px;line-height:1.5}
h1{margin:0;color:#fff8ff;font-size:32px;font-weight:700;line-height:1.3;letter-spacing:-.9px;overflow-wrap:anywhere}
.accept-invite{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;margin-top:32px;padding:12px 20px;border:1px solid #d9c7ff66;border-radius:10px;background:linear-gradient(100deg,#8d72ec,#a489ef);box-shadow:inset 0 1px 0 #ffffff26,0 6px 24px #9d72e72e;color:#211335;font-size:15px;font-weight:600;line-height:1.5;transition:filter .15s,transform .15s,box-shadow .15s}
.accept-invite:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffff26,0 10px 30px #9d72e74d}
.accept-invite:active{transform:translateY(0);filter:brightness(.96)}
.accept-invite svg{width:20px;height:20px;flex:none}
footer{text-align:center;padding:0 24px 28px;color:#b5bac1}
footer button{min-height:44px;padding:10px 14px;border:0;border-radius:4px;background:none;color:#d3bedf;font-size:12px}
footer button:hover{color:#f2f3f5;text-decoration:underline;text-underline-offset:3px}
dialog{width:min(420px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto;padding:32px;background:#22162f;color:#f7f3ff;border:1px solid #e3c5ff38;border-radius:18px;box-shadow:0 24px 80px #0006}
dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}
dialog h2{margin:0 32px 14px 0;font-size:23px;line-height:1.3;letter-spacing:-.4px}
dialog p{margin:0;color:#d3bedf;font-size:14px;line-height:1.7}
.dialog-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:32px;height:32px;padding:0;background:none;border:0;border-radius:4px;color:#b5bac1;font-size:26px;line-height:1}
.dialog-close:hover{background:#ffffff0a;color:#fff}
.button{width:100%;min-height:44px;margin-top:24px;padding:10px 16px;background:#967be8;border:0;border-radius:8px;color:#211335;font-size:14px;font-weight:600}
.button:hover{background:#a88cf4}
.skip{position:fixed;top:-100px;left:16px;z-index:10;background:#5865f2;padding:12px 18px;border-radius:4px;color:#fff}
.skip:focus{top:16px}
@media(max-width:480px){main{padding:32px 20px 24px}.invite-card{padding:32px 24px 24px;border-radius:20px}h1{font-size:28px}.community-icon{width:72px;height:72px;border-radius:20px;font-size:42px}.accept-invite{margin-top:28px}footer{padding-bottom:16px}dialog{padding:28px 24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}