/* Generated by web/art/demo.py: the setlist demo (23.0 s, looping). */
@font-face { font-family: 'Barlow'; font-weight: 400; src: url('/fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; src: url('/fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; src: url('/fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; src: url('/fonts/Barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; src: url('/fonts/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; src: url('/fonts/IBMPlexMono-500.woff2') format('woff2'); }
html, body { height: auto; }
body { display: block; min-width: 0; margin: 0; overflow: hidden; background: var(--ground); }
.stage { position: relative; width: 1280px; height: 720px; overflow: hidden; pointer-events: none; }
.f { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; visibility: hidden;
     background: var(--ground); color: var(--text); font-family: 'Barlow', system-ui, sans-serif; font-size: 15px; }
.cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 20; }
.ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
        border: 2px solid var(--mark); opacity: 0; }
.ghost { position: absolute; z-index: 10; visibility: hidden; opacity: 0.88; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.typed { position: absolute; z-index: 5; white-space: pre; visibility: hidden; display: flex; align-items: center; }
.typed i { display: inline-block; width: 1px; height: 1.2em; margin-left: 1px; background: currentColor; }

@media (max-width: 1280px) { .stage { zoom: 1.0000; } }
@media (max-width: 1260px) { .stage { zoom: 0.9844; } }
@media (max-width: 1240px) { .stage { zoom: 0.9688; } }
@media (max-width: 1220px) { .stage { zoom: 0.9531; } }
@media (max-width: 1200px) { .stage { zoom: 0.9375; } }
@media (max-width: 1180px) { .stage { zoom: 0.9219; } }
@media (max-width: 1160px) { .stage { zoom: 0.9062; } }
@media (max-width: 1140px) { .stage { zoom: 0.8906; } }
@media (max-width: 1120px) { .stage { zoom: 0.8750; } }
@media (max-width: 1100px) { .stage { zoom: 0.8594; } }
@media (max-width: 1080px) { .stage { zoom: 0.8438; } }
@media (max-width: 1060px) { .stage { zoom: 0.8281; } }
@media (max-width: 1040px) { .stage { zoom: 0.8125; } }
@media (max-width: 1020px) { .stage { zoom: 0.7969; } }
@media (max-width: 1000px) { .stage { zoom: 0.7812; } }
@media (max-width: 980px) { .stage { zoom: 0.7656; } }
@media (max-width: 960px) { .stage { zoom: 0.7500; } }
@media (max-width: 940px) { .stage { zoom: 0.7344; } }
@media (max-width: 920px) { .stage { zoom: 0.7188; } }
@media (max-width: 900px) { .stage { zoom: 0.7031; } }
@media (max-width: 880px) { .stage { zoom: 0.6875; } }
@media (max-width: 860px) { .stage { zoom: 0.6719; } }
@media (max-width: 840px) { .stage { zoom: 0.6562; } }
@media (max-width: 820px) { .stage { zoom: 0.6406; } }
@media (max-width: 800px) { .stage { zoom: 0.6250; } }
@media (max-width: 780px) { .stage { zoom: 0.6094; } }
@media (max-width: 760px) { .stage { zoom: 0.5938; } }
@media (max-width: 740px) { .stage { zoom: 0.5781; } }
@media (max-width: 720px) { .stage { zoom: 0.5625; } }
@media (max-width: 700px) { .stage { zoom: 0.5469; } }
@media (max-width: 680px) { .stage { zoom: 0.5312; } }
@media (max-width: 660px) { .stage { zoom: 0.5156; } }
@media (max-width: 640px) { .stage { zoom: 0.5000; } }
@media (max-width: 620px) { .stage { zoom: 0.4844; } }
@media (max-width: 600px) { .stage { zoom: 0.4688; } }
@media (max-width: 580px) { .stage { zoom: 0.4531; } }
@media (max-width: 560px) { .stage { zoom: 0.4375; } }
@media (max-width: 540px) { .stage { zoom: 0.4219; } }
@media (max-width: 520px) { .stage { zoom: 0.4062; } }
@media (max-width: 500px) { .stage { zoom: 0.3906; } }
@media (max-width: 480px) { .stage { zoom: 0.3750; } }
@media (max-width: 460px) { .stage { zoom: 0.3594; } }
@media (max-width: 440px) { .stage { zoom: 0.3438; } }
@media (max-width: 420px) { .stage { zoom: 0.3281; } }
@media (max-width: 400px) { .stage { zoom: 0.3125; } }
@media (max-width: 380px) { .stage { zoom: 0.2969; } }
@media (max-width: 360px) { .stage { zoom: 0.2812; } }
@media (max-width: 340px) { .stage { zoom: 0.2656; } }
@media (max-width: 320px) { .stage { zoom: 0.2500; } }
@media (max-width: 300px) { .stage { zoom: 0.2344; } }
@media (max-width: 280px) { .stage { zoom: 0.2188; } }
@media (max-width: 260px) { .stage { zoom: 0.2031; } }
@media (max-width: 240px) { .stage { zoom: 0.1875; } }
.zs0 { color: rgb(69, 248, 98) !important }
.zs1 { color: rgb(47, 127, 240) !important }
.zs2 { color: rgb(255, 122, 10) !important }
.zs3 { color: rgb(229, 72, 93) !important }
@keyframes f0 { 0% { visibility: hidden; } 0.000% { visibility: visible; } 8.913% { visibility: hidden; } 100% { visibility: hidden; } }
.f0 { animation: f0 23.00s step-end infinite; }
@keyframes f1 { 0% { visibility: hidden; } 8.913% { visibility: visible; } 11.739% { visibility: hidden; } 100% { visibility: hidden; } }
.f1 { animation: f1 23.00s step-end infinite; }
@keyframes f2 { 0% { visibility: hidden; } 11.739% { visibility: visible; } 13.696% { visibility: hidden; } 100% { visibility: hidden; } }
.f2 { animation: f2 23.00s step-end infinite; }
@keyframes f3 { 0% { visibility: hidden; } 13.696% { visibility: visible; } 21.739% { visibility: hidden; } 100% { visibility: hidden; } }
.f3 { animation: f3 23.00s step-end infinite; }
@keyframes zm3_5 { 0% { transform: translate(0px, -44px); } 13.696% { transform: translate(0px, -44px); } 14.609% { transform: none; } 14.613% {  } 100% {  } }
.f3 .zm3_5 { animation: zm3_5 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes zm3_4 { 0% { transform: translate(0px, -44px); } 13.696% { transform: translate(0px, -44px); } 14.609% { transform: none; } 14.613% {  } 100% {  } }
.f3 .zm3_4 { animation: zm3_4 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes zm3_3 { 0% { transform: translate(0px, -44px); } 13.696% { transform: translate(0px, -44px); } 14.609% { transform: none; } 14.613% {  } 100% {  } }
.f3 .zm3_3 { animation: zm3_3 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes zm3_2 { 0% { transform: translate(0px, -80px); } 13.696% { transform: translate(0px, -80px); } 14.609% { transform: none; } 14.613% {  } 100% {  } }
.f3 .zm3_2 { animation: zm3_2 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes zm3_1 { 0% { transform: translate(0px, -44px); } 13.696% { transform: translate(0px, -44px); } 14.609% { transform: none; } 14.613% {  } 100% {  } }
.f3 .zm3_1 { animation: zm3_1 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes zm3_0 { 0% { transform: translate(0px, 256px); } 13.696% { transform: translate(0px, 256px); } 14.609% { transform: none; } 14.613% {  } 100% {  } }
.f3 .zm3_0 { animation: zm3_0 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes f4 { 0% { visibility: hidden; } 21.739% { visibility: visible; } 24.565% { visibility: hidden; } 100% { visibility: hidden; } }
.f4 { animation: f4 23.00s step-end infinite; }
@keyframes f5 { 0% { visibility: hidden; } 24.565% { visibility: visible; } 26.522% { visibility: hidden; } 100% { visibility: hidden; } }
.f5 { animation: f5 23.00s step-end infinite; }
@keyframes f6 { 0% { visibility: hidden; } 26.522% { visibility: visible; } 34.565% { visibility: hidden; } 100% { visibility: hidden; } }
.f6 { animation: f6 23.00s step-end infinite; }
@keyframes zm6_4 { 0% { transform: translate(0px, -44px); } 26.522% { transform: translate(0px, -44px); } 27.435% { transform: none; } 27.439% {  } 100% {  } }
.f6 .zm6_4 { animation: zm6_4 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes zm6_3 { 0% { transform: translate(0px, -44px); } 26.522% { transform: translate(0px, -44px); } 27.435% { transform: none; } 27.439% {  } 100% {  } }
.f6 .zm6_3 { animation: zm6_3 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes zm6_2 { 0% { transform: translate(0px, -80px); } 26.522% { transform: translate(0px, -80px); } 27.435% { transform: none; } 27.439% {  } 100% {  } }
.f6 .zm6_2 { animation: zm6_2 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes zm6_1 { 0% { transform: translate(0px, -44px); } 26.522% { transform: translate(0px, -44px); } 27.435% { transform: none; } 27.439% {  } 100% {  } }
.f6 .zm6_1 { animation: zm6_1 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes zm6_0 { 0% { transform: translate(0px, 212px); } 26.522% { transform: translate(0px, 212px); } 27.435% { transform: none; } 27.439% {  } 100% {  } }
.f6 .zm6_0 { animation: zm6_0 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes f7 { 0% { visibility: hidden; } 34.565% { visibility: visible; } 37.391% { visibility: hidden; } 100% { visibility: hidden; } }
.f7 { animation: f7 23.00s step-end infinite; }
@keyframes f8 { 0% { visibility: hidden; } 37.391% { visibility: visible; } 39.348% { visibility: hidden; } 100% { visibility: hidden; } }
.f8 { animation: f8 23.00s step-end infinite; }
@keyframes f9 { 0% { visibility: hidden; } 39.348% { visibility: visible; } 52.609% { visibility: hidden; } 100% { visibility: hidden; } }
.f9 { animation: f9 23.00s step-end infinite; }
@keyframes f10 { 0% { visibility: hidden; } 52.609% { visibility: visible; } 63.696% { visibility: hidden; } 100% { visibility: hidden; } }
.f10 { animation: f10 23.00s step-end infinite; }
@keyframes zm10_0 { 0% { transform: translate(0px, 168px); } 52.609% { transform: translate(0px, 168px); } 53.522% { transform: none; } 53.526% {  } 100% {  } }
.f10 .zm10_0 { animation: zm10_0 23.00s infinite; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
@keyframes f11 { 0% { visibility: hidden; } 63.696% { visibility: visible; } 65.652% { visibility: hidden; } 100% { visibility: hidden; } }
.f11 { animation: f11 23.00s step-end infinite; }
.f11 .zf0 { width: 22%; animation: fl11_0 23.00s linear infinite; }
@keyframes fl11_0 { 0%, 63.696% { width: 11%; } 65.652%, 100% { width: 22%; } }
@keyframes f12 { 0% { visibility: hidden; } 65.652% { visibility: visible; } 67.609% { visibility: hidden; } 100% { visibility: hidden; } }
.f12 { animation: f12 23.00s step-end infinite; }
.f12 .zf0 { width: 33%; animation: fl12_0 23.00s linear infinite; }
@keyframes fl12_0 { 0%, 65.652% { width: 22%; } 67.609%, 100% { width: 33%; } }
@keyframes f13 { 0% { visibility: hidden; } 67.609% { visibility: visible; } 69.565% { visibility: hidden; } 100% { visibility: hidden; } }
.f13 { animation: f13 23.00s step-end infinite; }
.f13 .zf0 { width: 44%; animation: fl13_0 23.00s linear infinite; }
@keyframes fl13_0 { 0%, 67.609% { width: 33%; } 69.565%, 100% { width: 44%; } }
@keyframes f14 { 0% { visibility: hidden; } 69.565% { visibility: visible; } 71.522% { visibility: hidden; } 100% { visibility: hidden; } }
.f14 { animation: f14 23.00s step-end infinite; }
.f14 .zf0 { width: 56%; animation: fl14_0 23.00s linear infinite; }
@keyframes fl14_0 { 0%, 69.565% { width: 44%; } 71.522%, 100% { width: 56%; } }
@keyframes f15 { 0% { visibility: hidden; } 71.522% { visibility: visible; } 73.478% { visibility: hidden; } 100% { visibility: hidden; } }
.f15 { animation: f15 23.00s step-end infinite; }
.f15 .zf0 { width: 67%; animation: fl15_0 23.00s linear infinite; }
@keyframes fl15_0 { 0%, 71.522% { width: 56%; } 73.478%, 100% { width: 67%; } }
@keyframes f16 { 0% { visibility: hidden; } 73.478% { visibility: visible; } 75.435% { visibility: hidden; } 100% { visibility: hidden; } }
.f16 { animation: f16 23.00s step-end infinite; }
.f16 .zf0 { width: 78%; animation: fl16_0 23.00s linear infinite; }
@keyframes fl16_0 { 0%, 73.478% { width: 67%; } 75.435%, 100% { width: 78%; } }
@keyframes f17 { 0% { visibility: hidden; } 75.435% { visibility: visible; } 77.391% { visibility: hidden; } 100% { visibility: hidden; } }
.f17 { animation: f17 23.00s step-end infinite; }
.f17 .zf0 { width: 89%; animation: fl17_0 23.00s linear infinite; }
@keyframes fl17_0 { 0%, 75.435% { width: 78%; } 77.391%, 100% { width: 89%; } }
@keyframes f18 { 0% { visibility: hidden; } 77.391% { visibility: visible; } 79.348% { visibility: hidden; } 100% { visibility: hidden; } }
.f18 { animation: f18 23.00s step-end infinite; }
.f18 .zf0 { width: 100%; animation: fl18_0 23.00s linear infinite; }
@keyframes fl18_0 { 0%, 77.391% { width: 89%; } 79.348%, 100% { width: 100%; } }
@keyframes f19 { 0% { visibility: hidden; } 79.348% { visibility: visible; } 81.304% { visibility: hidden; } 100% { visibility: hidden; } }
.f19 { animation: f19 23.00s step-end infinite; }
.f19 .zf0 { width: 100%; animation: fl19_0 23.00s linear infinite; }
@keyframes fl19_0 { 0%, 79.348% { width: 100%; } 81.304%, 100% { width: 100%; } }
@keyframes f20 { 0% { visibility: hidden; } 81.304% { visibility: visible; } 100.000% { visibility: hidden; } 100% { visibility: hidden; } }
.f20 { animation: f20 23.00s step-end infinite; }
.g0 { left: 292.0px; top: 444.0px; width: 960.0px; height: 42.0px; animation: g0 23.00s infinite, gv0 23.00s step-end infinite; }
@keyframes g0 { 0%, 8.913% { translate: 0 0; animation-timing-function: ease-in-out; } 13.696%, 100% { translate: 0.0px -248.8px; } }
@keyframes gv0 { 0% { visibility: hidden; } 8.913% { visibility: visible; } 13.696% { visibility: hidden; } 100% { visibility: hidden; } }
.g1 { left: 292.0px; top: 612.0px; width: 960.0px; height: 42.0px; animation: g1 23.00s infinite, gv1 23.00s step-end infinite; }
@keyframes g1 { 0%, 21.739% { translate: 0 0; animation-timing-function: ease-in-out; } 26.522%, 100% { translate: 0.0px -204.8px; } }
@keyframes gv1 { 0% { visibility: hidden; } 21.739% { visibility: visible; } 26.522% { visibility: hidden; } 100% { visibility: hidden; } }
.g2 { left: 292.0px; top: 612.0px; width: 960.0px; height: 42.0px; animation: g2 23.00s infinite, gv2 23.00s step-end infinite; }
@keyframes g2 { 0%, 34.565% { translate: 0 0; animation-timing-function: ease-in-out; } 39.348%, 100% { translate: 48.0px -168.0px; } }
@keyframes gv2 { 0% { visibility: hidden; } 34.565% { visibility: visible; } 39.348% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes cur { 0.000% { translate: 900.0px 640.0px; animation-timing-function: ease-in-out; } 5.217% { translate: 900.0px 640.0px; animation-timing-function: ease-in-out; } 8.261% { translate: 532.0px 465.0px; animation-timing-function: ease-in-out; } 8.913% { translate: 532.0px 465.0px; animation-timing-function: ease-in-out; } 13.696% { translate: 532.0px 191.0px; animation-timing-function: ease-in-out; } 18.043% { translate: 532.0px 191.0px; animation-timing-function: ease-in-out; } 21.087% { translate: 532.0px 633.0px; animation-timing-function: ease-in-out; } 21.739% { translate: 532.0px 633.0px; animation-timing-function: ease-in-out; } 26.522% { translate: 532.0px 403.0px; animation-timing-function: ease-in-out; } 30.870% { translate: 532.0px 403.0px; animation-timing-function: ease-in-out; } 33.913% { translate: 532.0px 633.0px; animation-timing-function: ease-in-out; } 34.565% { translate: 532.0px 633.0px; animation-timing-function: ease-in-out; } 39.348% { translate: 580.0px 465.0px; animation-timing-function: ease-in-out; } 48.913% { translate: 580.0px 465.0px; animation-timing-function: ease-in-out; } 51.957% { translate: 830.5px 409.8px; animation-timing-function: ease-in-out; } 59.565% { translate: 830.5px 409.8px; animation-timing-function: ease-in-out; } 63.043% { translate: 1231.2px 694.0px; animation-timing-function: ease-in-out; } 81.304% { translate: 1231.2px 694.0px; animation-timing-function: ease-in-out; } 84.783% { translate: 768.0px 396.0px; animation-timing-function: ease-in-out; } 100% { translate: 768.0px 396.0px; } }
.cursor { animation: cur 23.00s infinite; }
@keyframes ring { 0% { opacity: 0; } 8.217% { opacity: 0; scale: 0.3; } 8.261% { opacity: 0.9; scale: 0.3; } 9.783% { opacity: 0; scale: 1.4; } 21.043% { opacity: 0; scale: 0.3; } 21.087% { opacity: 0.9; scale: 0.3; } 22.609% { opacity: 0; scale: 1.4; } 33.870% { opacity: 0; scale: 0.3; } 33.913% { opacity: 0.9; scale: 0.3; } 35.435% { opacity: 0; scale: 1.4; } 51.913% { opacity: 0; scale: 0.3; } 51.957% { opacity: 0.9; scale: 0.3; } 53.478% { opacity: 0; scale: 1.4; } 63.000% { opacity: 0; scale: 0.3; } 63.043% { opacity: 0.9; scale: 0.3; } 64.565% { opacity: 0; scale: 1.4; } 100% { opacity: 0; } }
.ring { animation: ring 23.00s linear infinite; }
@media (prefers-reduced-motion: reduce) { .stage * { animation: none !important; } .f20 { visibility: visible; } .cursor { display: none; } }