/* Pieces are HTML spans and keyframes animate only transform and opacity, which Chrome composites on HTML
   elements, not SVG children: over 8 s the SVG loop cost 812 layouts, 961 style recalcs and 0.765 s
   of task time, the spans 0, 0 and 0.014 s. */
.anim-logo{--mark-1:#1E3A8A;--mark-2:#2563EB;--mark-3:#3B82F6;--mark-4:#7DD3FC;--dot:var(--faint)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .anim-logo{--mark-1:#2F4FB5;--seam:var(--ground)}}
:root[data-theme="dark"] .anim-logo{--mark-1:#2F4FB5;--seam:var(--ground)}
.aa-stage{position:relative;aspect-ratio:320/264}
.aa-stage span{position:absolute}
.aa-stage svg{width:100%;height:100%;max-width:none;overflow:visible}
.aa-stage path{fill:none;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.aa-pc{width:22%;height:23.64%}
.aa-a{left:39%;top:18.94%}
.aa-l{left:28%;top:42.58%}
.aa-r{left:50%;top:42.58%}
.aa-c{left:39%;top:42.58%}
.aa-ny{left:39%;top:42.58%;width:22%;height:23.64%}
.aa-ride,.aa-bob,.aa-cur,.aa-nx,.aa-ny .aa-pc,.aa-ll,.aa-sweep{inset:0;width:auto;height:auto}
.aa-bob{transform-origin:50% 56.82%}
.aa-a svg{fill:var(--mark-2)}
.aa-l svg{fill:var(--mark-1)}
.aa-r svg{fill:var(--mark-3)}
.aa-c svg{fill:var(--mark-4)}
/* dark: a 1px ground-colour seam draws the facet edges. Light: the centre piece shares every edge, so its
   own-colour stroke hides the hairlines between pieces */
.aa-pc polygon{stroke:var(--seam);stroke-width:1px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.aa-c polygon{stroke:var(--seam,var(--mark-4))}
/* a counter-translated window reveals a printed piece, since an animated clip-path restyles on the main thread */
.aa-rv{left:0;top:0;width:100%;height:101%;overflow:hidden}
.aa-rv svg{height:auto}
.aa-hot{left:24.4%;top:-25.6%;width:51.1%;height:25.6%;border-radius:3px;background:var(--accent);opacity:0}
.aa-win{left:18.13%;top:21.21%;width:63.75%;height:37.88%;border:1.5px solid var(--field);border-radius:3.92%/8%;opacity:0}
.aa-win svg{stroke:var(--field)}
.aa-win circle{fill:var(--dot);stroke:none}
.aa-sea{left:12.5%;top:55.3%;width:75%;height:9.09%;overflow:hidden;transform-origin:50% 100%;opacity:0}
.aa-sea svg{width:200%;stroke:var(--field)}
.aa-mast{left:50%;top:18.18%;width:1.5px;height:38.64%;margin-left:-.75px;background:var(--text);transform-origin:50% 100%;opacity:0}
.aa-bed{left:26.25%;top:66.29%;width:47.5%;height:2.65%;border-top:2px solid var(--text);opacity:0}
.aa-bed::before,.aa-bed::after{content:"";position:absolute;inset:0 auto;left:7.89%;width:1.5px;margin-left:-.75px;background:var(--text)}
.aa-bed::after{left:92.11%}
.aa-mk{left:28%;top:18.94%;width:44%;height:47.27%;clip-path:polygon(50% 0,100% 100%,0 100%);overflow:hidden}
.aa-ll{opacity:0}
.aa-ll path{stroke:var(--ground);stroke-width:1px}
.aa-sweep{background:linear-gradient(100deg,transparent 30%,var(--paper) 50%,transparent 70%);opacity:0}
.aa-cap,.aa-note{left:0;right:0;top:86%;font:500 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;text-align:center}
.aa-cap>span{position:relative;display:inline-block}
.aa-on{left:0;top:0;color:var(--text);opacity:0}
.phart .anim-logo{width:100%}
.anim-logo .aa-replay{display:none;margin-top:10px;font-size:11px;line-height:inherit;letter-spacing:.11em;
  text-transform:uppercase;cursor:pointer;position:relative}
.anim-logo:not([data-variant="journey"]) .aa-replay{display:inline-block;visibility:hidden}
.anim-logo.is-done .aa-replay{display:inline-block;visibility:visible}
.anim-logo.is-done .aa-cb,.anim-logo.is-done .aa-pause{display:none}

:where([data-variant="journey"]) .aa-stage *{animation-duration:14s;animation-iteration-count:3;animation-delay:2s;
  animation-timing-function:cubic-bezier(.65,0,.35,1)}
:where([data-variant="journey"]) .aa-a{animation-name:aa-j-a}
:where([data-variant="journey"]) .aa-l{animation-name:aa-j-l}
:where([data-variant="journey"]) .aa-r{animation-name:aa-j-r}
:where([data-variant="journey"]) .aa-c{animation-name:aa-j-c}
:where([data-variant="journey"]) .aa-cur{animation-name:aa-j-cur;animation-timing-function:step-end}
:where([data-variant="journey"]) .aa-ny{animation-name:aa-j-ny}
:where([data-variant="journey"]) .aa-nx{animation-name:aa-j-nx;animation-timing-function:linear}
:where([data-variant="journey"]) .aa-a .aa-rv{animation-name:aa-j-rva}
:where([data-variant="journey"]) .aa-a .aa-rv svg{animation-name:aa-j-rvas}
:where([data-variant="journey"]) .aa-l .aa-rv,:where([data-variant="journey"]) .aa-r .aa-rv{animation-name:aa-j-rv}
:where([data-variant="journey"]) .aa-l .aa-rv svg,:where([data-variant="journey"]) .aa-r .aa-rv svg{animation-name:aa-j-rvs}
:where([data-variant="journey"]) .aa-win{animation-name:aa-j-win}
:where([data-variant="journey"]) .aa-mast{animation-name:aa-j-mast}
:where([data-variant="journey"]) .aa-bob{animation-name:aa-j-bob}
:where([data-variant="journey"]) .aa-sea{animation-name:aa-j-sea}
:where([data-variant="journey"]) .aa-sea svg{animation-name:aa-j-drift}
:where([data-variant="journey"]) .aa-bed{animation-name:aa-j-bed}
:where([data-variant="journey"]) .aa-hot{animation-name:aa-j-hot}
:where([data-variant="journey"]) .aa-ll{animation-name:aa-j-ll}
:where([data-variant="journey"]) .aa-sweep{animation-name:aa-j-sweep}
:where([data-variant="journey"]) .aa-rv,:where([data-variant="journey"]) .aa-rv svg,:where([data-variant="journey"]) .aa-on{animation-timing-function:step-end}
:where([data-variant="journey"] .aa-cap>:nth-child(1)) .aa-on{animation-name:aa-j-on1}
:where([data-variant="journey"] .aa-cap>:nth-child(2)) .aa-on{animation-name:aa-j-on2}
:where([data-variant="journey"] .aa-cap>:nth-child(3)) .aa-on{animation-name:aa-j-on3}
@keyframes aa-j-a{0%,8.57%{transform:none}
12.14%,32.86%{transform:translate(107.95%,39.74%) rotate(0deg) scale(.22,.5)}
35.71%,51.43%{transform:translate(19.46%,24.04%) rotate(-16.3deg) scale(.75,1.45)}55.71%,100%{transform:none}}
@keyframes aa-j-l{0%,10.71%{transform:none}
14.29%,30%{transform:translate(-9.66%,-60.26%) rotate(-90deg) scale(.55)}
32.86%,51.43%{transform:translate(59.94%,-150%) rotate(90deg) scale(.2)}55.71%,100%{transform:none}}
@keyframes aa-j-r{0%,10%{transform:none}
13.57%,32.86%{transform:translate(9.66%,-60.26%) rotate(90deg) scale(.55)}
35%,51.43%{transform:translate(-68.75%,-63.14%) rotate(15.7deg) scale(.6,1.2)}55.71%,100%{transform:none}}
@keyframes aa-j-c{0%,9.29%{transform:none}
12.86%,31.43%{transform:translate(0,-60.26%) rotate(20deg) scale(.2,.6)}
33.57%,51.43%{transform:translate(0,27.72%) rotate(0deg) scale(2,.35)}
55.71%,75.71%{transform:translate(0) rotate(0deg) scale(.5);animation-timing-function:ease-out}77.86%,100%{transform:none}}
@keyframes aa-j-cur{0%{opacity:1}17.86%{opacity:0}
21.43%{opacity:1}25%{opacity:0}28.57%,100%{opacity:1}}
@keyframes aa-j-ny{0%,51.43%{transform:none}55.71%{transform:translateY(25%);animation-timing-function:steps(6,end)}
68.57%{transform:translateY(-75%);animation-timing-function:steps(5,end)}
74.52%,75.71%{transform:translateY(-158.33%);animation-timing-function:cubic-bezier(.3,1.3,.5,1)}77.5%,100%{transform:none}}
@keyframes aa-j-nx{0%,51.43%{transform:none}55.71%{transform:translateX(-85.23%)}
57.86%{transform:translateX(85.23%)}60%{transform:translateX(-71.02%)}
62.14%{transform:translateX(71.02%)}64.29%{transform:translateX(-56.82%)}
66.43%{transform:translateX(56.82%)}68.57%{transform:translateX(-42.61%)}
69.76%{transform:translateX(42.61%)}70.95%{transform:translateX(-34.09%)}
72.14%{transform:translateX(34.09%)}73.33%{transform:translateX(-22.73%)}
74.52%{transform:translateX(22.73%)}75.71%,100%{transform:none}}
@keyframes aa-j-rv{0%{transform:none}
51.43%,55.71%{transform:translateY(100%);animation-timing-function:steps(6,end)}68.57%,100%{transform:none}}
@keyframes aa-j-rvs{0%{transform:none}
51.43%,55.71%{transform:translateY(-101%);animation-timing-function:steps(6,end)}68.57%,100%{transform:none}}
@keyframes aa-j-rva{0%{transform:none}
51.43%,68.57%{transform:translateY(100%);animation-timing-function:steps(6,end)}75.71%,100%{transform:none}}
@keyframes aa-j-rvas{0%{transform:none}
51.43%,68.57%{transform:translateY(-101%);animation-timing-function:steps(6,end)}75.71%,100%{transform:none}}
@keyframes aa-j-win{0%,8.57%{opacity:0;transform:scale(.96)}12.86%,30%{opacity:1;transform:none}32.14%,100%{opacity:0;transform:none}}
@keyframes aa-j-mast{0%,32.86%{opacity:1;transform:scaleY(0)}35%,51.43%{opacity:1;transform:none}
53.57%{opacity:1;transform:scaleY(0);animation-timing-function:step-end}100%{opacity:0;transform:none}}
@keyframes aa-j-bob{0%,35.71%{transform:none}37.86%{transform:translateY(-.76%) rotate(2deg)}
41.43%{transform:translateY(.38%) rotate(-2deg)}45%{transform:translateY(-.38%) rotate(1.5deg)}48.57%,100%{transform:none}}
@keyframes aa-j-sea{0%,35.71%{opacity:0;transform:none}37.86%,51.43%{opacity:1;transform:none}54.29%{opacity:1;transform:scaleY(.05)}
55.71%{opacity:0;transform:scaleY(.05);animation-timing-function:step-end}100%{opacity:0;transform:none}}
@keyframes aa-j-drift{0%,35.71%{transform:none;animation-timing-function:linear}
51.43%{transform:translateX(-12.5%);animation-timing-function:step-end}100%{transform:none}}
@keyframes aa-j-bed{0%,52.14%{opacity:0}54.29%,78.57%{opacity:1}81.43%,100%{opacity:0}}
@keyframes aa-j-hot{0%,54.29%{opacity:0}55.71%,75.71%{opacity:1}77.14%,100%{opacity:0}}
@keyframes aa-j-ll{0%{opacity:0;animation-timing-function:step-end}55.71%,77.86%{opacity:.35}81.43%,100%{opacity:0}}
@keyframes aa-j-sweep{0%,80%{opacity:.25;transform:translateX(-100%)}
84.29%{opacity:.25;transform:translateX(100%);animation-timing-function:step-end}100%{opacity:0;transform:none}}
@keyframes aa-j-on1{0%{opacity:0}8.57%{opacity:1}31.43%,100%{opacity:0}}
@keyframes aa-j-on2{0%{opacity:0}31.43%{opacity:1}53.57%,100%{opacity:0}}
@keyframes aa-j-on3{0%{opacity:0}53.57%{opacity:1}80%,100%{opacity:0}}

:where([data-variant="print"]) .aa-stage *{animation-duration:5s;animation-iteration-count:1;
  animation-timing-function:cubic-bezier(.65,0,.35,1)}
:where([data-variant="print"]) .aa-bed{animation-name:aa-p-bed;transform-origin:0 50%}
:where([data-variant="print"]) .aa-c{animation-name:aa-p-c}
:where([data-variant="print"]) .aa-ny{animation-name:aa-p-ny}
:where([data-variant="print"]) .aa-nx{animation-name:aa-p-nx;animation-timing-function:linear}
:where([data-variant="print"]) .aa-a .aa-rv{animation-name:aa-p-rva}
:where([data-variant="print"]) .aa-a .aa-rv svg{animation-name:aa-p-rvas}
:where([data-variant="print"]) .aa-l .aa-rv,:where([data-variant="print"]) .aa-r .aa-rv{animation-name:aa-p-rv}
:where([data-variant="print"]) .aa-l .aa-rv svg,:where([data-variant="print"]) .aa-r .aa-rv svg{animation-name:aa-p-rvs}
:where([data-variant="print"]) .aa-hot{animation-name:aa-p-hot}
:where([data-variant="print"]) .aa-ll{animation-name:aa-p-ll;overflow:hidden}
:where([data-variant="print"]) .aa-ll svg{animation-name:aa-p-lls}
:where([data-variant="print"]) .aa-sweep{animation-name:aa-p-sweep}
:where([data-variant="print"]) .aa-note{animation-name:aa-p-note}
:where([data-variant="print"]) .aa-rv,:where([data-variant="print"]) .aa-rv svg{animation-timing-function:step-end}
@keyframes aa-p-bed{0%{opacity:1;transform:scaleX(0)}8%,80%{opacity:1;transform:none}88%,100%{opacity:0;transform:none}}
@keyframes aa-p-c{0%,68%{transform:scale(.5);animation-timing-function:ease-out}74%,100%{transform:none}}
@keyframes aa-p-ny{0%,8%{transform:translateY(25%);animation-timing-function:steps(6,end)}
44%{transform:translateY(-75%);animation-timing-function:steps(5,end)}
64%,68%{transform:translateY(-158.33%);animation-timing-function:cubic-bezier(.3,1.3,.5,1)}73%,100%{transform:none}}
@keyframes aa-p-nx{0%,8%{transform:translateX(-85.23%)}14%{transform:translateX(85.23%)}
20%{transform:translateX(-71.02%)}26%{transform:translateX(71.02%)}32%{transform:translateX(-56.82%)}
38%{transform:translateX(56.82%)}44%{transform:translateX(-42.61%)}48%{transform:translateX(42.61%)}
52%{transform:translateX(-34.09%)}56%{transform:translateX(34.09%)}60%{transform:translateX(-22.73%)}
64%{transform:translateX(22.73%)}68%,100%{transform:none}}
@keyframes aa-p-rv{0%,8%{transform:translateY(100%);animation-timing-function:steps(6,end)}44%,100%{transform:none}}
@keyframes aa-p-rvs{0%,8%{transform:translateY(-101%);animation-timing-function:steps(6,end)}44%,100%{transform:none}}
@keyframes aa-p-rva{0%,44%{transform:translateY(100%);animation-timing-function:steps(6,end)}68%,100%{transform:none}}
@keyframes aa-p-rvas{0%,44%{transform:translateY(-101%);animation-timing-function:steps(6,end)}68%,100%{transform:none}}
@keyframes aa-p-hot{0%,4%{opacity:0}8%,68%{opacity:1}72%,100%{opacity:0}}
@keyframes aa-p-ll{0%{opacity:0;transform:translateY(100%);animation-timing-function:step-end}
8%{opacity:.35;transform:translateY(100%);animation-timing-function:steps(6,end)}
44%{opacity:.35;transform:translateY(50%);animation-timing-function:steps(6,end)}68%,80%{opacity:.35;transform:none}
88%,100%{opacity:0;transform:none}}
@keyframes aa-p-lls{0%,8%{transform:translateY(-100%);animation-timing-function:steps(6,end)}
44%{transform:translateY(-50%);animation-timing-function:steps(6,end)}68%,100%{transform:none}}
@keyframes aa-p-sweep{0%,84%{opacity:.25;transform:translateX(-100%)}
96%{opacity:.25;transform:translateX(100%);animation-timing-function:step-end}100%{opacity:0;transform:none}}
@keyframes aa-p-note{0%,92%{opacity:0}100%{opacity:1}}

:where([data-variant="tangram"]) .aa-stage *{animation-duration:5s;animation-iteration-count:1;
  animation-timing-function:cubic-bezier(.2,.8,.2,1)}
:where([data-variant="tangram"]) .aa-l{animation-name:aa-t-l}
:where([data-variant="tangram"]) .aa-r{animation-name:aa-t-r}
:where([data-variant="tangram"]) .aa-a{animation-name:aa-t-a}
:where([data-variant="tangram"]) .aa-c{animation-name:aa-t-c}
:where([data-variant="tangram"]) .aa-sweep{animation-name:aa-t-sweep;animation-timing-function:cubic-bezier(.65,0,.35,1)}
:where([data-variant="tangram"]) .aa-note{animation-name:aa-t-note}
@keyframes aa-t-l{0%,12%{transform:translate(-72.73%,76.12%) rotate(-100deg)}28%,100%{transform:none}}
@keyframes aa-t-r{0%,28%{transform:translate(72.73%,76.12%) rotate(100deg)}44%,100%{transform:none}}
@keyframes aa-t-a{0%,44%{transform:translate(81.82%,21.15%) rotate(70deg)}60%,100%{transform:none}}
@keyframes aa-t-c{0%,60%{transform:translate(-100%,-67.63%) rotate(150deg)}78%{transform:translate(0,2.4%) rotate(0deg)}82%,100%{transform:none}}
@keyframes aa-t-sweep{0%,84%{opacity:.25;transform:translateX(-100%)}
96%{opacity:.25;transform:translateX(100%);animation-timing-function:step-end}100%{opacity:0;transform:none}}
@keyframes aa-t-note{0%,92%{opacity:0}100%{opacity:1}}

:where([data-variant="sail"]) .aa-stage *{animation-duration:5s;animation-iteration-count:1;
  animation-timing-function:cubic-bezier(.65,0,.35,1)}
:where([data-variant="sail"]) .aa-a{animation-name:aa-s-a}
:where([data-variant="sail"]) .aa-l{animation-name:aa-s-l}
:where([data-variant="sail"]) .aa-r{animation-name:aa-s-r}
:where([data-variant="sail"]) .aa-c{animation-name:aa-s-c}
:where([data-variant="sail"]) .aa-ride{animation-name:aa-s-ride}
:where([data-variant="sail"]) .aa-bob{animation-name:aa-s-bob}
:where([data-variant="sail"]) .aa-mast{animation-name:aa-s-mast}
:where([data-variant="sail"]) .aa-sea{animation-name:aa-s-sea}
:where([data-variant="sail"]) .aa-sea svg{animation-name:aa-s-drift}
:where([data-variant="sail"]) .aa-sweep{animation-name:aa-s-sweep}
:where([data-variant="sail"]) .aa-note{animation-name:aa-s-note}
@keyframes aa-s-c{0%,10%{transform:none}16%,80%{transform:translate(0,27.72%) rotate(0deg) scale(2,.35)}88%,100%{transform:none}}
@keyframes aa-s-a{0%,12%{transform:none}22%,74%{transform:translate(19.46%,24.04%) rotate(-16.3deg) scale(.75,1.45)}84%,100%{transform:none}}
@keyframes aa-s-l{0%,12%{transform:none}22%,74%{transform:translate(59.94%,-150%) rotate(90deg) scale(.2)}84%,100%{transform:none}}
@keyframes aa-s-r{0%,16%{transform:none}26%,72%{transform:translate(-68.75%,-63.14%) rotate(15.7deg) scale(.6,1.2)}82%,100%{transform:none}}
@keyframes aa-s-ride{0%,10%{transform:none}26%{transform:translateX(-5.94%)}72%{transform:translateX(5.94%)}88%,100%{transform:none}}
@keyframes aa-s-bob{0%,26%{transform:none}35%{transform:translateY(-.76%) rotate(2deg)}47%{transform:translateY(.38%) rotate(-2deg)}
59%{transform:translateY(-.76%) rotate(2deg)}71%,100%{transform:none}}
@keyframes aa-s-mast{0%,18%{opacity:1;transform:scaleY(0)}24%,72%{opacity:1;transform:none}
78%{opacity:1;transform:scaleY(0);animation-timing-function:step-end}100%{opacity:0;transform:none}}
@keyframes aa-s-sea{0%,20%{opacity:0}26%,78%{opacity:1}86%,100%{opacity:0}}
@keyframes aa-s-drift{0%,26%{transform:none;animation-timing-function:linear}
72%{transform:translateX(-12.5%);animation-timing-function:step-end}100%{transform:none}}
@keyframes aa-s-sweep{0%,86%{opacity:.25;transform:translateX(-100%)}
98%{opacity:.25;transform:translateX(100%);animation-timing-function:step-end}100%{opacity:0;transform:none}}
@keyframes aa-s-note{0%,92%{opacity:0}100%{opacity:1}}

.anim-logo.is-replay .aa-stage *{animation-delay:0s}
.anim-logo.is-reset .aa-stage *,.anim-logo .aa-cb:checked~.aa-stage *{animation:none}
@media (prefers-reduced-motion:reduce){.anim.anim-logo .aa-stage *{animation:none}
.anim-logo .aa-cb,.anim-logo .aa-pause,.anim.anim-logo .aa-replay{display:none}}