/* ===========================================================
   The homepage scene. Every rule that draws the artboard, its
   chrome, and its panel lives here, and only the homepage
   layout loads it.

   Patrick Hand, SIL Open Font License 1.1. The licence text sits
   beside the file in /static/fonts. It is served from this origin
   on purpose: the policy sets font-src 'self', and a third party
   host would also learn the IP address of every sender who opens
   the page. Only latin and latin-ext ship.
   =========================================================== */

@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/patrick-hand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/patrick-hand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mono: 'Patrick Hand', 'Comic Sans MS', cursive;
  --wob1: 255px 15px 225px 15px/15px 225px 15px 255px;
  --wob2: 15px 225px 15px 255px/255px 15px 225px 15px;
  --wob3: 12px 20px 14px 18px/18px 14px 20px 12px;
  --wob-pill: 30px 22px 28px 24px/24px 28px 22px 30px;
}

/* The Indonesian line sits under the English one, quieter, so the page reads
   in either language without doubling its weight. */
.lang-switch {
  position: fixed;
  top: 74px;
  right: 24px;
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--ink-soft);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 4px 14px;
  box-shadow: 3px 4px 0 rgba(17, 17, 17, .09);
  z-index: 10;
  transition: all .12s;
}
.lang-switch:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

.eyebrow {
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Buttons ---- */
.cbtn, .send, .gate-primary,
.admin-action-form button, .login-form button, .passkey-form button {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 11px 26px;
  cursor: pointer;
  transition: all .15s;
  transform: rotate(-1.2deg);
  box-shadow: 3px 4px 0 rgba(17, 17, 17, .22);
}
.cbtn:hover, .send:hover, .gate-primary:hover,
.admin-action-form button:hover, .login-form button:hover, .passkey-form button:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(1deg) translateY(-1px);
}
.cbtn[disabled] { opacity: .45; cursor: not-allowed; }
.cbtn.ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 2px dashed var(--hair);
  box-shadow: none;
  transform: none;
}
.cbtn.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; transform: none; }

/* ---- Forms ---- */
.cform { display: flex; flex-direction: column; gap: 16px; }
.cform .field { display: flex; flex-direction: column; gap: 6px; }
.cform label, .cform legend, .boxes > summary {
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cform label .opt { text-transform: none; letter-spacing: 0; color: var(--muted); }
.cform input[type="text"], .cform textarea, .rc-compose textarea, .login-form input,
.admin-action-form input[type="text"], .admin-action-form textarea, .admin-action-form select {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--wob3);
  padding: 11px 14px;
  width: 100%;
}
.cform textarea, .rc-compose textarea { min-height: 108px; line-height: 1.6; resize: vertical; }
.cform input::placeholder, .cform textarea::placeholder,
.rc-compose textarea::placeholder, .login-form input::placeholder { color: var(--muted); }
.cform input:focus, .cform textarea:focus, .rc-compose textarea:focus, .login-form input:focus,
.admin-action-form input:focus, .admin-action-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cform .hint, .hint { font-family: var(--mono); font-size: .85rem; color: var(--muted); line-height: 1.5; }
.cform .actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }

/* Consent stays a real checkbox: it is a promise, not a toggle. */
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: var(--wob3);
  padding: 14px 16px;
}
.consent input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  flex: 0 0 19px;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent .copy { display: flex; flex-direction: column; gap: 4px; }
.consent .copy .lede { font-family: var(--serif); font-size: 1rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.consent .copy .hint { font-family: var(--mono); font-size: .85rem; }

/* ---- Custom boxes ---- */
.boxes { border: none; }
.boxes > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.boxes > summary::-webkit-details-marker { display: none; }
.boxes > summary::before { content: "+"; color: var(--accent); font-size: 1.1rem; line-height: 1; }
.boxes[open] > summary::before { content: "- "; }
.boxes > summary:hover { color: var(--accent); }
.box-row { display: flex; gap: 10px; margin-top: 10px; align-items: flex-start; }
.box-row .box-label { flex: 0 0 34%; }
.box-row .box-value { flex: 1; }
.box-row textarea { min-height: 60px; }
.box-add { margin-top: 14px; align-self: flex-start; }

/* ---- The attachment picker ---- */
.attachment-picker { display: flex; flex-direction: column; gap: 8px; }
.attachment-picker input[type="file"] {
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: var(--wob3);
  padding: 14px;
  width: 100%;
  cursor: pointer;
}
.attachment-picker input[type="file"]:hover { border-color: var(--accent); }

/* ---- The artboard page ---- */
.stage { position: fixed; inset: 0; background: var(--paper); z-index: 0; pointer-events: none; }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity 2.2s ease; pointer-events: none; }
.scene.is-live { opacity: 1; pointer-events: auto; }

/* Orientation decides which scene may show, in the stylesheet as well as in
   the script. Without this the two can disagree for a frame, or permanently if
   the script never runs, and a landscape scene gets panned into a narrow strip
   with its animated parts cropped off screen. */
@media (orientation: portrait) {
  .scene:not([data-scene="mobile"]) { opacity: 0; pointer-events: none; }
  .scene[data-scene="mobile"].is-live { opacity: 1; pointer-events: auto; }
}
@media (orientation: landscape) {
  .scene[data-scene="mobile"] { opacity: 0; pointer-events: none; }
}
.scene.is-live svg { pointer-events: auto; }
[data-say], [data-act] { cursor: pointer; }
[data-if] { display: none; }
[data-if].is-on { display: inline; }

.chrome-brand { position: fixed; top: 22px; left: 26px; line-height: 1.25; z-index: 10; }
.chrome-brand .name { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.chrome-brand .name .dot { color: var(--accent); }
.chrome-brand .kicker {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.chrome-status {
  position: fixed;
  top: 22px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--ink-soft);
  box-shadow: 3px 4px 0 rgba(17, 17, 17, .09);
  z-index: 10;
}
.chrome-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulseDot 2.6s ease-in-out infinite; }
.chrome-status .what { white-space: nowrap; }

/* The greeting: a note pinned above the button, with an arrow pointing at it. */
.welcome {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: min(218px, 58vw);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 11;
}
.welcome .note {
  pointer-events: auto;
  cursor: pointer;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob2);
  box-shadow: 4px 5px 0 rgba(17, 17, 17, .12);
  padding: 14px 16px;
  transform: rotate(-2deg);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}
.welcome .arrow { width: 40px; margin-right: 14px; transform: rotate(8deg); }
.welcome .dismiss {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  margin-top: 2px;
  margin-right: 6px;
}

.feed-link {
  position: fixed;
  bottom: 20px;
  right: 190px;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 13px 22px;
  box-shadow: 4px 5px 0 rgba(17, 17, 17, .18);
  transform: rotate(1deg);
  transition: all .15s;
  z-index: 12;
}
.feed-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(-1deg) translateY(-1px);
  text-decoration: none;
}

/* The published count sits on the pill like a phone app badge. */
.feed-badge {
  position: absolute;
  top: -10px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper);
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 20px;
  text-align: center;
}

.panel-toggle {
  position: fixed;
  bottom: 20px;
  right: 24px;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: 4px 5px 0 rgba(17, 17, 17, .25);
  transition: background .15s;
  z-index: 12;
}
.panel-toggle:hover { background: var(--accent); border-color: var(--accent); }

.panel {
  position: fixed;
  bottom: 78px;
  right: 20px;
  width: min(390px, calc(100vw - 40px));
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob1);
  padding: 24px;
  box-shadow: 5px 6px 0 rgba(17, 17, 17, .18);
  animation: popIn .18s ease;
  transform-origin: bottom right;
  z-index: 13;
}
.panel h2 { font-family: var(--display); font-size: 1.75rem; font-weight: 700; margin-bottom: 12px; }
.panel .lede { font-family: var(--mono); font-size: .9rem; color: var(--muted); margin-top: 4px; }


@media (max-width: 480px) {
  .chrome-brand { top: 14px; left: 16px; }
  .chrome-brand .name { font-size: 1.35rem; }
  .chrome-status { top: 14px; right: 14px; font-size: .8rem; padding: 6px 12px; }
  .lang-switch { top: 58px; right: 14px; font-size: .82rem; padding: 3px 12px; }
  .welcome { right: 14px; left: 14px; width: auto; align-items: flex-end; }
  .welcome .note { font-size: .95rem; padding: 10px 12px; line-height: 1.25; max-width: 15rem; }
  .welcome .arrow { width: 30px; }
  .panel-toggle { bottom: 14px; right: 14px; left: 14px; padding: 13px 20px; }
  .feed-link { bottom: 66px; right: 14px; left: 14px; text-align: center; padding: 10px 18px; }
  .welcome { bottom: 126px; }
  .panel { left: 8px; right: 8px; bottom: 74px; width: auto; max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); padding: 18px 15px; }
  .cf-turnstile { overflow-x: auto; }
}

@media (max-height: 520px) {
  .panel { bottom: 62px; max-height: calc(100vh - 78px); }
  .panel-toggle { bottom: 12px; padding: 9px 20px; }
  .welcome { display: none; }
}

@media (max-width: 560px) {
  .box-row { flex-direction: column; gap: 7px; }
  .box-row .box-label { flex: 1; }
}

@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.04)}}
@keyframes blink{0%,93%,100%{opacity:0}94%,97%{opacity:1}}
@keyframes floatZ{0%{transform:translate(0,0);opacity:0}20%{opacity:.85}100%{transform:translate(16px,-52px);opacity:0}}
@keyframes steam{0%{transform:translateY(0);opacity:0}30%{opacity:.65}100%{transform:translateY(-30px);opacity:0}}
@keyframes sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.2deg)}}
@keyframes swing{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@keyframes typeTap{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes footTap{0%,100%{transform:rotate(0deg)}50%{transform:rotate(9deg)}}
@keyframes tailFlick{0%,78%,100%{transform:rotate(0deg)}86%{transform:rotate(16deg)}}
@keyframes glowPulse{0%,100%{opacity:.3}50%{opacity:.55}}
@keyframes swatA{0%{transform:rotate(0deg)}35%{transform:rotate(-75deg)}60%{transform:rotate(8deg)}100%{transform:rotate(0deg)}}
@keyframes popIn{from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes dropIn{0%{transform:translateY(-70px);opacity:0}65%{transform:translateY(5px);opacity:1}100%{transform:translateY(0)}}
@keyframes twitchy{0%,100%{transform:translateX(0)}30%{transform:translateX(-6px)}60%{transform:translateX(5px)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes dropFall{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(80px);opacity:0}}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
@keyframes dashMove{to{stroke-dashoffset:-140}}
@keyframes dashBack{to{stroke-dashoffset:168}}
@keyframes exhaust{0%{transform:translate(0,0);opacity:0}20%{opacity:.7}100%{transform:translate(-44px,-14px);opacity:0}}
@keyframes carBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(-46px)}}
@keyframes ballB{0%,100%{transform:translateY(0)}45%{transform:translateY(-56px)}70%{transform:translateY(0)}}
@keyframes kickA{0%,100%{transform:rotate(0deg)}45%{transform:rotate(24deg)}}
@keyframes punchJab{0%,62%,100%{transform:scale(1)}46%{transform:scale(1.12)}}
@keyframes bagSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes drumHit{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(11deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes mHero{0%{transform:translateX(-140px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}22%{transform:translateX(250px);animation-timing-function:cubic-bezier(.3,0,.4,1)}28%{transform:translateX(330px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}46%{transform:translateX(480px);animation-timing-function:cubic-bezier(.25,.1,.25,1)}56%,100%{transform:translateX(560px)}}
@keyframes mCam{0%{transform:translateX(590px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}22%{transform:translateX(200px);animation-timing-function:cubic-bezier(.3,0,.4,1)}28%{transform:translateX(120px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}46%{transform:translateX(-30px);animation-timing-function:cubic-bezier(.25,.1,.25,1)}56%,62%{transform:translateX(-110px);animation-timing-function:cubic-bezier(.4,0,.2,1)}70%,90%{transform:translateX(-240px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}100%{transform:translateX(590px)}}
@keyframes mShowRun{0%,58%{opacity:1}60%,100%{opacity:0}}
@keyframes mShowCeleb{0%,58%{opacity:0}60%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes mRunA{0%,100%{transform:rotate(30deg)}50%{transform:rotate(-32deg)}}
@keyframes mRunB{0%,100%{transform:rotate(-32deg)}50%{transform:rotate(30deg)}}
@keyframes mBall{0%{transform:translate(-90px,1132px);opacity:1;animation-timing-function:cubic-bezier(.45,.05,.55,.95)}20%{transform:translate(300px,1132px);animation-timing-function:cubic-bezier(.2,0,.6,1)}24%{transform:translate(392px,1132px);animation-timing-function:cubic-bezier(0,0,.4,1)}28%{transform:translate(400px,1132px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}46%{transform:translate(540px,1132px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}56%,60%{transform:translate(596px,1132px);opacity:1;animation-timing-function:cubic-bezier(.2,0,.8,1)}64%{transform:translate(700px,1020px);animation-timing-function:cubic-bezier(.4,0,1,1)}68%{transform:translate(806px,1052px);animation-timing-function:cubic-bezier(0,0,.4,1)}72%,94%{transform:translate(800px,1104px);opacity:1}96%{transform:translate(800px,1104px);opacity:0}97%{transform:translate(-90px,1132px);opacity:0}100%{transform:translate(-90px,1132px);opacity:1}}
@keyframes mSpin{0%,22%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0,0,.4,1)}26%{transform:rotate(-16deg);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}30%{transform:rotate(12deg);animation-timing-function:cubic-bezier(.25,.1,.25,1)}34%,100%{transform:rotate(0deg)}}
@keyframes mFall{0%,45%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.5,0,.9,.6)}51%,86%{transform:rotate(80deg);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}92%,100%{transform:rotate(0deg)}}
@keyframes mDive{0%,61%{transform:translate(0px,0px) rotate(0deg);animation-timing-function:cubic-bezier(.4,0,1,1)}66%,88%{transform:translate(-90px,52px) rotate(-78deg);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}94%,100%{transform:translate(0px,0px) rotate(0deg)}}
@keyframes mReady{0%,100%{transform:translateX(0)}25%{transform:translateX(-14px)}75%{transform:translateX(14px)}}
@keyframes mNet{0%,67%{transform:scale(1,1);animation-timing-function:cubic-bezier(0,0,.4,1)}71%{transform:scale(1.07,1.05);animation-timing-function:cubic-bezier(.25,.1,.25,1)}75%,100%{transform:scale(1,1)}}
@keyframes mGol{0%,66%{opacity:0;transform:scale(.6);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}71%{opacity:1;transform:scale(1.08)}76%{transform:scale(1)}90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes mMeg{0%,22%{opacity:0}26%,36%{opacity:1}42%,100%{opacity:0}}
/* Generated from the artboard's inline styles */
.sv1{position:absolute;inset:0;width:100%;height:100%}
.sv2{cursor:pointer}
.sv3{fill:var(--accent-soft)}
.sv4{transform-box:fill-box;transform-origin:top center;animation:sway 6s ease-in-out infinite}
.sv5{transform-box:fill-box;transform-origin:top center;animation:sway 6s ease-in-out infinite reverse}
.sv6{transform-box:fill-box;transform-origin:bottom center}
.sv7{font-family:var(--mono);font-size:14px}
.sv8{transform-box:fill-box;transform-origin:bottom center;animation:breathe 3.4s ease-in-out infinite}
.sv9{animation:twitchy .55s ease}
.sv10{font-family:var(--mono)}
.sv11{font-size:20px;transform-box:fill-box;transform-origin:center;animation:floatZ 3.6s linear infinite}
.sv12{font-size:26px;transform-box:fill-box;transform-origin:center;animation:floatZ 3.6s linear infinite 1.2s}
.sv13{font-size:32px;transform-box:fill-box;transform-origin:center;animation:floatZ 3.6s linear infinite 2.4s}
.sv14{transform-box:fill-box;transform-origin:bottom left;animation:popIn .22s ease}
.sv15{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:19px;color:var(--ink);white-space:nowrap}
.sv16{font-family:var(--serif);font-size:26px}
.sv17{transform:rotate({{ clockMinDeg }}deg);transform-origin:1290px 165px;transition:transform 1.4s cubic-bezier(.34,1.4,.4,1)}
.sv18{transform:rotate({{ clockHourDeg }}deg);transform-origin:1290px 165px;transition:transform 1.4s cubic-bezier(.34,1.4,.4,1)}
.sv19{animation:glowPulse 5s ease-in-out infinite}
.sv20{stroke:var(--accent)}
.sv21{animation:blink 5.2s linear infinite}
.sv22{transform-box:fill-box;transform-origin:top center;animation:typeTap .52s ease-in-out infinite}
.sv23{transform-box:fill-box;transform-origin:top center;animation:typeTap .52s ease-in-out infinite .26s}
.sv24{transform-box:fill-box;transform-origin:812px 465px;animation:swatA .65s ease}
.sv25{transform-box:fill-box;transform-origin:bottom;animation:steam 2.6s linear infinite}
.sv26{transform-box:fill-box;transform-origin:bottom;animation:steam 2.6s linear infinite 1.1s}
.sv27{font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.sv28{animation:dropIn .7s ease}
.sv29{fill:var(--accent);animation:pulseDot 2.4s ease-in-out infinite}
.sv30{cursor:pointer;transform-box:fill-box;transform-origin:top center;animation:swing 4.5s ease-in-out infinite}
.sv31{font-family:var(--mono);font-size:22px;letter-spacing:.14em}
.sv32{font-family:var(--mono);font-size:18px;letter-spacing:.3em;fill:var(--accent)}
.sv33{animation:pulseDot 3.2s ease-in-out infinite}
.sv34{animation:pulseDot 4.1s ease-in-out infinite 1s}
.sv35{transform-box:fill-box;transform-origin:bottom;animation:steam 2.8s linear infinite}
.sv36{transform-box:fill-box;transform-origin:bottom;animation:steam 2.8s linear infinite 1.3s}
.sv37{animation:blink 6.1s linear infinite .8s}
.sv38{transform-box:fill-box;transform-origin:top center;animation:footTap 1.1s ease-in-out infinite}
.sv39{transform-box:fill-box;transform-origin:bottom left;animation:tailFlick 5s ease-in-out infinite}
.sv40{animation:popIn .2s ease}
.sv41{font-family:var(--mono);font-size:17px}
.sv42{animation:dashMove 1.2s linear infinite}
.sv43{transform-box:fill-box;transform-origin:bottom right;animation:sway 1.4s ease-in-out infinite}
.sv44{animation:dropFall 1.8s linear infinite}
.sv45{animation:dropFall 2.2s linear infinite .7s}
.sv46{transform-box:fill-box;transform-origin:bottom;animation:steam 3s linear infinite}
.sv47{transform-box:fill-box;transform-origin:bottom;animation:steam 3s linear infinite 1.4s}
.sv48{cursor:pointer;transform-box:fill-box;transform-origin:top center;animation:sway 7s ease-in-out infinite}
.sv49{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px;color:var(--ink)}
.sv50{animation:dashBack .8s linear infinite}
.sv51{cursor:pointer;animation:drift 9s ease-in-out infinite}
.sv52{cursor:pointer;animation:drift 12s ease-in-out infinite 2s}
.sv53{animation:exhaust 2s linear infinite}
.sv54{animation:exhaust 2s linear infinite 1s}
.sv55{animation:carBounce .55s ease-in-out infinite}
.sv56{animation:blink 5.7s linear infinite 1.4s}
.sv57{transform-box:fill-box;transform-origin:center;animation:wheelSpin 1.1s linear infinite}
.sv58{cursor:pointer;animation:drift 11s ease-in-out infinite}
.sv59{animation:blink 5.5s linear infinite .4s}
.sv60{transform-box:fill-box;transform-origin:top center;animation:kickA .9s ease-in-out infinite}
.sv61{cursor:pointer;animation:ballB .9s ease-in-out infinite}
.sv62{font-family:var(--mono);font-size:14px;letter-spacing:.1em}
.sv63{cursor:pointer;transform-box:fill-box;transform-origin:top center;animation:bagSway 2.4s ease-in-out infinite}
.sv64{animation:blink 4.9s linear infinite 1.1s}
.sv65{transform-origin:966px 432px;animation:punchJab 1.3s ease-in-out infinite}
.sv66{animation:glowPulse 3.4s ease-in-out infinite}
.sv67{fill:var(--accent)}
.sv68{fill:var(--accent);animation:pulseDot 2.2s ease-in-out infinite}
.sv69{cursor:pointer;animation:glowPulse 3.4s ease-in-out infinite}
.sv70{animation:bob 3.2s ease-in-out infinite}
.sv71{animation:blink 4.6s linear infinite .6s}
.sv72{transform-box:fill-box;transform-origin:top right;animation:typeTap .5s ease-in-out infinite}
.sv73{cursor:pointer;font-family:var(--serif)}
.sv74{font-size:34px;transform-box:fill-box;transform-origin:center;animation:floatZ 3s linear infinite}
.sv75{font-size:28px;transform-box:fill-box;transform-origin:center;animation:floatZ 3s linear infinite 1s}
.sv76{font-size:30px;transform-box:fill-box;transform-origin:center;animation:floatZ 3s linear infinite 2s}
.sv77{animation:blink 5.8s linear infinite 2s}
.sv78{transform-origin:858px 400px;animation:drumHit .42s ease-in-out infinite}
.sv79{transform-origin:862px 400px;animation:drumHit .42s ease-in-out infinite .21s}
.sv80{animation:mCam 12s linear infinite}
.sv81{cursor:pointer;animation:drift 13s ease-in-out infinite 3s}
.sv82{transform-origin:794px 1055px;animation:mNet 12s linear infinite}
.sv83{animation:mShowRun 12s linear infinite}
.sv84{animation:mReady 2.6s ease-in-out infinite}
.sv85{transform-origin:790px 1150px;animation:mDive 12s linear infinite}
.sv86{animation:mShowCeleb 12s linear infinite}
.sv87{cursor:pointer;transform-origin:360px 1150px;animation:mSpin 12s linear infinite}
.sv88{font-family:var(--mono);font-size:26px;letter-spacing:.12em;animation:mMeg 12s linear infinite}
.sv89{cursor:pointer;transform-origin:505px 1150px;animation:mFall 12s linear infinite}
.sv90{cursor:pointer;animation:mBall 12s linear infinite}
.sv91{animation:mHero 12s linear infinite}
.sv92{transform-origin:0px 1030px;animation:mRunA .5s ease-in-out infinite}
.sv93{transform-origin:0px 1030px;animation:mRunB .5s ease-in-out infinite}
.sv94{transform-origin:0px 1096px;animation:mRunB .5s ease-in-out infinite}
.sv95{transform-origin:0px 1096px;animation:mRunA .5s ease-in-out infinite}
.sv96{transform:translateX(560px);animation:mShowCeleb 12s linear infinite}
.sv97{animation:bob .9s ease-in-out infinite}
.sv98{font-family:var(--serif);font-size:96px;font-weight:600;transform-origin:450px 560px;animation:mGol 12s linear infinite}
.sv99{animation:popIn .22s ease}