:root { --renderer-safe-area-top: env(safe-area-inset-top, 0px); --renderer-safe-area-bottom: env(safe-area-inset-bottom, 0px); --renderer-safe-area-left: env(safe-area-inset-left, 0px); --renderer-safe-area-right: env(safe-area-inset-right, 0px); --renderer-control-secondary: clamp(44px, 12cqw, 60px); --renderer-control-primary: clamp(60px, 17cqw, 84px); --renderer-control-gap: clamp(8px, 3cqw, 20px); --renderer-top-hardware-clearance: 14px; --renderer-gesture-clearance: 64px; --renderer-control-zone-buffer: 14px; --renderer-control-zone-bottom: max(14px, var(--renderer-safe-area-bottom)); --renderer-control-zone-horizontal: max(12px, var(--renderer-safe-area-left), var(--renderer-safe-area-right)); }
.device-simulator__device--android-tablet .portrait-renderer, .device-simulator__device--ipad .portrait-renderer, .device-simulator__device--large-tablet .portrait-renderer { --renderer-top-hardware-clearance: 12px; --renderer-gesture-clearance: 48px; --renderer-control-secondary: clamp(64px, 8cqw, 72px); --renderer-control-primary: clamp(84px, 11cqw, 96px); --renderer-control-gap: clamp(14px, 2.5cqw, 24px); }
.portrait-renderer-host { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; background: #05070b; }
.portrait-renderer { --adaptive-background-blur: 40px; --adaptive-background-brightness: 80%; --adaptive-background-scale: 1.15; --adaptive-background-saturation: 100%; --adaptive-edge-blend: 2.5%; position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; container-type: size; background: transparent; color: #fff; }
.portrait-renderer__scene, .portrait-renderer__shade { position: absolute; inset: 0; }.portrait-renderer__scene { z-index: 0; overflow: hidden; background: #05070b; }.portrait-renderer__backdrop { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; object-position: center; filter: blur(var(--adaptive-background-blur)) brightness(var(--adaptive-background-brightness)) saturate(var(--adaptive-background-saturation)); transform: scale(var(--adaptive-background-scale)); }.portrait-renderer__shade { z-index: 1; background: rgba(0,0,0,.18); }
.portrait-renderer__wedding-placeholder { display: none; position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 72% 28%, rgba(255,233,192,.72), transparent 20%), linear-gradient(145deg, #2a1a20, #765462 47%, #d8ad91 100%); }.portrait-renderer__wedding-placeholder span, .portrait-renderer__wedding-placeholder i, .portrait-renderer__wedding-placeholder b { position: absolute; display: block; border-radius: 50%; filter: blur(1px); }.portrait-renderer__wedding-placeholder span { width: 55%; aspect-ratio: 1; left: 22%; top: 29%; background: radial-gradient(circle at 45% 38%, #f8d9c2 0 16%, #5e3a37 17% 26%, transparent 27%); opacity: .8; }.portrait-renderer__wedding-placeholder i { width: 92%; height: 24%; left: 4%; bottom: 8%; background: rgba(255,244,221,.48); transform: rotate(-9deg); }.portrait-renderer__wedding-placeholder b { width: 12px; height: 12px; background: #f8e1a4; top: 18%; left: 17%; box-shadow: 54px 72px #f8e1a4, 152px 45px #fff4da, 204px 123px #f8e1a4; }
.portrait-renderer__artwork-frame { position: relative; z-index: 2; width: min(100cqw, 56.25cqh); height: min(100cqh, 177.7778cqw); }.portrait-renderer__artwork { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; -webkit-mask-image: radial-gradient(ellipse 100% 100% at center, #000 calc(100% - var(--adaptive-edge-blend)), transparent 100%); mask-image: radial-gradient(ellipse 100% 100% at center, #000 calc(100% - var(--adaptive-edge-blend)), transparent 100%); }
.portrait-renderer__branding { position: absolute; z-index: 3; top: calc(var(--renderer-safe-area-top) + var(--renderer-top-hardware-clearance)); left: 50%; width: min(48%, 260px); transform: translateX(-50%); text-align: center; }.portrait-renderer__branding img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)); }
.portrait-renderer__editorial { position: absolute; z-index: 3; left: clamp(18px, 7%, 56px); right: clamp(18px, 7%, 56px); bottom: calc(var(--renderer-control-zone-bottom) + var(--renderer-gesture-clearance) + var(--renderer-control-zone-buffer) + var(--renderer-control-primary) + clamp(32px, 6cqh, 72px)); display: grid; row-gap: clamp(7px, 1.4cqh, 16px); text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.72); }.portrait-renderer__eyebrow, .portrait-renderer__supporting, .portrait-renderer__venue, .portrait-renderer__date { margin: 0; font-size: clamp(10px, 2.5cqw, 24px); font-weight: 800; letter-spacing: .15em; line-height: 1.28; text-transform: uppercase; }.portrait-renderer__eyebrow { color: #d5f8ff; }.portrait-renderer__name { margin: clamp(1px, .4cqh, 5px) 0 clamp(3px, .8cqh, 10px); font-size: clamp(26px, 7.5cqw, 68px); font-weight: 900; letter-spacing: -.04em; line-height: .93; }.portrait-renderer__title { margin: 0 0 clamp(2px, .7cqh, 9px); color: #7deefa; font-size: clamp(16px, 4.4cqw, 42px); font-weight: 900; letter-spacing: .08em; line-height: 1.08; text-transform: uppercase; }.portrait-renderer__supporting { color: rgba(255,255,255,.92); font-size: clamp(10px, 2.6cqw, 24px); letter-spacing: .04em; text-transform: none; }.portrait-renderer__venue { color: #fff2d7; font-size: clamp(10px, 2.7cqw, 25px); letter-spacing: .04em; text-transform: none; }.portrait-renderer__date { color: #fff; font-size: clamp(10px, 2.6cqw, 24px); }
.portrait-renderer__home-hotspot { position: absolute; z-index: 4; top: var(--renderer-safe-area-top); left: 0; width: 100%; height: clamp(88px, 22%, 210px); }.portrait-renderer__controls { position: absolute; z-index: 5; left: var(--renderer-control-zone-horizontal); right: var(--renderer-control-zone-horizontal); bottom: calc(var(--renderer-control-zone-bottom) + var(--renderer-gesture-clearance) + var(--renderer-control-zone-buffer)); display: flex; align-items: center; justify-content: center; gap: var(--renderer-control-gap); }.portrait-renderer__control { flex: 0 1 var(--renderer-control-secondary); width: var(--renderer-control-secondary); min-width: 44px; aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(4,7,13,.74); color: #fff; cursor: pointer; text-decoration: none; }.portrait-renderer__control--primary { flex-basis: var(--renderer-control-primary); width: var(--renderer-control-primary); }.portrait-renderer__control svg { width: 42%; height: 42%; fill: currentColor; }.portrait-renderer__control:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.portrait-renderer__guides { display: none; position: absolute; inset: 0; z-index: 6; pointer-events: none; }.portrait-renderer.is-showing-layout-guides .portrait-renderer__guides { display: block; }.portrait-renderer__guides::before { content: 'Simulated / real safe-area top'; position: absolute; top: 0; left: 0; right: 0; height: var(--renderer-safe-area-top); box-sizing: border-box; border-bottom: 1px dashed #ff8fb0; background: rgba(255,143,176,.08); color: #ffd1df; font: 700 9px/1.2 system-ui, sans-serif; letter-spacing: .06em; padding: 4px 8px; text-transform: uppercase; }.portrait-renderer__guides::after { content: 'Additional top hardware clearance'; position: absolute; top: var(--renderer-safe-area-top); left: 0; right: 0; height: var(--renderer-top-hardware-clearance); box-sizing: border-box; border-bottom: 1px dashed #f4c542; background: rgba(244,197,66,.08); color: #fff0b3; font: 700 9px/1.2 system-ui, sans-serif; letter-spacing: .06em; padding: 4px 8px; text-transform: uppercase; }.portrait-renderer__guide-branding { position: absolute; top: calc(var(--renderer-safe-area-top) + var(--renderer-top-hardware-clearance)); left: 12%; right: 12%; height: clamp(74px, 18%, 160px); border: 1px dashed #f4c542; }.portrait-renderer__guide-branding::after { content: 'Branding zone'; position: absolute; top: 3px; left: 4px; color: #fff0b3; font: 700 9px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }.portrait-renderer__guide-subject { position: absolute; top: 24%; left: 18%; width: 64%; height: 30%; border: 1px dashed #cf8bff; border-radius: 44% 44% 35% 35%; }.portrait-renderer__guide-editorial { position: absolute; left: 8%; right: 8%; bottom: calc(var(--renderer-control-zone-bottom) + var(--renderer-gesture-clearance) + var(--renderer-control-zone-buffer) + var(--renderer-control-primary) + 16px); height: 24%; border: 1px dashed #72e6a5; }.portrait-renderer__guide-zone { position: absolute; left: var(--renderer-control-zone-horizontal); right: var(--renderer-control-zone-horizontal); bottom: calc(var(--renderer-control-zone-bottom) + var(--renderer-gesture-clearance) + var(--renderer-control-zone-buffer)); height: calc(var(--renderer-control-primary) + 16px); border: 1px dashed #38e8f6; }.portrait-renderer__guide-zone::after { content: 'Control band'; position: absolute; top: 3px; left: 4px; color: #a4fbff; font: 700 9px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }.portrait-renderer__guide-gesture { position: absolute; left: 0; right: 0; bottom: var(--renderer-safe-area-bottom); height: var(--renderer-gesture-clearance); box-sizing: border-box; border-top: 1px dashed #ff8fb0; background: rgba(255,143,176,.08); }.portrait-renderer__guide-gesture::before { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--renderer-safe-area-bottom)); height: var(--renderer-safe-area-bottom); border-top: 1px dashed #ff8fb0; background: rgba(255,143,176,.14); }.portrait-renderer__guide-gesture::after { content: 'Additional gesture exclusion'; position: absolute; top: 4px; left: 8px; color: #ffd1df; font: 700 9px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }.portrait-renderer__guide-centre { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed rgba(255,255,255,.8); }
@media (max-width: 340px) { .portrait-renderer__controls { gap: 6px; }.portrait-renderer__control { min-width: 40px; }.portrait-renderer__editorial { left: 14px; right: 14px; } } @media (prefers-reduced-motion: reduce) { .portrait-renderer__control { transition: none; } }
.portrait-renderer__guide-gesture::before { content: 'Simulated / real bottom safe-area'; color: #ffd1df; font: 700 9px/1.2 system-ui, sans-serif; letter-spacing: .06em; padding: 4px 8px; text-transform: uppercase; }