.hero-art{--hero-hue:0deg;--ha-stroke:color-mix(in srgb, var(--text) 62%, transparent);--w-t:color-mix(in srgb, var(--text) 86%, var(--bg-sunk));--w-l:color-mix(in srgb, var(--text) 70%, var(--bg-sunk));--w-r:color-mix(in srgb, var(--text) 56%, var(--bg-sunk));--d-t:color-mix(in srgb, var(--text) 30%, var(--bg-sunk));--d-l:color-mix(in srgb, var(--text) 18%, var(--bg-sunk));--d-r:color-mix(in srgb, var(--text) 11%, var(--bg-sunk));--m-t:color-mix(in srgb, var(--text) 36%, var(--bg-sunk));--s-t:color-mix(in srgb, var(--text) 66%, var(--bg-sunk));--s-l:color-mix(in srgb, var(--text) 50%, var(--bg-sunk));--s-r:color-mix(in srgb, var(--text) 40%, var(--bg-sunk));--s-d:color-mix(in srgb, var(--text) 24%, var(--bg-sunk));--g-t:color-mix(in srgb, var(--text) 52%, var(--bg-sunk));--g-l:color-mix(in srgb, var(--text) 36%, var(--bg-sunk));--lf:color-mix(in srgb, var(--text) 20%, var(--bg-sunk));--a-t:color-mix(in srgb, white 14%, var(--accent));--a-l:var(--accent);--a-r:color-mix(in srgb, var(--accent) 62%, var(--bg-sunk));margin:0;position:relative}@media (width>=900px){.hero-art{margin-right:-2vw}}.ha-wrap{position:relative}.ha-stage{aspect-ratio:4/3;width:100%;position:relative}.ha-stage>svg,.ha-render,.ha-wave,.ha-reveal,.ha-reveal picture,.ha-reveal img,.ha-dim{width:100%;height:100%;display:block;position:absolute;inset:0}.ha-stage svg{pointer-events:none;overflow:visible}.ha-reveal img{object-fit:contain;user-select:none;-webkit-user-drag:none}.ha-fills .white-t{fill:var(--w-t)}.ha-fills .white-l{fill:var(--w-l)}.ha-fills .white-r{fill:var(--w-r)}.ha-fills .dark-t{fill:var(--d-t)}.ha-fills .dark-l{fill:var(--d-l)}.ha-fills .dark-r{fill:var(--d-r)}.ha-fills .mid-t{fill:var(--m-t)}.ha-fills .sand-t{fill:var(--s-t)}.ha-fills .sand-l{fill:var(--s-l)}.ha-fills .sand-r{fill:var(--s-r)}.ha-fills .sand-d{fill:var(--s-d)}.ha-fills .gold-t{fill:var(--g-t)}.ha-fills .gold-l{fill:var(--g-l)}.ha-fills .leaf{fill:var(--lf)}.ha-fills .acc-t{fill:var(--a-t)}.ha-fills .acc-l{fill:var(--a-l)}.ha-fills .acc-r{fill:var(--a-r)}.ha-lines *{fill:none;stroke:var(--ha-stroke);stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px}.ha-lines .edge{stroke:var(--accent);stroke-width:4px}.ha-lines .wave,.ha-lines .leafln,.ha-lines .thin{stroke-width:1px;opacity:.7}.ha-lines .ring{stroke:color-mix(in srgb, var(--text) 80%, transparent);stroke-width:2px}.ha-lines .acc-l,.ha-lines .acc-r{stroke:color-mix(in srgb, var(--accent) 45%, white)}.ha-render{-webkit-mask-composite:source-in;clip-path:inset(0 0 0 calc(var(--s,0) * 1%));-webkit-mask-image:linear-gradient(90deg,#0000,#000 2.4% 97.6%,#0000),linear-gradient(#0000,#000 6% 94%,#0000);mask-image:linear-gradient(90deg,#0000,#000 2.4% 97.6%,#0000),linear-gradient(#0000,#000 6% 94%,#0000);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:border-box,border-box;mask-clip:border-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;mask-composite:intersect;mask-mode:match-source,match-source}.ha-reveal picture{filter:hue-rotate(var(--hero-hue))}.ha-dim{opacity:0;background:#0a0c0b}.ha-wave{opacity:0;mix-blend-mode:screen;pointer-events:none;background:radial-gradient(60% 60%,#fff3d6,#ffc783)}.ha-bloom{opacity:0;mix-blend-mode:screen}.ha-bloom path,.ha-bloom ellipse{fill:none;stroke-width:7px;stroke-linecap:round;filter:blur(5px)}.ha-dims path{fill:none;stroke:color-mix(in srgb, var(--text) 78%, transparent);stroke-width:1.2px;stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round}.ha-dtext{fill:color-mix(in srgb, var(--text) 82%, transparent);font:300 30px var(--f-text);letter-spacing:.1em}.ha-glow{pointer-events:none;z-index:-1;opacity:.75;background:radial-gradient(48% 46% at 52% 52%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%), radial-gradient(30% 24% at 30% 62%, #ffbe7824, transparent 70%);position:absolute;inset:-14% -10%}.ha-tilt{transform-origin:50% 55%}.ha-range{z-index:5;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none;background:0 0;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.ha-range::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:2px;height:100%}.ha-range::-moz-range-thumb{background:0 0;border:0;width:2px;height:100%}.ha-split{z-index:4;top:0;bottom:0;left:calc(var(--s,0) * 1%);pointer-events:none;width:0;position:absolute}.ha-split:before{content:"";background:linear-gradient(#0000,#ffffffd9 12% 88%,#0000);width:1.5px;position:absolute;top:4%;bottom:4%;left:-.75px}.ha-knob{color:#fff;background:color-mix(in srgb, var(--accent) 72%, #000);width:38px;height:38px;transform:translateX(clamp(0px, calc(24px - var(--s,0) * 12.8px), 24px));border:1px solid #fff9;border-radius:50%;place-items:center;margin:-19px 0 0 -19px;display:grid;position:absolute;top:50%;left:0;box-shadow:0 6px 18px #00000073}.ha-knob svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.ha-range:focus-visible+.ha-split .ha-knob{outline:2px solid var(--focus);outline-offset:3px}.ha-tag{z-index:4;letter-spacing:.12em;text-transform:uppercase;color:#fff;pointer-events:none;background:#0a0c0b8c;border:1px solid #ffffff29;border-radius:99px;padding:.18rem .55rem;font-size:.68rem;position:absolute;top:8px}.ha-tag--l{opacity:calc(var(--s,0) * .1);left:8px}.ha-tag--r{opacity:.9;right:8px}.ha:not([data-js]) .js-only,.ha[data-state=intro] .js-only:not(.ha-replay){display:none}.ha figcaption{color:var(--text-soft);justify-content:space-between;align-items:center;gap:1rem;margin-top:.55rem;font-size:.78rem;display:flex}.ha-cap em{color:var(--accent-text);font-style:normal}.ha-replay{all:unset;color:var(--text-soft);opacity:.6;cursor:pointer;border-radius:4px;align-items:center;gap:.35rem;padding:.25rem .4rem;font-size:.74rem;transition:opacity .2s;display:inline-flex}.ha-replay:hover,.ha-replay:focus-visible{opacity:1;color:var(--text)}.ha-replay:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.ha-replay svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:13px;height:13px}.ha:not([data-state=intro]) .ha-lines *{stroke-dashoffset:0}.ha:not([data-state=intro]) .ha-tilt{transform:perspective(1400px) rotateX(calc(var(--py,0) * -1.6deg)) rotateY(calc(var(--px,0) * 2.2deg));transition:transform .5s cubic-bezier(.22,.61,.36,1)}.ha:not([data-state=intro]) .ha-glow{transform:translate3d(calc(var(--px,0) * -16px), calc(var(--py,0) * -10px), 0);transition:transform .6s cubic-bezier(.22,.61,.36,1)}.ha[data-state=intro] .ha-lines *,.ha[data-state=intro] .ha-fills,.ha[data-state=intro] .ha-reveal,.ha[data-state=intro] .ha-dim,.ha[data-state=intro] .ha-wave,.ha[data-state=intro] .ha-bloom,.ha[data-state=intro] .ha-glow,.ha[data-state=intro] .ha-dims path,.ha[data-state=intro] .ha-dtext,.ha[data-state=intro] .ha-reveal img{animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both}.ha[data-state=intro] .ha-lines *{animation-name:ha-draw;animation-duration:1.1s;animation-delay:calc(var(--i,0) * 22ms + .1s - var(--seek,0s))}.ha[data-state=intro] .ha-fills{opacity:0;animation-name:ha-in;animation-duration:1.1s;animation-delay:calc(1.5s - var(--seek,0s))}.ha[data-state=intro] .ha-dims path{stroke-dashoffset:1px;animation-name:ha-draw;animation-duration:1.2s;animation-delay:calc(.5s - var(--seek,0s))}.ha[data-state=intro] .ha-dtext{opacity:0;animation-name:ha-in;animation-duration:.7s;animation-delay:calc(1.6s - var(--seek,0s))}.ha[data-state=intro] .ha-reveal{animation-name:ha-sweep;animation-duration:2.3s;animation-delay:calc(2.3s - var(--seek,0s));animation-timing-function:cubic-bezier(.45,0,.35,1);-webkit-mask:linear-gradient(62deg,#000 0 40%,#0000 58% 100%) 100% 0/260% 260% no-repeat;mask:linear-gradient(62deg,#000 0 40%,#0000 58% 100%) 100% 0/260% 260% no-repeat}.ha[data-state=intro] .ha-wave{-webkit-mask:linear-gradient(62deg,#0000 0 45%,#000 49%,#0000 53% 100%) 100% 0/260% 260% no-repeat;opacity:.38;animation-name:ha-sweep;animation-duration:2.3s;animation-delay:calc(2.3s - var(--seek,0s));animation-timing-function:cubic-bezier(.45,0,.35,1);mask:linear-gradient(62deg,#0000 0 44%,#000 49%,#0000 54% 100%) 100% 0/260% 260% no-repeat}.ha[data-state=intro] .ha-dim{animation-name:ha-dimout;animation-duration:2.4s;animation-delay:calc(2.3s - var(--seek,0s))}.ha[data-state=intro] .ha-reveal img{animation-name:ha-blur;animation-duration:2.6s;animation-delay:calc(2.3s - var(--seek,0s))}.ha[data-state=intro] .ha-bloom--0{animation:ha-bloom 1.9s calc(2.6s - var(--seek,0s)) both}.ha[data-state=intro] .ha-bloom--1{animation:ha-bloom 1.9s calc(3.05s - var(--seek,0s)) both}.ha[data-state=intro] .ha-bloom--2{animation:ha-bloom 1.9s calc(3.45s - var(--seek,0s)) both}.ha[data-state=intro] .ha-glow{opacity:0;animation-name:ha-in-glow;animation-duration:1.8s;animation-delay:calc(3s - var(--seek,0s))}.ha[data-paused] *{animation-play-state:paused!important}@keyframes ha-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes ha-in{0%{opacity:0}to{opacity:1}}@keyframes ha-in-glow{0%{opacity:0}to{opacity:.75}}@keyframes ha-sweep{0%{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 100%;mask-position:0 100%}}@keyframes ha-dimout{0%{opacity:.62}to{opacity:0}}@keyframes ha-blur{0%{filter:blur(7px)brightness(.85)}to{filter:blur()brightness()}}@keyframes ha-bloom{0%{opacity:0}40%{opacity:.95}to{opacity:0}}@media (width<=899px){.ha-glow{inset:-8% -4%}.ha-knob{width:34px;height:34px;margin:-17px 0 0 -17px}.ha-tag{font-size:.6rem}}@media (prefers-reduced-motion:reduce){.ha .ha-tilt,.ha .ha-glow{transition:none;transform:none}}
