@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap";:root{font-family:DM Sans,sans-serif;color:#fff8ef;background:#17151a;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit;cursor:pointer}.gate{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(120deg,#17121aad,#20131a94),url(/tree-sunset.png) center / cover no-repeat}.gate-card{width:min(430px,100%);padding:46px 38px 34px;text-align:center;background:#1d181ec7;border:1px solid rgba(255,255,255,.18);border-radius:26px;box-shadow:0 24px 90px #0008;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.seal{width:52px;height:52px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;color:#f4b8a8;background:#ffffff14;border:1px solid #ffffff25}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:700;color:#e6b8a8}.gate h1,.intro h1,.memory-content h2,.selected-caption h2{font-family:Playfair Display,serif;font-weight:500}.gate h1{font-size:36px;margin:12px 0}.gate-copy,.gate-message{color:#d7c9c3;font-size:13px;line-height:1.7}.gate form{margin-top:30px}.pin-label{display:block;font-size:9px;letter-spacing:.18em;color:#d9c1b8;margin-bottom:10px}.pin-wrap{height:52px;border:1px solid #ffffff38;border-radius:12px;display:flex;align-items:center;gap:12px;padding:0 16px;color:#d9b3a6;background:#ffffff0b}.pin-wrap input{width:100%;background:none;border:0;outline:0;color:#fff;font-size:22px;letter-spacing:.45em;text-align:center}.primary{margin-top:14px;width:100%;height:50px;border:0;border-radius:12px;background:#e9b9a5;color:#2a1d20;font-weight:700}.primary:disabled{opacity:.55;cursor:not-allowed}.gate-message{min-height:42px;margin:18px 0 0}.tiny-heart{color:#e8b7a6;font-size:22px}.tree-page{min-height:100vh;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#4b3439,#211d25,#17151a);padding:0 4vw 24px}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:auto}.brand{display:flex;align-items:center;gap:10px;font-family:Playfair Display,serif;font-size:17px;letter-spacing:.02em}.brand-mark{color:#efb7a7}.sound-button{display:flex;gap:8px;align-items:center;border:1px solid #ffffff25;border-radius:99px;padding:9px 14px;color:#f5ded4;background:#ffffff0b;font-size:11px}.intro{text-align:center;padding:28px 0 12px}.intro h1{font-size:clamp(34px,5vw,58px);line-height:1.08;margin:13px 0}.intro h1 em{color:#f0c2ae;font-weight:500}.intro>p:last-child{font-size:12px;color:#d6c2b9}.tree-stage{position:relative;width:min(1120px,100%);height:clamp(360px,54vw,620px);margin:10px auto 0;border-radius:22px;overflow:hidden;isolation:isolate;box-shadow:0 25px 80px #0007}.tree-image{position:absolute;top:0;right:0;bottom:0;left:0;background:url(/tree-sunset.png) center 52% / cover no-repeat;transition:filter .5s,transform .8s}.tree-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,rgba(20,16,21,.35),transparent 45%,rgba(20,16,21,.08)),linear-gradient(90deg,rgba(20,16,21,.08),transparent 25%,transparent 75%,rgba(20,16,21,.08));pointer-events:none}.branch-hotspot{position:absolute;z-index:3;transform:translate(-50%,-50%);width:clamp(250px,32vw,370px);height:clamp(160px,22vw,240px);display:grid;place-items:center;border:none;outline:none;background:transparent;color:#fff;cursor:pointer;overflow:visible}.hotspot-dot{display:none}.branch-hotspot:before{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 25% 45%,rgba(255,235,175,.55),transparent 48%),radial-gradient(ellipse at 50% 25%,rgba(255,220,145,.5),transparent 52%),radial-gradient(ellipse at 78% 48%,rgba(255,230,165,.48),transparent 48%),radial-gradient(ellipse at 48% 75%,rgba(255,195,125,.3),transparent 55%);clip-path:polygon(3% 48%,8% 30%,18% 23%,24% 12%,35% 17%,43% 5%,53% 13%,63% 5%,72% 17%,83% 20%,94% 32%,99% 48%,94% 63%,85% 72%,77% 87%,65% 81%,54% 96%,43% 85%,31% 95%,22% 80%,12% 76%,5% 64%);filter:blur(22px);mix-blend-mode:screen;opacity:0;transform:scale(.88);transition:opacity .55s ease,transform .55s ease;pointer-events:none}.branch-hotspot:hover:before,.branch-hotspot:focus-visible:before,.branch-hotspot.selected:before{opacity:1;transform:scale(1.08)}.hotspot-label{position:relative;z-index:2;font-size:11px;font-weight:500;color:#fff;text-shadow:0 2px 8px #000,0 0 15px #000;opacity:.95;white-space:nowrap;margin-top:0}.branch-hotspot:focus-visible{outline:none}.hotspot-label{position:relative;z-index:1;font-size:11px;text-shadow:0 2px 8px #000;opacity:.85;margin-top:-10px;white-space:nowrap}.branch-hotspot:focus-visible{outline:1px solid #fff}.branch-hotspot:focus-visible{outline:1px solid #fff;border-radius:50%}.tree-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;color:#fff;font-size:11px;text-shadow:0 1px 8px #000}.bubble-cloud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.memory-bubble{position:absolute;pointer-events:auto;width:clamp(104px,13vw,154px);height:clamp(104px,13vw,154px);padding:15px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;border:1px solid #ffffffb0;background:radial-gradient(circle at 32% 25%,#ffffffa8,transparent 25%),var(--bubble-bg);box-shadow:inset 0 0 22px #ffffff65,0 12px 32px #0005,0 0 35px var(--bubble-glow);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:float 5s ease-in-out infinite;transition:transform .25s}.memory-bubble:hover{transform:scale(1.09)}.bubble-shine{position:absolute;top:17%;left:22%;width:20%;height:9%;border-radius:50%;background:#fff9;filter:blur(5px);transform:rotate(-35deg)}.bubble-title{font-family:Playfair Display,serif;font-size:clamp(12px,1.3vw,16px);line-height:1.15;text-shadow:0 2px 6px #0006}.bubble-open{font-size:8px;opacity:.8;margin-top:8px}.bubble-1{left:10%;top:16%}.bubble-2{right:10%;top:14%;animation-delay:-1.2s}.bubble-3{left:15%;bottom:10%;animation-delay:-2.1s}.bubble-4{right:15%;bottom:9%;animation-delay:-.7s}.bubble-5{left:42%;top:5%;animation-delay:-1.6s}.rose{--bubble-bg: rgba(176, 86, 115, .72);--bubble-glow: #f1a6c7}.teal{--bubble-bg: rgba(50, 137, 137, .72);--bubble-glow: #8de4d4}.gold{--bubble-bg: rgba(174, 127, 48, .72);--bubble-glow: #ffdc83}.violet{--bubble-bg: rgba(112, 89, 155, .75);--bubble-glow: #c6a5ff}.branch-rose .tree-image{filter:saturate(1.06)}.branch-teal .tree-image{filter:saturate(1.08)}.branch-gold .tree-image{filter:saturate(1.12)}.branch-violet .tree-image{filter:saturate(.92)}@keyframes float{0%,to{translate:0 0}50%{translate:0 -13px}}.selected-caption{max-width:1120px;margin:18px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.selected-caption>div{text-align:right}.selected-caption h2{font-size:25px;margin:3px 0}.selected-caption p{font-size:11px;color:#d8c6bf;margin:0}.text-back{display:flex;align-items:center;gap:8px;color:#e8c5b6;border:0;background:none;font-size:11px}.footer{max-width:1120px;margin:28px auto 0;display:flex;align-items:center;justify-content:center;gap:9px;color:#bdaaa4;font-size:10px}.footer svg{color:#e9b7a5}.private-note{font-size:10px;color:#d8c5bc;letter-spacing:.04em}.memory-screen{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:28px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--bubble-glow) 23%,#27202a),#17151a 70%);overflow:auto}.memory-content{width:min(650px,100%);padding:55px 48px;text-align:center;border:1px solid #ffffff27;border-radius:28px;background:#ffffff0a;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 90px #0005}.memory-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;margin:0 auto 24px;background:var(--bubble-bg);color:#fff;box-shadow:0 0 35px var(--bubble-glow)}.memory-content h2{font-size:clamp(30px,5vw,48px);margin:13px 0 18px}.memory-content>p:not(.eyebrow){font-family:Playfair Display,serif;font-size:clamp(17px,2vw,21px);line-height:1.8;color:#f2e5dd;white-space:pre-line}.back-button,.close-memory{position:fixed;top:25px;border:1px solid #ffffff30;background:#ffffff0c;color:#fff;border-radius:99px;padding:11px 15px;display:flex;align-items:center;gap:8px;font-size:12px}.back-button{left:25px}.close-memory{right:25px;padding:10px}.photo-placeholder,.music-note{margin:24px auto 0;padding:24px;border:1px dashed #ffffff45;border-radius:16px;color:#e7cfc5;display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px}.photo-placeholder{min-height:130px;flex-direction:column}.music-note{border-style:solid}@media(max-width:650px){.tree-page{padding:0 14px 20px}.topbar{height:60px}.intro{padding:24px 0 8px}.tree-stage{height:440px;border-radius:16px}.tree-image{background-position:50% center}.branch-hotspot{width:82px;height:62px}.hotspot-label{font-size:9px}.hotspot-dot{width:15px;height:15px}.bubble-1{left:1%;top:12%}.bubble-2{right:1%;top:12%}.bubble-3{left:2%;bottom:7%}.bubble-4{right:2%;bottom:7%}.bubble-5{left:39%;top:3%}.memory-bubble{width:104px;height:104px;padding:10px}.bubble-title{font-size:11px}.bubble-open{font-size:7px}.selected-caption{align-items:flex-start;flex-direction:column}.selected-caption>div{text-align:left}.memory-content{padding:42px 23px}.back-button{top:14px;left:12px}.close-memory{top:14px;right:12px}.gate-card{padding:38px 24px}}.photo-bubble-gallery{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;width:100%;max-width:700px;margin:40px auto;padding:15px}.photo-bubble{width:115px;height:115px;padding:5px;border:1px solid rgba(255,255,255,.55);border-radius:50%;overflow:hidden;cursor:pointer;background:#ffffff26;box-shadow:0 0 15px #ffffff2e,inset 0 0 12px #fff3;transition:transform .35s ease,box-shadow .35s ease;animation:bubble-float 4s ease-in-out infinite}.photo-bubble:nth-child(2n){animation-delay:-2s}.photo-bubble:nth-child(3n){animation-delay:-1s}.photo-bubble:hover{transform:scale(1.13);box-shadow:0 0 25px #ffffff80,0 0 45px #ffdcbe40}.photo-bubble img{width:100%;height:100%;object-fit:cover;border-radius:50%}@keyframes bubble-float{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}.photo-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:20px;padding:55px 20px;background:#0c0a0ef0;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);animation:lightbox-appear .3s ease}.lightbox-image{display:block;max-width:min(75vw,850px);max-height:78vh;object-fit:contain;border-radius:14px;box-shadow:0 0 40px #ffffff1f;animation:photo-pop .35s ease}.lightbox-close{position:absolute;top:22px;right:25px;display:grid;place-items:center;width:44px;height:44px;color:#fff;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);border-radius:50%;cursor:pointer}.lightbox-arrow{display:grid;place-items:center;width:45px;height:45px;flex-shrink:0;color:#fff;background:#ffffff21;border:1px solid rgba(255,255,255,.25);border-radius:50%;cursor:pointer;transition:background .2s ease}.lightbox-arrow:hover,.lightbox-close:hover{background:#ffffff4d}.lightbox-counter{position:absolute;bottom:22px;left:50%;transform:translate(-50%);color:#fff;font-size:14px;letter-spacing:2px}@keyframes lightbox-appear{0%{opacity:0}to{opacity:1}}@keyframes photo-pop{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}@media(max-width:600px){.photo-bubble-gallery{gap:17px;padding:10px}.photo-bubble{width:88px;height:88px}.photo-lightbox{gap:8px;padding:55px 8px}.lightbox-image{max-width:72vw;max-height:72vh}.lightbox-arrow{width:36px;height:36px}}
