/* askarkie.au hero: the systems wheel (52 systems). GENERATED by
   strategy-and-marketing/marketing-materials/systems-wheel/build.py — edit the names in
   linkedin-graphics/systems-strip/build.py and re-run; never edit this file.
   Same design as the sign-in hero (templates/_auth_hero_css.html), prefixed .wh. */
.wh { --wt: #7de8cb; }
.wh-stage { position: relative; width: min(540px, 100%); aspect-ratio: 1; margin: 0 auto; }
.wh-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wh-ring .nr { transform-origin: 0 0; animation: wh-turn linear infinite; }
.wh-ring circle { fill: none; stroke: rgba(125, 232, 203, .12); stroke-width: 1; }
.wh-ring text { font: 500 12px 'Inter', sans-serif; fill: #a9bfcf; }
.wh-pulses .pl { transform: rotate(var(--a)); }
.wh-pulses line { fill: none; stroke: var(--wt); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 14 200;
  stroke-dashoffset: 14; opacity: 0; filter: drop-shadow(0 0 5px var(--wt));
  animation: wh-in 62.4s linear infinite; animation-delay: var(--d); }
.wh-pulses circle { fill: #c8fff0; opacity: 0; transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 8px var(--wt)); animation: wh-hit 62.4s linear infinite; animation-delay: var(--d); }
.wh-logo { position: absolute; inset: 30%; perspective: 900px; display: flex; align-items: center; justify-content: center; }
.wh-logo::before { content: ''; position: absolute; inset: -18%; background: radial-gradient(circle, rgba(125, 232, 203, .28), transparent 62%);
  filter: blur(18px); animation: wh-glow 4s ease-in-out infinite; }
.wh-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: wh-spin 9s linear infinite; }
.wh-spin svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #2f7f6b; }
.wh-spin svg:last-child { fill: var(--wt); filter: drop-shadow(0 0 14px rgba(125, 232, 203, .55)); }
.wh-ring tspan.ok { fill: var(--wt); }
.wh-ring tspan.rd { fill: #eef4f8; }
.wh-ring tspan.cs { fill: #5f7486; }
.wh-note { display: flex; justify-content: center; gap: 18px; color: var(--ink-faint); font-size: .74rem; margin: 4px 0 0; }
.wh-note span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.wh-note .ok { color: #7de8cb; }
.wh-note .ok::before { background: #7de8cb; }
.wh-note .rd { color: #eef4f8; }
.wh-note .rd::before { background: #eef4f8; }
.wh-note .cs { color: #8396a6; }
.wh-note .cs::before { background: #5f7486; }
@keyframes wh-turn { to { transform: rotate(360deg); } }
@keyframes wh-spin { to { transform: rotateY(360deg); } }
@keyframes wh-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes wh-in { 0% { stroke-dashoffset: 14; opacity: 0; } .1% { opacity: 1; } 1.25% { stroke-dashoffset: -114; opacity: 1; } 1.4%, 100% { stroke-dashoffset: -114; opacity: 0; } }
@keyframes wh-hit { 0%, 1% { opacity: 0; transform: scale(.4); } 1.25% { opacity: 1; transform: scale(1.6); } 1.8%, 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .wh-ring .nr, .wh-pulses line, .wh-pulses circle, .wh-logo::before, .wh-spin { animation: none; }
  .wh-spin { transform: rotateY(-18deg); }
}
.wh-pulses .pl:nth-child(1) { --a: 0.0deg; --d: 0.0s; }
.wh-pulses .pl:nth-child(2) { --a: 137.5deg; --d: 1.2s; }
.wh-pulses .pl:nth-child(3) { --a: 275.0deg; --d: 2.4s; }
.wh-pulses .pl:nth-child(4) { --a: 52.5deg; --d: 3.6s; }
.wh-pulses .pl:nth-child(5) { --a: 190.0deg; --d: 4.8s; }
.wh-pulses .pl:nth-child(6) { --a: 327.5deg; --d: 6.0s; }
.wh-pulses .pl:nth-child(7) { --a: 105.0deg; --d: 7.2s; }
.wh-pulses .pl:nth-child(8) { --a: 242.5deg; --d: 8.4s; }
.wh-pulses .pl:nth-child(9) { --a: 20.0deg; --d: 9.6s; }
.wh-pulses .pl:nth-child(10) { --a: 157.5deg; --d: 10.8s; }
.wh-pulses .pl:nth-child(11) { --a: 295.0deg; --d: 12.0s; }
.wh-pulses .pl:nth-child(12) { --a: 72.5deg; --d: 13.2s; }
.wh-pulses .pl:nth-child(13) { --a: 210.0deg; --d: 14.4s; }
.wh-pulses .pl:nth-child(14) { --a: 347.5deg; --d: 15.6s; }
.wh-pulses .pl:nth-child(15) { --a: 125.0deg; --d: 16.8s; }
.wh-pulses .pl:nth-child(16) { --a: 262.5deg; --d: 18.0s; }
.wh-pulses .pl:nth-child(17) { --a: 40.0deg; --d: 19.2s; }
.wh-pulses .pl:nth-child(18) { --a: 177.5deg; --d: 20.4s; }
.wh-pulses .pl:nth-child(19) { --a: 315.0deg; --d: 21.6s; }
.wh-pulses .pl:nth-child(20) { --a: 92.5deg; --d: 22.8s; }
.wh-pulses .pl:nth-child(21) { --a: 230.0deg; --d: 24.0s; }
.wh-pulses .pl:nth-child(22) { --a: 7.5deg; --d: 25.2s; }
.wh-pulses .pl:nth-child(23) { --a: 145.0deg; --d: 26.4s; }
.wh-pulses .pl:nth-child(24) { --a: 282.5deg; --d: 27.6s; }
.wh-pulses .pl:nth-child(25) { --a: 60.0deg; --d: 28.8s; }
.wh-pulses .pl:nth-child(26) { --a: 197.5deg; --d: 30.0s; }
.wh-pulses .pl:nth-child(27) { --a: 335.0deg; --d: 31.2s; }
.wh-pulses .pl:nth-child(28) { --a: 112.5deg; --d: 32.4s; }
.wh-pulses .pl:nth-child(29) { --a: 250.0deg; --d: 33.6s; }
.wh-pulses .pl:nth-child(30) { --a: 27.5deg; --d: 34.8s; }
.wh-pulses .pl:nth-child(31) { --a: 165.0deg; --d: 36.0s; }
.wh-pulses .pl:nth-child(32) { --a: 302.5deg; --d: 37.2s; }
.wh-pulses .pl:nth-child(33) { --a: 80.0deg; --d: 38.4s; }
.wh-pulses .pl:nth-child(34) { --a: 217.5deg; --d: 39.6s; }
.wh-pulses .pl:nth-child(35) { --a: 355.0deg; --d: 40.8s; }
.wh-pulses .pl:nth-child(36) { --a: 132.5deg; --d: 42.0s; }
.wh-pulses .pl:nth-child(37) { --a: 270.0deg; --d: 43.2s; }
.wh-pulses .pl:nth-child(38) { --a: 47.5deg; --d: 44.4s; }
.wh-pulses .pl:nth-child(39) { --a: 185.0deg; --d: 45.6s; }
.wh-pulses .pl:nth-child(40) { --a: 322.5deg; --d: 46.8s; }
.wh-pulses .pl:nth-child(41) { --a: 100.0deg; --d: 48.0s; }
.wh-pulses .pl:nth-child(42) { --a: 237.5deg; --d: 49.2s; }
.wh-pulses .pl:nth-child(43) { --a: 15.0deg; --d: 50.4s; }
.wh-pulses .pl:nth-child(44) { --a: 152.5deg; --d: 51.6s; }
.wh-pulses .pl:nth-child(45) { --a: 290.0deg; --d: 52.8s; }
.wh-pulses .pl:nth-child(46) { --a: 67.5deg; --d: 54.0s; }
.wh-pulses .pl:nth-child(47) { --a: 205.0deg; --d: 55.2s; }
.wh-pulses .pl:nth-child(48) { --a: 342.5deg; --d: 56.4s; }
.wh-pulses .pl:nth-child(49) { --a: 120.0deg; --d: 57.6s; }
.wh-pulses .pl:nth-child(50) { --a: 257.5deg; --d: 58.8s; }
.wh-pulses .pl:nth-child(51) { --a: 35.0deg; --d: 60.0s; }
.wh-pulses .pl:nth-child(52) { --a: 172.5deg; --d: 61.2s; }
.wh-ring .nr.r0 { animation-duration: 150s; }
.wh-ring .nr.r1 { animation-duration: 110s; animation-direction: reverse; }
.wh-ring .nr.r2 { animation-duration: 80s; }
.wh-spin svg:nth-child(1) { transform: translateZ(-14px); }
.wh-spin svg:nth-child(2) { transform: translateZ(-10px); }
.wh-spin svg:nth-child(3) { transform: translateZ(-6px); }
.wh-spin svg:nth-child(4) { transform: translateZ(-2px); }
.wh-spin svg:nth-child(5) { transform: translateZ(2px); }
.wh-spin svg:nth-child(6) { transform: translateZ(6px); }
.wh-spin svg:nth-child(7) { transform: translateZ(10px); }
.wh-spin svg:nth-child(8) { transform: translateZ(14px); }