:root{color-scheme:dark;--navy:#081226;--deep:#100e24;--ink:#f4dfbc;--soft:#c7b5b7;--gold:#c99e67;--rose:#cc9aa7;--line:#c5a27152;--serif:"Songti SC","STSong","SimSun",Georgia,serif;--sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--navy);color:var(--ink);font-family:var(--sans)}
body{background:radial-gradient(ellipse at 5% 46%,#35345a60,transparent 48%),radial-gradient(ellipse at 95% 80%,#60345238,transparent 40%),linear-gradient(165deg,#071426,#10162e 48%,#130f25);min-height:100svh;overflow-x:clip}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation;color:inherit;min-height:44px}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,input:focus-visible{outline:2px solid #f3cc96;outline-offset:5px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:500;overflow-wrap:anywhere}
h1:focus,h2:focus{outline:none}
p{overflow-wrap:anywhere;line-height:1.9}
body:has(dialog[open]){overflow:hidden}
.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sky:after{content:"";position:absolute;inset:22px;border:1px solid #d5ac7514;border-radius:46% 46% 12px 12px;mask-image:linear-gradient(transparent,#0008,transparent)}
.moon{position:absolute;top:-184px;left:calc(50% - 300px);width:360px;height:360px;border-radius:50%;box-shadow:12px 12px 8px -12px #d0e3ff,24px 24px 36px -25px #91a9dd;transform:rotate(12deg);opacity:.45}
.sky-star{position:absolute;color:#e9c992;font:16px Georgia,serif;opacity:.5;text-shadow:0 0 12px #ecc78a55}
.sky-star.dot{width:2px;height:2px;background:#f0d3b0;border-radius:50%;opacity:.55}
#effects{position:fixed;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}
.app{position:relative;max-width:620px;margin:auto;z-index:1;min-height:100svh}
.scene{min-height:100svh;padding:calc(82px + env(safe-area-inset-top)) 24px calc(26px + env(safe-area-inset-bottom));text-align:center;display:flex;flex-direction:column;align-items:center;animation:sceneIn .5s both}
.scene>*{flex-shrink:0;max-width:100%}
.scene[hidden]{display:none}
@keyframes sceneIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.scene-kicker{font-size:11px;color:#c4a785;letter-spacing:.18em;line-height:1.7;margin-bottom:14px}
.scene h2{font-size:clamp(26px,7vw,34px);letter-spacing:.06em;line-height:1.5}
.scene-desc{font-size:12px;color:var(--soft);line-height:1.9;margin:13px 0 0;white-space:pre-line}
.subtle{font-size:11px;color:#b29fa8;line-height:1.9;margin-top:17px}
.audio-toolbar{position:fixed;top:calc(12px + env(safe-area-inset-top));right:max(14px,calc((100vw - 570px)/2));z-index:50;display:flex;gap:8px}
.mini-btn{border:1px solid var(--line);background:#0b162bd9;color:#e8cfaa;border-radius:24px;padding:8px 13px;font-size:11px;min-height:44px;backdrop-filter:blur(10px)}
.mini-btn[aria-pressed="true"]{border-color:#d5b180;background:#3c293e}
.music-fallback{position:fixed;top:calc(65px + env(safe-area-inset-top));left:14px;right:14px;z-index:60;background:#172139f5;border:1px solid #c7a37470;border-radius:14px;padding:12px;max-width:540px;margin:auto;box-shadow:0 8px 28px #0005;display:flex;align-items:center;gap:12px}
.music-fallback span{font-size:11px;color:#e0d0bd;line-height:1.6;flex:1}
.music-fallback button{flex-shrink:0;background:#e6c395;color:#382d38;border-color:#f2d7ae;font-weight:600}
.toast{position:fixed;bottom:calc(23px + env(safe-area-inset-bottom));left:16px;right:16px;margin:auto;max-width:500px;z-index:100;padding:13px 18px;border-radius:12px;background:#24304cf5;border:1px solid #c6a2759c;color:#f6dfbc;font-size:12px;text-align:center;box-shadow:0 6px 30px #0007}
.main-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:28px;min-height:49px;padding:13px 24px;font-size:13px;line-height:1.6;text-align:center;border:1px solid #dfbc86;max-width:100%;transition:transform .18s,filter .18s}
.main-btn{color:#3e3040;background:linear-gradient(110deg,#e6bf90,#f7dfb5 45%,#d5a878);box-shadow:inset 0 1px 0 #fff1d5,0 6px 23px #d6a1721a;min-width:250px;font-weight:600}
.secondary-btn{color:#e4c5a2;background:#17203a63;border-color:#d3ad7970}
.main-btn:active,.secondary-btn:active{transform:scale(.98)}
.outline-btn{background:linear-gradient(120deg,#222442a8,#34233770);color:#f3d3aa;box-shadow:inset 0 0 18px #e6ba7c0a}
.text-btn{background:none;border:0;border-bottom:1px solid #c9a87c44;color:#c7b3b8;font-size:11px;padding:8px 10px;margin-top:10px}
.intro{justify-content:center;padding-top:calc(87px + env(safe-area-inset-top))}
.intro-art{width:min(100%,365px);margin:12px 0 19px;position:relative}
.intro-art:before{content:"";position:absolute;inset:10% -5%;background:radial-gradient(ellipse,#9b7c6330,transparent 70%);filter:blur(13px)}
.envelope-svg{display:block;width:100%;overflow:visible;filter:drop-shadow(0 18px 15px #01071366);transform:rotate(-5deg)}
.invitation-card{transition:transform .85s cubic-bezier(.25,.7,.3,1)}
.envelope-flap{transform-origin:180px 134px;transition:opacity .5s,transform .7s}
.envelope-opening .invitation-card{transform:translateY(-50px)}
.envelope-opening .envelope-flap{transform:scaleY(-.6);opacity:.1}
.envelope-opening .seal{opacity:0;transition:opacity .4s}
.intro-copy{margin-bottom:27px}
.intro-copy h1{font-size:clamp(27px,7.2vw,37px);line-height:1.55;letter-spacing:.07em;white-space:pre-line;text-shadow:0 2px 22px #cbb78a15}
.intro-copy p{color:#c3afb1;font-size:12px;letter-spacing:.04em;margin-top:15px}
.intro>.subtle{font-size:10px;letter-spacing:.04em}
.cake-scene{padding-top:calc(84px + env(safe-area-inset-top))}
.cake-scene .scene-kicker{margin-bottom:9px}
.cake-scene h2{font-size:clamp(23px,6.2vw,31px)}
.cake-stage{position:relative;width:100%;max-width:420px;aspect-ratio:420/360;margin:4px auto 0;isolation:isolate}
.cake-aura{position:absolute;z-index:-1;inset:4% -3%;background:radial-gradient(ellipse at 50% 58%,#d19e7230,#694e6e0c 54%,transparent 72%)}
.cake-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 11px 18px #0006)}
.candle-row{position:absolute;left:50%;transform:translateX(-50%);width:220px;max-width:88%;top:11%;height:29%;display:flex;justify-content:space-between;align-items:flex-end;z-index:4}
.candle{position:relative;width:44px;height:100%;min-height:65px;min-width:44px;padding:0;border:0;background:none;opacity:1!important}
.candle i{display:block;position:absolute;left:50%;pointer-events:none}
.wax{bottom:8px;width:8px;height:46px;transform:translateX(-50%);border-radius:3px 3px 1px 1px;background:repeating-linear-gradient(150deg,#e8c6bb 0 5px,#a86d84 5px 8px);box-shadow:inset -2px 0 2px #764c6b44}
.wick{bottom:53px;width:1.5px;height:6px;background:#473342}
.flame{bottom:57px;width:12px;height:23px;border-radius:55% 45% 45% 50%;background:radial-gradient(ellipse at 50% 75%,#fffdf1 15%,#fff0bf 42%,#efaf66 88%);box-shadow:0 0 11px 5px #eab97b50,0 0 25px #e8a16d44;transform:translateX(-50%);transform-origin:50% 90%;animation:flameSway 1.7s ease-in-out infinite alternate;transition:opacity .35s}
.candle:nth-child(2n) .flame{animation-delay:-.65s}
@keyframes flameSway{to{transform:translateX(-50%) rotate(6deg) scale(.92,1.04)}}
.candle.out .flame{opacity:0;animation:none}
.candle.out:after{content:"";position:absolute;bottom:57px;left:50%;width:3px;height:20px;border-radius:50%;background:#b5a4b650;filter:blur(2px);animation:smoke 1.2s both}
@keyframes smoke{to{transform:translate(8px,-22px) scale(3,1.6);opacity:0}}
.wish-progress{width:190px;margin:2px 0 0;font-size:11px;color:#d6b999}
.countdown-track{height:3px;background:#e6c49426;border-radius:3px;margin-top:11px;overflow:hidden}
.countdown-track i{display:block;width:0;height:100%;background:#e9c28f;transition:width .4s linear}
#readyWishBtn{margin-top:10px}
#candleHint{margin-top:17px;min-height:24px;max-width:330px;font-size:11px}
.blow-actions{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:330px;gap:11px;margin-top:12px}
.blow-actions .main-btn{flex-wrap:wrap;column-gap:9px;row-gap:0}
.blow-actions small{display:block;width:100%;font-size:10px;font-weight:400;color:#bdacac}
.blow-actions .secondary-btn{font-size:11px;border-color:#a88b744f;min-height:46px}
.mic-note{font-size:10px;margin-top:12px}
.boxes-scene{padding-top:calc(82px + env(safe-area-inset-top))}
.boxes-scene .scene-kicker{margin-bottom:10px}
.boxes-scene h2{font-size:clamp(29px,7.5vw,37px);letter-spacing:.1em}
.boxes-scene>.scene-desc{margin-top:9px;font-size:12px}
.box-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 0;width:100%;max-width:430px;position:relative;isolation:isolate;margin:25px auto 12px;padding-bottom:13px}
.box-grid:before{content:"";position:absolute;inset:5% 0;background:radial-gradient(ellipse,#c1937520,transparent 68%);z-index:-1}
.box-grid:after{content:"";position:absolute;left:1%;right:1%;bottom:1px;height:42px;border:1px solid #d9b47a54;border-radius:50%;box-shadow:0 0 24px #d2a46f10;z-index:-1}
.box-button{border:0;background:none;padding:0 4px;display:flex;flex-direction:column;align-items:center;min-width:0;position:relative;--box-color1:#354365;--box-color2:#151c38;--lid-color:#75627c;--lid-end:#263553;--box-glow:#b5a0ba22}
.box-button:nth-child(1){grid-column:3/span 2}
.box-button:nth-child(2){grid-column:2/span 2}
.box-button:nth-child(3){grid-column:4/span 2}
.box-button:nth-child(4){grid-column:1/span 2}
.box-button:nth-child(5){grid-column:3/span 2}
.box-button:nth-child(6){grid-column:5/span 2}
.box-button.pink{--box-color1:#d3a5ac;--box-color2:#956f8d;--lid-color:#eac5bc;--lid-end:#ac7c96;--box-glow:#dfacb22a}
.box-svg{width:100%;max-width:123px;display:block;overflow:visible;filter:drop-shadow(0 5px 9px #0005);transition:transform .25s}
.box-button:hover .box-svg{transform:translateY(-3px)}
.box-name{color:#dfc5a8;font-family:var(--serif);font-size:clamp(11px,3.1vw,14px);white-space:normal;line-height:1.7;margin-top:0;letter-spacing:.04em}
.box-status{color:#a89ab1;font-size:9px;line-height:1.6;min-height:15px;margin-top:3px}
.box-button[aria-disabled="true"] .box-status{color:#bc9b88}
.box-button.opened .box-status{color:#d9bc8c}
.box-button.opened .box-svg{filter:drop-shadow(0 3px 9px var(--box-glow))}
.box-progress{font-family:var(--serif);font-size:15px;letter-spacing:.12em;color:#e0bd91;margin-top:3px}
.box-progress:before,.box-progress:after{content:"✧";font-size:13px;margin:0 17px;color:#c7a16f}
.fine-rule{width:80%;max-width:300px;height:1px;background:linear-gradient(90deg,transparent,#c6a37588,transparent);margin-top:17px}
.boxes-scene>.subtle{font-size:10px;margin:12px 0 0}
.overview-actions{display:flex;justify-content:center;gap:14px;margin-top:18px}
.overview-actions .secondary-btn{font-size:11px;min-width:110px;min-height:44px;padding:10px 20px}
.box-opening .box-svg{animation:boxShake .35s both}
.box-opening .box-lid{animation:liftLid .6s .3s both;transform-origin:60px 55px}
.box-opening .box-ribbon{animation:ribbonLoosen .5s .25s both}
@keyframes boxShake{25%,75%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes liftLid{to{transform:translate(-4px,-29px) rotate(-12deg);opacity:0}}
@keyframes ribbonLoosen{to{opacity:0;transform:scaleX(.55)}}
dialog{color:var(--ink);border:1px solid #d5af7e55;background:#111d33;box-shadow:0 20px 70px #0009;padding:0}
dialog::backdrop{background:#030818b8;backdrop-filter:blur(6px)}
.small-dialog{width:min(355px,calc(100% - 36px));border-radius:21px;text-align:center;padding:29px 22px 25px;background:radial-gradient(ellipse at 50% 0%,#60475b45,transparent 80%),#121b32;max-height:85dvh;overflow:auto}
.small-dialog h2{font-size:24px;line-height:1.6}
.small-dialog p{font-size:12px;color:#c8b6b6;margin:12px 0 23px}
.small-dialog .dialog-star{color:#e4bc83;font-size:24px;margin:0 0 12px}
.dialog-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dialog-actions button{font-size:12px;min-width:116px;flex:1;padding:11px 12px}
.content-dialog{width:min(100%,620px);max-width:none;height:100%;height:100dvh;max-height:none;margin:0 auto;border-width:0 1px;inset:0;background:radial-gradient(ellipse at 15% 30%,#3c305143,transparent 60%),linear-gradient(#0b162b,#151228);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.content-wrap{min-height:100%;padding:calc(87px + env(safe-area-inset-top)) 24px calc(30px + env(safe-area-inset-bottom));position:relative;text-align:center}
.content-toolbar{position:absolute;left:16px;right:16px;top:calc(15px + env(safe-area-inset-top));display:flex;justify-content:flex-end;gap:7px}
.content-toolbar .mini-btn{font-size:10px;padding:8px 10px}
.content-close{margin-left:auto}
.content-wrap>.scene-kicker{font-size:11px;margin:3px 0 12px}
.content-wrap>h2{font-size:29px;line-height:1.6;letter-spacing:.06em}
#boxContent{margin-top:18px;width:100%}
.content-message{font-size:13px;line-height:2;white-space:pre-line;color:#d7bfc1;margin:20px auto;max-width:380px;overflow-wrap:anywhere}
.content-return{margin-top:23px;min-width:240px;font-size:12px}
.empty-box-art{width:240px;max-width:90%;margin:42px auto 24px;display:block;filter:drop-shadow(0 15px 15px #0007)}
.empty-message{animation:revealMessage .55s .7s both}
@keyframes revealMessage{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.fortune-slip{background:linear-gradient(135deg,#fae7c9,#e1c09c);color:#76515c;width:210px;max-width:100%;min-height:340px;margin:32px auto 28px;padding:34px 23px;border:1px solid #f7d9a6;outline:1px solid #a77d555a;outline-offset:-10px;box-shadow:0 15px 32px #0005;position:relative;animation:slipRise .65s both;transform:rotate(-3deg)}
.fortune-slip:before{content:"✦";font-size:28px;color:#b28b55;display:block;margin:4px 0 22px}
.fortune-slip strong{font:32px/1.6 var(--serif);letter-spacing:.12em;writing-mode:vertical-rl;display:inline-block;margin:0 auto 20px}
.fortune-slip p{font-size:12px;line-height:1.9}
@keyframes slipRise{from{opacity:0;transform:translateY(18px) rotate(-7deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}
.radio-card{border:1px solid #d2ab755c;border-radius:23px;padding:21px 19px;background:linear-gradient(140deg,#25304a,#10182e 55%,#352438);margin:22px auto 0;max-width:410px;box-shadow:inset 0 0 0 5px #b89c6610,0 17px 30px #0004}
.radio-top{display:flex;justify-content:space-between;align-items:center;font:11px Georgia,serif;letter-spacing:.12em;color:#c4a27c}
.radio-light{width:5px;height:5px;background:#8d7986;border-radius:50%;box-shadow:0 0 0 4px #cfaa7a0c}
.radio-card.is-playing .radio-light{background:#f2d49e;box-shadow:0 0 8px #d5ba88}
.record{width:180px;height:180px;max-width:70%;aspect-ratio:1;height:auto;margin:28px auto 21px;border-radius:50%;background:repeating-radial-gradient(circle,#171a29 0px,#171a29 2px,#333443 3px,#181d2c 4px);border:1px solid #786773;box-shadow:0 12px 22px #0006;display:grid;place-items:center;position:relative;animation:recordSpin 12s linear infinite;animation-play-state:paused}
.record:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent,#c3b59e25,transparent 28%,transparent 65%,#b9ad9a22,transparent);pointer-events:none}
.record-label{border:1px solid #c9a47388;border-radius:50%;width:62px;height:62px;display:grid;place-items:center;background:radial-gradient(#cead83,#8e6878);color:#2a2736;font:italic 16px Georgia,serif;box-shadow:0 0 0 5px #0003}
.radio-card.is-playing .record{animation-play-state:running}
@keyframes recordSpin{to{transform:rotate(360deg)}}
.wave{display:flex;justify-content:center;gap:4px;align-items:center;height:22px;margin:8px 0 14px}
.wave i{display:block;width:2px;height:5px;border-radius:2px;background:#c9ac83;animation:wavePulse .9s ease-in-out infinite alternate;animation-play-state:paused}
.wave i:nth-child(3n){height:14px;animation-delay:-.4s}.wave i:nth-child(2n){height:9px;animation-delay:-.7s}
.radio-card.is-playing .wave i{animation-play-state:running}
@keyframes wavePulse{to{transform:scaleY(.35)}}
.radio-demo{font-size:11px;color:#c6abb4;line-height:1.8;margin:0 0 10px}
.radio-card video{width:100%;height:auto;max-height:none;aspect-ratio:auto 7/4;background:#050b17;border-radius:9px;display:block;margin-top:16px;object-fit:contain}
.media-status{min-height:20px;color:#bea5b2;font-size:11px;margin:11px 0}
.media-progress{width:100%;accent-color:#dfb688;min-height:34px}
.media-times{display:flex;justify-content:space-between;font:10px Georgia,serif;color:#b8a2aa;margin:0 1px 10px}
.media-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.media-actions .main-btn{min-width:150px;min-height:45px;padding:10px 18px;font-size:12px}
.media-actions .mini-btn{font-size:10px}
.volume-label{display:flex;align-items:center;gap:10px;font-size:10px;color:#baa7ac;margin-top:14px;justify-content:center}
.volume-label input{accent-color:#d6ae82;width:50%;min-height:34px}
.radio-foot{font:italic 11px Georgia,serif;color:#a891a1;margin:13px 0 0;letter-spacing:.08em}
.lucky-ticket{border:1px solid #ca9e6b;border-radius:8px;position:relative;margin:33px auto 23px;padding:20px 18px;background:linear-gradient(110deg,#3f2f46,#25213a);max-width:345px;box-shadow:0 9px 20px #0004;animation:slipRise .6s both}
.lucky-ticket:before,.lucky-ticket:after{content:"";position:absolute;top:50%;width:16px;height:16px;background:#10172e;border-radius:50%;border:1px solid #c69b6a;transform:translateY(-50%)}
.lucky-ticket:before{left:-9px}.lucky-ticket:after{right:-9px}
.lucky-ticket small{font:10px Georgia,serif;letter-spacing:.18em;color:#c49b7c}
.lucky-ticket h3{font-size:20px;margin:9px 0 4px}
.gift-card{max-width:340px;margin:0 auto;border:1px solid #c4a07a40;border-radius:13px;padding:16px;background:#c1a4810a;animation:giftReveal .6s .4s both}
@keyframes giftReveal{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.gift-card img{width:100%;max-width:100%;height:auto;object-fit:contain;border-radius:5px;display:block;margin:auto}
.asset-placeholder{border:1px dashed #b89d7d55;border-radius:8px;padding:32px 17px;text-align:center;color:#bca3ae;font-size:12px;line-height:1.9;background:#0e162433}
.asset-placeholder svg{display:block;width:58px;height:80px;margin:0 auto 18px;opacity:.8}
.gift-card h3{font-size:18px;line-height:1.8;margin-top:17px}
.gift-card p{font-size:12px;color:#c9afb6;white-space:pre-line;margin-top:10px}
.poster-gallery{margin-top:22px}
.gallery-shell{display:flex;gap:4px;align-items:center;width:100%;min-width:0}
.gallery-arrow{background:none;border:0;font:30px Georgia,serif;width:44px;min-width:44px;height:52px;color:#d8b085;padding:0}
.poster-open{min-width:0;flex:1;border:0;background:none;padding:0;touch-action:pan-y pinch-zoom;display:flex;align-items:center;justify-content:center}
.poster-open img{display:block;max-width:100%;width:auto;height:auto;max-height:49dvh;object-fit:contain;border-radius:4px;border:3px solid #d5ba91;box-shadow:0 12px 23px #0005}
.poster-pager{font:12px Georgia,serif;color:#c3a9a6;margin-top:14px}
.poster-gallery .subtle{margin-top:9px;font-size:10px}
.poster-message{font-size:13px;line-height:2;white-space:pre-line;color:#dfc4ba;border-block:1px solid #b7977033;margin:23px auto 0;padding:18px 0;max-width:340px}
.letter-paper{position:relative;background:linear-gradient(130deg,#f6e7ce,#e5cbb0);color:#634854;border:1px solid #ead3ae;padding:30px 24px 27px;margin:27px auto 0;max-width:410px;text-align:left;box-shadow:0 16px 35px #0005;overflow-wrap:anywhere;animation:letterReveal .7s both}
.letter-paper:before{content:"";position:absolute;inset:9px;border:1px solid #a3785255;pointer-events:none}
.paper-heading{font:21px/1.6 var(--serif);margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #a37a5c44;position:relative}
.letter-body{white-space:pre-wrap;font:15px/2.15 var(--serif);min-height:175px;position:relative}
.letter-blank{font:12px/2 var(--sans);color:#947a75;background:repeating-linear-gradient(transparent 0 34px,#b28b6640 34px 35px);min-height:215px;padding-top:5px}
.letter-closing{font:14px/2 var(--serif);white-space:pre-line;text-align:right;margin:22px 0;position:relative}
.letter-final{font:16px/1.9 var(--serif);white-space:pre-line;border-top:1px solid #b78f6744;padding-top:21px;position:relative}
.paper-seal{font:26px Georgia,serif;width:42px;height:42px;display:grid;place-items:center;background:radial-gradient(#ba7c86,#8a4a64);color:#efd0ae;border:1px solid #c49d70;border-radius:50%;margin-top:23px;box-shadow:2px 3px 5px #79525c30;position:relative}
@keyframes letterReveal{from{opacity:0;transform:translateY(12px) scaleY(.97)}to{opacity:1;transform:translateY(0) scaleY(1)}}
.letter-ending{margin-top:22px}
.letter-ending p{font-size:13px;color:#e2bda1;margin:8px 0 20px}
.poster-dialog{position:fixed;width:100vw;max-width:none;height:100%;height:100dvh;max-height:none;inset:0;margin:0;border:0;background:#050a15f7;padding:calc(74px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));text-align:center}
.poster-dialog[open]{display:flex;flex-direction:column}
.poster-dialog>button{position:absolute;right:17px;top:calc(15px + env(safe-area-inset-top))}
.full-poster-scroll{flex:1;min-height:0;overflow:auto;display:flex;align-items:safe center;justify-content:center}
.full-poster-scroll img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.is-background *{animation-play-state:paused!important}
@media(min-width:760px){.intro-art{width:350px}.intro{padding-top:100px}.box-grid{max-width:430px;margin-top:28px;gap:14px 0}.box-svg{max-width:124px}.scene{padding-inline:45px}.content-wrap{padding-inline:42px}.cake-stage{max-width:390px}}
@media(max-width:380px){.scene{padding-left:18px;padding-right:18px}.intro-copy h1{font-size:28px}.content-wrap{padding-inline:18px}.box-name{font-size:11px;letter-spacing:0}.box-grid{gap:9px 0;margin-top:20px}.box-status{font-size:9px}.cake-stage{margin-top:5px}.scene h2{font-size:27px}.box-progress{font-size:14px}.box-progress:before,.box-progress:after{margin-inline:12px}}
@media(max-height:720px){.intro{justify-content:flex-start}.intro-art{width:min(84%,290px);margin:4px 0 8px}.intro-copy{margin-bottom:21px}.intro .scene-kicker{margin-bottom:3px}.intro-copy h1{font-size:27px}.intro-copy p{margin-top:10px}.intro>.subtle{margin-top:14px}.cake-stage{max-width:315px}.cake-scene>.scene-desc{margin-top:8px}.cake-scene .scene-kicker{font-size:10px}.boxes-scene{padding-top:76px}.boxes-scene .scene-kicker{font-size:10px}.box-grid{max-width:325px;gap:5px 0;margin-top:18px}.box-progress{margin-top:0}.overview-actions{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#effects{display:none}}

/* V4: larger four-tier cake, grounded SVG candles, true blind covers and local copy editor. */
.cake-stage{max-width:480px;aspect-ratio:480/530;margin:10px auto 2px}
.cake-scene{padding-inline:16px}
.cake-svg .candle{cursor:pointer;opacity:1!important;outline:none}
.cake-svg .candle:focus-visible{filter:drop-shadow(0 0 3px #fff4cb)}
.candle-fire{transform-box:fill-box;transform-origin:50% 100%;animation:svgFire 1.5s ease-in-out infinite alternate;transition:opacity .3s,transform .3s}
.candle:nth-child(2n) .candle-fire{animation-delay:-.7s}
@keyframes svgFire{to{transform:rotate(5deg) scale(.94,1.05)}}
.candle.out .candle-fire{opacity:0;animation:none;transform:scale(.15)}
.cake-svg .candle.out:after{display:none}
#beginWishBtn{margin:14px 0 4px;min-width:230px}
.wish-progress{margin-top:15px}
.mic-feedback{border:1px solid #cba67744;border-radius:13px;background:#0d192c;padding:13px 15px;text-align:left}
.mic-feedback p{font-size:10px;line-height:1.8;color:#cbb5b8}
.mic-feedback #micDeviceName{margin-top:6px;font-size:9px;color:#9fa5bd;overflow-wrap:anywhere}
.mic-meter{height:8px;margin-top:9px;border-radius:5px;background:#56617a50;position:relative;overflow:hidden}
.mic-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#8a9da9,#ebc98c);transition:width .08s}
.mic-meter b{position:absolute;left:50%;top:0;height:100%;width:1px;background:#fff3d9aa}
.mic-help{max-width:330px;width:100%;margin:15px 0 0;text-align:left;color:#b9a9b6;font-size:10px}
.mic-help summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:underline;text-underline-offset:4px;color:#d3bba0}
.mic-help p{padding:4px 6px;line-height:1.9}
.box-button.opened .box-svg{filter:grayscale(1) brightness(.65);opacity:.66}
.box-button.opened .box-name{color:#9e9aab}
.box-button.opened .box-status{color:#c6c2ce}
.box-button.next-hint:not(.opened) .box-svg{animation:nextNudge 1.1s .15s ease-in-out 2}
@keyframes nextNudge{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) translateY(-2px)}65%{transform:rotate(4deg) translateY(-2px)}}
.box-status{font-size:10px}
.letter-reaction{margin:28px auto 0;max-width:410px;padding:23px 17px;border:1px solid #c4a1714d;border-radius:17px;background:#29304459;position:relative}
.reaction-question{font:17px/1.9 var(--serif);color:#ebd0ae;margin-bottom:19px;white-space:pre-line}
.reaction-actions{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.reaction-actions button{min-width:0;width:100%;min-height:48px;font-size:13px}
.dislike-btn,.dislike-btn.was-clicked{background:#55566628;border-color:#aaa4ad44;color:#a09aa8;box-shadow:none}
.reaction-note{font:22px/1.8 var(--serif);color:#f3cd97;margin-top:14px;min-height:40px}
.reaction-sparkles{color:#e6be85;font-size:24px;letter-spacing:12px;opacity:0;pointer-events:none;position:absolute;inset:14px 0 auto;text-align:center}
.is-liked .reaction-sparkles{animation:reactionStars 1.8s both}
@keyframes reactionStars{0%{opacity:0;transform:translateY(10px) scale(.7)}30%{opacity:1;transform:translateY(-22px) scale(1.1)}100%{opacity:0;transform:translateY(-45px) scale(1.2)}}
.content-dialog>#effects{z-index:1000;position:fixed;pointer-events:none}
.toast{pointer-events:none}
.copy-editor{width:100%;max-width:480px;margin:28px auto 3px;text-align:left;border:1px dashed #a994774f;border-radius:13px;background:#0b182a90;flex-shrink:0}
.copy-editor>summary{min-height:46px;padding:12px 16px;cursor:pointer;font-size:12px;color:#d1b591;list-style-position:inside}
.copy-editor[open]>summary{border-bottom:1px solid #a9947733}
.editor-fields{padding:16px}
.editor-help{font-size:10px;line-height:1.8;color:#a9a4b5;margin-bottom:18px}
.editor-field{display:block;margin:13px 0}
.editor-field>span{display:block;font-size:11px;color:#d9c5ad;margin-bottom:8px}
.editor-field textarea,.editor-field input{display:block;box-sizing:border-box;width:100%;max-width:100%;border:1px solid #9b8b7959;border-radius:7px;background:#101f34;color:#f5dfc4;padding:11px;font:13px/1.8 var(--sans);min-height:44px;resize:vertical}
.editor-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.editor-actions button{flex:1;min-width:120px;font-size:11px;min-height:44px;padding:10px 12px}
.editor-status{font-size:10px;color:#bfb7ab;line-height:1.8;margin-top:14px}
@media(min-width:760px){.cake-stage{max-width:480px}.cake-scene{padding-inline:24px}}
@media(max-height:720px){.cake-stage{max-width:440px}.cake-scene{padding-top:80px}}
@media(prefers-reduced-motion:reduce){.is-liked .reaction-sparkles{opacity:.7;position:static;letter-spacing:10px;font-size:18px;margin-top:10px}}