/* The account lives inside the invitation. The painting remains the room. */
body{background:#eeeadd;color:#323d31;overflow-x:clip}
.garden-main{position:relative;overflow:hidden;min-height:100svh}
.garden-mast{position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:80px;margin:0 5.5vw}
.garden-mast img{display:block;width:100%;height:auto}.garden-exit{width:137px;transform:rotate(1deg)}
.garden-heading{text-align:center;margin:0;position:absolute;top:88px;left:0;right:0;z-index:4;pointer-events:none}
.garden-eyebrow{font:11px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.09em;margin:0 0 6px;color:#57624e}
.garden-heading h1{width:min(560px,85vw);margin:0 auto}.garden-heading h1 img{width:100%;height:auto;display:block}
.garden-stage{position:relative;width:100%;aspect-ratio:1.6;margin:0 auto;isolation:isolate}
.garden-layer{position:absolute;inset:0;pointer-events:none}.garden-layer>img,.garden-layer>canvas{display:block;width:100%;height:100%}
.garden-layer>canvas{position:absolute;inset:0;opacity:0}.garden-layer[data-painted="true"]>canvas{opacity:1}.garden-layer[data-painted="true"]>img{visibility:hidden}
.garden-foreground{z-index:3}
/* In the 8:5 scene, the paw baseline is 50.625% of the width; keep the title clear. */
.garden-dog{position:absolute;z-index:2;left:50%;bottom:19%;width:min(var(--dog-width,43%),calc((50.625% - 190px) * var(--dog-ratio,1.4)));padding:0;border:0;background:none;transform:translateX(-50%);cursor:zoom-in;aspect-ratio:var(--dog-ratio,1.4);transition:opacity .22s}
.garden-dog img{position:absolute;display:block;max-width:none;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.garden-dog[data-presentation="original"]{width:min(40%,calc(50.625% - 190px));aspect-ratio:1;background:#eeeadd;padding:8px}
.garden-dog[data-presentation="original"] img{position:static;width:100%!important;height:auto!important;mask-image:none!important;-webkit-mask-image:none!important}
.garden-letter{position:relative;z-index:5;width:min(540px,calc(100% - 40px));margin:-20px auto 40px;padding:30px;background:#eeeadd url('/painting/page.webp') center/100% 100%;text-align:center}
.account-message{font:12px/1.7 Arial,sans-serif;white-space:pre-line;margin:14px auto;max-width:52ch}.account-message:empty{display:none}
.garden-letter .account-gate,.garden-letter .account-card,.garden-letter .room-form{padding:0;background:none;border:0;margin:0;text-align:left}
.account-gate h2,.account-card h2,.room-form h2{font:400 29px/1.15 var(--serif);letter-spacing:-.025em;margin:8px 0 22px}
.account-gate p,.account-card p,.room-form>p{font:17px/1.7 var(--serif)}
.invitation-word{width:180px;height:auto;display:block;margin:0 0 17px}
.garden-login{display:inline-block;font:17px/1.4 var(--serif);margin:10px 0;padding:8px 0}
.garden-letter .text-link{display:block;min-height:44px;padding:10px 0;font:16px/1.5 var(--serif)}
.account-note{font:12px/1.65 Arial,sans-serif!important;color:#56634e}
.room-controls{display:grid;grid-template-columns:50px minmax(0,1fr) 50px;align-items:center;gap:20px;margin:0 auto 12px;max-width:490px}
.room-controls button{border:0;background:none;padding:0;min-height:48px;cursor:pointer}.room-controls button img{width:48px;height:auto;display:block}
.room-caption h2{font:400 clamp(24px,4vw,34px)/1.2 var(--serif);margin:0}.room-caption p{font:11px/1.5 Arial,sans-serif;color:#657159;margin:9px 0 0}
.garden-original{display:inline-block;border:0;background:none;padding:10px;cursor:zoom-in}.garden-original img{width:160px;height:auto;display:block}
.garden-personal-note{font:19px/1.5 var(--serif);max-width:46ch;margin:18px auto 24px;white-space:pre-line;overflow-wrap:anywhere}
.garden-letter .room-form{max-width:530px;margin:20px auto 0;padding-top:24px;border-top:1px solid #9da79766}.room-form label{display:block;font:16px/1.5 var(--serif)}
.room-form input{display:block;width:100%;border:0;border-bottom:1px solid #8e997c;background:transparent;padding:12px 0 9px;font:24px/1.3 var(--serif);color:#263424;margin:7px 0 23px;border-radius:0}
.garden-save{border:0;background:none;min-height:48px;padding:8px 0;cursor:pointer}.garden-save img{display:block;width:190px;height:auto}
.garden-save:disabled{opacity:.5;cursor:wait}.room-form details{margin-top:22px;font:12px/1.6 Arial,sans-serif;color:#56634e}.room-form summary{cursor:pointer}.room-form details p{margin:14px 0}
.garden-letter .button.primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;margin:12px 0;padding:12px 22px;border:1px solid #465b3e;border-radius:3px;background:#465b3e;color:#fffdf3;font:18px/1.35 var(--serif);text-align:center;text-decoration:none;cursor:pointer}
.garden-letter .button.primary:hover:not(:disabled){background:#354831}.garden-letter .button.primary:focus-visible{outline:2px solid #354831;outline-offset:4px}.garden-letter .button.primary:disabled{opacity:.45;cursor:default}
.garden-footer{width:min(900px,calc(100% - 44px));margin:0 auto;padding:20px 0 28px;text-align:center;border:0}
.garden-footer nav{display:flex;justify-content:center;gap:16px 26px;flex-wrap:wrap}.garden-footer a{font:12px/1.5 Arial,sans-serif;color:#56634e}.garden-footer>p{width:125px;margin:25px auto 0}.garden-footer>p img{width:100%;height:auto;display:block}
.garden-lightbox{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);padding:15px;background:#eeeadd}.garden-lightbox>button{position:sticky;top:0;display:block;margin-left:auto;background:#eeeadd}.garden-lightbox>img{width:100%;height:auto;display:block}.garden-lightbox>p{font:12px/1.5 Arial,sans-serif;text-align:center;margin:12px auto}
@media(max-width:700px){
 .garden-mast{margin:0 22px;min-height:64px}.garden-mast .wordmark{width:115px}.garden-exit{width:114px}
 .garden-heading{top:70px}.garden-heading h1{width:min(500px,90vw)}.garden-eyebrow{font-size:10px}
 .garden-stage{width:max(100%,640px);max-width:none;margin:0;left:50%;transform:translateX(-50%)}
 .garden-layer{top:0;bottom:0}.garden-layer>img,.garden-layer>canvas{object-fit:fill}
 .garden-dog{bottom:20%;width:min(var(--dog-mobile-width,43%),calc((50% - 165px) * var(--dog-ratio,1.4)))}
 .garden-dog[data-presentation="original"]{width:min(40%,calc(50% - 165px))}
 .garden-welcome{width:41%;top:53%}.garden-welcome a{font-size:12px}
 .garden-letter{margin:-12px auto 24px;padding:24px}
 .room-controls{gap:10px;grid-template-columns:44px minmax(0,1fr) 44px}.room-controls button img{width:42px}
 .room-caption h2{font-size:27px}.garden-personal-note{font-size:18px}
 .garden-footer nav{gap:13px 20px}.garden-footer{padding-top:12px}
}
/* The invitation sits in the painting, including before sign-in. */
body[data-garden-state="waiting"] .garden-main{display:grid;place-items:center;padding:180px 20px 60px}
body[data-garden-state="waiting"] .garden-stage{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none}
body[data-garden-state="waiting"] .garden-layer>img,body[data-garden-state="waiting"] .garden-layer>canvas{object-fit:cover;object-position:center bottom}
body[data-garden-state="waiting"] .garden-letter{width:min(500px,100%);margin:0}
@media(min-width:1000px){
 body[data-garden-state="invited"] .garden-main{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:6vw;align-items:center;min-height:max(800px,100svh);padding:180px 5.5vw 60px}
 body[data-garden-state="invited"] .garden-stage{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
 body[data-garden-state="invited"] .garden-layer>img,body[data-garden-state="invited"] .garden-layer>canvas{object-fit:cover;object-position:center bottom}
 body[data-garden-state="invited"] .garden-heading{left:5.5vw;right:calc(440px + 11.5vw)}
 body[data-garden-state="invited"] .garden-heading h1{width:min(560px,100%)}
 body[data-garden-state="invited"] .garden-letter{grid-column:2;width:100%;margin:0}
 body[data-garden-state="invited"] .garden-dog{left:calc(47vw - 220px);bottom:18%;width:min(calc(89vw - 500px),calc((max(656px,82svh) - 200px) * var(--dog-ratio,1.4)),760px)}
 body[data-garden-state="invited"] .garden-dog[data-presentation="original"]{width:min(calc(89vw - 500px),calc(max(656px,82svh) - 200px),540px)}
 .garden-letter .room-form h2{font-size:25px;margin-bottom:18px}
 .garden-letter .room-form input{font-size:22px;margin-bottom:16px}
 .garden-letter .room-form details{margin-top:12px}
}
@media(max-width:700px){
 body[data-garden-state="waiting"] .garden-main{padding-top:150px;padding-bottom:40px}
 .garden-letter .account-gate h2{font-size:27px}
}
@media(prefers-reduced-motion:reduce){.garden-dog{transition:none}}

body:has(dialog[open]){overflow:hidden}

/* A newly painted dog and its interacting props need room on a phone. */
@media(max-width:700px){
 body[data-custom-garden="true"]{--garden-mobile-height:clamp(470px,70svh,620px)}
 body[data-custom-garden="true"] .garden-stage{height:var(--garden-mobile-height);aspect-ratio:auto}
 body[data-custom-garden="true"] .garden-layer>img,body[data-custom-garden="true"] .garden-layer>canvas{object-fit:cover;object-position:center bottom}
 body[data-custom-garden="true"] .garden-dog{width:min(58%,calc((var(--garden-mobile-height) * .8 - 150px) * var(--dog-ratio,1.4)))}
}

/* A scene is a private presentation of an immutable painting. */
.garden-options{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px;margin:0 0 25px;border:1px solid #7e8c7266;border-radius:4px;text-align:center}
.garden-options legend{padding:0 8px;font:11px/1.4 Arial,sans-serif;letter-spacing:.06em;color:#657159}
.garden-options label{position:relative;display:grid;cursor:pointer;min-width:0}
.garden-options input{position:absolute;width:1px;height:1px;opacity:0}
.garden-options span{display:grid;place-items:center;min-height:46px;padding:8px;font:17px/1.3 var(--serif);border:1px solid transparent;border-radius:2px}
.garden-options input:checked+span{background:#dce0cf;border-color:#87927766;color:#263424}
.garden-options input:focus-visible+span{outline:2px solid #354a36;outline-offset:3px}
.garden-options:disabled{opacity:.6;cursor:wait}
.room-controls-toggle,.room-controls-single{display:block}.room-controls-toggle .room-caption h2{font-size:32px}
body[data-ceremony="true"] .garden-heading h1{width:min(420px,75vw)}
body[data-ceremony="true"] .garden-dog{overflow:visible;width:min(84%,calc((100% - 145px)*var(--dog-ratio)));bottom:8%}
body[data-ceremony="true"] .garden-foreground{z-index:1}
@media(min-width:1000px){
 body[data-ceremony="true"] .garden-main{padding-top:120px}
 body[data-ceremony="true"] .garden-heading{top:98px}
 body[data-ceremony="true"] .garden-dog{bottom:10%;width:min(calc(89vw - 490px),calc((max(800px,100svh) - 205px)*var(--dog-ratio)),1060px)}
}
@media(max-width:999px){
 body[data-ceremony="true"] .garden-stage{width:100%;left:0;transform:none;--scene-height:clamp(480px,80vw,760px);height:var(--scene-height);aspect-ratio:auto}
 body[data-ceremony="true"] .garden-layer>img,body[data-ceremony="true"] .garden-layer>canvas{object-fit:cover;object-position:center bottom}
 body[data-ceremony="true"] .garden-dog{width:min(96%,calc((var(--scene-height) - 145px)*var(--dog-ratio)));bottom:5%}
 body[data-ceremony="true"] .garden-letter{margin:-5px auto 24px;width:min(540px,calc(100% - 32px))}
}
@media(prefers-reduced-motion:no-preference){
 body[data-ceremony="true"] .garden-dog[aria-busy="true"]{opacity:.55}
}

@media(min-width:1280px){
 body[data-ceremony-canopy="true"] .garden-dog{width:min(calc((max(800px,100svh)*.9)*var(--dog-ratio)),calc((89vw - 490px)*1.35),1200px)}
}

/* A single invitation: the painting, its choice, then a name. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.garden-original{padding:14px 0;max-width:100%;min-height:58px}
.garden-original img{width:min(290px,100%)}
.garden-choice{border:0;background:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:14px 0;min-height:62px;cursor:pointer;color:#202821;max-width:100%}
.garden-choice img{width:100%;max-width:355px;height:auto;min-width:0}
.garden-choice .choice-star{font-size:clamp(24px,3vw,36px);line-height:1}
.garden-choice:focus-visible{outline:2px solid #354a36;outline-offset:6px}
.garden-choice:disabled{opacity:.5;cursor:wait}
.garden-choice[hidden],.room-form[hidden]{display:none}
.garden-choice-top{width:100%;margin:0 auto 10px}
.garden-choice-below{position:absolute;z-index:4;bottom:12px;left:50%;transform:translateX(-50%);width:min(370px,85%);filter:drop-shadow(0 1px 1px #eeeadd)}
.room-controls-toggle .room-caption h2{display:none}
.room-controls-toggle .room-caption p{margin:0}.garden-options{margin-bottom:5px}
.garden-letter{padding:28px}.garden-letter .room-form{margin-top:15px;padding-top:20px}
.room-form .text-button{display:block;min-height:44px;margin:8px 0;padding:8px 0;border:0;background:none;color:inherit;font:16px/1.5 var(--serif);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
body[data-ceremony="true"] .garden-dog{top:0;bottom:auto;height:calc(100% - 110px);width:auto;max-width:none;aspect-ratio:var(--dog-ratio)}
@media(min-width:1000px){
 body[data-garden-state="invited"] .garden-main{min-height:max(720px,100svh);padding-top:105px;padding-bottom:90px;align-items:start}
 body[data-garden-state="invited"] .garden-letter{margin-top:15px}
 .garden-choice-below{left:calc(47vw - 220px);bottom:24px;width:min(410px,calc(89vw - 500px))}
 body[data-ceremony="true"] .garden-dog{top:0;bottom:auto;height:calc(100% - 125px);width:auto;max-width:none}
}
@media(max-width:999px){
 body[data-ceremony="true"] .garden-stage{height:clamp(440px,85vw,700px)}
 body[data-ceremony="true"] .garden-letter{margin:0 auto 24px}
 .garden-choice-below{bottom:10px}
}

@media(max-width:999px){body[data-garden-state="invited"] .garden-main{min-height:0}}
.choice-star{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

@media(min-width:1000px){
 body[data-ceremony="true"] .garden-main{min-height:max(720px,min(100svh,calc((89vw - 500px)/var(--scene-ratio,1.1) + 125px)))}
 body[data-ceremony="true"] .garden-stage{--paint-height:min(calc(100% - 125px),calc((89vw - 500px)/var(--scene-ratio,1.1)))}
 body[data-ceremony="true"] .garden-dog{height:var(--paint-height)}
 body[data-ceremony="true"] .garden-choice-below{top:calc(var(--paint-height) + 16px);bottom:auto}
}

.garden-letter .room-form input:focus-visible{outline:2px solid #557064;outline-offset:4px}
@media(max-width:600px){.garden-letter .room-form .button.primary{width:100%}}