/* Demo Gallery drawings. Generated by tools/build_demos.py; edit there. */
.demo-art svg { display: block; width: 100%; height: auto; }
.demo-art text { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 12px; fill: #173B30; }
.demo-art text.big { font-size: 20px; font-weight: 800; }
.demo-art text.sm { font-size: 12px; }
.demo-art text.xs { font-size: 10px; font-weight: 600; }
.demo-art text.gold { fill: #9A7A1E; }
.demo-art text.white { fill: #F7F8F4; }
.demo-art text.muted { fill: #4A5D53; }
.demo-art .ln, .demo-art .lnr { fill: none; stroke: #173B30; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-art .ln2 { stroke: #173B30; stroke-width: 2; stroke-linejoin: round; }
.demo-art .ln3 { fill: none; stroke: #173B30; stroke-width: 6; stroke-linecap: round; }
.demo-art .lnw { fill: none; stroke: #F7F8F4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.demo-art .lt { fill: none; stroke: rgba(23, 59, 48, 0.38); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.demo-art .ls { fill: none; stroke: #1B5F7A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-art .ls.lsl { stroke: rgba(27, 95, 122, 0.45); }
.demo-art .lgr { fill: none; stroke: #3C7A5C; stroke-width: 4; stroke-linecap: round; }
.demo-art .lsea { fill: none; stroke: #1B5F7A; stroke-width: 4; stroke-linecap: round; }
.demo-art .ly { fill: none; stroke: #C9A23A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.demo-art .ly2 { fill: none; stroke: #C9A23A; stroke-width: 3; stroke-linecap: round; }
.demo-art .dash { stroke-dasharray: 4 6; }
.demo-art .p { fill: #F7F8F4; stroke: #173B30; stroke-width: 2; stroke-linejoin: round; }
.demo-art .p0 { fill: #F7F8F4; }
.demo-art .m { fill: #E2E9E0; }
.demo-art .m2 { fill: #DCE5DA; }
.demo-art .g { fill: #3C7A5C; }
.demo-art .gl { fill: #CFE0D3; }
.demo-art .gl2 { fill: #E4EEE5; }
.demo-art .y { fill: #C9A23A; }
.demo-art .yl { fill: #F1E3B8; }
.demo-art .s { fill: #1B5F7A; }
.demo-art .sl { fill: #D3E5EC; }
.demo-art .i { fill: #173B30; }
.demo-art .i0 { fill: #173B30; }
.demo-art .twinb { fill: none; stroke: #1B5F7A; stroke-width: 2; stroke-linejoin: round; }
.demo-art .ring { fill: none; stroke: #C9A23A; stroke-width: 2; }
.demo-art .ring2 { fill: none; stroke: #C9A23A; stroke-width: 2.4; }
.demo-art .ringw { fill: #F7F8F4; }
.demo-art .scan { fill: #C9A23A; opacity: 0.7; }
.demo-art .bub { stroke-width: 1.2; }
.demo-art .donut-bg { fill: none; stroke: #E2E9E0; stroke-width: 10; }
.demo-art .donut { fill: none; stroke: #C9A23A; stroke-width: 10; stroke-dasharray: 68 100; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }

/* Motion. Every looping animation pauses with the page's Pause Animation button,
   when the drawing is off screen, and never runs with reduced motion. */
.demo-art [class*="a-"] { animation-iteration-count: infinite; animation-timing-function: ease-in-out; transform-box: fill-box; transform-origin: center; }
.a-spin { animation-name: v-spin; animation-timing-function: linear !important; }
.a-bob { animation-name: v-bob; }
.a-rock { animation-name: v-rock; }
.a-ring { animation-name: v-ring; animation-timing-function: ease-out !important; }
.a-pop { animation-name: v-pop; }
.a-rise { animation-name: v-rise; }
.a-fade { animation-name: v-fade; }
.a-blink { animation-name: v-blink; }
.a-draw { stroke-dasharray: 100; animation-name: v-draw; }
.a-growx { animation-name: v-growx; transform-origin: 0% 50% !important; }
.a-growy { animation-name: v-growy; transform-origin: 50% 100% !important; }
.a-path { animation-name: v-path; animation-timing-function: linear !important; offset-rotate: 0deg; offset-anchor: 0 0; transform-box: view-box !important; transform-origin: 0 0 !important; }
.a-flow { animation-name: v-flow; animation-timing-function: linear !important; }
.a-tint { animation-name: v-tint; }
.a-bubble { animation-name: v-bubble; animation-timing-function: ease-in !important; }
.a-pan { animation-name: v-pan; animation-timing-function: linear !important; }
.a-point { animation-name: v-point; transform-origin: 100% 100% !important; }
.a-raise { animation-name: v-raise; transform-origin: 0% 100% !important; }
.a-done { animation-name: v-done; }
.a-breathe { animation-name: v-breathe; }
.a-beat { animation-name: v-beat; }
.a-scan { animation-name: v-scan; animation-timing-function: linear !important; transform-box: view-box !important; }
.a-needle { animation-name: v-needle; transform-origin: 50% 100% !important; }
.a-wave { animation-name: v-wave; animation-timing-function: linear !important; }
.a-sea { animation-name: v-sea; animation-timing-function: linear !important; }
.a-build { animation-name: v-build; }
.a-lever { animation-name: v-lever; transform-origin: 0% 100% !important; }
.a-donut { animation-name: v-donut; }
.t1 { animation-duration: 1.2s; } .t2 { animation-duration: 2s; } .t3 { animation-duration: 3s; } .t4 { animation-duration: 4s; }
.t5 { animation-duration: 5s; } .t6 { animation-duration: 6s; } .t8 { animation-duration: 8s; } .t14 { animation-duration: 14s; } .t16 { animation-duration: 16s; }
.dl1 { animation-delay: -0.7s; } .dl2 { animation-delay: -1.4s; } .dl3 { animation-delay: -2.1s; } .dl4 { animation-delay: -2.8s; }
.art-game .a-done.dl0 { animation-delay: 0s; } .art-game .a-done.dl1 { animation-delay: -6s; } .art-game .a-done.dl2 { animation-delay: -4s; } .art-game .a-done.dl3 { animation-delay: -2s; }
.art-game .a-pop.dl4 { animation-delay: -1s; }

@keyframes v-spin { to { transform: rotate(360deg); } }
@keyframes v-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes v-rock { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes v-ring { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes v-pop { 0%, 12% { transform: scale(0); opacity: 0; } 22% { transform: scale(1.12); opacity: 1; } 30%, 82% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(0); opacity: 0; } }
@keyframes v-rise { 0% { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes v-fade { 0%, 15% { opacity: 0; } 30%, 80% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes v-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes v-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 55%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes v-growx { 0% { transform: scaleX(0); } 50%, 88% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0.3; } }
@keyframes v-growy { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes v-path { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes v-flow { to { stroke-dashoffset: -20; } }
@keyframes v-tint { 0%, 100% { fill: #3C7A5C; } 50% { fill: #C9A23A; } }
@keyframes v-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-62px); opacity: 0; } }
@keyframes v-pan { to { transform: translateX(-300px); } }
@keyframes v-point { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes v-raise { 0%, 35% { transform: rotate(110deg); } 50%, 85% { transform: rotate(0deg); } 100% { transform: rotate(110deg); } }
@keyframes v-done { 0%, 10% { transform: scale(0); } 20%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes v-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes v-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.16); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } 48% { transform: scale(1); } }
@keyframes v-scan { 0% { transform: translateY(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateY(175px); opacity: 0; } }
@keyframes v-needle { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(40deg); } }
@keyframes v-wave { to { transform: translateX(-40px); } }
@keyframes v-sea { to { transform: translateX(-80px); } }
@keyframes v-build { 0%, 10% { opacity: 0; } 40%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v-lever { 0%, 30% { transform: rotate(0deg); } 50%, 80% { transform: rotate(52deg); } 100% { transform: rotate(0deg); } }
@keyframes v-donut { 0%, 100% { stroke-dasharray: 20 100; } 50% { stroke-dasharray: 72 100; } }


/* People and later scenes */
.demo-art .hk { fill: #3A2E25; }
.demo-art .hb { fill: #8A5A2B; }
.demo-art .pk { stroke: #173B30; stroke-width: 2; stroke-linejoin: round; }
.demo-art .g-st { fill: none; stroke: #3C7A5C; stroke-width: 8; stroke-linecap: round; }
.demo-art .s-st { fill: none; stroke: #1B5F7A; stroke-width: 8; stroke-linecap: round; }
.demo-art .y-st { fill: none; stroke: #C9A23A; stroke-width: 8; stroke-linecap: round; }
.demo-art .lnw2 { fill: none; stroke: #173B30; stroke-width: 4; stroke-linecap: round; }
.demo-art .lt2 { fill: none; stroke: rgba(23, 59, 48, 0.16); stroke-width: 1; }
.demo-art .pad { fill: rgba(201, 162, 58, 0.25); stroke: #C9A23A; stroke-width: 2; stroke-dasharray: 4 3; }
.demo-art .gfill { fill: rgba(60, 122, 92, 0.3); }
.a-raise2 { animation-name: v-raise2; transform-origin: 50% 0% !important; }
.a-point2 { animation-name: v-point2; transform-origin: 100% 100% !important; }
.a-trail { animation-name: v-trail; }
.a-play { animation-name: v-play; animation-timing-function: linear !important; }
.a-talk { animation-name: v-talk; }
.a-stack { animation-name: v-stack; }
.a-slide { animation-name: v-slide; }
.dp1, .dp2, .dp3, .dp4, .dp0 { animation-fill-mode: backwards; }
.dp1 { animation-delay: 0.8s; } .dp2 { animation-delay: 1.6s; } .dp3 { animation-delay: 2.4s; } .dp4 { animation-delay: 3.2s; }
@keyframes v-raise2 { 0%, 35% { transform: rotate(-20deg); } 50%, 85% { transform: rotate(-165deg); } 100% { transform: rotate(-20deg); } }
@keyframes v-point2 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(12deg); } }
@keyframes v-trail { 0% { opacity: 0.1; } 30% { opacity: 1; } 100% { opacity: 0.1; } }
@keyframes v-play { from { transform: translateX(0); } to { transform: translateX(160px); } }
@keyframes v-talk { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1.4); } }
@keyframes v-stack { 0%, 6% { transform: translateY(12px); opacity: 0; } 16%, 88% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes v-slide { 0%, 8% { transform: translateX(150px); } 20%, 90% { transform: translateX(0); } 100% { transform: translateX(150px); } }

.motion-paused .demo-art *, .demo.is-offscreen .demo-art *, .dlg-art.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .demo-art * { animation: none !important; }
}

/* Motion paths */
.art-twin .pkt { offset-path: path("M138 118 C170 84 224 84 256 118"); }
.art-ldata .dq0 { offset-path: path("M152 47 C186 47 188 112 216 112"); }
.art-ldata .dq1 { offset-path: path("M152 125 H216"); }
.art-ldata .dq2 { offset-path: path("M152 203 C186 203 188 138 216 138"); }
.art-strategy .rm { offset-path: path("M44 196 H356"); }