/* Local demo behavior and accessibility. Geometry is in the reference stylesheet. */
#demo-dialog{position:fixed;inset:0;margin:auto;width:min(430px,calc(100vw - 32px));padding:40px 30px 28px;border:0;border-radius:24px;background:#f9f8f5;color:#120c08;font:16px/1.5 dmSans,sans-serif;box-shadow:0 20px 80px #0003}
#demo-dialog::backdrop{background:#120c0866;backdrop-filter:blur(6px)}
#demo-dialog h2{font:32px/1.05 abcMarist,Georgia,serif;margin:0 0 20px}#demo-dialog p{color:#72716d;margin:0 0 25px}
#demo-dialog .dialog-close{position:absolute;top:10px;right:16px;font-size:26px;cursor:pointer}
#demo-dialog .dialog-done{background:#120c08;color:white;padding:10px 20px;border-radius:10px;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid #42b5dc;outline-offset:3px}
[data-motion=reduced] #product-motion{height:auto!important;max-height:none!important;margin:0 auto 10rem!important;display:flex;flex-direction:column-reverse;gap:6rem;padding:0 2rem}
[data-motion=reduced] #product-motion>div{position:relative;inset:auto;transform:none!important;height:auto;max-width:900px;padding:0;width:100%}
[data-motion=reduced] #product-motion>div>div{aspect-ratio:auto;top:0;width:100%}
[data-motion=reduced] #product-motion article{position:relative;top:0;left:auto;right:auto;transform:none!important;translate:none!important;max-width:100%;margin-bottom:2rem}
[data-motion=reduced] #product-motion .description-animation{opacity:1!important;transform:none!important}
[data-motion=reduced] #product-motion .video{height:55vw;max-height:520px;pointer-events:auto}
[data-motion=reduced] #infographic{height:auto;min-height:75svh;min-width:0;padding:8rem 2rem}
[data-motion=reduced] #infographic>div:first-child{height:auto;display:flex;flex-direction:column;gap:6rem}
[data-motion=reduced] #infographic>div:first-child>div{position:relative;inset:auto;transform:none!important;translate:none!important;width:100%}
[data-motion=reduced] #infographic h2{opacity:1!important;visibility:visible!important}
[data-motion=reduced] #infographic>div:nth-child(2){display:none}
@media(prefers-reduced-motion:reduce){[data-motion=reduced] .clip-inset-collapsed,[data-motion=reduced] .clip-inset-full{transition:none!important}html[data-motion=reduced]{scroll-behavior:auto}}