:root{
  --night0:#020813;
  --night1:#041020;
  --night2:#0b1d34;
  --cream:#f4dfbd;
  --cream-bright:#f7e9cf;
  --gold:#d8a86f;
  --gold-soft:rgba(221,174,116,.55);
  --line:rgba(220,168,108,.56);
  --stage:min(78svh, 790px, 66vw);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--night0);color:var(--cream);overflow-x:hidden}
body{font-family:Georgia,"Times New Roman",serif}
button,textarea{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.app{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#010611 0%,#031020 47%,#0a1b31 78%,#06101e 100%)}
.atmosphere{position:absolute;inset:0;width:100%;height:100%;z-index:-8;pointer-events:none}
.night-vignette{position:absolute;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 22%,rgba(0,0,0,.035) 52%,rgba(0,0,0,.31) 104%)}

/* The sea in the reference starts low and stays quiet. */
.ocean{position:absolute;z-index:-3;left:0;right:0;bottom:0;height:15.2svh;min-height:116px;overflow:hidden;border-top:1px solid rgba(214,177,135,.08);background:linear-gradient(180deg,rgba(7,19,34,.35) 0%,rgba(3,13,25,.84) 20%,#020916 100%)}
.ocean::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(177deg,rgba(175,203,220,.06) 0 1px,transparent 1px 7px),repeating-linear-gradient(3deg,rgba(193,214,226,.035) 0 1px,transparent 1px 11px);opacity:.7;transform:scale(1.06);animation:oceanDrift 16s linear infinite alternate}
.ocean-glow{position:absolute;left:50%;top:-4px;width:min(27vw,390px);height:100%;transform:translateX(-50%);opacity:.78;filter:blur(.7px);background:repeating-linear-gradient(180deg,rgba(248,211,166,.27) 0 1px,rgba(247,210,165,0) 2px 8px),radial-gradient(ellipse at 50% 2%,rgba(250,216,172,.30),rgba(222,174,123,.07) 36%,transparent 76%);mask-image:radial-gradient(ellipse 48% 100% at 50% 0%,#000 0 35%,rgba(0,0,0,.72) 58%,transparent 100%);animation:moonRoad 5.5s ease-in-out infinite}
.ocean-lines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(124,155,177,.045) 8px 9px,transparent 10px 15px);opacity:.7}
@keyframes oceanDrift{to{transform:translate3d(1.2%,.5%,0) scale(1.07)}}
@keyframes moonRoad{50%{opacity:.68;transform:translateX(-50%) scaleX(.93)}}

.topbar{position:absolute;z-index:30;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:max(32px,env(safe-area-inset-top)) max(clamp(28px,3.15vw,48px),calc(env(safe-area-inset-right) + 20px)) 0 max(clamp(28px,3.15vw,48px),calc(env(safe-area-inset-left) + 20px))}
.eyebrow{font-weight:600;font-size:clamp(17px,1.55vw,23px);line-height:1.2;letter-spacing:.003em;color:#f3dfbe;text-shadow:0 2px 22px rgba(255,222,179,.12)}
.eyebrow span{display:inline-block;margin-left:7px;color:#ffd59f;transform:translateY(-1px)}
.actions{display:flex;gap:12px}
.icon-btn{width:57px;height:57px;border-radius:50%;border:1px solid rgba(218,163,102,.56);background:rgba(2,8,18,.18);color:#f5dfbd;display:grid;place-items:center;font-size:23px;cursor:pointer;backdrop-filter:blur(7px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.012),0 12px 30px rgba(0,0,0,.08);transition:transform .22s ease,border-color .22s ease,background .22s ease}
.icon-btn:hover{transform:translateY(-2px);border-color:rgba(244,198,139,.8);background:rgba(6,15,29,.44)}
.icon-btn[aria-pressed="true"]{background:rgba(48,32,35,.34);box-shadow:0 0 26px rgba(231,178,111,.10)}
.mobile-share{display:none}

.hero{position:relative;z-index:5;width:100%;min-height:100svh;display:grid;place-items:center;padding:0 24px 72px}
.moon-stage{position:relative;width:var(--stage);height:var(--stage);display:grid;place-items:center;perspective:1200px;filter:drop-shadow(0 42px 92px rgba(0,0,0,.22));transform:translateY(-2.2svh);transition:transform .18s ease-out}
.scene,.fallback-space{position:absolute;inset:0;width:100%;height:100%}
.scene{z-index:3;display:block;opacity:0;transition:opacity .6s ease;filter:drop-shadow(0 0 42px rgba(231,195,153,.04))}
.webgl-ready .scene{opacity:1}
.fallback-space{z-index:2;display:grid;place-items:center;pointer-events:none;transition:opacity .45s ease}
.webgl-ready .fallback-space{opacity:0}

/* Fine golden orbital trace from the reference. It is visual only; the cubes are real 3D objects. */
.orbit-line{position:absolute;z-index:1;left:50%;top:50%;width:91.2%;height:88.0%;transform:translate(-50%,-50%);border:1px solid rgba(215,166,103,.13);border-radius:50%;box-shadow:0 0 18px rgba(221,172,106,.025),inset 0 0 14px rgba(221,172,106,.02);pointer-events:none}
.orbit-line::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:repeating-conic-gradient(from -5deg,rgba(255,209,146,.0) 0deg 6deg,rgba(255,209,146,.82) 6.05deg 6.18deg,transparent 6.23deg 11deg);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.3px),#000 100%);opacity:.30}
.orbit-line i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffd394;box-shadow:0 0 4px #ffd394,0 0 9px rgba(247,186,112,.38);opacity:.62}
.orbit-line i:nth-child(1){left:25.5%;top:6.6%}.orbit-line i:nth-child(2){left:69.2%;top:4.8%}.orbit-line i:nth-child(3){left:91.8%;top:34.4%}.orbit-line i:nth-child(4){left:91.2%;top:66.3%}.orbit-line i:nth-child(5){left:69.4%;top:94.3%}.orbit-line i:nth-child(6){left:28.4%;top:94%}.orbit-line i:nth-child(7){left:5.9%;top:67%}.orbit-line i:nth-child(8){left:5.2%;top:36%}

.fallback-moon{position:absolute;left:50%;top:50%;width:79%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);overflow:hidden;background:url("assets/lroc_color_2k.jpg") 51% 50%/185% 100% no-repeat;filter:saturate(.25) sepia(.18) contrast(1.18) brightness(.72);box-shadow:-22px -8px 48px rgba(254,220,178,.24),inset 125px 5px 130px rgba(1,5,12,.81),0 32px 76px rgba(0,0,0,.35)}
.fallback-moon::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(92deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.51) 33%,rgba(0,0,0,.03) 63%,rgba(255,228,188,.15) 100%);mix-blend-mode:multiply}
.fallback-cubes{position:absolute;inset:0}
.fallback-cube{position:absolute;left:50%;top:50%;width:5.85%;aspect-ratio:1;border-radius:23%;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--rot));background:radial-gradient(circle at 33% 26%,#fff9e9 0 2%,transparent 2.5%),linear-gradient(145deg,#fff2d4 0%,#edcea3 56%,#bb8b5b 100%);box-shadow:inset 4px 4px 8px rgba(255,255,255,.54),inset -5px -7px 10px rgba(116,73,40,.26),0 3px 18px rgba(0,0,0,.22),0 0 18px rgba(255,201,132,.12)}
.fallback-cube::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(circle,rgba(255,255,255,.96) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(255,244,218,.82) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.62) 0 .8px,transparent 1.4px);background-size:7px 8px,11px 9px,9px 12px;background-position:0 0,3px 2px,5px 6px;opacity:.75}

.countdown-layer{position:relative;z-index:8;width:68%;max-width:500px;text-align:center;transform:translateY(-.1%);text-shadow:0 3px 18px rgba(0,0,0,.68),0 1px 2px rgba(0,0,0,.75)}
.until{font-size:clamp(17px,1.55vw,24px);line-height:1.1;letter-spacing:.012em;margin-bottom:18px;color:#f2dfc1}
.until span{font-size:.68em;color:#f3c88c;margin-left:4px}
.date{font-size:clamp(69px,6.3vw,100px);font-weight:400;letter-spacing:.045em;line-height:.88;color:#f3dfbd;text-shadow:0 2px 24px rgba(0,0,0,.72),0 0 24px rgba(241,193,134,.05)}
.countdown{margin:47px auto 31px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;width:100%;max-width:470px}
.unit{display:flex;flex-direction:column;gap:8px;min-width:0}
.unit strong{font-size:clamp(32px,3vw,44px);font-weight:600;line-height:.92;color:#f5e2c2;font-variant-numeric:tabular-nums}
.unit span{font-family:Arial,Helvetica,sans-serif;font-size:clamp(8px,.72vw,11px);font-weight:700;letter-spacing:.19em;color:#d6b586}
.countdown>i{width:4px;height:4px;margin:0 6px;border-radius:50%;background:#e1b374;box-shadow:0 0 8px rgba(234,184,116,.18)}
.wish-btn{border:1px solid rgba(218,163,101,.62);border-radius:999px;padding:11px 25px 12px;background:rgba(2,8,17,.52);backdrop-filter:blur(8px);color:#f7e6ca;font-size:clamp(17px,1.5vw,21px);font-style:italic;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.18),inset 0 0 16px rgba(255,255,255,.012);transition:transform .22s ease,border-color .22s ease,background .22s ease}
.wish-btn:hover{transform:translateY(-2px);border-color:rgba(245,196,133,.9);background:rgba(10,18,30,.70)}
.wish-btn span{font-style:normal;font-size:.68em;margin:0 7px;color:#f7c98d}
.cube-caption{position:absolute;z-index:9;left:50%;bottom:-18.3%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(12px,1.02vw,15px);letter-spacing:.012em;color:#dcb888;text-shadow:0 2px 12px rgba(0,0,0,.72)}
.cube-caption b{font-weight:400;margin:0 10px;color:#d8a56c}

.qr-card{position:absolute;z-index:20;right:clamp(34px,3.1vw,50px);bottom:clamp(34px,3.7svh,44px);width:151px;height:204px;border:1px solid rgba(217,164,104,.60);border-radius:23px;background:rgba(2,9,19,.63);backdrop-filter:blur(12px);box-shadow:0 18px 42px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.012);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px}
.qr-wrap{width:116px;height:116px;border-radius:11px;background:#f6e8ca;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(247,213,170,.20)}
#qrCanvas{display:block;width:105px;height:105px;image-rendering:pixelated}
.qr-star{font-size:23px;color:#f3cc91;line-height:1}

.shooting-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.shooting-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff1cf;box-shadow:0 0 10px rgba(255,226,180,.8);animation:shoot 1.55s cubic-bezier(.2,.65,.25,1) forwards}
.shooting-star::before{content:"";position:absolute;right:0;top:50%;width:145px;height:1px;transform:translateY(-50%);transform-origin:right center;background:linear-gradient(90deg,transparent,rgba(255,226,183,.55));filter:blur(.2px)}
@keyframes shoot{0%{opacity:0;transform:translate3d(0,0,0) rotate(-26deg)}10%{opacity:1}100%{opacity:0;transform:translate3d(-240px,125px,0) rotate(-26deg)}}

.toast{position:fixed;z-index:60;left:50%;bottom:25px;transform:translate(-50%,20px);padding:10px 15px;border:1px solid rgba(220,172,112,.35);border-radius:999px;background:rgba(2,8,18,.78);backdrop-filter:blur(10px);color:#f1dcbf;font-size:13px;opacity:0;pointer-events:none;transition:.25s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.25s ease}.modal.open{opacity:1;visibility:visible}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(0,4,10,.70);backdrop-filter:blur(8px)}.dialog{position:relative;z-index:2;width:min(420px,calc(100vw - 36px));padding:35px 30px 29px;border:1px solid rgba(220,169,108,.45);border-radius:26px;background:linear-gradient(180deg,rgba(8,17,31,.96),rgba(3,10,21,.98));box-shadow:0 30px 80px rgba(0,0,0,.45);text-align:center}.dialog .close{position:absolute;right:15px;top:12px;width:35px;height:35px;border:0;background:transparent;color:#cfb18b;font-size:25px;cursor:pointer}.dialog-star{display:block;color:#f5c98b;font-size:25px;margin-bottom:6px}.dialog p{margin:0 0 6px;color:#b99f7e;font-size:12px;letter-spacing:.13em;text-transform:uppercase}.dialog h2{margin:0 0 20px;font-weight:400;font-size:29px;color:#f5e2c3}.dialog textarea{width:100%;height:105px;resize:none;border:1px solid rgba(220,169,108,.31);border-radius:16px;background:rgba(0,0,0,.18);color:#f5e3c8;padding:14px;outline:none}.dialog form>button{margin-top:12px;border:1px solid rgba(220,169,108,.56);border-radius:999px;background:rgba(222,169,109,.11);color:#f5dfbf;padding:11px 18px;cursor:pointer}
.birthday{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(246,205,151,.20),rgba(2,7,15,.94) 48%,#01050d 100%);opacity:0;visibility:hidden;transition:1s ease}.birthday.show{opacity:1;visibility:visible}.birthday>div{text-align:center}.birthday>div>span{font-size:30px;color:#ffd09a}.birthday small{display:block;margin:12px 0 0;letter-spacing:.18em;text-transform:uppercase;color:#cdb18c}.birthday h1{font-size:clamp(130px,24vw,290px);line-height:.8;margin:10px 0 26px;font-weight:400;color:#f4ddb9;text-shadow:0 0 80px rgba(255,199,128,.20)}.birthday strong{font-size:clamp(28px,4vw,55px);font-weight:400;color:#f7e4c7}

@media (max-width:900px){
  :root{--stage:min(84svh, 760px, 88vw)}
  .qr-card{right:20px;bottom:18px;transform:scale(.88);transform-origin:right bottom}
  .eyebrow{font-size:18px}
}
@media (max-width:620px){
  :root{--stage:min(72svh, 95vw, 610px)}
  .app{min-height:100svh}
  .topbar{padding:max(19px,env(safe-area-inset-top)) 17px 0;align-items:center}
  .eyebrow{font-size:14px;max-width:60%;line-height:1.24}.eyebrow span{margin-left:4px}
  .actions{gap:7px}.icon-btn{width:39px;height:39px;font-size:17px}.mobile-share{display:grid}.actions .icon-btn:nth-child(2){display:none}
  .hero{min-height:100svh;padding:0 8px 58px}
  .moon-stage{transform:translateY(-1svh)}
  .orbit-line{width:91.5%;height:88.5%}
  .countdown-layer{width:67%;transform:translateY(-1%)}
  .until{font-size:13px;margin-bottom:8px}.date{font-size:clamp(48px,16vw,68px)}
  .countdown{margin:20px auto 18px;max-width:310px}.unit{gap:5px}.unit strong{font-size:clamp(22px,7vw,31px)}.unit span{font-size:6.5px;letter-spacing:.14em}.countdown>i{width:2px;height:2px;margin:0 2px}
  .wish-btn{font-size:14px;padding:8px 15px}.wish-btn span{margin:0 4px}
  .cube-caption{bottom:-23%;font-size:10px}
  .qr-card{display:none}
  .ocean{height:14svh;min-height:92px}.ocean-glow{width:60vw}
  .fallback-moon{width:79%}
}
@media (max-width:390px){
  :root{--stage:min(68svh, 98vw, 540px)}
  .countdown-layer{width:70%}.cube-caption{bottom:-24%;font-size:9px}.eyebrow{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .moon-stage{transition:none}.scene{transition:none}.ocean::before,.ocean-glow{animation:none}
}

/* V9 Telegram wish transport: invisible anti-bot honeypot; no visual layout change. */
.wish-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.dialog form>button:disabled{opacity:.62;cursor:wait;transform:none}