* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  margin: 0;
  background: #f8fafc;
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 6px;
  background: #2563eb;
  width: 100%;
  transform-origin: 0 50%;
  z-index: 100;
  /* The Modern Magic: Scroll-driven animation */
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.content {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
  /* Create height to enable scrolling */
  min-height: 300vh; 
}

h1 { margin-top: 0; color: #1e293b; }
p { color: #475569; line-height: 1.6; font-size: 1.1rem; }
.placeholder-text { margin-top: 50vh; color: #94a3b8; }