.generated-portrait { width: 100%; aspect-ratio: 1/2; background-repeat: no-repeat; background-size: 300% 100%; background-position: right center; background-color: #888480; }
.generated-portrait.actor-image { aspect-ratio: auto; background-size: 300% auto; background-position: right top; }
.large-generated-portrait { max-width: 400px; max-height: 72dvh; margin: 0 auto; border-radius: 12px; width: min(400px,36dvh); }
.explore-intro { display: flex; align-items: center; flex-direction: column; text-align: center; padding: 42px 20px 35px; }
.portrait-fan { position: relative; width: min(840px,100%); height: 240px; margin-bottom: 31px; }
.fan-card { position: absolute; bottom: 24px; left: 50%; width: 138px; aspect-ratio: 3/4; padding: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 26px rgba(0,0,0,.4); transform: translateX(calc(var(--fan-x) - 50%)) rotate(var(--fan-angle)); translate: 0 var(--fan-y); transform-origin: bottom center; z-index: var(--fan-layer); transition: transform 350ms var(--ease), translate 350ms var(--ease), scale 350ms var(--ease); }
.fan-card .portrait { width: 100%; }
.remotion-fan-card { width: 100%; height: 100%; border-radius: 12px; background-color: #888480; background-repeat: no-repeat; transform-origin: bottom center; transform: translate(var(--fan-push,0px),var(--fan-lift,0px)) scale(var(--fan-scale,1)) rotate(var(--fan-turn,0deg)); filter: brightness(var(--fan-light,1)); box-shadow: 0 12px 26px rgba(0,0,0,.4); transition: transform 380ms var(--ease), filter 250ms, box-shadow 380ms var(--ease); }
.remotion-fan-card[data-active=true] { box-shadow: 0 22px 38px rgba(0,0,0,.5); }
.fan-hit-target { position: absolute; height: 184px; bottom: 24px; padding: 0; background: transparent; border: 0; z-index: 120; cursor: pointer; }
.fan-hit-target:focus-visible { outline: none; }
.remotion-fan-scene:has(.fan-hit-target:focus-visible) .remotion-fan-card[data-active=true] { outline: 2px solid var(--purple); outline-offset: 4px; }
.fan-card:focus-visible { z-index: 100; outline: 2px solid var(--purple); outline-offset: 4px; }
.explore-intro h1 { font: 500 34px/1.15 var(--display); letter-spacing: -.03em; max-width: 20ch; }
.explore-intro p { color: #b3a3bd; font-size: 12px; line-height: 1.8; max-width: 64ch; margin-top: 15px; }
.explore-grid-heading { display: flex; justify-content: space-between; align-items: center; margin: 5px 0 19px; padding: 0 1px; }
.explore-grid-heading h2 { font-size: 14px; color: #e0d3eb; font-weight: 600; }
.explore-grid-heading > span { font-size: 11px; color: #a998b7; }
.character-sheet-dialog { width: min(1080px,calc(100% - 48px)); padding: 24px; }
.character-sheet-stage { min-height: 260px; }
.character-sheet-media { width: fit-content; max-width: 100%; margin: 0 auto; }
.character-full-sheet { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 224px); margin: 0 auto; border-radius: 12px; object-fit: contain; }
.character-sheet-labels { display: grid; grid-template-columns: repeat(3,1fr); text-align: center; gap: 12px; color: #bdaacb; font-size: 11px; margin-top: 12px; }
.character-sheet-actions { display: flex; justify-content: center; margin-top: 22px; }
.character-sheet-cta { min-height: 52px; min-width: 360px; border-radius: 10px; padding: 14px 26px; font-size: 14px; letter-spacing: -.01em; }
.character-sheet-cta .icon { width: 19px; height: 19px; }
.sheet-preparing { display: flex; align-items: center; justify-content: center; gap: 36px; padding: 12px 24px; }
.sheet-reference { width: 220px; flex: 0 0 220px; border-radius: 12px; overflow: hidden; }
.sheet-reference .portrait { width: 100%; }
.sheet-preparing-copy { max-width: 35ch; }
.sheet-preparing-copy h3 { font: 500 22px/1.3 var(--display); letter-spacing: -.02em; }
.sheet-preparing-copy p { margin-top: 14px; color: #c8b6d5; font-size: 12px; line-height: 1.8; }
.sheet-preparing-copy small { display: block; color: #ad97bc; font-size: 11px; margin: 14px 0; }
.portfolio-card { transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.portfolio-card .portrait::before, .portfolio-card .generated-portrait, .portfolio-card .motion-preview { transition: scale 500ms var(--ease), filter 350ms var(--ease); }
.image-choice { transition: translate 220ms var(--ease), outline-color 220ms, background 220ms; }
.image-choice .item-thumb::before, .image-choice .item-thumb { transition: filter 220ms; }
.option-group-heading { transition: background 220ms, color 220ms; }
.button, .round-button { transition: translate 220ms var(--ease), background 220ms, color 220ms; }
.button .icon, .round-button .icon { transition: rotate 350ms var(--ease); }
.brand-home { transition: color 220ms; }
.brand-period { display: inline-block; transition: translate 250ms var(--ease); }
.minimal-footer a, .minimal-footer button { text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) {
  .fan-card:hover, .fan-card:focus-visible { transform: translateX(calc(var(--fan-x) - 50%)); translate: 0 calc(var(--fan-y) - 22px); scale: 1.1; z-index: 100; }
  .portfolio-card:hover { transform: perspective(1100px) rotateX(var(--hover-rx,0deg)) rotateY(var(--hover-ry,0deg)) translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.3); }
  .portfolio-card:hover .portrait::before, .portfolio-card:hover .generated-portrait, .portfolio-card:hover .motion-preview { scale: 1.045; filter: brightness(1.07); }
  .image-choice:hover { translate: 0 -2px; }
  .image-choice:hover .item-thumb { filter: brightness(1.08); }
  .option-group-heading:hover { background: #383040; color: #f0dfff; }
  .button:hover:not(:disabled), .round-button:hover:not(:disabled) { translate: 0 -2px; }
  .button-primary:hover:not(:disabled) .icon { rotate: -12deg; }
  .round-button:hover .icon { rotate: -8deg; }
  .brand-home:hover { color: #d9ccfa; }
  .brand-home:hover .brand-period { translate: 0 -3px; }
  .minimal-footer a:hover, .minimal-footer button:hover { text-decoration: underline; }
}
.button:active:not(:disabled), .round-button:active:not(:disabled), .image-choice:active { translate: 0 0; }
.portfolio-card:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .remotion-fan-card, .fan-card, .portfolio-card, .portfolio-card .portrait::before, .portfolio-card .generated-portrait, .portfolio-card .motion-preview, .image-choice, .button, .round-button, .brand-period { transition: none; }
  .remotion-fan-card { transform: rotate(var(--fan-rest-angle,0deg)); }
  .fan-card:hover, .fan-card:focus-visible { translate: 0 var(--fan-y); scale: 1; transform: translateX(calc(var(--fan-x) - 50%)) rotate(var(--fan-angle)); }
  .portfolio-card:hover { transform: none; box-shadow: none; }
  .portfolio-card:hover .portrait::before, .portfolio-card:hover .generated-portrait, .portfolio-card:hover .motion-preview { scale: 1; }
  .image-choice:hover, .button:hover:not(:disabled), .round-button:hover:not(:disabled), .brand-home:hover .brand-period { translate: none; }
  .button:hover .icon, .round-button:hover .icon { rotate: none; }
}