@layer page {
/* Generated by tools/story.py: do not edit by hand. */
.story { --gap: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.st { position: relative; min-width: 0; }
.st-art { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; }
.st-art svg { width: 86%; height: auto; overflow: visible; }
.st-label { margin-top: 14px; }
.st-label b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.st-label span { display: block; margin-top: 4px; font-family: 'Plex Mono', ui-monospace, monospace; font-size: 13px; color: var(--green-text); }
.st-who { position: absolute; top: 10px; left: 10px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.st-who.us { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.st-link { position: absolute; top: 50%; left: 100%; width: var(--gap); height: 3px; margin-top: -1.5px; background: var(--line); border-radius: 3px; }
.st-fill { position: absolute; inset: 0; background: var(--green); border-radius: 3px; transform-origin: left center; }
.st-env { position: absolute; top: 50%; left: calc(100% - 22px); width: 22px; height: 16px; margin-top: -8px; opacity: 0; }
@media (max-width: 820px) {
  .story { --gap: 28px; grid-template-columns: 1fr; }
  .st { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
  .st-label { margin-top: 0; }
  .st-who { top: 6px; left: 6px; padding: 1px 7px; font-size: 10px; }
  .st-art svg { width: 74%; margin-top: 14px; }
  .st-link { top: 100%; left: 75px; width: 3px; height: var(--gap); margin: 0 0 0 -1.5px; }
  .st-fill { transform-origin: center top; }
  .st-env { left: 50%; top: calc(100% - 16px); margin: 0 0 0 -11px; }
}
@media (max-width: 380px) { .st { grid-template-columns: 120px minmax(0, 1fr); } .st-link { left: 60px; } }
.sv-ink { fill: var(--ink); } .sv-ink-s { stroke: var(--ink); fill: none; }
.sv-card { fill: var(--card); } .sv-line-s { stroke: var(--line); fill: none; }
.sv-soft { fill: var(--line-soft); } .sv-faint { fill: var(--faint); }
.sv-green { fill: var(--green); } .sv-green-s { stroke: var(--green); fill: none; }
.sv-gtext-s { stroke: var(--green-text); fill: none; } .sv-gink { fill: var(--green-ink); } .sv-gink-s { stroke: var(--green-ink); fill: none; }
.sv-zz { font: 800 15px Manrope, sans-serif; fill: var(--faint); }
.sv-say { font: 800 12.5px Manrope, sans-serif; fill: var(--green-ink); }
.zz { transform-box: fill-box; transform-origin: center; }
.bar { transform-box: fill-box; transform-origin: center; }
.bubble { transform-box: fill-box; transform-origin: 0% 100%; }
.press, .ripple { transform-box: fill-box; transform-origin: center; }
.slot { transform-box: fill-box; }
.asleep { opacity: 0; }
.ln0, .ln1, .ln2, .ln3 { stroke-dasharray: 60; }
.tick { stroke-dasharray: 30; }
.finger { opacity: 0; }
@keyframes st1 {
  0.00% { opacity: .32; filter: grayscale(1); }
  2.07% { opacity: .32; filter: grayscale(1); }
  4.64% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 7px var(--green-tint); }
  10.71% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 0 var(--green-tint); }
  92.14% { opacity: 1; filter: grayscale(0); }
  96.43% { opacity: .32; filter: grayscale(1); }
  100.00% { opacity: .32; filter: grayscale(1); }
}
@keyframes lb1 {
  0.00% { opacity: .35; }
  2.14% { opacity: .35; }
  5.00% { opacity: 1; }
  92.14% { opacity: 1; }
  96.43% { opacity: .35; }
  100.00% { opacity: .35; }
}
@keyframes fill1 {
  0.00% { transform: scale(0, 1); }
  8.57% { transform: scale(0, 1); }
  18.57% { transform: scale(1, 1); }
  92.14% { transform: scale(1, 1); opacity: 1; }
  96.43% { transform: scale(1, 1); opacity: 0; }
  100.00% { transform: scale(0, 1); opacity: 0; }
}
@keyframes fillv1 {
  0.00% { transform: scale(1, 0); }
  8.57% { transform: scale(1, 0); }
  18.57% { transform: scale(1, 1); }
  92.14% { transform: scale(1, 1); opacity: 1; }
  96.43% { transform: scale(1, 1); opacity: 0; }
  100.00% { transform: scale(1, 0); opacity: 0; }
}
@keyframes env1 {
  0.00% { left: 0; opacity: 0; }
  8.57% { left: 0; opacity: 0; }
  9.29% { left: 0; opacity: 1; }
  17.86% { left: calc(100% - 22px); opacity: 1; }
  18.57% { left: calc(100% - 22px); opacity: 0; }
  100.00% { left: calc(100% - 22px); opacity: 0; }
}
@keyframes envv1 {
  0.00% { top: 0; opacity: 0; }
  8.57% { top: 0; opacity: 0; }
  9.29% { top: 0; opacity: 1; }
  17.86% { top: calc(100% - 16px); opacity: 1; }
  18.57% { top: calc(100% - 16px); opacity: 0; }
  100.00% { top: calc(100% - 16px); opacity: 0; }
}
@keyframes st2 {
  0.00% { opacity: .32; filter: grayscale(1); }
  19.21% { opacity: .32; filter: grayscale(1); }
  21.79% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 7px var(--green-tint); }
  27.86% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 0 var(--green-tint); }
  92.14% { opacity: 1; filter: grayscale(0); }
  96.43% { opacity: .32; filter: grayscale(1); }
  100.00% { opacity: .32; filter: grayscale(1); }
}
@keyframes lb2 {
  0.00% { opacity: .35; }
  19.29% { opacity: .35; }
  22.14% { opacity: 1; }
  92.14% { opacity: 1; }
  96.43% { opacity: .35; }
  100.00% { opacity: .35; }
}
@keyframes fill2 {
  0.00% { transform: scale(0, 1); }
  25.71% { transform: scale(0, 1); }
  35.71% { transform: scale(1, 1); }
  92.14% { transform: scale(1, 1); opacity: 1; }
  96.43% { transform: scale(1, 1); opacity: 0; }
  100.00% { transform: scale(0, 1); opacity: 0; }
}
@keyframes fillv2 {
  0.00% { transform: scale(1, 0); }
  25.71% { transform: scale(1, 0); }
  35.71% { transform: scale(1, 1); }
  92.14% { transform: scale(1, 1); opacity: 1; }
  96.43% { transform: scale(1, 1); opacity: 0; }
  100.00% { transform: scale(1, 0); opacity: 0; }
}
@keyframes env2 {
  0.00% { left: 0; opacity: 0; }
  25.71% { left: 0; opacity: 0; }
  26.43% { left: 0; opacity: 1; }
  35.00% { left: calc(100% - 22px); opacity: 1; }
  35.71% { left: calc(100% - 22px); opacity: 0; }
  100.00% { left: calc(100% - 22px); opacity: 0; }
}
@keyframes envv2 {
  0.00% { top: 0; opacity: 0; }
  25.71% { top: 0; opacity: 0; }
  26.43% { top: 0; opacity: 1; }
  35.00% { top: calc(100% - 16px); opacity: 1; }
  35.71% { top: calc(100% - 16px); opacity: 0; }
  100.00% { top: calc(100% - 16px); opacity: 0; }
}
@keyframes st3 {
  0.00% { opacity: .32; filter: grayscale(1); }
  36.36% { opacity: .32; filter: grayscale(1); }
  38.93% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 7px var(--green-tint); }
  45.00% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 0 var(--green-tint); }
  92.14% { opacity: 1; filter: grayscale(0); }
  96.43% { opacity: .32; filter: grayscale(1); }
  100.00% { opacity: .32; filter: grayscale(1); }
}
@keyframes lb3 {
  0.00% { opacity: .35; }
  36.43% { opacity: .35; }
  39.29% { opacity: 1; }
  92.14% { opacity: 1; }
  96.43% { opacity: .35; }
  100.00% { opacity: .35; }
}
@keyframes fill3 {
  0.00% { transform: scale(0, 1); }
  42.86% { transform: scale(0, 1); }
  52.86% { transform: scale(1, 1); }
  92.14% { transform: scale(1, 1); opacity: 1; }
  96.43% { transform: scale(1, 1); opacity: 0; }
  100.00% { transform: scale(0, 1); opacity: 0; }
}
@keyframes fillv3 {
  0.00% { transform: scale(1, 0); }
  42.86% { transform: scale(1, 0); }
  52.86% { transform: scale(1, 1); }
  92.14% { transform: scale(1, 1); opacity: 1; }
  96.43% { transform: scale(1, 1); opacity: 0; }
  100.00% { transform: scale(1, 0); opacity: 0; }
}
@keyframes env3 {
  0.00% { left: 0; opacity: 0; }
  42.86% { left: 0; opacity: 0; }
  43.57% { left: 0; opacity: 1; }
  52.14% { left: calc(100% - 22px); opacity: 1; }
  52.86% { left: calc(100% - 22px); opacity: 0; }
  100.00% { left: calc(100% - 22px); opacity: 0; }
}
@keyframes envv3 {
  0.00% { top: 0; opacity: 0; }
  42.86% { top: 0; opacity: 0; }
  43.57% { top: 0; opacity: 1; }
  52.14% { top: calc(100% - 16px); opacity: 1; }
  52.86% { top: calc(100% - 16px); opacity: 0; }
  100.00% { top: calc(100% - 16px); opacity: 0; }
}
@keyframes st4 {
  0.00% { opacity: .32; filter: grayscale(1); }
  53.50% { opacity: .32; filter: grayscale(1); }
  56.07% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 7px var(--green-tint); }
  62.14% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 0 var(--green-tint); }
  92.14% { opacity: 1; filter: grayscale(0); }
  96.43% { opacity: .32; filter: grayscale(1); }
  100.00% { opacity: .32; filter: grayscale(1); }
}
@keyframes lb4 {
  0.00% { opacity: .35; }
  53.57% { opacity: .35; }
  56.43% { opacity: 1; }
  92.14% { opacity: 1; }
  96.43% { opacity: .35; }
  100.00% { opacity: .35; }
}
@keyframes fill4 {
  0.00% { transform: scale(0, 1); }
  60.00% { transform: scale(0, 1); }
  70.00% { transform: scale(1, 1); }
  92.14% { transform: scale(1, 1); opacity: 1; }
  96.43% { transform: scale(1, 1); opacity: 0; }
  100.00% { transform: scale(0, 1); opacity: 0; }
}
@keyframes fillv4 {
  0.00% { transform: scale(1, 0); }
  60.00% { transform: scale(1, 0); }
  70.00% { transform: scale(1, 1); }
  92.14% { transform: scale(1, 1); opacity: 1; }
  96.43% { transform: scale(1, 1); opacity: 0; }
  100.00% { transform: scale(1, 0); opacity: 0; }
}
@keyframes env4 {
  0.00% { left: 0; opacity: 0; }
  60.00% { left: 0; opacity: 0; }
  60.71% { left: 0; opacity: 1; }
  69.29% { left: calc(100% - 22px); opacity: 1; }
  70.00% { left: calc(100% - 22px); opacity: 0; }
  100.00% { left: calc(100% - 22px); opacity: 0; }
}
@keyframes envv4 {
  0.00% { top: 0; opacity: 0; }
  60.00% { top: 0; opacity: 0; }
  60.71% { top: 0; opacity: 1; }
  69.29% { top: calc(100% - 16px); opacity: 1; }
  70.00% { top: calc(100% - 16px); opacity: 0; }
  100.00% { top: calc(100% - 16px); opacity: 0; }
}
@keyframes st5 {
  0.00% { opacity: .32; filter: grayscale(1); }
  70.64% { opacity: .32; filter: grayscale(1); }
  73.21% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 7px var(--green-tint); }
  79.29% { opacity: 1; filter: grayscale(0); box-shadow: 0 0 0 0 var(--green-tint); }
  92.14% { opacity: 1; filter: grayscale(0); }
  96.43% { opacity: .32; filter: grayscale(1); }
  100.00% { opacity: .32; filter: grayscale(1); }
}
@keyframes lb5 {
  0.00% { opacity: .35; }
  70.71% { opacity: .35; }
  73.57% { opacity: 1; }
  92.14% { opacity: 1; }
  96.43% { opacity: .35; }
  100.00% { opacity: .35; }
}
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -14px); } }
@keyframes bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes ln0 {
  0.00% { stroke-dashoffset: 60; }
  21.43% { stroke-dashoffset: 60; }
  24.29% { stroke-dashoffset: 0; }
  96.43% { stroke-dashoffset: 0; }
  100.00% { stroke-dashoffset: 60; }
}
@keyframes ln1 {
  0.00% { stroke-dashoffset: 60; }
  24.29% { stroke-dashoffset: 60; }
  27.14% { stroke-dashoffset: 0; }
  96.43% { stroke-dashoffset: 0; }
  100.00% { stroke-dashoffset: 60; }
}
@keyframes ln2 {
  0.00% { stroke-dashoffset: 60; }
  27.14% { stroke-dashoffset: 60; }
  30.00% { stroke-dashoffset: 0; }
  96.43% { stroke-dashoffset: 0; }
  100.00% { stroke-dashoffset: 60; }
}
@keyframes ln3 {
  0.00% { stroke-dashoffset: 60; }
  30.00% { stroke-dashoffset: 60; }
  32.86% { stroke-dashoffset: 0; }
  96.43% { stroke-dashoffset: 0; }
  100.00% { stroke-dashoffset: 60; }
}
@keyframes press {
  0.00% { transform: scale(1); }
  40.00% { transform: scale(1); }
  41.07% { transform: scale(.84); }
  42.86% { transform: scale(1); }
  100.00% { transform: scale(1); }
}
@keyframes ripple {
  0.00% { transform: scale(1); opacity: 0; }
  41.07% { transform: scale(1); opacity: .7; }
  47.14% { transform: scale(1.9); opacity: 0; }
  100.00% { transform: scale(1.9); opacity: 0; }
}
@keyframes tick {
  0.00% { stroke-dashoffset: 30; }
  41.43% { stroke-dashoffset: 30; }
  43.57% { stroke-dashoffset: 0; }
  96.43% { stroke-dashoffset: 0; }
  100.00% { stroke-dashoffset: 30; }
}
@keyframes finger {
  0.00% { transform: translate(16px, 18px); opacity: 0; }
  37.14% { transform: translate(16px, 18px); opacity: 0; }
  39.29% { transform: translate(0, 0); opacity: 1; }
  45.00% { transform: translate(0, 0); opacity: 1; }
  47.86% { transform: translate(16px, 18px); opacity: 0; }
  100.00% { transform: translate(16px, 18px); opacity: 0; }
}
@keyframes asleep {
  0.00% { opacity: 1; }
  55.71% { opacity: 1; }
  56.07% { opacity: 0; }
  96.43% { opacity: 0; }
  100.00% { opacity: 1; }
}
@keyframes awake {
  0.00% { opacity: 0; }
  55.71% { opacity: 0; }
  56.07% { opacity: 1; }
  96.43% { opacity: 1; }
  100.00% { opacity: 0; }
}
@keyframes bubble {
  0.00% { transform: scale(0); }
  57.86% { transform: scale(0); }
  60.00% { transform: scale(1.08); }
  61.07% { transform: scale(1); }
  92.14% { transform: scale(1); }
  96.43% { transform: scale(0); }
  100.00% { transform: scale(0); }
}
@keyframes slot {
  0.00% { transform: translateY(-26px); opacity: 0; }
  73.57% { transform: translateY(-26px); opacity: 0; }
  76.43% { transform: translateY(0); opacity: 1; }
  92.14% { transform: translateY(0); opacity: 1; }
  96.43% { transform: translateY(0); opacity: 0; }
  100.00% { transform: translateY(-26px); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .st1 .st-art { animation: st1 14.0s linear infinite; }
  .st1 .st-label { animation: lb1 14.0s linear infinite; }
  .st1 .st-fill { animation: fill1 14.0s linear infinite; }
  .st1 .st-env { animation: env1 14.0s linear infinite; }
  .st2 .st-art { animation: st2 14.0s linear infinite; }
  .st2 .st-label { animation: lb2 14.0s linear infinite; }
  .st2 .st-fill { animation: fill2 14.0s linear infinite; }
  .st2 .st-env { animation: env2 14.0s linear infinite; }
  .st3 .st-art { animation: st3 14.0s linear infinite; }
  .st3 .st-label { animation: lb3 14.0s linear infinite; }
  .st3 .st-fill { animation: fill3 14.0s linear infinite; }
  .st3 .st-env { animation: env3 14.0s linear infinite; }
  .st4 .st-art { animation: st4 14.0s linear infinite; }
  .st4 .st-label { animation: lb4 14.0s linear infinite; }
  .st4 .st-fill { animation: fill4 14.0s linear infinite; }
  .st4 .st-env { animation: env4 14.0s linear infinite; }
  .st5 .st-art { animation: st5 14.0s linear infinite; }
  .st5 .st-label { animation: lb5 14.0s linear infinite; }
  .zz { animation: zz 2.4s ease-out infinite; } .zz.z2 { animation-delay: .8s; } .zz.z3 { animation-delay: 1.6s; }
  .bar { animation: bar .9s ease-in-out infinite; } .bar.b2 { animation-delay: .15s; } .bar.b3 { animation-delay: .3s; } .bar.b4 { animation-delay: .45s; } .bar.b5 { animation-delay: .6s; }
  .ln0 { animation: ln0 14.0s linear infinite; }
  .ln1 { animation: ln1 14.0s linear infinite; }
  .ln2 { animation: ln2 14.0s linear infinite; }
  .ln3 { animation: ln3 14.0s linear infinite; }
  .press { animation: press 14.0s linear infinite; } .ripple { animation: ripple 14.0s linear infinite; } .tick { animation: tick 14.0s linear infinite; }
  .finger { animation: finger 14.0s ease-out infinite; }
  .asleep { animation: asleep 14.0s linear infinite; } .awake { animation: awake 14.0s linear infinite; } .bubble { animation: bubble 14.0s ease-out infinite; }
  .slot { animation: slot 14.0s cubic-bezier(.2,.9,.3,1.3) infinite; }
  @media (max-width: 820px) {
    .st1 .st-fill { animation-name: fillv1; } .st1 .st-env { animation-name: envv1; }
    .st2 .st-fill { animation-name: fillv2; } .st2 .st-env { animation-name: envv2; }
    .st3 .st-fill { animation-name: fillv3; } .st3 .st-env { animation-name: envv3; }
    .st4 .st-fill { animation-name: fillv4; } .st4 .st-env { animation-name: envv4; }
  }
}
}