@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&display=swap');
:root{color-scheme:light;--cream:#f6f1e7;--green:#254237;--serif:"Cormorant Garamond",Georgia,serif}
*{box-sizing:border-box} [hidden]{display:none!important}
body{margin:0;background:var(--cream);color:var(--green);font:400 20px/1.45 var(--serif)}
#home{max-width:430px;margin:auto;text-align:center;padding:clamp(34px,8vh,84px) 26px 30px}
h1{font-size:clamp(40px,10vw,54px);font-weight:500;line-height:1.05;margin:0 0 14px}
#home p{margin:18px auto;max-width:35ch}
#home .subtitle{font:400 11px/1.5 system-ui,sans-serif;letter-spacing:.17em;text-transform:uppercase;margin:0 auto 27px}
#home .choose{font-size:16px;margin:27px auto 0}
button{background:none;border:0;color:inherit;font:inherit;min-height:48px;cursor:pointer}
button:active{color:#10291f} button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.theme{width:100%;font-size:29px;font-weight:500}
details{margin-top:16px;font-size:16px}summary{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
#prayer,#thanks{position:fixed;inset:0;overflow:hidden}
.image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--fade,4s) ease;background:var(--cream)}
.image.visible{opacity:1}
#words{position:absolute;z-index:2;left:18px;right:18px;top:50%;transform:translateY(-50%);margin:0;text-align:center;font-size:clamp(26px,6vw,38px);opacity:0;transition:opacity 2s ease;pointer-events:none}
.movements{max-width:35ch;margin:0 auto 20px;text-align:left}
.movements dt{font-weight:500;margin-top:12px}
.movements dd{margin:0}
#words.visible{opacity:1}
#words{white-space:pre-line}
#finish{position:absolute;inset:0;width:100%;z-index:3;color:#344234}
#finish span{position:absolute;left:14px;right:14px;bottom:max(8%,env(safe-area-inset-bottom));font-size:clamp(22px,5vw,29px);opacity:0;transition:opacity 2s ease}
#finish.cue span,#finish:focus-visible span{opacity:1}
#thanks{display:grid;place-content:center;justify-items:center;text-align:center;padding:30px;font-size:clamp(25px,6vw,34px);animation:arrive 2s ease both}
#thanks p{max-width:26ch;margin:0}#return{margin-top:26px;font-size:20px;text-decoration:underline;text-underline-offset:5px;animation:arrive 2s ease both}#return[hidden]{display:block!important;visibility:hidden}
#thanks .journal{margin:22px 0 0;max-width:35ch;font-size:clamp(18px,4.5vw,23px)}
#prepare{max-width:430px;margin:auto;padding:clamp(42px,12vh,120px) 28px 32px;text-align:center;font-size:clamp(22px,5.5vw,29px);animation:arrive 2s ease both}
#prepare p{margin:0 auto 24px;max-width:28ch}
#ready{margin-top:18px;text-decoration:underline;text-underline-offset:5px;animation:arrive 2s ease both}
@keyframes arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01s!important;animation-duration:.01s!important}}