.card:has(> #creative-closet) { grid-column: 1 / -1; }
#creative-closet {
  --folder-ink: #69263d;
  --folder-paper: #fff9ed;
  color: var(--folder-ink);
  padding: clamp(14px, 3vw, 36px);
  background: repeating-linear-gradient(90deg,#f7e0e7 0 12px,#f9e8eb 12px 24px);
  border: 1px solid white;
  box-shadow: 4px 5px 0 #69263d18;
}
#creative-closet .folder-scene {
  position: relative;
  isolation: isolate;
  perspective: 1000px;
  min-height: 315px;
  padding: 18px 3% 124px;
}
#creative-closet .folder-base,
#creative-closet .folder-front {
  position: absolute;
  width: min(76%, 530px);
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  border: 2px solid #bc7890;
  border-radius: 12px 12px 18px 18px;
  pointer-events: none;
}
#creative-closet .folder-base { height: 185px; background: #bb7390; box-shadow: 5px 8px #69263d25; }
#creative-closet .folder-base::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 18px;
  width: 36%;
  height: 23px;
  background: #cfe0ec;
  border-radius: 12px 12px 0 0;
}
#creative-closet .folder-front {
  z-index: 2;
  height: 143px;
  transform-origin: bottom center;
  transition: transform .55s ease;
  background: radial-gradient(#fff8 1px, transparent 1px) 0 0 / 8px 8px, #ecabc1;
  box-shadow: inset 0 0 0 6px #f7d8e2;
  padding: 12px;
}
#creative-closet .folder-front span {
  display: inline-block;
  background: #dbe7ee;
  padding: 5px 8px;
  font-size: 10px;
  transform: rotate(-6deg);
}
#creative-closet .folder-toggle {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 34px;
  translate: -50% 0;
  display: grid;
  gap: 5px;
  justify-items: center;
  width: min(74%, 260px);
  padding: 10px;
  color: inherit;
  background: var(--folder-paper);
  border: 1px dashed #a35d73;
  box-shadow: 4px 5px #69263d30;
  transform: rotate(-3deg);
}
#creative-closet .folder-toggle strong { font: clamp(26px, 4vw, 48px)/1 "Great Vibes", Georgia, serif; }
#creative-closet .folder-toggle small { font-size: 9px; letter-spacing: .13em; }
#creative-closet .folder-files { display: flex; justify-content: center; gap: 13px; }
#creative-closet .folder-file {
  width: min(15%, 150px);
  min-width: 0;
  padding: 6px 6px 12px;
  color: inherit;
  background: var(--folder-paper);
  border: 1px solid #b27a91;
  box-shadow: 3px 5px 0 #69263d22;
  transform-origin: bottom center;
  transform: translate(var(--gather), 95px) rotate(0) scale(.74);
  transition: transform .58s cubic-bezier(.2,.7,.25,1), opacity .38s;
  transition-delay: calc(var(--reverse) * 45ms);
  opacity: .86;
  pointer-events: none;
}
#creative-closet .folder-file[data-frame="id"] { background: #dceaf1; border: 4px double #7693a3; border-radius: 10px; }
#creative-closet .folder-file[data-frame="poster"] { border: 4px double #a75d76; }
#creative-closet .folder-file img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: contain; background: #f3e7e5; }
#creative-closet [data-open="true"] .folder-front { transform: rotateX(-63deg); }
#creative-closet [data-open="true"] .folder-file {
  transform: translateY(var(--rise)) rotate(var(--angle)) scale(1);
  transition-delay: calc(var(--slot) * 65ms + 80ms);
  opacity: 1;
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
  #creative-closet [data-open="false"]:hover .folder-front { transform: rotateX(-24deg); }
  #creative-closet [data-open="false"]:hover .folder-file { transform: translate(calc(var(--gather) * .87), 65px) rotate(var(--angle)) scale(.78); }
}
#creative-closet .folder-pagination,
#creative-closet .folder-dialog-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }
#creative-closet .folder-pagination button,
#creative-closet .folder-dialog-bar button { color: inherit; background: var(--folder-paper); padding: 8px 12px; border: 1px solid #a76a7c; border-radius: 20px; }
#creative-closet .folder-pagination button:disabled { opacity: .5; }
#creative-closet :focus-visible { outline: 2px solid var(--folder-ink); outline-offset: 4px; }
#creative-closet .folder-dialog {
  width: min(720px, 94vw);
  height: auto;
  max-height: 88dvh;
  color: inherit;
  border: 2px solid #a76a7c;
  border-radius: 12px;
  background: var(--folder-paper);
}
#creative-closet .folder-dialog[open] { display: flex; flex-direction: column; }
#creative-closet .folder-dialog-bar { background: #f6dce5; }
#creative-closet .folder-dialog-bar h4 { margin: 0; }
#creative-closet .folder-detail { overflow: auto; padding: 15px; }
#creative-closet .folder-detail img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  #creative-closet .folder-scene { min-height: 245px; overflow: hidden; }
  #creative-closet [data-open="true"] .folder-files { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #creative-closet [data-open="true"] .folder-file { width: 100%; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #creative-closet .folder-front, #creative-closet .folder-file { transition: none; }
}