:root{--navy:#06152d;--navy2:#0b284d;--blue:#39aaf5;--gold:#f7b93e;--paper:#fff5dc;--ink:#112b4b}
*{box-sizing:border-box}html{background:var(--navy);scroll-behavior:smooth}body{margin:0;color:#f8f2df;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;overflow-x:hidden}.cosmos{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 50% 34%,#123d70 0,#091f3e 35%,#041126 78%);isolation:isolate}.cosmos:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 20% 22%,rgba(57,170,245,.18),transparent 24%),radial-gradient(circle at 82% 72%,rgba(247,185,62,.12),transparent 22%);z-index:-3}.grid{position:fixed;inset:0;background-image:linear-gradient(rgba(90,168,226,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(90,168,226,.055) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 88%);z-index:-2}.dust{position:fixed;inset:0;z-index:-1}.dust i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 7px #fff;animation:twinkle 2.6s infinite alternate}.dust i:nth-child(3n){background:var(--gold);width:4px;height:4px}.dust i:nth-child(4n){width:1px;height:1px;animation-delay:1s}.dust i:nth-child(1){left:8%;top:14%}.dust i:nth-child(2){left:18%;top:45%}.dust i:nth-child(3){left:31%;top:11%}.dust i:nth-child(4){left:43%;top:28%}.dust i:nth-child(5){left:57%;top:8%}.dust i:nth-child(6){left:72%;top:18%}.dust i:nth-child(7){left:88%;top:33%}.dust i:nth-child(8){left:95%;top:70%}.dust i:nth-child(9){left:13%;top:78%}.dust i:nth-child(10){left:27%;top:65%}.dust i:nth-child(11){left:65%;top:62%}.dust i:nth-child(12){left:79%;top:82%}.dust i:nth-child(n+13){left:calc((var(--i, 5))*1%);top:90%}.orbit{position:fixed;border:1px solid rgba(92,173,235,.14);border-radius:50%;z-index:-1}.orbit:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 15px var(--gold)}.orbit-one{width:76vw;height:76vw;max-width:650px;max-height:650px;left:-30vw;top:18vh;transform:rotate(25deg)}.orbit-one:after{right:5%;top:22%}.orbit-two{width:60vw;height:60vw;max-width:540px;max-height:540px;right:-25vw;bottom:-7vh}.orbit-two:after{left:8%;top:28%}.topbar,footer{position:fixed;left:0;right:0;display:flex;justify-content:space-between;gap:14px;padding:18px 22px;color:#85b4d9;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.14em;z-index:20}.topbar{top:0;border-bottom:1px solid rgba(130,188,229,.15)}footer{bottom:0;border-top:1px solid rgba(130,188,229,.15)}
.scene{display:none;min-height:100svh;width:min(100%,700px);margin:auto;padding:84px 24px 78px;align-items:center;justify-content:center;flex-direction:column;text-align:center;animation:arrive .75s ease both}.scene.active{display:flex}.eyebrow{margin:0 0 18px;color:#75bdeb;font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.24em}.scene h1,.scene h2{margin:0;color:#fff5de;font-family:"Noto Serif TC","Songti TC",serif;letter-spacing:.04em}.scene h1{font-size:clamp(30px,8vw,54px);line-height:1.38}.scene h1 em{color:var(--gold);font-style:normal}.scene h2{font-size:clamp(27px,7vw,43px)}.lead{font-size:16px;line-height:1.8;color:#c4dbec;margin:16px 0 24px}.hint,.hold-hint{font-size:13px;color:#8db7d6;letter-spacing:.08em}.primary{border:1px solid rgba(247,185,62,.65);background:linear-gradient(135deg,#ffd36a,#eaa223);color:#11233b;padding:15px 21px;border-radius:7px;font-weight:800;font-size:15px;letter-spacing:.04em;box-shadow:0 8px 30px rgba(247,185,62,.18);cursor:pointer;transition:.2s;text-decoration:none}.primary:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(247,185,62,.28)}.primary:active{transform:scale(.98)}.primary span{margin-left:12px}.scanner{position:relative;width:170px;height:170px;margin-bottom:24px;border:1px solid rgba(82,173,239,.34);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(47,151,230,.2),transparent 67%);overflow:hidden}.scanner:before,.scanner:after{content:"";position:absolute;border:1px solid rgba(72,181,248,.2);border-radius:50%}.scanner:before{inset:17px}.scanner:after{inset:38px}.scanner img{width:105px;filter:drop-shadow(0 0 16px rgba(44,163,239,.5))}.scanline{position:absolute;left:0;right:0;height:2px;background:#62c6ff;box-shadow:0 0 18px #62c6ff;animation:scan 2.5s ease-in-out infinite;z-index:2}
.id-card{width:min(100%,410px);margin:26px 0;padding:18px;border:1px solid rgba(94,180,240,.42);border-radius:16px;background:linear-gradient(145deg,rgba(20,62,104,.93),rgba(6,26,52,.96));box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 0 40px rgba(43,156,233,.06);text-align:left;position:relative;overflow:hidden}.id-card:after{content:"";position:absolute;width:160px;height:160px;border:1px solid rgba(73,168,235,.14);border-radius:50%;right:-60px;bottom:-80px}.card-head{display:flex;align-items:center;gap:10px;padding-bottom:15px;border-bottom:1px solid rgba(125,190,234,.22)}.card-head img{width:50px}.card-head div{display:flex;flex-direction:column}.card-head b{font-size:20px}.card-head small{font-size:10px;color:#90b7d3}.card-head>span{margin-left:auto;color:var(--gold);font:10px ui-monospace,monospace;letter-spacing:.14em}.card-body{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;padding:22px 4px 16px}.card-body div{display:flex;flex-direction:column;gap:5px}.card-body small{font-size:10px;color:#87acc7}.card-body strong{font-size:14px}.green{color:#74e6a4}.barcode{color:#6eaed8;letter-spacing:4px;font-size:11px;white-space:nowrap;overflow:hidden}
.constellation{position:relative;width:min(100%,430px);height:245px;margin:16px 0}.constellation svg{position:absolute;inset:0;width:100%;height:100%}.constellation path{fill:none;stroke:rgba(98,186,241,.2);stroke-width:2;stroke-dasharray:7 8;transition:1s}.constellation path.lit{stroke:var(--gold);filter:drop-shadow(0 0 7px var(--gold));stroke-dasharray:600;animation:draw 1.2s}.memory-star{position:absolute;width:112px;border:0;background:transparent;color:#7eabc9;cursor:pointer;display:flex;align-items:center;flex-direction:column;gap:7px}.memory-star span{font-size:42px;transition:.35s}.memory-star small{font-size:11px;line-height:1.45}.memory-star.lit span{color:var(--gold);filter:drop-shadow(0 0 13px var(--gold));transform:scale(1.18)}.memory-star.lit small{color:#f6edda}.s1{left:0;top:118px}.s2{left:calc(50% - 56px);top:25px}.s3{right:0;top:118px}.reveal{animation:arrive .6s}.reveal p{line-height:1.8;color:#fff1cd;font-family:"Noto Serif TC",serif;font-size:17px;margin:0 0 20px}
.envelope{width:min(92vw,410px);height:250px;margin:30px 0 18px;position:relative;background:linear-gradient(155deg,#e7d4ac,#fff5dc);border-radius:8px;box-shadow:0 25px 70px rgba(0,0,0,.38);color:var(--ink);display:grid;place-items:center;overflow:visible}.envelope:before,.envelope:after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,50% 62%,100% 0);background:#f6e6c2;border-radius:8px}.envelope:after{clip-path:polygon(0 100%,50% 45%,100% 100%);background:#ddc494}.env-label{position:absolute;z-index:2;top:30px;left:30px;right:30px;display:flex;flex-direction:column;text-align:left}.env-label small{font:10px ui-monospace,monospace;color:#68809a;letter-spacing:.2em}.env-label strong{font-family:"Noto Serif TC",serif;font-size:20px;margin:5px 0}.env-label span{font-size:11px;color:#61748a}.seal{--progress:0deg;position:absolute;z-index:4;bottom:26px;width:86px;height:86px;border-radius:50%;border:0;padding:8px;background:conic-gradient(var(--gold) var(--progress),#0d3154 var(--progress));box-shadow:0 8px 24px rgba(3,12,25,.32);cursor:pointer;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.seal:before{content:"";position:absolute;inset:5px;border-radius:50%;background:#0c2a4b}.seal img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 5px rgba(255,255,255,.2));user-select:none;pointer-events:none;-webkit-user-drag:none}.seal.holding{transform:scale(.98)}.hold-hint{animation:pulse 1.7s infinite}.tap-backup{margin-top:5px;border:0;background:transparent;color:#82b4d7;font-size:12px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:10px;touch-action:manipulation}.tap-backup span{display:inline-block;margin-left:7px;color:var(--gold);font-family:ui-monospace,monospace}
.invitation-scene{justify-content:flex-start;padding-top:78px}.invitation-wrap{width:min(100%,600px);margin:18px 0 26px;padding:7px;background:#e7c778;border-radius:11px;box-shadow:0 25px 80px rgba(0,0,0,.42)}.invitation-wrap img{display:block;width:100%;height:auto;border-radius:6px}.final-logo{width:110px;margin-bottom:20px;filter:drop-shadow(0 0 26px rgba(46,169,242,.45))}.final-copy{line-height:1.9;color:#c8dceb;font-size:15px;margin:20px 0 28px}.final-copy b{color:#ffd168}.final-copy strong{font-size:19px;color:#fff3d4}.halo{width:190px;height:190px;border-radius:50%;display:grid;place-items:center;margin-bottom:25px;background:radial-gradient(circle,rgba(246,189,65,.23),transparent 67%);border:1px solid rgba(247,185,62,.3);animation:pulse 2s infinite}.halo img{width:125px;filter:drop-shadow(0 0 22px rgba(73,178,243,.5))}.line{background:linear-gradient(135deg,#80e69b,#32bd62);border-color:#70df91;display:inline-block}.safe-note{color:#7197b4;margin-top:14px}
@keyframes arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}@keyframes scan{0%,100%{top:15%}50%{top:84%}}@keyframes twinkle{from{opacity:.25;transform:scale(.7)}to{opacity:1;transform:scale(1.3)}}@keyframes pulse{50%{opacity:.55;transform:scale(.98)}}@keyframes draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@media(min-width:700px){.topbar,footer{padding-left:34px;padding-right:34px;font-size:10px}.scene{padding-top:96px}.id-card{transform:rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}