<div class="universe">
<div class="stars">✧ · ♡ · ✧</div>
<h1>Our Little Universe</h1>
<p class="subtitle">Six promises. Two hearts. One forever. ♾️</p>
<div class="doors">
<button class="door" data-door="0">
<span class="number">PHASE 01</span>
<span class="symbol">♡</span>
<span class="door-text">I Choose You</span>
<span class="door-hint">Our first promise</span>
</button>
<button class="door" data-door="1">
<span class="number">PHASE 02</span>
<span class="symbol">☀</span>
<span class="door-text">In Good Times and Bad</span>
<span class="door-hint">Our second promise</span>
</button>
<button class="door" data-door="2">
<span class="number">PHASE 03</span>
<span class="symbol">♥</span>
<span class="door-text">In Sickness and in Health</span>
<span class="door-hint">Our third promise</span>
</button>
<button class="door" data-door="3">
<span class="number">PHASE 04</span>
<span class="symbol">∞</span>
<span class="door-text">Through Every Season</span>
<span class="door-hint">Our fourth promise</span>
</button>
<button class="door" data-door="4">
<span class="number">PHASE 05</span>
<span class="symbol">⌂</span>
<span class="door-text">A Lifetime of Little Things</span>
<span class="door-hint">Our fifth promise</span>
</button>
<button class="door final-door" data-door="5">
<span class="number">PHASE 06</span>
<span class="symbol">♥</span>
<span class="door-text">Our Forever</span>
<span class="door-hint">The final question awaits...</span>
</button>
</div>
<p class="ending">Every promise leads me back to you. ❤️</p>
<p class="signature">Written with love, for my forever person.</p>
</div>
<div class="story-overlay" id="storyOverlay">
<div class="story-card">
<button class="close-story" id="closeStory" aria-label="Close">×</button>
<div id="storyContent"></div>
</div>
</div>
<div id="heartSky"></div>