:root{--theme: #d9789d;--theme-dark: #9d4569;--accent: #f2b6c9;--envelope: #f6c8d7;--bg-a: #fff3f7;--bg-b: #fde4ec;--bg-c: #f7eef6;--cover-art: none;--paper-art: none;--ink: #33283d;--muted: #786c72;--danger: #a94458;--cream: rgba(255, 249, 236, .86);--line: rgba(116, 83, 74, .18);--shadow: 0 28px 90px rgba(25, 18, 30, .28);font-family:Microsoft JhengHei,PingFang TC,"Noto Serif TC",serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:var(--ink);overflow:hidden;background:linear-gradient(135deg,var(--bg-a),var(--bg-b) 48%,var(--bg-c))}button,input,select{font:inherit}button{min-height:44px;border:0;cursor:pointer}button:disabled{cursor:wait;opacity:.7}.app{position:relative;min-height:100dvh;overflow:hidden;isolation:isolate}.screen{position:relative;z-index:2;min-height:100dvh;display:none;animation:screenIn .36s ease both}.screen.is-active{display:flex}.ambient-cover,.vignette,.particle-field{position:fixed;inset:0;pointer-events:none}.ambient-cover{z-index:0;background:var(--cover-art) center / cover no-repeat;filter:blur(28px) saturate(1.08);opacity:.2;transform:scale(1.08);transition:background-image .25s ease}.vignette{z-index:1;background:radial-gradient(circle at 28% 42%,rgba(255,255,255,.26),transparent 30%),radial-gradient(circle at 50% 50%,transparent 44%,rgba(36,24,38,.36) 100%)}.particle-field{z-index:1;overflow:hidden}.ambient-particle{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:70% 40% 70% 38%;background:color-mix(in srgb,var(--accent) 72%,#fff 28%);opacity:.34;animation:drift var(--dur) linear infinite;animation-delay:var(--delay);transform:translateZ(0) rotate(var(--r))}:root{--verify-wait-ms: 1.5s;--opening-total-ms: 3.9s;--scene-enter-ms: .5s;--scene-focus-ms: .5s;--scene-flap-ms: .8s;--scene-pull-ms: .8s;--scene-expand-ms: .8s;--scene-handoff-ms: .5s;--flap-delay: 1s;--paper-pull-delay: 1.8s;--paper-expand-delay: 2.6s;--ease-soft: cubic-bezier(.2, .8, .22, 1);--ease-back: cubic-bezier(.18, 1.38, .36, 1)}@keyframes screenIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes drift{0%{transform:translateZ(0) rotate(var(--r));opacity:0}12%{opacity:.34}to{transform:translate3d(var(--dx),-120dvh,0) rotate(calc(var(--r) + 220deg));opacity:0}}@keyframes heroFloat{0%,to{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-12px) rotate(.4deg)}}@keyframes envelopeScene{0%{opacity:0;transform:translateY(170px) scale(.92) rotate(-2deg);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}13%{opacity:1;transform:translateY(0) scale(1) rotate(1.2deg);filter:drop-shadow(0 0 22px rgba(255,255,255,.62))}26%{opacity:1;transform:translateY(-4px) scale(1.12) rotate(-.8deg);filter:drop-shadow(0 0 32px var(--accent))}46%{opacity:1;transform:translateY(-2px) scale(1.12) rotate(.3deg)}67%{opacity:1;transform:translateY(4px) scale(1.04) rotate(0)}84%{opacity:.28;transform:translateY(120px) scale(.82) rotate(0)}to{opacity:0;transform:translateY(160px) scale(.76) rotate(0)}}@keyframes sealPulse{0%,18%{transform:translate(-50%,-50%) scale(.92);box-shadow:0 0 #fff0}24%,34%{transform:translate(-50%,-50%) scale(1.14) rotate(-4deg);box-shadow:0 0 28px var(--accent)}40%,to{transform:translate(-50%,-50%) scale(.78);opacity:0}}@keyframes openFlap{0%{transform:rotateX(0)}65%{transform:rotateX(-172deg)}to{transform:rotateX(-158deg)}}@keyframes pullPaper{0%{transform:translate(-50%,18px) scale(.82);opacity:.98}78%{transform:translate(-50%,-230px) scale(.9);opacity:1}to{transform:translate(-50%,-202px) scale(.9);opacity:1}}@keyframes expandPaper{0%{transform:translate(-50%,-202px) scale(.9);border-radius:8px}to{transform:translate(-50%,-216px) scale(2.18);border-radius:10px}}@keyframes burst{0%{opacity:0;transform:translate3d(var(--x),-28px,0) rotate(0)}20%{opacity:.72}to{opacity:0;transform:translate3d(calc(var(--x) + var(--drift)),310px,0) rotate(160deg)}}@keyframes sidePetal{0%{opacity:0;transform:translate3d(0,14dvh,0) rotate(var(--r)) scale(1.5)}16%{opacity:calc(var(--o) + .28)}to{opacity:0;transform:translate3d(var(--dx),-86dvh,0) rotate(calc(var(--r) + 190deg)) scale(1.5)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.letter-petal{animation:none!important;opacity:.45}}.theme-switcher{position:fixed;z-index:10;top:calc(24px + env(safe-area-inset-top));right:calc(28px + env(safe-area-inset-right))}.gear{width:48px;height:48px;border-radius:50%;color:#fff;background:var(--theme);box-shadow:0 16px 34px #00000038;font-size:22px}.theme-menu{position:absolute;top:58px;right:0;width:190px;padding:9px;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:#fffaf0f0;box-shadow:var(--shadow)}.theme-menu[hidden]{display:none}.theme-option{width:100%;min-height:44px;display:grid;grid-template-columns:18px 1fr;align-items:center;gap:9px;padding:8px;border-radius:8px;background:transparent;color:var(--ink);text-align:left}.theme-option.is-current{background:color-mix(in srgb,var(--theme) 14%,transparent);color:var(--theme-dark);font-weight:700}.swatch{width:18px;height:18px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 2px #ffffffb8}h1{margin:0;font-family:DFKai-SB,Kaiti TC,KaiTi,serif;font-size:clamp(24px,5.6dvh,52px);line-height:1.08;letter-spacing:0}.subtitle{margin:clamp(4px,1dvh,10px) 0 0;color:var(--muted);font-size:clamp(12px,2dvh,16px);line-height:1.45}.footer-note{position:fixed;z-index:5;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));color:#ffffff8c;font-size:12px;text-align:center;pointer-events:none}.primary-btn,.secondary-btn,.link-btn{width:100%;border-radius:10px}.primary-btn{color:#fff;background:linear-gradient(135deg,var(--theme),var(--theme-dark));box-shadow:0 16px 30px color-mix(in srgb,var(--theme) 24%,transparent);font-weight:800}.secondary-btn{color:var(--theme-dark);background:#fffaf0e0;border:1px solid var(--line);font-weight:700}.link-btn{color:var(--theme-dark);background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:14px}.spinner{display:inline-block;width:16px;height:16px;margin-right:8px;border:2px solid rgba(255,255,255,.42);border-top-color:#fff;border-radius:50%;vertical-align:-3px;animation:spin .8s linear infinite}.verify-screen{align-items:center;justify-content:center;overflow:hidden;padding:calc(clamp(10px,4dvh,60px) + env(safe-area-inset-top)) calc(clamp(24px,5vw,96px) + env(safe-area-inset-right)) calc(clamp(10px,4dvh,60px) + env(safe-area-inset-bottom)) calc(clamp(24px,5vw,96px) + env(safe-area-inset-left));gap:clamp(18px,4vw,64px)}.cover-showcase{flex:1 1 auto;display:grid;place-items:center;min-width:0;max-width:min(56vw,980px)}.cover-frame{width:min(52vw,116dvh,960px);padding:clamp(6px,1.3dvh,14px);border:1px solid rgba(255,255,255,.42);border-radius:clamp(12px,2dvh,18px);background:#ffffff29;box-shadow:var(--shadow),0 0 54px color-mix(in srgb,var(--accent) 34%,transparent);animation:heroFloat 5.2s ease-in-out infinite}.cover-frame img{width:100%;height:auto;aspect-ratio:1262 / 900;display:block;object-fit:contain;border-radius:12px;box-shadow:0 22px 60px #19121e38}.invite-card{flex:0 0 clamp(300px,32vw,420px);max-width:420px;padding:clamp(14px,3dvh,34px) clamp(16px,2.4vw,30px) clamp(14px,2.6dvh,28px);border:1px solid rgba(128,91,74,.22);border-radius:14px;background:var(--cream);box-shadow:var(--shadow),inset 0 0 0 1px #ffffff59}.invite-card:before{content:"";display:block;width:clamp(44px,5dvh,58px);height:3px;margin-bottom:clamp(8px,2dvh,22px);background:var(--theme);border-radius:999px;opacity:.72}.form{display:grid;gap:clamp(8px,1.4dvh,14px);margin-top:0}.field{display:grid;gap:clamp(4px,.8dvh,7px)}label{color:var(--ink);font-size:clamp(12px,1.7dvh,14px);font-weight:700}input,select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;color:var(--ink);background:#ffffffad;outline:none}input:focus,select:focus{border-color:var(--theme);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme) 18%,transparent)}.date-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-error{display:none;margin:0;color:var(--danger);font-size:13px}.field-error.is-visible{display:block}.error-screen{align-items:center;justify-content:center;padding:calc(6dvh + env(safe-area-inset-top)) calc(7vw + env(safe-area-inset-right)) calc(6dvh + env(safe-area-inset-bottom)) calc(7vw + env(safe-area-inset-left))}.error-card{width:min(460px,90vw);padding:42px 38px;border:1px solid rgba(255,255,255,.48);border-radius:16px;background:var(--cream);box-shadow:var(--shadow);text-align:center}.error-icon{width:66px;height:66px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;color:var(--danger);background:#a944581f;font-size:32px;font-weight:800}.opening-screen{align-items:center;justify-content:center;text-align:center;-webkit-user-select:none;user-select:none}.opening-stage{position:relative;width:min(920px,88vw);height:min(620px,72dvh);display:grid;place-items:center;isolation:isolate}.opening-envelope{position:relative;width:430px;height:292px;perspective:1100px;transform-style:preserve-3d;animation:envelopeScene var(--opening-total-ms) var(--ease-soft) forwards}.opening-envelope:before{content:"";position:absolute;inset:-46px;z-index:-1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 66%);opacity:.5}.env-inner,.env-front,.env-flap{position:absolute;left:0;width:430px;border-radius:12px}.env-inner{top:76px;height:216px;z-index:2;background:linear-gradient(160deg,#ffffffad,#ffffff2e),color-mix(in srgb,var(--envelope) 72%,#fff 28%);box-shadow:inset 0 20px 34px #50366e1a}.env-front{top:76px;height:216px;z-index:5;overflow:hidden;background:linear-gradient(#ffffff14,#ffffff14),linear-gradient(35deg,transparent 49%,rgba(255,255,255,.48) 50% 52%,transparent 53%),linear-gradient(-35deg,transparent 49%,rgba(255,255,255,.38) 50% 52%,transparent 53%),var(--cover-art) 62% 50% / 150% auto no-repeat,linear-gradient(180deg,color-mix(in srgb,var(--envelope) 94%,#fff 6%),var(--envelope));box-shadow:0 28px 58px #19121e47}.env-front:after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,transparent,rgba(82,55,118,.08))}.env-flap{z-index:6;top:0;height:158px;transform-origin:50% 100%;transform:rotateX(0);background:linear-gradient(180deg,color-mix(in srgb,var(--envelope) 74%,#fff 26%),var(--envelope));clip-path:polygon(0 100%,50% 0,100% 100%);box-shadow:inset 0 -12px 20px #492d6614;animation:openFlap var(--scene-flap-ms) var(--flap-delay) var(--ease-soft) forwards;backface-visibility:visible}.env-paper{position:absolute;z-index:4;left:50%;bottom:30px;width:318px;height:400px;border-radius:10px;transform:translate(-50%,18px) scale(.82);transform-origin:50% 82%;opacity:.98;background:radial-gradient(circle at 20% 12%,rgba(255,255,255,.84),transparent 26%),repeating-linear-gradient(to bottom,transparent 0 26px,rgba(123,79,214,.16) 27px 28px),linear-gradient(145deg,#fffdf6,#fff8ec);box-shadow:0 16px 36px #19121e2e;animation:pullPaper var(--scene-pull-ms) var(--paper-pull-delay) var(--ease-back) forwards,expandPaper var(--scene-expand-ms) var(--paper-expand-delay) var(--ease-soft) forwards}.env-paper:before{content:"";position:absolute;left:30px;right:30px;top:70px;height:130px;background:linear-gradient(#392b4475,#392b4475) 0 0 / 78% 10px no-repeat,linear-gradient(#392b4457,#392b4457) 0 36px / 92% 10px no-repeat,linear-gradient(#392b444d,#392b444d) 0 72px / 72% 10px no-repeat,linear-gradient(#392b4442,#392b4442) 0 108px / 84% 10px no-repeat;opacity:.72}.wax-seal{position:absolute;z-index:8;left:50%;top:130px;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6),transparent 26%),linear-gradient(145deg,var(--accent),var(--theme));box-shadow:0 10px 24px #41295c3d;animation:sealPulse var(--opening-total-ms) linear forwards}.burst-particle{position:absolute;top:84px;left:50%;width:10px;height:14px;border-radius:8px 8px 8px 2px;background:color-mix(in srgb,var(--accent) 78%,#fff 22%);opacity:0;animation:burst 2.4s calc(var(--paper-pull-delay) + var(--d)) ease-in forwards;pointer-events:none}.skip-hint{margin-top:-18px;color:#ffffffb8;font-size:14px}.letter-screen{flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;isolation:isolate;padding:calc(min(4dvh,34px) + env(safe-area-inset-top)) calc(5vw + env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) calc(5vw + env(safe-area-inset-left))}.letter-bg{position:absolute;inset:-32px;z-index:0;pointer-events:none;background:linear-gradient(90deg,#140e1885,#fff9ec1f 34%,#fff9ec2e 66%,#140e1880),radial-gradient(circle at 50% 48%,#fff9ec94,#fff9ec14 46%,#19121e5c),var(--cover-art) center / cover no-repeat;filter:blur(24px) saturate(1.05);opacity:.18;transform:scale(1.08)}.letter-halo{position:absolute;z-index:1;width:min(74vw,104dvh);aspect-ratio:1260 / 896;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 42%,transparent),transparent 68%);filter:blur(10px);opacity:.42;pointer-events:none}.letter-mark{position:absolute;z-index:1;width:118px;height:142px;border:2px dashed color-mix(in srgb,var(--theme-dark) 30%,transparent);border-radius:10px;opacity:.12;transform:rotate(var(--rot));pointer-events:none}.letter-mark.left{left:7vw;bottom:10dvh}.letter-mark.right{right:6vw;top:12dvh;border-radius:50%;background:radial-gradient(circle,var(--theme),transparent 62%)}.letter-petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.letter-petal{position:absolute;top:var(--top);width:var(--size);height:calc(var(--size) + 4px);border-radius:70% 40% 70% 38%;background:color-mix(in srgb,var(--theme) 75%,white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme-dark) 42%,transparent),inset -2px -2px 4px #50324629,0 3px 8px #2d1c2a24;opacity:0;animation:sidePetal var(--dur) linear infinite;animation-delay:var(--delay)}.letter-petal.left{left:var(--x)}.letter-petal.right{right:var(--x)}.letter-paper{position:relative;z-index:2;width:min(82vw,116dvh);aspect-ratio:1260 / 896;padding:min(7.4dvh,72px) min(8vw,118px) min(5.2dvh,48px);border-radius:16px;background:var(--paper-art) center / contain no-repeat;filter:drop-shadow(0 34px 76px rgba(20,14,24,.38));overflow:hidden}.letter-paper:after{content:"";position:absolute;inset:12px;border-radius:12px;box-shadow:inset 0 0 34px #ffffff4d,inset 0 0 0 1px #ffffff47;pointer-events:none}.stamp{position:absolute;right:min(8vw,106px);top:min(6dvh,58px);width:58px;height:70px;display:grid;place-items:center;border:2px dashed color-mix(in srgb,var(--theme-dark) 34%,transparent);border-radius:7px;color:var(--theme-dark);background:#ffffff57;font-size:12px;font-weight:800}.letter-paper h1{font-size:clamp(28px,3vw,42px);color:var(--theme-dark)}.handwriting{width:72%;max-height:58%;margin-top:min(4dvh,34px);display:grid;gap:12px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;font-family:Microsoft JhengHei,PingFang TC,"Noto Serif TC",serif;color:#392b44c7;font-size:clamp(15px,1.25vw,19px);line-height:1.7}.handwriting::-webkit-scrollbar{display:none}.scribble{height:12px;border-radius:999px;background:linear-gradient(90deg,#392b4480,#392b4421);transform:rotate(var(--r));opacity:var(--o);width:var(--w)}.signature{margin-top:4px;text-align:right;color:var(--theme-dark);font-family:DFKai-SB,Kaiti TC,KaiTi,serif;font-size:1.2em;font-weight:700}.player{position:relative;z-index:2;width:min(82vw,116dvh);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:#fff9ecd1;box-shadow:0 18px 40px #19121e2e}.player-title{margin:0;font-size:13px;font-weight:800;white-space:nowrap}.voice-demo{padding:3px 8px;border-radius:999px;color:#fff;background:var(--theme);font-size:11px;font-weight:800;white-space:nowrap}.progress-row{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.progress{width:100%;accent-color:var(--theme)}.controls{display:grid;grid-template-columns:repeat(5,38px);gap:6px}.icon-btn{min-width:38px;width:38px;height:38px;min-height:38px;border-radius:50%;color:var(--theme-dark);background:#ffffffb8;border:1px solid color-mix(in srgb,var(--theme-dark) 16%,transparent);font-size:17px;font-weight:800}.orientation-gate{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:calc(30px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));color:var(--ink);background:radial-gradient(circle at 50% 26%,rgba(255,255,255,.58),transparent 28%),linear-gradient(135deg,var(--bg-a),var(--bg-b) 52%,var(--bg-c));text-align:center}.rotate-card{width:min(88vw,420px);padding:32px 28px;border:1px solid rgba(255,255,255,.55);border-radius:18px;background:#fff9ecd6;box-shadow:var(--shadow)}.rotate-icon{position:relative;width:112px;height:76px;margin:0 auto 22px;border:4px solid var(--theme);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.7),var(--envelope));box-shadow:0 18px 38px color-mix(in srgb,var(--theme) 24%,transparent);animation:rotatePhone 1.8s var(--ease-soft) infinite}.rotate-icon:before{content:"";position:absolute;inset:22px 18px;border-radius:4px;background:var(--cover-art) center / cover no-repeat;opacity:.32}.rotate-icon:after{content:"↻";position:absolute;right:-22px;top:-18px;color:var(--theme-dark);font-size:32px;font-weight:800}.rotate-card h1{font-size:30px;color:var(--theme-dark)}.rotate-card p{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.6}@keyframes rotatePhone{0%,to{transform:rotate(0) scale(1)}50%{transform:rotate(90deg) scale(.9)}}@media(pointer:coarse)and (orientation:portrait){body{overflow:hidden}.orientation-gate{display:flex}.app,.footer-note{visibility:hidden}}:root{--opening-reduced-ms: .36s;--paper-width: min(82vw, 116dvh, calc((100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.40625) );--letter-switch-ms: .3s;--burst-ms: 2.4s}.experience{min-height:100dvh;color:var(--ink);background:linear-gradient(135deg,var(--bg-a),var(--bg-b) 48%,var(--bg-c))}.app{height:100dvh;overflow-y:auto}.screen{min-height:100dvh}img{max-width:100%;height:auto}button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--theme-dark);outline-offset:3px}button:disabled{cursor:default}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.env-badge{position:fixed;z-index:40;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));padding:3px 8px;border-radius:4px;color:#fff;background:#33283dcc;font-size:12px;pointer-events:none}.loading-screen{align-items:center;justify-content:center}.verify-screen{gap:clamp(14px,4vw,64px)}.cover-frame{max-width:100%}.invite-card{flex-shrink:0;max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto}.field-label{color:var(--ink);font-size:clamp(12px,1.7dvh,14px);font-weight:700}.privacy-note{margin:0;font-size:11px;line-height:1.4;color:var(--muted)}.image-fallback{min-height:35dvh;display:grid;place-content:center}.error-card{max-height:calc(100dvh - 32px);overflow-y:auto;padding:clamp(18px,5dvh,42px) clamp(20px,4vw,38px)}.error-card h1{font-size:clamp(24px,4dvh,36px);line-height:1.3}.error-card .secondary-btn{margin-top:20px}.opening-scale{position:relative;display:grid;place-items:center;width:430px;height:292px;transform:scale(var(--opening-scale, 1))}.opening-stage{flex:0 1 min(920px,70vw);min-width:0}.opening-caption{flex:0 1 auto;padding-right:max(12px,env(safe-area-inset-right))}.skip-hint{margin:8px 0 0;padding:4px;color:var(--theme-dark);background:transparent}.burst-particle{animation-duration:var(--burst-ms)}.opening-envelope{filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 65%,white))}@keyframes envelopeScene{0%{opacity:0;transform:translateY(170px) scale(.92) rotate(-2deg)}13%{opacity:1;transform:translateY(0) scale(1) rotate(1.2deg)}26%{opacity:1;transform:translateY(-4px) scale(1.12) rotate(-.8deg)}46%{opacity:1;transform:translateY(-2px) scale(1.12) rotate(.3deg)}67%{opacity:1;transform:translateY(4px) scale(1.04) rotate(0)}84%{opacity:.28;transform:translateY(120px) scale(.82) rotate(0)}to{opacity:0;transform:translateY(160px) scale(.76) rotate(0)}}@keyframes sealPulse{0%,18%{transform:translate(-50%,-50%) scale(.92)}24%,34%{transform:translate(-50%,-50%) scale(1.14) rotate(-4deg)}40%,to{transform:translate(-50%,-50%) scale(.78);opacity:0}}@keyframes expandPaper{0%{transform:translate(-50%,-202px) scale(.9)}to{transform:translate(-50%,-216px) scale(2.18)}}.letter-screen{height:100dvh;min-height:0;gap:clamp(6px,1.6dvh,10px);padding:max(8px,env(safe-area-inset-top)) max(5vw,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(5vw,env(safe-area-inset-left))}.letter-atmosphere{position:absolute;inset:0;pointer-events:none}.letter-paper{flex:none;width:var(--paper-width);background-color:#fff9ec;animation:letterFade var(--letter-switch-ms) ease both}@keyframes letterFade{0%{opacity:0}to{opacity:1}}.handwriting{max-height:none;height:65%;gap:clamp(6px,2dvh,12px)}.handwriting p{margin:0}.scribble{flex:none;min-height:clamp(7px,1.8dvh,12px);height:clamp(7px,1.8dvh,12px)}.player-wrap{position:relative;z-index:2;flex:none;width:var(--paper-width);container-type:inline-size}.player{width:100%;min-width:0;grid-template-columns:auto minmax(0,1fr) auto}.progress-row{min-width:0}.progress{min-width:0;padding:0;border:0;background:transparent;cursor:pointer}.player-feedback{position:absolute;bottom:calc(100% + 4px);left:0;width:100%;text-align:center;font-size:12px;color:var(--theme-dark)}.player-feedback>span{padding:3px 8px;border-radius:999px;background:#fff9ecee}.player-feedback:empty{display:none}.audio-fallback{min-height:24px;border-radius:999px;padding:2px 12px;color:var(--theme-dark);background:#fff9ecee;text-decoration:underline}.character-tabs{position:absolute;z-index:4;right:max(8px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:grid;gap:clamp(4px,1.2dvh,12px)}.character-tab{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;width:clamp(52px,5.6vw,78px);min-height:clamp(44px,9dvh,74px);padding:5px;border-radius:9px 0 0 9px;color:var(--ink);background:#fff9ecc9;border:1px solid #ffffff80;font-size:12px;transition:transform .2s,opacity .2s}.character-tab.is-current{background:color-mix(in srgb,var(--tab-color) 32%,#fff9ec);box-shadow:0 0 0 2px var(--tab-color);transform:translate(-4px)}.mini-envelope{position:relative;width:28px;height:18px;border:1px solid color-mix(in srgb,var(--tab-color) 80%,#33283d);background:color-mix(in srgb,var(--tab-color) 45%,white);border-radius:2px}.mini-envelope:after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--tab-color) 80%,white);clip-path:polygon(0 0,100% 0,50% 66%)}.default-dot{position:absolute;right:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--tab-color);box-shadow:0 0 0 1px #fff}@container (max-width: 600px){.player{gap:6px;padding:5px 8px}.player-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.player{grid-template-columns:minmax(0,1fr) auto}.progress-row{grid-template-columns:28px minmax(0,1fr) 28px;gap:4px}.controls{gap:4px}}@media(pointer:coarse){.letter-petal:nth-child(n+7):nth-child(-n+15),.letter-petal:nth-child(n+22){display:none}.controls{grid-template-columns:repeat(5,44px)}.icon-btn{min-width:44px;width:44px;height:44px;min-height:44px}}@media(prefers-reduced-motion:reduce){.opening-envelope,.env-flap,.env-paper,.wax-seal{animation:none!important}.opening-envelope{opacity:1;transform:none}.burst-particle,.ambient-particle{display:none}.opening-screen{animation:reducedOpening var(--opening-reduced-ms) ease both!important}.letter-paper{animation:letterFade .18s ease both!important}.letter-petal{top:calc(var(--top) - 60dvh);transform:rotate(var(--r)) scale(1.5)}}@keyframes reducedOpening{0%,to{opacity:0}35%,65%{opacity:1}}