:root{color:#eee7db;font-synthesis:none;--gold:#d8b780;--muted:#8c8984;background:#08090c;font-family:DM Sans,sans-serif;font-weight:400}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button:disabled{cursor:default}#app{isolation:isolate;width:100%;height:100svh;min-height:360px;position:relative}#scene{z-index:-2;width:100%;height:100%;position:absolute;inset:0}.vignette{pointer-events:none;z-index:-1;background:radial-gradient(at 50% 55%,#0000 30%,#08090c70 100%);position:absolute;inset:0}.sound{width:39px;height:39px;color:var(--gold);background:0 0;border:1px solid #c5b18c26;border-radius:50%;place-items:center;display:grid;position:absolute;top:26px;right:38px}.sound svg{width:16px;height:16px}main{pointer-events:none;grid-template-rows:auto minmax(0,1fr) auto;gap:24px;width:min(960px,100% - 48px);height:min(700px,100% - 80px);display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.scene-slot{min-height:0;position:relative}.hero{text-align:center;pointer-events:none;width:100%}.eyebrow{color:var(--gold);letter-spacing:3.8px;text-transform:uppercase;justify-content:center;align-items:center;gap:16px;font-size:10px;display:flex}.eyebrow:before,.eyebrow:after{content:"";background:linear-gradient(90deg,#0000,#d8b78070);width:34px;height:1px}.eyebrow:after{transform:rotate(180deg)}h1{letter-spacing:-2px;margin:0;font-family:Cormorant Garamond,serif;font-size:clamp(46px,5.7vw,84px);font-weight:400;line-height:.99}h1 em{color:#e2bc80;font-size:1.13em;font-weight:400;line-height:1.13;display:block}.stage-copy{text-align:center;pointer-events:none;width:100%}.stage-copy h2{margin:0 0 9px;font-family:Cormorant Garamond,serif;font-size:29px;font-weight:400}.stage-copy p{color:#99928a;letter-spacing:.5px;margin:0;font-size:11px}.action{pointer-events:auto;color:#dfc193;letter-spacing:1.7px;text-transform:uppercase;background:#c9a77010;border:1px solid #c9a7705c;border-radius:3px;margin-top:20px;padding:12px 23px;font-size:10px;transition:background .3s,box-shadow .3s}.action:hover{background:#c9a77020;box-shadow:0 0 24px #d8b78014}.action span{margin-left:22px}.countdown{text-align:center;perspective:800px;pointer-events:none;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.clock{font-variant-numeric:tabular-nums;color:#f1d7a6;text-shadow:0 0 45px #eabc7028;letter-spacing:clamp(0px,.2vw,3px);white-space:nowrap;font-family:Oswald,DM Sans,sans-serif;font-size:clamp(80px,14vw,184px);font-weight:500;line-height:1.1;display:inline-block;transform:rotateX(8deg)}.clock-date{letter-spacing:3px;color:#9e8b6b;margin-top:4px;font-size:clamp(10px,1vw,12px)}.cake-hit,.card-hit{pointer-events:auto;color:#0000;background:0 0;border:0;width:min(320px,100%);height:min(220px,100%);display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cake-hit{width:min(360px,100%);height:min(300px,100%)}.letter-wrap{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);perspective:1200px;z-index:5;background:#06070a95;justify-content:center;align-items:center;padding:24px;display:none;position:absolute;inset:0}.letter{color:#453c31;text-align:center;transform-origin:0;background:#eee7d8;border:1px solid #fff5;width:530px;max-height:85svh;padding:50px 54px 38px;position:relative;overflow:auto;box-shadow:0 40px 100px #0009}.letter .small{letter-spacing:3px;color:#91764f;font-size:9px}.letter h2{margin:22px 0;font-family:Cormorant Garamond,serif;font-size:44px;font-weight:400}.letter p{font-family:Cormorant Garamond,serif;font-size:21px;line-height:1.6}.letter .placeholder{color:#958676;border-top:1px solid #c5b69d80;margin-top:30px;padding-top:20px;font:11px/1.8 DM Sans,sans-serif}.close{color:#7b6954;background:0 0;border:0;font-size:23px;position:absolute;top:14px;right:18px}.letter .signature{color:#987444;font-size:23px;font-style:italic}.gate{z-index:10;text-align:center;background:#08090cf5;flex-direction:column;justify-content:center;align-items:center;padding:30px;display:none;position:absolute;inset:0}.gate h2{margin:25px 0 12px;font-family:Cormorant Garamond,serif;font-size:40px;font-weight:400}.gate p{color:#a29a8e;max-width:330px;font-size:13px;line-height:1.9}.phone{border:2px solid var(--gold);border-radius:8px;width:42px;height:76px;animation:3s ease-in-out infinite rotate-phone;position:relative}.phone:after{content:"";background:var(--gold);border-radius:3px;width:6px;height:3px;position:absolute;bottom:6px;left:16px}@keyframes rotate-phone{0%,15%{transform:rotate(0)}55%,85%{transform:rotate(90deg)}to{transform:rotate(0)}}.gate.desktop .phone{border-radius:3px;width:94px;height:60px;animation:none}.gate.desktop .phone:after{width:120px;height:3px;bottom:-9px;left:-15px}.webgl-error{color:#b7a88c;text-align:center;width:100%;font-size:12px;position:absolute;top:50%}@media (height<=650px) and (orientation:landscape){.sound{top:13px;right:24px}main{gap:12px;height:calc(100% - 40px)}h1{margin:0;font-size:38px}.eyebrow{font-size:8px}.stage-copy h2{margin-bottom:5px;font-size:23px}.action{margin-top:10px;padding:9px 18px}.letter{padding:25px 40px}.letter h2{margin:12px 0;font-size:32px}.letter p{font-size:17px}.letter .placeholder{margin-top:15px;padding-top:10px}.clock{font-size:clamp(72px,12vh,100px)}}@media (prefers-reduced-motion:reduce){.phone{animation-duration:6s}}
