@charset "UTF-8";
:root{color-scheme:light;--paper:#f5f1e8;--ink:#344b3d;--muted:#8c8d7b;--rose:#a16e61;--serif:Georgia,"Songti SC","Noto Serif CJK SC","SimSun",serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%238c795c' opacity='.035' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--rose);outline-offset:6px}button[hidden],[hidden]{display:none!important}.masthead{height:90px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #40533e20}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;letter-spacing:3px;font-family:var(--serif);font-size:19px}.brand-flower{font-size:32px}.brand-en{font:9px Arial;letter-spacing:2px;border-left:1px solid #40533e30;padding-left:16px;margin-left:4px}.edition{font-size:11px;letter-spacing:3px;color:#777d6d}main{max-width:1100px;margin:auto}.intro{text-align:center;padding:43px 20px 0}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--rose);margin:0 0 18px}h1{font:normal 42px/1.4 var(--serif);letter-spacing:5px;margin:0}h1 em{font-style:normal;color:#9a6a60}.subtitle{font-size:12px;color:#7f8576;letter-spacing:2px;margin:17px 0 0}.scene{position:relative;width:100%;height:560px;isolation:isolate}.halo{position:absolute;width:420px;height:420px;left:50%;top:30px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#e4e6d9aa,transparent 72%)}.orbit{position:absolute;width:410px;height:410px;border:1px solid #7b8f6820;border-radius:50%;left:50%;top:35px;transform:translateX(-50%)}.orbit:before,.orbit:after{content:'✧';position:absolute;color:#a08e63;background:var(--paper);font-size:25px}.orbit:before{top:55px;left:44px}.orbit:after{bottom:46px;right:48px}.date-mark{position:absolute;left:14%;top:130px;font:25px var(--serif);color:#8b937f}.date-mark span{font-size:15px;padding:0 5px;color:#b4b5a3}.date-mark small{display:block;font:8px Arial;letter-spacing:2px;margin-top:12px}.side-note{position:absolute;right:9%;top:182px;writing-mode:vertical-rl;font-size:8px;letter-spacing:3px;color:#929581}.botanical{position:absolute;inset:0;z-index:3;pointer-events:none}.flower{position:absolute;left:50%;top:215px;width:var(--size);height:var(--size);margin-left:calc(var(--size) / -2);margin-top:calc(var(--size) / -2);transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform 1.65s cubic-bezier(.22,.72,.2,1),opacity 1s;transition-delay:var(--delay);filter:drop-shadow(0 3px 3px #593c3618)}.flower svg{height:100%;width:100%;overflow:visible}.leaf{z-index:-1}.wrapping{position:absolute;width:220px;height:260px;top:245px;left:50%;transform:translateX(-50%);z-index:2;transition:transform .9s,opacity .65s}.wrapping svg{width:100%;height:100%}.bouquet-trigger{position:absolute;inset:35px max(0px,calc(50% - 220px)) 5px;background:none;border:0;z-index:5;width:min(440px,100%);color:var(--ink)}.tap-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:18px;font-size:11px;letter-spacing:2px}.tap-label b{display:grid;place-items:center;width:30px;height:30px;border:1px solid #7f8c7140;border-radius:50%;font-size:16px;font-weight:400}.bouquet-trigger:hover .tap-label b{background:#e8e6d9}.greeting{position:relative;top:30px;margin:0 auto;width:350px;min-height:450px;background:#fffcf4;padding:27px 30px 22px;box-shadow:0 16px 45px #5b634015,0 2px 6px #5b634012;border:1px solid #c4b89760;z-index:4;opacity:0;transform:translateY(45px) scale(.72) rotate(-4deg);transition:opacity .8s .35s,transform 1.3s .25s;outline:none}.greeting:before{content:'';position:absolute;inset:7px;border:1px solid #aa96752b;pointer-events:none}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.6px;color:#9d8b6a}.card-top span:last-child{font-size:23px}.recipient{font:15px var(--serif);margin:25px 0 18px;overflow-wrap:anywhere}.greeting h2{font:normal 28px/1.7 var(--serif);letter-spacing:2px;margin:0}.card-rule{height:1px;background:#c7bfa44f;width:35px;margin:18px 0}.message{font:14px/2 var(--serif);color:#6d7466;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.wish{font:18px var(--serif);letter-spacing:4px;color:#a37060;margin:22px 0}.signature{text-align:right;font:11px/1.8 var(--serif);color:#8b8c79}.signature strong{display:block;font-weight:400;font-size:14px;color:var(--ink);overflow-wrap:anywhere}.card-bottom{border-top:1px solid #c7bfa44f;margin-top:21px;padding-top:14px;font-size:7px}.scene.open .flower{transform:translate(var(--ox),var(--oy)) rotate(var(--or)) scale(var(--os,.7))}.scene.open .wrapping{opacity:0;transform:translateX(-50%) translateY(60px) scale(.85)}.scene.open .greeting{opacity:1;transform:none}.scene.open .orbit,.scene.open .date-mark{opacity:.3}.scene.revealed{height:auto;min-height:560px;padding-bottom:62px}.actions{text-align:center;padding:0 20px 32px}.actions>p{font:12px var(--serif);letter-spacing:2px;color:#8b8f7d;line-height:1.8}footer{margin:0 5%;padding:23px 0;border-top:1px solid #40533e20;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#929582}footer span:last-child{font-size:8px;letter-spacing:1.5px}
@media(min-width:800px){.bouquet-trigger:hover~.side-note{color:var(--rose)}}
@media(max-width:600px){.masthead{height:70px;margin:0 22px}.brand{font-size:16px;gap:8px}.brand-flower{font-size:25px}.brand-en{display:none}.edition{font-size:9px;letter-spacing:1px}.intro{padding-top:35px}.eyebrow{font-size:8px;letter-spacing:2px}h1{font-size:30px;letter-spacing:3px}.subtitle{font-size:11px;letter-spacing:1px;margin-top:12px}.scene{height:515px;overflow:clip}.halo{width:340px;height:340px;top:40px}.orbit{width:310px;height:310px;top:60px}.date-mark{left:22px;top:355px;font-size:19px}.date-mark small{font-size:6px;letter-spacing:1px}.side-note{right:18px;top:175px;font-size:7px;letter-spacing:2px}.flower{--mobile:1;top:200px;transform:translate(calc(var(--x) * .82),calc(var(--y) * .82)) rotate(var(--r)) scale(.88)}.wrapping{width:195px;height:240px;top:225px}.scene.open .flower{transform:translate(calc(var(--ox) * .73),var(--oy)) rotate(var(--or)) scale(.48)}.greeting{width:calc(100% - 70px);max-width:350px;top:38px;padding:24px;min-height:430px}.greeting h2{font-size:25px}.scene.revealed{min-height:545px;padding-bottom:68px}.bouquet-trigger{bottom:5px}.tap-label{font-size:10px}.actions{padding-bottom:27px}.actions>p{font-size:11px;letter-spacing:1px}footer{margin:0 22px;font-size:9px;padding:20px 0}footer span:last-child{display:none}}
@media(max-width:600px){.scene.open .flower{transform:translate(calc(var(--ox) * .73),calc(var(--oy) * .85 + 35px)) rotate(var(--or)) scale(.48)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}}

.scene.revealed .bouquet-trigger{inset:0;width:100%;height:100%}
.scene.revealed .tap-label{bottom:9px}

/* Live Three.js bouquet, with an HTML card kept crisp above the canvas. */
.botanical{z-index:3;overflow:hidden}.botanical canvas{display:block;width:100%;height:100%}.render-status{position:absolute;top:42%;width:100%;text-align:center;font-size:12px;color:#986a84;z-index:4;pointer-events:none}.scene .halo{background:radial-gradient(ellipse,#ead7e877,transparent 72%)}.scene .orbit{opacity:.5}.scene.revealed .tap-label{bottom:0}.scene.revealed{padding-bottom:85px}.scene.open .greeting{box-shadow:0 18px 45px #5b634021,0 2px 6px #5b634012}@media(max-width:600px){.scene.revealed{padding-bottom:85px}.scene .side-note{opacity:.55}}

.bouquet-trigger{touch-action:pan-y}
.bouquet-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:2}.three-ready .bouquet-preview,.scene.open .bouquet-preview{visibility:hidden}.render-status{top:auto;bottom:45px;font-size:10px}

/* ---- Date invitation layer ---- */
.scene.open .greeting{z-index:6}
.greeting.invite{width:392px;height:640px;min-height:0;top:24px;padding:22px 26px 16px;display:flex;flex-direction:column}
.greeting.invite .recipient{margin:16px 0 10px;font-size:14px}
.greeting.invite h2{font-size:24px;line-height:1.5;letter-spacing:1px}
.greeting.invite .card-rule{margin:11px 0}
.greeting.invite .card-bottom{margin-top:12px;padding-top:10px}
.invite-view{flex:1;display:flex;flex-direction:column;min-height:0}
.card-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;-webkit-overflow-scrolling:touch}
.card-scroll::-webkit-scrollbar{width:3px}
.card-scroll::-webkit-scrollbar-thumb{background:#c7bfa47a;border-radius:3px}
.ask{border:0;margin:0 0 13px;padding:0}
.ask legend{display:flex;align-items:center;gap:7px;font:12px var(--serif);letter-spacing:1px;color:#7d8474;padding:0;margin-bottom:8px}
.ask-dot{width:6px;height:6px;border-radius:50%;background:#d3b9c6;box-shadow:0 0 0 3px #d3b9c622}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{position:relative;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #c7bfa470;border-radius:3px;background:#fffdf7;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip-body{display:flex;flex-direction:column;line-height:1.35}
.chip-text{font:12.5px var(--serif);color:#4d5a4c;white-space:nowrap}
.chip-note{font:9.5px Arial;letter-spacing:.4px;color:#a2a291;margin-top:1px}
.chip:has(input:checked){border-color:#c2729e;background:#fdf3f8;box-shadow:0 2px 10px #c2729e1a}
.chip:has(input:checked) .chip-text{color:#8e4a74}
.chip:focus-within{outline:2px solid var(--rose);outline-offset:2px}
.chip-flower{position:relative;flex:0 0 15px;width:15px;height:15px}
.chip-flower i{position:absolute;left:50%;top:50%;width:5px;height:8px;margin:-8px 0 0 -2.5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#cbb6c1;transform-origin:50% 100%;transform:rotate(var(--a)) translateY(-2px) scaleY(.42);transition:transform .45s cubic-bezier(.3,1.35,.5,1),background .3s}
.chip:has(input:checked) .chip-flower i{background:#c56b9b;transform:rotate(var(--a)) translateY(-5px) scaleY(1)}
.chip-custom{width:100%;margin-top:7px;border:0;border-bottom:1px dashed #c7bfa4a0;background:transparent;padding:5px 2px;font:12px var(--serif);color:#4d5a4c;outline:none}
.chip-custom:focus{border-bottom-color:#c2729e}
.chip-custom::placeholder{color:#b3b3a4}
.invite-bar{display:flex;align-items:center;gap:10px;border-top:1px solid #c7bfa44f;margin-top:8px;padding-top:12px}
.invite-hint{flex:1;margin:0;font:10.5px var(--serif);color:#a09f8d;letter-spacing:.5px}
.confirm{border:1px solid #c2729e;background:#c2729e;color:#fff;border-radius:3px;padding:9px 16px;font-size:12px;letter-spacing:1px;transition:opacity .25s,background .25s}
.confirm:disabled{opacity:.35;cursor:not-allowed}
.confirm:not(:disabled):hover{background:#a95c86}
.receipt-view{flex:1;display:flex;flex-direction:column;justify-content:center;outline:none}
.receipt-line{font:13.5px/2 var(--serif);color:#6d7466;white-space:pre-wrap;margin:0}
.receipt-sign{text-align:right;font:11px var(--serif);color:#9c9a87;margin:14px 0 0}
.receipt-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.receipt-actions button{border:1px solid #c7bfa470;background:#fffdf7;color:#5c6a5b;border-radius:3px;padding:8px 12px;font-size:11px;letter-spacing:.5px;transition:border-color .2s,background .2s}
.receipt-actions button:hover{border-color:#c2729e;background:#fdf3f8}
/* Mobile: the list slides up as a bottom sheet, flowers gather above it. */
@media(max-width:600px){
  .scene{overflow:visible}
  .greeting.invite{position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;height:auto;max-height:86vh;margin:0;border-radius:16px 16px 0 0;border-bottom:0;padding:16px 20px 14px;transform:translateY(104%)}
  .greeting.invite .recipient{margin:12px 0 8px}
  .greeting.invite h2{font-size:20px}
  .greeting.invite .card-rule{margin:9px 0}
  .chip{padding:7px 10px;gap:6px}
  .chip-text{font-size:12px;white-space:normal}
  .receipt-actions button{flex:1 1 auto;text-align:center}
  .scene.open .greeting.invite{transform:none}
}