:root{--bg-color:#f6f3ec;--bg-gradient:linear-gradient(180deg, #f9f7f1 0%, #eff0e6 100%);--text-primary:#333130;--text-secondary:#595552;--accent-gold:#c68a16;--button-bg:#eab308;--button-bg-hover:#d97706;--button-shadow:#eab30859;--font-heading:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-serif:"Playfair Display", Georgia, serif;--app-max-width:440px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-heading);background-color:var(--bg-color);color:var(--text-primary);margin:0;padding:0;overflow:hidden}body,#root{background:var(--bg-gradient);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex}.background-decorations{pointer-events:none;z-index:0;position:fixed;inset:0}.bg-sun-glow{pointer-events:none;background:radial-gradient(circle,#fde04747 0%,#fbbf241f 35%,#fbbf2408 60%,#0000 75%);border-radius:50%;width:600px;height:600px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#particleCanvas{pointer-events:none;z-index:50;width:100%;height:100%;position:fixed;inset:0}.sound-toggle-btn{display:none!important}.app-container{z-index:1;width:100%;max-width:var(--app-max-width);background:#f6f3ecf0;flex-direction:column;justify-content:space-between;align-items:center;height:100dvh;max-height:920px;padding:2.5rem 1.5rem 2rem;display:flex;position:relative;overflow:hidden;box-shadow:0 12px 40px #3c241514}.header-section{text-align:center;flex-direction:column;flex-shrink:0;justify-content:flex-start;align-items:center;width:100%;min-height:180px;padding-top:.5rem;display:flex}.main-title{color:var(--text-primary);opacity:0;letter-spacing:-.02em;margin-bottom:.75rem;font-size:2.1rem;font-weight:700;transition:opacity .6s,transform .6s;transform:translateY(-10px)}.main-title.visible{opacity:1;transform:translateY(0)}.reasons-list{flex-direction:column;align-items:center;gap:.45rem;width:100%;display:flex}.reason-item{color:var(--text-secondary);opacity:0;letter-spacing:-.01em;font-size:1.28rem;font-weight:600;animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards popReason;transform:translateY(-8px)scale(.96)}@keyframes popReason{to{opacity:1;transform:translateY(0)scale(1)}}.special-phrase{color:var(--accent-gold);opacity:0;margin-top:.9rem;font-size:1.32rem;font-weight:700;transition:opacity .6s,transform .6s;transform:scale(.9)}.special-phrase.visible{opacity:1;animation:2.5s ease-in-out infinite gentlePulse;transform:scale(1)}@keyframes gentlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.plant-section{flex:1;justify-content:center;align-items:flex-end;width:100%;min-height:0;padding-bottom:.5rem;display:flex;position:relative}.flower-svg{width:100%;height:100%;max-height:440px;overflow:visible}.plant-stem{transition:y .7s cubic-bezier(.34,1.56,.64,1),height .7s cubic-bezier(.34,1.56,.64,1)}.sunflower-head-anchor{transition:transform .7s cubic-bezier(.34,1.56,.64,1)}.sunflower-bloom-wrapper{opacity:0;transform-box:fill-box;transform-origin:50%;transition:transform 1.2s cubic-bezier(.175,.885,.32,1.275),opacity .8s;transform:scale(0)}.sunflower-bloom-wrapper.blooming{opacity:1;transform:scale(1)}.water-drops-container{pointer-events:none;z-index:5;position:absolute;inset:0}.water-drop{opacity:0;background:linear-gradient(#60a5fa 0%,#2563eb 100%);border-radius:50%/60% 60% 40% 40%;width:14px;height:20px;animation:.75s ease-in forwards dropWater;position:absolute;box-shadow:0 2px 6px #2563eb66}@keyframes dropWater{0%{opacity:0;transform:translateY(0)scale(.6)rotate(-10deg)}20%{opacity:1}85%{opacity:1;transform:translateY(220px)scale(1.1)rotate(0)}to{opacity:0;transform:translateY(240px)scale(.3)rotate(0)}}.splash-ripple{opacity:0;border:2px solid #60a5fa;border-radius:50%;width:10px;height:4px;animation:.5s ease-out forwards ripple;position:absolute;bottom:90px;left:50%;transform:translate(-50%)}@keyframes ripple{0%{opacity:1;width:10px;height:4px}to{opacity:0;width:70px;height:18px}}.footer-section{z-index:10;flex-shrink:0;justify-content:center;width:100%;padding-bottom:.5rem;display:flex}.water-button{color:#fff;font-family:var(--font-heading);cursor:pointer;box-shadow:0 10px 28px var(--button-shadow), 0 2px 6px #00000014;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#f59e0b 0%,#eab308 50%,#d97706 100%);border:none;border-radius:9999px;outline:none;justify-content:center;align-items:center;gap:.6rem;padding:1rem 2.6rem;font-size:1.25rem;font-weight:700;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s,background .3s;display:flex}.water-button:hover{box-shadow:0 14px 32px var(--button-shadow);transform:translateY(-2px)scale(1.03)}.water-button:active{box-shadow:0 4px 12px var(--button-shadow);transform:translateY(2px)scale(.97)}.water-button .btn-emoji{font-size:1.35rem;transition:transform .3s;display:inline-block}.water-button:hover .btn-emoji{transform:scale(1.25)rotate(10deg)}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#281e1459;justify-content:center;align-items:center;padding:1.5rem;animation:.3s ease-out forwards fadeIn;display:flex;position:absolute;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-card{text-align:center;background:#fafafa;border-radius:32px;flex-direction:column;align-items:center;width:100%;max-width:360px;padding:2.2rem 1.8rem 1.8rem;animation:.4s cubic-bezier(.175,.885,.32,1.275) forwards popModal;display:flex;box-shadow:0 24px 60px #2d190a38}@keyframes popModal{0%{opacity:0;transform:scale(.85)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-card h2{font-family:var(--font-serif);color:#b45309;margin-bottom:.9rem;font-size:1.55rem}.modal-original-text{font-family:var(--font-serif);color:#4b5563;margin-bottom:1.2rem;font-size:1.15rem;line-height:1.6}.card-hearts{margin-bottom:1.5rem;font-size:1.4rem;animation:2s ease-in-out infinite gentlePulse}.modal-action-btn{color:#fff;width:100%;font-family:var(--font-heading);cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(135deg,#eab308 0%,#d97706 100%);border:none;border-radius:9999px;justify-content:center;align-items:center;gap:.5rem;padding:1.05rem 1.5rem;font-size:1.18rem;font-weight:700;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;display:flex;box-shadow:0 10px 25px #d9770659}.modal-action-btn:hover{transform:scale(1.03);box-shadow:0 14px 30px #d9770673}.modal-action-btn:active{transform:scale(.97)}@media (width>=500px){.app-container{border:1px solid #ffffffb3;border-radius:36px;height:min(760px,90vh)}.header-section{flex-shrink:0;justify-content:flex-start;height:205px;min-height:205px}.main-title{margin-bottom:.5rem;font-size:1.95rem}.reasons-list{gap:.4rem}.reason-item{font-size:1.2rem}.special-phrase{margin-top:.6rem;font-size:1.22rem}.plant-section{flex:1;justify-content:center;align-items:flex-end;min-height:0;display:flex}.flower-svg{height:100%;max-height:370px}.water-button{padding:.75rem 2.2rem;font-size:1.1rem}}@media (width>=500px) and (height<=850px){.app-container{height:min(660px,92vh);padding:1.4rem 1.1rem 1.1rem}.header-section{justify-content:flex-start!important;height:175px!important;min-height:175px!important}.main-title{margin-bottom:.35rem!important;font-size:1.7rem!important}.reasons-list{gap:.32rem!important}.reason-item{font-size:1.1rem!important}.special-phrase{margin-top:.45rem!important;font-size:1.12rem!important}.flower-svg{max-height:315px!important}.water-button{padding:.65rem 1.8rem!important;font-size:1rem!important}}@media (width<=499px){.app-container{height:100dvh;padding:max(1.2rem, env(safe-area-inset-top,1.2rem)) 1rem max(1.5rem, env(safe-area-inset-bottom,1.5rem)) 1rem;background:#f6f3ec;justify-content:space-between;-webkit-backdrop-filter:none!important}.modal-backdrop{background:#1e140a73;-webkit-backdrop-filter:none!important}.header-section{justify-content:flex-start;height:auto;min-height:130px;padding-top:.2rem;padding-bottom:.2rem}.main-title{margin-bottom:.35rem;font-size:1.55rem}.reasons-list{gap:.3rem}.reason-item{font-size:1.05rem}.special-phrase{margin-top:.4rem;font-size:1.1rem}.plant-section{flex:1;max-height:none;padding-bottom:.2rem}.flower-svg{width:100%;max-height:350px}.footer-section{padding-bottom:max(.4rem, env(safe-area-inset-bottom,.4rem))}.water-button{margin-bottom:.2rem;padding:.85rem 2rem;font-size:1.1rem}.modal-card{border-radius:28px;width:92%;padding:1.8rem 1.2rem 1.4rem}.modal-card h2{font-size:1.35rem}.modal-original-text{font-size:1.02rem}.modal-action-btn{padding:.85rem 1.2rem;font-size:1.05rem}}
