.portfolio-studio { display: grid; grid-template-columns: 286px minmax(0,1fr); gap: 28px; align-items: start; }
.visual-configurator { position: sticky; top: 20px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: #1a191e; border: 1px solid #343038; border-radius: 14px; overflow: hidden; }
.visual-config-heading { padding: 22px 20px 18px; }
.visual-config-heading h2 { font: 500 21px var(--display); letter-spacing: -.025em; }
.visual-config-heading p { font-size: 11px; color: #b8a7c3; margin-top: 8px; }
.visual-options { max-height: calc(100dvh - 500px); min-height: 250px; overflow: auto; padding: 0 8px; scrollbar-width: thin; }
.option-group { padding-bottom: 8px; }
.option-group-heading { width: 100%; background: #27252c; border-radius: 7px; min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; font-size: 11px; color: #d0c5d9; }
.option-group-heading > span:first-child { display: flex; align-items: center; gap: 8px; }
.option-group-heading .icon { width: 14px; height: 14px; flex-basis: 14px; color: #b6a1c5; }
.option-group-heading small { color: #9a899f; font-size: 11px; }
.option-group-heading[aria-expanded=true] { color: #e4cfff; background: #33283f; }
.group-current { padding: 6px 12px 2px; font-size: 11px; color: #a893b6; }
.image-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 10px 3px 4px; }
.image-options.hidden { display: none; }
.image-choice { display: flex; flex-direction: column; overflow: hidden; border-radius: 7px; text-align: center; padding: 0; background: #f0ecee; color: #26202e; position: relative; outline: 2px solid transparent; outline-offset: 1px; }
.image-choice:hover { outline-color: #7c638e; }
.image-choice.selected { outline-color: var(--purple); background: #d8c7fa; }
.item-thumb { display: block; width: 100%; aspect-ratio: 1/1; background-repeat: no-repeat; overflow: hidden; }
.portrait-thumb { aspect-ratio: 1/1; }
.portrait-thumb::before { aspect-ratio: 3/4; }
.image-choice > span:not(.item-thumb):not(.image-choice-check) { padding: 7px 4px 8px; font-size: 11px; line-height: 1.2; display: grid; place-items: center; min-height: 40px; }
.accessory-thumb { background-image: url('./assets/accessories-atlas.png'); background-size: 400% 200%; background-position: var(--ix) var(--iy); }
.eye-thumb { background-image: url('./assets/eyes-atlas.png'); background-size: 200% 200%; background-position: var(--ix) var(--iy); }
.image-choice-check { display: grid; place-items: center; position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; color: #241337; background: var(--purple); }
.image-choice-check .icon { width: 11px; height: 11px; flex-basis: 11px; }
.visual-config-footer { padding: 17px 12px 13px; background: #201c26; border-top: 1px solid #3e324a; }
.combination-caption { display: flex; align-items: center; gap: 5px; color: #b99bcc; font-size: 11px; margin-bottom: 12px; }
.combination-caption strong { font-variant-numeric: tabular-nums; color: #dfbaf6; }
.combination-caption .round-button { margin-left: auto; }
.visual-config-footer > small { display: block; text-align: center; color: #b098c2; font-size: 11px; margin-top: 9px; }
.portfolio-gallery { min-width: 0; }
.portfolio-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.portfolio-toolbar h2 { font: 500 22px var(--display); letter-spacing: -.025em; }
.portfolio-toolbar p { color: #ad95bd; font-size: 11px; margin-top: 6px; }
.portfolio-toolbar .text-button { font-size: 11px; white-space: nowrap; }
.portfolio-masonry { columns: 3; column-gap: 17px; }
.portfolio-card { display: block; width: 100%; position: relative; padding: 0; border-radius: 13px; overflow: hidden; text-align: left; break-inside: avoid; margin-bottom: 17px; }
.portfolio-card.selected { outline: 2px solid var(--purple); outline-offset: 3px; }
.portfolio-card > .portrait { width: 100%; aspect-ratio: 3/4; }
.portfolio-card:nth-of-type(3n+2) > .portrait { aspect-ratio: 1/1.08; }
.portfolio-card:nth-of-type(4n+3) > .portrait { aspect-ratio: 4/5; }
.portfolio-card > .portrait::before { transition: filter .2s; }
.portfolio-card:hover > .portrait::before { filter: brightness(1.08); }
.portfolio-caption { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 45px 16px 17px; background: linear-gradient(transparent,rgba(17,11,21,.9)); color: white; }
.portfolio-caption h3 { font: 500 26px/1.1 var(--display); letter-spacing: -.025em; }
.portfolio-caption div > span { display: block; font-size: 11px; color: #e5d7e8; margin-top: 6px; }
.portfolio-pick { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; height: 27px; width: 27px; border-radius: 50%; color: #f2e1ff; background: #34223fc9; flex-shrink: 0; }
.portfolio-open { position: absolute; right: 12px; top: 12px; background: #281c35d9; color: #e2c9ff; }
.selected .portfolio-pick { background: var(--purple); color: var(--purple-ink); }
.portfolio-pick .icon { height: 14px; width: 14px; }
.generated-card > img { display: block; width: 100%; height: auto; }
.generated-card .portfolio-caption { position: static; padding: 14px; background: #332441; }
.generated-card .portfolio-caption h3 { font-size: 20px; }
.portfolio-selection { background: #231b2a; border-radius: 10px; padding: 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 13px; }
.portfolio-selection > div { display: flex; flex-direction: column; gap: 6px; }
.portfolio-selection span { color: #b090c5; font-size: 11px; }
.portfolio-selection strong { font-size: 12px; font-weight: 600; color: #e0c5f2; }
.portfolio-selection small { color: #b9a0c8; font-size: 11px; }
.portfolio-selection .button { flex-shrink: 0; }
.portfolio-gallery .gallery-note { font-size: 11px; margin-top: 23px; }
.portfolio-next { display: flex; justify-content: flex-end; margin-top: 23px; }
@media (min-width: 1900px) { main { max-width: none; } .portfolio-studio { grid-template-columns: 310px minmax(0,1fr); } .portfolio-masonry { columns: 4; } }
@media (max-width: 1450px) { .portfolio-masonry { columns: 2; } .portfolio-toolbar { flex-direction: column; align-items: flex-start; gap: 7px; } .portfolio-selection { flex-direction: column; align-items: stretch; } }
@media (max-width: 950px) { .portfolio-studio { grid-template-columns: 260px minmax(0,1fr); gap: 20px; } .portfolio-caption h3 { font-size: 23px; } .portfolio-caption div > span { font-size: 11px; } .portfolio-caption { padding-inline: 12px; } }
@media (max-width: 720px) {
  .portfolio-studio { display: flex; flex-direction: column-reverse; gap: 25px; }
  .visual-configurator { width: 100%; position: static; max-height: none; }
  .visual-options { max-height: none; min-height: 0; overflow: visible; }
  .image-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; padding: 12px 7px; }
  .portfolio-gallery { width: 100%; }
  .portfolio-masonry { columns: 2; column-gap: 12px; }
  .portfolio-card { margin-bottom: 12px; border-radius: 10px; }
  .portfolio-caption { padding: 35px 10px 12px; }
  .portfolio-caption h3 { font-size: 21px; }
  .portfolio-caption div > span { font-size: 11px; line-height: 1.3; }
  .portfolio-pick { display: none; }
  .portfolio-toolbar h2 { font-size: 21px; }
  .portfolio-selection { padding: 14px; }
  .portfolio-selection strong { font-size: 11px; }
  .visual-config-footer { padding: 18px; }
  .visual-config-heading { padding: 22px; }
}