:root{--gold:#f0c77b;--cream:#fff3d8;--brown:#4f2b18;--fade:700ms;--card-w:min(100vw,calc(100svh * 2 / 3))}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{display:grid;place-items:center;background:#160d08;font-family:Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased}.stage{position:relative;width:var(--card-w);height:min(100svh,150vw);max-height:100svh;overflow:hidden;background:#25140c;box-shadow:0 0 60px #0008;isolation:isolate}.scene{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;overflow:hidden;background:#21130d;color:var(--cream);opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.012);transition:opacity var(--fade) ease,transform 1s ease,visibility 0s linear var(--fade)}.scene.active{z-index:2;opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);transition-delay:0s}.scene img,.scene video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}.scene video{z-index:1}.fallback{z-index:0}.hint{position:absolute;z-index:3;left:12%;right:12%;bottom:max(8%,calc(env(safe-area-inset-bottom) + 24px));padding:.65rem 1rem;border:1px solid #f5d5934a;border-radius:999px;background:#2b160b99;box-shadow:0 8px 28px #0005;color:var(--cream);font-size:clamp(.86rem,3.5vw,1.05rem);letter-spacing:.05em;text-align:center;text-shadow:0 1px 8px #000;backdrop-filter:blur(7px);animation:breathe 2.4s ease-in-out infinite}.opening-hint{bottom:13%;background:#421b12b8}.message-notice{display:grid;place-content:center;justify-items:center;gap:1.3rem;background:radial-gradient(circle at 50% 44%,#9a5d2f,#3b1d10 56%,#170c08);text-align:center}.message-notice:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#ffd79212 50%,transparent 80%);animation:shimmer 4s linear infinite}.notice-glow{position:absolute;width:55%;aspect-ratio:1;border-radius:50%;background:#f8c97933;filter:blur(30px)}.envelope{position:relative!important;inset:auto!important;width:clamp(92px,28vw,132px)!important;height:auto!important;filter:drop-shadow(0 12px 20px #0006);animation:float 3s ease-in-out infinite}.notice-title{position:relative;max-width:80%;font-size:clamp(1.4rem,6vw,2.05rem);line-height:1.25;color:#ffe8b8;text-shadow:0 2px 18px #0008}.notice-hint{position:relative;inset:auto;margin-top:.2rem;width:min(70vw,260px)}.message-scene{background:#d49750}.letter{position:absolute;z-index:2;left:17%;right:17%;top:43%;bottom:8%;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;color:var(--brown);font-size:clamp(16px,4.4vw,23px);line-height:1.48;text-align:left;overflow-wrap:anywhere}.letter p{margin:0}.dear{flex:none;margin-bottom:1em!important;font-size:1.12em}.message{white-space:pre-wrap}.signoff{flex:none;margin-top:auto;padding-top:.8em}.signoff p:last-child{margin-top:.18em;font-size:1.08em;font-style:italic}.loading{position:fixed;z-index:20;inset:0;display:grid;place-items:center;background:#1c0f0ad9}.loading[hidden]{display:none}.loading span:first-child{width:32px;height:32px;border:2px solid #f3cd8550;border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid var(--gold);outline-offset:-5px}@keyframes breathe{50%{opacity:.68;transform:translateY(3px)}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes shimmer{to{transform:translateX(100%)}}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.scene,.hint,.envelope,.message-notice:before{transition-duration:.01ms;animation:none}}@media(min-aspect-ratio:2/3){.stage{border-radius:8px}}