:root {
  --paper: #f3f2ef;   /* ほぼ白の紙色 */
  --ink:   #14140f;   /* 黒に近いインク */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;           /* ドラッグでスクロールさせない */
}

#scene {
  position: fixed;
  inset: 0;
  z-index: 1;              /* 文字の層の上に浮く（canvasは透明） */
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
#scene.dragging { cursor: grabbing; }

/* 音が鳴るたび文字が打たれていく紙面（canvasの下の層） */
#field {
  position: fixed;
  inset: 0;
  z-index: 0;
  padding: clamp(1.4rem, 5vw, 3.4rem);
  padding-bottom: 5rem;
  overflow: hidden;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  line-height: 2.2;
  letter-spacing: 0.14em;
  color: rgba(20, 20, 15, 0.115);
  word-break: break-all;
  pointer-events: none;
  user-select: none;
}
/* 打たれた直後は濃く、数秒かけて紙に沈む */
#field span.ch {
  animation: settle 2.8s ease-out forwards;
}
@keyframes settle {
  from { color: rgba(20, 20, 15, 0.62); }
  to   { color: rgba(20, 20, 15, 0.115); }
}
#cursor {
  color: rgba(20, 20, 15, 0.45);
  animation: blink 1.15s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }