:root{--a:#8b5cf6;--b:#22d3ee;color-scheme:dark}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#07070f;color:#f4f4ff;font-family:'Space Grotesk',system-ui,sans-serif}
#fx{position:fixed;inset:0;z-index:0}
#stage{position:fixed;inset:0;z-index:1}
.slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateX(12%) scale(1.08);filter:blur(14px);transition:all .9s cubic-bezier(.7,0,.2,1);overflow:hidden}
.slide.before{transform:translateX(-12%) scale(.92)}
.slide.active{opacity:1;pointer-events:auto;transform:none;filter:none}
.sbg{position:absolute;inset:0;z-index:0;overflow:hidden}
.sbg img,.sbg video{width:100%;height:100%;object-fit:cover;animation:kb 20s ease-in-out infinite alternate}
.ov{position:absolute;inset:0;background:linear-gradient(#0007,#000b)}
@keyframes kb{to{transform:scale(1.12)}}
.bg-aurora{background:#0a0820}
.bg-aurora::before,.bg-aurora::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);opacity:.55;animation:blob 16s ease-in-out infinite alternate}
.bg-aurora::before{background:var(--a);top:-20%;left:-10%}
.bg-aurora::after{background:var(--b);bottom:-25%;right:-15%;animation-delay:-8s}
@keyframes blob{to{transform:translate(20vmax,10vmax) scale(1.3)}}
.bg-grid{background:#080812 linear-gradient(#8b5cf633 1px,transparent 1px),linear-gradient(90deg,#8b5cf633 1px,transparent 1px);background-size:48px 48px;animation:gm 6s linear infinite}
@keyframes gm{to{background-position:48px 48px}}
.bg-gradient{background:linear-gradient(135deg,#ff6ec4,#7873f5,#22d3ee,#34d399);background-size:300% 300%;animation:flow 12s ease infinite}
@keyframes flow{50%{background-position:100% 50%}}
.bg-particles{background:transparent}
.bg-none{background:#0b0b12}
.in{position:relative;z-index:2;width:min(1100px,92vw);max-height:92dvh;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:20px 20px 90px}
.in>*{animation:up .9s cubic-bezier(.2,.8,.2,1) backwards}
.in>:nth-child(2){animation-delay:.15s}.in>:nth-child(3){animation-delay:.3s}.in>:nth-child(4){animation-delay:.45s}.in>:nth-child(5){animation-delay:.6s}
@keyframes up{from{opacity:0;transform:translateY(40px)}}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(1turn)}}
h1{font-size:clamp(2.4rem,9vw,5rem);line-height:1.05;background:linear-gradient(90deg,#fff,var(--b),var(--a),#fff);background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite;caret-color:#fff}
h2{font-size:clamp(1.8rem,6vw,3rem)}
.role{font-size:clamp(1rem,3vw,1.4rem);color:var(--b);letter-spacing:.08em}
.bio,.txt p{font-size:1.1rem;line-height:1.7;max-width:560px;opacity:.9;white-space:pre-wrap}
.ph{position:relative;display:grid;place-items:center;background:#ffffff14;overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph span{font-size:2rem;opacity:.7}
.ph.empty span{display:none}
body.edit .ph.empty span{display:block}
body:not(.edit) .ph.empty:not(.av){display:none}
.av{width:190px;height:190px;border-radius:50%;overflow:visible;isolation:isolate;background:#0b0b12;animation:float 5s ease-in-out infinite}
.av img{border-radius:50%}
.av::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(var(--a),var(--b),var(--a));animation:spin 4s linear infinite;z-index:-1}
.txt{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:center;text-align:left}
.side{width:min(300px,70vw);aspect-ratio:1;border-radius:24px;animation:float 6s ease-in-out infinite}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;width:100%;overflow:auto;max-height:64dvh;padding:8px}
.card{position:relative;background:#ffffff14;backdrop-filter:blur(14px);border:1px solid #fff2;border-radius:18px;padding:12px;text-align:left;transition:transform .2s;animation:up .8s backwards;animation-delay:var(--d,0s)}
.card h3{margin:10px 0 4px}.card p{opacity:.8;font-size:.95rem}
.cp{width:100%;aspect-ratio:16/10;border-radius:12px}
.x{position:absolute;top:6px;right:6px;z-index:3;width:30px;height:30px;border-radius:50%;border:0;background:#e11d48;color:#fff;cursor:pointer}
.pills{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.pill{padding:14px 22px;border-radius:999px;background:#ffffff18;border:1px solid #fff3;color:#fff;text-decoration:none;backdrop-filter:blur(10px);transition:.3s}
a.pill:hover{background:#ffffff30;transform:translateY(-4px) scale(1.04)}
.btn,select{background:#ffffff1f;color:#fff;border:1px solid #fff3;border-radius:999px;padding:8px 14px;font:inherit;font-size:.85rem;backdrop-filter:blur(10px);cursor:pointer}
select option{color:#000}
.btn:hover{background:#ffffff38}
#bar{position:fixed;z-index:10;top:max(12px,env(safe-area-inset-top));right:12px;left:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
#bar .e{display:none}body.edit #bar .e{display:inline-block}
#ed{display:none}body.owner #ed{display:inline-block}
.tools{position:absolute;z-index:6;bottom:calc(52px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:none;gap:8px;flex-wrap:wrap;justify-content:center;width:92vw}
body.edit .tools{display:flex}
.arr{position:fixed;z-index:10;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid #fff3;background:#ffffff1a;color:#fff;font-size:1.6rem;cursor:pointer;backdrop-filter:blur(10px)}
#prev{left:10px}#nxt{right:10px}
@media(max-width:600px){.arr{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:none}}
#dots{position:fixed;z-index:10;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:99px;border:0;background:#fff5;cursor:pointer;transition:.4s}
.dot.on{width:32px;background:linear-gradient(90deg,var(--a),var(--b))}
body.edit [contenteditable]{outline:1px dashed #fff7;outline-offset:3px;border-radius:4px;min-width:2ch;display:inline-block}
body.edit .ph{cursor:pointer;outline:2px dashed #fff8}