/* Quiet letter, then an uninterrupted night sky. */
.letter-layout{display:block;max-width:680px;margin:auto;padding-top:60px}
.paper-bottom{justify-content:flex-end}.cover{padding-bottom:90px}
.closing{min-height:360px;padding:80px 24px 90px}
.closing h2{font-size:30px;line-height:1.9;letter-spacing:2px;margin:0 0 24px}
.watch-fireworks{display:inline-flex;gap:35px;align-items:center;min-height:48px;padding:12px 1px;border:0;border-bottom:1px solid #ad9871;background:transparent;color:var(--gold);font-size:13px;letter-spacing:1px;cursor:pointer}
.watch-fireworks span{font-size:24px}
.fireworks-dialog{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#08121e;color:#eee4d1;overflow:hidden}
.fireworks-dialog::backdrop{background:#08121e}
.fireworks-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:manipulation}
.sky-controls{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(20px + env(safe-area-inset-top)) 28px 0;pointer-events:none}
.sky-controls button{pointer-events:auto;min-width:60px;min-height:44px;padding:8px 12px;background:#08121e66;border:1px solid #cbb89730;border-radius:2px;color:#d4d2ca;font-size:12px;cursor:pointer;letter-spacing:1px}
.close-fireworks span{margin-left:15px;font-size:20px;vertical-align:-1px}
.fireworks-dialog button:focus-visible{outline:1px solid #d0b687;outline-offset:4px}
#fireworks-caption{position:absolute;left:24px;right:24px;bottom:calc(7% + env(safe-area-inset-bottom));margin:0;text-align:center;font-family:var(--serif);font-size:22px;line-height:1.9;letter-spacing:3px;text-shadow:0 2px 18px #000;pointer-events:none}
@media(max-width:620px){.letter-layout{padding-top:24px}.closing{min-height:310px;padding-top:65px;padding-bottom:65px}.closing h2{font-size:25px;letter-spacing:1px}.sky-controls{padding-left:16px;padding-right:16px}#fireworks-caption{font-size:17px;letter-spacing:1px;left:15px;right:15px;bottom:calc(9% + env(safe-area-inset-bottom))}}
@media print{.fireworks-dialog{display:none!important}}
.birthday-reveal{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:45px;padding:24px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity 2.8s ease,transform 2.8s ease,visibility 2.8s;pointer-events:none}
.birthday-reveal.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.birthday-reveal #fireworks-caption{position:static;margin:0;font-size:clamp(28px,4.5vw,64px);line-height:1.8;letter-spacing:5px;color:#ffe8b7;text-shadow:0 0 32px #e2b45d40;text-wrap:balance}
.replay-fireworks{background:transparent;color:#c8c9ce;border:0;border-bottom:1px solid #c8c9ce50;padding:12px 8px;min-height:44px;font-size:12px;letter-spacing:2px;cursor:pointer}
.sky-controls{z-index:2}.sky-controls button[hidden]{display:none}
@media(max-width:620px){.birthday-reveal{gap:32px;padding:20px}.birthday-reveal #fireworks-caption{font-size:29px;letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){.birthday-reveal{transform:none;transition:opacity 1.5s ease,visibility 1.5s}}
.birthday-reveal{transition-duration:1.6s}
@media(min-width:621px) and (max-width:900px){.cover h1{font-size:clamp(42px,6.25vw,58px);letter-spacing:3px}}
@media(max-width:380px){.cover h1{font-size:46px;letter-spacing:2px}}