:root{--ink:#3c4b47;--muted:#737d76;--blue:#5276b0;--paper:#f7f5ef;--line:#e0e2d9}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}header{max-width:1250px;margin:auto;padding:26px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{color:inherit;text-decoration:none;font-family:serif;font-size:27px;letter-spacing:.18em}.logo span{font-size:10px;letter-spacing:.16em;margin-left:10px}.eyebrow{font-size:10px;letter-spacing:.19em;color:var(--muted)}main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:70px;max-width:1190px;padding:50px 5%;margin:auto}.editor{min-width:0}h1{font-family:serif;font-size:39px;font-weight:400;line-height:1.65;letter-spacing:.07em;margin:18px 0}p{font-size:13px;line-height:1.9;color:var(--muted)}h2{font-size:13px;font-weight:500;letter-spacing:.05em;margin:0 0 16px}h2 span{font-size:10px;letter-spacing:.12em;color:#9ba596;margin-right:14px}.step{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}button,input,select{font:inherit}button{border:0;cursor:pointer;color:inherit}button:disabled{opacity:.4;cursor:default}input,select{border:1px solid #d9ded5;background:#fdfcf8;color:var(--ink);border-radius:7px;font-size:13px;padding:12px;min-width:0;max-width:100%}input{width:100%}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9bb3d5;outline-offset:3px}.person{display:grid;grid-template-columns:minmax(80px,1fr) 80px 80px 28px;gap:7px;margin-bottom:10px;align-items:center}.remove{background:transparent;font-size:20px;min-height:44px;color:#8b948b;padding:0}.text-button{padding:10px 0;background:transparent;color:#667c64;font-size:12px}.text-button.small{font-size:11px}.hint{font-size:11px;margin:0}.styles{display:flex;gap:8px;margin-bottom:16px}.style{border-radius:25px;padding:10px 15px;font-size:12px;background:#ebece3;min-height:40px}.style.active{background:#61755d;color:white}.primary{border-radius:8px;background:#5c7057;color:white;padding:16px 20px;width:100%;font-size:13px;letter-spacing:.08em;margin-top:20px;display:flex;justify-content:space-between;align-items:center}.note{font-size:10px;margin-top:24px;line-height:1.9}#vases{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.vase-option{border:1px solid transparent;border-radius:9px;background:#eeeee6;padding:7px 2px 9px;font-size:9px;color:#687367}.vase-option svg{height:63px;width:100%;display:block;margin-bottom:7px}.vase-option[aria-pressed=true]{background:#e8edf2;border-color:#9ab0cb;color:#426594}.vase-option .check{display:inline-block;width:10px}.art{position:sticky;top:24px;overflow:hidden;border-radius:140px 140px 14px 14px;background:#f8f6ef;padding:24px 20px 14px}.preview-label{display:flex;align-items:center;justify-content:center;gap:25px;margin:8px 0 0}.art #scene{width:100%;}#scene svg{width:100%;height:min(65vh,600px);display:block;overflow:hidden}.preview-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 5px 5px}#flower-label{font-size:11px;line-height:1.7;color:#6c7c69;max-width:78%}footer{text-align:center;border-top:1px solid var(--line);padding:25px;font-size:10px;color:#8b9586}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{border:0;border-radius:18px;padding:24px;max-width:510px;width:calc(100% - 30px);max-height:92dvh;overflow:auto;background:var(--paper);color:var(--ink);text-align:center}dialog::backdrop{background:#2d3e3970;backdrop-filter:blur(5px)}dialog .primary{justify-content:center}.close{position:absolute;right:12px;top:8px;font-size:28px;background:transparent;width:40px;height:40px}.close~#full-art{margin-top:20px}#full-art svg{width:100%;height:auto;display:block}#save-status{font-size:11px}.enter{animation:place 1.5s cubic-bezier(.25,.7,.25,1) both;animation-delay:var(--delay,0ms);transform-origin:400px 535px}.droplet{animation:drip 1.15s ease-in both;animation-delay:var(--delay,0ms)}.ripple{animation:ripple 1.2s ease-out both;transform-origin:400px 525px;animation-delay:.4s}@keyframes place{0%{opacity:0;transform:translateY(-95px) rotate(-5deg)}25%{opacity:1}65%{transform:translateY(0) rotate(1.5deg)}82%{transform:rotate(-.7deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}@keyframes drip{0%,10%{opacity:0;transform:translateY(-65px)}20%{opacity:.8}75%{opacity:.7}100%{opacity:0;transform:translateY(28px)}}@keyframes ripple{0%{opacity:0;transform:scale(.2)}25%{opacity:.5}100%{opacity:0;transform:scale(1.4)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}.droplet,.ripple{display:none}}
@media(max-width:760px){header{padding:19px 5%}.logo{font-size:23px}header>.eyebrow{font-size:8px}main{display:flex;flex-direction:column;gap:22px;padding:18px 5% 30px}.art{order:-1;top:0;z-index:5;width:100%;padding:8px 12px;border-radius:18px;box-shadow:0 7px 18px #56614d0a}.preview-label{justify-content:space-between;margin:0 5px;gap:10px}.preview-label .eyebrow{font-size:8px}#scene svg{height:220px;width:100%}.preview-bottom{padding:0 5px}#flower-label{font-size:10px}.editor{width:100%}h1{font-size:29px;line-height:1.5;margin:12px 0}.intro p{font-size:12px}.intro>.eyebrow{font-size:8px}.step{margin-top:22px;padding-top:20px}.person{grid-template-columns:minmax(80px,1fr) 76px 76px 24px}input,select{font-size:16px;padding:11px 9px}.keyboard .art #scene svg{height:130px}.keyboard .preview-label{display:none}.keyboard .art{padding-top:4px}.keyboard .preview-bottom{min-height:27px}.vase-option svg{height:56px}.vase-option{font-size:9px}.note{font-size:10px}}@media(max-height:650px) and (max-width:760px){#scene svg{height:155px}.preview-label{display:none}} 

/* Birthday entry and finishing controls. */
.person{grid-template-columns:minmax(90px,1fr) 140px 28px}.birthday{font-variant-numeric:tabular-nums;letter-spacing:.08em}.birthday-help{margin:0 0 13px}.birthday-help strong{font-weight:500;color:#50664c}.date-error{min-height:18px;grid-column:1/-1;font-size:11px;color:#a35948;line-height:1.6}.date-error:empty{visibility:hidden}input[aria-invalid=true]{border-color:#b77260;background:#fff9f4}.add-person{width:100%;display:block;min-height:48px;border:1px solid #9cac94;border-radius:8px;padding:13px 16px;background:#e9eee3;color:#4d6548;font-size:13px;font-weight:500;letter-spacing:.04em;margin:14px 0 10px;transition:background .2s}.add-person:hover{background:#dfe8d6}.line-colors{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:11px}.line-colors>span{font-size:11px;margin-right:4px;color:#737d76}.line-color{display:flex;align-items:center;gap:6px;min-height:40px;border:1px solid #d9ded5;border-radius:25px;background:#fdfcf8;padding:8px 11px;font-size:11px}.line-color[aria-pressed=true]{border-color:#869783;background:#e9eee3}.line-color i{width:14px;height:14px;background:var(--swatch);border-radius:50%;display:block}.color-check{width:10px;font-size:10px}.gift-note{font-size:11px;line-height:1.9;margin:16px 0 0;color:#697b61}@media(max-width:760px){.person{grid-template-columns:minmax(80px,1fr) 128px 24px}.line-color{min-height:44px}.gift-note{font-size:11px}}@media(max-width:360px){.person{grid-template-columns:minmax(70px,1fr) 112px 24px}}

/* An empty garden starts with the birthday, then reveals the flowers. */
.art[hidden]{display:none}body:not(.has-flowers) main{display:block;max-width:650px}.art{background:var(--art-bg,#f2dfe2);color:var(--art-ink,#6d4f58)}.art .eyebrow,.art .text-button,#flower-label{color:var(--art-muted,#795f69)}.art:not([hidden]){animation:reveal-garden .35s ease-out}.mood-hint{margin-bottom:12px}.styles{gap:8px}.style[data-style=soft]{background:#eedce0;color:#6d4f58}.style[data-style=bright]{background:#f5d184;color:#684725}.style[data-style=calm]{background:#344e50;color:#f0ede3}.style.active{outline:2px solid #5b6c54;outline-offset:3px;font-weight:600}.style.active::after{content:' ✓';font-size:10px}@keyframes reveal-garden{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.line-colors>span{flex-basis:100%;margin-bottom:2px}

/* Supporting pages and the site-wide information links. */
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;margin-bottom:14px}.footer-nav a,.info-page a,.info-back{color:#526a50;text-underline-offset:4px}.footer-nav a{font-size:11px}.footer-nav a[aria-current=page]{font-weight:600}.footer-nav a:focus-visible,.info-page a:focus-visible,.info-back:focus-visible{outline:3px solid #9bb3d5;outline-offset:4px}footer p{font-size:10px;margin:0;color:#737d76}body:not(.has-flowers) main.info-page{display:block;max-width:780px;padding:45px 5% 65px}.info-page h1{font-size:30px;line-height:1.6;margin:25px 0}.info-page h2{font-size:17px;line-height:1.6;margin:30px 0 12px;padding-top:22px;border-top:1px solid #e0e2d9}.info-page p,.info-page li{font-size:14px;line-height:2;color:#53615a}.info-page ul,.info-page ol{padding-left:24px}.info-page li{margin:8px 0}.info-page .info-lead{font-size:17px;color:#485b45}.info-page .info-date,.info-back{font-size:12px}.contact-link{display:inline-block;padding:14px 20px;background:#e9eee3;border:1px solid #9cac94;border-radius:8px}header .info-back{font-size:11px}@media(max-width:760px){.info-page h1{font-size:25px}.footer-nav{gap:14px 18px}.info-page p,.info-page li{font-size:14px}}
