.hero-field{width:100%;height:100%;position:relative}.hero-field svg{width:100%;height:100%;display:block;overflow:visible}.hero-field[data-variant=flow] svg{-webkit-mask-image:linear-gradient(to bottom, transparent 2%, var(--color-ink) 24%);mask-image:linear-gradient(to bottom, transparent 2%, var(--color-ink) 24%)}.hf-halo-core{stop-color:color-mix(in srgb, var(--color-brand) 12%, var(--color-selected));stop-opacity:1}.hf-halo-edge{stop-color:var(--color-selected);stop-opacity:0}.hf-halo{fill:var(--halo)}.hf-line{fill:none;stroke:color-mix(in srgb, var(--color-brand) 38%, var(--color-paper));stroke-width:1.5px;stroke-linecap:round}.hf-glow,.hf-pulse{fill:none;stroke-linecap:round;opacity:0}.hf-glow{stroke:var(--color-selected);stroke-width:14px;stroke-dasharray:120 1000;filter:blur(4px)}.hf-pulse{stroke:var(--color-brand);stroke-width:2.5px;stroke-dasharray:90 1000}.hf-node{fill:var(--color-paper);stroke:var(--color-brand);stroke-width:1.5px}.hf-ring{fill:none;stroke:color-mix(in srgb, var(--color-brand) 30%, var(--color-paper));stroke-width:1.25px;transform-box:view-box;transform-origin:200px 250px}.hf-orbit{transform-box:view-box;transform-origin:200px 250px}.hf-trail{fill:none;stroke:var(--color-brand);stroke-width:2.5px;stroke-linecap:round;opacity:.28}.hf-comet{fill:var(--color-brand)}.hf-core{fill:var(--color-paper);stroke:color-mix(in srgb, var(--color-brand) 30%, var(--color-paper));stroke-width:1.25px}.hf-core-dot{fill:var(--color-brand)}.hf-axis{fill:none;stroke:var(--color-brand);stroke-width:1.5px;stroke-dasharray:3 9;stroke-linecap:round}.hf-return{fill:none;stroke:color-mix(in srgb, var(--color-brand) 40%, var(--color-paper));stroke-width:1.25px;stroke-dasharray:3 9;stroke-linecap:round}.hf-gland-halo{fill:var(--color-selected)}.hf-gland{fill:var(--color-paper);stroke:var(--color-brand);stroke-width:2px}.hf-wave-base{fill:none;stroke:color-mix(in srgb, var(--color-brand) 16%, var(--color-paper));stroke-width:10px;stroke-linecap:round}.hf-wave{fill:none;stroke:var(--color-brand);stroke-width:2px;stroke-linecap:round}@media (prefers-reduced-motion:no-preference){.hero-field[data-motion] svg{animation:hf-in var(--duration-cinematic) var(--ease-cinematic) both}.hero-field[data-motion] .hf-line,.hero-field[data-motion] .hf-wave{stroke-dasharray:1000;animation:hf-draw calc(var(--duration-cinematic) * 1.6) var(--ease-cinematic) both;animation-delay:calc(var(--k,0) * var(--duration-micro))}.hero-field[data-motion] .hf-glow,.hero-field[data-motion] .hf-pulse{animation:hf-run calc(var(--duration-cinematic) * 4) var(--ease-standard) infinite paused;animation-delay:calc(var(--duration-cinematic) + var(--k) * var(--duration-slow))}.hero-field[data-motion] .hf-ring{animation:hf-breathe calc(var(--duration-cinematic) * 7) var(--ease-standard) infinite paused;animation-delay:calc(var(--k) * var(--duration-slow))}.hero-field[data-motion] .hf-orbit{animation:hf-orbit calc(var(--duration-cinematic) * 7) cubic-bezier(.55, 0, .45, 1) infinite paused}.hero-field[data-motion] .hf-axis,.hero-field[data-motion] .hf-return{animation:hf-dash calc(var(--duration-cinematic) * 5) linear infinite paused}.hero-field[data-motion] .hf-gland-halo{transform-box:fill-box;transform-origin:50%;animation:hf-gland calc(var(--duration-cinematic) * 5) var(--ease-standard) infinite paused;animation-delay:calc(var(--k) * var(--duration-slow) * 2)}.hero-field[data-playing] :is(.hf-glow,.hf-pulse,.hf-ring,.hf-orbit,.hf-axis,.hf-return,.hf-gland-halo){animation-play-state:running}}@keyframes hf-in{0%{opacity:0}}@keyframes hf-draw{0%{stroke-dashoffset:1000px}to{stroke-dashoffset:0}}@keyframes hf-run{0%{opacity:1;stroke-dashoffset:120px}70%{opacity:1}to{opacity:0;stroke-dashoffset:-1000px}}@keyframes hf-breathe{0%,to{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.03)}}@keyframes hf-orbit{to{transform:rotate(360deg)}}@keyframes hf-dash{to{stroke-dashoffset:-120px}}@keyframes hf-gland{0%,to{opacity:.7;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}.hero-field:not([data-motion]) .hf-pulse{opacity:1;stroke-dashoffset:-420px}.hero-field:not([data-motion]) .hf-glow{opacity:.8;stroke-dashoffset:-400px}@media (forced-colors:active){.hf-halo,.hf-gland-halo{fill:none}}