/* Local document foundation and invitation controls. */
/* Preserve the invitation palette when the browser requests a dark theme. */
:root { color-scheme: only light; }
*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit;background:#fff}
h1,h2,h3,p,ol{margin:0}h1,h2,h3{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
button,input{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button{background:transparent;cursor:pointer;text-transform:none;-webkit-appearance:button}
img,svg,audio{display:block;vertical-align:middle}img{max-width:100%;height:auto}
[hidden]{display:none!important}
.invitation-shell{position:relative;z-index:20;margin:0 auto;min-height:100vh;width:100%;max-width:448px;overflow-x:clip}
.invitation{position:relative;width:100%;text-align:center;overflow:hidden}
.invitation-envelope{position:fixed;top:0;z-index:50;margin:0 auto;height:100vh;width:100%;max-width:448px;overflow:hidden}
@media(min-width:640px){.invitation-shell{box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)}}
.animate-lightpulse{animation:lightpulse 2s ease-in-out infinite}
@keyframes lightpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
#bottom-controls{pointer-events:none;position:fixed;bottom:0;z-index:20;height:48px;width:100%;max-width:448px}
.invitation-bottom-row{position:relative;margin:0 20px;display:flex}
.invitation-sound{pointer-events:auto;margin-left:auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#565831}
.invitation-sound img{width:20px;height:20px}
.invitation-scroll-hint{position:relative;margin-right:auto;transition:opacity .3s}
.invitation-scroll-hint span{position:absolute;bottom:-12px;left:0;white-space:nowrap;text-align:center;font-size:16px;color:white;filter:drop-shadow(0 0 2px black)}
.invitation-scroll-hint svg{filter:drop-shadow(2px 2px 2px rgb(0 0 0/.5));animation:scroll-hint 1.7s ease-in-out infinite}
@keyframes scroll-hint{0%,100%{transform:translateY(0) rotate(-20deg)}50%{transform:translateY(-5px) rotate(-25deg)}}
.invitation-map{position:fixed;inset:0;margin:0;padding:16px;width:100vw;max-width:none;height:100vh;max-height:none;overflow-y:auto;background:transparent;color:#000;font:16px/24px ui-sans-serif,system-ui,sans-serif}
.invitation-map::backdrop{background:rgb(0 0 0/.3)}
.invitation-map-panel{margin:0 auto;min-width:100%;padding:8px 16px 16px;border-radius:4px;background:white}
.invitation-map header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;padding:4px 0 8px;border-bottom:1px solid #e5e7eb}
.invitation-map header button{flex:none}
.invitation-map iframe{border:0;display:block;width:100%;height:80vh;background:#e5e7eb}
@media(min-width:768px){.invitation-map-panel{min-width:70%}}
@media(min-width:1024px){.invitation-map-panel{min-width:50%;max-width:1024px}}
@media(prefers-reduced-motion:reduce){.animate-lightpulse,.invitation-scroll-hint svg{animation:none}}