:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}html,body,#root{height:100%;margin:0;padding:0}body,#root{min-height:100vh;min-width:100vw;width:100vw;height:100vh;background:#181c23;display:flex;align-items:center;justify-content:center}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box;padding:0 16px}.avatar{width:180px;height:180px;border-radius:50%;object-fit:cover;box-shadow:0 4px 24px #0006;margin-top:32px;margin-bottom:32px;border:4px solid #23272f;background:#23272f}.title{color:#fff;font-size:2rem;font-weight:700;margin-bottom:12px;text-align:center}.subtitle{color:#bdbdbd;font-size:1.2rem;text-align:center}@media (max-width: 600px){.avatar{width:120px;height:120px}.title{font-size:1.2rem}.subtitle{font-size:1rem}.container{padding:24px 8px}}.love-page{min-height:100vh;width:100vw;background:linear-gradient(135deg,#f5e6d3,#f0ddd0);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:40px 20px;box-sizing:border-box}.love-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.hearts-background{position:absolute;width:100%;height:100%;top:0;left:0}.heart-decoration{position:absolute;color:#ffb6c14d;animation:float 6s ease-in-out infinite;pointer-events:none;filter:blur(.5px)}@keyframes float{0%,to{transform:translateY(0) rotate(0);opacity:.4}50%{transform:translateY(-20px) rotate(180deg);opacity:.7}}.love-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;max-width:1200px;width:100%;gap:60px}.love-text{flex:1;text-align:left;color:#5c3a21;font-family:Arial,sans-serif}.love-greeting{font-size:1.8rem;font-weight:600;margin-bottom:20px;color:#4a2c1a}.love-message{font-size:1.3rem;line-height:1.8;margin-bottom:15px;color:#5c3a21}.love-signature{font-size:1.5rem;font-weight:600;margin:25px 0;color:#c41e3a;font-style:italic}.love-counter-label{font-size:1.2rem;margin-top:30px;margin-bottom:15px;color:#5c3a21}.love-counter{display:flex;flex-wrap:wrap;gap:15px;align-items:baseline;margin-top:20px}.counter-value{font-size:2.5rem;font-weight:700;color:#c41e3a;min-width:60px;text-align:center}.counter-unit{font-size:1.1rem;color:#8b5a3c;margin-right:10px}.love-letter-e{position:relative;width:350px;height:500px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.letter-e-canopy{position:absolute;width:100%;height:100%;top:0;left:0;display:flex;align-items:center;justify-content:center}.tree-heart{position:absolute;animation:treeFloat 4s ease-in-out infinite;background:transparent;filter:drop-shadow(3px 3px 6px rgba(0,0,0,.3)) drop-shadow(0 0 8px rgba(255,105,180,.4));text-shadow:2px 2px 4px rgba(0,0,0,.2),0 0 10px rgba(255,20,147,.6);transform-origin:center;will-change:transform;border:none;box-shadow:none}.tree-heart:nth-child(3n){background:transparent;filter:drop-shadow(3px 3px 6px rgba(0,0,0,.3)) drop-shadow(0 0 8px rgba(255,20,147,.5)) hue-rotate(10deg);border:none;box-shadow:none}.tree-heart:nth-child(3n+1){background:transparent;filter:drop-shadow(3px 3px 6px rgba(0,0,0,.3)) drop-shadow(0 0 8px rgba(220,20,60,.5)) hue-rotate(-10deg);border:none;box-shadow:none}.tree-heart:nth-child(3n+2){background:transparent;filter:drop-shadow(3px 3px 6px rgba(0,0,0,.3)) drop-shadow(0 0 8px rgba(255,105,180,.5));border:none;box-shadow:none}@keyframes treeFloat{0%,to{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-8px) rotate(5deg) scale(1.05)}50%{transform:translateY(-12px) rotate(-5deg) scale(1.1)}75%{transform:translateY(-8px) rotate(3deg) scale(1.05)}}@media (max-width: 968px){.love-content{flex-direction:column;gap:40px}.love-text{text-align:center}.love-letter-e{width:280px;height:380px}.love-greeting{font-size:1.5rem}.love-message{font-size:1.1rem}.counter-value{font-size:2rem}}@media (max-width: 600px){.love-page{padding:20px 15px}.love-greeting{font-size:1.3rem}.love-message{font-size:1rem}.love-signature{font-size:1.2rem}.love-counter-label{font-size:1rem}.counter-value{font-size:1.6rem;min-width:50px}.counter-unit{font-size:.9rem}.love-letter-e{width:220px;height:300px}.love-counter{gap:10px;justify-content:center}}.valentine-button{margin-top:30px;padding:15px 30px;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#c41e3a,#ff69b4);border:none;border-radius:30px;cursor:pointer;box-shadow:0 4px 15px #c41e3a66;transition:all .3s ease;font-family:Arial,sans-serif}.valentine-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #c41e3a99;background:linear-gradient(135deg,#d42e4a,#ff79c4)}.valentine-button:active{transform:translateY(0);box-shadow:0 2px 10px #c41e3a66}:root{--modal-padding-base: clamp(15px, 4vw, 40px);--modal-padding-horizontal: clamp(15px, 5vw, 40px);--modal-padding-vertical: clamp(20px, 6vh, 50px);--modal-border-radius: clamp(12px, 2vw, 20px);--modal-max-width: min(600px, 90vw);--modal-max-height: min(85dvh, 85vh);--modal-font-size: clamp(.875rem, 2.5vw, 1.1rem);--modal-line-height: clamp(1.5, 2vw, 1.8);--modal-close-size: clamp(28px, 6vw, 40px);--modal-close-font: clamp(1.4rem, 4vw, 2rem);--modal-close-top: clamp(8px, 2vh, 15px);--modal-close-right: clamp(12px, 3vw, 20px);--modal-paragraph-spacing: clamp(12px, 2vh, 20px)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100dvh;height:100vh;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease;overflow:hidden;padding:clamp(5px,2vw,20px);box-sizing:border-box}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:linear-gradient(135deg,#fff5f5,#ffe8e8);border-radius:var(--modal-border-radius);padding:var(--modal-padding-vertical) var(--modal-padding-horizontal);max-width:var(--modal-max-width);width:100%;max-height:var(--modal-max-height);overflow-y:auto;overflow-x:hidden;box-shadow:0 10px 40px #0000004d;position:relative;animation:slideUp .3s ease;border:2px solid rgba(196,30,58,.2);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-sizing:border-box;will-change:transform;transform:translateZ(0)}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close{position:absolute;top:var(--modal-close-top);right:var(--modal-close-right);background:none;border:none;font-size:var(--modal-close-font);color:#c41e3a;cursor:pointer;width:var(--modal-close-size);height:var(--modal-close-size);min-width:var(--modal-close-size);min-height:var(--modal-close-size);display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;line-height:1;z-index:10;touch-action:manipulation}.modal-close:hover{background:#c41e3a1a;transform:rotate(90deg)}.modal-text{color:#5c3a21;font-family:Arial,sans-serif;font-size:var(--modal-font-size);line-height:var(--modal-line-height);text-align:left;margin-top:clamp(5px,1vh,10px);word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.modal-text p{margin-bottom:var(--modal-paragraph-spacing);margin-top:0}.modal-text p:first-child{margin-top:0}.modal-text p:last-child{margin-bottom:0}.modal-text em{font-style:italic;color:#8b5a3c}@media (max-width: 480px){.modal-overlay{padding:clamp(5px,2vw,10px);align-items:flex-start;padding-top:clamp(10px,3vh,20px)}.modal-content{max-width:100%;max-height:min(95dvh,95vh);padding-top:clamp(45px,12vh,50px)}.valentine-button{font-size:clamp(.9rem,3vw,1rem);padding:clamp(10px,2.5vw,12px) clamp(20px,5vw,25px)}}@media (min-width: 481px) and (max-width: 768px){.modal-content{max-width:min(550px,90vw);max-height:min(85dvh,85vh)}}@media (max-width: 600px) and (min-aspect-ratio: 2/1){.modal-overlay{padding:clamp(5px,1.5vw,10px);padding-top:clamp(8px,2vh,15px)}.modal-content{max-height:min(96dvh,96vh);padding:clamp(40px,8vh,50px) clamp(18px,4vw,20px) clamp(20px,4vh,25px)}}@media (min-height: 1000px){.modal-content{max-height:min(90dvh,90vh)}}@media (max-height: 700px){.modal-overlay{padding:5px}.modal-content{max-height:min(95dvh,95vh);padding:clamp(35px,8vh,45px) clamp(15px,4vw,20px) clamp(15px,3vh,20px)}.modal-text{font-size:clamp(.85rem,2.2vw,.95rem);line-height:clamp(1.4,1.8vw,1.6)}.modal-text p{margin-bottom:clamp(10px,1.5vh,15px)}}@media (min-width: 390px) and (max-width: 430px) and (min-height: 840px){.modal-content{max-width:min(380px,92vw);max-height:min(88dvh,88vh);padding:clamp(45px,10vh,50px) clamp(20px,5vw,25px) clamp(25px,5vh,30px)}.modal-text{font-size:clamp(.95rem,2.8vw,1.05rem)}}@media (min-width: 769px) and (max-width: 1024px){.modal-content{max-width:min(650px,85vw);max-height:min(80dvh,80vh)}}@media (max-height: 500px) and (orientation: landscape){.modal-overlay{padding:5px;align-items:center}.modal-content{max-height:min(95dvh,95vh);padding:clamp(25px,6vh,35px) clamp(20px,5vw,30px)}.modal-text{font-size:clamp(.8rem,2vw,.95rem);line-height:clamp(1.4,1.6vw,1.6)}.modal-text p{margin-bottom:clamp(8px,1.2vh,12px)}}@media (hover: none) and (pointer: coarse){.modal-close{min-width:44px;min-height:44px}.modal-close:active{background:#c41e3a33;transform:scale(.95)}}
