.portrait-looks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 28px 20px; margin-block: 28px; }
.portrait-example { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; align-content: start; min-width: 0; scroll-margin-top: 100px; }
.portrait-media { grid-area: 1 / 1; display: block; overflow: hidden; border-radius: 12px; }
.portrait-example > figcaption { grid-area: 2 / 1; margin-top: 12px; }
.portrait-example figcaption strong { font-size: 16px; line-height: 1.4; margin-bottom: 6px; }
.portrait-example figcaption > span { display: block; }
.portrait-inline-prompt.guide-prompt { grid-area: 3 / 1; display: flex; flex-direction: column; min-width: 0; margin: 16px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-bright); color: var(--ink); scroll-margin-top: 100px; }
.portrait-prompt-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 12px; }
.portrait-inline-prompt .guide-prompt-label { flex: 1 1 auto; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: inherit; letter-spacing: 0; text-transform: none; }
.portrait-prompt-copy.marketing-copy { flex: 0 0 auto; align-self: center; min-width: 102px; min-height: 44px; padding: 8px 10px; font-size: 13px; }
.portrait-prompt-scroll { min-width: 0; min-height: 0; }
.portrait-inline-prompt [data-prompt-text] { margin: 0; color: inherit; font-size: 16px; line-height: 1.6; white-space: normal; overflow-wrap: break-word; user-select: text; }
.portrait-prompt-toggle { grid-area: 1 / 1; z-index: 2; align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 12px; padding: 0 12px; border: 0; border-radius: 22px; background: var(--paper-bright); color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.portrait-prompt-toggle:hover { background: var(--orange-soft); }
.portrait-prompt-toggle svg, .portrait-prompt-close svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.portrait-prompt-close { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.portrait-example [hidden] { display: none !important; }
.portrait-prompt > summary { min-height: 44px; align-content: center; }
@media (min-width:601px) and (hover:hover) and (pointer:fine) {
 .is-prompt-enhanced .portrait-inline-prompt { grid-area: 1 / 1; z-index: 3; align-self: end; height: 320px; max-height: 100%; margin: 0; padding: 8px 12px 12px; border: 0; border-radius: 0 0 12px 12px; background: var(--night-soft); color: var(--paper-bright); animation: portrait-prompt-enter 160ms var(--ease) both; }
 .is-prompt-enhanced .portrait-prompt-toolbar { gap: 6px; margin-bottom: 8px; }
 .is-prompt-enhanced .portrait-prompt-copy { min-width: 100px; border-color: rgba(255,250,243,.32); border-radius: 8px; background: transparent; color: var(--paper-bright); }
 .is-prompt-enhanced .portrait-prompt-copy:hover, .is-prompt-enhanced .portrait-prompt-close:hover { background: rgba(255,250,243,.12); }
 .is-prompt-enhanced .portrait-prompt-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cream) var(--night-soft); }
 .is-prompt-enhanced .portrait-inline-prompt [data-prompt-text] { padding-right: 4px; font-size: 14px; line-height: 1.5; text-wrap: wrap; }
 .is-prompt-open .portrait-prompt-toggle { visibility: hidden; }
 .is-prompt-enhanced .portrait-inline-prompt :is(button,[tabindex]):focus-visible { outline: 2px solid var(--orange-light); outline-offset: 2px; }
}
.portrait-example > :is(a,button):focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 4px; }
@media (max-width:600px) {
 .portrait-looks { grid-template-columns: minmax(0,1fr); gap: 32px; margin-block: 24px; }
 .portrait-example { scroll-margin-top: 88px; }
 .portrait-example figcaption { font-size: 14px; line-height: 1.5; }
 .portrait-example figcaption strong { font-size: 16px; }
 .portrait-inline-prompt { scroll-margin-top: 88px; }
}
@keyframes portrait-prompt-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion:reduce) { .is-prompt-enhanced .portrait-inline-prompt { animation: none; } }