Glow Prompt Hero

.x-gph{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-gph,.x-gph *{box-sizing:border-box}.x-gph a{color:inherit;text-decoration:none}.x-gph button{font:inherit;cursor:pointer}.x-gph .lg-mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#8B5CF6,#6D28D9);display:inline-grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 14px -4px rgba(124,58,237,.7);flex:none}.x-gph .lg-mark svg{width:60%;height:60%}.x-gph{position:relative;width:100%;overflow:hidden;background:#07060B;color:#fff;padding:72px 0 80px;isolation:isolate}.x-gph .gph-rain{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.55}.x-gph .gph-glow{position:absolute;z-index:-1;left:-10%;right:-10%;top:-40%;height:120%;background:radial-gradient(60% 55% at 40% 18%,rgba(167,139,250,.9),rgba(109,40,217,.55) 40%,transparent 74%);filter:blur(10px);animation:gph-breathe 8s ease-in-out infinite}.x-gph .gph-in{max-width:1200px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.x-gph .gph-badge{display:inline-flex;gap:6px;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:4px 8px;border-radius:4px}.x-gph .gph-badge b{color:#fff;font-weight:600}.x-gph h1{margin:16px 0 14px;font-size:clamp(34px,3.6vw,50px);line-height:1.18;font-weight:600;letter-spacing:-.02em}.x-gph h1 .d{color:rgba(196,181,253,.72);font-weight:500}.x-gph .gph-flow{margin:0;font-size:15px;color:rgba(255,255,255,.82)}.x-gph .gph-cta{display:flex;gap:10px;margin:30px 0 34px;flex-wrap:wrap}.x-gph .gph-cta a{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:10px;font-size:15px;font-weight:500;transition:transform .2s,box-shadow .2s,background .2s}.x-gph .gph-b1{background:linear-gradient(180deg,#8B5CF6,#6D28D9);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px -10px rgba(139,92,246,.9);border:1px solid rgba(196,181,253,.5)}.x-gph .gph-b1:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 36px -10px rgba(139,92,246,1)}.x-gph .gph-b2{background:linear-gradient(180deg,#3A3A40,#232328);border:1px solid rgba(255,255,255,.14)}.x-gph .gph-b2:hover{background:linear-gradient(180deg,#45454c,#2a2a30)}.x-gph .gph-cap{margin:0 0 12px;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75)}.x-gph .gph-mq{overflow:hidden;contain:inline-size;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.x-gph .gph-track{display:flex;gap:30px;width:max-content;animation:gph-mq 26s linear infinite}.x-gph .gph-tool{display:flex;align-items:center;gap:8px;font-size:16px;color:rgba(255,255,255,.62);white-space:nowrap}.x-gph .gph-tool b{font-weight:600}.x-gph .tl-ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;filter:grayscale(1) brightness(1.6);opacity:.7}.x-gph .tl-ic svg{width:15px;height:15px}.x-gph .gph-player{position:relative;aspect-ratio:16/11;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -30px rgba(124,58,237,.8)}.x-gph .gph-player img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:gph-kb 18s ease-in-out infinite alternate}.x-gph .gph-player.paused img{animation-play-state:paused}.x-gph .gph-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,11,.1),rgba(7,6,11,.55))}.x-gph .gph-big{position:absolute;left:50%;top:45%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.8);transition:all .3s}.x-gph .gph-player.paused .gph-big{opacity:1;transform:none}.x-gph .gph-bar{position:absolute;left:12px;right:12px;bottom:12px;height:46px;border-radius:12px;background:rgba(40,40,46,.82);backdrop-filter:blur(10px);display:flex;align-items:center;gap:12px;padding:0 12px;font-size:13px}.x-gph .gph-bar button{border:0;background:none;color:#fff;display:grid;place-items:center;padding:4px}.x-gph .gph-pp .i-play,.x-gph .paused .gph-pp .i-pause{display:none}.x-gph .paused .gph-pp .i-play{display:block}.x-gph .gph-time{font-variant-numeric:tabular-nums;white-space:nowrap}.x-gph .gph-prog{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}.x-gph .gph-prog u{display:block;height:100%;width:0;background:#fff;border-radius:3px}@keyframes gph-mq{to{transform:translateX(-50%)}}@keyframes gph-kb{to{transform:scale(1.14) translate(-2%,1%)}}@keyframes gph-breathe{50%{opacity:.75}}@media (max-width:900px){.x-gph .gph-in{grid-template-columns:1fr;gap:40px;padding:0 18px}.x-gph{padding:44px 0 50px}.x-gph .gph-cta a{flex:1 1 100%;justify-content:center;height:52px}.x-gph .gph-cap{text-align:center}.x-gph .gph-l{text-align:center}.x-gph h1{font-size:30px}}@media (prefers-reduced-motion:reduce){.x-gph *{animation:none!important;transition:none!important}}.x-gph{width:1200px;max-width:100%;box-sizing:border-box}

(root) => {
  const cv = root.querySelector('.gph-rain');
  const ctx = cv.getContext('2d');
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const chars = '01<>/{}[]=+棱页#*';
  let cols = [], raf = 0, w = 0, h = 0, last = 0;
  const size = () => {
    const r = root.getBoundingClientRect(); w = cv.width = Math.max(1, Math.round(r.width)); h = cv.height = Math.max(1, Math.round(r.height));
    cols = Array.from({ length: Math.ceil(w / 18) }, () => Math.random() * h);
  };
  const draw = (t) => {
    if (t - last > 70) {
…