/* The stage overlaps the text column by 200px, so the headline must never grow into it (owner
     screenshot, 2026-09-09): capped, it wraps the same three lines at every canvas width. */
  div[style*="grid-template-columns:1fr 560px"] > div > h1 { max-width:740px; }
  .hv, .hv * { box-sizing:border-box; }
  .hv { position:relative; display:flex; align-items:center; color:#1d1b33; font-family:'Sora',sans-serif; }
  .hv-wrap { position:relative; flex:none; width:calc(100% + 200px); margin-left:-200px; aspect-ratio:780/690; overflow:clip; pointer-events:none; }
  .hv-stage { position:absolute; left:0; top:0; width:780px; height:690px; transform-origin:0 0; transform:scale(.9744); }

  .hv-ring { position:absolute; left:373px; top:295px; border-radius:50%; transform:translate(-50%,-50%); }
  .hv-r3 { width:560px; height:560px; background:radial-gradient(circle, rgba(163,78,240,.075) 0%, rgba(163,78,240,.05) 62%, rgba(163,78,240,0) 72%); }
  .hv-r2 { width:400px; height:400px; background:radial-gradient(circle, rgba(163,78,240,.09) 0%, rgba(163,78,240,.075) 70%, rgba(163,78,240,.02) 100%); }
  .hv-r1 { width:262px; height:262px; background:rgba(163,78,240,.10); box-shadow:inset 0 0 40px rgba(163,78,240,.10); }
  .hv-orbit { position:absolute; left:373px; top:295px; border-radius:50%; border:1px dashed rgba(163,78,240,.28); transform:translate(-50%,-50%); }
  .hv-o-out { width:520px; height:520px; }
  .hv-o-in { width:248px; height:248px; }
  .hv-orbit i { position:absolute; inset:0; transform:rotate(var(--a)); }
  .hv-orbit i::after { content:""; position:absolute; left:50%; top:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:#a34ef0; box-shadow:0 0 0 3px rgba(255,255,255,.9); }

  .hv-links { position:absolute; left:0; top:0; width:780px; height:690px; max-width:none; overflow:visible; }
  .hv-ln { fill:none; stroke:rgba(163,78,240,.6); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
  .hv-e { fill:#a34ef0; }

  .hv-orb { position:absolute; left:289px; top:211px; width:168px; height:168px; z-index:3; }
  .hv-ripple { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(163,78,240,.42); opacity:0; }
  .hv-disc { position:absolute; inset:0; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:radial-gradient(circle at 50% 30%, #ffffff 0%, #f8f2fe 55%, #efe2fd 100%);
    box-shadow:0 0 0 9px rgba(255,255,255,.6), 0 0 0 10px rgba(163,78,240,.14), 0 18px 46px rgba(163,78,240,.26), inset 0 -12px 28px rgba(163,78,240,.12);
    transition:box-shadow .5s ease; }
  .hv-orb.hv-boost .hv-disc { box-shadow:0 0 0 9px rgba(255,255,255,.7), 0 0 0 11px rgba(163,78,240,.3), 0 20px 60px rgba(163,78,240,.5), inset 0 -12px 28px rgba(163,78,240,.16); }
  .hv-orb.hv-hit .hv-disc { box-shadow:0 0 0 9px rgba(255,255,255,.7), 0 0 0 12px rgba(163,78,240,.38), 0 22px 64px rgba(163,78,240,.58), inset 0 -12px 28px rgba(163,78,240,.18); }
  .hv-disc svg { width:46px; height:46px; margin-top:-8px; }
  .hv-disc b { font:700 22px 'Sora',sans-serif; letter-spacing:-.02em; color:#1d1b33; }

  .hv-sat { position:absolute; z-index:4; display:flex; align-items:center; gap:12px; padding:12px 14px; background:#ffffff; border:1px solid #e7e4f0; border-radius:12px;
    box-shadow:0 8px 22px rgba(33,25,64,.07); transition:scale .35s ease, box-shadow .35s ease, border-color .35s ease; }
  .hv-sat.hv-lit { scale:1.045; border-color:rgba(163,78,240,.55); box-shadow:0 0 0 4px rgba(163,78,240,.13), 0 14px 32px rgba(163,78,240,.24); }
  .hv-ico { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:none; }
  .hv-ico svg { width:22px; height:22px; }
  .hv-sat b { display:block; font:600 13px/1.2 'Sora',sans-serif; color:#1d1b33; }
  .hv-sat small { display:block; margin-top:3px; font-size:11px; color:#8f8ba6; }

  .hv-ans { position:absolute; left:154px; top:392px; width:441px; z-index:5; padding:22px 22px 18px; background:#ffffff; border-radius:16px;
    border:1px solid rgba(163,78,240,.10); box-shadow:0 24px 56px rgba(33,25,64,.14), 0 2px 6px rgba(33,25,64,.05); transform-origin:50% 100%;
    transition:opacity .6s ease, translate .75s cubic-bezier(.2,.7,.2,1), scale .75s cubic-bezier(.2,.7,.2,1); }
  .hv-lede { margin:0; font-size:13.5px; line-height:1.45; color:#454160; }
  .hv-lede b { font-weight:700; color:#1d1b33; }
  .hv-w { display:inline-block; transition:opacity .4s ease, transform .4s ease; }
  .hv-tbl { margin-top:12px; border:1px solid #e7e4f0; border-radius:10px; overflow:hidden; }
  .hv-tr { display:grid; grid-template-columns:182px 118px 1fr; padding:0 14px; align-items:center; }
  .hv-th { height:30px; background:#f5f5fa; font:500 9px/1 'IBM Plex Mono',monospace; letter-spacing:.08em; color:#8f8ba6; }
  .hv-row { position:relative; height:32px; font-size:12px; color:#1d1b33; border-top:1px solid #e7e4f0; }
  .hv-row > span { transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
  .hv-row > span:nth-child(2) { transition-delay:.06s; } .hv-row > span:nth-child(3) { transition-delay:.12s; }
  .hv-row::before { content:""; position:absolute; left:14px; right:14px; top:50%; height:8px; margin-top:-4px; border-radius:4px; opacity:0;
    background:linear-gradient(90deg, #f2eff8 20%, #e8e3f4 50%, #f2eff8 80%); background-size:220% 100%; transition:opacity .3s ease; }
  .hv-nm { font-weight:500; }
  .hv-out { font-variant-numeric:tabular-nums; }
  .hv-late { color:#a34ef0; font-weight:600; font-variant-numeric:tabular-nums; }
  .hv-foot { margin:11px 0 0; font:400 10.5px 'IBM Plex Mono',monospace; color:#8f8ba6; transition:opacity .5s ease; }
  .hv-btns { display:flex; gap:12px; margin-top:13px; }
  .hv-b { position:relative; height:36px; padding:0 20px; border-radius:999px; display:inline-flex; align-items:center; font:500 11.5px/1 'Sora',sans-serif; white-space:nowrap;
    transition:background .5s ease, color .45s ease .1s, border-color .5s ease, box-shadow .6s ease; }
  .hv-bp { background:#a34ef0; color:#ffffff; border:1px solid transparent; box-shadow:0 8px 18px rgba(163,78,240,.32); }
  .hv-bs { background:#ffffff; color:#454160; border:1px solid #e7e4f0; }
  .hv-btns.hv-go .hv-bp::after { content:""; position:absolute; inset:-4px; border-radius:999px; border:2px solid rgba(163,78,240,.55); animation:hv-ringpulse 1.5s ease-out infinite; }

  .hv-note { position:absolute; left:630px; top:440px; width:150px; height:200px; z-index:6; }
  .hv-note-t { position:absolute; left:10px; top:34px; transform:rotate(-17deg); transform-origin:left top; white-space:nowrap;
    font:700 22px/1.12 'Segoe Print','Bradley Hand','Chalkboard SE',cursive; color:#8a3fd1; }
  .hv-note-t span { display:block; transition:clip-path .55s ease; }
  .hv-note-t span:nth-child(2) { transition-delay:.25s; } .hv-note-t span:nth-child(3) { transition-delay:.5s; }
  .hv-note svg { position:absolute; overflow:visible; max-width:none; }
  .hv-spark { left:70px; top:-4px; width:46px; height:46px; transition:opacity .4s ease .7s; }
  .hv-arrow { left:-8px; top:112px; width:84px; height:56px; }
  .hv-arrow path { fill:none; stroke:#8a3fd1; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset .8s ease .85s; }
  .hv-arrow path.hv-head { transition-delay:1.45s; transition-duration:.35s; }

  /* the verb strip in the text column, once the script has wired it (.hv-sync) */
  .hv-sync > .hv-cell { position:relative; }
  .hv-fill { position:absolute; top:-1px; left:0; height:2px; width:0; background:#a34ef0; border-radius:2px; }
  .hv-sync > .hv-cell.hv-on .hv-fill { animation:hv-fillbar var(--dur,3s) linear forwards; }
  .hv-sync > .hv-cell.hv-done .hv-fill { width:100%; opacity:.35; transition:opacity .4s; }
  .hv-sync > .hv-cell > div:first-child { color:#1d1b33 !important; transition:color .4s ease; }
  .hv-sync > .hv-cell.hv-on > div:first-child { color:#a34ef0 !important; }

  /* motion — only once the script runs, never under reduced motion */
  .hv-js .hv-ring { opacity:0; scale:.6; animation:hv-ringin 1.3s cubic-bezier(.2,.7,.2,1) var(--d,0s) forwards; }
  .hv-js .hv-orbit { opacity:0; animation:hv-fadein 1s ease 1s forwards, hv-spin var(--sp) linear infinite; }
  .hv-js .hv-o-out { --sp:140s; } .hv-js .hv-o-in { --sp:90s; animation-direction:normal, reverse; }
  .hv-js .hv-ln { stroke-dashoffset:1; animation:hv-draw 1.1s ease var(--d,1s) forwards; }
  .hv-js .hv-e { opacity:0; animation:hv-fadein .5s ease var(--d,1s) forwards; }
  .hv-js .hv-orb { opacity:0; scale:.7; animation:hv-orbin .95s cubic-bezier(.2,.8,.2,1) .25s forwards; }
  .hv-js .hv-ripple { animation:hv-ripple 3.8s ease-out infinite; }
  .hv-js .hv-ripple:nth-child(2) { animation-delay:1.25s; } .hv-js .hv-ripple:nth-child(3) { animation-delay:2.5s; }
  .hv-js .hv-orb.hv-boost .hv-ripple { animation-duration:2s; border-color:rgba(163,78,240,.6); }
  .hv-js .hv-disc { animation:hv-breathe 4.4s ease-in-out infinite; }
  .hv-js .hv-disc svg { animation:hv-tilt 6s ease-in-out infinite; }
  .hv-js .hv-sat { opacity:0; animation:hv-satin .85s cubic-bezier(.2,.7,.2,1) var(--d,.6s) forwards, hv-float var(--fd,6s) ease-in-out calc(var(--d,.6s) + .85s) infinite; }
  .hv-js .hv-ans { opacity:0; translate:0 24px; scale:.97; }
  .hv-js .hv-ans.hv-show { opacity:1; translate:0 0; scale:1; }
  .hv-js .hv-w { opacity:0; transform:translateY(5px); }
  .hv-js .hv-lede.hv-show .hv-w { opacity:1; transform:none; }
  .hv-js .hv-row > span { opacity:0; transform:translateY(5px); }
  .hv-js .hv-row.hv-show > span { opacity:1; transform:none; }
  .hv-js .hv-row::before { opacity:1; animation:hv-shimmer 1.5s linear infinite; }
  .hv-js .hv-row.hv-show::before { opacity:0; animation:none; }
  .hv-js .hv-foot { opacity:0; } .hv-js .hv-foot.hv-show { opacity:1; }
  .hv-js .hv-b { background:#f3f1f8; color:transparent; border-color:transparent; box-shadow:none; }
  .hv-js .hv-btns.hv-show .hv-bp { background:#a34ef0; color:#ffffff; box-shadow:0 8px 18px rgba(163,78,240,.32); }
  .hv-js .hv-btns.hv-show .hv-bs { background:#ffffff; color:#454160; border-color:#e7e4f0; transition-delay:.12s, .22s, .12s, .12s; }
  .hv-js .hv-note-t span { clip-path:inset(0 100% 0 0); }
  .hv-js .hv-note.hv-show .hv-note-t span { clip-path:inset(0 0 0 0); }
  .hv-js .hv-spark { opacity:0; } .hv-js .hv-note.hv-show .hv-spark { opacity:1; }
  .hv-js .hv-note.hv-show .hv-spark path { animation:hv-twinkle 2.2s ease-in-out 1.2s infinite; }
  .hv-js .hv-arrow path { stroke-dashoffset:1; } .hv-js .hv-note.hv-show .hv-arrow path { stroke-dashoffset:0; }

  @keyframes hv-ringin { to { opacity:1; scale:1; } }
  @keyframes hv-fadein { to { opacity:1; } }
  @keyframes hv-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
  @keyframes hv-draw { to { stroke-dashoffset:0; } }
  @keyframes hv-orbin { to { opacity:1; scale:1; } }
  @keyframes hv-ripple { 0% { scale:1; opacity:.6; } 100% { scale:2.5; opacity:0; } }
  @keyframes hv-breathe { 0%,100% { scale:1; } 50% { scale:1.035; } }
  @keyframes hv-tilt { 0%,100% { rotate:0deg; } 50% { rotate:8deg; } }
  @keyframes hv-satin { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
  @keyframes hv-float { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
  @keyframes hv-shimmer { from { background-position:120% 0; } to { background-position:-120% 0; } }
  @keyframes hv-ringpulse { 0% { opacity:.9; scale:.96; } 100% { opacity:0; scale:1.18; } }
  @keyframes hv-twinkle { 0%,100% { opacity:1; } 50% { opacity:.35; } }
  @keyframes hv-fillbar { from { width:0; } to { width:100%; } }

  @media (max-width:767px) {
    .hv-wrap { width:100%; margin-left:0; }
    .hv-stage { transform:scale(.4590); }   /* the script refits it to the real column width */
  }
  @media (prefers-reduced-motion: reduce) {
    .hv *, .hv *::before, .hv *::after { animation:none !important; transition:none !important; }
  }