html, body { height: 100%; overflow: hidden; }
body { background: #050608; }

.topbar {
  align-items: center;
  background: linear-gradient(#050608 65%, transparent);
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: calc(1rem + env(safe-area-inset-top)) clamp(1rem, 4vw, 2.5rem) 2.5rem;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 3;
}

.viewport { cursor: grab; height: 100%; overflow: hidden; touch-action: none; }
.viewport.dragging { cursor: grabbing; }
.prompt {
  margin: 0 auto;
  max-width: 1100px;
  padding: 44vh clamp(1.25rem, 6vw, 6rem) 70vh;
  transform: translateY(0);
  will-change: transform;
}

.block {
  font-size: clamp(2rem, 6.8vw, 5.2rem);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.22;
  margin: 0 0 clamp(5rem, 16vh, 11rem);
  white-space: pre-wrap;
  word-break: break-word;
}

.block::before {
  color: var(--accent);
  content: attr(data-number);
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: 1.2rem;
}

.waiting { color: var(--muted); font-size: clamp(1rem, 3vw, 1.25rem); text-align: center; }
.pulse { animation: pulse 1.5s infinite; background: var(--accent); border-radius: 50%; display: inline-block; height: .55rem; margin-right: .6rem; width: .55rem; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.75); } }

.reading-line { background: linear-gradient(90deg, transparent, rgba(255,204,102,.5), transparent); height: 1px; left: 0; pointer-events: none; position: fixed; right: 0; top: 44vh; z-index: 2; }

.controls {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(20, 22, 28, .88);
  border: 1px solid var(--border);
  border-radius: 999px;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex;
  gap: .35rem;
  left: 50%;
  padding: .4rem;
  position: fixed;
  transform: translateX(-50%);
  z-index: 4;
}
.controls button { background: transparent; border-radius: 50%; color: var(--text); height: 2.75rem; min-width: 2.75rem; }
.controls button:hover { background: rgba(255,255,255,.08); }
.controls .primary { background: var(--accent); color: #171209; font-weight: 900; }
.controls .wide { border-radius: 999px; padding: 0 .9rem; width: auto; }
#speed { color: var(--muted); font-size: .72rem; min-width: 4.8rem; text-align: center; }

@media (max-width: 560px) {
  .topbar .brand { display: none; }
  .topbar { justify-content: flex-end; }
  .controls { bottom: calc(.65rem + env(safe-area-inset-bottom)); }
  .controls .wide { display: none; }
  .block { line-height: 1.26; }
}