body:has(>.workspace-shell){display:block;padding:18px 12px 28px}.workspace-shell{display:flex;align-items:flex-start;justify-content:flex-start;gap:32px;width:100%;margin:0}.workspace-shell>.studio-workspace{width:1180px;max-width:none;flex:0 0 auto;grid-template-columns:240px 340px 340px 188px;grid-template-areas:"controls dark light animations";column-gap:24px}.workspace-shell .preview-column>.profile{width:100%;max-width:none}.workspace-shell .controls-column .controls-title{font-size:18px}.manual-column{width:360px;flex:0 0 360px;padding-right:12px;border-right:1px solid #9298a244}.manual-column>.preview-heading{color:#3e485d}.manual-frame{display:block;width:100%;height:1050px;border:0;background:transparent}.workspace-shell .animations-column{align-self:center}.workspace-shell .controls-column{align-self:center}
@media(max-width:1550px){.manual-column{width:330px;flex-basis:330px}}
@media(max-width:1099px){.workspace-shell{flex-direction:column;gap:24px}.workspace-shell>.studio-workspace{width:100%;grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"controls animations animations" "controls dark light";column-gap:20px}.manual-column{width:min(100%,440px);flex-basis:auto;border:0;padding:0;align-self:center}.workspace-shell .controls-column{align-self:start}.workspace-shell .animations-column{align-self:start}}
@media(max-width:650px){.workspace-shell>.studio-workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:"controls" "dark" "light" "animations";max-width:400px}.manual-column{max-width:400px}}
.manual-document body{display:block;background:transparent;padding:0;min-width:280px;color:#292b31}.manual-document .studio-workspace{display:none!important}.manual-document .manual-stage{width:100%;padding:0 16px 60px}.manual-document .manual-stage>.profile{width:100%;max-width:400px;margin-left:auto;margin-right:auto;min-height:650px}.manual-document .manual-stage>.profile.has-profile-frame{margin-top:95px}.manual-document .manual-stage>.profile .dm-slot{min-height:80px;padding:16px 0}.manual-hint{font-size:12px;line-height:17px;color:#545c69;margin:0 0 12px}.manual-tools{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}.manual-tools button{border:1px solid #d1c9df;background:#f5f2f9;color:#5c407f;padding:6px 8px;border-radius:7px;font-size:11px}.manual-tools button:hover{background:#e7def3}.manual-document dialog{max-width:calc(100vw - 16px);max-height:92vh;overflow:auto}.manual-document .originals-body{grid-template-columns:1fr}.manual-document .originals-preview{display:none}.manual-document .cosmetic-options{grid-template-columns:repeat(2,minmax(0,1fr))}.manual-document .style-studio-layout,.manual-document .badge-editor-layout{grid-template-columns:1fr}/* A dedicated manual command column and generous spacing in the generator. */
@media(min-width:1100px){.workspace-shell{width:1908px;gap:64px}.workspace-shell>.studio-workspace{width:1324px;grid-template-columns:240px 340px 340px 188px;column-gap:72px}.manual-column{width:520px;flex-basis:520px;padding-right:20px;border-right:1px solid #9298a266}}
.manual-document .manual-stage{display:grid;grid-template-columns:minmax(0,1fr) 125px;grid-template-areas:"hint hint" "profile tools";column-gap:18px;align-items:start;max-width:610px}.manual-document .manual-hint{grid-area:hint}.manual-document .manual-stage>.profile{grid-area:profile}.manual-document .manual-tools{grid-area:tools;display:grid;grid-template-columns:1fr;gap:7px;align-self:center;margin:0;padding:12px 9px;border:1px solid #ffffff80;border-radius:13px;background:#eeedf3}.manual-document .manual-tools button{padding:8px 6px;font-size:12px;text-align:left}
@media(max-width:1099px){.workspace-shell{width:100%}.manual-column{width:min(100%,590px);max-width:590px}}

.manual-document .manual-stage>.profile .activity{left:154px;width:calc(100% - 166px);font-size:12px}.manual-document .manual-stage>.profile .content{padding-left:24px;padding-right:24px}
/* Empty previews retain their place while individual elements are rebuilt. */
.generator-bar #reset-profile{flex:1 0 100%;display:flex;justify-content:center;align-items:center;gap:7px;min-height:33px;border:1px solid #cbbfcf;border-radius:9px;background:#f8f3f6;color:#76576a;font-size:12px;padding:7px 10px}.generator-bar #reset-profile:hover{background:#eee2e9;border-color:#ab879b}
.profile.partial-profile:not(.show-theme){background:#fff!important}
.profile.partial-profile *{visibility:hidden!important;pointer-events:none!important}
.profile.partial-profile.show-banner .banner,.profile.partial-profile.show-banner .banner *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-avatar .avatar-edit,.profile.partial-profile.show-avatar .avatar-edit *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-status .status,.profile.partial-profile.show-status .status *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-activity .activity,.profile.partial-profile.show-activity .activity *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-bio .bio,.profile.partial-profile.show-bio .bio *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-name .name,.profile.partial-profile.show-name .name *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-username #username,.profile.partial-profile.show-username #username *,.profile.partial-profile.show-username [data-source-id="username"],.profile.partial-profile.show-username [data-source-id="username"] *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-secondary #secondary-name,.profile.partial-profile.show-secondary #secondary-name *,.profile.partial-profile.show-secondary [data-source-id="secondary-name"],.profile.partial-profile.show-secondary [data-source-id="secondary-name"] *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-badges .profile-badges,.profile.partial-profile.show-badges .profile-badges *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-decoration .identity .avatar-decoration,.profile.partial-profile.show-decoration .identity .avatar-decoration *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-effect .profile-effect-layer,.profile.partial-profile.show-effect .profile-effect-layer *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-nameplate .dm-slot,.profile.partial-profile.show-nameplate .dm-slot *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-frame .profile-frame-layer,.profile.partial-profile.show-frame .profile-frame-layer *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-note .note,.profile.partial-profile.show-note .note *{visibility:visible!important;pointer-events:auto!important}
.profile.partial-profile.show-nameplate:not(.show-avatar) .dm-avatar-wrap,.profile.partial-profile.show-nameplate:not(.show-avatar) .dm-avatar-wrap *{visibility:hidden!important}.profile.partial-profile.show-nameplate:not(.show-name) .dm-name{visibility:hidden!important}

.profile.partial-profile:not(.show-theme){color:#32343a!important}.profile.partial-profile:not(.show-theme) .bio,.profile.partial-profile:not(.show-theme) .handle button{color:#32343a!important}
.animations-column{position:relative}.profile-variants{position:absolute;top:calc(100% + 18px);left:0;width:100%;padding:13px;background:#f4f2f8;border:1px solid #ffffff90;border-radius:14px;box-shadow:0 6px 20px #20232b0d;color:#393342}.variants-heading{display:flex;justify-content:space-between;align-items:center;gap:5px}.variants-heading h2{font-size:13px;margin:0}.variants-count{font-size:10px;background:#e6ddef;color:#684a89;padding:3px 5px;border-radius:5px}.variants-status{font-size:10px;line-height:14px;color:#776d80;margin:8px 0 10px}.variants-list{display:grid;gap:8px}.variant-card{position:relative;display:block;min-height:98px;overflow:hidden;border:2px solid transparent;border-radius:9px;padding:0 7px 7px;text-align:left;color:#fff;cursor:pointer}.variant-card:hover,.variant-card[aria-pressed=true]{border-color:#aa83df;box-shadow:0 0 0 2px #bfa6e22b}.variant-banner{display:block;width:calc(100% + 14px);max-width:none;height:34px;object-fit:cover;margin:0 -7px 0}.variant-avatar{position:absolute;top:21px;left:8px;width:28px;height:28px;border:3px solid #2e263b;border-radius:50%;object-fit:cover}.variant-name{display:block;font-size:12px;margin:15px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.variant-caption{display:block;font-size:9px;color:#fff;opacity:.82;padding-right:24px}.variant-colors{position:absolute;bottom:8px;right:7px;display:flex;gap:3px}.variant-colors i{width:8px;height:8px;border:1px solid #ffffff80;border-radius:50%}@media(max-width:1099px){.profile-variants{position:static;margin-top:18px}.variants-list{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}

.generator-bar #generate-variants{flex:1 0 100%;width:100%;min-height:42px;border:1px solid #c4afd9;border-radius:10px;background:#e9e0f3;color:#624082;font-size:12px;font-weight:600;padding:8px 10px;line-height:17px}.generator-bar #generate-variants:hover{background:#dfd0ee;border-color:#a27dbe}.generator-bar #generate-variants:disabled{opacity:.55;cursor:wait}

/* A centered, expanding gallery between controls and the dark preview. */
.workspace-shell>.studio-workspace>.profile-variants{grid-area:variants;position:relative;top:auto;left:auto;align-self:center;justify-self:center;width:180px;max-width:100%;margin:0;padding:12px;transition:width .32s ease,box-shadow .32s ease}
.workspace-shell>.studio-workspace>.profile-variants.is-open{width:220px;box-shadow:0 10px 32px #30223f20}
.variants-heading h2{width:100%}.variants-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:4px 0;border:0;background:transparent;color:#493957;font-size:13px;line-height:18px;font-weight:700;text-align:left}.variants-toggle>span:first-child{flex:1}.variants-toggle:focus-visible{outline:2px solid #9370bc;outline-offset:5px;border-radius:4px}.variants-chevron{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .32s ease}.is-open .variants-chevron{transform:rotate(180deg)}
.variants-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}.is-open .variants-reveal{grid-template-rows:1fr}.variants-inner{min-height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .25s ease,transform .32s ease,visibility 0s .32s}.is-open .variants-inner{visibility:visible;opacity:1;transform:translateY(0) scale(1);transition-delay:0s}.profile-variants .variants-list{grid-template-columns:1fr;gap:9px}.profile-variants .variant-card{min-height:112px}.profile-variants .variant-banner{height:43px}.profile-variants .variant-avatar{top:28px;width:32px;height:32px}.profile-variants .variant-name{margin-top:19px}
@media(min-width:1100px){.workspace-shell{width:2200px}.workspace-shell>.studio-workspace{width:1616px;grid-template-columns:240px 220px 340px 340px 188px;grid-template-areas:"controls variants dark light animations";grid-template-rows:auto;column-gap:72px}}
@media(min-width:651px) and (max-width:1099px){.workspace-shell>.studio-workspace{grid-template-areas:"controls variants animations" "controls dark light"}.workspace-shell>.studio-workspace>.profile-variants{width:100%;max-width:220px}}
@media(max-width:650px){.workspace-shell>.studio-workspace{grid-template-areas:"controls" "variants" "dark" "light" "animations"}.workspace-shell>.studio-workspace>.profile-variants{width:220px}.workspace-shell>.studio-workspace>.profile-variants.is-open{width:100%}.profile-variants .variants-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.workspace-shell>.studio-workspace>.profile-variants,.variants-chevron,.variants-reveal,.variants-inner{transition:none}}

/* Balanced outer margins and tighter, consistent desktop gaps. */
body:has(>.workspace-shell){padding-left:24px;padding-right:24px}
.workspace-shell{margin-left:auto;margin-right:auto}
@media(min-width:1100px){.workspace-shell{width:1988px;gap:28px}.workspace-shell>.studio-workspace{width:1440px;grid-template-columns:240px 220px 340px 340px 220px;column-gap:20px}}


.workspace-shell .animations-column{top:auto;justify-self:center;width:180px;max-width:100%;margin-top:0;transition:width .32s ease}
.workspace-shell .animations-column.is-open{width:220px}
.workspace-shell .animations-column .applied-animations{padding:12px;border-radius:14px;background:#f4f2f8;box-shadow:0 6px 20px #20232b0d}
.applied-heading h2{width:100%}.animations-column .applied-count{display:inline-block;min-width:0;height:auto;font-size:10px;padding:3px 5px;border-radius:5px}
.animations-column .applied-toggle{font-size:13px}.applied-animations .section-hint{margin:8px 0 10px}.applied-animations.is-open{box-shadow:0 10px 32px #30223f20}
@media(prefers-reduced-motion:reduce){.workspace-shell .animations-column{transition:none}}

/* Both drawers share a centered stack, so each expansion moves its neighbour. */
.profile-drawer-stack{grid-area:variants;display:flex;flex-direction:column;align-items:center;gap:16px;width:220px;max-width:100%;align-self:center;justify-self:center}
.profile-drawer-stack>.profile-variants{position:relative;top:auto;left:auto;align-self:center;width:180px;max-width:100%;margin:0;padding:12px;transition:width .32s ease,box-shadow .32s ease}
.profile-drawer-stack>.profile-variants.is-open{width:220px}
.workspace-shell .profile-drawer-stack>.animations-column{align-self:center;transform:none!important;margin:0}
@media(min-width:1100px){.workspace-shell{width:1748px}.workspace-shell>.studio-workspace{width:1200px;grid-template-columns:240px 220px 340px 340px;grid-template-areas:"controls variants dark light"}}
@media(min-width:651px) and (max-width:1099px){.workspace-shell>.studio-workspace{grid-template-areas:"controls variants variants" "controls dark light"}}
@media(max-width:650px){.workspace-shell>.studio-workspace{grid-template-areas:"controls" "variants" "dark" "light"}.profile-drawer-stack{width:100%}}
@media(prefers-reduced-motion:reduce){.profile-drawer-stack>.profile-variants{transition:none}}
/* Language belongs to the site; profile content remains untouched. */
.site-language-bar{display:flex;justify-content:flex-end;max-width:1748px;margin:0 auto 16px;min-height:36px}
.site-language-control{display:flex;align-items:center;gap:9px;padding:6px 10px;background:#f4f2f8;border:1px solid #ffffff90;border-radius:11px;color:#493957;font-size:12px;box-shadow:0 3px 12px #30223f0a}
.site-language-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.site-language-control select{max-width:155px;border:0;border-left:1px solid #dcd4e5;border-radius:0;padding:2px 20px 2px 9px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.site-language-control select:focus-visible{outline:2px solid #9367bc;outline-offset:3px;border-radius:3px}
/* Longer translations wrap inside the existing controls. */
.controls-column .single-generators{width:100%;min-width:0}
.controls-column .single-generators .edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.controls-column .single-generators button{min-width:0}
.controls-column .control-label{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.site-language-bar{justify-content:space-between;align-items:center;gap:16px}
.site-brand{font-size:18px;font-weight:750;line-height:24px;color:#3e354a}
@media(max-width:500px){.site-brand{font-size:14px;line-height:18px}.site-language-control>span{display:none}}