.flames-container{max-width:600px;margin:2rem auto;padding:2rem;background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.1);text-align:center}.flames-container .title{color:#f36;font-size:2.5em;margin-bottom:1.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.flames-container .input-group{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.flames-container .input-group .name-input{padding:1rem;border:2px solid #f36;border-radius:10px;font-size:1.1em;width:200px;transition:all .3s ease}.flames-container .input-group .name-input:focus{outline:none;border-color:#ff6b6b;box-shadow:0 0 10px rgba(255,107,107,.3)}.flames-container .input-group .heart{font-size:2em;animation:pulse 1.5s infinite}.flames-container .calculate-btn{background:#f36;color:#fff;border:none;padding:1rem 2rem;border-radius:30px;font-size:1.2em;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.flames-container .calculate-btn:hover{background:rgb(255,0,63.75);transform:translateY(-2px);box-shadow:0 5px 15px rgba(255,51,102,.4)}.flames-container .calculate-btn.calculating{background:#ff6b6b;pointer-events:none}.flames-container .calculate-btn.calculating:after{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:loading 1.5s infinite}.flames-container .result-container{margin-top:2rem;padding:2rem;background:linear-gradient(135deg,#ff9a9e,#fad0c4 99%,#fad0c4);border-radius:15px;position:relative;overflow:hidden}.flames-container .result-container .flame-animation{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.flames-container .result-container .flame-animation .flame{position:absolute;background:linear-gradient(0deg,#ff6b6b,#ff3366);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:flame 1.5s infinite;opacity:.7}.flames-container .result-container .flame-animation .flame:first-child{width:30px;height:50px;left:20%;top:-20px}.flames-container .result-container .flame-animation .flame:nth-child(2){width:40px;height:70px;left:50%;top:-30px;animation-delay:.5s}.flames-container .result-container .flame-animation .flame:nth-child(3){width:25px;height:45px;left:80%;top:-25px;animation-delay:.8s}.flames-container .result-container .result-text{color:#fff;font-size:2em;text-shadow:2px 2px 4px rgba(0,0,0,.3);position:relative;z-index:1;animation:heartPulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes loading{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes flame{0%{transform:translateY(0) scale(1);opacity:.7}50%{transform:translateY(-20px) scale(1.1);opacity:1}to{transform:translateY(0) scale(1);opacity:.7}}@keyframes heartPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}