@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap";:root{font-family:DM Sans,sans-serif;color:#fff;background:#11102a;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden}.experience{position:relative;width:100%;height:100%;min-height:560px;overflow:hidden;background:#a8d7e7;isolation:isolate}.scene{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.scene canvas{display:block;width:100%;height:100%;touch-action:pan-y}.grain{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}.topbar{z-index:2;position:absolute;top:0;left:0;right:0;padding:27px 5.5vw;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.22em;font-weight:600;color:#254d4a}.brand-mark{font-size:20px;color:#a64d83}.topbar-note{margin-left:auto;font-size:9px;letter-spacing:.2em;opacity:.7}.intro,.story-panel{z-index:2;position:absolute;left:9%;top:20%;max-width:590px;text-shadow:0 1px 22px #244b4d55;animation:rise .9s both}.eyebrow{font-size:10px;letter-spacing:.28em;font-weight:600;color:#fff;text-shadow:0 1px 12px #315e5c88;margin:0 0 22px}.intro h1,.final-message h1{font-family:Playfair Display,serif;font-size:clamp(43px,6.2vw,82px);line-height:1.06;font-weight:500;letter-spacing:-.045em;margin:0;color:#fff;text-shadow:0 3px 30px #315e5c66}.intro h1 em,.final-message h1 em{font-weight:500;color:#ffe1ed}.subcopy{font-size:14px;line-height:1.8;letter-spacing:.025em;color:#f7ffff;margin:23px 0 27px;text-shadow:0 2px 14px #315e5c}.primary,.secondary{border:0;border-radius:999px;padding:15px 23px;background:#fff;color:#5c5360;font:600 12px DM Sans;letter-spacing:.02em;cursor:pointer;box-shadow:0 8px 28px #284d4630;transition:transform .25s,box-shadow .25s}.primary:hover,.secondary:hover{transform:translateY(-3px);box-shadow:0 12px 32px #284d4644}.primary span,.secondary span{margin-left:10px;color:#c56c9d;font-size:16px}.birthday{font:500 clamp(34px,4.3vw,58px)/1.08 "Playfair Display",serif;margin:0;color:#fff;text-shadow:0 3px 26px #284d5077}.actions{display:flex;align-items:center;gap:20px;margin-top:23px;flex-wrap:wrap}.secondary{background:#fff;color:#6b5366}.text-button{background:#ffffff18;border:1px solid #ffffff77;border-radius:999px;padding:13px 18px;color:#fff;font:500 12px DM Sans;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.next-button{display:block;margin-top:30px;border:0;background:none;color:#fff;font:500 12px DM Sans;letter-spacing:.06em;cursor:pointer;text-decoration:underline;text-underline-offset:6px}.next-button span{margin-left:8px}.cosmic-panel{color:#fff}.secret-message{font:italic 15px/1.7 Playfair Display,serif;color:#ffe2f0;max-width:420px;animation:rise .6s both}.final-message{z-index:2;position:absolute;left:9%;top:25%;max-width:680px;animation:rise 1s both}.final-message h1{font-size:clamp(44px,6vw,76px)}.final-message>p:not(.eyebrow){font:18px/1.8 Playfair Display,serif;color:#f5e9ff;margin:30px 0 18px}.final-message>span{font-size:12px;letter-spacing:.15em;color:#f7cfe2}.scene-hint{z-index:2;position:absolute;right:5.5vw;bottom:70px;color:#fff;font-size:9px;letter-spacing:.2em;text-shadow:0 1px 8px #315e5c}.hint-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ffe4ed;margin:0 9px 1px 0;box-shadow:0 0 12px #fff}.music-controls{z-index:2;position:absolute;right:5.5vw;top:78px;display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #ffffff66;background:#fff2;border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}.music-toggle{width:27px;height:27px;border:0;border-radius:50%;background:#fff;color:#8b6485;font-size:14px;cursor:pointer}.music-name{font-size:10px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.volume{width:64px;accent-color:#f5c0d9}footer{z-index:2;position:absolute;bottom:0;left:0;right:0;padding:25px 5.5vw;display:flex;justify-content:space-between;color:#fff;font-size:8px;letter-spacing:.2em;text-shadow:0 1px 8px #315e5c}.letter-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:#162c3a99;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);display:grid;place-items:center;padding:20px}.letter{position:relative;width:min(520px,100%);max-height:90%;overflow:auto;background:#fff8f2;color:#574b50;padding:45px 48px 38px;box-shadow:0 30px 90px #152c3a66;border-radius:4px}.letter h2{font:500 34px Playfair Display;margin:0 0 25px}.letter p:not(.eyebrow){font:14px/1.9 Playfair Display;margin:0 0 17px}.letter .eyebrow{color:#b16d8f;text-shadow:none}.letter .last-line{font-style:italic;color:#a34f7d;font-size:16px!important;font-weight:600}.letter .signature{font-style:italic;color:#a34f7d;font-size:17px!important;margin-top:22px!important}.letter p:not(.eyebrow){animation:letterReveal .85s both}.letter p:nth-of-type(2){animation-delay:.12s}.letter p:nth-of-type(3){animation-delay:.3s}.letter p:nth-of-type(4){animation-delay:.48s}.letter p:nth-of-type(5){animation-delay:.66s}.letter p:nth-of-type(6){animation-delay:.84s}.letter p:nth-of-type(7){animation-delay:1.02s}.letter p:nth-of-type(8){animation-delay:1.2s}.letter p:nth-of-type(9){animation-delay:1.38s}.letter p:nth-of-type(10){animation-delay:1.56s}.letter p:nth-of-type(11){animation-delay:1.74s}.letter p:nth-of-type(12){animation-delay:1.92s}.letter-flower{display:block;text-align:right;font-size:28px;color:#b16d9d}.close{position:absolute;right:18px;top:12px;background:none;border:0;font-size:27px;color:#806d75;cursor:pointer}@keyframes letterReveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.topbar{z-index:2;padding:19px 20px;font-size:8px}.topbar-note{font-size:7px}.intro,.story-panel{z-index:2;left:7%;right:7%;top:22%;max-width:90%}.intro h1{font-size:clamp(39px,10.5vw,62px)}.subcopy{font-size:12px;margin:17px 0 21px}.birthday{font-size:clamp(32px,8.5vw,45px)}.actions{gap:10px}.secondary{padding:13px 16px}.music-controls{z-index:2;top:65px;right:6%;gap:7px}.music-name{max-width:82px}.volume{width:48px}.scene-hint{z-index:2;right:7%;bottom:66px;font-size:8px}footer{z-index:2;padding:19px 20px;font-size:7px}.final-message{z-index:2;left:7%;right:7%;top:25%}.final-message h1{font-size:clamp(42px,10vw,62px)}.letter{padding:38px 27px 30px}.letter h2{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}