/* Layout measured from the supplied 762 × 1600 invitation. */
.personal-screen { position: relative; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; container-type: size; overflow: hidden; color: #fff; }
.personal-photo { position: absolute; inset: 0 0 auto; width: 100%; height: 42.2%; overflow: hidden; background: #fff; border: 0; border-radius: 0 0 10cqw 10cqw; box-shadow: 0 .8cqh 1.6cqh #101010; visibility: hidden; }
.personal-photo.is-ready { visibility: visible; animation: personalPhotoEnter 800ms cubic-bezier(.22,1,.36,1) both; }
@keyframes personalPhotoEnter { from { transform: translateY(-110%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .personal-photo.is-ready { animation: none; } }
.personal-photo > svg, .personal-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.personal-photo > [hidden] { display: none; }
.personal-uploaded-photo { filter: grayscale(1); }
.personal-copy { position: absolute; top: 45%; left: 10.5%; width: 79%; }
.personal-eyebrow { font: 600 1.875cqh/1.25 var(--sans); }
.personal-copy h1 { margin: .65cqh 0 1cqh; font: 400 3.2cqh/1.14 var(--serif); }
.personal-intro { font: 600 1.875cqh/1.15 var(--sans); }
.personal-audio-card { position: absolute; top: 59.6%; left: 10.5%; width: 78.5%; height: 24.25%; border: 1px solid #ffffff66; border-radius: 7cqw; background: #c661665c; box-shadow: inset 0 1px 0 #ffffff2b, 0 .65cqh 1.3cqh #65051928; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.personal-player { position: absolute; top: 12.5%; left: 5.5%; width: 85%; height: 20%; display: flex; align-items: center; gap: 6%; }
.personal-play { width: 9%; height: 100%; flex-shrink: 0; display: grid; place-items: center; }
.personal-play svg { width: 100%; max-height: 2.3cqh; fill: #fff; }
.personal-pause-icon { display: none; }
.is-audio-playing .personal-play-icon { display: none; }
.is-audio-playing .personal-pause-icon { display: block; }
.personal-waveform { flex: 1; position: relative; height: 100%; }
.personal-waveform svg { width: 100%; height: 100%; display: block; fill: #ffffff9c; }
.personal-wave-progress { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--voice-progress, 0%)) 0 0); }
.personal-wave-progress svg { fill: #fff; }
.personal-seek { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.personal-waveform:focus-within { outline: 2px solid white; outline-offset: 4px; border-radius: 4px; }
.personal-quote-mark { position: absolute; top: 36%; left: 5.4%; font: 600 7cqh/.8 var(--sans); }
.personal-message { position: absolute; top: 51%; left: 5.5%; width: 89%; margin: 0; color: #fff; font: 400 2.4cqh/1.13 var(--serif); }
.personal-waveform rect { transform-box: fill-box; transform-origin: center; }
.waveform-fallback rect { animation: liveWaveFallback 680ms ease-in-out infinite alternate; }
.waveform-fallback rect:nth-child(3n) { animation-duration: 410ms; animation-delay: -190ms; }
.waveform-fallback rect:nth-child(3n + 1) { animation-duration: 830ms; animation-delay: -470ms; }
.waveform-fallback rect:nth-child(5n) { animation-duration: 560ms; animation-delay: -320ms; }
@keyframes liveWaveFallback { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .waveform-fallback rect { animation: none; } }
.personal-story { position: absolute; top: 87.9%; left: 10.5%; width: 79%; height: 6.55%; border-radius: 999px; color: #000; background: #fff; box-shadow: 0 .55cqh .75cqh #65051942; font: 600 2.12cqh/1.2 var(--sans); white-space: nowrap; }
.personal-story:active { transform: scale(.98); }
.personal-screen button:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.personal-audio-status { position: absolute; top: 100%; left: 0; width: 100%; margin-top: .6cqh; color: #fff; font: 600 1.35cqh/1.2 var(--sans); text-align: center; }
.personal-audio-status:empty { display: none; }
.personal-player[hidden] { display: none; }
.personal-media-editor { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #ffffff33; }
.personal-media-editor label { display: block; margin: .65rem 0; }
.personal-media-editor input { display: block; width: 100%; margin-top: .3rem; font-size: .7rem; }
.personal-media-editor p { font-size: .7rem; line-height: 1.4; }
.personal-media-file { position: absolute; width: 1px; height: 1px; left: -10000px; opacity: 0; pointer-events: none; }
.personal-media-editor label button { display: block; width: 100%; margin-top: .3rem; padding: .48rem .65rem; border: 1px solid #ffffff45; border-radius: 7px; color: #fff; text-align: left; font: 600 .7rem var(--sans); }