:root {
  color-scheme:light;
  --paper:#f2eadf; --sheet:#f8efe2; --ink:#30241f; --muted:#715d52;
  --rule:#d9c9b9; --accent:#8b303a; --button:#732531;
  --hand:"Flower Letter Hand","Kaiti SC","STKaiti","KaiTi","Songti SC",serif;
  --sans:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.32' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 85% 11%,#f9f0e5 0,transparent 55%),var(--paper);color:var(--ink);font-family:var(--sans)}
body::before,.art-paper::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);mix-blend-mode:multiply;opacity:.27}
body::before{position:fixed}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.shell{position:relative;width:min(1080px,calc(100% - 88px));margin-inline:auto}
.masthead{min-height:72px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between}
.brand{text-decoration:none;font:22px var(--hand);letter-spacing:.05em}
.plain{border:0;background:none;color:var(--accent);font-size:13px;padding:5px 0}
.plain:hover,.letter-text a:hover{color:var(--ink)}
.header-link span{margin-left:5px}
.flower-cover{display:flex;min-height:calc(100svh - 73px);flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 0 38px}
.cover-art{position:relative;width:min(100%,460px,58svh);aspect-ratio:1120/1020;background:radial-gradient(ellipse at 48% 44%,#fff5e7b3,transparent 68%)}
.cover-art canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.flower-cover h1{font-size:clamp(26px,4.5vw,48px);margin:0 0 23px;letter-spacing:0}
.cover-action{min-height:44px}
.cover-action .primary{min-width:152px}
.desk{display:grid;grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);gap:clamp(38px,7vw,98px);align-items:start;padding:52px 0 48px}
.editor{padding:8px 0 0}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent);font:12px/1.5 var(--sans);letter-spacing:.19em;margin:0}
.eyebrow>i{display:block;width:23px;height:1px;background:#b97872}
h1{font-family:var(--hand);font-weight:400;font-size:clamp(38px,5.1vw,67px);letter-spacing:-.04em;line-height:1.06;margin:16px 0 14px}
.intro{font:18px/1.6 var(--hand);color:var(--muted);margin:0 0 28px}
form{display:grid;gap:13px}
.names,.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.options{grid-template-columns:repeat(3,minmax(0,1fr))}
label{display:grid;gap:5px;min-width:0}
label>span{font-size:12px;color:var(--muted);font-weight:550}
label small{font-size:10px;font-weight:400;margin-left:3px}
input,select{width:100%;min-width:0;height:42px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:#fffaf53f;color:var(--ink);padding:0 8px;font-size:16px}
input::placeholder{color:#8b7365;font-size:13px}
select{padding-right:22px}
.primary{color:#fff8ed;background:var(--button);border:1px solid var(--button);padding:10px 14px;min-height:44px;border-radius:2px;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.primary:hover{background:#5d1b26}
.primary span{font-size:17px;font-weight:400}
form .primary{margin-top:8px}
.quote-choice{min-width:0}
.quote-choice-actions{display:flex;flex-wrap:wrap;gap:8px 16px}
.quote-choice p{margin:3px 0 0;color:var(--muted);font:14px/1.5 var(--hand);overflow-wrap:anywhere}
.primary:disabled,.secondary:disabled{opacity:.55;cursor:wait}
.status{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.status:empty{display:none}
.art-paper{position:relative;isolation:isolate;overflow:hidden;min-width:0;margin:0;padding:20px 23px 16px;background:radial-gradient(ellipse at 50% 36%,#fff8e9,#f4e8d6 79%);border:1px solid #e1d0bc;box-shadow:0 24px 40px -34px #82534a8f}
.art-paper::before{z-index:-1;opacity:.46}
.art-index,.art-footer{display:flex;justify-content:space-between;align-items:center;gap:8px}
.art-index{font:11px/1.4 var(--sans);letter-spacing:.15em;color:var(--muted);border-bottom:1px solid #deccba;padding-bottom:11px}
.art-index time{font-family:Georgia,serif;font-variant-numeric:tabular-nums}
.art-footer{padding-top:12px;border-top:1px solid #deccba}
.art-footer>div{display:grid;gap:3px}
#pictureTitle{font:20px var(--hand);overflow-wrap:anywhere}
#flowerArt{display:block;width:100%;height:auto;aspect-ratio:1120/1020}
footer{border-top:1px solid var(--rule);padding:16px 0 26px;font:14px var(--hand);color:var(--muted)}
#result h1{font-size:clamp(38px,4.5vw,60px);margin-bottom:25px}
.letter-text{font:21px/1.72 var(--hand);overflow-wrap:anywhere}
.letter-text p{margin:0 0 9px}
.letter-text blockquote{margin:18px 0;padding:0 0 0 12px;border-left:1px solid #bc7c77;color:var(--accent)}
.letter-text blockquote p{margin:0}
cite{font:11px/1.5 var(--sans);font-style:normal;color:var(--muted)}
cite a{text-decoration-color:#b68b81;text-underline-offset:3px}
.signature{text-align:right;white-space:pre-line;color:var(--muted);font-size:18px}
.letter-text .flower-note{display:flex;gap:9px;align-items:baseline;margin:18px 0 0;padding-top:10px;border-top:1px solid var(--rule);color:var(--muted);font:14px/1.65 var(--hand)}
.flower-note span{color:var(--accent);flex:none}
.flower-note small{font-size:inherit}
.result-actions,.poster-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.result-actions .primary,.poster-actions .primary{flex:1}
.secondary{border:1px solid #ba9a89;background:transparent;color:var(--accent);border-radius:2px;font-size:13px;padding:10px 12px}
.secondary:hover{background:#eedbd2}
.again{display:flex;gap:20px;margin-top:10px}
dialog{width:min(535px,calc(100% - 24px));max-height:91dvh;overflow:auto;border:1px solid var(--rule);background:#fbf3e7;color:var(--ink);padding:22px clamp(15px,4vw,26px);box-shadow:0 20px 60px #3d211b45;border-radius:3px}
dialog::backdrop{background:#35201db5}
.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:13px}
.dialog-top h2{font:32px var(--hand);margin:0}
.close{border:1px solid var(--rule);border-radius:50%;background:none;color:var(--accent);font-size:23px;width:34px;height:34px;line-height:1}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--rule);background:transparent;color:var(--accent);border-radius:20px;padding:6px 10px;font-size:12px}
.filters button[aria-pressed=true]{background:#ebd4c8;border-color:#b68477}
.library-search{margin-top:13px}
.quote-list{margin-top:9px}
.quote-entry{border-top:1px solid var(--rule);padding:12px 0;overflow-wrap:anywhere}
.quote-pick{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;margin:0 0 4px;border:0;background:none;text-align:left;color:inherit}
.quote-pick:hover,.quote-pick[aria-pressed="true"]{color:var(--accent)}
.quote-pick-text{font:19px/1.55 var(--hand)}
.quote-pick-action{flex:none;color:var(--accent);font:12px/1.5 var(--sans)}
.quote-entry p{margin:0 0 5px}
.quote-entry .original{font:13px/1.5 Georgia,serif;color:var(--muted)}
#moreQuotes{display:block;width:100%}
.library-credit{margin-top:13px;color:var(--muted);font-size:12px;line-height:1.55}
.library-credit summary{cursor:pointer}
.library-credit pre{font:10px/1.4 ui-monospace,monospace;white-space:pre-wrap}
.envelope{border:1px solid var(--rule);background:#f9eddd;overflow:hidden}
.envelope>summary{list-style:none;text-align:center;cursor:pointer}
.envelope>summary::-webkit-details-marker{display:none}
.envelope-closed{display:grid;justify-items:center;gap:16px;margin:12px;padding:36px 15px;border:1px solid #d8bfab;font:33px/1.2 var(--hand);overflow-wrap:anywhere}
.open-gift,.envelope-open{font:13px var(--sans);color:var(--accent)}
.envelope-open{display:none;padding:12px;border-bottom:1px solid var(--rule)}
.envelope[open] .envelope-closed{display:none}
.envelope[open] .envelope-open{display:block}
.gift-paper{padding:0 16px 15px}
.gift-paper figure{margin:0}
.gift-paper img{display:block;width:100%;height:auto}
.gift-paper .letter-text{padding:0 6px}
#saveGift{display:none;width:100%;margin-top:12px}
.envelope[open]+#saveGift{display:flex}
#posterPreview{display:block;width:min(100%,360px);height:auto;margin:0 auto;border:1px solid var(--rule)}
.poster-actions{margin-top:13px}
@media(max-width:850px){
  .shell{width:calc(100% - 48px)}
  .desk{gap:30px;padding-top:35px}
  .art-paper{padding:14px}
}
@media(max-width:720px){
  .shell{width:min(510px,calc(100% - 34px))}
  .masthead{min-height:58px}
  .flower-cover{min-height:calc(100svh - 58px)}
  .desk{grid-template-columns:1fr;gap:24px;padding:23px 0 29px}
  .editor{padding-top:0}
  h1{margin:12px 0 9px}
  .intro{margin-bottom:17px}
  form{gap:10px}
}
@media(prefers-reduced-motion:no-preference){
  .season-frame.bloom canvas,.envelope[open] .gift-paper{animation:bloom .6s ease-out both}
  @keyframes bloom{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
}
#letterOpening,#giftOpening{white-space:pre-line}