/* Shared library geometry follows the space remaining beside the sidebar. */
#vjtop-ref {
  --library-page-top:82px;
  --library-page-gutter:40px;
  --library-grid-columns:4;
  --library-grid-row-gap:24px;
  --library-grid-column-gap:24px;
  --library-control-font-size:14px;
  --library-meta-font-size:13px;
  --library-meta-color:#a3a3ac;
  --membership-promo-height:48px;
  --yj-purple-background-level:2.2;
  --yj-purple-light-strength:.8928571428571429;
  --yj-purple-motion-pace:1.5;
}
#vjtop-ref .home-shell,
#vjtop-ref #projectsView .app-page-shell,
#vjtop-ref.assets-mode .asset-library-modal[data-asset-mode="page"] .asset-library-card {
  width:100%;
  max-width:none;
  min-width:0;
  container-name:yj-library-content;
  container-type:inline-size;
}
@media (max-width:1180px) {
  #vjtop-ref { --library-page-gutter:24px; }
}
@media (max-width:720px) {
  #vjtop-ref {
    --app-sidebar-collapsed-width:64px;
    --library-page-top:76px;
    --library-page-gutter:16px;
    --library-grid-row-gap:20px;
    --library-grid-column-gap:16px;
  }
  #vjtop-ref.app-sidebar-collapsed .app-sidebar { padding-inline:10px; }
  #vjtop-ref.app-sidebar-collapsed .app-brand { padding-left:8px; }
  #vjtop-ref.app-sidebar-collapsed .app-sidebar-nav button,
  #vjtop-ref.app-sidebar-collapsed #sidebarProjectAdd { padding-inline:12px; }
  #vjtop-ref.app-sidebar-collapsed .app-sidebar-nav button::before,
  #vjtop-ref.app-sidebar-collapsed #sidebarProjectAdd::before { inset:0; }
}
/* Keep the shared page/header inset equal to the two-row campaign banner. */
@media (max-width:700px) {
  #vjtop-ref { --membership-promo-height:76px; }
}
/* Dense desktop libraries; the homepage adds its fifth column only on wide content. */
@container yj-library-content (min-width:1001px) {
  #vjtop-ref #projectsView .projects-grid:not(.list-view),
  #vjtop-ref.assets-mode .asset-library-modal[data-asset-mode="page"] .asset-library-grid { --library-grid-columns:5; }
}
@container yj-library-content (min-width:1440px) {
  #vjtop-ref .home-gallery-grid,
  #vjtop-ref .home-featured-stage { --library-grid-columns:5; }
}
@container yj-library-content (max-width:1000px) {
  #vjtop-ref .home-gallery-grid,
  #vjtop-ref .home-featured-stage,
  #vjtop-ref #projectsView .projects-grid:not(.list-view),
  #vjtop-ref.assets-mode .asset-library-modal[data-asset-mode="page"] .asset-library-grid { --library-grid-columns:3; }
}
@container yj-library-content (max-width:720px) {
  #vjtop-ref .home-gallery-grid,
  #vjtop-ref .home-featured-stage,
  #vjtop-ref #projectsView .projects-grid:not(.list-view),
  #vjtop-ref.assets-mode .asset-library-modal[data-asset-mode="page"] .asset-library-grid { --library-grid-columns:2; }
}
@container yj-library-content (max-width:440px) {
  #vjtop-ref .home-gallery-grid,
  #vjtop-ref .home-featured-stage,
  #vjtop-ref #projectsView .projects-grid:not(.list-view),
  #vjtop-ref.assets-mode .asset-library-modal[data-asset-mode="page"] .asset-library-grid { --library-grid-columns:1; }
}

/* Approved edge-light preset: background 220%, purple light 125%, speed 1.5x. */
#vjtop-ref .membership-promo {
  inset: 0 0 auto;
  height: var(--membership-promo-height);
  border-radius: 0;
  background: #371950;
  isolation: isolate;
  overflow: hidden;
}
#vjtop-ref .membership-promo-link { position: relative; z-index: 1; border-radius: 0; }
#vjtop-ref .membership-promo-close { z-index: 2; }
#vjtop-ref .membership-promo::before,
#vjtop-ref .home-create-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: inherit;
  filter: brightness(var(--yj-purple-background-level));
}
#vjtop-ref .membership-promo-light,
#vjtop-ref .home-create-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--yj-purple-light-strength);
}
#vjtop-ref .membership-promo-light > span,
#vjtop-ref .home-create-light > span { position: absolute; pointer-events: none; }
#vjtop-ref .membership-promo-glow {
  left: 18%; top: -90px; width: clamp(300px,62%,820px); height: 210px;
  background: radial-gradient(ellipse at 50% 50%,rgba(162,89,248,.64),rgba(139,54,223,.23) 40%,rgba(139,54,223,0) 72%);
  animation: yj-promo-edge-glide calc(16s / var(--yj-purple-motion-pace)) ease-in-out -4s infinite alternate;
}
#vjtop-ref .membership-promo-edge {
  bottom: 0; left: 14%; width: clamp(240px,40%,520px); height: 1px;
  background: linear-gradient(90deg,transparent,rgba(199,142,255,.74),transparent);
  animation: yj-promo-edge-line calc(16s / var(--yj-purple-motion-pace)) ease-in-out -4s infinite alternate;
}
#vjtop-ref.membership-promo-open .topbar,
#vjtop-ref.membership-promo-open .app-sidebar,
#vjtop-ref.membership-promo-open .app-page-view,
#vjtop-ref.membership-promo-open.home-mode .home-view,
#vjtop-ref.membership-promo-open.assets-mode .asset-library-modal[data-asset-mode="page"] { top: var(--membership-promo-height); }
#vjtop-ref.home-mode .home-view { padding:72px var(--library-page-gutter) 64px; }
#vjtop-ref .home-shell { margin:0 auto; }
#vjtop-ref .home-create-hero {
  --yj-purple-background-level:1.4;
  --yj-purple-light-strength:.38;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-name: yj-home-create;
  container-type: inline-size;
  /* Reserve three artwork rows below the hero, including authors and row gaps. */
  --home-three-work-rows:calc((92cqw - 60px) * .421875 + 153px);
  --home-promo-inset:0px;
  /* Keep the existing 72px page inset; allow 76px for the gallery heading/gaps. */
  height:clamp(124px,calc(100dvh - var(--home-promo-inset) - 72px - 76px - var(--home-three-work-rows) - 24px),400px);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(173,142,202,.16);
  border-radius: 16px;
  background: #2b1245;
}
#vjtop-ref.membership-promo-open .home-create-hero { --home-promo-inset:var(--membership-promo-height); }
#vjtop-ref .home-create-hero > h1,
#vjtop-ref .home-create-hero > button { position: relative; z-index: 2; flex-shrink: 0; }
#vjtop-ref .home-create-hero h1 { margin: 0 0 12px; color: #eee; font-size: 20px; font-weight: 500; line-height: 1.35; }
#vjtop-ref .home-create-hero button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 21px;
  border: 1px solid #d8d8da;
  border-radius: 9px;
  background: #eee;
  color: #242426;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#vjtop-ref .home-create-hero button:hover { background: #fff; }
#vjtop-ref .home-create-hero button:disabled { opacity: .5; cursor: default; }
#vjtop-ref .home-create-hero button .ui-icon { width: 18px; height: 18px; }
#vjtop-ref .home-create-edge {
  width: clamp(320px,68%,760px); height: 280px; border-radius: 50%;
  border: 1.3px solid rgba(192,126,255,.7);
  box-shadow: 0 -11px 24px rgba(151,66,245,.42),0 -28px 52px rgba(131,47,225,.3),inset 0 13px 24px rgba(151,66,245,.26);
}
#vjtop-ref .home-create-edge.left {
  left: clamp(-240px,-22%,-80px); top: calc(100% - 24px);
  animation: yj-create-edge-left calc(12s / var(--yj-purple-motion-pace)) ease-in-out -3s infinite alternate;
}
#vjtop-ref .home-create-edge.right {
  right: clamp(-240px,-22%,-80px); top: calc(100% - 15px);
  animation: yj-create-edge-right calc(15s / var(--yj-purple-motion-pace)) ease-in-out -8s infinite alternate;
}
#vjtop-ref .home-create-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 24% 80% at 50% 20%,rgba(43,18,69,.24),rgba(43,18,69,0));
}
#vjtop-ref .home-workflows { display: flex; align-items: center; gap: 24px; margin: 24px 0 30px; color: #a3a3aa; font-size: 14px; }
#vjtop-ref .home-workflows[hidden] { display: none; }
#vjtop-ref .home-workflows[hidden] + .home-gallery-heading { margin-top: var(--library-grid-row-gap); }
#vjtop-ref .home-workflows > span { flex-shrink: 0; }
#vjtop-ref .home-workflow-list { display: flex; flex-wrap: wrap; gap: 10px; }
#vjtop-ref .home-workflow-list button { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border: 1px solid #303034; border-radius: 999px; background: #1b1b1e; color: #777780; font: inherit; cursor: default; }
#vjtop-ref .home-workflow-list .ui-icon { width: 16px; height: 16px; }
#vjtop-ref .home-gallery-heading { display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin: 0 0 var(--library-grid-row-gap); }
#vjtop-ref .home-gallery-heading h2 { margin: 0; font-size: 20px; font-weight: 500; }
#vjtop-ref .home-gallery-heading > span { border-left: 1px solid #37373b; padding-left: 18px; color: #8e8e96; font-size: 13px; }
#vjtop-ref .home-gallery-grid,
#vjtop-ref .home-featured-stage { grid-template-columns:repeat(var(--library-grid-columns),minmax(0,1fr)); gap:var(--library-grid-row-gap) 20px; }
#vjtop-ref .home-create-hero,
#vjtop-ref .home-gallery-heading,
#vjtop-ref .home-featured,
#vjtop-ref .home-gallery-grid { width:92%; margin-inline:auto; }
#vjtop-ref.assets-mode .asset-library-modal[data-asset-mode="page"] .asset-library-grid { width:92%; margin-inline:auto; }
@container yj-library-content (max-width:1000px) {
  #vjtop-ref .home-create-hero,
  #vjtop-ref .home-gallery-heading,
  #vjtop-ref .home-featured,
  #vjtop-ref .home-gallery-grid,
  #vjtop-ref.assets-mode .asset-library-modal[data-asset-mode="page"] .asset-library-grid { width:95%; }
}
@container yj-library-content (max-width:720px) {
  #vjtop-ref .home-create-hero,
  #vjtop-ref .home-gallery-heading,
  #vjtop-ref .home-featured,
  #vjtop-ref .home-gallery-grid,
  #vjtop-ref.assets-mode .asset-library-modal[data-asset-mode="page"] .asset-library-grid { width:100%; }
}
#vjtop-ref .home-featured { margin-bottom: var(--library-grid-row-gap); }
#vjtop-ref .work-media { isolation: isolate; }
#vjtop-ref .home-view .work-media[data-cover-state] > img,
#vjtop-ref .home-view .work-media[data-cover-state] > video {
  z-index:1;
  transition:opacity .16s ease;
}
#vjtop-ref .home-view .work-media[data-cover-state="loading"] > img,
#vjtop-ref .home-view .work-media[data-cover-state="error"] > img { opacity:0; }
#vjtop-ref .home-view .home-cover-placeholder {
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-items:center;
  padding:16px;
  box-sizing:border-box;
  background:var(--app-panel-raised,#202124);
  color:var(--app-muted,#8d9196);
  font-size:13px;
  line-height:1.5;
  text-align:center;
  pointer-events:none;
  transition:opacity .16s ease;
}
#vjtop-ref .home-view .work-media[data-cover-state="loading"] > .home-cover-placeholder {
  background:linear-gradient(105deg,#222225 25%,#2c2c31 45%,#222225 65%);
  background-size:240% 100%;
  animation:yj-work-skeleton 2.6s ease-in-out infinite;
}
#vjtop-ref .home-view .work-media[data-cover-state="ready"] > .home-cover-placeholder,
#vjtop-ref .home-view .work-media[data-preview-playing="true"] > .home-cover-placeholder { opacity:0; }
#vjtop-ref .home-view .work-media .work-card-title {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 36px 13px 12px;
  font-size: 15px;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
}
#vjtop-ref .work-card-open:is(:hover, :focus-visible) .work-card-title { opacity: 1; }
#vjtop-ref .work-card-author { margin-top:10px; font-size:var(--library-meta-font-size); }
#vjtop-ref .work-card-author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vjtop-ref .home-work-skeleton { min-width:0; pointer-events:none; }
#vjtop-ref .home-skeleton-cover,
#vjtop-ref .home-skeleton-avatar,
#vjtop-ref .home-skeleton-name {
  background:linear-gradient(105deg,#222225 25%,#2c2c31 45%,#222225 65%);
  background-size:240% 100%;
  animation:yj-work-skeleton 2.6s ease-in-out infinite;
}
#vjtop-ref .home-skeleton-cover { aspect-ratio:16/9; border-radius:12px; }
#vjtop-ref .home-skeleton-author { display:flex; align-items:center; gap:8px; margin-top:10px; height:25px; }
#vjtop-ref .home-skeleton-avatar { flex:0 0 25px; height:25px; border-radius:50%; }
#vjtop-ref .home-skeleton-name { width:32%; max-width:140px; height:13px; border-radius:4px; }
#vjtop-ref .home-works-initial-loading .home-work-state {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
@keyframes yj-work-skeleton { from { background-position:100% 0; } to { background-position:-100% 0; } }
@media (prefers-reduced-motion:reduce) {
  #vjtop-ref .home-skeleton-cover,
  #vjtop-ref .home-skeleton-avatar,
  #vjtop-ref .home-skeleton-name,
  #vjtop-ref .home-view .work-media[data-cover-state="loading"] > .home-cover-placeholder { animation:none; }
  #vjtop-ref .home-view .home-cover-placeholder,
  #vjtop-ref .home-view .work-media[data-cover-state] > img,
  #vjtop-ref .home-view .work-media[data-cover-state] > video { transition:none; }
}
@keyframes yj-promo-edge-glide { from { transform: translateX(-12%); } to { transform: translateX(26%); } }
@keyframes yj-promo-edge-line { from { transform: translateX(-18%); } to { transform: translateX(50%); } }
@keyframes yj-create-edge-left { from { transform: translate(-5%,8px) rotate(-16deg); } to { transform: translate(19%,-22px) rotate(-7deg); } }
@keyframes yj-create-edge-right { from { transform: translate(3%,-15px) rotate(9deg); } to { transform: translate(-17%,7px) rotate(17deg); } }
@container yj-home-create (max-width:500px) {
  #vjtop-ref .home-create-edge.left { left: -48%; top: calc(100% - 36px); }
  #vjtop-ref .home-create-edge.right { right: -48%; top: calc(100% - 34px); }
}
@container yj-library-content (min-width:1440px) {
  #vjtop-ref .home-create-hero { --home-three-work-rows:calc((92cqw - 80px) * .3375 + 153px); }
}
@container yj-library-content (max-width:1000px) {
  #vjtop-ref .home-create-hero { --home-three-work-rows:calc((95cqw - 40px) * .5625 + 153px); }
}
@container yj-library-content (max-width:720px) {
  #vjtop-ref .home-create-hero { height:160px; }
}
@media (max-width: 720px) {
  #vjtop-ref .home-workflows { align-items: flex-start; gap: 12px; }
  #vjtop-ref .home-workflows > span { padding-top: 10px; }
  #vjtop-ref .home-workflow-list { gap: 8px; }
  #vjtop-ref .home-workflow-list button { padding: 9px 12px; }
}