*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border: 0;
  outline: 0;
  overflow: hidden;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.stage:focus-visible {
  outline: 0;
}

.stage:focus-visible .oleg-word {
  outline: 3px solid currentColor;
  outline-offset: .08em;
}

body.coarse-pointer .stage {
  cursor: default;
}

.oleg-word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(4.5rem, 18vw, 15rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform-origin: center;
}

.letter {
  display: inline-block;
  transform-origin: center bottom;
}

.fx-layer {
  position: fixed;
  z-index: 2;
  inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  pointer-events: none;
}

.flash-layer {
  position: fixed;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.chaos-node {
  position: absolute;
  display: block;
  color: currentColor;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.fx-mega-stretch {
  animation: oleg-mega-stretch 900ms cubic-bezier(.2, .9, .15, 1) both;
}

.fx-micro-squash {
  animation: oleg-micro-squash 760ms steps(5, end) both;
}

.fx-violent-shake {
  animation: oleg-violent-shake 75ms steps(2, end) 8 alternate both;
}

.fx-upside-down {
  animation: oleg-upside-down 980ms cubic-bezier(.6, -.35, .28, 1.35) both;
}

.fx-vertical-stack {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .12em;
  white-space: normal;
}

.letter.fx-letter-scatter {
  animation: oleg-letter-scatter 1250ms cubic-bezier(.16, .8, .2, 1) var(--scatter-delay) both;
}

.letter.fx-letter-escape {
  animation: oleg-letter-escape 1200ms cubic-bezier(.7, 0, .25, 1) both;
}

.fx-gravity-bounce {
  animation: oleg-gravity-bounce 1350ms cubic-bezier(.25, .7, .3, 1) both;
}

.fx-fast-spin {
  animation: oleg-fast-spin 180ms linear 4 both;
}

.fx-accelerating-spin {
  animation: oleg-accelerating-spin 1500ms cubic-bezier(.82, .02, 1, .5) both;
}

.fx-viewport-hop {
  animation: oleg-viewport-hop 1450ms steps(1, end) both;
}

.fx-pointer-escape {
  animation: oleg-pointer-escape 1050ms cubic-bezier(.12, .9, .22, 1) both;
}

.fx-perspective-tilt {
  animation: oleg-perspective-tilt 1250ms cubic-bezier(.2, .75, .2, 1) both;
}

.fx-nonsense-skew {
  animation: oleg-nonsense-skew 1100ms ease-in-out both;
}

.fx-fake-marquee {
  animation: oleg-fake-marquee 1800ms linear both;
}

.letter.fx-hinged-collapse {
  animation: oleg-hinged-collapse 1100ms cubic-bezier(.55, .05, .7, .2) var(--hinge-delay) both;
  transform-origin: top center;
}

.fx-font-roulette {
  font-family: var(--roulette-font);
  font-weight: 900;
}

.fx-giant-type {
  font-size: max(44vw, 18rem);
  line-height: .62;
}

.fx-microscopic-type {
  font-size: clamp(4px, 1.2vw, 12px);
  letter-spacing: 0;
}

.fx-broken-spacing {
  letter-spacing: var(--broken-spacing);
  word-spacing: var(--broken-word-spacing);
}

.letter.fx-giant-letter {
  transform: scale(3.6) translateY(-.08em);
  margin-inline: .45em;
}

.letter.fx-tiny-neighbor {
  transform: scale(.28);
  opacity: .72;
}

.fx-word-art {
  color: #ffef00;
  -webkit-text-stroke: .035em #7611ff;
  text-shadow:
    .035em .035em 0 #ff1744,
    .07em .07em 0 #00e5ff,
    .105em .105em 0 #1b00ff,
    .14em .14em .02em rgba(0, 0, 0, .65);
}

.letter.fx-baseline-chaos {
  transform: translateY(var(--baseline-y)) scale(var(--baseline-scale)) rotate(var(--baseline-r));
}

.letter.fx-letter-pile {
  transform: translate(var(--pile-x), var(--pile-y)) rotate(var(--pile-r));
  margin-right: -.42em;
}

.fx-fake-emboss {
  color: #b7b7b7;
  -webkit-text-stroke: .012em #555;
  text-shadow: -2px -2px 0 #fff, 2px 2px 0 #3c3c3c, 5px 5px 8px rgba(0, 0, 0, .55);
}

.fx-rgb-split {
  color: #111;
  text-shadow:
    var(--rgb-negative-offset) 0 0 rgba(255, 0, 55, .82),
    var(--rgb-offset) 0 0 rgba(0, 210, 255, .82),
    0 var(--rgb-lower-offset) 0 rgba(80, 255, 0, .64);
}

.fx-blur-snap {
  animation: oleg-blur-snap 1050ms steps(2, end) both;
}

.fx-contrast-burn {
  filter: contrast(550%) saturate(750%) brightness(1.18);
  color: #ff3d00;
}

.fx-invert-hue {
  filter: invert(1) hue-rotate(var(--hue-angle));
}

.fx-deep-fry {
  color: #ff5100;
  filter: contrast(700%) saturate(900%) brightness(1.25) sepia(.5);
  text-shadow: 0 0 .025em #fff, .045em .045em 0 #0b00ff, -.045em -.045em 0 #ffe600;
}

.fx-pixel-step {
  animation: oleg-pixel-step 130ms steps(2, jump-none) 8 both;
  text-shadow: 6px 0 0 #f0f, -6px 0 0 #0ff;
}

.fx-decoration-roulette {
  animation: oleg-decoration-roulette 160ms steps(1, end) 7 both;
  text-decoration-thickness: .08em;
}

.fx-clone {
  left: var(--clone-x);
  top: var(--clone-y);
  font-size: clamp(1.3rem, 6vw, 5rem);
  animation: oleg-clone-burst 1200ms cubic-bezier(.16, .82, .35, 1) var(--clone-delay) both;
}

.fx-rain-letter {
  left: var(--rain-x);
  top: -12vh;
  font-size: var(--rain-size);
  animation: oleg-letter-rain 1650ms cubic-bezier(.35, .05, .72, .55) var(--rain-delay) both;
}

.flash-layer.fx-screen-flash {
  background: var(--flash-color);
  animation: oleg-screen-flash 220ms steps(1, end) both;
}

body.fx-bad-background {
  background:
    repeating-linear-gradient(117deg, transparent 0 17px, rgba(0, 0, 0, .55) 18px 27px),
    linear-gradient(43deg, var(--bad-color-a), var(--bad-color-b));
  color: #fff;
}

.oleg-word.fx-viewport-tilt {
  animation: oleg-viewport-tilt 1300ms ease-in-out both;
  transform-origin: center;
}

.oleg-word.fx-page-zoom {
  animation: oleg-page-zoom 1100ms cubic-bezier(.7, 0, .25, 1) both;
  transform-origin: center;
}

.oleg-word.fx-fake-freeze {
  animation: oleg-fake-freeze 1500ms steps(1, end) both;
}

@keyframes oleg-mega-stretch {
  0%, 100% { transform: translate(-50%, -50%) scaleX(1); }
  38%, 72% { transform: translate(-50%, -50%) scaleX(var(--mega-stretch)) scaleY(.72); }
}

@keyframes oleg-micro-squash {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  35%, 75% { transform: translate(-50%, -50%) scaleX(var(--micro-width)) scaleY(1.55); }
}

@keyframes oleg-violent-shake {
  from { transform: translate(calc(-50% + var(--shake-negative-x)), calc(-50% + var(--shake-x))) rotate(var(--shake-negative-r)); }
  to { transform: translate(calc(-50% + var(--shake-x)), calc(-50% + var(--shake-negative-x))) rotate(var(--shake-r)); }
}

@keyframes oleg-upside-down {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  38%, 72% { transform: translate(-50%, -50%) rotate(180deg); }
}

@keyframes oleg-letter-scatter {
  0%, 100% { transform: none; opacity: 1; }
  42%, 72% { transform: translate(var(--scatter-x), var(--scatter-y)) rotate(var(--scatter-r)); opacity: .76; }
}

@keyframes oleg-letter-escape {
  0%, 18%, 100% { transform: none; }
  52%, 72% { transform: translate(var(--escape-letter-x), var(--escape-letter-y)) rotate(340deg); }
}

@keyframes oleg-gravity-bounce {
  0%, 100% { transform: translate(-50%, -50%); }
  36% { transform: translate(-50%, 34vh) scaleY(.72); }
  54% { transform: translate(-50%, 4vh) scaleY(1.08); }
  69% { transform: translate(-50%, 28vh) scaleY(.82); }
  82% { transform: translate(-50%, 15vh); }
}

@keyframes oleg-fast-spin {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

@keyframes oleg-accelerating-spin {
  0%, 18% { transform: translate(-50%, -50%) rotate(0); }
  92% { transform: translate(-50%, -50%) rotate(5.8turn) scale(.78); }
  93%, 100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
}

@keyframes oleg-viewport-hop {
  0%, 100% { transform: translate(-50%, -50%); }
  18% { transform: translate(calc(-50% + var(--hop-x-a)), calc(-50% + var(--hop-y-a))) rotate(-7deg); }
  42% { transform: translate(calc(-50% + var(--hop-x-b)), calc(-50% + var(--hop-y-b))) rotate(9deg); }
  68% { transform: translate(calc(-50% - var(--hop-x-a)), calc(-50% - var(--hop-y-b))) rotate(-4deg); }
}

@keyframes oleg-pointer-escape {
  0%, 100% { transform: translate(-50%, -50%); }
  34%, 74% { transform: translate(calc(-50% + var(--pointer-away-x)), calc(-50% + var(--pointer-away-y))) scale(.82); }
}

@keyframes oleg-perspective-tilt {
  0%, 100% { transform: translate(-50%, -50%) perspective(500px) rotateX(0) rotateY(0); }
  38%, 72% { transform: translate(-50%, -50%) perspective(500px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
}

@keyframes oleg-nonsense-skew {
  0%, 100% { transform: translate(-50%, -50%); }
  44%, 72% { transform: translate(-50%, -50%) skew(var(--nonsense-x), var(--nonsense-y)) scaleY(var(--nonsense-scale)); }
}

@keyframes oleg-fake-marquee {
  0% { transform: translate(-160vw, -50%); }
  50% { transform: translate(-50%, -50%); }
  100% { transform: translate(110vw, -50%); }
}

@keyframes oleg-hinged-collapse {
  0%, 100% { transform: perspective(300px) rotateX(0); opacity: 1; }
  48%, 75% { transform: perspective(300px) rotateX(var(--hinge-angle)); opacity: .14; }
}

@keyframes oleg-blur-snap {
  0%, 70% { filter: blur(var(--blur-amount)); opacity: .7; }
  71%, 100% { filter: blur(0); opacity: 1; }
}

@keyframes oleg-pixel-step {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: contrast(1); }
  50% { transform: translate(-50%, -50%) scale(1.08, .94); filter: contrast(4); }
}

@keyframes oleg-decoration-roulette {
  0% { text-decoration: underline wavy #ff1744; }
  33% { text-decoration: line-through double #00b8ff; }
  66% { text-decoration: overline dashed #35ff00; }
  100% { text-decoration: underline dotted #8c00ff; }
}

@keyframes oleg-clone-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.05); }
  22%, 68% { opacity: .92; transform: translate(-50%, -50%) rotate(var(--clone-r)) scale(var(--clone-scale)); }
  100% { opacity: 0; transform: translate(-50%, -75%) rotate(var(--clone-negative-r)) scale(.1); }
}

@keyframes oleg-letter-rain {
  0% { transform: translateY(0) rotate(0); opacity: 0; }
  10%, 78% { opacity: .9; }
  100% { transform: translateY(var(--rain-end)) rotate(var(--rain-r)); opacity: 0; }
}

@keyframes oleg-screen-flash {
  0%, 58% { opacity: .96; }
  59%, 100% { opacity: 0; }
}

@keyframes oleg-viewport-tilt {
  0%, 100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  32%, 75% { transform: translate(-50%, -50%) rotate(var(--viewport-r)) scale(.96); }
}

@keyframes oleg-page-zoom {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: none; }
  32%, 70% { transform: translate(-50%, -50%) scale(var(--page-zoom)); filter: saturate(1.8); }
}

@keyframes oleg-fake-freeze {
  0%, 74% { transform: translate(-50%, -50%); filter: grayscale(1) contrast(1.4); cursor: wait; }
  75%, 92% { transform: translate(-50%, -50%) rotate(var(--resume-r)) skewX(6deg); filter: hue-rotate(110deg); cursor: progress; }
  100% { transform: translate(-50%, -50%); filter: none; cursor: pointer; }
}

@keyframes oleg-reduced-static {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) scale(.98); }
}

@keyframes oleg-reduced-letter-static {
  0%, 100% { transform: rotate(3deg) scale(.96); }
}

body.reduced-motion .fx-violent-shake,
body.reduced-motion .fx-gravity-bounce,
body.reduced-motion .fx-fast-spin,
body.reduced-motion .fx-accelerating-spin,
body.reduced-motion .fx-viewport-hop,
body.reduced-motion .fx-pointer-escape,
body.reduced-motion .fx-fake-marquee,
body.reduced-motion .fx-pixel-step {
  animation: oleg-reduced-static 120ms linear 1 both;
}

body.reduced-motion .letter.fx-letter-scatter,
body.reduced-motion .letter.fx-letter-escape {
  animation: oleg-reduced-letter-static 120ms linear 1 both;
}

body.reduced-motion .fx-rain-letter {
  animation: none;
  opacity: .22;
  transform: translateY(42vh);
}

body.reduced-motion .flash-layer.fx-screen-flash {
  animation: none;
  opacity: .12;
}

body.reduced-motion .oleg-word.fx-reduced-geometry,
body.reduced-motion .oleg-word.fx-reduced-typography,
body.reduced-motion .oleg-word.fx-reduced-corruption,
body.reduced-motion .oleg-word.fx-reduced-page {
  animation: none !important;
}

body.reduced-motion .oleg-word.fx-reduced-geometry {
  transform: translate(-50%, -50%) rotate(-3deg) scale(.96) !important;
  outline: .035em solid currentColor;
  outline-offset: .08em;
}

body.reduced-motion .oleg-word.fx-reduced-typography {
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic;
  letter-spacing: .045em !important;
  text-decoration: underline double currentColor;
}

body.reduced-motion .oleg-word.fx-reduced-corruption {
  color: #6a00ff !important;
  filter: sepia(.65) contrast(1.35) !important;
  text-shadow: .04em .04em 0 #00b8ff !important;
}

body.reduced-motion .oleg-word.fx-reduced-page {
  background: #ffef72 !important;
  box-shadow: 0 0 0 .06em currentColor !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .fx-violent-shake,
  .fx-gravity-bounce,
  .fx-fast-spin,
  .fx-accelerating-spin,
  .fx-viewport-hop,
  .fx-pointer-escape,
  .fx-fake-marquee,
  .fx-pixel-step {
    animation-name: oleg-reduced-static !important;
  }

  .letter.fx-letter-scatter,
  .letter.fx-letter-escape {
    animation-name: oleg-reduced-letter-static !important;
  }

  .fx-rain-letter,
  .flash-layer.fx-screen-flash {
    opacity: .12;
  }

  .oleg-word.fx-reduced-geometry,
  .oleg-word.fx-reduced-typography,
  .oleg-word.fx-reduced-corruption,
  .oleg-word.fx-reduced-page {
    animation: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .stage {
    cursor: default;
  }
}