:root{color-scheme:dark;--gold:#e6d1ad;--ink:#050914}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#f0e9df;font-family:"Microsoft JhengHei",system-ui,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.45;cursor:wait}button:focus-visible{outline:2px solid #b2d9ff;outline-offset:6px}main.universe{height:100svh;min-height:660px;overflow:hidden;position:relative;background:linear-gradient(#03071333,#03071333),url('/img/nebula.jpg') center/cover}header{position:absolute;z-index:3;top:36px;left:46px;right:46px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-family:"PMingLiU",serif;letter-spacing:.34em;font-size:14px;color:var(--gold)}.eyebrow:before{content:'';display:inline-block;width:36px;height:1px;background:#cdb48c;vertical-align:middle;margin-right:24px}.quiet{background:none;font-size:13px;letter-spacing:.12em;color:#bac5d1;padding:10px}.intro{position:absolute;left:50%;top:13%;transform:translateX(-50%);text-align:center;z-index:2;width:90%;pointer-events:none}.intro p{font:17px/2 "PMingLiU",serif;letter-spacing:.28em;color:#b7c3d4}.intro em{font-style:normal;color:#f1e5d2;font-size:27px;letter-spacing:.2em}.earth{position:absolute;width:min(70vh,620px);height:min(70vh,620px);top:52%;left:50%;transform:translate(-50%,-50%)}.earth canvas{position:absolute;inset:0;z-index:1}.earth-fallback{position:absolute;inset:12%;border-radius:50%;background:url('/img/earth-day-2k.jpg') center/cover;box-shadow:inset -50px -15px 70px #000,0 0 35px #368dda55}.earth:has(canvas) .earth-fallback{display:none}.stars{position:absolute;inset:0;pointer-events:none}.star{position:absolute;pointer-events:auto;width:48px;height:48px;padding:0;transform:translate(-50%,-50%);background:transparent;display:grid;place-items:center;z-index:3}.spark{width:calc(54px*var(--s,1));height:calc(54px*var(--s,1));pointer-events:none;animation:twinkle var(--dur,4.5s) var(--delay) ease-in-out infinite alternate}.star-name{position:absolute;left:40px;top:7px;font-size:12px;white-space:nowrap;border:1px solid #c3a67e77;border-radius:40px;padding:5px 13px;background:#090e1edd;opacity:0;transition:opacity .2s;pointer-events:none}.star:hover .star-name,.star:focus-visible .star-name{opacity:1}.star:hover .spark,.star.selected .spark{filter:brightness(1.6) drop-shadow(0 0 10px #ffe9c4);animation-play-state:paused;transform:scale(1.5)}.hint{position:absolute;bottom:13%;left:50%;transform:translateX(-50%);text-align:center;font-size:12px;letter-spacing:.18em;color:#d5c3a7;width:90%;pointer-events:none}.hint small{display:block;color:#8b9cb3;font-size:11px;margin-top:10px}footer{position:absolute;bottom:36px;left:46px;right:46px;display:flex;align-items:end;justify-content:space-between;gap:24px;z-index:4}.bottom-left{font-size:10px;color:#8697ad;letter-spacing:.14em;flex:1}.primary{padding:14px 30px;border:1px solid #baa383;border-radius:60px;color:#f3e3c9;background:linear-gradient(120deg,#111c2cdd,#060b15dd);letter-spacing:.2em;font-size:14px;box-shadow:0 0 30px #111d2c55}.primary:hover{background:#253044}.primary span{margin-left:25px}.brand{flex:1;text-align:right;font:clamp(22px,2.4vw,36px)/1.5 "PMingLiU",serif;color:#e9d7b8;letter-spacing:.04em}.brand span{display:block;font:9px/2 system-ui;letter-spacing:.35em;color:#889ab2}.pages{position:absolute;left:30px;top:48%;display:flex;flex-direction:column;z-index:5;gap:12px}.pages button{font-size:10px;background:#091321cc;padding:8px;border-radius:20px}.toast{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);font-size:12px;text-align:center;color:#eed9b3;z-index:8;width:85%;pointer-events:none}dialog{border:1px solid #8b9caf55;border-radius:20px;background:linear-gradient(135deg,#172334ef,#090f1cf5);color:#f1e7d8;padding:40px;max-width:520px;width:calc(100% - 36px);max-height:80svh;box-shadow:0 25px 100px #0008;backdrop-filter:blur(18px);margin:auto}dialog::backdrop{background:#03081466;backdrop-filter:blur(2px)}.close{position:absolute;right:15px;top:10px;font-size:28px;background:none;color:#aebed0}.card-star{display:block;color:#e8cda4;text-shadow:0 0 15px #e2c89999;font-size:22px;margin-bottom:16px}.message .quote{font:23px/1.9 "PMingLiU",serif;white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0 26px;letter-spacing:.04em}.signature{text-align:right;font:16px serif;color:#d7c09e}.message small{display:block;text-align:right;font-size:10px;color:#95a5bc}.share{display:block;margin:22px auto 0}h1{font:27px/1.5 "PMingLiU",serif;letter-spacing:.07em;margin:0 0 24px}label{display:block;font-size:12px;letter-spacing:.08em;color:#bac6d7;margin:18px 0 0}input:not([type=checkbox]),textarea{display:block;width:100%;border:1px solid #75859c55;border-radius:8px;background:#080e1b88;color:#eee5db;padding:13px 14px;margin-top:9px;font-size:14px;line-height:1.6;resize:vertical}input:focus,textarea:focus{outline:1px solid #cdb389}input::placeholder,textarea::placeholder{color:#718199}.count{display:block;text-align:right;color:#8090a7;margin-top:5px;font-size:10px}.check{display:flex;align-items:center;gap:9px;letter-spacing:0;font-size:11px;line-height:1.7;margin:18px 0 26px}.check input{accent-color:#d2b98b}form .primary{width:100%}.form-status{font-size:12px;color:#edcfa9}.message-list>p{font-size:12px;color:#a5b4c7}.message-list>button{display:block;width:100%;padding:18px 0;border-bottom:1px solid #75859c33;background:none;text-align:left}.message-list span{color:var(--gold);font-size:13px}.message-list button p{font-size:13px;line-height:1.7;color:#acbbcf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes breathe{from{opacity:.5;transform:scale(.82)}to{opacity:1;transform:scale(1.12)}}@media(max-width:650px){main.universe{min-height:600px}header{top:22px;left:22px;right:16px}.eyebrow{font-size:10px;letter-spacing:.13em}.eyebrow:before{width:14px;margin-right:10px}.quiet{font-size:10px}.intro{top:16%}.intro p{font-size:13px}.intro em{font-size:21px}.earth{width:105vw;height:105vw;top:51%}footer{left:20px;right:20px;bottom:28px;gap:16px;align-items:center}.bottom-left{display:none}.brand{font-size:20px}.brand span{font-size:8px}.primary{font-size:12px;padding:13px 18px;letter-spacing:.08em}.primary span{margin-left:10px}.hint{bottom:22%;font-size:10px}.star-name{left:auto;top:40px}.spark{width:calc(42px*var(--s,1));height:calc(42px*var(--s,1))}.toast{bottom:95px;font-size:11px}dialog{padding:32px 25px}.message .quote{font-size:21px}.pages{left:10px;top:65%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@keyframes ignite{0%{transform:scale(.2);opacity:0}40%{transform:scale(2);filter:brightness(2)}100%{transform:scale(1);opacity:1}}.star.born .spark{animation:ignite 1.6s ease-out} .earth{filter:drop-shadow(0 0 15px #3b78b922)}

@keyframes twinkle{0%{opacity:.45;transform:scale(.78) rotate(0)}60%{opacity:.85}100%{opacity:1;transform:scale(1.08) rotate(8deg)}}.bottom-left span{display:block;font-size:9px;opacity:.6;margin-top:6px}[hidden]{display:none!important}.star-name{z-index:2}
.ambient{position:absolute;inset:0;pointer-events:none;z-index:0}.ambient img{position:absolute;width:calc(60px*var(--s));height:calc(60px*var(--s));transform:translate(-50%,-50%);animation:twinkle var(--dur) var(--delay) ease-in-out infinite alternate}.earth{z-index:1}