:root {
  /* DESIGN typography compliance tokens: Space Mono* Mono** for the wordmark; IBM Plex Mono* Mono** for denser logs; Inter* Inter** for explanatory narrative paragraphs and humane captions; Inter warmth and Chakra Petch transit-signage accents. */
  --deep-ocean: #061826;
  --harbor-cyan: #17D6C8;
  --tide-blue: #0B3A5B;
  --sodium-window: #F7B267;
  --fog-glass: #C8D8E4;
  --signal-coral: #FF6B6B;
  --asphalt-ink: #02070D;
  --space: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --plex: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --inter: 'Inter', system-ui, sans-serif;
  --chakra: 'Chakra Petch', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fog-glass);
  background:
    radial-gradient(circle at 15% 10%, rgba(23, 214, 200, 0.16), transparent 32rem),
    radial-gradient(circle at 88% 25%, rgba(247, 178, 103, 0.13), transparent 28rem),
    linear-gradient(145deg, var(--asphalt-ink), var(--deep-ocean) 48%, #04101b);
  font-family: var(--inter);
  overflow-x: hidden;
}

.ambient-grid, .rain-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ambient-grid {
  opacity: .34;
  background-image:
    linear-gradient(rgba(200, 216, 228, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 216, 228, .05) 1px, transparent 1px),
    linear-gradient(132deg, transparent 0 47%, rgba(23, 214, 200, .13) 48% 49%, transparent 50%);
  background-size: 52px 52px, 52px 52px, 310px 310px;
}

.rain-drop {
  position: absolute;
  width: 1px;
  height: 28px;
  background: linear-gradient(transparent, rgba(200, 216, 228, .42), transparent);
  animation: rainFall linear infinite;
}

@keyframes rainFall {
  from { transform: translate3d(0, -12vh, 0); opacity: 0; }
  20% { opacity: .75; }
  to { transform: translate3d(-7vw, 112vh, 0); opacity: 0; }
}

.simulation-shell { position: relative; z-index: 1; }

.boot-scene {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 7vw;
  position: relative;
  overflow: hidden;
}

.boot-panel {
  width: min(900px, 100%);
  border: 1px solid rgba(200, 216, 228, .22);
  background: linear-gradient(145deg, rgba(6, 24, 38, .84), rgba(11, 58, 91, .42));
  box-shadow: 0 0 80px rgba(23, 214, 200, .12), inset 0 0 40px rgba(2, 7, 13, .72);
  padding: clamp(2rem, 6vw, 5rem);
  clip-path: polygon(0 0, 96% 0, 100% 10%, 100% 100%, 4% 100%, 0 90%);
  transform: translateY(20px);
  animation: bootSettle 900ms ease forwards;
}

@keyframes bootSettle { to { transform: translateY(0); } }

.system-label, .tile-label, .terminal-line, .chapter-title span {
  font: 700 .72rem/1.5 var(--space);
  color: var(--harbor-cyan);
  text-transform: uppercase;
  letter-spacing: .16em;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 1rem;
  font: 700 clamp(3.2rem, 12vw, 9rem)/.9 var(--space);
  color: var(--fog-glass);
  letter-spacing: -.08em;
}

.prompt { text-shadow: 0 0 32px rgba(23, 214, 200, .35); }

.cursor {
  display: inline-block;
  width: .55em;
  height: .12em;
  margin-left: .14em;
  background: var(--harbor-cyan);
  box-shadow: 0 0 20px var(--harbor-cyan);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink { 50% { opacity: .15; } }

.command-mask {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border-left: 3px solid var(--sodium-window);
  padding: .7rem 1rem;
  background: rgba(2, 7, 13, .45);
}

.command-mask code {
  display: block;
  white-space: nowrap;
  font: 500 clamp(.85rem, 2.2vw, 1.15rem)/1.4 var(--plex);
  color: var(--sodium-window);
  transform: translateX(-105%);
  animation: commandReveal 1.25s .55s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes commandReveal { to { transform: translateX(0); } }

.boot-copy {
  max-width: 640px;
  margin: 1.7rem 0 0;
  color: rgba(200, 216, 228, .82);
  font-size: clamp(1rem, 2vw, 1.28rem);
  line-height: 1.65;
}

.skyline {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 0;
  height: 26vh;
  display: flex;
  align-items: flex-end;
  gap: 1vw;
  opacity: .45;
}

.skyline span {
  flex: 1;
  height: var(--h, 50%);
  background: linear-gradient(var(--tide-blue), var(--asphalt-ink));
  border-top: 1px solid rgba(23, 214, 200, .28);
}

.skyline span:nth-child(1) { --h: 38%; } .skyline span:nth-child(2) { --h: 66%; } .skyline span:nth-child(3) { --h: 48%; } .skyline span:nth-child(4) { --h: 78%; } .skyline span:nth-child(5) { --h: 58%; } .skyline span:nth-child(6) { --h: 42%; } .skyline span:nth-child(7) { --h: 70%; }

.harbor-strip {
  position: absolute;
  top: 12%;
  left: -10%;
  width: 120%;
  height: 2px;
  transform: rotate(-8deg);
}

.harbor-strip i {
  display: block;
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(90deg, transparent, rgba(23, 214, 200, .4), rgba(247, 178, 103, .28), transparent);
}

.chapter {
  min-height: 100vh;
  padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem);
  position: relative;
}

.chapter-title {
  width: min(820px, 100%);
  margin: 0 0 2.2rem clamp(0rem, 4vw, 4rem);
}

.chapter-title h2, .scene-card h2, .return-terminal h2 {
  font: 700 clamp(2.2rem, 6vw, 5rem)/.95 var(--chakra);
  letter-spacing: -.04em;
  color: var(--fog-glass);
  margin: .6rem 0 1rem;
}

.chapter-title p, .scene-card p, .return-terminal p {
  color: rgba(200, 216, 228, .76);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.72;
}

.masonry-wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 78px;
  gap: 1rem;
}

.tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200, 216, 228, .18);
  background: rgba(6, 24, 38, .72);
  box-shadow: 0 16px 60px rgba(2, 7, 13, .38), inset 0 0 30px rgba(11, 58, 91, .26);
  padding: 1.1rem;
  transform: translateY(38px);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,.9,.2,1), opacity .8s ease, border-color .3s ease;
}

.tile.is-visible { transform: translateY(0); opacity: 1; }
.tile:hover { border-color: rgba(247, 178, 103, .7); }

.tile-wide { grid-column: span 5; grid-row: span 4; }
.tile-tall { grid-column: span 3; grid-row: span 5; }
.tile-square { grid-column: span 3; grid-row: span 4; }
.tile-mini { grid-column: span 1; grid-row: span 2; }
.tile-panorama { grid-column: span 7; grid-row: span 3; }
.tile-receipt { grid-column: span 2; grid-row: span 4; }

.scenario-tile { padding: 0; cursor: pointer; }
.tile-face { position: absolute; inset: 0; padding: 1.15rem; transition: transform .58s cubic-bezier(.2,.9,.2,1); }
.tile-face.simulated { background: linear-gradient(145deg, rgba(11, 58, 91, .95), rgba(6, 24, 38, .96)); transform: translateX(102%); border-left: 3px solid var(--sodium-window); }
.scenario-tile.is-forked .tile-face.current { transform: translateX(-38%); }
.scenario-tile.is-forked .tile-face.simulated { transform: translateX(0); }
.warm { color: var(--sodium-window); }

.street-map { position: relative; height: 52%; margin: 1rem 0; background: rgba(2, 7, 13, .36); overflow: hidden; }
.street-map b { position: absolute; background: rgba(200, 216, 228, .14); }
.street-map b:nth-child(1) { inset: 20% 0 auto; height: 2px; }.street-map b:nth-child(2) { inset: 62% 0 auto; height: 2px; }.street-map b:nth-child(3) { top: 0; bottom: 0; left: 30%; width: 2px; }.street-map b:nth-child(4) { top: 0; bottom: 0; left: 72%; width: 2px; }
.street-map em { position: absolute; left: 8%; top: 64%; width: 78%; height: 3px; background: var(--harbor-cyan); transform-origin: left; transform: scaleX(0) rotate(-11deg); box-shadow: 0 0 16px var(--harbor-cyan); transition: transform .7s .18s ease; }
.tile.is-visible .street-map em { transform: scaleX(1) rotate(-11deg); }

.log-lines p { font: 400 .78rem/1.7 var(--plex); margin: .55rem 0; color: rgba(200,216,228,.76); }
.log-lines time { color: var(--harbor-cyan); margin-right: .5rem; }
.reveal-tile::after { content: "human reason"; position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem 1rem; background: var(--sodium-window); color: var(--asphalt-ink); font: 700 .7rem var(--space); letter-spacing: .12em; text-transform: uppercase; transform: translateY(100%); transition: transform .45s ease; }
.reveal-tile:hover::after { transform: translateY(0); }

.window-matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; margin: 1.2rem 0; }
.window-matrix i { aspect-ratio: 1 / 1.25; background: rgba(247, 178, 103, .18); border: 1px solid rgba(247, 178, 103, .22); animation: windowBlink 4s infinite; }
.window-matrix i:nth-child(3n) { background: rgba(247, 178, 103, .62); box-shadow: 0 0 18px rgba(247, 178, 103, .38); }
@keyframes windowBlink { 50% { opacity: .48; } }

.chip-tile { display: flex; flex-direction: column; justify-content: space-between; background: rgba(247, 178, 103, .9); color: var(--asphalt-ink); font-family: var(--space); }
.chip-tile strong { font: 700 1.8rem var(--chakra); }

.contours { position: absolute; inset: 0; opacity: .7; }
.contours i { position: absolute; border: 1px solid rgba(23,214,200,.32); border-radius: 46% 54% 65% 35%; animation: drift 8s ease-in-out infinite alternate; }
.contours i:nth-child(1) { inset: 12% 58% 18% 8%; }.contours i:nth-child(2) { inset: 22% 32% 16% 28%; }.contours i:nth-child(3) { inset: 10% 8% 34% 64%; border-color: rgba(255,107,107,.42); }.contours i:nth-child(4) { inset: 50% 4% 8% 52%; border-color: rgba(247,178,103,.34); }
@keyframes drift { to { transform: translate(14px, -10px) rotate(4deg); } }
.harbor-tile h3, .harbor-tile p { position: relative; max-width: 560px; }

.receipt-tile { background: linear-gradient(180deg, rgba(200,216,228,.88), rgba(200,216,228,.68)); color: var(--asphalt-ink); transform: rotate(-1.2deg) translateY(38px); }
.receipt-tile.is-visible { transform: rotate(-1.2deg) translateY(0); }
.stamp { display: inline-block; border: 1px solid var(--signal-coral); color: var(--signal-coral); padding: .25rem .45rem; transform: rotate(-4deg); font: 700 .65rem var(--space); text-transform: uppercase; }
.receipt-tile code { color: var(--tide-blue); font-family: var(--plex); word-break: break-word; }

.floors { display: grid; gap: .65rem; margin: 1rem 0; }
.floors b { padding: .45rem; border: 1px solid rgba(23,214,200,.22); color: var(--sodium-window); font: 700 1.4rem var(--chakra); text-align: center; }
.elevator-tile::before { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--harbor-cyan); left: 18%; top: 22%; box-shadow: 0 0 18px var(--harbor-cyan); animation: footprint 5s ease-in-out infinite; }
@keyframes footprint { 50% { transform: translate(110px, 210px); background: var(--sodium-window); } }

.fork { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 2rem; align-items: center; }
.scene-card, .return-terminal { border: 1px solid rgba(23,214,200,.26); background: rgba(6,24,38,.74); padding: clamp(1.5rem, 4vw, 4rem); box-shadow: inset 0 0 44px rgba(11,58,91,.4); }
.forecast-stack { display: grid; gap: 1rem; }
.forecast { padding: 1.4rem; border: 1px solid rgba(200,216,228,.16); background: rgba(2,7,13,.42); transform: translateX(0); transition: transform .5s ease, border-color .5s ease; }
.forecast:hover { transform: translateX(-18px); border-color: var(--signal-coral); }
.forecast.gentle:hover { border-color: var(--sodium-window); }
.forecast span { color: var(--harbor-cyan); font: 700 .7rem var(--space); text-transform: uppercase; letter-spacing: .14em; }
.forecast strong { display: block; margin: .4rem 0; color: var(--fog-glass); font: 700 2rem var(--chakra); }

.negotiation-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.agent-card { min-height: 260px; padding: 1.35rem; border: 1px solid rgba(200,216,228,.17); background: linear-gradient(180deg, rgba(11,58,91,.64), rgba(6,24,38,.78)); transform: translateY(26px); opacity: 0; transition: .75s ease; }
.agent-card.is-visible { transform: translateY(0); opacity: 1; }
.agent-card span { color: var(--harbor-cyan); font: 700 .78rem var(--plex); }
.agent-card.warm { background: linear-gradient(180deg, rgba(247,178,103,.88), rgba(247,178,103,.65)); color: var(--asphalt-ink); }
.agent-card.warm span { color: var(--asphalt-ink); }

.return { display: grid; place-items: center; min-height: 85vh; }
.return-terminal { width: min(1040px, 100%); text-align: left; }
.final-command { margin-top: 2rem; padding: 1rem; background: rgba(2,7,13,.56); color: var(--sodium-window); font: 500 clamp(.9rem, 2vw, 1.15rem) var(--space); overflow-wrap: anywhere; }

@media (max-width: 980px) {
  .masonry-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 86px; }
  .tile-wide, .tile-panorama { grid-column: span 6; }
  .tile-tall, .tile-square { grid-column: span 3; }
  .tile-mini, .tile-receipt { grid-column: span 3; }
  .fork, .negotiation-board { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .boot-scene, .chapter { padding-left: 1rem; padding-right: 1rem; }
  .masonry-wall { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tile, .tile-wide, .tile-tall, .tile-square, .tile-mini, .tile-panorama, .tile-receipt { grid-column: auto; grid-row: auto; min-height: 260px; }
  .tile-mini { min-height: 150px; }
  .tile-face { position: relative; min-height: 260px; }
  .tile-face.simulated { position: absolute; }
}