Aurora Prompt Hero

.x-hrp{--ink:#1C1C1A;--mut:#5F5F5B;--line:#E9E7E1;--cream:#FCFBF8;--card:#F5F4EF;--blue:#4C7DFF;--pink:#FF66CC;--red:#FF2E63;--org:#FF7A1A;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left;color:var(--ink)}.x-hrp,.x-hrp *{box-sizing:border-box}.x-hrp a{color:inherit;text-decoration:none}.x-hrp button{font:inherit;cursor:pointer;color:inherit}.x-hrp img{display:block;max-width:100%}.x-hrp .cmp{position:relative;width:100%;max-width:720px;margin:0 auto;background:rgba(255,255,255,.96);border-radius:28px;padding:16px 14px 12px 20px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 60px -24px rgba(40,20,80,.35),0 0 0 1px rgba(20,20,20,.05);text-align:left;transition:box-shadow .3s}.x-hrp .cmp:focus-within{box-shadow:0 0 0 4px rgba(76,125,255,.18),0 24px 60px -24px rgba(40,20,80,.35)}.x-hrp .cmp-f{position:relative}.x-hrp .cmp textarea{width:100%;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);padding:0;min-height:48px}.x-hrp .cmp-ph{position:absolute;left:0;top:0;font-size:16px;line-height:1.5;color:#8A8A85;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:100%}.x-hrp .cmp-ph b{font-weight:400}.x-hrp .cmp-c{display:inline-block;width:1.5px;height:17px;background:#8A8A85;vertical-align:-3px;margin-left:1px;animation:cmpB 1s steps(1) infinite}.x-hrp .cmp.has .cmp-ph{opacity:0}@keyframes cmpB{50%{opacity:0}}.x-hrp .cmp-bar{display:flex;align-items:center;gap:6px;margin-top:4px}.x-hrp .cmp-sp{flex:1}.x-hrp .cmp-add{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#6B6B66;transition:background .2s}.x-hrp .cmp-add:hover{background:var(--card)}.x-hrp .cmp-mode{position:relative}.x-hrp .cmp-mb{display:flex;align-items:center;gap:4px;height:30px;padding:0 10px;border:0;background:transparent;border-radius:10px;font-size:13px;color:#5F5F5B}.x-hrp .cmp-mb:hover{background:var(--card)}.x-hrp .cmp-mb svg{transition:transform .2s}.x-hrp .cmp-mode.open .cmp-mb svg{transform:rotate(180deg)}.x-hrp .cmp-menu{position:absolute;right:0;top:36px;z-index:5;min-width:120px;background:#fff;border-radius:12px;padding:6px;box-shadow:0 12px 32px -8px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(-4px);pointer-events:none;transition:.18s}.x-hrp .cmp-mode.open .cmp-menu{opacity:1;transform:none;pointer-events:auto}.x-hrp .cmp-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 10px;border-radius:8px;font-size:13px}.x-hrp .cmp-menu button:hover{background:var(--card)}.x-hrp .cmp-menu button.on{font-weight:600}.x-hrp .cmp-mic{width:30px;height:30px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:#6B6B66}.x-hrp .cmp-mic:hover{background:var(--card)}.x-hrp .cmp-mic.rec{color:var(--red);animation:cmpP 1.2s infinite}@keyframes cmpP{50%{box-shadow:0 0 0 6px rgba(255,46,99,.15)}}.x-hrp .cmp-go{width:30px;height:30px;border:0;border-radius:50%;background:#1C1C1A;color:#fff;display:grid;place-items:center;opacity:.25;transition:opacity .2s,transform .2s}.x-hrp .cmp.has .cmp-go{opacity:1}.x-hrp .cmp.sent .cmp-go{transform:translateY(-3px)}.x-hrp{position:relative;overflow:hidden;min-height:760px;display:flex;align-items:center;justify-content:center;padding:120px 24px 220px;background:var(--cream);isolation:isolate}.x-hrp .hrp-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}.x-hrp .hrp-bg i{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform}.x-hrp .hb1{left:-20%;right:-20%;top:30%;height:70%;background:#4C7DFF;opacity:.95;animation:hrpA 14s ease-in-out infinite alternate}.x-hrp .hb2{left:-10%;right:-10%;top:52%;height:70%;background:#FF66CC;animation:hrpB 16s ease-in-out infinite alternate}.x-hrp .hb3{left:-15%;right:-15%;top:78%;height:60%;background:#FF2E63;animation:hrpA 18s ease-in-out infinite alternate-reverse}.x-hrp .hb4{left:28%;right:28%;top:24%;height:46%;background:#FCFBF8;filter:blur(50px);animation:hrpC 12s ease-in-out infinite alternate}@keyframes hrpA{to{transform:translate3d(4%,-3%,0) scale(1.05)}}@keyframes hrpB{to{transform:translate3d(-5%,2%,0) scale(1.08)}}@keyframes hrpC{to{transform:translate3d(0,4%,0) scale(1.1)}}.x-hrp .hrp-in{position:relative;width:100%;max-width:760px;text-align:center}.x-hrp h1{margin:0 0 12px;font-size:clamp(34px,4.6vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.1}.x-hrp .hrp-in>p{text-wrap:balance;margin:0 auto 34px;max-width:520px;font-size:clamp(16px,1.6vw,19px);color:#4A4A46;line-height:1.5}@media (max-width:640px){.x-hrp{padding:110px 18px 200px;min-height:640px}.x-hrp .cmp{border-radius:24px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px)}.x-hrp .cmp textarea{min-height:64px}}@media (prefers-reduced-motion:reduce){.x-hrp *,.x-hrp *::before,.x-hrp *::after{animation:none!important;transition:none!important}}.x-hrp{min-height:820px}.x-hrp{width:1200px;max-width:100%;box-sizing:border-box}

(root) => {const cl=[];const cmpInit=(f,list,cl)=>{if(!f)return;const ta=f.querySelector('textarea'),t=f.querySelector('.cmp-t'),md=f.querySelector('.cmp-mode'),mb=f.querySelector('.cmp-mb'),mic=f.querySelector('.cmp-mic');let li=0,ci=list[0].length,del=false,tm;
const red=matchMedia('(prefers-reduced-motion: reduce)').matches;
const tick=()=>{const w=list[li];if(red){t.textContent=w;return}if(!del){if(ci>=w.length){t.textContent=w;del=true;tm=setTimeout(tick,2200);return}ci++;t.textContent=w.slice(0,ci);if(ci>=w.length){del=true;tm=setTimeout(tick,1600);return}}else{ci--;t.textContent=w.slice(0,ci);if(ci<=0){del=false;li=(li+1)%list.length}}tm=setTimeout(tick,del?35:85)};tick();
const upd=()=>f.classList.toggle('has',ta.value.trim().length>0);ta.addEventListener('input',upd);
const tog=e=>{e.stopPropagation();md.classList.toggle('open')};mb.addEventListener('click',tog);
const pick=e=>{const b=e.target.closest('.cmp-menu button');if(!b)return;md.querySelectorAll('.cmp-menu button').forEach(x=>x.classList.toggle('on',x===b));mb.querySelector('span').textContent=b.textContent;md.classList.remove('open')};md.addEventListener('click',pick);
const out=()=>md.classList.remove('open');document.addEventListener('click',out);
const mc=()=>mic.classList.toggle('rec');mic.addEventListener('click',mc);
const sub=e=>{e.preventDefault();f.classList.add('sent');setTimeout(()=>{f.classList.remove('sent');ta.value='';upd()},500)};f.addEventListener('submit',sub);
cl.push(()=>{clearTimeout(tm);document.removeEventListener('click',out)})};cmpInit(root.querySelector('.cmp'),["一家手作陶器网店…","团队内部的报销工具…","宠物医院的预约页面…","周末市集的活动报名页…"],cl);return ()=>cl.forEach(f=>f())}