@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #000; color: #fff; font-family: "JetBrains Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.intro { overflow: hidden; }
::selection { background: #fff; color: #000; }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; justify-content: flex-end;
  align-items: center; padding: 22px 3vw; opacity: 0; transition: opacity .8s; pointer-events: none; }
body.ready .nav { opacity: 1; pointer-events: auto; }
.nav { gap: 28px; }
.link { color: #fff; text-decoration: none; font-size: 13px; padding: 12px 0; border-bottom: 1px solid transparent; }
.link:hover, .link:focus-visible { border-bottom-color: currentColor; outline: 0; }
body.ready .nav.off { opacity: 0; pointer-events: none; }

/* story */
.story { position: relative; height: 1560vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#svg text { font-family: "JetBrains Mono", ui-monospace, monospace; fill: #fff; }

.question { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: clamp(28px, 5vw, 84px); letter-spacing: -.03em; white-space: pre; }

.cursor { display: inline-block; width: .55em; height: .9em; margin-left: .08em; background: #fff;
  animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
body.past .question .cursor { animation: none; }

.statement { position: absolute; left: 11vw; right: 9vw; top: 50%; transform: translateY(-50%); }
.statement p { font-weight: 700; font-size: clamp(22px, 5.3vw, 100px); line-height: 1.1; letter-spacing: -.035em;
  opacity: 0; will-change: opacity, transform; }
.statement p:last-child { margin-top: .6em; }

.cap { position: absolute; left: 6vw; top: 12vh; max-width: 60vw; font-weight: 700;
  font-size: clamp(22px, 2.8vw, 46px); line-height: 1.12; letter-spacing: -.03em; opacity: 0; will-change: opacity, transform; }

.hint { position: absolute; left: 50%; bottom: 4vh; width: 1px; height: 44px; background: #fff; opacity: 0;
  animation: hint 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes hint {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* contact: the last scene of the story; boxes are placed by main.js inside its brackets */
.anchor { position: absolute; left: 0; bottom: 0; height: 100vh; height: 100svh; pointer-events: none; }
.touch { position: absolute; display: flex; align-items: center; justify-content: center; white-space: pre;
  font-weight: 700; font-size: clamp(28px, 5vw, 84px); letter-spacing: -.03em; }
.cform { position: absolute; display: grid; grid-template-columns: repeat(3, 1fr); align-content: center;
  gap: 4vh 3vw; opacity: 0; visibility: hidden; }
.cform.on { visibility: visible; }
.cform label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.cform .wide { grid-column: span 2; }
.cform input, .cform textarea { font: inherit; font-size: 16px; color: #fff; background: #000; border: 0;
  border-bottom: 2px solid #fff; border-radius: 0; padding: 6px 0; resize: none; outline: 0; }
.cform input:focus, .cform textarea:focus { border-bottom-width: 4px; padding-bottom: 4px; }
.cform button { font: inherit; font-weight: 700; font-size: 15px; align-self: end; justify-self: start;
  min-height: 44px; padding: 12px 22px; color: #000; background: #fff; border: 2px solid #fff; border-radius: 0; cursor: pointer; }
.cform button:hover, .cform button:focus-visible { background: #000; color: #fff; outline: 0; }
.cform .hp, .cform .cmsg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cform button:disabled { cursor: default; }
.cfoot { position: absolute; left: 4vw; bottom: 3vh; font-size: 12px; opacity: 0; }

/* how it works: normal reading text over the paused story */
.how { position: absolute; left: 0; right: 0; z-index: 2; background: #000; padding: 18vh 6vw 22vh;
  font-size: 16px; line-height: 1.65; }
.how > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.hk { font-size: 13px; margin-bottom: 20px; }
.hhead h2 { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -.03em; margin-bottom: 22px; }
.hhead { margin-bottom: 10vh; }
.how section { border-top: 2px solid #fff; padding: 28px 0 9vh; }
.how h3 { font-size: clamp(19px, 2vw, 26px); line-height: 1.25; letter-spacing: -.02em; margin-bottom: 18px; }
.how h3 span { display: inline-block; min-width: 3.2em; }
.how h3 span::before { content: "[ "; } .how h3 span::after { content: " ]"; }
.how p + p { margin-top: 14px; }
.how ul, .how ol { list-style: none; display: grid; gap: 14px; }
.how li { padding-left: 1.6em; position: relative; }
.how ul li::before { content: "+"; position: absolute; left: 0; }
.how ol { counter-reset: s; border-left: 2px solid #fff; padding-left: 4px; }
.how ol li { counter-increment: s; }
.how ol li::before { content: counter(s); position: absolute; left: 0; font-weight: 700; }
.how b { font-weight: 700; }
.how i { font-style: normal; border-bottom: 1px solid #fff; }
.how .note { margin-top: 20px; font-size: 14px; opacity: .78; }
.hnext { padding-top: 2vh; }
.hnext .link { font-weight: 700; font-size: 15px; }

@media (max-width: 760px) {
  .how { padding: 14vh 6vw 18vh; font-size: 15px; }
  .cform { grid-template-columns: 1fr; gap: 2.2vh; }
  .cform .wide { grid-column: auto; }
  .cap { max-width: 88vw; }
  .statement { left: 10vw; right: 8vw; }
}

@media (prefers-reduced-motion: reduce) {
  .hint { animation: none; }
  .nav { transition: none; }
}