.portrait-layout { width: min(1100px, 100%); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.portrait-layout h2 { font-size: clamp(2.8rem, 4.4vw, 5.1rem); line-height: 1.1; margin: 11px 0 4px; }
.portrait-field { position: relative; width: 100%; height: min(43vh, 440px); min-height: 290px; margin: 4px 0 0; background: radial-gradient(ellipse at center, #b56b9c14, transparent 58%); }
.portrait-field::before, .portrait-field::after { content: ''; position: absolute; left: 50%; top: 50%; width: min(47%, 430px); aspect-ratio: 1; border: 1px solid #eec7d21d; border-radius: 50%; transform: translate(-50%, -50%) scaleX(1.6); pointer-events: none; }
.portrait-field::after { width: min(36%, 320px); transform: translate(-50%, -50%) scaleX(1.75); border-color: #eec7d217; }
.word-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.word-canvas.fresh { animation: cloud-fade .75s ease both; }
.portrait-word { position: absolute; transform: translate(-50%, -50%); padding: 10px 21px; border: 1px solid #e9bdc645; border-radius: 100px; background: linear-gradient(125deg, #4a2d4acc, #2d203bcc); color: #f3d0d1; font-family: 'Playfair Display', Georgia, serif; white-space: nowrap; box-shadow: 0 8px 28px #0002; animation: portrait-appear .65s both; }
.portrait-center { position: absolute; z-index: 1; left: 50%; top: 50%; width: 185px; height: 185px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #f5d5da8c; background: radial-gradient(circle, #5d3764, #2b1b3f 72%); box-shadow: 0 0 75px #ca81ab45, inset 0 0 30px #e9b6c621; font-family: 'Playfair Display', Georgia, serif; font-size: 3.8rem; letter-spacing: -.05em; }
.portrait-center span { font-family: 'DM Sans', Arial, sans-serif; font-size: 1rem; line-height: 1; color: #e7b8be; }
.portrait-summary { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1rem, 1.35vw, 1.4rem); font-style: italic; color: #dfc6d6; margin: 0; }
@keyframes portrait-appear { from { opacity: 0; transform: translate(-50%, -40%) scale(.82); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes cloud-fade { from { opacity: .25; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 800px) {
  .portrait-layout h2 { font-size: 2.4rem; }
  .portrait-field { height: 39vh; min-height: 250px; }
  .portrait-center { width: 118px; height: 118px; font-size: 2.6rem; }
  .portrait-word { padding: 6px 10px; font-size: 16px !important; }
  .portrait-field::before { width: 45%; }
  .portrait-summary { max-width: 300px; }
}