:root {
  --dawn-cream: #F7EEDC;
  --pressed-honey: #D8A84E;
  --soft-clay: #9C7A55;
  --porcelain-taupe: #DDD0BC;
  --carbon-fig: #27231E;
  --circuit-sage: #7E9270;
  --future-apricot: #F2B36F;
  --pale-blue: #B8C7C4;
  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --raised: -18px -18px 38px rgba(255, 255, 255, 0.62), 18px 18px 38px rgba(156, 122, 85, 0.28);
  --pressed: inset -12px -12px 24px rgba(255, 255, 255, 0.56), inset 12px 12px 26px rgba(156, 122, 85, 0.24);
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }

body {
  background:
    radial-gradient(circle at 18% 22%, rgba(242, 179, 111, 0.42), transparent 28vw),
    radial-gradient(circle at 82% 76%, rgba(184, 199, 196, 0.36), transparent 32vw),
    var(--dawn-cream);
  color: var(--carbon-fig);
  font-family: var(--body);
}

.fixed-ruler {
  position: fixed;
  top: 24px;
  left: 4vw;
  right: 4vw;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(247, 238, 220, 0.58);
  box-shadow: var(--pressed);
  font: 10px/1 var(--mono);
  letter-spacing: 0.18em;
  color: rgba(39, 35, 30, 0.58);
}

.fixed-ruler:before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--soft-clay), transparent);
  opacity: 0.35;
}

.horizontal-track {
  height: 100vh;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.horizontal-track::-webkit-scrollbar { display: none; }

.panel {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  scroll-snap-align: start;
  padding: 11vh 7vw 8vh;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.18), transparent 52%),
    var(--dawn-cream);
}

.panel:after {
  content: "";
  position: absolute;
  left: 5vw;
  right: 5vw;
  bottom: 8vh;
  height: 20px;
  border-radius: 999px;
  background: rgba(221, 208, 188, 0.42);
  box-shadow: var(--pressed);
}

.panel-number {
  position: absolute;
  right: 7vw;
  top: 11vh;
  font-family: var(--display);
  font-size: clamp(72px, 12vw, 180px);
  line-height: 0.8;
  color: rgba(216, 168, 78, 0.32);
  text-shadow: -5px -5px 8px rgba(255,255,255,0.52), 7px 7px 14px rgba(156,122,85,0.18);
}

.eyebrow, .tray-label, .annotation {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--circuit-sage);
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--display);
  letter-spacing: -0.03em;
  font-weight: 900;
  color: var(--carbon-fig);
}

h1 { font-size: clamp(84px, 16vw, 230px); line-height: 0.78; }
h2 { font-size: clamp(58px, 9vw, 132px); line-height: 0.84; }

.boot-copy { position: relative; z-index: 2; margin-top: 11vh; max-width: 82vw; }
.chapter-text { position: relative; z-index: 2; max-width: 620px; margin-top: 14vh; }
.chapter-text.narrow { max-width: 500px; }
.horizon-copy { max-width: 760px; }

.type-line {
  min-height: 1.5em;
  margin-top: 22px;
  font: 15px/1.5 var(--mono);
  letter-spacing: 0.02em;
  color: var(--carbon-fig);
}

.type-line.typing:after, .type-line.done:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 6px;
  transform: translateY(2px);
  background: var(--pressed-honey);
  animation: blink 0.8s steps(2, end) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.sun-console {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--porcelain-taupe), var(--dawn-cream));
  box-shadow: var(--pressed), 0 24px 70px rgba(216, 168, 78, 0.18);
}

.hero-console { left: 18vw; right: 18vw; bottom: 15vh; height: 150px; border-radius: 50% / 58%; }
.sun-disc { position: absolute; left: 15%; bottom: 48%; width: 92px; height: 46px; border-radius: 92px 92px 0 0; background: var(--future-apricot); box-shadow: 0 0 45px rgba(242,179,111,0.55); }
.console-line { position: absolute; left: 9%; right: 9%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--soft-clay), var(--pressed-honey), transparent); }
.console-notch { position: absolute; right: 18%; top: 40%; width: 28px; height: 28px; border-radius: 50%; background: var(--pale-blue); box-shadow: var(--raised); }

.boot-orbit { position: absolute; border: 1px solid rgba(126,146,112,0.28); border-radius: 50%; box-shadow: var(--pressed); }
.orbit-a { width: 33vw; height: 33vw; right: 9vw; bottom: 20vh; }
.orbit-b { width: 18vw; height: 18vw; left: 5vw; top: 18vh; }

.diagram-card {
  position: absolute;
  right: 7vw;
  bottom: 17vh;
  width: min(52vw, 720px);
  height: 430px;
  border-radius: 52px;
  background: var(--porcelain-taupe);
  box-shadow: var(--raised);
  padding: 38px;
}

.signal-svg { width: 100%; height: 100%; filter: drop-shadow(10px 12px 18px rgba(156,122,85,0.22)); }
.trace { fill: none; stroke: var(--circuit-sage); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawTrace 2.8s ease forwards; }
.trace-back { stroke: var(--pale-blue); transform: translateX(16px); opacity: 0.55; }
.node { fill: var(--dawn-cream); stroke: var(--circuit-sage); stroke-width: 7; }
.node.honey { fill: var(--pressed-honey); }
.node.blue { fill: var(--pale-blue); }
.sun-index circle, .sun-index path { fill: none; stroke: var(--pressed-honey); stroke-width: 4; opacity: 0.75; }
@keyframes drawTrace { to { stroke-dashoffset: 0; } }

.annotation { position: absolute; }
.a1 { left: 60px; top: 42px; } .a2 { left: 130px; bottom: 58px; } .a3 { right: 52px; top: 84px; }
.afterimage-trail { position: absolute; font-family: var(--display); font-size: 120px; color: transparent; -webkit-text-stroke: 1px rgba(156,122,85,0.18); }
.trail-one { left: 10vw; bottom: 12vh; } .trail-two { left: 11vw; bottom: 14vh; opacity: 0.45; }

.tray-field { position: absolute; right: 7vw; top: 20vh; width: 50vw; height: 62vh; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.tool-tray { position: relative; border-radius: 40px; padding: 26px; background: var(--porcelain-taupe); box-shadow: var(--raised); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.tool-tray:hover { transform: translateY(6px); box-shadow: var(--pressed); }
.dial { position: absolute; inset: 70px; border-radius: 50%; background: var(--dawn-cream); box-shadow: var(--pressed); }
.dial i { position: absolute; left: 50%; top: 17%; width: 6px; height: 40%; border-radius: 999px; background: var(--pressed-honey); transform-origin: bottom; animation: dialSweep 5s ease-in-out infinite; }
@keyframes dialSweep { 50% { transform: rotate(105deg); } }
.sealed-button { position: absolute; inset: auto 36px 48px; height: 58px; border: 0; border-radius: 999px; background: var(--dawn-cream); color: var(--carbon-fig); font: 13px var(--mono); letter-spacing: 0.14em; box-shadow: var(--raised); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.sealed-button:active, .sealed-button.depressed { transform: translateY(4px); box-shadow: var(--pressed); }
.ribbon-svg { position: absolute; left: 24px; right: 24px; bottom: 42px; width: calc(100% - 48px); height: 50%; }
.ribbon-svg path { fill: none; stroke: var(--circuit-sage); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.calibration-line { position: absolute; left: 35px; right: 35px; top: 50%; height: 16px; border-radius: 999px; background: var(--dawn-cream); box-shadow: var(--pressed); overflow: hidden; }
.calibration-line i { display: block; height: 100%; width: 28%; border-radius: inherit; background: linear-gradient(90deg, var(--pressed-honey), var(--future-apricot)); animation: calibrate 2.4s ease-in-out infinite; }
@keyframes calibrate { 50% { transform: translateX(260%); } }

.city-wrap { position: absolute; left: 9vw; right: 7vw; bottom: 13vh; height: 46vh; border-radius: 60px; background: linear-gradient(180deg, rgba(184,199,196,0.25), rgba(221,208,188,0.55)); box-shadow: var(--pressed); overflow: hidden; }
.horizon-line { position: absolute; left: 4%; right: 4%; bottom: 24%; height: 2px; background: var(--soft-clay); opacity: 0.36; }
.tower { position: absolute; bottom: 24%; width: 72px; border-radius: 24px 24px 8px 8px; background: var(--dawn-cream); box-shadow: var(--raised); }
.tower i { position: absolute; left: 18px; right: 18px; top: 18px; height: 8px; border-radius: 999px; background: var(--pale-blue); box-shadow: 0 28px 0 var(--pale-blue), 0 56px 0 var(--pale-blue); }
.t1 { left: 8%; height: 34%; } .t2 { left: 23%; height: 58%; width: 96px; } .t3 { left: 43%; height: 43%; } .t4 { left: 61%; height: 66%; width: 88px; } .t5 { left: 79%; height: 38%; }
.antenna { position: absolute; bottom: 24%; width: 4px; height: 66%; background: var(--circuit-sage); border-radius: 999px; }
.antenna:before { content: ""; position: absolute; top: -18px; left: -12px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--pressed-honey); }
.an1 { left: 34%; } .an2 { left: 73%; height: 54%; }
.mini-console { left: 48%; bottom: 8%; width: 260px; height: 66px; }
.mini-console .sun-disc { width: 40px; height: 20px; }

.receipt-artifact { position: relative; z-index: 2; width: min(620px, 82vw); margin: 10vh auto 0; padding: 42px; border-radius: 34px; background: var(--porcelain-taupe); box-shadow: var(--raised); }
.receipt-artifact:before, .receipt-artifact:after { content: ""; position: absolute; left: 18px; right: 18px; height: 1px; background: repeating-linear-gradient(90deg, var(--soft-clay) 0 10px, transparent 10px 20px); opacity: 0.35; }
.receipt-artifact:before { top: 22px; } .receipt-artifact:after { bottom: 22px; }
.receipt-head { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(156,122,85,0.28); font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; }
.receipt-head strong { font-family: var(--display); font-size: 34px; letter-spacing: 0.02em; }
.receipt-lines { min-height: 150px; }
.receipt-seal { display: flex; align-items: center; gap: 18px; margin-top: 26px; font: 12px var(--mono); letter-spacing: 0.14em; color: var(--circuit-sage); }
.seal-console { position: relative; width: 132px; height: 46px; flex: none; }
.seal-console .sun-disc { width: 32px; height: 16px; }
.quiet-close { text-align: center; margin-top: 32px; font: 13px var(--mono); letter-spacing: 0.08em; color: rgba(39,35,30,0.58); }

.panel-dots { position: fixed; z-index: 12; right: 32px; bottom: 28px; display: flex; gap: 10px; }
.panel-dots button { width: 46px; height: 34px; border: 0; border-radius: 999px; background: var(--porcelain-taupe); color: var(--carbon-fig); font: 11px var(--mono); box-shadow: var(--raised); transition: 0.2s ease; }
.panel-dots button.active, .panel-dots button:hover { background: var(--pressed-honey); box-shadow: var(--pressed); }

.parallax { transition: transform 0.2s ease-out; }

@media (max-width: 900px) {
  .panel { padding: 10vh 6vw 12vh; }
  .diagram-card, .tray-field { position: relative; right: auto; top: auto; bottom: auto; width: 100%; height: 46vh; margin-top: 34px; }
  .tray-field { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tool-tray { border-radius: 28px; padding: 18px; }
  .city-wrap { left: 6vw; right: 6vw; }
  .fixed-ruler span:nth-child(n+3) { display: none; }
}