:root {
  color-scheme: light;
}

html {
  background: #ffffff;
}

body {
  box-sizing: border-box;
  width: 920px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 88px 72px 180px;
  overflow-x: auto;
  color: #858585;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
}

h1 {
  margin: 0 0 20px;
  color: #777777;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.35;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #222222;
  text-decoration: underline;
}

pre {
  margin: 0;
  color: inherit;
  font: inherit;
  tab-size: 4;
  white-space: pre-wrap;
}

.map {
  position: relative;
  width: 520px;
  height: 452px;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: normal;
}

.map-item {
  position: absolute;
  white-space: pre;
}

.map-number {
  color: #666666;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
}

.map a {
  border-bottom: 1px solid transparent;
}

.map a:hover,
.map a:focus {
  border-color: currentColor;
  text-decoration: none;
}

.map .map-question {
  color: #75666c;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
}

hr {
  width: 620px;
  margin: 44px 0 0;
  border: 0;
  border-top: 1px solid #c8c8c8;
}

.index-page h1 {
  margin-bottom: 80px;
  font-size: 22px;
}

.index-page hr {
  width: 514px;
  margin-top: 118px;
}

.site-nav {
  position: fixed;
  top: 24px;
  right: 30px;
  z-index: 2;
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
}

.work {
  width: 100%;
  min-height: 760px;
}

.part-1 .work,
.part-2 .work {
  font-size: 14px;
  line-height: 1.55;
}

.part-2 .part-2-layout {
  position: relative;
  width: 100%;
  min-height: 0;
  height: 750px;
  line-height: 1;
  white-space: normal;
}

.part-2 .part-2-first-composition {
  display: block;
  position: absolute;
  inset: 0;
  transform: scale(var(--part-2-exit-scale, 1));
  transform-origin: 0 0;
  transition: none;
}

.part-2 .part-2-section {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.part-2 .part-2-first-section {
  transform-origin: 0 55.5px;
  transform: scale(var(--part-2-scale, 1));
  transition: none;
}

.part-2 .part-2-first-section.is-part2-zoom-body > .part-2-line {
  top: calc(var(--y) - 110px);
}

.part-2 .part-2-line {
  display: block;
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: max-content;
  height: 1em;
  line-height: 1;
  white-space: pre;
}

/* Keep the typing caret out of the inline line box. When the caret was an
   inline-block, moving it to the next line made the completed line recalculate
   its baseline for one frame, which looked like a tiny upward jump. */
.part-2 .part-2-line .typewriter-cursor:not(.is-part2-line-start):not(.is-part2-pull-insert) {
  position: absolute;
  top: .05em;
  margin-left: .12em;
  vertical-align: 0;
}

.part-1 .part-1-title,
.part-2 .part-2-heading-line,
.part-3 .part-3-title {
  font-size: 15px;
  font-weight: 300;
}

.part-2 .part-2-title-line {
  font-size: 14px;
}

.part-2 .part-2-second-section {
  font-size: 16px;
  transform: translateY(-92px);
}

.part-3 .part-3-layout {
  position: relative;
  width: 100%;
  min-height: 0;
  height: 820px;
  line-height: 1;
  white-space: normal;
}

.part-3 .part-3-line,
.part-3 .part-3-ending-line {
  display: block;
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: max-content;
  height: 1em;
  line-height: 1;
  white-space: pre;
}

.part-3 .part-3-first-section {
  display: block;
  position: absolute;
  inset: 0;
}

.part-3 .part-3-group {
  display: block;
  position: absolute;
  top: var(--part-3-y, var(--sy));
  left: var(--part-3-x, var(--sx));
  width: 0;
  height: 0;
  white-space: pre;
}

.part-3 .part-3-fragment {
  display: block;
  position: absolute;
  top: var(--gy);
  left: var(--gx);
  width: max-content;
  height: 1em;
  line-height: 1;
  white-space: pre;
}

.part-3 .part-3-fragment.is-part3-parallel-typing::after {
  display: inline-block;
  position: absolute;
  top: .05em;
  width: .42em;
  height: .9em;
  margin-left: .09em;
  background: currentColor;
  content: "";
  animation: typewriter-cursor-blink .68s steps(1, end) infinite;
}

.part-3 .part-3-second-section {
  display: block;
  position: absolute;
  top: 675px;
  left: 0;
  width: 776px;
  font-size: 10.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.part-3 .part-3-second-section.is-part3-concurrent-typing::after {
  display: inline-block;
  position: absolute;
  width: .42em;
  height: .9em;
  margin-left: .09em;
  transform: translateY(.1em);
  background: currentColor;
  content: "";
  animation: typewriter-cursor-blink .68s steps(1, end) infinite;
}

.part-4 .part-4-layout {
  position: relative;
  min-height: 0;
  height: 760px;
  line-height: 1.55;
  white-space: normal;
}

.part-4 .part-4-intro,
.part-4 .part-4-prompt,
.part-4 .part-4-continuation,
.part-4 .part-4-final {
  display: block;
  position: absolute;
  left: 0;
  white-space: pre;
}

.part-4 .part-4-intro {
  top: 0;
}

.part-4 .part-4-prompt {
  top: 43px;
  width: max-content;
  overflow: visible;
}

.part-4 .part-4-continuation {
  top: 190px;
}

.part-4 .part-4-lips-prompt {
  display: inline-block;
  position: relative;
  width: max-content;
  overflow: visible;
  white-space: pre;
}

.part-4 .part-4-final {
  top: 342px;
}

.part-5 .part-5-title {
  font-size: 15.5px;
}

.part-5 .work.is-part5-coloring .part-5-copy {
  animation: part5-text-to-peach 25s linear forwards;
}

.part-5 .work.is-part5-peach .part-5-copy {
  color: rgba(199, 142, 158, .55);
}

html.part-5-root,
body.part-5 {
  transition: background-color 7.5s linear;
}

html.part-5-root.is-part5-vanishing {
  background-color: #f7f1f3;
}

body.part-5.is-part5-vanishing {
  background-color: #f7f1f3;
}

.part-5 .part-5-copy {
  color: inherit;
  opacity: 1;
  transition: color 7.5s linear, opacity 7.5s linear;
}

.part-5 .work.is-part5-vanishing .part-5-copy {
  color: rgba(247, 239, 241, .25);
  opacity: 0;
}

.part-5 .part-5-spinner {
  display: inline-block;
  width: 1em;
  margin-left: .35em;
  color: rgba(118, 94, 101, .72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  font-size: .94em;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  vertical-align: .02em;
  visibility: hidden;
}

.part-5 .part-5-spinner.is-active {
  visibility: visible;
}

.part-6 {
  color: #667078;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.part-6 .part-6-terminal {
  position: relative;
  width: 100%;
  height: 620px;
}

.part-6 .part-6-shell,
.part-6 .part-6-vi-screen {
  position: absolute;
  inset: 0;
}

.part-6 .part-6-open-command,
.part-6 .part-6-quit-command {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #667078;
  background: transparent;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
  cursor: default;
}

.part-6 .part-6-open-command.is-ready,
.part-6 .part-6-quit-command.is-ready {
  color: #5d707b;
  text-decoration: none;
  cursor: pointer;
}

.part-6 .part-6-open-command.is-ready:hover,
.part-6 .part-6-open-command.is-ready:focus-visible,
.part-6 .part-6-quit-command.is-ready:hover,
.part-6 .part-6-quit-command.is-ready:focus-visible {
  color: #f8f8f8;
  background: #667078;
  text-decoration: none;
}

.part-6 .part-6-open-command:focus-visible,
.part-6 .part-6-quit-command:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 4px;
}

.part-6 .part-6-cursor {
  display: inline-block;
  width: .58em;
  height: 1.08em;
  margin-left: .12em;
  vertical-align: -.15em;
  background: currentColor;
  animation: typewriter-cursor-blink .78s steps(1, end) infinite;
}

.part-6 .part-6-cursor[hidden] {
  display: none;
}

.part-6 .part-6-vi-copy,
.part-6 .part-6-vi-empty {
  position: absolute;
  left: 0;
  width: 100%;
  white-space: pre;
}

.part-6 .part-6-vi-copy {
  top: 190px;
  text-align: center;
}

.part-6 .part-6-vi-empty-top {
  top: 0;
}

.part-6 .part-6-vi-empty-bottom {
  top: 258px;
}

.part-6 .part-6-vi-empty {
  color: rgba(102, 112, 120, .38);
}

.part-6 .part-6-vi-status,
.part-6 .part-6-vi-command {
  position: absolute;
  left: 0;
  width: 100%;
  white-space: pre;
}

.part-6 .part-6-vi-status {
  top: 500px;
  box-sizing: border-box;
  padding: 0;
  color: #4f565b;
  background: #ffffff;
  text-align: left;
}

.part-6 .part-6-vi-command {
  top: 536px;
}

.part-6 .part-6-file-cursor,
.part-6 .part-6-command-cursor {
  width: .56em;
  height: 1em;
}

.part-4 .part-4-trigger,
.part-4 .part-4-lips-trigger {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #74818a;
  background: transparent;
  font: inherit;
  line-height: inherit;
  text-decoration-line: underline;
  text-decoration-color: rgba(105, 122, 133, .68);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
  cursor: default;
}

.part-4 .part-4-trigger {
  font-size: 15px;
  font-weight: 300;
}

.part-4 .part-4-prompt.is-ready .part-4-trigger,
.part-4 .part-4-lips-prompt.is-ready .part-4-lips-trigger {
  cursor: pointer;
}

.part-4 .part-4-prompt.is-ready .part-4-trigger:hover,
.part-4 .part-4-prompt.is-ready .part-4-trigger:focus-visible,
.part-4 .part-4-lips-prompt.is-ready .part-4-lips-trigger:hover,
.part-4 .part-4-lips-prompt.is-ready
  .part-4-lips-trigger:focus-visible {
  color: #596a75;
  text-decoration-color: currentColor;
}

.part-4 .part-4-trigger:focus-visible,
.part-4 .part-4-lips-trigger:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 4px;
}

.part-4 .part-4-preview {
  display: block;
  position: absolute;
  top: -12px;
  left: calc(100% + 16px);
  z-index: 3;
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border: 1px solid #dedede;
  color: #748089;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .07);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity .14s ease, transform .14s ease,
    visibility 0s linear .14s;
  pointer-events: none;
}

.part-4 .part-4-prompt.is-ready:not(.is-activated)
  .part-4-trigger:hover ~ .part-4-preview,
.part-4 .part-4-prompt.is-ready:not(.is-activated)
  .part-4-trigger:focus-visible ~ .part-4-preview,
.part-4 .part-4-lips-prompt.is-ready:not(.is-activated)
  .part-4-lips-trigger:hover ~ .part-4-preview,
.part-4 .part-4-lips-prompt.is-ready:not(.is-activated)
  .part-4-lips-trigger:focus-visible ~ .part-4-preview {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: .32s, .32s, 0s;
}

.part-3 .part-3-line .typewriter-cursor,
.part-3 .part-3-fragment .typewriter-cursor,
.part-3 .part-3-ending-line .typewriter-cursor {
  position: absolute;
  top: .05em;
  margin-left: .12em;
  vertical-align: 0;
}

.typewriter-cursor.is-part2-line-start {
  position: absolute;
  top: .05em;
  left: -.7em;
  z-index: 1;
  margin-left: 0;
}

.part-2 .part-2-pull-word {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
}

.typewriter-cursor.is-part2-pull-insert {
  position: absolute;
  top: .05em;
  left: calc(var(--part-2-pull-cursor-x, 0px) - .55em);
  z-index: 1;
  margin-left: 0;
}

.part-3 .work,
.part-7 .work,
.part-question .work {
  line-height: 1.7;
}

.part-7 .work {
  overflow: visible;
}

.part-7 .part-7-character {
  display: inline;
}

.part-7 .part-7-emphasis {
  color: #bda4ac;
}

.part-7 .part-7-gap {
  display: inline-block;
  overflow: hidden;
  width: 0;
  white-space: pre;
  vertical-align: -.14em;
  transition: width .2s steps(4, end);
}

.part-7 .part-7-character.is-split .part-7-gap {
  width: 2.6em;
}

.part-7 .part-7-glyph {
  display: inline-block;
  overflow: visible;
  vertical-align: baseline;
  text-align: center;
  white-space: pre;
}

.part-7 .work.is-part7-decoding .part-7-character {
  pointer-events: none;
}

.part-question .pq-stage {
  min-height: 760px;
  line-height: 1.7;
}

.part-question .pq-stage.is-pending {
  visibility: hidden;
}

.part-question .pq-final {
  pointer-events: none;
}

.part-question .pq-cursor-stop {
  display: inline;
}

.part-question .pq-closing {
  display: inline;
  padding: 0;
  border: 0;
  outline-offset: 5px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  line-height: 1;
  text-align: inherit;
  white-space: pre;
  opacity: 1;
}

.part-question .pq-closing.is-ready {
  color: #6f6f6f;
  cursor: pointer;
}

.part-question .pq-closing.is-ready:hover,
.part-question .pq-closing.is-ready:focus-visible {
  color: #333333;
}

.part-question .pq-character {
  display: inline;
  opacity: 1;
  visibility: visible;
  vertical-align: baseline;
  white-space: pre;
  transition: none;
}

.part-question .pq-character.is-corrupting {
  display: inline-block;
  color: inherit;
}

.part-question .pq-character.is-ascii-corruption {
  transform: scaleX(1.18);
  transform-origin: left center;
}

.part-question .pq-character.is-dissolved {
  visibility: hidden;
}

.part-question .pq-cursor {
  position: static;
  margin-left: .12em;
  pointer-events: none;
  transition: none;
}

.page-turn {
  margin-top: 96px;
  font-size: 12px;
  letter-spacing: .03em;
}

.typewriter-cursor {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .12em;
  vertical-align: -.13em;
  background: currentColor;
  animation: typewriter-cursor-blink .82s steps(1, end) infinite;
}

.typewriter-cursor.is-finished {
  animation: typewriter-cursor-blink .82s steps(1, end) infinite;
}

.part-4 .typewriter-cursor.is-part4-moving {
  position: absolute;
  z-index: 4;
  margin-left: 0;
  vertical-align: 0;
  transition: none;
  pointer-events: none;
}

.part-5 .typewriter-cursor.is-part5-spinner-scene {
  display: none;
  animation: none;
}

.typewriter-cursor.is-scene {
  display: none;
  animation: none;
}

.typewriter-cursor.is-movement-transition,
.typewriter-cursor.is-parallel-scene,
.typewriter-cursor.is-part3-parallel-scene {
  display: none;
  animation: none;
}

.first-movement,
.second-movement {
  display: block;
  white-space: inherit;
}

.first-movement.is-clearing {
  opacity: 0;
  transition: opacity .58s ease;
}

.room-section {
  white-space: pre;
}

.room-fragment {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  text-align: left;
}

.room-section.is-animating .room-fragment {
  visibility: hidden;
}

.room-section.is-animating .room-fragment.is-visible {
  visibility: visible;
}

.room-fragment.is-room-typing::after,
.parallel-fragment.is-parallel-typing::after,
.footnote-marker.is-footnote-typing::after {
  display: inline-block;
  position: absolute;
  top: .13em;
  width: .42em;
  height: .9em;
  margin-left: .09em;
  background: currentColor;
  content: "";
  animation: typewriter-cursor-blink .68s steps(1, end) infinite;
}

.parallel-group {
  white-space: pre;
}

.parallel-fragment {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  text-align: left;
}

.work.has-parallel-animation .parallel-fragment {
  visibility: hidden;
}

.work.has-parallel-animation .parallel-fragment.is-visible {
  visibility: visible;
}

.footnote-marker {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  text-align: left;
}

.footnote-block {
  white-space: pre;
}

.work.has-footnote-animation .footnote-marker,
.work.has-footnote-animation .footnote-line,
.work.has-footnote-animation .footnote-rule {
  visibility: hidden;
}

.work.has-footnote-animation .footnote-marker.is-visible,
.work.has-footnote-animation .footnote-line.is-visible,
.work.has-footnote-animation .footnote-rule.is-visible {
  visibility: visible;
}

.footnote-inline-cursor {
  display: inline-block;
  width: .42em;
  height: .9em;
  margin-left: .09em;
  vertical-align: -.1em;
  background: currentColor;
  animation: typewriter-cursor-blink .68s steps(1, end) infinite;
}

.wave-decode {
  display: inline-block;
  position: relative;
  overflow: visible;
  vertical-align: baseline;
  text-align: left;
}

.wave-scramble-line {
  display: block;
  position: absolute;
  top: 0;
  left: 1em;
  white-space: nowrap;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  pointer-events: none;
  color: inherit;
  opacity: 1;
}

.sound-toggle {
  position: fixed;
  top: 48px;
  right: 30px;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  color: #a0a0a0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .06em;
  cursor: pointer;
}

.sound-toggle:hover,
.sound-toggle:focus,
.sound-toggle.is-waiting {
  color: #444444;
  outline: none;
}

.sound-toggle.is-waiting {
  animation: sound-toggle-pulse 1.2s ease-in-out infinite;
}

.room-window {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 300px;
  border: 1px solid #a8a8a8;
  color: #666666;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .09);
  opacity: 0;
  transform: translate(-50%, -46%);
  transition:
    opacity .28s ease,
    transform .36s ease;
}

.room-window.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.room-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 25px;
  padding: 0 8px 0 10px;
  border-bottom: 1px solid #d4d4d4;
  color: #999999;
  font-size: 10px;
  letter-spacing: .08em;
}

.room-window-close {
  padding: 0 2px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.room-window-close:hover,
.room-window-close:focus {
  color: #333333;
  outline: none;
}

.room-window p {
  margin: 0;
  padding: 41px 28px 44px;
  color: #5d5d5d;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
  text-align: center;
}

.decode-character {
  display: inline-block;
  overflow: visible;
  text-align: center;
  white-space: pre;
}

@keyframes typewriter-cursor-blink {
  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }
}

@keyframes part5-text-to-peach {
  from {
    color: #858585;
  }

  to {
    color: rgba(199, 142, 158, .55);
  }
}

@keyframes sound-toggle-pulse {
  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor {
    display: none;
  }

  .room-window {
    transition: none;
  }

  .part-4 .part-4-preview {
    transition: none;
  }

  .room-fragment.is-room-typing::after,
  .parallel-fragment.is-parallel-typing::after,
  .part-3 .part-3-fragment.is-part3-parallel-typing::after,
  .part-3 .part-3-second-section.is-part3-concurrent-typing::after,
  .footnote-marker.is-footnote-typing::after,
  .footnote-inline-cursor {
    display: none;
  }

}

@media (max-width: 919px) {
  body {
    width: 920px;
    margin: 0;
  }

  .site-nav {
    position: absolute;
    left: 72px;
    right: auto;
  }

  .sound-toggle {
    position: absolute;
    left: 72px;
    right: auto;
  }
}