.loom{--u:max(calc(100vw / 1200), calc(min(100svh, 56rem) / 800));--gap:calc(110 * var(--u));--len:calc(1200 * var(--u));pointer-events:none;height:min(100svh,56rem);color:var(--thread);position:absolute;inset:0 0 auto;overflow:hidden}.loom-thread,.loom-track{top:50%;left:calc(50% + var(--k) * var(--gap));width:var(--len);height:1px;margin-top:-.5px;position:absolute;transform:translate(-50%)rotate(45deg)}.loom-weft{transform:translate(-50%)rotate(135deg)}.loom-thread{opacity:calc(.16 * var(--w))}.loom-thread i{transform-origin:0;background:currentColor;height:100%;display:block}.loom-knot,.loom-ripple{top:calc(50% + var(--ky) * var(--gap));left:calc(50% + var(--kx) * var(--gap));background:var(--bg);border-radius:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;position:absolute;box-shadow:inset 0 0 0 1px #2d3a5c8c}.loom-ripple{box-shadow:0 0 0 1px var(--accent-warm);opacity:0;background:0 0}.loom-track b{width:calc(150 * var(--u));opacity:0;background:linear-gradient(90deg,#0000,#a08b6dbf 62%,#0000);position:absolute;inset:-1px auto -1px 0}.loom-shuttle{opacity:0;background:linear-gradient(90deg,#fafaf759 38%,#fafaf700 47% 53%,#fafaf759 62%);width:300%;position:absolute;top:0;bottom:0;left:-100%}.loom-sky{background:radial-gradient(55% 65% at 6% 18%,#587ac43d,#0000 72%),radial-gradient(50% 60% at 96% 26%,#4062b033,#0000 72%),radial-gradient(75% 40% at 50% 100%,#7694d42e,#0000 72%);position:absolute;inset:0}.loom-veil{background:radial-gradient(ellipse 46% 40% at 50% 42%, #fafaf7eb 30%, #fafaf700 100%), linear-gradient(to bottom, transparent 66%, var(--bg));position:absolute;inset:0}@media (max-width:600px){.loom-veil{background:radial-gradient(ellipse 85% 42% at 50% 42%, #fafaf7e6 30%, #fafaf700 100%), linear-gradient(to bottom, transparent 66%, var(--bg))}}@media (prefers-reduced-motion:no-preference){.loom-thread i{animation:loom-draw 2.2s cubic-bezier(.16, 1, .3, 1) calc(var(--d) * 70ms) both}.loom-weft i{animation-delay:calc(.35s + var(--d) * 70ms)}.loom-shuttle{animation:1.6s ease-out 2.4s both loom-shuttle-in,12s ease-in-out 2.4s infinite alternate both loom-shuttle}.loom-knot{animation:loom-knot-in .7s cubic-bezier(.16, 1, .3, 1) calc(2.2s + var(--n) * 90ms) both}.loom-track b{animation:loom-glint 18s linear calc(var(--gd) * 1s) infinite}.loom-ripple{animation:loom-ripple 18s ease-out calc(var(--rd) * 1s) infinite}.loom[data-paused] *,.loom[data-paused] :before{animation-play-state:paused}@keyframes loom-draw{0%{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}@keyframes loom-shuttle-in{0%{opacity:0}to{opacity:1}}@keyframes loom-shuttle{0%{transform:translate(-23%)}to{transform:translate(23%)}}@keyframes loom-knot-in{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}@keyframes loom-glint{0%{opacity:0;transform:translate(-100%)}4%{opacity:1}30%{opacity:1}34%,to{opacity:0;transform:translate(800%)}}@keyframes loom-ripple{0%{opacity:.9;transform:scale(1)}7%,to{opacity:0;transform:scale(3.4)}}}