@charset "UTF-8";
/* Colors */
/**
 * From highlights.scss
 * Consider consolidating these with the other colors above
 */
/** The "Highlight" word-display style's green */
/** End from highlights.scss */
/**
 * Border radii — use these rather than ad-hoc pixel values
 */
/**
 * Font sizes — use these rather than ad-hoc pixel values
 */
/**
 * The "Cursive Font" translation font. loadHandwritingFont.ts sets the variable
 * (Delius for the deliusTranslationFont1 experiment arm).
 */
/**
 * Shadows
 */
/**
 * Media Queries
 *
 * The transition points are defined once here — never hard-code them in
 * media queries. Each tier's upper bound is inclusive (`width <= X`) and the
 * next tier starts at the same value, exclusive (`X < width`), so the tiers
 * tile the whole range. That matters because a zoomed browser reports a
 * fractional viewport width (110% zoom → 546.36px), and a width matching no
 * tier falls back to the desktop base styles, which overflow a small viewport.
 * Range syntax is compiled by postcss to min-/max-width for older browsers,
 * turning each exclusive bound into a 0.02px step (`min-width: 546.02px`), so
 * always use one constant for both sides of a boundary — never two values.
 */
/* desktop: default - everything above tablet */
body span.yourWord:not(.translating) {
  border-bottom: 1px solid rgba(67, 176, 138, 0.5);
  box-shadow: 0 -4px 0 rgba(67, 176, 138, 0.5) inset;
}

body.colorDark span.yourWord:not(.translating) {
  border-bottom: 1px solid #368;
  box-shadow: 0 -4px 0 #368 inset;
}

body.colorLight span.yourWord:not(.translating) {
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
  box-shadow: 0 -4px 0 rgba(153, 153, 153, 0.5) inset;
}

body span.yourWord.translating,
body span.yourWord.translated,
body span.translating span.yourWord,
body span.translated span.yourWord {
  border-bottom: none;
  box-shadow: none;
}

body[data-clickMode=translate].notouch span[data-p]:hover,
body[data-clickMode=translate] span[data-p].selecting,
span.translating,
body.notouch[data-clickMode=translate] span[data-p]:hover,
body span[data-p].selecting {
  outline: 2px solid rgba(67, 176, 138, 0.5);
}

body.colorDark span.audioPosition {
  color: #fff;
  text-shadow: #eee 0 0 3px;
}

span.translated {
  position: relative;
  background-color: rgba(67, 176, 138, 0.15);
}

body.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
body.colorSepia[data-clickMode=translate] span[data-p].selecting,
body.colorSepia span.translating,
body span[data-p].selecting,
body span.translating {
  outline: 2px solid rgba(67, 176, 138, 0.5);
}

body.glossStyle[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle[data-clickMode=translate] span[data-p].selecting,
body.glossStyle span.translating,
body.glossStyle.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle.colorSepia[data-clickMode=translate] span[data-p].selecting,
body.glossStyle.colorSepia span.translating {
  outline: none;
  border-bottom: 1px solid rgba(67, 176, 138, 0.5);
  box-shadow: 0 -4px 0 rgba(67, 176, 138, 0.5) inset;
}

body.glossStyleNew[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyleNew[data-clickMode=translate] span[data-p].selecting,
body.glossStyleNew span.translating,
body.glossStyleNew.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyleNew.colorSepia[data-clickMode=translate] span[data-p].selecting,
body.glossStyleNew.colorSepia span.translating {
  outline: none;
  background-color: rgba(42, 185, 123, 0.3);
}

body.glossStyleNew[data-clickMode=translate].notouch span[data-p].translated:hover,
body.glossStyleNew.colorSepia[data-clickMode=translate].notouch span[data-p].translated:hover,
body.glossStyleNew.colorDark[data-clickMode=translate].notouch span[data-p].translated:hover {
  background-color: inherit;
}

body.glossStyle.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle.colorDark[data-clickMode=translate] span[data-p].selecting,
body.glossStyle.colorDark span.translating {
  outline: none;
  border-bottom: 1px solid #368;
  box-shadow: 0 -4px 0 #368 inset;
}

body.glossStyleNew.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyleNew.colorDark[data-clickMode=translate] span[data-p].selecting,
body.glossStyleNew.colorDark span.translating {
  outline: none;
  background-color: #368;
  color: #acd;
}

body.glossStyleNew.colorLight[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyleNew.colorLight[data-clickMode=translate] span[data-p].selecting,
body.glossStyleNew.colorLight span.translating {
  outline: none;
  background-color: #bbb;
  color: black;
}

body.glossStyle[data-clickMode=translate].notouch span[data-p]:hover,
body.glossStyle.colorSepia[data-clickMode=translate].notouch span[data-p]:hover {
  border-bottom: 1px solid #43b08a;
  box-shadow: 0 -3px 0 #43b08a inset;
}

body.glossStyle.colorDark[data-clickMode=translate].notouch span[data-p]:hover {
  border-bottom: 1px solid #9bc;
  box-shadow: 0 -3px 0 #9bc inset;
}

body span.translating .original {
  display: none;
}

body span.translating .translation {
  display: inline;
  text-shadow: none;
}
body span.translating .translation .transliteration {
  font-size: 80%;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

body.glossStyle span.translating .original {
  display: block;
}

body.glossStyleNew span.translating .original {
  display: block;
  background-color: #2ab97b;
  color: white;
  padding: 2px 5px;
  margin-top: 9px;
  position: relative;
}

body.glossStyleNew span.translating.monolingual,
body.glossStyleNew.colorSepia span.translating.monolingual {
  display: inline-block;
  background-color: #2ab97b !important;
  border: 3px solid #2ab97b;
  margin: -3px;
  color: white;
  position: relative;
}

body.glossStyleNew.colorDark span.translating.monolingual {
  background-color: #368 !important;
  border-color: #368;
}

body.glossStyleNew.colorLight span.translating.monolingual {
  background-color: black !important;
  border-color: black;
}

body.glossStyleNew.colorDark span.translating .original {
  background-color: #368;
}

body.glossStyleNew span.translating .original:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #2ab97b;
  border-width: 8px;
  margin-left: -8px;
}

body.glossStyleNew.colorDark span.translating .original:after {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #368;
}

body.glossStyleNew.colorLight span.translating .original {
  background-color: black;
}

body.glossStyleNew.colorLight span.translating .original:after {
  border-color: transparent;
  border-bottom-color: black;
}

body.glossStyle span.translating .translation {
  font-weight: normal;
  font-family: sans-serif;
  line-height: 0.9;
  padding-top: 4px;
  opacity: 1;
  display: block;
  animation: fadeIn 400ms ease-out;
}

body.glossStyleNew span.translating .translation {
  animation: fadeIn 400ms ease-out;
}

body.basicLatinFirstLanguage.glossStyle span.translating .translation,
body.basicLatinFirstLanguage.glossStyleNew span.translating .translation,
body.basicLatinFirstLanguage.popoverStyle span.translating .translation {
  font-family: "Coming Soon", sans-serif;
  font-family: var(--handwriting-font, "Coming Soon"), sans-serif;
}

body.normalTranslationFont.basicLatinFirstLanguage.glossStyle span.translating .translation,
body.normalTranslationFont.basicLatinFirstLanguage.glossStyleNew span.translating .translation,
body.normalTranslationFont.basicLatinFirstLanguage.popoverStyle span.translating .translation {
  font-family: Jost, sans-serif;
}

body.colorSepia span.translated,
body span.translated {
  background-color: rgba(67, 176, 138, 0.15);
}

body.glossStyle span.translated,
body.glossStyle.colorSepia span.translated,
body.glossStyle.colorLight span.translated,
body.glossStyle.colorDark span.translated {
  background-color: inherit;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

body.glossStyleNew span.translated,
body.glossStyleNew.colorSepia span.translated,
body.glossStyleNew.colorLight span.translated,
body.glossStyleNew.colorDark span.translated {
  background-color: inherit;
  display: inline-block;
  text-align: center;
}

body.glossStyle span.translated,
body.glossStyle.colorSepia span.translated {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}

body.glossStyleNew span.translated,
body.glossStyleNew.colorSepia span.translated {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}

body.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
body.colorDark[data-clickMode=translate] span[data-p].selecting,
body.colorDark span.translating {
  outline: 2px solid #368;
}

body.colorDark span.translated {
  background-color: #124;
  color: #9bc;
}

body.glossStyle.colorDark span.translated {
  background-color: inherit;
  color: #9bc;
}

body.popoverStyle[data-clickMode=translate].notouch span[data-p]:hover,
body.popoverStyle[data-clickMode=translate] span[data-p].selecting,
body.popoverStyle span.translating,
body.popoverStyle.colorSepia[data-clickMode=translate].notouch span[data-p]:hover,
body.popoverStyle.colorSepia[data-clickMode=translate] span[data-p].selecting,
body.popoverStyle.colorSepia span.translating {
  outline: none;
  background-color: rgba(42, 185, 123, 0.3);
}

body.popoverStyle[data-clickMode=translate].notouch span[data-p].translated:hover,
body.popoverStyle.colorSepia[data-clickMode=translate].notouch span[data-p].translated:hover,
body.popoverStyle.colorDark[data-clickMode=translate].notouch span[data-p].translated:hover {
  background-color: inherit;
}

body.popoverStyle.colorDark[data-clickMode=translate].notouch span[data-p]:hover,
body.popoverStyle.colorDark[data-clickMode=translate] span[data-p].selecting,
body.popoverStyle.colorDark span.translating {
  outline: none;
  background-color: #368;
  color: #acd;
}

body.popoverStyle.colorLight[data-clickMode=translate].notouch span[data-p]:hover,
body.popoverStyle.colorLight[data-clickMode=translate] span[data-p].selecting,
body.popoverStyle.colorLight span.translating {
  outline: none;
  background-color: #bbb;
  color: black;
}

body.popoverStyle span.translating .original {
  display: inline;
}

body.popoverStyle span.translating .translation {
  display: none;
}

.readerPopoverLayer {
  pointer-events: none;
  position: fixed;
  overflow: hidden;
  z-index: 100;
}

.readerPopoverBubble {
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  display: none;
  max-width: min(320px, 100vw - 16px);
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #2ab97b;
  color: white;
  font-family: inherit;
  font-size: inherit;
  text-align: center;
  line-height: 1.4;
  font-weight: normal;
  white-space: normal;
  word-wrap: break-word;
  animation: fadeIn 400ms ease-out;
}

.readerPopoverBubble.deleting {
  -webkit-text-decoration: line-through;
  text-decoration: line-through;
}

.readerPopoverBubble .transliteration {
  font-size: 80%;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.readerPopoverBubble:after {
  top: 100%;
  left: 50%;
  left: var(--arrow-left, 50%);
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-top-color: #2ab97b;
  border-width: 6px;
  margin-left: -6px;
}

body.popoverStyle span.translated,
body.popoverStyle.colorSepia span.translated,
body.popoverStyle.colorLight span.translated,
body.popoverStyle.colorDark span.translated {
  background-color: inherit;
}

body.popoverStyle span.translated,
body.popoverStyle.colorSepia span.translated {
  color: rgb(59.9691358025, 157.5308641975, 123.5185185185);
}

body.popoverStyle.colorDark span.translated {
  color: #9bc;
}

body.popoverStyle.colorDark .readerPopoverBubble {
  background-color: #368;
}

body.popoverStyle.colorDark .readerPopoverBubble:after {
  border-top-color: #368;
}

body.popoverStyle.colorLight .readerPopoverBubble {
  background-color: black;
}

body.popoverStyle.colorLight .readerPopoverBubble:after {
  border-top-color: black;
}

body.popoverStyle span.translating.monolingual,
body.popoverStyle.colorSepia span.translating.monolingual {
  background-color: rgba(42, 185, 123, 0.3);
}

body.popoverStyle.colorDark span.translating.monolingual {
  background-color: #368;
}

body.popoverStyle.colorLight span.translating.monolingual {
  background-color: #eee;
}

.readerPopoverBubble.popoverBelow:after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #2ab97b;
}

body.popoverStyle.colorDark .readerPopoverBubble.popoverBelow:after {
  border-top-color: transparent;
  border-bottom-color: #368;
}

body.popoverStyle.colorLight .readerPopoverBubble.popoverBelow:after {
  border-top-color: transparent;
  border-bottom-color: black;
}

body[data-clickMode=sync] span[data-p].audioSync {
  opacity: 0.5;
}

body[data-clickMode=goto].notouch span[data-p]:hover,
body[data-clickMode=sync].notouch span[data-p]:hover,
body[data-clickMode=sync] span[data-p].audioSync.audioPosition {
  opacity: 1;
}

body.audioHighlightFade span[data-p] {
  transition: color 800ms ease-out, background-color 800ms ease-out, text-shadow 800ms ease-out;
}

body.audioHighlightFade span[data-p].audioPosition {
  transition: none;
}

span.audioPosition,
body[data-clickMode=sync] span[data-p].audioSync,
body[data-clickMode=goto].notouch span[data-p]:hover,
body[data-clickMode=sync].notouch span[data-p]:hover {
  color: #fff;
  text-shadow: #000 0 0 4px;
  background-color: #975;
  border-radius: 4px;
  transition: none;
}

body.colorDark span.audioPosition,
body.colorDark[data-clickMode=sync] span[data-p].audioSync,
body.colorDark[data-clickMode=goto].notouch span[data-p]:hover,
body.colorDark[data-clickMode=sync].notouch span[data-p]:hover {
  color: #fff;
  text-shadow: #012 0 0 4px;
  background-color: #368;
}

body[data-clickMode=sync].notouch span[data-p]:hover {
  cursor: copy;
}

.rabbitAnimation {
  padding: 16px;
  text-align: center;
}
.rabbitAnimation.heroRabbit {
  width: 100%;
  padding: 0;
}
.rabbitAnimation.heroRabbit .animationStage {
  width: 100%;
  margin: 0;
}
.rabbitAnimation .motionToggle,
.rabbitAnimation .reducedMotionToggle {
  accent-color: rgb(45.9074074074, 120.5925925926, 94.5555555556);
  vertical-align: middle;
}
.rabbitAnimation .motionLabel,
.rabbitAnimation .reducedMotionLabel {
  cursor: pointer;
  vertical-align: middle;
}
.rabbitAnimation .animationStage {
  container-type: inline-size;
  position: relative;
  max-width: 560px;
  margin: 16px auto 0;
  aspect-ratio: 1/1.15;
}
.rabbitAnimation .rabbitFrames {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 88%;
  aspect-ratio: 1;
  background-image: url("/content/landingPages/rabbit-page-turn-sheet-v4.webp");
  background-size: 400% 300%;
  background-position: 0.184162% 1.657459%;
  background-repeat: no-repeat;
  transform: scaleX(-1);
}
.rabbitAnimation .rabbitFrames.pageTurn {
  animation: rabbitPageTurn 2s step-end;
}
.rabbitAnimation .rabbitFrames::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: 400% 300%;
  background-repeat: no-repeat;
  opacity: 0;
}
.rabbitAnimation .rabbitFrames.feetTwiddle::after {
  background-image: url("/content/landingPages/rabbit-feet-twiddle-sheet-v2.webp");
  animation: rabbitFeetTwiddle 2s step-end;
}
.rabbitAnimation .rabbitFrames.earTwitch::after {
  background-image: url("/content/landingPages/rabbit-ear-twitch-sheet-v2.webp");
  transform: scale(0.988);
  transform-origin: 52.5% 47%;
  animation: rabbitEarTwitch 2s step-end;
}
.rabbitAnimation .readingExcerpt {
  position: absolute;
  bottom: 69%;
  left: 0;
  z-index: 1;
  width: 76%;
  visibility: hidden;
  pointer-events: none;
  font-family: "Jost", sans-serif;
  font-size: max(12px, min(5.36cqw, 30px));
  line-height: 1.5;
}
.rabbitAnimation .excerptPaper {
  position: relative;
  padding: 0.9em 0;
  overflow: hidden;
  clip-path: url(#readingExcerptClip);
}
.rabbitAnimation .excerptSurface,
.rabbitAnimation .excerptOutline {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rabbitAnimation .excerptSurface {
  fill: #f0eedf;
}
.rabbitAnimation .excerptOutline {
  z-index: 1;
  fill: none;
  stroke: #151513;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rabbitAnimation .excerptCel {
  opacity: 0;
}
.rabbitAnimation .excerptRest {
  opacity: 1;
}
.rabbitAnimation .excerptMotion {
  stroke-width: 4;
}
.rabbitAnimation .excerptTopLine,
.rabbitAnimation .excerptPreviousLine,
.rabbitAnimation .excerptBottomLine {
  position: relative;
  left: 50%;
  width: -moz-max-content;
  width: max-content;
  transform: translateX(-50%);
  color: #555;
  white-space: nowrap;
}
.rabbitAnimation .excerptTopLine,
.rabbitAnimation .excerptBottomLine {
  position: absolute;
}
.rabbitAnimation .excerptTopLine {
  top: -0.6em;
}
.rabbitAnimation .excerptBottomLine {
  top: 3.9em;
}
.rabbitAnimation .excerptSentence {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  white-space: nowrap;
}
.rabbitAnimation .excerptBefore,
.rabbitAnimation .excerptAfter {
  width: -moz-max-content;
  width: max-content;
  white-space: pre;
  color: #555;
}
.rabbitAnimation .excerptBefore {
  justify-self: end;
}
.rabbitAnimation .discoveryWord {
  position: relative;
}
.rabbitAnimation .readingExcerpt .discoveryWord .translation {
  display: block;
  bottom: calc(100% + 0.25em);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Coming Soon", sans-serif;
  visibility: hidden;
  opacity: 0;
  animation: none;
  width: -moz-max-content;
  width: max-content;
  pointer-events: none;
}
.rabbitAnimation:not(.wordRevealed) .discoveryWord .original {
  color: #555;
}
.rabbitAnimation.discoveryVisible .readingExcerpt {
  visibility: visible;
}
.rabbitAnimation.wordRevealed .readingExcerpt .translation {
  visibility: visible;
  opacity: 1;
}
.rabbitAnimation.isPlaying .excerptCel {
  animation-duration: 500ms;
  animation-timing-function: step-end;
  animation-fill-mode: both;
}
.rabbitAnimation.isPlaying.discoveryVisible .excerptSmall {
  animation-name: rabbitExcerptFirstCel;
}
.rabbitAnimation.isPlaying.discoveryVisible .excerptExpanded,
.rabbitAnimation.isPlaying.discoveryVisible .excerptOpeningMarks {
  animation-name: rabbitExcerptSecondCel;
}
.rabbitAnimation.isPlaying.discoveryVisible .excerptRest {
  animation-name: rabbitExcerptThirdCel;
}
.rabbitAnimation.isPlaying.discoveryVisible .excerptPaper {
  animation: rabbitExcerptOpen 500ms step-end both;
}
.rabbitAnimation.isPlaying.discoveryExiting .readingExcerpt {
  visibility: visible;
  animation: rabbitExcerptHide 500ms step-end both;
}
.rabbitAnimation.isPlaying.discoveryExiting .excerptRest {
  animation-name: rabbitExcerptFirstCel;
}
.rabbitAnimation.isPlaying.discoveryExiting .excerptContracting,
.rabbitAnimation.isPlaying.discoveryExiting .excerptClosingMarks {
  animation-name: rabbitExcerptSecondCel;
}
.rabbitAnimation.isPlaying.discoveryExiting .excerptSmall {
  animation-name: rabbitExcerptThirdCel;
}
.rabbitAnimation.isPlaying.discoveryExiting .excerptPaper {
  animation: rabbitExcerptClose 500ms step-end both;
}
.rabbitAnimation.isPlaying .readingExcerpt .translation {
  transition: opacity 300ms ease-out;
}
.rabbitAnimation .reducedMotionToggle,
.rabbitAnimation .reducedMotionLabel,
.rabbitAnimation .reducedMotionNote {
  display: none;
}
.rabbitAnimation .reducedMotionNote {
  font-size: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .rabbitAnimation .motionToggle,
  .rabbitAnimation .motionLabel {
    display: none;
  }
  .rabbitAnimation .reducedMotionNote {
    display: block;
  }
  .rabbitAnimation .reducedMotionToggle,
  .rabbitAnimation .reducedMotionLabel {
    display: inline;
  }
}

@keyframes rabbitExcerptFirstCel {
  0% {
    opacity: 1;
  }
  33.333333%, 100% {
    opacity: 0;
  }
}
@keyframes rabbitExcerptSecondCel {
  0%, 66.666667%, 100% {
    opacity: 0;
  }
  33.333333% {
    opacity: 1;
  }
}
@keyframes rabbitExcerptThirdCel {
  0% {
    opacity: 0;
  }
  66.666667%, 100% {
    opacity: 1;
  }
}
@keyframes rabbitExcerptOpen {
  0% {
    clip-path: url(#readingExcerptSmallClip);
  }
  33.333333% {
    clip-path: url(#readingExcerptExpandedClip);
  }
  66.666667%, 100% {
    clip-path: url(#readingExcerptClip);
  }
}
@keyframes rabbitExcerptClose {
  0% {
    clip-path: url(#readingExcerptClip);
  }
  33.333333% {
    clip-path: url(#readingExcerptContractingClip);
  }
  66.666667%, 100% {
    clip-path: url(#readingExcerptSmallClip);
  }
}
@keyframes rabbitExcerptHide {
  0% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes rabbitPageTurn {
  0%, 100% {
    background-position: 0.184162% 1.657459%;
  }
  8.333333% {
    background-position: 33.425414% 1.657459%;
  }
  16.666667% {
    background-position: 66.574586% 1.657459%;
  }
  25% {
    background-position: 66.574586% 1.657459%;
  }
  33.333333% {
    background-position: 0.184162% 50%;
  }
  41.666667% {
    background-position: 33.425414% 50%;
  }
  50% {
    background-position: 66.574586% 50%;
  }
  58.333333% {
    background-position: 99.907919% 50%;
  }
  66.666667% {
    background-position: 0.184162% 98.066298%;
  }
  75% {
    background-position: 33.425414% 98.066298%;
  }
  83.333333% {
    background-position: 66.574586% 98.20442%;
  }
  91.666667% {
    background-position: 99.815838% 98.066298%;
  }
}
@keyframes rabbitFeetTwiddle {
  0%, 91.666667%, 100% {
    opacity: 0;
  }
  8.333333% {
    opacity: 1;
    background-position: 33.266261% 1.615145%;
  }
  16.666667% {
    opacity: 1;
    background-position: 66.438341% 1.615145%;
  }
  25% {
    opacity: 1;
    background-position: 99.702566% 1.615145%;
  }
  33.333333% {
    opacity: 1;
    background-position: 0.094181% 49.775219%;
  }
  41.666667% {
    opacity: 1;
    background-position: 33.266261% 49.775219%;
  }
  50% {
    opacity: 1;
    background-position: 66.438341% 49.775219%;
  }
  58.333333% {
    opacity: 1;
    background-position: 99.702566% 49.775219%;
  }
  66.666667% {
    opacity: 1;
    background-position: 0.094181% 98.073287%;
  }
  75% {
    opacity: 1;
    background-position: 33.266261% 98.073287%;
  }
  83.333333% {
    opacity: 1;
    background-position: 66.438341% 98.073287%;
  }
}
@keyframes rabbitEarTwitch {
  0%, 83.333333%, 100% {
    opacity: 0;
  }
  8.333333% {
    opacity: 1;
    background-position: 33.522013% -0.174823%;
  }
  16.666667% {
    opacity: 1;
    background-position: 66.635852% -0.17202%;
  }
  25.000000% {
    opacity: 1;
    background-position: 99.850003% -0.170464%;
  }
  33.333333% {
    opacity: 1;
    background-position: 0.336429% 49.818985%;
  }
  41.666667% {
    opacity: 1;
    background-position: 0.336429% 49.818985%;
  }
  50.000000% {
    opacity: 1;
    background-position: 66.685183% 49.811475%;
  }
  58.333333% {
    opacity: 1;
    background-position: 99.8439% 49.79285%;
  }
  66.666667% {
    opacity: 1;
    background-position: 0.326779% 99.73955%;
  }
  75.000000% {
    opacity: 1;
    background-position: 33.529087% 99.719714%;
  }
}