/* Compact controls live only over the existing slideshow. */
.montage{position:relative}
.magic-experience{position:absolute;z-index:8;left:12px;right:12px;bottom:14px;display:flex;align-items:center;flex-direction:column;pointer-events:none}
.magic-shell{pointer-events:auto;max-width:100%;width:330px;border:1px solid #e0d6e8;border-radius:16px;padding:9px 12px 4px;background:#fffcf8ed;box-shadow:0 3px 15px #25123c14;backdrop-filter:blur(10px);color:#483456;text-align:center}
.magic-heading{font:500 13px/1.4 Poppins,Arial,sans-serif!important;margin:0 0 2px!important;letter-spacing:0!important;color:#483456!important}
.magic-experience button{pointer-events:auto;font:inherit;cursor:pointer;min-height:36px;border:0;background:transparent;color:#483456;border-radius:9px}
.magic-experience button:focus-visible{outline:3px solid #32c6e5;outline-offset:2px}
.magic-experience button:hover,.magic-experience button[aria-pressed=true]{background:#ece4f1}
.magic-languages{display:flex;justify-content:center;gap:2px}
.magic-languages button{font-size:11px;padding:3px 9px;white-space:nowrap}
.magic-languages button[aria-pressed=true]{color:#583875;font-weight:600}
.magic-languages button:disabled{opacity:.42;cursor:default;background:transparent}
.magic-start{display:block;margin:0 auto;width:42px;padding:7px!important}
.magic-experience svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin:auto}
.magic-start svg{fill:currentColor}
.magic-buttons{display:flex;align-items:center;justify-content:center;gap:3px}
.magic-buttons button{width:37px;padding:7px}
.magic-time{font:10px/1.2 Poppins,Arial,sans-serif;font-variant-numeric:tabular-nums;color:#76697e;margin-left:6px;white-space:nowrap}
.magic-status{pointer-events:auto;background:#fffcf8;color:#483456;border-radius:10px;padding:8px 12px;font-size:13px;margin:6px 0 0;text-align:center}
.magic-caption{position:absolute;z-index:7;left:14px;right:14px;bottom:136px;padding:8px 12px;border-radius:9px;background:#211b29e8;color:white;font:14px/1.45 Arial,sans-serif;text-align:center;margin:0;pointer-events:none}
.magic-experience [hidden],.magic-caption[hidden]{display:none!important}
@media(max-width:480px){.magic-shell{width:300px;padding:7px 6px 2px}.magic-heading{font-size:12px!important}.magic-languages button{font-size:10px;padding:3px 7px;min-height:40px}.magic-buttons button,.magic-start{min-height:44px}.magic-caption{bottom:143px;font-size:12px}}
.montage[data-narration-active="true"] .montage-controls{visibility:hidden}
.montage .montage-image{pointer-events:none}

@media(max-width:600px){.magic-experience{position:relative;left:auto;right:auto;bottom:auto;margin:8px auto 0;width:100%}.magic-shell{width:330px}.magic-caption{bottom:12px}.montage-controls{display:none}}
/* Purple invitation first; discreet controls appear only after starting. */
.magic-experience{align-items:flex-end;left:20px;right:20px;bottom:18px}
.magic-shell{width:auto;max-width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;display:flex;align-items:center;justify-content:flex-end;gap:0}
.magic-experience .magic-start{width:auto;min-height:44px;padding:11px 20px!important;border:1px solid #ffffffa8;border-radius:30px;background:#684687f2;color:white;font-size:13px;font-weight:500;line-height:1.4;box-shadow:0 3px 15px #25123c20;text-wrap:balance;margin:0}
.magic-experience .magic-start:hover{background:#55356f}
.magic-start span{font-size:11px;margin-right:7px}
.montage[data-narration-active=true] .magic-shell{border-radius:28px;background:#fffcf8ed;box-shadow:0 2px 12px #25123c15;padding:2px 8px}
.magic-languages button{font-size:11px;min-height:40px;padding:3px 7px}
.magic-buttons button{width:33px;min-height:40px;padding:6px}
.magic-time{display:none}
.magic-panel{border-left:1px solid #ded3e6;margin-left:5px;padding-left:5px}
.magic-caption{bottom:78px}
@media(max-width:600px){.magic-experience{left:auto;right:auto;bottom:auto;align-items:center}.magic-shell{width:auto;justify-content:center}.magic-experience .magic-start{font-size:12px;padding:10px 15px!important}.magic-languages button{padding:3px 5px;font-size:10px}.magic-buttons button{width:31px}.magic-caption{bottom:12px}}

/* Keep the invitation and active controls clear of the colored accents. */
.magic-experience{align-items:center}

/* One-click language invitations beneath the photographs. */
.magic-experience{position:relative;inset:auto;width:100%;margin:18px auto 0;align-items:center;pointer-events:auto}
.magic-shell,.montage[data-narration-active=true] .magic-shell{display:flex;flex-direction:column;gap:12px;width:100%;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.magic-experience .magic-heading{font:500 17px/1.4 Poppins,Arial,sans-serif!important;color:#087ca1!important;margin:0!important;text-align:center}
.magic-languages{gap:12px;flex-wrap:wrap}
.magic-experience .magic-languages button{background:var(--voice-color,#684687);color:var(--voice-text,#fff);border:1px solid var(--voice-color,#684687);border-radius:24px;font-size:13px;font-weight:500;padding:10px 18px;min-height:44px}
.magic-experience .magic-languages button:hover{background:var(--voice-active,#55356f);border-color:var(--voice-active,#55356f)}
.magic-experience .magic-languages button[aria-pressed=true]{background:var(--voice-active,#55356f);border-color:var(--voice-active,#55356f);color:var(--voice-text,#fff);box-shadow:0 0 0 2px var(--voice-ring,#e6dcee)}
.magic-languages button span{font-size:11px;margin-right:6px}
.magic-panel{border:0;padding:0;margin:0}
.magic-caption{bottom:12px}
@media(max-width:380px){.magic-languages{flex-direction:column;width:100%;max-width:230px}.magic-experience .magic-heading{font-size:15px!important}}

/* Logo-inspired colors distinguish the narration choices. */
.magic-languages [data-magic-language="en"]{--voice-color:#eaf4f8;--voice-active:#dcecf3;--voice-ring:#cce2eb;--voice-text:#24647b}
.magic-languages [data-magic-language="es"]{--voice-color:#edf5ef;--voice-active:#dfede3;--voice-ring:#cfe2d5;--voice-text:#38664d}
.magic-languages [data-magic-language="ht"]{--voice-color:#faedf3;--voice-active:#f2e0e9;--voice-ring:#ead1dd;--voice-text:#87415f}
