:root { color-scheme: dark; font-family: Georgia, 'Times New Roman', serif; background: #000; color: #eee; }
* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; min-height: 100svh; overflow-x: hidden; }
[hidden] { display: none !important; }
.invitation { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; background: #000; transition: opacity 900ms ease; }
.invitation.leaving { opacity: 0; pointer-events: none; }
#begin { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 40px; border: 0; color: #fff; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#begin:focus-visible { outline: 1px solid #aaa; outline-offset: 12px; border-radius: 4px; }
.sound-control { position: fixed; z-index: 5; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 38px; height: 38px; padding: 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: rgba(255,255,255,.72); background: rgba(0,0,0,.32); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); cursor: pointer; opacity: 0; transform: translateY(-5px); transition: opacity 800ms ease, transform 800ms ease, color 250ms ease, border-color 250ms ease; -webkit-tap-highlight-color: transparent; }
.sound-control.ready { opacity: 1; transform: translateY(0); }
.sound-control:hover { color: #fff; border-color: rgba(255,255,255,.32); }
.sound-control:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.sound-control svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.sound-control .sound-off { display: none; }
.sound-control[aria-pressed="true"] .sound-on { display: none; }
.sound-control[aria-pressed="true"] .sound-off { display: block; }
.sound-control.unavailable { opacity: .35; cursor: default; }
.opening-heart { font: 64px/1 Georgia, serif; animation: heartbeat 3.8s ease-in-out infinite; }
.click-label { font: 14px/1.5 Georgia, serif; letter-spacing: .12em; animation: whisper 3.8s ease-in-out infinite; }
#experience { position: relative; min-height: 100vh; min-height: 100svh; isolation: isolate; }
.tree-stage { width: min(94vw, 610px); height: min(88svh, 670px); position: absolute; top: 50svh; left: 50%; transform: translate(-50%, -50%); transition: top 2s ease, left 2s ease, transform 2s ease, width 2s ease, height 2s ease; }
#tree { width: 100%; height: 100%; overflow: visible; }
.branch { stroke: #626465; stroke-dasharray: 1; stroke-dashoffset: 1; animation: grow var(--duration) cubic-bezier(.3,0,.3,1) var(--delay) both; }
.leaf { opacity: 0; transform: scale(0); animation: bloom 1.5s cubic-bezier(.2,.65,.3,1) var(--delay) both; }
.leaf-sway { animation: sway var(--sway-duration) ease-in-out var(--sway-delay) infinite alternate; }
.falling { opacity: 0; animation: falling 16s linear var(--delay) infinite; }
.forming-heart { opacity: 0; transform-origin: 0 0; animation: gather-heart var(--duration) cubic-bezier(.32,.02,.2,1) var(--delay) both; }
.letter { width: min(100%, 470px); padding: 0 26px 44px; margin: 0 auto; position: relative; }
.letter > * { opacity: 0; transform: translateY(13px); }
.letter .revealed { animation: reveal 1.8s ease both; }
h1 { margin: 0 0 27px; font-weight: 400; font-style: italic; font-size: clamp(52px, 7vw, 78px); line-height: 1.15; letter-spacing: -.045em; color: #fff; outline: none; }
p { font-size: 16px; font-weight: 400; line-height: 1.8; margin: 0 0 19px; color: #bdbdbf; overflow-wrap: anywhere; }
.closing-heart { display: block; font-size: 28px; margin-top: 25px; color: #eee; }
.complete .closing-heart { animation: reveal 1.8s ease both, heartbeat 5s ease-in-out 1.8s infinite; }
.message { padding-top: min(53svh, 420px); }
.message .tree-stage { top: 12px; width: min(88vw, 420px); height: min(50svh, 405px); transform: translate(-50%, 0); }
.no-script { position: fixed; bottom: 20px; width: 100%; padding: 20px; text-align: center; z-index: 3; }
@media (min-width: 800px) {
  .message { padding-top: 0; display: flex; align-items: center; min-height: 100svh; }
  .message .tree-stage { left: 28%; top: 50svh; width: min(49vw, 680px); height: min(85svh, 720px); transform: translate(-50%, -50%); }
  .letter { margin: 0 6% 0 54%; width: 40%; max-width: 510px; padding: 60px 16px; }
  p { font-size: 17px; line-height: 1.85; margin-bottom: 22px; }
}
@keyframes grow { to { stroke-dashoffset: 0; } }
@keyframes bloom { to { opacity: var(--opacity); transform: scale(1); } }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: translate(1px, -2px) rotate(2deg); } }
@keyframes falling { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 8% { opacity: .45; } 80% { opacity: .2; } 100% { opacity: 0; transform: translate(45px, 240px) rotate(75deg); } }
@keyframes gather-heart {
  0% { opacity: 0; transform: translate(var(--sx),var(--sy)) rotate(-8deg) scale(.12); }
  12% { opacity: .7; }
  62% { opacity: .7; transform: translate(var(--mx),var(--my)) rotate(24deg) scale(.24); }
  100% { opacity: var(--final-opacity); transform: translate(var(--tx),var(--ty)) rotate(var(--rotation)) scale(.3); }
}
@keyframes reveal { from { opacity: 0; transform: translateY(13px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes whisper { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .falling { display: none; }
}