:root{
  --ink:#07070f;
  --ink2:#0c0c18;
  --ink3:#12121f;
  --mist:#a78bfa;
  --cyan:#67e8f9;
  --rose:#f472b6;
  --gold:#fbbf24;
  --mint:#34d399;
  --txt:#eceaf6;
  --dim:#9a97b4;
  --dimmer:#5f5d78;
  --line:rgba(255,255,255,.1);
  --line2:rgba(255,255,255,.2);
  --r:20px;
  --r-sm:14px;
  --r-lg:28px;
  --lg-bg:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.045) 42%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.06));
  --lg-bg-hover:linear-gradient(165deg,rgba(255,255,255,.19),rgba(255,255,255,.08) 42%,rgba(255,255,255,.04) 70%,rgba(255,255,255,.1));
  --lg-border:rgba(255,255,255,.17);
  --lg-border-hi:rgba(255,255,255,.3);
  --lg-inset:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 1px rgba(255,255,255,.04),inset 0 18px 30px -22px rgba(255,255,255,.28);
  --lg-shadow:0 10px 32px rgba(0,0,0,.36),0 2px 8px rgba(0,0,0,.28);
  --lg-blur:blur(26px) saturate(1.7);
  --shadow-lg:0 34px 90px rgba(0,0,0,.55);
  --shadow-md:0 14px 44px rgba(0,0,0,.38);
  --glow-mist:0 0 26px rgba(167,139,250,.32);
  --ease:cubic-bezier(.22,.9,.3,1);
  --spring:cubic-bezier(.34,1.4,.44,1);
  --nav-h:66px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--txt);
  font-family:'Sora',sans-serif;
  overflow-x:hidden;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--mist);color:var(--ink)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#26263c;border-radius:9px;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:#34345a}

#mistbg{position:fixed;inset:0;z-index:0;pointer-events:none}
#app{position:relative;z-index:1;min-height:100vh;min-height:100dvh}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}

h1,h2,h3,.display{font-family:'Unbounded',sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--cyan);text-decoration:none;transition:color .2s}
a:hover{color:#a5f3ff}
img{max-width:100%}
button{font-family:inherit;cursor:pointer;color:inherit}

:focus{outline:none}
:focus-visible{outline:2px solid var(--mist);outline-offset:2px;border-radius:8px}

.lg,
.btn,.opt,.chip,.brand,.tabs,.iconbtns button,.pp-actions button,.pp-back,.toast,.filedrop{
  position:relative;
  background:var(--lg-bg);
  backdrop-filter:var(--lg-blur);
  -webkit-backdrop-filter:var(--lg-blur);
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-shadow),var(--lg-inset);
}
.btn::before,.opt::before,.pp-actions button::before,.pp-back::before,.pp-link::before{
  content:'';
  position:absolute;
  inset:1px 1px auto 1px;
  height:46%;
  border-radius:inherit;
  border-bottom-left-radius:40% 30%;
  border-bottom-right-radius:40% 30%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));
  opacity:.55;
  pointer-events:none;
  transition:opacity .25s;
}
.btn:hover::before,.opt:hover::before,.pp-link:hover::before{opacity:.85}

input,textarea,select{
  font-family:inherit;
  width:100%;
  background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:12px 16px;
  color:var(--txt);
  font-size:14px;
  outline:none;
  transition:border-color .25s,box-shadow .25s,background .25s;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 2px 8px rgba(0,0,0,.18);
}
input:hover,textarea:hover{border-color:var(--line2)}
input:focus,textarea:focus,select:focus{
  border-color:rgba(167,139,250,.65);
  box-shadow:0 0 0 4px rgba(167,139,250,.14),inset 0 1px 0 rgba(255,255,255,.12);
  background:linear-gradient(170deg,rgba(255,255,255,.1),rgba(255,255,255,.05));
}
input::placeholder,textarea::placeholder{color:var(--dimmer)}
input[type="color"]{padding:4px;height:46px;cursor:pointer}
input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
input[type="color"]::-webkit-color-swatch{border:none;border-radius:10px}
input[type="range"]{padding:0;height:32px;background:none;border:none;box-shadow:none;accent-color:var(--mist);cursor:grab;backdrop-filter:none;-webkit-backdrop-filter:none}
input[type="range"]:active{cursor:grabbing}
textarea{resize:vertical;min-height:70px;line-height:1.6}
select option{background:var(--ink2);color:var(--txt)}

label{
  display:block;
  font-size:11.5px;
  color:var(--dim);
  margin:18px 0 8px;
  letter-spacing:.7px;
  text-transform:uppercase;
  font-weight:600;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  border-radius:999px;
  padding:13px 26px;
  font-size:14px;
  font-weight:600;
  color:var(--txt);
  user-select:none;
  white-space:nowrap;
  overflow:hidden;
  transition:transform .3s var(--spring),background .3s,box-shadow .3s,border-color .3s,filter .2s,opacity .25s;
}
.btn:hover{
  transform:translateY(-2px);
  background:var(--lg-bg-hover);
  border-color:var(--lg-border-hi);
  box-shadow:0 16px 40px rgba(0,0,0,.4),var(--lg-inset);
}
.btn:active{transform:translateY(0) scale(.965);filter:brightness(1.15)}
.btn.primary{
  background:linear-gradient(165deg,rgba(167,139,250,.5),rgba(103,232,249,.28) 55%,rgba(167,139,250,.32));
  border-color:rgba(197,177,255,.5);
  color:#fff;
  text-shadow:0 1px 6px rgba(20,10,50,.5);
  box-shadow:var(--glow-mist),0 10px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 20px -12px rgba(103,232,249,.5);
}
.btn.primary::after{
  content:'';
  position:absolute;
  top:0;left:-80%;
  width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);
  transition:left .6s var(--ease);
}
.btn.primary:hover::after{left:130%}
.btn.primary:hover{box-shadow:0 0 46px rgba(133,180,255,.5),0 14px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.danger{
  background:linear-gradient(165deg,rgba(244,63,94,.28),rgba(244,63,94,.1));
  border-color:rgba(244,63,94,.45);
  color:#fecdd3;
}
.btn.danger:hover{box-shadow:0 0 22px rgba(244,63,94,.3),0 12px 34px rgba(0,0,0,.4),var(--lg-inset)}
.btn.ghost{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.btn.sm{padding:8px 16px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--lg-shadow),var(--lg-inset)}
.btn:disabled::after{display:none}

.glass{
  background:linear-gradient(170deg,rgba(255,255,255,.065),rgba(255,255,255,.025) 55%,rgba(255,255,255,.04));
  backdrop-filter:var(--lg-blur);
  -webkit-backdrop-filter:var(--lg-blur);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.12);
}

nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  background:linear-gradient(180deg,rgba(10,10,20,.72),rgba(7,7,15,.55));
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .35s,box-shadow .35s,border-color .35s;
}
nav.scrolled{
  background:linear-gradient(180deg,rgba(8,8,16,.9),rgba(6,6,13,.82));
  box-shadow:0 12px 38px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  border-bottom-color:rgba(255,255,255,.14);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:12px}
.logo{
  font-family:'Unbounded',sans-serif;
  font-weight:800;
  font-size:19px;
  letter-spacing:1.5px;
  background:linear-gradient(120deg,#8ab8ff,var(--cyan) 50%,var(--mist));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
  flex-shrink:0;
}
.logo img{
  width:36px;height:36px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(103,232,249,.55));
  animation:logoFloat 5s ease-in-out infinite;
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 8px rgba(103,232,249,.45))}
  50%{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 0 16px rgba(167,139,250,.7))}
}
.navlinks{display:flex;gap:6px;align-items:center;min-width:0}
.navlinks .nl{
  padding:9px 16px;
  border-radius:999px;
  font-size:13.5px;
  color:var(--dim);
  transition:.25s;
  background:none;
  border:1px solid transparent;
  white-space:nowrap;
}
.navlinks .nl:hover{
  color:var(--txt);
  background:var(--lg-bg);
  border-color:var(--lg-border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.navlinks .nl.on{
  color:var(--txt);
  background:linear-gradient(165deg,rgba(167,139,250,.28),rgba(167,139,250,.1));
  border-color:rgba(167,139,250,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 16px rgba(167,139,250,.18);
}
.avatar-mini{
  width:34px;height:34px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(197,177,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 10px rgba(0,0,0,.4);
  cursor:pointer;
  transition:.25s var(--spring);
  flex-shrink:0;
}
.avatar-mini:hover{box-shadow:0 0 16px rgba(167,139,250,.6);transform:scale(1.08)}

.hero{
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100dvh - var(--nav-h));
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:30px;
  padding:60px 0;
  position:relative;
}
.hero-copy{text-align:left}
.hero-logo{
  width:96px;height:96px;
  margin:0 0 10px;
  object-fit:contain;
  filter:drop-shadow(0 0 30px rgba(103,232,249,.5));
  animation:heroLogo 6s ease-in-out infinite;
}
@keyframes heroLogo{
  0%,100%{transform:translateY(0) rotate(-1.5deg);filter:drop-shadow(0 0 24px rgba(103,232,249,.45))}
  50%{transform:translateY(-10px) rotate(1.5deg);filter:drop-shadow(0 0 44px rgba(167,139,250,.75))}
}
.hero h1{
  font-size:clamp(34px,5.4vw,68px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-1px;
  animation:riseIn .8s var(--ease) both;
}
.hero h1 .gr{
  background:linear-gradient(110deg,var(--mist) 10%,var(--cyan) 55%,var(--rose) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 30px rgba(167,139,250,.4));
  animation:grShift 7s ease-in-out infinite;
}
@keyframes grShift{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.hero p{
  color:var(--dim);
  font-size:clamp(15px,1.6vw,18px);
  margin:22px 0 34px;
  max-width:520px;
  line-height:1.7;
  animation:riseIn .8s .12s var(--ease) both;
}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;animation:riseIn .8s .22s var(--ease) both}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:3px;
  color:var(--cyan);
  text-transform:uppercase;
  margin-bottom:14px;
}
.claim{
  display:flex;
  max-width:460px;
  margin:38px 0 0;
  border-radius:999px;
  padding:6px;
  animation:riseIn .8s .32s var(--ease) both;
  transition:border-color .25s,box-shadow .25s;
}
.claim:focus-within{border-color:rgba(167,139,250,.6);box-shadow:0 0 30px rgba(167,139,250,.22),var(--lg-inset)}
.claim span{display:flex;align-items:center;padding:0 2px 0 18px;color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:14px}
.claim input{border:none;background:none;box-shadow:none;padding:12px 4px;min-width:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.claim input:focus{box-shadow:none;background:none}
.claim .btn{flex-shrink:0}

.mockdeck{
  position:relative;
  height:560px;
  perspective:1400px;
  animation:riseIn 1s .25s var(--ease) both;
}
.mockcard{
  position:absolute;
  width:264px;
  height:400px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(190,160,255,.34);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 44px rgba(167,139,250,.16),inset 0 1px 0 rgba(255,255,255,.16);
  background:#0a0914;
  transition:transform .6s var(--spring),box-shadow .5s,filter .5s;
}
.mockcard::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.05);
  background:linear-gradient(170deg,rgba(255,255,255,.1),transparent 24%);
}
.mframe{
  width:396px;
  height:600px;
  transform:scale(.6667);
  transform-origin:top left;
  pointer-events:none;
}
.mframe .pp-stage{position:relative;inset:auto;width:100%;height:100%;min-height:0;overflow:hidden}
.mframe .pp-bg{position:absolute}
.mframe .pp-content{min-height:100%;padding:30px 18px 22px;justify-content:flex-start}
.mframe .pp-card{width:100%;animation:none}
.mframe .pp-nobanner{height:30px}
.mframe .pp-foot{display:none}
.mockcard.c1{left:0;top:60px;transform:rotate(-9deg);z-index:1;filter:saturate(.45) brightness(.75)}
.mockcard.c2{left:26%;top:16px;transform:rotate(-3deg);z-index:2;filter:saturate(.8) brightness(.9)}
.mockcard.c3{right:0;top:110px;transform:rotate(7deg) scale(1.06);z-index:3}
.mockdeck:hover .mockcard.c1{transform:rotate(-11deg) translateY(-8px)}
.mockdeck:hover .mockcard.c2{transform:rotate(-2deg) translateY(-12px)}
.mockdeck:hover .mockcard.c3{transform:rotate(5deg) scale(1.09) translateY(-10px);box-shadow:0 50px 110px rgba(0,0,0,.65),0 0 60px rgba(167,139,250,.28),inset 0 1px 0 rgba(255,255,255,.22)}


section.land{padding:90px 0;position:relative}
.sechead{text-align:center;margin-bottom:54px}
.sechead h2{font-size:clamp(25px,4vw,42px);font-weight:600;letter-spacing:-.5px}
.sechead p{color:var(--dim);margin-top:12px;font-size:15px}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.feat{
  padding:30px;
  transition:transform .35s var(--spring),border-color .3s,box-shadow .3s;
  position:relative;
  overflow:hidden;
}
.feat::before{
  content:'';
  position:absolute;
  top:-60px;right:-60px;
  width:140px;height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.16),transparent 70%);
  opacity:0;
  transition:opacity .4s;
}
.feat:hover{transform:translateY(-5px);border-color:rgba(167,139,250,.4);box-shadow:0 18px 48px rgba(167,139,250,.14),inset 0 1px 0 rgba(255,255,255,.16)}
.feat:hover::before{opacity:1}
.feat .ic{font-size:30px;margin-bottom:16px;display:block;filter:drop-shadow(0 0 12px rgba(103,232,249,.5))}
.feat h3{font-size:17px;font-weight:600;margin-bottom:10px}
.feat p{color:var(--dim);font-size:14px;line-height:1.7}

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;max-width:780px;margin:0 auto}
.plan{padding:36px;position:relative;transition:transform .35s var(--spring),box-shadow .3s}
.plan:hover{transform:translateY(-4px)}
.plan.pro{border-color:rgba(167,139,250,.5);box-shadow:0 0 60px rgba(167,139,250,.15),inset 0 1px 0 rgba(255,255,255,.16)}
.plan.pro:hover{box-shadow:0 0 80px rgba(167,139,250,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.plan .tag{
  position:absolute;
  top:-13px;left:50%;
  transform:translateX(-50%);
  background:linear-gradient(165deg,rgba(167,139,250,.85),rgba(103,232,249,.7));
  color:#0a0a14;
  font-size:11px;
  font-weight:700;
  padding:6px 18px;
  border-radius:99px;
  letter-spacing:1px;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 0 18px rgba(167,139,250,.5),inset 0 1px 0 rgba(255,255,255,.5);
}
.plan h3{font-size:22px}
.plan .price{font-family:'Unbounded',sans-serif;font-size:40px;margin:18px 0 6px}
.plan .price small{font-size:14px;color:var(--dim);font-family:'Sora',sans-serif}
.plan ul{list-style:none;margin:24px 0 30px}
.plan li{
  padding:9px 0;
  color:var(--dim);
  font-size:14px;
  border-bottom:1px dashed rgba(255,255,255,.07);
  display:flex;
  gap:10px;
  align-items:baseline;
}
.plan li::before{content:'✦';color:var(--cyan);font-size:11px}
.plan.pro::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  background:
    radial-gradient(75% 60% at 12% 0%,rgba(167,139,250,.6),transparent 62%),
    radial-gradient(70% 55% at 90% 20%,rgba(103,232,249,.45),transparent 62%),
    radial-gradient(80% 60% at 55% 105%,rgba(244,114,182,.4),transparent 64%);
  opacity:.55;
  z-index:-1;
  filter:blur(22px);
}

.faq{max-width:720px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:20px 4px;transition:background .2s}
.faq details:hover{background:rgba(255,255,255,.02)}
.faq summary{
  cursor:pointer;
  font-weight:600;
  font-size:15.5px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:var(--mist);transition:transform .25s var(--ease);flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--dim);font-size:14px;line-height:1.75;margin-top:14px;animation:riseIn .3s var(--ease)}

.pagehead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin:110px 0 26px;
}
.pagehead h2{font-size:clamp(24px,3.6vw,38px);font-weight:600;letter-spacing:-.5px;margin-top:8px}
.pagehead .sub{color:var(--dim);font-size:14px;margin-top:8px;max-width:520px}
.tplbar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:20px;
  margin-bottom:26px;
}
.tplbar input{
  flex:1;
  min-width:200px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:999px;
  padding:11px 18px;
  color:var(--fg);
  font-size:14px;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.tplbar input:focus{border-color:var(--mist);box-shadow:0 0 0 3px rgba(167,139,250,.15)}
.tplbar .optrow{margin:0}
.tpl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
  gap:18px;
  margin-bottom:80px;
}
.tpl-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border-radius:24px;
}
.tpl-card .tpl-prev{height:150px;border-radius:16px}
.tpl-meta{padding:0 4px;display:flex;flex-direction:column;gap:5px}
.tpl-name{font-weight:700;font-size:15px;letter-spacing:.2px}
.tpl-by{font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:8px}
.tpl-desc{font-size:12.5px;color:var(--dim);line-height:1.5}
.tpl-actions{display:flex;gap:8px;margin-top:auto}
.tpl-actions .btn{flex:1}
.tpl-actions .btn.danger{flex:0 0 auto}
.tplframe{
  width:264px;
  height:400px;
  border-radius:26px;
  overflow:hidden;
  margin:20px auto 6px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);
  background:#0a0914;
}
.mrow{display:flex;gap:10px;margin-top:20px}
.mrow .btn{flex:1}

footer{border-top:1px solid var(--line);padding:44px 0;text-align:center;color:var(--dim);font-size:13px}
footer .logo{justify-content:center;margin-bottom:12px}

.authbox{max-width:420px;margin:7vh auto;padding:40px;animation:riseIn .5s var(--ease)}
.authbox h2{font-size:24px;margin-bottom:6px}
.authbox .sub{color:var(--dim);font-size:14px;margin-bottom:22px}
.authbox .userfield{
  display:flex;
  align-items:center;
  background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:0 0 0 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 2px 8px rgba(0,0,0,.18);
  transition:border-color .2s,box-shadow .2s;
}
.authbox .userfield:focus-within{border-color:rgba(167,139,250,.65);box-shadow:0 0 0 4px rgba(167,139,250,.14)}
.authbox .userfield span{color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:13px;white-space:nowrap}
.authbox .userfield input{border:none;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.divide{display:flex;align-items:center;gap:14px;color:var(--dim);font-size:12px;margin:20px 0}
.divide::before,.divide::after{content:'';flex:1;height:1px;background:var(--line)}
.switchmode{text-align:center;margin-top:20px;font-size:13px;color:var(--dim)}
.switchmode a{cursor:pointer}

.dash{
  display:grid;
  grid-template-columns:minmax(360px,480px) 1fr;
  gap:24px;
  padding:26px 0 60px;
  align-items:start;
}
.panel{padding:24px}
.tabs{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-bottom:20px;
  padding:5px;
  border-radius:999px;
}
.tabs button{
  flex:1;
  border:none;
  background:none;
  color:var(--dim);
  padding:9px 6px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  transition:.25s;
  min-width:66px;
}
.tabs button:hover{color:var(--txt)}
.tabs button.on{
  background:linear-gradient(165deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  color:var(--txt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 14px rgba(0,0,0,.3),0 0 14px rgba(167,139,250,.15);
  border:1px solid rgba(255,255,255,.16);
}

.preview-shell{position:sticky;top:calc(var(--nav-h) + 20px)}
.preview-frame{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line2);
  height:calc(100vh - 180px);
  height:calc(100dvh - 180px);
  min-height:520px;
  position:relative;
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.14);
}
.preview-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  font-size:12px;
  color:var(--dim);
  gap:10px;
}
.savestate{display:flex;align-items:center;gap:7px;flex-shrink:0}
.savestate .dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399;transition:.3s}
.savestate .dot.saving{background:#fbbf24;box-shadow:0 0 10px #fbbf24;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sw{
  width:36px;height:36px;
  border-radius:50%;
  cursor:pointer;
  border:2px solid rgba(255,255,255,.18);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.35);
  transition:transform .25s var(--spring),border-color .2s,box-shadow .2s;
}
.sw:hover{transform:scale(1.12)}
.sw.on{border-color:#fff;transform:scale(1.16);box-shadow:inset 0 2px 4px rgba(255,255,255,.4),0 0 16px rgba(255,255,255,.35)}

.optrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.opt{
  padding:9px 17px;
  border-radius:999px;
  color:var(--dim);
  font-size:12.5px;
  cursor:pointer;
  font-weight:600;
  overflow:hidden;
  transition:transform .25s var(--spring),color .2s,background .25s,border-color .25s,box-shadow .25s,filter .2s;
}
.opt:hover{color:var(--txt);border-color:var(--lg-border-hi);background:var(--lg-bg-hover);transform:translateY(-1px)}
.opt:active{transform:scale(.955);filter:brightness(1.15)}
.opt.on{
  border-color:rgba(167,139,250,.55);
  color:var(--txt);
  background:linear-gradient(165deg,rgba(167,139,250,.35),rgba(167,139,250,.12));
  box-shadow:0 0 16px rgba(167,139,250,.22),inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.3);
}

.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.preset-card{
  height:118px;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border:1.5px solid var(--line);
  transition:transform .3s var(--spring),border-color .25s,box-shadow .25s;
  background:#0a0a14;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 18px rgba(0,0,0,.3);
}
.preset-card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow-md)}
.preset-card.on{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(103,232,249,.2),0 0 26px rgba(103,232,249,.3);
}
.preset-card.on::after{
  content:'✓';
  position:absolute;
  top:8px;right:8px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--cyan);
  color:#0a0a14;
  font-size:13px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 12px rgba(103,232,249,.6),inset 0 1px 0 rgba(255,255,255,.5);
  z-index:4;
}
.preset-card .pv-name{
  position:absolute;
  bottom:8px;left:10px;
  font-size:11px;
  font-weight:700;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  padding:4px 11px;
  border-radius:99px;
  z-index:3;
  display:flex;
  gap:6px;
  align-items:center;
}
.preset-card .pv-links{
  position:absolute;
  top:38px;left:16px;right:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:2;
}
.preset-card .pv-links i{display:block;height:16px}
.preset-card .pv-user{
  position:absolute;
  top:12px;left:0;right:0;
  text-align:center;
  font-size:11px;
  z-index:2;
}
.preset-card .pv-lock{
  position:absolute;
  inset:0;
  background:rgba(5,5,12,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  z-index:5;
  opacity:1;
  transition:.25s;
}
.preset-card:hover .pv-lock{background:rgba(5,5,12,.35)}

.linkitem{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px;
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:border-color .2s,background .2s,transform .25s var(--spring);
}
.linkitem:hover{border-color:var(--line2);background:linear-gradient(170deg,rgba(255,255,255,.09),rgba(255,255,255,.04));transform:translateY(-1px)}
.linkitem .lic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.linkitem .lic img{width:22px;height:22px;object-fit:contain}
.linkitem .info{flex:1;min-width:0}
.linkitem .info b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkitem .info span{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.iconbtns{display:flex;gap:5px;flex-shrink:0}
.iconbtns button{
  width:32px;height:32px;
  border-radius:11px;
  color:var(--dim);
  font-size:13px;
  transition:.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.iconbtns button:hover{color:var(--txt);border-color:rgba(167,139,250,.5);background:linear-gradient(165deg,rgba(167,139,250,.25),rgba(167,139,250,.08))}
.iconbtns button:active{transform:scale(.92)}

.brandgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-top:8px}
.brand{
  aspect-ratio:1;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .25s var(--spring),border-color .2s,background .25s,box-shadow .25s;
  font-size:19px;
}
.brand img{width:22px;height:22px;object-fit:contain;opacity:.85}
.brand:hover{border-color:var(--lg-border-hi);transform:translateY(-2px);background:var(--lg-bg-hover)}
.brand:active{transform:scale(.94)}
.brand.on{border-color:rgba(103,232,249,.6);background:linear-gradient(165deg,rgba(103,232,249,.25),rgba(103,232,249,.08));box-shadow:0 0 14px rgba(103,232,249,.25),inset 0 1px 0 rgba(255,255,255,.3)}
.brand.on img{opacity:1}

.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.stat{padding:20px;text-align:center;transition:transform .3s var(--spring)}
.stat:hover{transform:translateY(-2px)}
.stat .n{
  font-family:'Unbounded',sans-serif;
  font-size:27px;
  background:linear-gradient(120deg,var(--mist),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat .l{font-size:11px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-top:6px}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:8px;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.bar i{
  display:block;
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--mist),var(--cyan));
  box-shadow:0 0 10px rgba(103,232,249,.4),inset 0 1px 0 rgba(255,255,255,.4);
  transition:width .8s var(--ease);
}

.toastwrap{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  pointer-events:none;
  width:max-content;
  max-width:92vw;
}
.toast{
  background:linear-gradient(170deg,rgba(28,26,48,.85),rgba(14,13,26,.9));
  padding:13px 24px;
  border-radius:999px;
  font-size:13.5px;
  animation:toastIn .35s var(--spring);
  display:flex;
  gap:10px;
  align-items:center;
  max-width:92vw;
}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}

.modal-veil{
  position:fixed;
  inset:0;
  background:rgba(4,4,10,.66);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:veilIn .25s;
}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
.modal{
  max-width:460px;
  width:100%;
  padding:32px;
  max-height:88vh;
  max-height:88dvh;
  overflow-y:auto;
  background:linear-gradient(170deg,rgba(26,24,44,.8),rgba(12,11,22,.86));
  animation:modalIn .35s var(--spring);
}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal h3{font-size:19px;margin-bottom:8px}
.modal .sub{color:var(--dim);font-size:13.5px;margin-bottom:8px;line-height:1.6}

.discover-head{padding:44px 0 30px}
.discover-head h2{font-size:clamp(24px,4vw,36px)}
.discover-head p{color:var(--dim);margin-top:10px;font-size:14px}
.discover-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:18px;
  padding-bottom:70px;
}
.pcard{
  overflow:hidden;
  cursor:pointer;
  transition:transform .35s var(--spring),box-shadow .3s,border-color .3s;
  position:relative;
}
.pcard:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 54px rgba(167,139,250,.2),inset 0 1px 0 rgba(255,255,255,.16);
  border-color:rgba(167,139,250,.45);
}
.pcard .cb{height:80px;background:linear-gradient(120deg,#1e1b3a,#0f2a3a);background-size:cover;background-position:center}
.pcard .cav{
  width:60px;height:60px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(20,18,36,.9);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  margin:-32px auto 0;
  display:block;
  position:relative;
  background:#1a1a2e;
  transition:transform .3s var(--spring);
}
.pcard:hover .cav{transform:scale(1.07)}
.pcard .cbody{padding:12px 16px 18px;text-align:center}
.pcard .cbody b{font-size:15px}
.pcard .cbody .u{color:var(--dim);font-size:12px;font-family:'JetBrains Mono',monospace;margin-top:2px}
.pcard .cstats{display:flex;justify-content:center;gap:16px;margin-top:10px;font-size:11.5px;color:var(--dim)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-weight:700;
  padding:3px 10px;
  border-radius:99px;
  letter-spacing:.6px;
  text-transform:uppercase;
  vertical-align:middle;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.badge.pro{background:linear-gradient(165deg,rgba(167,139,250,.85),rgba(103,232,249,.65));color:#0a0a14;border:1px solid rgba(255,255,255,.4);box-shadow:0 0 12px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.5);animation:badgeGlow 3s ease-in-out infinite}
.badge.owner{background:rgba(244,114,182,.18);color:var(--rose);border:1px solid rgba(244,114,182,.45)}
.badge.og{background:rgba(103,232,249,.14);color:var(--cyan);border:1px solid rgba(103,232,249,.4)}
@keyframes badgeGlow{
  0%,100%{box-shadow:0 0 12px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.5)}
  50%{box-shadow:0 0 20px rgba(103,232,249,.55),inset 0 1px 0 rgba(255,255,255,.5)}
}

.admin-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:13.5px;
  flex-wrap:wrap;
}
.admin-row img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.admin-row .flex1{flex:1;min-width:140px}
.admin-row .em{color:var(--dim);font-size:11.5px}

.filedrop{
  border:1.5px dashed var(--line2);
  border-radius:18px;
  padding:18px;
  text-align:center;
  color:var(--dim);
  font-size:12.5px;
  cursor:pointer;
  transition:.25s;
  margin-top:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.filedrop:hover{border-color:rgba(167,139,250,.6);color:var(--txt);background:linear-gradient(165deg,rgba(167,139,250,.14),rgba(167,139,250,.03))}

.spin{
  width:38px;height:38px;
  border:3px solid rgba(255,255,255,.1);
  border-top-color:var(--mist);
  border-radius:50%;
  animation:sp 1s linear infinite;
  margin:80px auto;
}
@keyframes sp{to{transform:rotate(360deg)}}

.empty{text-align:center;color:var(--dim);padding:50px 20px;font-size:14px;line-height:1.8}
.empty .big{font-size:40px;display:block;margin-bottom:14px;filter:grayscale(.4)}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  width:40px;height:40px;
  font-size:17px;
  color:var(--dim);
  margin:3px 3px 0 0;
  cursor:pointer;
  transition:transform .25s var(--spring),border-color .2s,background .25s,box-shadow .25s;
}
.chip:hover{border-color:var(--lg-border-hi);transform:translateY(-2px);background:var(--lg-bg-hover)}
.chip:active{transform:scale(.92)}
.chip.on{border-color:rgba(103,232,249,.6);background:linear-gradient(165deg,rgba(103,232,249,.25),rgba(103,232,249,.08));box-shadow:0 0 12px rgba(103,232,249,.25),inset 0 1px 0 rgba(255,255,255,.3)}

.cursor-dot{
  position:fixed;
  width:9px;height:9px;
  border-radius:50%;
  pointer-events:none;
  z-index:300;
  opacity:.8;
  transition:opacity .6s;
}

.showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;max-width:1000px;margin:0 auto}
.theme-mini{
  height:190px;
  border-radius:22px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border:1px solid var(--line);
  transition:transform .35s var(--spring),box-shadow .3s;
  background:#0a0a14;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.3);
}
.theme-mini:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 18px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14)}
.theme-mini .tlabel{
  position:absolute;
  bottom:12px;left:14px;
  font-size:12px;
  font-weight:700;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  padding:5px 13px;
  border-radius:99px;
  z-index:3;
  display:flex;
  gap:6px;
  align-items:center;
}
.theme-mini .tuser{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:14px;z-index:2}
.theme-mini .tlinks{position:absolute;top:52px;left:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:2}
.theme-mini .tlinks i{display:block;height:26px}

.fab{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:90;
  width:58px;height:58px;
  border-radius:50%;
  border:1px solid rgba(197,177,255,.5);
  background:linear-gradient(165deg,rgba(167,139,250,.55),rgba(103,232,249,.3));
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  color:#fff;
  font-size:22px;
  box-shadow:0 12px 34px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.45);
  display:none;
  align-items:center;
  justify-content:center;
  transition:transform .3s var(--spring);
}
.fab:active{transform:scale(.9)}

.pp-stage{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.pp-bg{position:fixed;inset:0;z-index:0;overflow:hidden}
.pp-stage .pp-bg{position:absolute}
.pp-bg video,.pp-bg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pp-content{
  position:relative;
  z-index:2;
  max-width:520px;
  margin:0 auto;
  padding:calc(56px + env(safe-area-inset-top,0px)) 18px calc(50px + env(safe-area-inset-bottom,0px));
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pp-card{
  position:relative;
  border-radius:32px;
  padding:0 26px 22px;
  background:linear-gradient(172deg,rgba(22,20,38,calc(.6*var(--co,1))),rgba(9,8,18,calc(.68*var(--co,1))));
  backdrop-filter:blur(var(--cb,28px)) saturate(1.5);
  -webkit-backdrop-filter:blur(var(--cb,28px)) saturate(1.5);
  border:1px solid rgba(255,255,255,calc(.16*var(--co,1)));
  box-shadow:0 40px 100px rgba(0,0,0,calc(.55*var(--co,1))),0 0 0 1px rgba(0,0,0,calc(.2*var(--co,1))),0 0 54px color-mix(in srgb,var(--pa,#a78bfa) calc(14%*var(--co,1)),transparent),inset 0 1px 0 rgba(255,255,255,calc(.2*var(--co,1)));
  overflow:hidden;
  animation:cardIn .8s var(--spring) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.pp-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,calc(.09*var(--co,1))),transparent 22%);
  pointer-events:none;
  z-index:5;
}
.pp-banner{
  height:150px;
  background-size:cover;
  background-position:center;
  margin:0 -26px 0;
  position:relative;
}
.pp-banner::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(10,9,18,.75));
}
.pp-nobanner{height:44px}
.pp-head{text-align:center;margin-top:-46px;position:relative;z-index:2;animation:riseIn .6s .1s var(--ease) both}
.pp-head.flat{margin-top:0}
.pp-av{
  width:96px;height:96px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.22);
  box-shadow:0 8px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);
  background:#141428;
  animation:avPulse 4.5s ease-in-out infinite;
}
@keyframes avPulse{
  0%,100%{box-shadow:0 8px 26px rgba(0,0,0,.5)}
  50%{box-shadow:0 8px 40px color-mix(in srgb,var(--pa,#a78bfa) 45%,transparent)}
}
.pp-name{font-size:25px;font-weight:700;margin-top:12px;letter-spacing:.3px}
.pp-name.fx-glow{
  text-shadow:0 0 12px var(--pa,#a78bfa),0 0 34px color-mix(in srgb,var(--pa,#a78bfa) 65%,transparent);
}
.pp-name.fx-neon{
  animation:neonPulse 2.4s ease-in-out infinite;
}
@keyframes neonPulse{
  0%,100%{text-shadow:0 0 8px var(--pa,#a78bfa),0 0 22px color-mix(in srgb,var(--pa,#a78bfa) 55%,transparent);opacity:.92}
  50%{text-shadow:0 0 16px var(--pa,#a78bfa),0 0 46px var(--pa,#a78bfa),0 0 80px color-mix(in srgb,var(--pa,#a78bfa) 70%,transparent);opacity:1}
}
.pp-name.fx-rainbow{
  background:linear-gradient(90deg,#f87171,#fbbf24,#34d399,#38bdf8,#a78bfa,#f472b6,#f87171);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:rainbowSlide 7s linear infinite;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.22));
}
@keyframes rainbowSlide{to{background-position:300% 0}}
.pp-badges{display:flex;justify-content:center;gap:7px;margin-top:9px;flex-wrap:wrap}
.pp-badge{
  width:26px;height:26px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  background:linear-gradient(165deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px rgba(0,0,0,.3);
  cursor:default;
}
.pp-badge.pro{background:linear-gradient(165deg,rgba(167,139,250,.6),rgba(103,232,249,.35));border-color:rgba(197,177,255,.55);box-shadow:0 0 14px rgba(167,139,250,.4),inset 0 1px 0 rgba(255,255,255,.45)}
.pp-badge.owner{background:linear-gradient(165deg,rgba(244,114,182,.5),rgba(244,114,182,.15));border-color:rgba(244,114,182,.5)}
.pp-user{font-size:12.5px;opacity:.6;font-family:'JetBrains Mono',monospace;margin-top:8px}
.pp-status{
  display:inline-block;
  margin-top:12px;
  font-size:12.5px;
  padding:7px 18px;
  border-radius:99px;
  background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(0,0,0,.28);
}
.pp-bio{margin-top:15px;font-size:13.5px;line-height:1.7;opacity:.82;white-space:pre-wrap}
.pp-links{margin-top:24px;display:flex;flex-direction:column;gap:11px}
.pp-link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 20px;
  border-radius:var(--pr,16px);
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 45%,rgba(255,255,255,.02) 72%,rgba(255,255,255,.06));
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 8px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 1px rgba(255,255,255,.04);
  color:inherit;
  transition:transform .3s var(--spring),box-shadow .3s,background .3s,border-color .3s,filter .2s;
  position:relative;
  overflow:hidden;
  animation:riseIn .5s var(--ease) both;
}
.pp-link:nth-child(1){animation-delay:.08s}
.pp-link:nth-child(2){animation-delay:.14s}
.pp-link:nth-child(3){animation-delay:.2s}
.pp-link:nth-child(4){animation-delay:.26s}
.pp-link:nth-child(5){animation-delay:.32s}
.pp-link:nth-child(6){animation-delay:.38s}
.pp-link:nth-child(n+7){animation-delay:.44s}
.pp-link::after{
  content:'';
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);
  transition:left .65s var(--ease);
  pointer-events:none;
}
.pp-link:hover::after{left:130%}
.pp-link:hover{
  transform:translateY(-3px) scale(1.014);
  background:linear-gradient(165deg,rgba(255,255,255,.19),rgba(255,255,255,.08) 45%,rgba(255,255,255,.04) 72%,rgba(255,255,255,.1));
  border-color:rgba(255,255,255,.3);
}
.pp-link:active{transform:scale(.975);filter:brightness(1.14)}
.pp-link.glow:hover{box-shadow:0 0 30px color-mix(in srgb,var(--pa,#a78bfa) 55%,transparent),0 12px 30px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.35)}
.pp-link.outline{background:rgba(255,255,255,.03);border:1.5px solid var(--pa,#a78bfa);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 8px 24px rgba(0,0,0,.3)}
.pp-link.solid{
  background:linear-gradient(165deg,color-mix(in srgb,var(--pa,#a78bfa) 88%,#fff),color-mix(in srgb,var(--pa,#a78bfa) 88%,#000));
  color:#0a0a14;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 10px 28px color-mix(in srgb,var(--pa,#a78bfa) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.55);
}
/* Exact button treatment ported from bia-bio's .btn class */
.pp-link.bia{
  color:#67cae2;
  background:linear-gradient(90deg,#3399c06b,#3365c04a);
  border:1px solid #2d5db18f;
}
.pp-link.bia:hover{
  background:linear-gradient(90deg,#3399c0a0,#3365c080);
  border-color:#67cae2;
}
/* Exact orbiting-dot decoration ported from gunslol's .profile-container::after */
.pp-orbit-wrap{position:relative;display:inline-block;border-radius:50%}
.pp-orbit-wrap::after{
  content:'';
  position:absolute;
  top:-5px;left:-5px;right:-5px;bottom:-5px;
  border-radius:50%;
  background:radial-gradient(circle at 10px 10px,var(--pa,#00ced1) 15%,transparent 25%);
  animation:ppOrbit 3s linear infinite;
  z-index:-1;
  filter:blur(2px);
  box-shadow:0 0 10px var(--pa,#00ced1);
}
@keyframes ppOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.pp-link .li{font-size:22px;width:32px;text-align:center;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pp-link .li img{width:24px;height:24px;object-fit:contain}
.pp-link .lt{flex:1;min-width:0;text-align:left}
.pp-link .lt b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-link .lt span{font-size:11.5px;opacity:.65;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-link .arrow{opacity:.5;flex-shrink:0;transition:transform .25s var(--ease)}
.pp-link:hover .arrow{transform:translate(2px,-2px)}

.pp-iconrow{margin-top:24px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.pp-icon{
  width:52px;height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:inherit;
  background:linear-gradient(165deg,rgba(255,255,255,.15),rgba(255,255,255,.04) 50%,rgba(255,255,255,.07));
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 8px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .3s var(--spring),box-shadow .3s,background .3s,filter .2s;
  animation:riseIn .5s var(--ease) both;
  position:relative;
  overflow:hidden;
}
.pp-icon::before{
  content:'';
  position:absolute;
  inset:1px 1px auto 1px;
  height:48%;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);
  opacity:.6;
  pointer-events:none;
}
.pp-icon:nth-child(1){animation-delay:.08s}
.pp-icon:nth-child(2){animation-delay:.13s}
.pp-icon:nth-child(3){animation-delay:.18s}
.pp-icon:nth-child(4){animation-delay:.23s}
.pp-icon:nth-child(5){animation-delay:.28s}
.pp-icon:nth-child(n+6){animation-delay:.33s}
.pp-icon img{width:23px;height:23px;object-fit:contain}
.pp-icon:hover{transform:translateY(-4px) scale(1.08);background:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.08))}
.pp-icon.glow:hover{box-shadow:0 0 26px color-mix(in srgb,var(--pa,#a78bfa) 60%,transparent),0 10px 26px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.4)}
.pp-icon:active{transform:scale(.92);filter:brightness(1.15)}

.pp-widgets{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.pp-widget{
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);
  animation:riseIn .5s .3s var(--ease) both;
}
.pp-widget iframe{display:block;width:100%;border:none}
.pp-widget .wtext{padding:18px;font-size:14px;line-height:1.7;white-space:pre-wrap;text-align:left}
.pp-widget img{width:100%;display:block}

.pp-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:26px;
  gap:12px;
}
.pp-views{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-family:'JetBrains Mono',monospace;
  opacity:.7;
}
.pp-actions{display:flex;gap:10px}
.pp-actions button{
  color:inherit;
  padding:9px 18px;
  border-radius:999px;
  font-size:12.5px;
  transition:transform .3s var(--spring),background .25s,box-shadow .25s,filter .2s;
  display:flex;
  gap:7px;
  align-items:center;
  overflow:hidden;
}
.pp-actions button:hover{transform:scale(1.06);background:var(--lg-bg-hover)}
.pp-actions button:active{transform:scale(.94);filter:brightness(1.15)}
.pp-actions button.liked{
  background:linear-gradient(165deg,rgba(244,114,182,.42),rgba(244,114,182,.14));
  border-color:rgba(244,114,182,.6);
  box-shadow:0 0 18px rgba(244,114,182,.3),inset 0 1px 0 rgba(255,255,255,.35);
}
.pp-foot{
  text-align:center;
  margin-top:26px;
  font-size:11px;
  opacity:.45;
  font-family:'JetBrains Mono',monospace;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.pp-foot img{width:16px;height:16px;object-fit:contain;opacity:.8}

.public-page{position:fixed;inset:0;z-index:60;background:var(--ink)}
.public-page .pp-back{
  position:absolute;
  top:calc(14px + env(safe-area-inset-top,0px));
  left:16px;
  z-index:5;
  color:#fff;
  padding:9px 18px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
  overflow:hidden;
  transition:transform .25s var(--spring),background .25s;
}
.public-page .pp-back:hover{background:var(--lg-bg-hover)}
.public-page .pp-back:active{transform:scale(.94)}

.pp-tw{display:inline-block;min-width:1ch}
.pp-tw::after{
  content:'|';
  margin-left:2px;
  color:var(--pa,#a78bfa);
  animation:twCaret 1s steps(2) infinite;
}
@keyframes twCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

.pp-glare{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:6;
  opacity:0;
  transition:opacity .4s;
  background:radial-gradient(340px 260px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 62%);
  mix-blend-mode:overlay;
}

.pp-enter{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:rgba(4,4,10,.55);
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  transition:opacity .7s var(--ease),backdrop-filter .7s;
  opacity:1;
}
.pp-enter.gone{opacity:0;backdrop-filter:blur(0px);pointer-events:none}
.pp-enter .pe-txt{
  font-size:clamp(17px,3vw,24px);
  letter-spacing:3px;
  color:#fff;
  text-shadow:0 0 22px var(--ea,#a78bfa),0 0 60px color-mix(in srgb,var(--ea,#a78bfa) 60%,transparent);
  animation:enterPulse 1.7s ease-in-out infinite;
  user-select:none;
}
@keyframes enterPulse{0%,100%{transform:scale(1);opacity:.82}50%{transform:scale(1.06);opacity:1}}

.pp-audio{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:55;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border-radius:999px;
  background:var(--lg-bg);
  backdrop-filter:var(--lg-blur);
  -webkit-backdrop-filter:var(--lg-blur);
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-shadow),var(--lg-inset);
  animation:riseIn .6s var(--ease) both;
}
.pp-audio button{
  background:none;
  border:none;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  line-height:1;
  padding:2px;
  transition:transform .25s var(--spring);
}
.pp-audio button:active{transform:scale(.85)}
.pp-audio input[type=range]{
  width:88px;
  accent-color:var(--mist);
  cursor:pointer;
}

.hint{font-size:11.5px;color:var(--dim);margin-top:8px;line-height:1.55}

.pp-anim{position:absolute;inset:-20%;z-index:0;pointer-events:none}

.pp-tex{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%,transparent 52%,rgba(2,2,8,.52) 100%);
}
.pp-tex::after{
  content:'';
  position:absolute;
  inset:0;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  mix-blend-mode:overlay;
}
.pp-orb{
  position:absolute;
  width:52vmin;
  height:52vmin;
  min-width:340px;
  min-height:340px;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
}
.pp-orb.o1{top:-14%;left:-10%;animation:orbFloatA 19s ease-in-out infinite alternate}
.pp-orb.o2{bottom:-16%;right:-12%;opacity:.4;animation:orbFloatB 24s ease-in-out infinite alternate}
@keyframes orbFloatA{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(14%,10%) scale(1.18)}
}
@keyframes orbFloatB{
  0%{transform:translate(0,0) scale(1.1)}
  100%{transform:translate(-12%,-12%) scale(.94)}
}

.anim-aurora{
  background:
    radial-gradient(60% 45% at 18% 18%,rgba(52,211,153,.5),transparent 68%),
    radial-gradient(55% 50% at 82% 26%,rgba(103,232,249,.44),transparent 66%),
    radial-gradient(65% 55% at 50% 88%,rgba(167,139,250,.46),transparent 70%),
    linear-gradient(180deg,#02100e,#040414 60%,#02060f);
  filter:blur(6px) saturate(1.45);
  animation:auroraDrift 16s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  33%{transform:translate(-3%,2%) scale(1.06) rotate(1.2deg)}
  66%{transform:translate(3%,-2%) scale(1.03) rotate(-1.2deg)}
  100%{transform:translate(-2%,3%) scale(1.08) rotate(.6deg)}
}
.anim-aurora::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(38% 30% at 65% 60%,rgba(52,211,153,.22),transparent 70%);
  animation:auroraPulse 7s ease-in-out infinite alternate;
}
@keyframes auroraPulse{from{opacity:.4;transform:translateY(0)}to{opacity:1;transform:translateY(-4%)}}

.anim-nebula{
  background:
    radial-gradient(42% 38% at 28% 30%,rgba(232,121,249,.52),transparent 70%),
    radial-gradient(48% 44% at 74% 62%,rgba(129,90,246,.55),transparent 70%),
    radial-gradient(30% 26% at 58% 22%,rgba(244,114,182,.4),transparent 72%),
    radial-gradient(24% 22% at 40% 76%,rgba(103,232,249,.32),transparent 72%),
    #050214;
  filter:blur(12px) saturate(1.55);
  animation:nebulaSpin 40s linear infinite;
}
@keyframes nebulaSpin{from{transform:rotate(0deg) scale(1.18)}to{transform:rotate(360deg) scale(1.18)}}
.anim-nebula::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 24%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 68%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.8px 1.8px at 58% 14%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 44%,rgba(255,255,255,.65),transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 78%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1.1px 1.1px at 22% 88%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 40%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(1.2px 1.2px at 64% 92%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.7px 1.7px at 92% 18%,rgba(255,255,255,.85),transparent 60%);
  filter:blur(0);
  animation:starTwinkle 5s ease-in-out infinite alternate;
}
@keyframes starTwinkle{from{opacity:.5}to{opacity:1}}

.anim-holo{
  background:conic-gradient(from 0deg at 50% 50%,
    #ff7ad9,#ffd36e,#7affc9,#6ec3ff,#b78bff,#ff7ad9);
  filter:blur(52px) saturate(1.3) brightness(.74);
  animation:holoSpin 22s linear infinite;
}
@keyframes holoSpin{from{transform:rotate(0deg) scale(1.35)}to{transform:rotate(360deg) scale(1.35)}}
.anim-holo::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(2,2,10,.72) 78%);
}

.anim-gold{
  background:
    linear-gradient(115deg,transparent 25%,rgba(251,191,36,.24) 42%,rgba(255,236,170,.42) 50%,rgba(251,191,36,.24) 58%,transparent 75%),
    radial-gradient(80% 60% at 50% 110%,rgba(120,72,10,.5),transparent 70%),
    linear-gradient(180deg,#0c0803,#050302);
  background-size:300% 100%,100% 100%,100% 100%;
  animation:goldShimmer 8s ease-in-out infinite;
}
@keyframes goldShimmer{
  0%{background-position:120% 0,0 0,0 0}
  55%{background-position:-60% 0,0 0,0 0}
  100%{background-position:-120% 0,0 0,0 0}
}
.anim-gold::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%,rgba(255,224,138,.9),transparent 60%),
    radial-gradient(1.1px 1.1px at 66% 20%,rgba(255,224,138,.7),transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 66%,rgba(255,224,138,.85),transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 78%,rgba(255,224,138,.6),transparent 60%);
  animation:starTwinkle 4s ease-in-out infinite alternate;
}

.anim-ember{
  background:
    radial-gradient(70% 55% at 50% 115%,rgba(249,115,22,.55),rgba(190,18,60,.32) 55%,transparent 78%),
    radial-gradient(40% 30% at 26% 96%,rgba(251,146,60,.32),transparent 70%),
    radial-gradient(40% 30% at 76% 100%,rgba(225,29,72,.3),transparent 70%),
    linear-gradient(180deg,#0b0306,#160308);
  animation:emberBreath 5.5s ease-in-out infinite alternate;
}
@keyframes emberBreath{
  from{filter:brightness(.85) saturate(1.1)}
  to{filter:brightness(1.32) saturate(1.5)}
}
.anim-ember::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 30% 84%,rgba(255,160,90,.9),transparent 60%),
    radial-gradient(1.5px 1.5px at 54% 72%,rgba(255,120,70,.8),transparent 60%),
    radial-gradient(1.8px 1.8px at 72% 88%,rgba(255,180,110,.85),transparent 60%),
    radial-gradient(1.3px 1.3px at 42% 60%,rgba(255,140,80,.7),transparent 60%);
  animation:emberRise 6s linear infinite;
}
@keyframes emberRise{
  from{transform:translateY(6%);opacity:.9}
  to{transform:translateY(-14%);opacity:0}
}

.anim-ocean{
  background:
    radial-gradient(90% 55% at 50% -18%,rgba(56,189,248,.4),transparent 70%),
    radial-gradient(75% 55% at 20% 105%,rgba(14,116,144,.55),transparent 72%),
    radial-gradient(75% 55% at 84% 108%,rgba(30,64,175,.52),transparent 72%),
    linear-gradient(180deg,#020918,#02131f 60%,#010a14);
  animation:oceanSway 12s ease-in-out infinite alternate;
}
@keyframes oceanSway{
  from{transform:translateX(-2%) scale(1.05)}
  to{transform:translateX(2%) scale(1.1)}
}
.anim-ocean::after{
  content:'';
  position:absolute;
  left:-10%;right:-10%;
  top:18%;
  height:34%;
  background:
    radial-gradient(50% 100% at 30% 50%,rgba(103,232,249,.14),transparent 70%),
    radial-gradient(50% 100% at 70% 50%,rgba(56,189,248,.12),transparent 70%);
  filter:blur(14px);
  animation:causticDrift 9s ease-in-out infinite alternate;
}
@keyframes causticDrift{
  from{transform:translateX(-4%) skewX(-4deg)}
  to{transform:translateX(4%) skewX(4deg)}
}

.pp-stage[data-anim="gold"]{--pa:#fbbf24}
.pp-stage[data-anim="gold"] .pp-av{border-color:rgba(251,191,36,.4)}

#app.page-in{animation:pageIn .55s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.035;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(130% 90% at 50% -10%,transparent 45%,rgba(0,0,0,.4) 100%);
  mix-blend-mode:multiply;
}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}

@media(max-width:1100px){
  .wrap{padding:0 18px}
  .dash{grid-template-columns:minmax(340px,420px) 1fr;gap:18px}
  .mockdeck{height:500px}
  .mockcard{width:224px;height:339px}
  .mframe{transform:scale(.5657)}
  .mockcard.c2{left:20%}
}

@media(max-width:920px){
  .dash{grid-template-columns:1fr;padding-top:18px}
  .preview-shell{position:static;display:none}
  body.previewing .preview-shell{display:block}
  body.previewing .dash > .panel{display:none}
  .preview-frame{height:calc(100dvh - 200px);min-height:440px}
  .fab{display:flex}
  .navlinks .nl.hidem{display:none}
  .hero{grid-template-columns:1fr;min-height:calc(100svh - var(--nav-h));padding:44px 0;gap:14px;text-align:center}
  .hero-copy{text-align:center}
  .hero-logo{margin:0 auto 8px}
  .hero p{margin:22px auto 34px}
  .hero .cta{justify-content:center}
  .claim{margin:38px auto 0}
  .mockdeck{height:440px;max-width:560px;margin:0 auto;width:100%}
  .mockcard{width:206px;height:312px}
  .mframe{transform:scale(.5202)}
  .mockcard.c1{left:-2%}
  .mockcard.c2{left:29%}
  .mockcard.c3{right:-2%}
  section.land{padding:64px 0}
  .preset-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  .authbox{margin:4vh auto;padding:30px 24px}
  .panel{padding:18px}
  .modal{padding:26px 20px}
  .statgrid{grid-template-columns:1fr 1fr}
  .discover-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .pcard .cb{height:64px}
  .pcard .cav{width:52px;height:52px;margin-top:-28px}
  .admin-row .btn{padding:7px 12px;font-size:11px}
  .hero-logo{width:80px;height:80px}
  .mockdeck{height:400px}
  .mockcard{width:184px;height:279px}
  .mframe{transform:scale(.4646)}
}

@media(max-width:560px){
  :root{--nav-h:58px}
  .logo{font-size:16px}
  .logo img{width:30px;height:30px}
  .navlinks .btn{padding:9px 14px;font-size:12px}
  .hero .cta .btn{width:100%;max-width:320px;margin:0 auto}
  .claim{flex-wrap:nowrap}
  .claim span{padding-left:12px;font-size:12.5px}
  .grid3{grid-template-columns:1fr}
  .tabs button{min-width:0;font-size:11.5px;padding:9px 4px}
  .pp-content{padding-left:12px;padding-right:12px}
  .pp-card{padding:0 18px 18px;border-radius:26px}
  .pp-banner{margin:0 -18px;height:120px}
  .pp-name{font-size:21px}
  .pp-av{width:86px;height:86px}
  .pp-link{padding:13px 16px;gap:11px}
  .pp-link .li{width:28px;font-size:19px}
  .pp-link .li img{width:21px;height:21px}
  .pp-icon{width:46px;height:46px}
  .pp-icon img{width:20px;height:20px}
  .preset-grid{grid-template-columns:1fr 1fr;gap:9px}
  .preset-card{height:104px}
  .brandgrid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}
  .toastwrap{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .theme-mini{height:170px}
  footer{padding:34px 0}
  .mockdeck{height:360px}
  .mockcard{width:164px;height:248px}
  .mframe{transform:scale(.4141)}
  .mockcard.c2{left:26%}
}

@media(max-width:400px){
  .hero h1{font-size:31px}
  .statgrid{gap:9px}
  .stat{padding:15px 10px}
  .stat .n{font-size:21px}
  .iconbtns button{width:29px;height:29px}
  .preset-card .pv-name{font-size:10px;padding:3px 9px}
  .mockcard.c1{display:none}
  .mockcard.c2{left:4%}
  .mockdeck{height:340px}
}

@media(hover:none){
  .btn:hover,.opt:hover,.sw:hover,.pcard:hover,.feat:hover,.preset-card:hover,.pp-link:hover,.pp-icon:hover{transform:none}
  .btn:active{transform:scale(.96)}
  .pp-link:active{transform:scale(.98)}
  .pp-icon:active{transform:scale(.92)}
  input,textarea,select{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;
    animation-iteration-count:1!important;
    transition-duration:.001s!important;
  }
}

/* ============================================================
   BIA PROFILE SYSTEM — exact port of bia-bio
   ============================================================ */

.pp-stage.biav{display:flex;justify-content:center;align-items:flex-start}
.pp-stage.biav h1,.pp-stage.biav h2,.pp-stage.biav h3,.pp-stage.biav button,.pp-stage.biav input,.pp-stage.biav .pp-link .lt b,.pp-stage.biav .pp-link .lt span{font-family:inherit}
.bia-popbox,.badge-tooltip{font-family:var(--profileFont,inherit)}
.pp-stage.biav .pp-links{width:100%;max-width:28rem;margin-top:2rem}
.pp-stage.biav .pp-link.bia{color:var(--btc,#67cae2)}
.pp-stage.biav .pp-bg{position:fixed;inset:0}
.public-page .pp-stage.biav .pp-bg{height:100vh;height:100dvh}
.preview-frame{transform:translateZ(0)}
.pp-stage.biav ::selection{color:#000;background:#fff}

.pp-stage.biav .bia-media{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.7;
  filter:contrast(1.2);
}
.pp-stage.biav video.bia-media{opacity:0;transition:opacity .9s ease}
.pp-stage.biav video.bia-media[poster]{opacity:.7}
.pp-stage.biav video.bia-media.ready{opacity:.7}

.bia-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:650px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:15px;
  padding:0 16px 60px;
  margin:0 auto;
  will-change:transform;
}

.bia-container{
  position:relative;
  display:flex;
  align-items:center;
  flex-direction:column;
  background:rgba(9,11,20,calc(var(--cop,0)*.78));
  backdrop-filter:blur(var(--cbl,5px)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--cbl,5px)) saturate(1.3);
  border-radius:var(--pr,15px);
  height:auto;
  min-height:15rem;
  padding:35px 15px;
  width:100%;
  max-width:650px;
  text-align:center;
  border:2px solid rgba(175,175,175,0.048);
  margin-top:80px;
  transition:transform .5s cubic-bezier(0.03,0.98,0.52,0.99), height .5s cubic-bezier(0.03,0.98,0.52,0.99);
  overflow:visible;
  transform-style:preserve-3d;
  z-index:1;
}

.bia-anim{opacity:0;transform:translateY(20px);will-change:opacity,transform}
.bia-anim.show{opacity:1;transform:translateY(0)}

.bia-avatar{
  margin-top:14px;
  z-index:1;
  border-radius:50%;
  height:115px;
  width:115px;
  object-fit:cover;
  outline:3px solid rgba(255,255,255,0.301);
  pointer-events:none;
}

.bia-layout{
  align-items:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:27rem;
  text-align:center;
}

.bia-username{
  font-weight:600;
  font-size:50px;
  width:fit-content;
  pointer-events:none;
  margin:0;
  animation:biaGlow 1s ease-in-out infinite alternate;
}
.bia-username span{font-weight:600;font-size:40px;pointer-events:none}
@keyframes biaGlow{
  from{text-shadow:0 0 12px var(--pa,currentColor)}
  to{text-shadow:0 0 26px var(--pa,currentColor),0 0 44px var(--pa,currentColor)}
}

.bia-badges{
  margin-bottom:17px;
  margin-top:8px;
  align-items:center;
  background-color:rgba(255,255,255,0.08);
  border:2px solid rgba(255,255,255,0.04);
  border-radius:25px;
  display:flex;
  gap:5.5px;
  justify-content:center;
  padding:6px 10px;
}
.bia-badge{
  position:relative;
  font-size:20.5px;
  display:flex;
  align-items:center;
  color:var(--pa,var(--btc,#ffffff));
}
.bia-badge svg{filter:drop-shadow(0 0 1.5px currentColor)}

.badge-tooltip{
  position:fixed;
  background-color:rgba(0,0,0,0.85);
  color:#fff;
  font-size:15px;
  font-weight:600;
  border-radius:1rem;
  padding:4px 16px;
  z-index:100;
  visibility:hidden;
  opacity:0;
  transform:translateX(-50%) translateY(4px);
  box-shadow:0 3px 10px rgba(0,0,0,0.3);
  white-space:nowrap;
  pointer-events:none;
  transition:all .3s cubic-bezier(0.175,0.885,0.32,1.275);
}
.badge-tooltip.show{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0)}

.bia-bio{
  font-weight:570;
  font-size:17px;
  margin:5px 0 0;
  height:23px;
  color:currentColor;
}

.bia-presence{
  margin-top:20px;
  align-items:center;
  display:inline-flex;
  gap:10px;
  text-overflow:ellipsis;
  background-color:rgba(255,255,255,0.07);
  border:2px solid rgba(255,255,255,0.05);
  border-radius:25px;
  box-sizing:border-box;
  padding:10px;
  white-space:nowrap;
}
.bia-pav{display:flex;position:relative}
.bia-pav img{border-radius:50%;height:70px;width:70px;object-fit:cover}
.bia-pav .bia-dot{
  position:absolute;bottom:2px;right:2px;
  height:17px;width:17px;
  border-radius:50%;
  background:#3ba55d;
  border:3px solid rgba(20,20,20,.85);
  box-sizing:border-box;
}
.bia-pinfo{display:flex;flex-direction:column;gap:2px;justify-content:center;text-align:left;padding-right:8px}
.bia-puser{align-items:center;display:flex}
.bia-puser span{font-weight:600;font-size:20px;color:currentColor}
.bia-puser .bia-pbadge{display:flex;align-items:center;margin-left:6px;font-size:16px;font-style:normal}
.bia-puser .bia-pbadge svg{filter:drop-shadow(0 0 1.5px currentColor)}
.bia-pinfo h3{
  font-size:13.5px;
  color:currentColor;
  opacity:.7;
  margin:0 2px 0 0;
  font-style:italic;
  font-weight:400;
}

.bia-linked{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
  filter:drop-shadow(0 0 0.9px currentColor);
  transition:all .3s ease;
  font-size:1.09em;
}
.bia-la{
  transition:all .3s;
  display:flex;
  align-items:center;
  position:relative;
  text-decoration:none;
  color:currentColor;
}
.bia-la img{width:1.8em;height:1.8em}
.bia-la svg{transition:transform .3s ease}
.bia-la:hover img,.bia-la:hover svg{transform:scale(1.18)}
.bia-la::before{
  content:attr(data-type);
  opacity:0;
  color:#fff;
  position:absolute;
  font-size:15px;
  font-weight:600;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  border-radius:1rem;
  padding:2px 16px;
  z-index:1;
  filter:none;
  box-shadow:none;
  white-space:nowrap;
  transition:opacity .2s;
}
.bia-la:hover::before{opacity:.8}

.bia-widgets{margin-top:1.6rem;width:100%;max-width:28rem;display:flex;flex-direction:column;gap:12px}

.bia-stats{
  display:flex;
  align-items:center;
  align-self:flex-start;
  margin-top:26px;
  margin-bottom:-20px;
  gap:.5rem;
  padding:6px 12px;
  border-radius:8px;
  color:currentColor;
  opacity:.35;
  transition:all .3s ease;
  z-index:5;
  filter:blur(10px);
}
.bia-stats:hover{filter:blur(0);opacity:1}
.bia-stat{
  display:flex;
  align-items:center;
  gap:.4rem;
  position:relative;
  padding:2px 4px;
  color:currentColor;
}
.bia-stat.asbtn{
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:15px;
  transition:transform .2s;
}
.bia-stat.asbtn:active{transform:scale(.9)}
.bia-stat.asbtn.liked{color:#fb7185}
.bia-stat::before{
  content:attr(data-type);
  opacity:0;
  color:#fff;
  position:absolute;
  font-size:15px;
  font-weight:600;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  border-radius:1rem;
  padding:2px 16px;
  z-index:10;
  white-space:nowrap;
  transition:opacity .3s;
}
.bia-stat:hover::before{opacity:.8}
.bia-sep{
  height:16px;
  width:2px;
  background-color:rgba(255,255,255,0.15);
  margin:0 2px;
  border-radius:25px;
}

.bia-music{
  position:relative;
  display:flex;
  align-items:center;
  flex-direction:column;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:15px;
  min-height:5rem;
  padding:35px 15px;
  width:100%;
  max-width:650px;
  max-height:100px;
  text-align:center;
  border:2px solid rgba(175,175,175,0.048);
  margin:-40px auto 0;
  will-change:transform,height;
  transition:height .5s ease,min-height .5s ease;
  overflow:hidden;
}
.bia-player{
  width:min(500px,100%);
  border-radius:10px;
  font-size:large;
}
.bia-ptimeline{display:flex;align-items:center;margin-top:-12px;font-size:14px}
.bia-timeline{
  flex-grow:1;
  height:4px;
  background-color:#ffffff36;
  border-radius:2px;
  position:relative;
  cursor:pointer;
}
.bia-tprog{
  position:absolute;top:0;left:0;
  height:100%;width:0%;
  background-color:var(--pa,currentColor);
  border-radius:2px;
}
.bia-pcontrols{
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:30px;
  gap:4px;
}
.bia-pcontrols .bia-play,.bia-pcontrols .bia-pause{font-size:40px;width:1em;height:1em;transform:scale(1.35)}
.bia-prev,.bia-next{transition:opacity .4s ease;cursor:pointer}
.bia-prev:hover,.bia-next:hover{opacity:1 !important}

.bia-volume{
  display:flex;
  align-items:center;
  gap:10px;
  position:fixed;
  left:.5%;
  top:1%;
  opacity:.9;
  z-index:65;
  color:#fff;
}
.bia-volicon{z-index:2}
.bia-volslider{
  width:120px;
  height:4px;
  background:rgba(255,255,255,0.2);
  outline:none;
  opacity:0;
  transition:opacity .2s ease-in,opacity .7s ease-out;
  -webkit-appearance:none;
  appearance:none;
  border-radius:2px;
  position:absolute;
  left:100%;
  margin-left:10px;
}
.bia-volume:hover .bia-volslider,.bia-volslider:hover{opacity:1;transition:opacity .2s ease-in}
.bia-volslider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:12px;height:12px;
  background:var(--pa,#fff);border-radius:50%;
}

.bia-lockscreen{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background-color:rgba(22,22,22,0.514);
  z-index:9999;
  display:flex;
  justify-content:center;
  align-items:center;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  will-change:opacity,transform;
  backface-visibility:hidden;
  transform:translateZ(0);
  cursor:pointer;
}
.bia-lockcontent{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  will-change:transform,opacity;
}
.bia-clicktext{
  color:#fff;
  font-size:18px;
  font-weight:500;
  opacity:.8;
  text-shadow:0 0 14px var(--pa,rgba(255,255,255,0.3));
  animation:biaLockPulse 1.5s infinite ease-in-out;
  will-change:opacity,transform;
  user-select:none;
}
@keyframes biaLockPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.05)}
  100%{transform:scale(1)}
}

.bia-popup{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background-color:rgba(0,0,0,0.596);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:10000;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.bia-popup.active{opacity:1;visibility:visible}
.bia-popbox{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background-color:rgba(0,0,0,0.815);
  border-radius:8px;
  box-shadow:10px 8px 12px rgba(0,0,0,0.404);
  width:100%;
  max-width:360px;
  padding:24px 16px;
  transform:scale(0.8);
  opacity:0;
  transition:transform .3s ease,opacity .3s ease;
  text-align:center;
  border:4px solid rgba(0,0,0,0.151);
}
.bia-popup.active .bia-popbox{transform:scale(1);opacity:1}
.bia-popmsg{margin:5px 0 16px;font-size:15px;color:#fff;line-height:1.4}
.bia-popbtns{display:flex;justify-content:center;gap:10px}
.bia-popbtn{
  padding:8px 16px;
  border-radius:4px;
  font-size:14px;
  font-weight:500;
  border:none;
  cursor:pointer;
  transition:background-color .2s ease;
  font-family:inherit;
  color:#fff;
}
.bia-popbtn.cancel{background-color:#531818}
.bia-popbtn.cancel:hover{background-color:#491515}
.bia-popbtn.confirm{background-color:#2a6b16}
.bia-popbtn.confirm:hover{background-color:#245c13}

/* video preset picker in Looks tab */
.vidgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.vidcard{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1.5px solid var(--lg-border,rgba(255,255,255,.14));
  cursor:pointer;
  aspect-ratio:16/10;
  background:#000;
  transition:transform .25s var(--spring,ease),border-color .25s,box-shadow .25s;
}
.vidcard video{width:100%;height:100%;object-fit:cover;display:block}
.vidcard:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.35)}
.vidcard.on{border-color:var(--mist,#a78bfa);box-shadow:0 0 18px rgba(167,139,250,.4)}
.vidcard .vidname{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 10px 8px;
  font-size:12px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  color:#fff;
}
.vidcard .vidres{
  font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:99px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
}

/* mframe / preview adjustments for the bia layout */
.mframe .pp-stage.biav{align-items:flex-start}
.mframe .bia-content{padding:0 10px 30px;max-width:100%}
.mframe .bia-container{margin-top:34px;padding:24px 10px;min-height:0}
.mframe .bia-avatar{height:84px;width:84px}
.mframe .bia-username{font-size:34px}
.mframe .bia-username span{font-size:27px}
.mframe .bia-stats{filter:none;opacity:.55}
.mframe .bia-music{margin-top:-24px;padding:24px 12px}

@media only screen and (min-width:1201px){
  .bia-content,.bia-container,.bia-music{max-width:800px}
}
@media only screen and (min-width:1921px){
  .bia-content,.bia-container,.bia-music{max-width:900px}
}
@media (max-width:768px){
  .bia-container{padding:25px 10px;min-height:12rem}
}
@media (max-width:480px){
  .bia-container{
    padding:20px 8px;
    min-height:10rem;
    border-radius:10px;
    border:4px solid rgba(175,175,175,0.034);
  }
  .bia-avatar{margin-top:6px}
  .bia-username{font-size:30px}
  .bia-username span{font-size:24px}
  .bia-volume{display:none}
  .bia-music{border:4px solid rgba(175,175,175,0.034);border-radius:10px}
}

/* whole-card previews (discover + templates) */
.dprev{position:relative;overflow:hidden;background:#08070f}
.dprev .mframe{pointer-events:none}
.pcard .dprev{height:215px;border-radius:18px 18px 0 0}
.tpl-card .tpl-prev.dprev{height:215px;border-radius:16px}
.tplframe.dprev{width:264px;height:420px}
.pcard .cbody{position:relative;z-index:2}

/* real mini previews in the editor preset grid */
.preset-card.dprev{height:150px}
.preset-card.dprev .pv-name{z-index:6}
.preset-card.dprev .mframe{pointer-events:none}
@media (max-width:900px){.preset-card.dprev{height:124px}}

/* discover lazy placeholders shimmer softly until they render */
.dprev[data-lz]:empty::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  background-size:200% 100%;
  animation:dprevShimmer 1.4s linear infinite;
}
@keyframes dprevShimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* thanks page */
.thanks-check{
  width:96px;height:96px;margin:0 auto;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(167,139,250,.08);
  border:1px solid rgba(167,139,250,.25);
  box-shadow:0 0 40px rgba(167,139,250,.18);
}
.tc-ring{stroke-dasharray:151;stroke-dashoffset:151;animation:tcRing .7s ease-out forwards}
.tc-tick{stroke-dasharray:40;stroke-dashoffset:40;animation:tcTick .45s .5s ease-out forwards}
@keyframes tcRing{to{stroke-dashoffset:0}}
@keyframes tcTick{to{stroke-dashoffset:0}}
.thanks-check.go{animation:tcPop .5s var(--spring,cubic-bezier(.34,1.56,.64,1))}
@keyframes tcPop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
.thanks-perks{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px;
  margin:24px auto 0;
  padding:18px 20px;
  border-radius:16px;
  max-width:440px;
  text-align:left;
}
.thanks-perks .tp{font-size:13px;color:var(--txt,#e8e6f2);display:flex;align-items:center;gap:9px}
.thanks-perks .tp span{font-size:15px}
@media (max-width:520px){.thanks-perks{grid-template-columns:1fr}}

/* video picker grows to 3 columns now that there are 40+ backgrounds */
@media (min-width:900px){
  .vidgrid{grid-template-columns:repeat(3,1fr);max-height:520px;overflow-y:auto;padding-right:4px}
}