.mel-cta{margin-top:30px}.mel-art{padding:28px;border:1px solid #c7acd330;border-radius:26px;background:radial-gradient(ellipse at 70% 40%,#70485b35,transparent 70%),#100e17;overflow:hidden}.mel-art-head{display:flex;align-items:center;justify-content:space-between;color:#b8a0c7;font-size:8px;letter-spacing:.12em}.mel-art-head button{border:1px solid #ffffff22;border-radius:20px;padding:9px;font-size:8px;letter-spacing:0}.mel-note-field{height:155px;position:relative;background:repeating-linear-gradient(transparent 0 30px,#ffffff09 30px 31px);margin-top:20px}.mel-note-field i{position:absolute;width:9%;height:7px;left:calc(var(--i)*12%);top:var(--y);background:linear-gradient(90deg,#baace6,#ecc4a8);border-radius:8px;box-shadow:0 0 18px #c5a6d655;animation:mel-note 4s infinite;animation-delay:calc(var(--i)*.4s)}.mel-keyboard{display:flex;height:95px;gap:4px;padding:12px 10px;background:#08070b;border-radius:12px;border:1px solid #c4a6da22}.mel-keyboard>i{flex:1;background:linear-gradient(#e3dbe7,#b7aac3);border-radius:0 0 5px 5px;position:relative;animation:mel-key 4s infinite;animation-delay:calc(var(--i)*.4s)}.mel-keyboard .has-black:after{content:"";position:absolute;width:65%;height:60%;right:-36%;top:0;background:linear-gradient(#1b1620,#34293e);border:1px solid #08070c;border-radius:0 0 4px 4px;z-index:1}.mel-transfer{height:78px;display:grid;place-items:center;position:relative;color:#d5bbdd}.mel-transfer i{height:48px;width:1px;position:absolute;background:linear-gradient(transparent,#eac3a7,transparent);box-shadow:0 0 20px #e4b9da;left:50%}.mel-transfer span{padding-top:45px}.mel-output{text-align:center;padding:25px 15px;border:1px solid #d1aec226;border-radius:15px;background:#ffffff03}.mel-output>span{font-size:8px;letter-spacing:.15em;color:#baa0c8}.mel-output strong{display:block;font-size:19px;font-weight:300;margin-top:16px}.mel-output p,.mel-caption{font-size:9px;color:#a894b8}.mel-caption{text-align:center;margin-top:22px;line-height:1.8}.mel-ribbon{height:60px;margin:15px 10px;background:linear-gradient(100deg,#927bb2,#f5bea5,#b5baef);mask-image:linear-gradient(transparent,#000,transparent);border-radius:50%;transform:scaleY(.55) rotate(-5deg);animation:mel-ribbon 5s ease-in-out infinite;opacity:.7}.mel-mic{height:190px;position:relative;display:grid;place-items:center}.mel-mic>i{position:absolute;border:1px solid #c8abdf44;width:140px;height:140px;border-radius:50%;animation:mel-ring 3s ease-out infinite}.mel-mic>i:nth-child(2){animation-delay:-1.5s}.mel-mic>div{width:95px;height:95px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(#68405a,#24172f);box-shadow:0 0 45px #bd98d326}.mel-mic svg{width:38px;height:48px;fill:none;stroke:#e5c9df;stroke-width:2}.mel-wave{height:70px;display:flex;align-items:center;justify-content:center;gap:4px}.mel-wave i{width:4px;height:var(--h);background:linear-gradient(#efbfaa,#a8a5e2);border-radius:5px;animation:mel-wave 2s ease-in-out infinite;animation-delay:calc(var(--i)*-.1s)}.mel-art *{animation-play-state:paused}.mel-art.is-visible:not(.paused) *{animation-play-state:running}.melody-landing .lp-inputs article{border-top:1px solid #ffffff22;padding-top:25px}@keyframes mel-note{50%{opacity:.25;transform:translateY(-8px)}}@keyframes mel-key{10%,20%{background:#c29dcc;box-shadow:0 0 15px #b99ad944}40%{background:#ccc2d6}}@keyframes mel-ribbon{50%{transform:scaleY(.9) rotate(5deg);border-radius:35% 65%}}@keyframes mel-ring{to{transform:scale(1.35);opacity:0}}@keyframes mel-wave{50%{transform:scaleY(.35)}}@media(max-width:700px),(max-height:479px)and (pointer:coarse){.mel-art{padding:22px}.mel-wave{gap:3px}.mel-output strong{font-size:17px}.mel-note-field{height:130px}}@media(prefers-reduced-motion:reduce){.mel-art *{animation:none!important}}