:root {
  --warm-earth: #F4E7C8;
  --environment: #F0C49B;
  --sunlit-oat: #F4E7C8;
  --terracotta-reason: #C96E3F;
  --olive-hypothesis: #6F7B3C;
  --clay-shadow: #8A5A3B;
  --burnt-umber-text: #3B2A1F;
  --turmeric-glow: #E5A93F;
  --soft-apricot: #F0C49B;
  --desert-rose: #B85C68;
  --highlight: rgba(255, 250, 229, 0.9);
  --shadow: rgba(138, 90, 59, 0.26);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--burnt-umber-text);
  background: var(--sunlit-oat);
  font-family: "IBM Plex Mono", "Roboto Mono", monospace;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.terrain-bg {
  position: fixed;
  inset: 0;
  z-index: -4;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,250,229,0.96) 0 16%, transparent 37%),
    radial-gradient(circle at 82% 24%, rgba(229,169,63,0.28) 0 10%, transparent 28%),
    linear-gradient(135deg, #F4E7C8 0%, #F0C49B 48%, #F4E7C8 100%);
}

.terrain-bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: 0.28;
  background-image:
    radial-gradient(circle, rgba(111,123,60,0.22) 1.4px, transparent 1.6px),
    repeating-linear-gradient(45deg, transparent 0 26px, rgba(201,110,63,0.13) 27px 29px, transparent 30px 58px),
    repeating-radial-gradient(ellipse at 30% 36%, transparent 0 28px, rgba(138,90,59,0.14) 30px 32px);
  background-size: 28px 28px, 100% 100%, 620px 360px;
}

.contours {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(ellipse at 72% 66%, transparent 0 34px, rgba(59,42,31,0.08) 36px 38px, transparent 40px 68px),
    repeating-radial-gradient(ellipse at 20% 82%, transparent 0 44px, rgba(184,92,104,0.09) 46px 49px, transparent 51px 88px);
}

.sun-disc {
  position: absolute;
  width: 34vmax;
  height: 34vmax;
  border-radius: 50%;
  background: var(--turmeric-glow);
  opacity: 0.34;
  box-shadow: inset 14px 14px 22px rgba(255,250,229,0.45), inset -22px -22px 34px rgba(138,90,59,0.18);
  transform: translate3d(0, var(--sun-y, 0), 0);
}

.sun-one { top: 12vh; right: -12vmax; }
.sun-two { width: 24vmax; height: 24vmax; left: -7vmax; bottom: 18vh; background: var(--soft-apricot); opacity: 0.46; }

.reasoning-trail {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(5px 5px 5px rgba(138,90,59,0.22));
}

.reasoning-trail path {
  fill: none;
  stroke: var(--terracotta-reason);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 2.2 8.5;
  stroke-dashoffset: var(--trail-offset, 620);
  opacity: 0.74;
}

.progress-compass {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 20;
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: var(--sunlit-oat);
  box-shadow: 10px 10px 20px var(--shadow), -10px -10px 20px var(--highlight);
  transform: rotate(var(--compass-rot, 0deg));
  transition: transform 260ms ease-out;
}

.progress-compass span, .compass-mark span, .large-compass span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 26px;
  border-radius: 999px;
  background: var(--olive-hypothesis);
  transform-origin: center 34px;
}
.progress-compass span:nth-child(1), .compass-mark span:nth-child(1), .large-compass span:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.progress-compass span:nth-child(2), .compass-mark span:nth-child(2), .large-compass span:nth-child(2) { transform: translate(-50%, -100%) rotate(90deg); background: var(--terracotta-reason); }
.progress-compass span:nth-child(3), .compass-mark span:nth-child(3), .large-compass span:nth-child(3) { transform: translate(-50%, -100%) rotate(180deg); }
.progress-compass span:nth-child(4), .compass-mark span:nth-child(4), .large-compass span:nth-child(4) { transform: translate(-50%, -100%) rotate(270deg); background: var(--desert-rose); }
.progress-compass i, .compass-mark i, .large-compass i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--turmeric-glow);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 2px 2px 3px rgba(255,250,229,0.7), inset -2px -2px 3px rgba(138,90,59,0.24);
}

.quest-section {
  position: relative;
  min-height: 100vh;
  padding: clamp(84px, 11vh, 132px) clamp(24px, 7vw, 104px);
  display: grid;
  align-items: center;
}

.chapter-marker {
  position: absolute;
  top: 34px;
  left: clamp(24px, 7vw, 104px);
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.72rem;
  color: var(--olive-hypothesis);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(244,231,200,0.78);
  box-shadow: inset 3px 3px 7px rgba(138,90,59,0.13), inset -3px -3px 7px rgba(255,250,229,0.7);
}

.slab, .thought-slab, .plateau {
  background: var(--sunlit-oat);
  border-radius: 46px;
  box-shadow: 22px 22px 45px var(--shadow), -22px -22px 45px var(--highlight);
  transform: translate3d(0, var(--slab-y, 0), 0);
  transition: box-shadow 360ms ease, transform 160ms ease-out;
}

.quest-section.is-passed .thought-slab, .quest-section.is-passed .instrument-label {
  box-shadow: inset 14px 14px 26px rgba(138,90,59,0.18), inset -14px -14px 26px rgba(255,250,229,0.76);
}

.instrument-label {
  width: min(920px, 92vw);
  margin: 0 auto;
  padding: clamp(34px, 7vw, 78px);
  text-align: center;
  position: relative;
}

.micro-label {
  display: block;
  margin: 0 0 16px;
  color: var(--olive-hypothesis);
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}

h1, h2 {
  margin: 0;
  font-family: "Space Mono", monospace;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

h1 { font-size: clamp(3.35rem, 11vw, 10.5rem); }
h2 { font-size: clamp(2.2rem, 6.3vw, 6.8rem); max-width: 820px; }
p { font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.65; font-weight: 300; }

.instrument-label p { max-width: 660px; margin: 24px auto 0; }

.calibration { width: min(420px, 78vw); height: 92px; margin-top: 20px; overflow: visible; }
.calibration path { fill: none; stroke: var(--terracotta-reason); stroke-width: 3; stroke-dasharray: 4 13; stroke-linecap: round; opacity: 0.72; }
.calibration circle { fill: var(--turmeric-glow); filter: drop-shadow(4px 5px 4px rgba(138,90,59,0.28)); }

.opening-stones { justify-content: center; margin-top: -8vh; }
.stone-row, .token-cluster, .final-stones { display: flex; gap: 14px; flex-wrap: wrap; }

.reason-stone {
  position: relative;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 13px 20px;
  background: var(--soft-apricot);
  color: var(--burnt-umber-text);
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
  box-shadow: 8px 8px 15px rgba(138,90,59,0.23), -8px -8px 15px rgba(255,250,229,0.75);
  transition: transform 220ms cubic-bezier(.2,1.45,.4,1), box-shadow 220ms ease, background 220ms ease;
}

.reason-stone::after {
  content: attr(data-note);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translate(-50%, 8px);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  color: var(--desert-rose);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  transition: opacity 180ms ease, transform 180ms ease;
}

.reason-stone:hover {
  transform: translateY(-8px);
  background: var(--turmeric-glow);
  box-shadow: 14px 18px 24px rgba(138,90,59,0.28), -10px -10px 18px rgba(255,250,229,0.86);
}
.reason-stone:hover::after { opacity: 1; transform: translate(-50%, 0); }
.reason-stone.rose { background: rgba(184,92,104,0.22); }
.reason-stone.olive { background: rgba(111,123,60,0.22); }

.left-low { justify-items: start; padding-top: 16vh; }
.right-high { justify-items: end; padding-bottom: 16vh; }
.left-rise { justify-items: start; padding-left: clamp(42px, 13vw, 170px); }
.right-low { justify-items: end; padding-right: clamp(42px, 13vw, 170px); }

.thought-slab {
  position: relative;
  width: min(760px, 88vw);
  padding: clamp(30px, 6vw, 64px);
  min-height: 470px;
}
.thought-slab.broad { width: min(860px, 90vw); }
.thought-slab.compact { width: min(690px, 88vw); }

.thought-slab::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 34px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(111,123,60,0.12) 10px, transparent 10px 22px) top right / 110px 10px no-repeat,
    radial-gradient(circle, rgba(201,110,63,0.16) 2px, transparent 3px) bottom 28px left 36px / 18px 18px repeat-x;
}

.thought-slab p:not(.micro-label), .plateau p { max-width: 590px; }

.question-well {
  width: min(390px, 100%);
  margin: 34px 0;
  padding: 28px;
  min-height: 116px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--soft-apricot);
  color: var(--burnt-umber-text);
  box-shadow: inset 12px 12px 24px rgba(138,90,59,0.22), inset -12px -12px 24px rgba(255,250,229,0.58);
  font-family: "Space Mono", monospace;
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  letter-spacing: -0.035em;
}
.question-well.square { border-radius: 24px; background: rgba(184,92,104,0.18); }
.question-well.round { border-radius: 999px; min-height: 150px; }
.question-well.apricot { background: rgba(229,169,63,0.28); }
.split-wells { display: flex; gap: 18px; flex-wrap: wrap; }
.split-wells .question-well { flex: 1 1 220px; }

.compass-mark {
  position: absolute;
  right: 36px;
  top: 34px;
  width: 72px;
  height: 72px;
  opacity: 0.82;
  transform: rotate(-12deg);
}
.compass-mark.tilted { transform: rotate(21deg); }
.dial {
  position: absolute;
  right: 38px;
  top: 40px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: conic-gradient(from 22deg, var(--terracotta-reason), var(--turmeric-glow), var(--olive-hypothesis), var(--terracotta-reason));
  opacity: 0.45;
  box-shadow: inset 10px 10px 16px rgba(138,90,59,0.18), inset -10px -10px 16px rgba(255,250,229,0.5);
}
.checker-strip {
  position: absolute;
  right: 46px;
  top: 46px;
  width: 140px;
  height: 18px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--desert-rose) 0 14px, transparent 14px 28px), var(--soft-apricot);
  opacity: 0.62;
}
.diagonal { transform: rotate(-2deg); }

.closing { justify-items: center; }
.plateau {
  position: relative;
  width: min(980px, 92vw);
  min-height: 560px;
  padding: clamp(38px, 7vw, 76px);
  text-align: center;
  display: grid;
  justify-items: center;
}
.plateau h2 { max-width: 900px; }
.large-compass {
  position: relative;
  width: 156px;
  height: 156px;
  margin: 4px 0 22px;
  border-radius: 50%;
  background: var(--sunlit-oat);
  box-shadow: inset 12px 12px 24px rgba(138,90,59,0.19), inset -12px -12px 24px rgba(255,250,229,0.78);
  transform: rotate(var(--large-rot, -18deg));
}
.large-compass span { width: 13px; height: 56px; transform-origin: center 78px; }
.large-compass i { width: 22px; height: 22px; }
.final-stones { justify-content: center; margin-top: 22px; }

@media (max-width: 760px) {
  .quest-section { padding-left: 20px; padding-right: 20px; }
  .left-rise, .right-low { padding-left: 20px; padding-right: 20px; }
  .right-high, .right-low { justify-items: start; }
  .progress-compass { width: 50px; height: 50px; top: 14px; right: 14px; border-radius: 18px; }
  .chapter-marker { left: 20px; top: 22px; }
  .thought-slab { min-height: 0; border-radius: 34px; }
  .dial, .checker-strip, .compass-mark { opacity: 0.35; transform: scale(0.78); transform-origin: top right; }
  .opening-stones { margin-top: 18px; }
}