:root {
  color-scheme: light;
  --paper: #f3efe4;
  --ink: #11100e;
  --signal: #e73524;
  --edge: clamp(72px, 7vw, 112px);
  --track-x: 0px;
  --target-scale: 1;
  --catastrophe-font-size: clamp(4.2rem, 10.8vw, 10.25rem);
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
}

html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior: none;
}

button,
body {
  -webkit-tap-highlight-color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-x: clip;
  touch-action: none;
}

.rule {
  position: fixed;
  z-index: 12;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  width: min(72vw, 790px);
  margin: 0;
  translate: -50% 0;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(.66rem, .9vw, .82rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .11em;
  transition: opacity 160ms linear;
}

.rule strong {
  color: var(--signal);
  font-weight: 900;
}

.sentence {
  position: absolute;
  z-index: 2;
  top: 46%;
  left: 0;
  width: max-content;
  max-width: none;
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
  text-transform: uppercase;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(5rem, 10.7vw, 10.25rem);
  font-weight: 900;
  line-height: .76;
  letter-spacing: -.068em;
  word-spacing: .045em;
  transform: translate3d(var(--track-x), -50%, 0);
  transform-origin: 50% 50%;
  will-change: transform;
}

.sentence span {
  display: inline;
}

.sentence .is-target {
  position: relative;
  display: inline-block;
  z-index: 2;
  color: var(--signal);
  letter-spacing: -.035em;
  transform: scaleX(var(--target-scale));
  transform-origin: center;
  will-change: transform;
}

.clamp {
  position: fixed;
  z-index: 20;
  top: 0;
  bottom: 0;
  width: var(--edge);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.clamp--left {
  left: 0;
}

.clamp--right {
  right: 0;
}

.clamp::before {
  content: "";
  position: absolute;
  top: max(10vh, calc(env(safe-area-inset-top) + 48px));
  bottom: max(10vh, calc(env(safe-area-inset-bottom) + 48px));
  width: 5px;
  background: var(--ink);
  transition: width 90ms linear, background-color 90ms linear;
}

.clamp--left::before {
  right: 0;
}

.clamp--right::before {
  left: 0;
}

.clamp__key,
.clamp__verb {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  pointer-events: none;
}

.clamp__key {
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-weight: 900;
  line-height: 1;
}

.clamp__verb {
  bottom: max(52px, calc(env(safe-area-inset-bottom) + 44px));
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.clamp.is-called::before {
  width: 8px;
  background: var(--signal);
}

.clamp.is-called .clamp__key,
.clamp.is-called .clamp__verb {
  color: var(--signal);
}

.clamp.is-held {
  color: var(--paper);
  background: var(--ink);
  cursor: grabbing;
}

.clamp.is-held::before {
  background: var(--signal);
}

.clamp.is-called:not(.is-held) {
  background: rgb(231 53 36 / 9%);
}

body.is-window .clamp.is-called:not(.is-held) {
  background: rgb(231 53 36 / 18%);
}

body.is-window .clamp.is-called::before {
  width: 12px;
}

.clamp:focus-visible {
  outline: 5px solid var(--signal);
  outline-offset: -9px;
}

.status {
  position: fixed;
  z-index: 14;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
  width: min(56vw, 560px);
  margin: 0;
  translate: -50% 0;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(.66rem, .9vw, .82rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .14em;
}

body[data-phase="approach"] .status {
  color: var(--signal);
}

body.is-pass .sentence .is-target {
  color: var(--ink);
}

body.is-catastrophe #stage {
  min-height: auto;
  padding: max(112px, 14vh) 0 18vh;
  overflow-x: hidden;
  overflow-x: clip;
}

body.is-catastrophe .rule {
  top: max(14px, env(safe-area-inset-top));
  width: min(calc(100vw - var(--edge) - var(--edge) - 32px), 790px);
  opacity: .58;
}

body.is-catastrophe .status {
  position: absolute;
  top: max(56px, calc(env(safe-area-inset-top) + 48px));
  bottom: auto;
  width: min(calc(100vw - var(--edge) - var(--edge) - 32px), 620px);
  color: var(--signal);
}

body.is-catastrophe .sentence {
  position: relative;
  top: auto;
  left: auto;
  width: min(calc(100vw - var(--edge) - var(--edge) - 48px), 1040px);
  max-width: min(calc(100vw - var(--edge) - var(--edge) - 48px), 1040px);
  margin: 0 auto;
  white-space: normal;
  font-size: var(--catastrophe-font-size);
  line-height: .77;
  transform: none;
  transform-origin: right bottom;
  will-change: transform;
}

body.is-catastrophe .sentence .is-target {
  display: inline;
  transform: none;
}

body.is-catastrophe .yank-word {
  position: relative;
  z-index: 3;
  color: var(--signal);
}

body.is-yank-ready .yank-word {
  color: var(--paper);
  background: var(--signal);
  box-shadow: .05em 0 0 var(--signal), -.05em 0 0 var(--signal);
}

body.is-yank-ready .rule,
body.is-yank-ready .status,
body.is-returning .rule,
body.is-returning .status {
  opacity: 0;
  transition: none;
}

body.is-returning .sentence {
  transform: translate3d(0, calc(-100% + 18vh), 0) scaleY(.12);
  transition: transform 560ms cubic-bezier(.82, 0, .98, .36);
}

body.is-returning .sentence span:not(.yank-word) {
  opacity: .32;
  transition: opacity 480ms linear;
}

body.is-returning .yank-word::after {
  content: "";
  position: absolute;
  right: -.08em;
  bottom: .18em;
  width: 7px;
  height: 125vh;
  background: var(--signal);
  transform-origin: bottom;
}

.poster-copy {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 9vw;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.poster-copy p {
  margin: 0;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-size: clamp(5rem, 20vw, 18rem);
  font-weight: 900;
  line-height: .68;
  letter-spacing: -.09em;
}

.poster-copy em {
  color: var(--signal);
  font-style: normal;
}

.poster-copy small {
  max-width: 38rem;
  margin-top: 2.5rem;
  text-transform: uppercase;
  font-size: clamp(.72rem, 1.3vw, 1rem);
  font-weight: 900;
  letter-spacing: .15em;
}

.no-js .rule,
.no-js .clamp,
.no-js .status {
  display: none;
}

.no-js .sentence {
  top: 48%;
  --track-x: -19vw;
}

@media (pointer: coarse) {
  :root {
    --edge: clamp(68px, 18vw, 88px);
  }

  .clamp__verb {
    font-size: .62rem;
  }

  .clamp::after {
    content: "THUMB";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font: 900 .58rem/1 Arial, Helvetica, sans-serif;
    letter-spacing: .18em;
    opacity: .7;
  }
}

@media (max-width: 620px) {
  .rule {
    top: max(14px, env(safe-area-inset-top));
    width: calc(100vw - var(--edge) - var(--edge) - 18px);
    font-size: .62rem;
    line-height: 1.3;
  }

  .rule span {
    display: block;
    margin-top: .3rem;
  }

  .sentence {
    top: 47%;
    font-size: clamp(4.2rem, 19vw, 6rem);
    line-height: .74;
  }

  .status {
    width: calc(100vw - var(--edge) - var(--edge) - 18px);
    font-size: .61rem;
  }

  body.is-catastrophe #stage {
    padding: 118px 0 34vh;
  }

  body.is-catastrophe .sentence {
    width: calc(100vw - var(--edge) - var(--edge) - 24px);
    max-width: calc(100vw - var(--edge) - var(--edge) - 24px);
    font-size: var(--catastrophe-font-size);
    line-height: .78;
    letter-spacing: -.075em;
  }

  body.is-catastrophe .rule {
    width: calc(100vw - var(--edge) - var(--edge) - 18px);
    font-size: .54rem;
    line-height: 1.25;
  }

  body.is-catastrophe .status {
    top: max(72px, calc(env(safe-area-inset-top) + 64px));
    width: calc(100vw - var(--edge) - var(--edge) - 18px);
    font-size: .58rem;
  }

  body.is-returning .sentence {
    transform: translate3d(0, calc(-100% + 14vh), 0) scaleY(.1);
  }
}

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