:root{color-scheme:dark;--gold:#d6b778;--cream:#f4e6cd;--muted:#b5ad9f;--ink:#24312e;--paper:#eddfbf;--serif:'Songti SC','STSong','Noto Serif SC',serif}*{box-sizing:border-box}body{margin:0;background:#151c21;color:var(--cream);font-family:var(--serif);min-height:100svh}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}[hidden]{display:none!important}.atmosphere,.vignette,#stars,#sparks{position:fixed;inset:0;pointer-events:none}.atmosphere{background:linear-gradient(90deg,#101b23f5,#101b23a0 60%,#18232b88),url('assets/hall-atmosphere.jpg') center/cover;filter:saturate(.65);opacity:.68;transition:opacity 1s}.vignette{background:radial-gradient(ellipse at 68% 45%,transparent 10%,#0c12195c 85%)}#stars i{position:absolute;width:2px;height:2px;background:#f4dca6;border-radius:50%;box-shadow:0 0 8px #f4dca6;animation:drift var(--speed) ease-in-out infinite alternate;opacity:var(--alpha)}header{position:relative;z-index:10;padding:30px 4.3vw;display:flex;align-items:center;justify-content:space-between}header button{background:none;border:0;color:var(--gold)}.wordmark{display:flex;align-items:center;gap:12px;font-size:25px}.wordmark span{font-size:14px;letter-spacing:3px;text-align:left}.wordmark small{display:block;font:8px/2.5 system-ui;letter-spacing:3px;color:var(--muted)}nav{display:flex;gap:22px;align-items:center}nav button{font:22px system-ui}nav span{font-size:11px;letter-spacing:1px;margin-left:6px;color:var(--muted)}main{position:relative;z-index:2}.stage{min-height:calc(100svh - 172px);max-width:1240px;margin:auto;padding:30px 65px 55px;display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:center;animation:arrive .9s both}.eyebrow{font:10px/1.6 system-ui;letter-spacing:3px;color:var(--gold);margin:0 0 24px}h1,h2{font-size:clamp(36px,4.4vw,66px);font-weight:400;letter-spacing:2px;line-height:1.5;margin:0 0 22px}em{font-style:normal;color:var(--gold)}.lede{font-size:17px;line-height:2;color:#e4dcca;letter-spacing:1px}.aside{font-size:13px;line-height:2.1;color:var(--muted);letter-spacing:1px}.fine-rule{height:1px;background:linear-gradient(90deg,#d6b77866,transparent);width:180px;margin:30px 0}.post{position:relative;padding:45px 0;text-align:center;perspective:1000px}.orbit{position:absolute;width:400px;height:400px;border:1px solid #d6b77824;border-radius:50%;inset:50% auto auto 50%;transform:translate(-50%,-50%) rotate(-20deg)}.orbit:before{content:'';position:absolute;inset:20px;border:1px dashed #d6b77817;border-radius:50%}.orbit span{position:absolute;top:40px;right:38px;color:var(--gold);font-size:25px}.envelope{position:relative;width:min(100%,390px);height:248px;border:1px solid #b9a077;background:linear-gradient(145deg,#e7d8b6,#c9b990);box-shadow:0 25px 55px #0005;transform:rotate(-5deg);transition:transform .7s,filter .7s;overflow:hidden;color:#544838}.envelope:hover{transform:rotate(-2deg) translateY(-10px);filter:brightness(1.06)}.envelope-top{position:absolute;inset:0;background:#e4d6b3;clip-path:polygon(0 0,100% 0,50% 58%);filter:drop-shadow(0 2px 1px #5a44354a)}.envelope-bottom{position:absolute;inset:0;pointer-events:none;background:#d9c8a5;clip-path:polygon(0 100%,0 38%,50% 79%,100% 38%,100% 100%)}.wax{position:absolute;z-index:2;left:50%;top:58%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#a13d39,#642826);width:63px;height:63px;border-radius:48% 52% 50% 47%;display:grid;place-items:center;font-size:27px;color:#d5ad79;border:3px double #c77e6480;box-shadow:0 3px 5px #3a1a1a66,inset 0 0 7px #3b1414}.postmark{position:absolute;z-index:1;top:20px;right:20px;border:1px solid #7b694975;border-radius:50%;padding:12px 6px;font:8px/1.8 system-ui;letter-spacing:1px;transform:rotate(13deg)}.address{position:absolute;z-index:2;left:30px;bottom:24px;font-size:11px;letter-spacing:2px}.hint{position:relative;font-size:11px;letter-spacing:2px;color:var(--muted);margin:35px 0 0}.hint span{color:var(--gold);margin-left:15px}.parchment{position:relative;background:var(--paper);color:#4c4737;padding:38px 40px 28px;box-shadow:0 25px 85px #0005;border:1px solid #cab88c;transform:rotate(1deg);background-image:radial-gradient(#8e764814 .8px,transparent .8px);background-size:5px 5px}.paper-border{position:absolute;inset:13px;border:1px solid #9d835c50;pointer-events:none}.paper-star{display:block;font-size:24px;color:#9c7944;margin-bottom:14px}.parchment .eyebrow{color:#8c714c;font-size:9px;margin-bottom:18px}.parchment h3{font-size:24px;font-weight:400;margin:0 0 15px}.parchment p{font-size:14px;line-height:1.9}.parchment small{display:block;font:10px/1.7 system-ui;color:#8b7a61;text-align:center;margin-top:12px}fieldset{border:0;padding:0;margin:24px 0 0}legend{font-size:11px;color:#77684f;margin-bottom:12px}.charms{display:flex;gap:10px}.charms button{width:33.3%;padding:10px 0;background:transparent;border:1px solid #9e885455;color:#786340;font-size:12px}.charms b{display:block;font-size:23px;font-weight:400;margin-bottom:5px}.charms button[aria-pressed=true]{background:#314339;color:#f5e3b7;border-color:#314339}.charm-note{font-size:11px!important;color:#8a7452;min-height:21px}.primary{background:#304437;color:#fff0c8;border:1px solid #304437;padding:13px 20px;letter-spacing:1px;width:100%;font-size:13px;transition:background .2s,transform .2s}.primary:hover:not(:disabled){background:#465743;transform:translateY(-2px)}footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 4.3vw 25px;font-size:10px;letter-spacing:2px;color:#a9a194}.text-button{background:none;border:0;color:inherit;font-size:11px;padding:10px 0;letter-spacing:1px}.text-button:hover{color:var(--gold)}.screening{display:block;max-width:1360px;padding-top:0}#filmFrame{position:relative;box-shadow:0 20px 80px #0008;background:#000;aspect-ratio:16/9}#film{width:100%;height:100%;display:block;object-fit:contain}.player-bar{position:absolute;left:20px;right:20px;bottom:10px;display:flex;align-items:center;gap:12px;opacity:.15;transition:opacity .3s}.player-bar:hover,.player-bar:focus-within{opacity:1}.player-bar button{background:#131c23c0;color:#eee2c9;border:0;width:30px;height:30px;border-radius:50%}.player-bar span{font:10px system-ui}.player-bar input{accent-color:var(--gold);flex:1;height:3px}.screening-note{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#999487;margin:15px 0}body[data-stage=screening] .atmosphere{opacity:.1}body[data-stage=screening] header,body[data-stage=screening] footer{opacity:.25;transition:opacity .3s}body[data-stage=screening] header:hover{opacity:1}.celebration{gap:100px}.birthday-copy{text-align:center}.birthday-copy h2{font-size:48px}.birthday-copy .lede{font-size:14px}.cake{position:relative;width:260px;height:178px;margin:35px auto 0}#candles{position:absolute;z-index:2;left:34px;right:34px;top:0;height:83px;display:flex;align-items:flex-end;justify-content:space-around}.candle{position:relative;display:block;width:14px;height:53px;background:repeating-linear-gradient(120deg,#ead7b0 0 9px,#cfac77 10px 15px);border:0;border-radius:3px 3px 0 0;padding:0;box-shadow:inset -3px 0 4px #906b5140}.candle:before{content:'';position:absolute;top:-6px;left:6px;width:2px;height:7px;background:#3b3030}.flame{position:absolute;bottom:calc(100% + 5px);left:-2px;width:18px;height:29px;border-radius:70% 30% 70% 30%;transform:rotate(-40deg);background:radial-gradient(ellipse at 50% 75%,#fff5c7 10%,#f3c16b 50%,#c87b37);box-shadow:0 0 20px #edb85c,0 0 60px #f5bf5a66;animation:flicker 1.8s infinite alternate;transform-origin:50% 100%;transition:opacity .4s}.candle:nth-child(2n) .flame{animation-delay:-.8s}.candle.out .flame{opacity:0;animation:none}.candle.out:after{content:'';position:absolute;bottom:100%;left:6px;width:15px;height:25px;border-radius:50%;background:#c9c9b72a;filter:blur(4px);animation:smoke 1.3s forwards}.icing{position:absolute;z-index:3;top:76px;width:260px;height:32px;border-radius:50%;background:#f1d9c6;border:2px solid #c7988b}.cake-body{position:absolute;top:91px;height:69px;width:260px;background:linear-gradient(90deg,#a76f73,#d0a29b,#ac7978);border-radius:0 0 50% 50%/0 0 20% 20%;border-bottom:5px solid #885d66}.cake-body span{color:#f0d3a3;font-size:25px;position:absolute;left:45%;top:13px}.cake-plate{position:absolute;bottom:4px;width:286px;left:-13px;height:20px;border-radius:50%;border:2px solid #ad8b54;background:#866c42;box-shadow:0 14px 22px #0005}.keepsake{transform:rotate(-1deg)}.keepsake input{width:100%;background:transparent;border:0;border-bottom:1px solid #9e885475;color:#4c4737;padding:12px 0;font-size:14px;outline:none;border-radius:0}.keepsake input::placeholder{color:#99836a;font-size:11px}.keepsake form label{font-size:11px;display:block;margin-top:25px}.keepsake form .primary{margin-top:20px}.end-actions{display:flex;justify-content:center;gap:24px;border-top:1px solid #9e885433;margin-top:25px;padding-top:12px}.stamp{display:inline-block;border:2px solid #98604f;color:#98604f;padding:7px 14px;transform:rotate(-8deg);font-size:15px;letter-spacing:2px;margin:15px 0}.keepsake #savedWish{font-size:20px;overflow-wrap:anywhere;line-height:1.8;margin:15px 0}.privacy-note{font-size:9px!important}.spark{position:fixed;background:var(--gold);width:4px;height:4px;border-radius:50%;animation:burst .9s forwards}#toast{position:fixed;z-index:30;bottom:30px;left:50%;transform:translateX(-50%);background:#25372ff2;color:#f6e5c3;padding:12px 20px;border:1px solid #a28a53;font-size:12px;opacity:0;pointer-events:none;transition:opacity .3s}dialog{background:#ece0c3;color:#4c4737;border:1px solid #b39b71;max-width:480px;padding:40px;box-shadow:0 20px 70px #0008}dialog::backdrop{background:#101b23c9;backdrop-filter:blur(5px)}dialog p{font-size:13px;line-height:1.9}dialog h3{font-weight:400}dialog a{color:inherit}#creditsClose{position:absolute;top:12px;right:15px;background:none;border:0;color:#665741;font-size:25px}#loadingError{position:fixed;z-index:40;bottom:50px;width:100%;text-align:center;color:#f6cfaa;background:#301c18c9;padding:15px}.opening-letter .envelope{transform:rotate(0deg) scale(1.08);opacity:0;transition:transform .65s,opacity .65s}body[data-stage=celebration] .atmosphere{opacity:.4}@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{to{transform:translate(9px,-20px);opacity:.2}}@keyframes flicker{to{transform:rotate(-36deg) scale(.85,1.08)}}@keyframes smoke{to{transform:translate(12px,-36px);opacity:0}}@keyframes burst{to{transform:translate(var(--dx),var(--dy));opacity:0}}
@media(max-width:850px){header{padding:23px}.stage{gap:35px;padding:25px 30px 45px}.hero-copy h1,.hero-copy h2{font-size:38px}.parchment{padding:30px 26px}.orbit{width:300px;height:300px}.celebration{gap:30px}.birthday-copy h2{font-size:38px}footer{padding:15px 23px}.wordmark span{font-size:12px}}@media(max-width:600px){header{padding:20px 22px}nav span{display:none}.stage{grid-template-columns:1fr;padding:18px 28px 38px;gap:18px;min-height:calc(100svh - 150px)}.hero-copy{text-align:center}.hero-copy h1,.hero-copy h2{font-size:34px;line-height:1.5;margin-bottom:12px}.eyebrow{font-size:8px;margin-bottom:15px}.lede{font-size:14px;line-height:1.9}.fine-rule{margin:20px auto;width:140px}.aside{font-size:11px}.post{padding:25px 10px 5px}.envelope{width:300px;height:192px}.orbit{width:280px;height:280px}.hint{margin-top:25px;font-size:10px}.wax{width:52px;height:52px}.address{font-size:9px;left:20px;bottom:17px}.postmark{font-size:6px;top:13px;right:12px}.invitation .hero-copy .aside{display:none}.invitation .hero-copy h2{font-size:29px;line-height:1.4}.invitation .hero-copy h2 br{display:none}.invitation .hero-copy .lede{font-size:12px}.parchment{max-width:380px;margin:auto;width:100%;padding:27px}.parchment h3{font-size:21px}.parchment p{font-size:13px}.screening{padding:30px 0;min-height:calc(100svh - 140px);display:flex;justify-content:center;flex-direction:column}.screening-note{padding:0 18px;font-size:8px}.player-bar{left:10px;right:10px;bottom:-35px;opacity:.6}.celebration{gap:28px}.birthday-copy h2{font-size:32px}.birthday-copy .lede{font-size:12px}.cake{margin-top:15px;transform:scale(.85);margin-bottom:-20px}footer{font-size:8px;letter-spacing:1px}footer>span{max-width:190px;line-height:1.8}.celebration .eyebrow{margin-bottom:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* A single continuous ritual: letter, screening, candlelight, first mark. */
#curtain{position:fixed;inset:0;z-index:25;background:radial-gradient(ellipse at 50% 60%,#26382c,#10161c 75%);display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s,visibility .65s}#curtain span{font-size:14px;letter-spacing:5px;color:#dac49a;transform:translateY(8px);transition:transform .65s}.curtain-down #curtain{opacity:1;visibility:visible}.curtain-down #curtain span{transform:translateY(0)}
.ink-ritual{margin:24px 0 10px;border-top:1px solid #9e885430;padding-top:15px}.ink-label{font:8px/1.8 system-ui;letter-spacing:2px;color:#9b825c}#firstStroke{display:block;width:100%;height:84px;cursor:crosshair;touch-action:none;overflow:visible;outline-offset:2px;background:radial-gradient(ellipse at center,#fff8e822,transparent)}.ink-guide{stroke:#99825c40;stroke-width:.6;stroke-dasharray:2 5}.ink-path{fill:none;stroke:#354735;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.ink-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}.ink-actions span{font-size:10px;color:#8c795e}.ink-actions button{border:0;background:none;color:#53624a;font-size:10px;white-space:nowrap;padding:5px 0}.ink-ritual.has-mark .ink-label{color:#526b46}.celebration .keepsake{animation:paper-settle 1.4s both}.celebration .cake{animation:cake-welcome 1.1s both}.owl-shadow{position:absolute;left:18px;top:21px;font-size:30px;color:#7a685633;transform:rotate(8deg)}
body[data-stage=screening] .stage{animation:screening-enter .9s both}.player-bar{bottom:12px;background:linear-gradient(transparent,#08101465);padding:12px 0 0;opacity:0}.player-bar:hover,.player-bar:focus-within,#filmFrame:focus-within .player-bar{opacity:.9}.screening-note{opacity:.65}
@keyframes paper-settle{from{opacity:0;transform:translateY(12px) rotate(-2deg)}to{opacity:1;transform:translateY(0) rotate(-1deg)}}@keyframes cake-welcome{from{opacity:0;filter:brightness(.65)}to{opacity:1;filter:brightness(1)}}@keyframes screening-enter{from{opacity:0;filter:brightness(.7)}to{opacity:1;filter:brightness(1)}}
@media(max-width:600px){.ink-ritual{margin-top:18px}.ink-actions span{font-size:9px}.player-bar{bottom:-35px;opacity:.6;background:none;padding:0}#curtain span{font-size:12px;letter-spacing:3px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Video ancestors use opacity only: avoid filtered WebKit video layers. */
@keyframes screening-enter{from{opacity:0}to{opacity:1}}
.play-overlay{position:absolute;inset:0;margin:auto;width:86px;height:86px;border:1px solid #d5bb7959;border-radius:50%;background:#15231dcc;color:#e6d3a7;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer}.play-overlay span{font-size:22px}.play-overlay small{font-size:10px;letter-spacing:2px}.film-paused .play-overlay{display:flex}#bufferNote{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-size:12px;color:#f6e3bb;display:none;pointer-events:none}.buffering #bufferNote{display:block}

/* Candlelight opens into a warmer new chapter; never filter the video itself. */
body[data-stage=celebration]{background:#202722;transition:background 1.6s}
body[data-stage=celebration] .atmosphere{opacity:.68;background-image:radial-gradient(ellipse at 30% 48%,#c99a3838,transparent 58%),linear-gradient(90deg,#192623e8,#293323b0),url('assets/hall-atmosphere.jpg');filter:saturate(.85)}
body.wish-released .atmosphere{opacity:.9}
body.wish-released .birthday-copy h2 em{color:#f3d58f;text-shadow:0 0 35px #d9ac4d40;transition:color 1.2s,text-shadow 1.2s}
.birthday-music{display:grid;grid-template-columns:auto 1fr;gap:0 9px;max-width:320px;margin:18px auto 0;text-align:left;border-top:1px solid #d6b77824;padding:16px 12px 0}
.birthday-music p{font-size:10px;color:#c9b995;letter-spacing:.7px;line-height:1.8;margin:0}
.birthday-music button{grid-column:2;text-align:left;color:#dfc789;font-size:10px;padding:6px 0}
.music-bars{height:15px;display:flex;gap:3px;align-items:center;margin-top:2px}
.music-bars i{width:2px;height:5px;background:#d6b778;border-radius:2px}
.birthday-playing .music-bars i{animation:music-pulse .9s ease-in-out infinite alternate}
.music-bars i:nth-child(2){animation-delay:-.45s}.music-bars i:nth-child(3){animation-delay:-.2s}.music-bars i:nth-child(4){animation-delay:-.65s}
.wish-star{position:fixed;color:#edd7a1;font:19px Georgia;animation:wish-rise 2.6s cubic-bezier(.15,.6,.28,1) both;pointer-events:none;text-shadow:0 0 12px #e2ba66}
@keyframes music-pulse{to{height:15px;opacity:.5}}
@keyframes wish-rise{0%{opacity:0;transform:translate(0,0) scale(.3)}15%{opacity:1}80%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.6)}}
@media(max-width:600px){.birthday-music{margin-top:12px;max-width:290px}.birthday-copy .eyebrow{letter-spacing:2px}.celebration .keepsake{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.wish-star{display:none}.music-bars i{animation:none!important}body[data-stage=celebration],body.wish-released .birthday-copy h2 em{transition:none}}

.keepsake textarea{width:100%;resize:vertical;min-height:112px;max-height:220px;background:#fff8e52e;border:1px solid #9e88544a;border-radius:2px;color:#4c4737;padding:14px 15px;margin-top:12px;font:15px/1.9 var(--serif);letter-spacing:.4px;outline-offset:4px}
.keepsake textarea::placeholder{color:#98846a;font-size:12px}
.keepsake textarea:focus-visible{outline:1px solid #8c754b;background:#fff8e54a}
.wish-count{display:block;text-align:right;font:10px/1.8 system-ui;color:#97846b;margin-top:5px}
.keepsake form .primary{margin-top:14px}
@media(max-width:600px){.keepsake textarea{font-size:16px;min-height:110px}}

#loadingError a{color:var(--cream);display:inline-block;margin-top:8px;font-size:12px;text-underline-offset:4px}