*{box-sizing:border-box}
:root{
  --accent:#8d6cc7;
  --bg:#ffffff;
  --text:#161616;
  --muted:#6d6d6d;
  --line:#e4e4e4;
  --soft:#f5f5f5;
  --card:#fff;
}
html{background:#111}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  line-height:1.55;
}
body.theme-night{
  --bg:#111;
  --text:#f6f6f6;
  --muted:#a9a9a9;
  --line:#303030;
  --soft:#191919;
  --card:#171717;
}
a{color:inherit}
.content-width{width:min(1120px,calc(100% - 36px));margin:0 auto}

/* =========================================================
   TOP NAV — Home centralizado + seta + menu suspenso
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  height:70px;
  background:#050505;
  color:#fff;
}
.topbar-inner{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.nav-dropdown{
  position:relative;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav-dropdown > summary{
  list-style:none;
}
.nav-dropdown > summary::-webkit-details-marker{
  display:none;
}

.nav-trigger{
  height:70px;
  min-width:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  font-weight:800;
  text-align:center;
  outline:none;
}
.nav-home-label{
  font-size:1rem;
  line-height:1.1;
}
.nav-chevron{
  display:block;
  margin-top:4px;
  font-size:.62rem;
  color:var(--accent);
  line-height:1;
  transition:transform .18s ease;
}
.nav-dropdown[open] .nav-chevron{
  transform:rotate(180deg);
}

.dropdown-menu{
  position:absolute;
  top:62px;
  left:50%;
  transform:translateX(-50%);
  min-width:190px;
  padding:8px;
  border-radius:14px;
  border:1px solid #303030;
  background:#111;
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.dropdown-menu a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding:11px 14px;
  border-radius:9px;
  text-align:center;
}
.dropdown-menu a:hover{
  background:#202020;
  color:var(--accent);
}

/* =========================================================
   HOME — somente apresentação principal
   ========================================================= */
.creator-hero{
  background:var(--bg);
}
.home-cover-only{
  border:0;
}
.creator-banner{
  height:260px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.banner-fallback{
  background:
    radial-gradient(circle at 18% 30%,rgba(141,108,199,.8),transparent 22%),
    radial-gradient(circle at 78% 30%,rgba(48,160,145,.7),transparent 20%),
    linear-gradient(135deg,#17131d,#22212a 50%,#15171b);
}
.creator-profile{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:0 0 34px;
}
.avatar-wrap{
  width:150px;
  flex:0 0 150px;
  margin-top:-74px;
}
.creator-avatar{
  width:148px;
  height:148px;
  border-radius:50%;
  object-fit:cover;
  border:5px solid var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.avatar-fallback{
  background:var(--accent);
  font-size:4rem;
  font-weight:900;
  color:#fff;
}
.creator-copy{
  padding-top:18px;
  max-width:720px;
}
.creator-copy h1{
  font-size:2.35rem;
  line-height:1.08;
  margin:0 0 4px;
}
.handle{
  color:var(--muted);
  font-size:.95rem;
  margin-bottom:12px;
}
.creator-copy p{
  font-size:1.05rem;
  margin:0;
  color:var(--muted);
  max-width:700px;
}

/* grande área vazia preta da capa */
.home-empty-space{
  min-height:46vh;
  background:var(--bg);
}

/* =========================================================
   POSTS / ARTICLE / ABOUT — mantidos separados da Home
   ========================================================= */
.page-head{padding:58px 0 24px}
.page-head h1{font-size:2rem;margin:.1em 0}
.page-head p{color:var(--muted)}
.kicker{
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--accent);
}

.posts-index{
  display:flex;
  flex-direction:column;
  gap:0;
  padding-bottom:70px;
}
.index-post{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:24px;
  padding:24px 0;
  border-top:1px solid var(--line);
}
.index-post:first-child{border-top:0}
.index-post img{
  width:260px;
  height:160px;
  object-fit:cover;
  border-radius:14px;
}
.index-post h2{
  margin:.2em 0;
  font-size:1.5rem;
}
.index-post h2 a{text-decoration:none}
.index-post p{color:var(--muted)}
.read-more{
  text-decoration:none;
  font-weight:800;
  color:var(--accent);
  font-size:.9rem;
}
.feed-meta{
  display:flex;
  gap:12px;
  align-items:center;
  color:var(--muted);
  font-size:.82rem;
  font-weight:600;
}
.feed-meta a{
  color:var(--accent);
  text-decoration:none;
}

.article-page{
  padding:60px 0 80px;
  max-width:1050px;
}
.article-head{
  max-width:820px;
  margin:0 auto 28px;
}
.article-head h1{
  font-size:clamp(2.4rem,5vw,4.5rem);
  line-height:1.04;
  margin:.22em 0;
}
.article-lead{
  font-size:1.25rem;
  color:var(--muted);
}
.article-cover{
  display:block;
  width:100%;
  max-height:620px;
  object-fit:cover;
  border-radius:20px;
  margin:28px 0 42px;
}
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,760px) 190px;
  gap:55px;
  justify-content:center;
}
.article-prose{
  font-size:1.08rem;
  min-width:0;
}
.article-prose h2{
  font-size:1.8rem;
  margin-top:1.6em;
}
.article-prose img{
  max-width:100%;
  border-radius:14px;
}
.article-prose pre{
  overflow:auto;
  padding:16px;
  border-radius:12px;
  background:var(--soft);
}
.article-author{
  border-left:1px solid var(--line);
  padding-left:22px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.article-author img,.author-fallback{
  width:66px;
  height:66px;
  border-radius:50%;
  object-fit:cover;
}
.author-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:white;
  font-weight:900;
  font-size:1.6rem;
}
.article-author span{
  color:var(--muted);
  font-size:.85rem;
}

.about-page{
  display:grid;
  grid-template-columns:220px minmax(0,720px);
  gap:50px;
  padding:70px 0;
  justify-content:center;
}
.about-profile img,.about-avatar-fallback{
  width:200px;
  height:200px;
  border-radius:50%;
  object-fit:cover;
}
.about-avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  font-size:5rem;
  font-weight:900;
}
.about-page h1{
  font-size:3rem;
  margin:.12em 0 .5em;
}

.placeholder-page{
  min-height:65vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.placeholder-page h1{
  font-size:4rem;
  margin:.15em 0;
}
.placeholder-page p{
  color:var(--muted);
  font-size:1.15rem;
}
.empty-state{
  border:1px dashed var(--line);
  border-radius:16px;
  padding:30px;
  color:var(--muted);
}
.search-form{
  display:flex;
  gap:8px;
}
.search-form input{
  flex:1;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
}
.search-form button{
  background:var(--accent);
  border:0;
  color:#fff;
  padding:0 18px;
  border-radius:10px;
}

/* =========================================================
   FOOTER / trademark centralizado, sem faixa separadora
   ========================================================= */
.site-footer{
  background:var(--bg);
  margin:0;
  padding:28px 0 42px;
  color:var(--muted);
  border:0;
}
.footer-centered{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.footer-centered span{
  display:block;
  width:100%;
  text-align:center;
}

/* ========================================================= */
@media(max-width:850px){
  .creator-banner{height:220px}
  .creator-profile{gap:16px}
  .avatar-wrap{width:110px;flex-basis:110px;margin-top:-55px}
  .creator-avatar{width:108px;height:108px}
  .article-layout{grid-template-columns:1fr}
  .article-author{
    border-left:0;
    border-top:1px solid var(--line);
    padding:20px 0 0;
  }
  .about-page{grid-template-columns:1fr}
  .about-profile{display:none}
}
@media(max-width:620px){
  .topbar,.topbar-inner,.nav-dropdown,.nav-trigger{height:64px}
  .dropdown-menu{top:58px;min-width:170px}
  .creator-banner{height:170px}
  .creator-profile{
    padding:0 18px 28px;
    display:block;
  }
  .avatar-wrap{
    margin-top:-48px;
    width:98px;
  }
  .creator-avatar{
    width:96px;
    height:96px;
  }
  .creator-copy{padding-top:10px}
  .creator-copy h1{font-size:1.8rem}
  .index-post{grid-template-columns:1fr}
  .index-post img{
    width:100%;
    height:210px;
  }
  .article-page{padding-top:35px}
  .article-head h1{font-size:2.45rem}
  .home-empty-space{min-height:42vh}
}


/* =========================================================
   v1.4 — PERFIL CENTRALIZADO + MOLDURAS + TAMANHO AJUSTÁVEL
   ========================================================= */

.creator-profile-centered{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:0 20px 36px;
}

.profile-visual{
  position:relative;
  width:var(--profile-size,148px);
  height:var(--profile-size,148px);
  margin-top:calc(var(--profile-size,148px) * -0.5);
  flex:0 0 auto;
}

.creator-avatar-centered{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* borda default equivalente à atual */
.frame-mode-default .creator-avatar-centered{
  border:5px solid var(--bg);
  box-shadow:0 0 0 3px rgba(110,110,110,.72);
}

/* sem borda */
.frame-mode-none .creator-avatar-centered{
  border:0;
  box-shadow:none;
}

/* em custom, a imagem de moldura faz o acabamento */
.frame-mode-custom .creator-avatar-centered{
  border:0;
  box-shadow:none;
}

.custom-profile-frame{
  position:absolute;
  z-index:3;
  pointer-events:none;
  left:-14%;
  top:-14%;
  width:128%;
  height:128%;
  object-fit:contain;
}

.creator-copy-centered{
  max-width:760px;
  margin-top:18px;
  text-align:center;
}

.creator-copy-centered h1{
  margin:0 0 12px;
  font-size:2.35rem;
  line-height:1.08;
}

.creator-copy-centered p{
  margin:0 auto;
  max-width:720px;
  color:var(--muted);
  font-size:1.05rem;
}

@media(max-width:620px){
  .creator-profile-centered{
    padding-left:18px;
    padding-right:18px;
  }

  .creator-copy-centered h1{
    font-size:1.85rem;
  }
}


/* =========================================================
   v1.5 — ENQUADRAMENTO INTERNO DO AVATAR
   ========================================================= */
.avatar-clip{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}

/* Border belongs to the circular clip, not the scaled image. */
.frame-mode-default .avatar-clip{
  border:5px solid var(--bg);
  box-shadow:0 0 0 3px rgba(110,110,110,.72);
}

.frame-mode-none .avatar-clip,
.frame-mode-custom .avatar-clip{
  border:0;
  box-shadow:none;
}

.frame-mode-default .creator-avatar-centered,
.frame-mode-none .creator-avatar-centered,
.frame-mode-custom .creator-avatar-centered{
  border:0 !important;
  box-shadow:none !important;
}

.avatar-clip .creator-avatar-centered{
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  transform:scale(calc(var(--profile-scale,100%) / 100%));
  transform-origin:center center;
}

.avatar-fit-cover{
  object-fit:cover;
}

.avatar-fit-contain{
  object-fit:contain;
}

/* The custom frame stays independent from avatar zoom. */
.custom-profile-frame{
  z-index:4;
}


/* v1.5.1 — transparent avatar correction */
.avatar-clip{
  background:transparent !important;
}
.frame-mode-none .avatar-clip,
.frame-mode-custom .avatar-clip{
  background:transparent !important;
}


/* =========================================================
   v1.6 — SAFE AVATAR FIT
   ========================================================= */

/*
A rectangular logo can still hit the corners of a circular clipping mask even
when object-fit: contain is used. In "contain" mode we therefore place the
content inside an inscribed square (70.71% of the diameter), guaranteeing that
all four corners fit inside the circle.
*/

.avatar-clip{
  overflow:visible !important;
}

.avatar-content-safe{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Cover behaves like a normal avatar and can fill the entire circle. */
.avatar-fit-mode-cover .avatar-content-safe{
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
}

/*
Safe contain:
70.7107% = side of the largest square fully contained inside a circle.
This prevents a wide logo's upper-right/upper-left corners from being clipped.
*/
.avatar-fit-mode-contain .avatar-content-safe{
  width:70.7107%;
  height:70.7107%;
  overflow:visible;
}

/* Scale is applied to the content, not to the outer frame. */
.avatar-content-safe .creator-avatar-centered{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:100% !important;
  transform:scale(calc(var(--profile-scale,100%) / 100%));
  transform-origin:center center;
}

.avatar-fit-mode-contain .creator-avatar-centered{
  object-fit:contain !important;
  border-radius:0 !important;
  overflow:visible !important;
}

.avatar-fit-mode-cover .creator-avatar-centered{
  object-fit:cover !important;
  border-radius:50% !important;
}

/* Frame stays tied to the outer circle and does not scale with the logo. */
.frame-mode-default .avatar-clip{
  border:5px solid var(--bg);
  box-shadow:0 0 0 3px rgba(110,110,110,.72);
  border-radius:50%;
}

.frame-mode-none .avatar-clip,
.frame-mode-custom .avatar-clip{
  border:0;
  box-shadow:none;
  border-radius:50%;
}



/* v1.7 dynamic nav + per-page art */
.page-visual-mode-extended.creator-hero{position:relative;min-height:560px;background-image:linear-gradient(to bottom,rgba(0,0,0,.10),rgba(17,17,17,.68) 72%,var(--bg) 100%),var(--page-art);background-size:cover;background-position:center;background-repeat:no-repeat;padding-top:255px}
.page-visual-mode-extended.creator-hero .creator-profile-centered{background:transparent}
.page-art-shell{position:relative;min-height:calc(100vh - 70px)}
.page-art-strip{height:260px;width:100%;background-size:cover;background-position:center;background-repeat:no-repeat}
.page-art-content{position:relative;z-index:1}
.page-art-shell.page-visual-mode-extended{background-image:linear-gradient(to bottom,rgba(0,0,0,.16),rgba(17,17,17,.78) 58%,var(--bg) 100%),var(--page-art);background-size:cover;background-position:center top;background-repeat:no-repeat}
.page-art-shell.page-visual-mode-extended .page-art-content{min-height:calc(100vh - 70px);padding-top:150px}
.page-art-shell.page-visual-mode-extended .page-head,.page-art-shell.page-visual-mode-extended .about-page,.page-art-shell.page-visual-mode-extended .placeholder-page{text-shadow:0 2px 12px rgba(0,0,0,.55)}
.page-art-shell.page-visual-mode-extended .index-post{background:rgba(17,17,17,.76);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:20px;margin-bottom:14px;backdrop-filter:blur(5px)}
@media(max-width:620px){.page-visual-mode-extended.creator-hero{padding-top:170px}.page-art-shell.page-visual-mode-extended .page-art-content{padding-top:90px}}


/* =========================================================
   v1.9 — TYPOGRAPHY / LINE BREAKS / PAGE VISUAL CONSISTENCY
   ========================================================= */

/* Global typography */
body{
  font-family:var(--font-body,'Segoe UI',sans-serif) !important;
  font-size:var(--body-font-size,16px);
  line-height:var(--body-line-height,1.60);
  color:var(--text);
}

h1,h2,h3,h4,h5,h6,
.creator-copy-centered h1,
.page-head h1,
.article-head h1,
.about-page h1{
  font-family:var(--font-heading,'Segoe UI',sans-serif) !important;
  color:var(--heading-text,var(--text));
}

.topbar,
.nav-trigger,
.dropdown-menu{
  font-family:var(--font-nav,'Segoe UI',sans-serif) !important;
}

.nav-trigger,
.dropdown-menu a{
  color:var(--nav-text,#fff) !important;
}

/* Preserve Enter/new line from plain text fields. */
.preserve-lines,
.creator-copy-centered p,
.article-lead,
.index-post p{
  white-space:pre-line;
}

/* Markdown paragraphs gain readable separation. */
.article-prose p{
  margin-top:0;
  margin-bottom:1.05em;
}

/* HOME:
   Use the same overlay/opacity/height logic as Posts/Log-post/Sobre. */
.page-visual-mode-extended.creator-hero{
  position:relative;
  min-height:calc(100vh - 70px);
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,.16),
      rgba(17,17,17,.78) 58%,
      var(--bg) 100%),
    var(--page-art) !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  padding-top:150px !important;
  padding-bottom:70px;
}

/* No second gray/black spacer after an extended Home image. */
.page-visual-mode-extended.creator-hero + .home-empty-space{
  display:none !important;
}

/* Strip mode keeps only a small neutral breathing space. */
.home-empty-space{
  min-height:42px !important;
  background:var(--bg);
  border:0 !important;
}

/* Remove accidental visual seams/lines between image and page background. */
.creator-hero,
.home-cover-only,
.page-art-shell,
.page-art-content{
  border-bottom:0 !important;
  box-shadow:none;
}

/* Standardized page overlays */
.page-art-shell.page-visual-mode-extended{
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,.16),
      rgba(17,17,17,.78) 58%,
      var(--bg) 100%),
    var(--page-art) !important;
}

/* Footer spacing symmetrical: same breathing room above/below trademark. */
.site-footer{
  padding:32px 0 !important;
  border:0 !important;
  margin:0 !important;
}

/* Colors requested through the editor */
.creator-copy-centered p,
.article-lead,
.index-post p,
.page-head p,
.handle,
.article-author span,
.site-footer{
  color:var(--muted) !important;
}

/* On extended visual pages, text stays readable without changing opacity per page. */
.page-art-shell.page-visual-mode-extended .page-head,
.page-art-shell.page-visual-mode-extended .about-page,
.page-art-shell.page-visual-mode-extended .placeholder-page,
.page-visual-mode-extended.creator-hero .creator-copy-centered{
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

@media(max-width:620px){
  .page-visual-mode-extended.creator-hero{
    padding-top:90px !important;
    min-height:calc(100vh - 64px);
  }
}
\n/* v2 Visual Builder public */.vp-wrap{width:100%;overflow:hidden}.vp-canvas{position:relative;transform-origin:top left;margin:0 auto;overflow:hidden}.vp-el{position:absolute;box-sizing:border-box}.vp-text{width:100%;height:100%;white-space:pre-wrap}.vp-button{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-decoration:none}.vp-posts{height:100%;overflow:auto}.vp-posts article{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.15)}.vp-posts h3{margin:0 0 8px}.vp-posts a{text-decoration:none}.vp-posts p{white-space:pre-line;color:var(--muted)}\n\n/* v2.1 visual renderer */\n.vp-el{transform-origin:center center}.vp-text{white-space:pre-wrap;overflow:visible;width:100%;height:100%}.vp-image-clip{overflow:hidden}.vp-image-clip img{display:block}.vp-button{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-decoration:none}\n
.vp-image-missing{outline:2px dashed #d45668;background:#2b171b!important;position:relative}.vp-image-missing:after{content:"Imagem não encontrada";position:absolute;inset:0;display:grid;place-items:center;color:#ff9baa;font:600 14px 'Segoe UI',sans-serif;}


/* =========================================================
   v2.2 RECOVERY / GLOBAL ELEMENTS / TRANSPARENT IMAGES
   ========================================================= */

.global-nav-align-left{justify-content:flex-start!important;padding-left:22px}
.global-nav-align-center{justify-content:center!important}
.global-nav-align-right{justify-content:flex-end!important;padding-right:22px}

.footer-global-align-left{display:flex!important;justify-content:flex-start!important;text-align:left!important}
.footer-global-align-center{display:flex!important;justify-content:center!important;text-align:center!important}
.footer-global-align-right{display:flex!important;justify-content:flex-end!important;text-align:right!important}

/* Never paint a dark disk/box behind transparent PNGs. */
.avatar-clip,
.avatar-content-safe,
.creator-avatar-centered,
.profile-visual{
  background:transparent!important;
}
.vp-image-clip{
  background:transparent!important;
}

/* Published Visual Builder pages must be able to grow/scroll vertically. */
.vp-wrap{
  width:100%;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}
.vp-canvas{
  overflow:visible!important;
}


/* =========================================================
   v2.4 — CLASSIC BASE + VISUAL OVERLAY
   The Visual Builder never replaces the classic layout anymore.
   ========================================================= */
.classic-overlay-host{
  position:relative;
  isolation:isolate;
}

.vo-layer-host{
  position:absolute;
  inset:0 0 auto 0;
  z-index:60;
  pointer-events:none;
  overflow:visible;
}

.vo-stage{
  position:absolute;
  top:0;
  left:50%;
  width:1180px;
  transform-origin:top center;
  pointer-events:none;
}

.vo-el{
  position:absolute;
  box-sizing:border-box;
  pointer-events:none;
}

.vo-text{
  width:100%;
  height:100%;
  white-space:pre-wrap;
  overflow:visible;
}

.vo-image-clip,
.vo-image-clip img{
  display:block;
}

.vo-button{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  pointer-events:auto;
}

.vo-fill{
  width:100%;
  height:100%;
}

@media(max-width:1180px){
  .vo-stage{
    left:50%;
  }
}


/* =========================================================
   v2.5 — TRUE CLASSIC/EXTRA COMPOSITOR
   ========================================================= */
.classic-compositor-home{
  position:relative;
  isolation:isolate;
}

.classic-home-hero{
  position:relative!important;
  overflow:hidden;
  background:none!important;
}

.classic-home-background{
  position:absolute!important;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  z-index:100;
}

.classic-home-readability{
  position:absolute;
  inset:0;
  z-index:110;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.16),rgba(17,17,17,.78) 58%,var(--bg) 100%);
}

.creator-profile-centered{
  position:relative;
  z-index:auto!important;
}

.profile-visual,
.creator-copy-centered h1,
.creator-copy-centered p{
  position:relative;
}

.vo-layer-host{
  position:absolute;
  inset:0;
  z-index:auto!important;
  pointer-events:none;
  overflow:visible;
}

.vo-image-clip,
.vo-image-clip img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
}

.vo-el{
  position:absolute;
  box-sizing:border-box;
  pointer-events:none;
}

.vo-button{
  pointer-events:auto;
}

.vo-text{
  width:100%;
  height:100%;
  white-space:pre-wrap;
  overflow:visible;
}