@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&family=Noto+Sans+Thai:wght@400;500&family=Noto+Serif+Thai:wght@400;500&display=swap";:root{font-family:Noto Sans Thai,Microsoft YaHei,sans-serif;color:#e8edff;background:#101d3a;font-synthesis:none;--gold:#dfc18b;--muted:#a9b6ca;--flower:#e8a4c1}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid #ffe1a6;outline-offset:5px}button{transition:background .25s,border-color .25s,transform .25s}button:hover{filter:brightness(1.15)}button:active{transform:translateY(1px)}.sky{position:fixed;inset:0;background:radial-gradient(ellipse at 72% 24%,#3b4b65 0,transparent 35%),linear-gradient(#10192f,#24344f 43%,#162940 66%,#101f34)}.stars{position:fixed;inset:0;background-image:radial-gradient(1px 1px at 10% 22%,#c5cce0 50%,transparent),radial-gradient(1px 1px at 35% 11%,#b6b8cf 50%,transparent),radial-gradient(1px 1px at 88% 30%,#d3c7a6 50%,transparent),radial-gradient(1px 1px at 48% 28%,#cbd9ee 50%,transparent),radial-gradient(1px 1px at 57% 9%,#b2c6d9 50%,transparent),radial-gradient(1px 1px at 93% 16%,#b2c6d9 50%,transparent);opacity:.7}.moon{position:absolute;width:104px;height:104px;left:70%;top:18%;border-radius:50%;background:#f4e7c6;box-shadow:0 0 35px 7px #ffe5aa18,0 0 100px 40px #d9d4bd13,inset -13px -6px 24px #bba67e44}.moon:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 30% 40%,#c9b99122 0 8%,transparent 10%),radial-gradient(ellipse at 60% 65%,#9b968522 0 13%,transparent 16%)}.cloud{position:fixed;width:500px;height:50px;background:radial-gradient(ellipse,#67738928,transparent 70%);filter:blur(15px);pointer-events:none}.cloud-one{left:54%;top:29%}.cloud-two{left:66%;top:17%;opacity:.45}.shore{position:fixed;top:30%;width:100%;height:24%;opacity:.9}.shore svg{width:100%;height:100%}#scene{position:fixed;inset:0;pointer-events:none}#scene canvas{width:100%;height:100%}.fallback-lotus{display:none;position:absolute;left:calc(50% - 110px);top:36%;width:220px;height:180px;font-size:0;filter:drop-shadow(0 0 30px #ffc87a55)}.fallback-lotus svg{width:100%;height:100%}#scene.fallback canvas{display:none!important}#scene.fallback .fallback-lotus{display:block}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#0c172944,transparent 45%),linear-gradient(0deg,#0e1a2e,transparent 25%);box-shadow:inset 0 0 150px #09132855}header{position:fixed;z-index:5;top:0;left:0;right:0;padding:34px 4.2%;display:flex;justify-content:space-between;align-items:center}.brand{color:#e7dfcc;text-decoration:none;display:flex;align-items:center;gap:11px}.brand svg{width:37px;height:37px;stroke:var(--gold);stroke-width:1}.brand strong{font-family:"Noto Serif SC","Noto Serif Thai",serif;font-size:17px;font-weight:500;letter-spacing:3px}.brand small{display:block;font-size:8px;letter-spacing:2.4px;color:#a8b5c5;margin-top:5px}nav{display:flex;align-items:center;gap:16px}.tool{border:0;background:transparent;font-size:12px;min-height:44px;padding:5px 8px}.tool span{color:#8695aa;font-size:10px;margin-left:5px}.tool.icon{border:1px solid #d8dec129;border-radius:50%;width:36px;height:36px;min-height:36px;padding:0;font-family:serif;font-size:17px;color:#d8cfb9}.date{position:fixed;top:42%;right:4.5%;writing-mode:vertical-rl;display:flex;align-items:center;gap:15px;color:#c5c7cc;font-size:10px;letter-spacing:3px}.date>span{color:#d5be91;font-size:18px;writing-mode:horizontal-tb}.date small{color:#8c9bad;font-size:9px;letter-spacing:2px}main{position:absolute;z-index:2;width:450px;left:9.5%;top:25%;max-height:calc(100svh - 210px);animation:arrive .8s both}.eyebrow{font-size:9px;letter-spacing:3.4px;color:var(--gold);font-weight:500;display:block;margin-bottom:26px}h1{font-family:"Noto Serif SC","Noto Serif Thai",serif;font-weight:400;font-size:40px;line-height:1.65;letter-spacing:3px;margin:0 0 22px;white-space:normal}.cover-title{font-size:54px;line-height:1.6;letter-spacing:5px}.description{color:#b7c4d5;font-size:13px;line-height:2.2;letter-spacing:1px;margin:0}.actions{margin-top:38px;display:flex;align-items:flex-start;flex-direction:column;gap:16px}.primary{width:260px;min-height:55px;border-radius:4px;border:1px solid #e3c38b99;background:linear-gradient(105deg,#dcca9f,#e9d7ad);color:#283344;font-size:13px;letter-spacing:2px;display:flex;align-items:center;justify-content:space-between;padding:16px 23px;box-shadow:0 5px 25px #080e1c30}.primary>span{font-size:22px;line-height:1;font-family:serif}.soft-note{color:#8e9fb5;font-size:10px;letter-spacing:1px}.soft-note.gold{color:var(--gold)}.secondary{width:260px;border:1px solid #a4b2c43b;background:#23334a66;border-radius:4px;min-height:47px;font-size:12px;letter-spacing:2px}.text-button{border:0;background:transparent;font-size:11px;color:#aebacf;min-height:35px;padding:3px 0;letter-spacing:1px}.back{position:absolute;bottom:-62px;border:0;background:transparent;color:#90a0b7;font-size:10px;min-height:44px;padding:0}.scene-caption{position:fixed;bottom:19%;left:64%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:15px;white-space:nowrap;letter-spacing:3px;font-size:9px;color:#adbdcd;pointer-events:none}.tiny-star{color:var(--gold);font-size:20px}.scene-caption .line{display:block;width:1px;height:30px;background:linear-gradient(#d5b68077,transparent)}footer{position:fixed;bottom:0;left:0;right:0;padding:27px 4.2%;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:9px;color:#8495ae;letter-spacing:.6px}#demo{max-width:240px}.edition{font-size:8px;letter-spacing:2px}.edition i{font-style:normal;font-size:18px;color:var(--gold);margin-left:15px}.steps{position:absolute;left:50%;transform:translate(-50%);display:flex;gap:27px}.steps>span{display:flex;gap:8px;align-items:center;opacity:.5}.steps b{font-size:8px;display:grid;place-items:center;width:20px;height:20px;border:1px solid #8e9ab344;border-radius:50%;font-weight:400}.steps em{font-style:normal;font-size:9px}.steps .active{opacity:1;color:#e7d4af}.steps .active b{border-color:#c5ad7e}.steps .done{opacity:.8}.swatches{display:flex;gap:12px;margin-top:25px}.swatch{position:relative;width:105px;height:94px;border:1px solid #a1b3cb22;background:#14253c66;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:5px;font-size:10px;color:#b8c3d5}.swatch.selected{border-color:#dfc18b99;background:#64708022;color:#ecdfc3}.flower-icon{color:var(--swatch);font-size:34px;line-height:1.2;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--swatch) 30%,transparent))}.swatch i{position:absolute;right:7px;top:5px;color:var(--gold);font-style:normal;font-size:10px}.wish-box{position:relative;margin-top:25px;width:355px;border:1px solid #a7b7d03b;background:#13243b88;border-radius:6px;padding:15px 15px 30px}.wish-box textarea{resize:none;width:100%;border:0;background:transparent;color:#e8edff;font:12px/2 inherit;line-height:2;min-height:80px;outline:none}.wish-box textarea::placeholder{color:#8e9fb7;font-size:12px}.wish-box>span{position:absolute;right:15px;bottom:10px;font-size:9px;color:#93a4ba}.wish-box .over{color:#ffb2b2}.privacy{color:#9cacc2;font-size:10px;line-height:1.8;width:355px;margin-top:12px}.status-list{margin-top:24px;width:330px;border-top:1px solid #91a4bf22}.status-list>div{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid #91a4bf22}.status-list>div>div{flex:1}.status-list strong{display:block;font-size:11px;font-weight:400}.status-list small{font-size:9px;display:block;color:#98a9c0;margin-top:4px}.status-list>div>span:last-child{color:#bbaa86}.status-dot{width:6px;height:6px;border-radius:50%;background:#6d7a8c}.status-dot.lit{background:#e6c48b;box-shadow:0 0 10px #e6c48b55}.stage-4 .actions{margin-top:22px;gap:9px}.waiting{font-size:10px;color:#d5bd8f;max-width:330px;line-height:1.8}.bless-end{font-family:"Noto Serif SC","Noto Serif Thai",serif;font-size:12px;line-height:2;color:#dfcbaa;max-width:330px;margin-top:20px}.stage-5 .description{font-family:"Noto Serif SC","Noto Serif Thai",serif;font-size:17px;line-height:2.5}.stage-5{animation:arrive 1.4s both}.card-mini{position:relative;width:310px;padding:22px 25px;border:1px solid #c4aa7b55;border-radius:2px;background:linear-gradient(140deg,#34445c77,#172b4599);margin-top:24px;text-align:center}.card-mini>span{display:block;color:#eddbb2;font-size:25px}.card-mini strong{display:block;font-family:"Noto Serif SC","Noto Serif Thai",serif;letter-spacing:3px;font-size:17px;font-weight:400;margin-top:10px}.card-mini small{display:block;color:#adbbcd;font-size:7px;letter-spacing:1.5px;margin-top:10px}.card-mini p{font-size:10px;color:#c7d1de;margin:18px 0}.card-mini i{font-style:normal;color:#d8be8d}.stage-6 .actions{margin-top:22px}.stage-6 h1{font-size:32px}.stage-6 .eyebrow{margin-bottom:16px}.stage-6 .description{font-size:12px}.leaving{opacity:0;transition:opacity 1s;pointer-events:none}#countdown{position:fixed;inset:0;z-index:10;display:none;background:#0d1c3577;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);place-content:center;text-align:center}#countdown.show{display:grid}#countdown b{font-family:serif;font-size:100px;font-weight:400;color:#f3dbac}#countdown small{font-size:12px;letter-spacing:3px;color:#e2c999}#toast{position:fixed;z-index:30;bottom:90px;left:50%;transform:translate(-50%,20px);max-width:90vw;background:#24354cf2;border:1px solid #af987977;border-radius:6px;padding:15px 22px;font-size:12px;opacity:0;transition:.3s;pointer-events:none}#toast.visible{opacity:1;transform:translate(-50%)}dialog{border:1px solid #82785f88;background:#14243b;color:#e8edff;border-radius:10px;padding:32px;max-width:440px;width:calc(100% - 40px);max-height:90svh;overflow:auto;box-shadow:0 20px 100px #0007}dialog::backdrop{background:#091225b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}dialog h2{font-family:"Noto Serif SC","Noto Serif Thai",serif;font-size:22px;font-weight:400}dialog p{font-size:12px;line-height:2;color:#b6c3d5}.setting{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:16px 0;border-bottom:1px solid #788da033}.toggle{position:relative;display:block;width:44px;height:24px;flex:0 0 44px}.toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}.toggle i{position:absolute;inset:0;border-radius:99px;background:#ffffff18;border:1px solid #8095ad55;transition:.2s}.toggle i:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#c9d6e6;transition:.2s}.toggle input:checked+i{background:#dfc18b33;border-color:#dfc18b88}.toggle input:checked+i:after{transform:translate(20px);background:#ffe1a6}dialog .primary{margin-top:24px;width:100%}.saved-image{display:block;width:100%;height:auto;max-height:58svh;object-fit:contain}dialog:has(.saved-image) h2{font-size:13px;line-height:1.8}@keyframes arrive{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.reduced *{animation:none!important;transition:none!important}@media(min-width:1400px){main{top:28%}.cover-title{font-size:62px}.moon{width:125px;height:125px}.scene-caption{bottom:21%}}@media(max-height:780px)and (min-width:761px){main{top:21%}h1{font-size:32px;margin-bottom:14px}.cover-title{font-size:45px}.eyebrow{margin-bottom:15px}.actions{margin-top:25px}.swatch{height:80px}.stage-4 .actions{gap:5px}.back{bottom:-48px}.stage-6{top:18%}.card-mini{padding:12px 20px}.card-mini p{margin:10px 0}}@media(max-width:760px){header{padding:20px 22px}.brand{gap:7px}.brand svg{width:29px;height:29px}.brand strong{font-size:13px;letter-spacing:2px}.brand small{font-size:6px;letter-spacing:1.5px}nav{gap:5px}.tool{font-size:10px}.tool.icon{width:44px;height:44px;min-height:44px;font-size:16px}.tool span{font-size:8px}.date{writing-mode:horizontal-tb;top:99px;left:0;right:0;justify-content:center;font-size:8px;letter-spacing:2px;gap:9px}.date>span{font-size:11px}.date small{font-size:8px}.moon{width:65px;height:65px;left:calc(50% - 32px);top:29%}.shore{top:27%;height:20%}.shore svg{width:170%;margin-left:-70%}.vignette{background:linear-gradient(0deg,#101d3afc 0,transparent 38%),linear-gradient(180deg,#101a2a22,transparent 45%)}main{inset:auto 24px 115px;width:auto;text-align:center;max-height:none}.eyebrow{font-size:7px;letter-spacing:2.4px;margin-bottom:12px}h1{font-size:25px;line-height:1.65;letter-spacing:1.5px;margin-bottom:12px}.cover-title{font-size:35px;line-height:1.55;letter-spacing:3px}.description{font-size:11px;line-height:2;letter-spacing:.5px}.actions{align-items:center;margin-top:23px;gap:10px}.primary{width:min(300px,100%);min-height:51px;font-size:12px;padding:14px 20px}.secondary{width:min(300px,100%);min-height:44px}.soft-note{font-size:9px}.scene-caption{display:none}footer{padding:15px 20px 20px;flex-direction:column-reverse;gap:17px}#demo{font-size:7px;max-width:none;letter-spacing:.5px;color:#8292a8}.steps{position:static;transform:none;gap:18px}.steps em{font-size:8px}.steps>span{gap:5px}.steps b{width:18px;height:18px}.edition{display:none}.stage-0{bottom:112px}.stage-0 .eyebrow{margin-bottom:13px}.stage-0 .cover-title{margin-bottom:12px}.stage-0 .description{font-size:11px}.stage-1 h1{font-size:29px}.stage-2{bottom:104px}.stage-2 .description{font-size:10px}.swatches{justify-content:center;margin-top:16px;gap:10px}.swatch{width:87px;height:75px;font-size:9px}.flower-icon{font-size:29px}.stage-2 .actions{margin-top:18px}.back{bottom:-37px;left:0;font-size:9px;min-height:30px}.stage-3{bottom:102px}.stage-3 h1{font-size:23px}.wish-box{width:100%;max-width:330px;margin:16px auto 0;padding:10px 14px 24px}.wish-box textarea{min-height:65px;max-height:75px}.privacy{font-size:8px;max-width:330px;width:100%;margin:9px auto}.stage-3 .actions{margin-top:16px;gap:4px}.text-button{font-size:10px;min-height:28px}.status-list{width:min(300px,100%);margin:14px auto 0;text-align:left}.status-list>div{padding:8px 0}.status-list strong{font-size:10px}.status-list small{font-size:8px}.stage-4{bottom:102px}.stage-4 h1{font-size:24px;margin-bottom:8px}.stage-4 .description{font-size:10px}.stage-4 .actions{margin-top:14px;gap:6px}.stage-4 .primary{min-height:46px}.stage-4 .secondary{min-height:40px}.stage-4 .eyebrow{margin-bottom:8px}.waiting{margin:7px auto;font-size:8px}.stage-5{bottom:120px}.stage-5 h1{font-size:27px}.stage-5 .description{font-size:15px;line-height:2.1}.bless-end{margin:15px auto;font-size:11px}.stage-6{bottom:103px}.stage-6 h1{font-size:25px}.stage-6 .description{font-size:10px}.stage-6 .eyebrow{margin-bottom:8px}.card-mini{margin:15px auto 0;width:260px;padding:12px 18px}.card-mini>span{font-size:19px}.card-mini strong{font-size:15px;margin-top:4px}.card-mini small{margin-top:7px;font-size:6px}.card-mini p{margin:12px 0;font-size:9px}.card-mini i{font-size:10px}.stage-6 .actions{margin-top:14px;gap:5px}.fallback-lotus{left:calc(50% - 80px);top:38%;width:160px;height:130px;font-size:0}html[lang=th] h1{font-size:25px;line-height:1.65;letter-spacing:0}html[lang=th] .cover-title{font-size:30px}html[lang=th] .brand strong{font-size:12px;letter-spacing:0}}@media(max-width:760px)and (max-height:740px){.date{top:78px}.moon{top:23%;width:52px;height:52px;left:calc(50% - 26px)}main{bottom:96px}.cover-title{font-size:29px}.stage-0 .description{font-size:10px}.actions{margin-top:16px}.stage-2 h1,.stage-3 h1,.stage-4 h1{font-size:21px}.swatch{height:62px}.flower-icon{font-size:25px}.stage-4 .description{font-size:9px}.stage-6 .description{display:none}.card-mini{padding:8px 15px;margin-top:10px}.card-mini p{margin:8px 0}.stage-6 .actions{margin-top:10px}.stage-5 h1{font-size:23px}.stage-5 .description{font-size:13px}.bless-end{font-size:10px;margin:10px auto}.eyebrow{margin-bottom:8px}.stage-4,.stage-3,.stage-2,.stage-6{bottom:96px}.back{bottom:-29px}footer{padding-bottom:12px;gap:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.landmark-shore{top:auto;bottom:62%;height:clamp(100px,17vh,180px);aspect-ratio:auto;opacity:.62;pointer-events:none;z-index:0}.landmark-shore svg{width:100%;height:100%;margin:0;overflow:visible}.landmark-shore .distant-city{opacity:.45}.temple-face{fill:url(#temple-face)}.temple-edge{stroke:#baad8b;stroke-width:.65;fill:none;opacity:.46}.temple-inlay{stroke:#c4b28a;stroke-width:1.2;fill:none;opacity:.45}.temple-base{fill:#645c50;stroke:#a08b63;stroke-width:.5}.palace-wall{fill:#5b605e}.roof-body{fill:#504448}.roof-ridge{fill:#9f8b63;opacity:.8}.palace-window{fill:#c6aa71;opacity:.45}.gold-chedi{fill:#a68e5d;opacity:.7}.glass-wall,.tower-face{fill:url(#glass-face)}.tower-side{fill:#1b2e44}.mall-roof{fill:#9e8b61;opacity:.72}.mall-light{stroke:#c9b27c;stroke-width:.75;fill:none;opacity:.55}.pixel-cut{fill:#1b2d44}.pixel-edge{stroke:#8b9ca8;stroke-width:.65;fill:none;opacity:.55}.tower-top{stroke:#b6b9a8;stroke-width:.8;fill:none;opacity:.55}.riverbank{fill:#15283d}.bank-lights{opacity:.6}.landmark-list{padding:12px 0 4px;border-top:1px solid #788da033;margin-top:18px}.landmark-list p{margin:7px 0;font-size:11px}.landmark-list small{display:block;color:#8fa2ba;font-size:9px;line-height:1.8;margin-top:12px}@media(max-width:760px){.landmark-shore{bottom:64%;height:min(16vh,125px);aspect-ratio:auto;opacity:.58}.landmark-shore svg{width:100%;height:100%;margin:0}.landmark-shore .distant-city{opacity:.32}}#scene{z-index:1}#fireworks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.vignette{z-index:2}main,.date,.scene-caption,footer{z-index:3}@media(max-width:760px){.moon{top:17%}}@media(max-width:760px)and (max-height:740px){.moon{top:16%}}#sound.playing{color:#f2d39a;border-color:#d8bc8088;background:#c9ae7315;box-shadow:0 0 16px #e4bd6b13}@media(min-width:761px){.moon{left:56%;top:15%}main:before{content:"";position:absolute;z-index:-1;inset:-90px -160px -90px -120px;background:radial-gradient(ellipse at 32% 50%,#101d3af2,#101d3ac9 38%,#101d3a00 72%);pointer-events:none}}@media(min-width:1400px){.moon{left:57%;top:14%}}@media(max-width:760px){.stage-4,.stage-6{background:linear-gradient(180deg,#101d3ae6,#101d3af7 12%,#101d3afb);padding:18px 16px 10px;border-radius:22px 22px 0 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -18px 50px #050c1833;max-height:58svh;overflow-y:auto;scrollbar-width:none}.stage-4::-webkit-scrollbar,.stage-6::-webkit-scrollbar{display:none}.stage-4 .back,.stage-6 .back{position:static;display:block;margin:12px auto 0}.stage-4 .actions{position:sticky;bottom:0;padding-top:8px;background:linear-gradient(180deg,#101d3a00,#101d3af2 35%)}.stage-6 .description{display:none}.card-preview{width:min(155px,40vw)}.stage-6 .actions{position:static;background:none;padding-top:0}}.card-preview{display:block;width:min(180px,44vw);aspect-ratio:9/16;object-fit:cover;border:1px solid #c4aa7b55;border-radius:3px;margin:16px auto 0;box-shadow:0 18px 40px #050c1844}@media(min-width:761px){.card-preview{width:210px}}@media(min-width:761px){.stage-4,.stage-6{max-height:calc(100vh - 330px);overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}.stage-4::-webkit-scrollbar,.stage-6::-webkit-scrollbar{display:none}.stage-4 .status-list>div{padding:11px 0}.stage-4 .actions{margin-top:14px;gap:6px}.stage-4 .primary{min-height:50px}.stage-4 .secondary{min-height:42px}.stage-6 .card-preview{width:160px}.stage-6 .actions{margin-top:14px}.stage-4 .back{position:static;display:block;margin:14px 0 0}}@media(max-width:760px){.card-preview{width:min(140px,38vw)}}
