:root {
  --ink: #120e0b;
  --deep-brown: #21160f;
  --brass: #b48742;
  --copper: #9c5738;
  --paper: #d9c49c;
}

* {
  box-sizing: border-box;
}

html {
  background: #fff;
  color-scheme: light;
  scrollbar-color: #b99461 #ead8b8;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--paper);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.scroll-stage {
  position: relative;
  min-height: 340vh;
}

.gear-scene {
  position: fixed;
  inset: 0;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

.gear-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.gear-rail {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.gear {
  position: absolute;
  display: block;
  object-fit: contain;
  will-change: transform;
  transform-origin: 50% 50%;
  user-select: none;
}

.progress-rail {
  position: absolute;
  height: 1px;
  overflow: hidden;
  z-index: 3;
  background: rgb(207 170 104 / 0.14);
}

.progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #6d4a2c, #bb8e4d, #925034);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.scroll-marker {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.scroll-marker--middle {
  top: 50%;
}

.scroll-marker--end {
  bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gear {
    will-change: auto;
  }
}