:root {
  --device-width: 390px;
  --device-height: 844px;
  --text-scale: 1;
  --ink: #26342f;
  --muted: #66736d;
  --forest: #2d5444;
  --forest-deep: #203e35;
  --moss: #6f9b59;
  --leaf: #86ae66;
  --water: #57aeb3;
  --water-pale: #a8d8d5;
  --fungus: #775b79;
  --clay: #c87856;
  --amber: #d4a344;
  --coral: #c85d4d;
  --ivory: #f5efde;
  --paper: #fbf7ea;
  --stone: #59645e;
  --line: #b8b8a6;
  --shadow: rgba(30, 45, 39, 0.18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #dce1da;
}

body {
  min-height: 100vh;
  overflow: auto;
}

button,
select,
input {
  font: inherit;
}

button {
  color: inherit;
  touch-action: manipulation;
}

button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid var(--water);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
}

.prototype-workbench {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}

.review-toolbar {
  height: 100vh;
  overflow-y: auto;
  padding: 22px 18px 32px;
  background: #24322d;
  color: #f5efde;
  border-right: 1px solid #4e6259;
}

.review-brand {
  display: grid;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid #4e6259;
}

.review-brand .eyebrow {
  color: #9bc6b1;
  font-size: 11px;
  font-weight: 800;
}

.review-brand strong {
  font-size: 17px;
}

.review-brand small,
.review-note {
  color: #b8c5bf;
  line-height: 1.45;
}

.review-group {
  padding-top: 17px;
}

.review-group h2 {
  margin: 0 0 8px;
  color: #dce5df;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid #667a70;
  border-radius: 6px;
  overflow: hidden;
}

.segment button,
.review-page-list button {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #d9e3dd;
  cursor: pointer;
}

.segment button + button {
  border-left: 1px solid #667a70;
}

.segment button[aria-pressed="true"],
.review-page-list button[aria-current="page"] {
  background: #e7ddc5;
  color: #26342f;
  font-weight: 750;
}

.review-toolbar select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  color: #f5efde;
  background: #31433c;
  border: 1px solid #667a70;
  border-radius: 6px;
}

.review-page-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.review-page-list button {
  min-height: 36px;
  padding: 5px 7px;
  border: 1px solid #53685e;
  border-radius: 4px;
  font-size: 11px;
  text-align: left;
}

.review-note {
  margin: 22px 0 0;
  font-size: 11px;
}

.preview-stage {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background-color: #dce1da;
  background-image:
    linear-gradient(rgba(38, 52, 47, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 52, 47, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

.device-label {
  color: #536159;
  font-size: 12px;
  font-weight: 750;
}

.device-shell {
  width: var(--device-width);
  height: var(--device-height);
  position: relative;
  overflow: hidden;
  background: var(--ivory);
  border: 8px solid #52625a;
  border-radius: 26px;
  box-shadow: 0 18px 44px rgba(30, 43, 38, 0.25);
}

.app-screen {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  font-size: calc(14px * var(--text-scale));
}

body.capture-mode {
  overflow: hidden;
  background: var(--ivory);
}

body.capture-mode .prototype-workbench {
  display: block;
  width: 100vw;
  height: 100vh;
}

body.capture-mode .review-toolbar,
body.capture-mode .device-label {
  display: none;
}

body.capture-mode .preview-stage {
  width: 100vw;
  height: 100vh;
  display: block;
  padding: 0;
  background: var(--ivory);
}

body.capture-mode .device-shell {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app-header {
  min-height: calc(62px + var(--safe-top));
  padding: calc(8px + var(--safe-top)) 12px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  background: var(--paper);
  border-bottom: 2px solid #bfc2af;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.8) inset;
  z-index: 10;
}

.objective-button {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.objective-button .objective-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--forest);
  border-radius: 50%;
  box-shadow: 0 2px 0 #18332a;
}

.objective-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.objective-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.objective-copy strong {
  overflow-wrap: anywhere;
  font-size: calc(14px * var(--text-scale));
  line-height: 1.2;
}

.icon-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #9ca99f;
  border-radius: 6px;
  background: #e5e7d8;
  color: var(--forest-deep);
  cursor: pointer;
}

.icon-button:active,
.button:active,
.tool-button:active,
.nav-button:active {
  transform: translateY(2px);
  box-shadow: none;
}

.app-content {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.app-content.home-content {
  overflow: hidden;
}

.bottom-nav {
  min-height: calc(64px + var(--safe-bottom));
  padding: 4px 8px calc(4px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  flex: 0 0 auto;
  background: var(--paper);
  border-top: 2px solid #bfc2af;
  z-index: 10;
}

.nav-button {
  min-height: 54px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #5d6963;
  cursor: pointer;
  font-size: calc(11px * var(--text-scale));
}

.nav-button[aria-current="page"] {
  color: #163e32;
  background: #dbe4cf;
  box-shadow: inset 0 -3px 0 var(--moss);
}

.nav-button .lucide,
.nav-button .icon-fallback {
  width: 21px;
  height: 21px;
  font-size: 19px;
}

.page-titlebar {
  min-height: 60px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  padding: 6px 10px;
  background: var(--paper);
  border-bottom: 2px solid #c3c4b1;
}

.page-titlebar h1 {
  margin: 0;
  font-size: calc(18px * var(--text-scale));
  line-height: 1.15;
  text-align: center;
}

.page-titlebar p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: calc(10px * var(--text-scale));
  text-align: center;
}

.page-scroll {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding: 14px 14px 28px;
  touch-action: pan-y;
}

.page-scroll > section + section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #c7c6b4;
}

.section-heading {
  margin: 0 0 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.section-heading h2,
.section-heading h3 {
  margin: 0;
  font-size: calc(15px * var(--text-scale));
}

.section-heading small {
  color: var(--muted);
  font-size: calc(10px * var(--text-scale));
  text-align: right;
}

.eyebrow {
  color: var(--forest);
  font-size: calc(10px * var(--text-scale));
  font-weight: 850;
  text-transform: uppercase;
}

.mock-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 6px;
  color: #675f4e;
  background: #ebe1c8;
  border: 1px solid #cabd9d;
  border-radius: 3px;
  font-size: calc(9px * var(--text-scale));
  font-weight: 750;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #27483c;
  border-radius: 7px;
  background: var(--forest);
  color: #fffdf5;
  box-shadow: 0 3px 0 #18332a;
  font-weight: 800;
  line-height: 1.18;
  cursor: pointer;
}

.button.secondary {
  color: var(--forest-deep);
  background: #e5e7d8;
  border-color: #8f9f96;
  box-shadow: 0 3px 0 #aeb6ac;
}

.button.warning {
  color: #3c2b1f;
  background: #e1b85a;
  border-color: #9f7424;
  box-shadow: 0 3px 0 #9f7424;
}

.button.danger {
  background: var(--coral);
  border-color: #8f3a30;
  box-shadow: 0 3px 0 #8f3a30;
}

.button.wide {
  width: 100%;
}

.button[disabled],
.button.is-locked,
.button.is-unaffordable {
  color: #6f756f;
  background: #d6d5c9;
  border-color: #a7aaa2;
  box-shadow: 0 2px 0 #a7aaa2;
}

.button.is-active {
  color: #17382e;
  background: #b8d69f;
  border-color: #5f8750;
  box-shadow: inset 0 0 0 2px #eff7e8;
}

.button.is-queued {
  color: #5f4a22;
  background: #ead9aa;
  border-color: #a7833f;
  box-shadow: inset 0 0 0 2px #f7efd9;
}

.button.is-complete {
  color: #274238;
  background: #d8e4ce;
  border-color: #7c9c6f;
  box-shadow: none;
}

.button.is-claimed {
  color: #59625d;
  background: #e1e1d8;
  border-color: #a6aaa4;
  box-shadow: none;
}

.button.is-error {
  background: var(--coral);
  border-color: #8f3a30;
  animation: error-nudge 180ms ease-out 1;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button-row > * {
  flex: 1 1 132px;
}

.status-chip {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid #a8afa6;
  border-radius: 999px;
  background: #f7f4e8;
  font-size: calc(10px * var(--text-scale));
  font-weight: 750;
}

.status-chip.good { color: #2e653f; border-color: #82a974; }
.status-chip.warn { color: #78551e; border-color: #c5973f; }
.status-chip.danger { color: #8b382e; border-color: #c85d4d; }
.status-chip.info { color: #27626a; border-color: #62aeb2; }

.metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 6px 0;
  border-bottom: 1px solid #d6d2bf;
}

.metric-row:last-child {
  border-bottom: 0;
}

.metric-row strong {
  font-size: calc(14px * var(--text-scale));
}

.metric-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(10px * var(--text-scale));
}

.metric-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.delta-positive { color: #2f7848; }
.delta-negative { color: #a2473b; }

.progress-track {
  height: 10px;
  overflow: hidden;
  background: #d2d4c9;
  border: 1px solid #a4aaa1;
  border-radius: 3px;
}

.progress-fill {
  height: 100%;
  width: var(--progress, 45%);
  background: var(--moss);
  transition: width 240ms ease;
}

.home-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(300px, 1fr) auto;
}

.habitat-world {
  min-height: 300px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 12%, rgba(236, 226, 187, 0.42) 0 5%, transparent 6%),
    linear-gradient(155deg, #627365 0 25%, #4d5e52 25% 55%, #3f5148 55% 100%);
  border-bottom: 4px solid #b37b52;
}

.habitat-world::before {
  content: "";
  position: absolute;
  inset: 13px 12px 8px;
  border: 3px solid rgba(232, 225, 198, 0.7);
  border-bottom-width: 8px;
  border-radius: 38% 38% 8px 8px / 13% 13% 8px 8px;
  box-shadow: inset 0 0 0 5px rgba(55, 73, 64, 0.3);
  pointer-events: none;
  z-index: 7;
}

.habitat-world::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -18%;
  height: 58%;
  background:
    radial-gradient(ellipse at 18% 30%, #7f6652 0 12%, transparent 13%),
    radial-gradient(ellipse at 74% 20%, #665747 0 10%, transparent 11%),
    radial-gradient(ellipse at 49% 56%, #80634d 0 9%, transparent 10%),
    #675d4d;
  border-radius: 50% 48% 0 0;
  box-shadow: inset 0 9px 0 rgba(190, 151, 104, 0.28);
  z-index: -1;
}

.habitat-light {
  position: absolute;
  top: -38px;
  right: 12%;
  width: 90px;
  height: 150px;
  opacity: 0.45;
  background: linear-gradient(180deg, rgba(246, 195, 105, 0.72), transparent);
  clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
}

.water-pool {
  position: absolute;
  left: 3%;
  bottom: 13%;
  width: 42%;
  height: 28%;
  background: #58aeb0;
  border: 5px solid #347d83;
  border-radius: 55% 45% 50% 40%;
  box-shadow: inset 0 9px 0 rgba(188, 232, 221, 0.34), 0 5px 0 rgba(34, 87, 83, 0.6);
  transform: rotate(-5deg);
  opacity: 0.82;
}

.rock {
  position: absolute;
  background: #5c625b;
  border: 3px solid #3a463f;
  box-shadow: inset -8px -7px 0 rgba(42, 53, 47, 0.26), 0 5px 0 rgba(37, 50, 44, 0.32);
  clip-path: polygon(18% 4%, 84% 0, 100% 62%, 73% 100%, 9% 88%, 0 36%);
}

.rock.one { width: 95px; height: 78px; right: 3%; bottom: 19%; transform: rotate(8deg); }
.rock.two { width: 80px; height: 64px; left: 4%; top: 16%; transform: rotate(-8deg); }
.rock.three { width: 66px; height: 52px; right: 30%; top: 29%; transform: rotate(16deg); opacity: .72; }

.species-button {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 4;
}

.clay-algae {
  left: 50%;
  bottom: 19%;
  width: 138px;
  height: 138px;
  transform: translateX(-50%);
}

.clay-algae .petal {
  --r: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 70px;
  margin-left: -17px;
  margin-top: -62px;
  transform-origin: 17px 62px;
  transform: rotate(var(--r));
  background: linear-gradient(100deg, #517b46, #8faf63 55%, #6f9555);
  border: 3px solid #365c3c;
  border-radius: 55% 55% 42% 42%;
  box-shadow: inset 5px 3px 0 rgba(224, 232, 175, 0.2), 0 4px 0 #31523a;
  transition: transform 420ms ease, filter 300ms ease;
}

.clay-algae .core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  background: #b3cf73;
  border: 4px solid #5f833e;
  border-radius: 50%;
  box-shadow: inset -6px -5px 0 #91ae55, 0 5px 0 #385b3d;
  z-index: 2;
}

.clay-algae.is-dry .petal {
  transform: rotate(var(--r)) scaleY(.68) translateY(14px);
  filter: saturate(.65) brightness(.86);
}

.clay-algae.is-stressed .petal {
  transform: rotate(var(--r)) scale(.82) skewX(7deg);
  filter: saturate(.55) sepia(.25);
}

.clay-algae.is-recovered .petal {
  transform: rotate(var(--r)) scale(1.06);
}

.dew-moss {
  left: 8%;
  bottom: 15%;
  width: 94px;
  height: 82px;
}

.dew-moss .moss-base {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 5px;
  height: 38px;
  background: #4f7641;
  border: 3px solid #365a3b;
  border-radius: 50% 50% 38% 38%;
  box-shadow: 0 5px 0 #334c38;
}

.dew-moss .dew-tip {
  --x: 10px;
  --h: 42px;
  position: absolute;
  left: var(--x);
  bottom: 20px;
  width: 13px;
  height: var(--h);
  background: #87ad59;
  border: 2px solid #416b42;
  border-radius: 50% 50% 36% 36%;
  transform: rotate(var(--tilt, 0deg));
}

.dew-moss .dew-tip::after {
  content: "";
  position: absolute;
  left: 1px;
  top: -5px;
  width: 8px;
  height: 10px;
  background: var(--water-pale);
  border: 2px solid #3f898f;
  border-radius: 50% 50% 55% 45%;
}

.dew-moss.is-stressed {
  transform: scaleY(.72) translateY(12px);
  filter: saturate(.6);
}

.rockfilm-fungus {
  right: 8%;
  bottom: 12%;
  width: 98px;
  height: 116px;
}

.rockfilm-fungus .fungus-mat {
  position: absolute;
  left: 4px;
  right: 2px;
  bottom: 4px;
  height: 42px;
  background: #795b79;
  border: 3px solid #503d5d;
  border-radius: 52% 44% 36% 46%;
  box-shadow: inset 7px 5px 0 rgba(204, 167, 186, .18), 0 5px 0 #48374e;
}

.rockfilm-fungus .stalk {
  position: absolute;
  bottom: 29px;
  width: 15px;
  background: #d6b57a;
  border: 2px solid #855d43;
  border-radius: 9px 9px 3px 3px;
  transform-origin: bottom;
  transition: transform 300ms ease;
}

.rockfilm-fungus .stalk::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 29px;
  height: 13px;
  background: var(--clay);
  border: 2px solid #864a37;
  border-radius: 50% 50% 42% 42%;
  box-shadow: inset 0 3px 0 rgba(255, 222, 166, .2);
}

.rockfilm-fungus .stalk.a { left: 28px; height: 56px; transform: rotate(-7deg); }
.rockfilm-fungus .stalk.b { left: 60px; height: 76px; transform: rotate(7deg); }
.rockfilm-fungus.is-stressed .stalk { transform: scaleY(.62) rotate(9deg); }

.flow-path {
  position: absolute;
  left: 29%;
  right: 21%;
  bottom: 25%;
  height: 14px;
  z-index: 3;
  opacity: 0;
  transform: rotate(7deg);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--water) 0 16px, transparent 16px 26px);
  box-shadow: 0 0 0 3px rgba(101, 180, 175, .15);
}

.resource-bead {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid #365e3e;
  border-radius: 50%;
  background: #a7ca69;
  z-index: 5;
  opacity: 0;
}

.resource-bead.one { left: 43%; bottom: 31%; }
.resource-bead.two { left: 53%; bottom: 28%; animation-delay: 650ms; }
.resource-bead.three { left: 63%; bottom: 25%; animation-delay: 1300ms; }

.world-droplet {
  position: absolute;
  left: 50%;
  bottom: 48%;
  width: 34px;
  height: 42px;
  transform: translateX(-50%) rotate(45deg);
  background: #79c8c8;
  border: 4px solid #397f84;
  border-radius: 60% 45% 60% 45%;
  box-shadow: inset 6px 4px 0 rgba(231, 255, 245, .45), 0 5px 0 rgba(41, 91, 91, .5);
  z-index: 6;
}

.world-droplet::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  border: 2px solid rgba(244, 255, 249, .45);
}

.habitat-world:not([data-stage="opening"]):not([data-stage="firstImpact"]) .world-droplet {
  opacity: 0;
}

.impact-ripple {
  position: absolute;
  left: 50%;
  bottom: 28%;
  width: 48%;
  height: 15%;
  opacity: 0;
  transform: translateX(-50%);
  border: 7px solid rgba(89, 184, 184, .74);
  border-radius: 50%;
  z-index: 2;
}

.world-label {
  position: absolute;
  min-width: 108px;
  max-width: min(70%, 248px);
  padding: 7px 9px;
  color: #29362f;
  background: #f8f0d6;
  border: 2px solid #8e8b70;
  border-radius: 4px;
  box-shadow: 0 4px 0 rgba(58, 65, 55, .28);
  z-index: 8;
  font-size: calc(10px * var(--text-scale));
  line-height: 1.25;
}

.world-label strong {
  display: block;
  font-size: calc(12px * var(--text-scale));
}

.world-label.target-label {
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  text-align: center;
}

.world-label.fungus-label {
  right: 6%;
  top: 39%;
}

.world-action {
  position: absolute;
  left: 50%;
  top: 27%;
  width: min(76%, 270px);
  transform: translateX(-50%);
  z-index: 9;
}

.world-action .button {
  width: 100%;
  min-height: 56px;
  background: #347f78;
  border-color: #205b57;
  box-shadow: 0 4px 0 #205b57;
}

.action-preview {
  margin-top: 6px;
  display: flex;
  justify-content: center;
  gap: 7px;
  color: #25463e;
  font-size: calc(10px * var(--text-scale));
  font-weight: 800;
}

.action-preview span {
  padding: 3px 6px;
  background: rgba(248, 240, 214, .95);
  border: 1px solid #8e8b70;
  border-radius: 3px;
}

.bloom-patch {
  position: absolute;
  right: 19%;
  bottom: 28%;
  width: 80px;
  height: 32px;
  opacity: 0;
  background: repeating-radial-gradient(circle at 8px 9px, #c85d4d 0 5px, transparent 6px 13px);
  z-index: 4;
  transform: rotate(12deg);
}

.shade-canopy {
  position: absolute;
  right: 7%;
  top: 22%;
  width: 44%;
  height: 38px;
  opacity: 0;
  background: #5c6b65;
  border: 4px solid #35473f;
  border-radius: 50% 50% 8px 8px;
  box-shadow: 0 8px 0 rgba(36, 51, 44, .28);
  transform: rotate(-7deg);
  z-index: 6;
}

.reward-seed {
  position: absolute;
  right: 18%;
  top: 30%;
  width: 38px;
  height: 42px;
  opacity: 0;
  background: #d4a344;
  border: 4px solid #815d24;
  border-radius: 55% 45% 55% 45%;
  transform: rotate(35deg);
  box-shadow: inset 5px 4px 0 rgba(255, 231, 148, .5), 0 5px 0 rgba(75, 54, 31, .35);
  z-index: 7;
}

.habitat-world[data-stage="firstImpact"] .world-droplet {
  animation: droplet-impact 650ms ease-in forwards;
}

.habitat-world[data-stage="firstImpact"] .impact-ripple {
  animation: ripple 900ms ease-out forwards;
}

.habitat-world[data-stage="firstImpact"] .flow-path,
.habitat-world[data-stage="automation"] .flow-path,
.habitat-world[data-stage="bottleneck"] .flow-path,
.habitat-world[data-stage="choice"] .flow-path,
.habitat-world[data-stage="recovery"] .flow-path,
.habitat-world[data-stage="reward"] .flow-path,
.habitat-world[data-stage="transformation"] .flow-path,
.habitat-world[data-stage="cycle2"] .flow-path {
  opacity: .9;
}

.habitat-world[data-stage="automation"] .resource-bead,
.habitat-world[data-stage="bottleneck"] .resource-bead,
.habitat-world[data-stage="choice"] .resource-bead,
.habitat-world[data-stage="recovery"] .resource-bead,
.habitat-world[data-stage="reward"] .resource-bead,
.habitat-world[data-stage="transformation"] .resource-bead,
.habitat-world[data-stage="cycle2"] .resource-bead {
  opacity: 1;
  animation: bead-work 2.4s linear infinite;
}

.habitat-world[data-stage="bottleneck"] .bloom-patch,
.habitat-world[data-stage="choice"] .bloom-patch,
.habitat-world[data-stage="failure"] .bloom-patch {
  opacity: 1;
}

.habitat-world[data-stage="failure"] .bloom-patch {
  width: 120px;
  height: 60px;
}

.habitat-world[data-stage="recovery"] .shade-canopy {
  opacity: 1;
  animation: canopy-drop 440ms ease-out both;
}

.habitat-world[data-stage="reward"] .reward-seed,
.habitat-world[data-stage="transformation"] .reward-seed {
  opacity: 1;
  animation: reward-rise 600ms ease-out both;
}

.habitat-world[data-stage="cycle2"] {
  background:
    radial-gradient(circle at 76% 14%, rgba(255, 203, 118, .3) 0 7%, transparent 8%),
    linear-gradient(155deg, #64716b 0 26%, #516a68 26% 56%, #445957 56% 100%);
}

.habitat-world[data-stage="cycle2"] .water-pool {
  width: 30%;
  opacity: .58;
}

.care-console {
  min-height: 166px;
  max-height: 218px;
  display: grid;
  grid-template-rows: repeat(3, minmax(52px, auto));
  background: #f4eddc;
  border-top: 1px solid #c9bda1;
  overflow-y: auto;
}

.care-signal {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 0;
  border-bottom: 1px solid #c9c2ad;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.care-signal:last-child {
  border-bottom: 0;
}

.signal-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.care-signal.goal { color: #43693f; }
.care-signal.auto { color: #297078; }
.care-signal.next { color: #815d24; }
.care-signal.danger { color: #963f35; }

.signal-copy {
  min-width: 0;
  color: var(--ink);
}

.signal-copy small {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: calc(9px * var(--text-scale));
  font-weight: 800;
  text-transform: uppercase;
}

.signal-copy strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: calc(12px * var(--text-scale));
  line-height: 1.25;
}

.signal-copy span {
  display: block;
  margin-top: 2px;
  color: #59645e;
  font-size: calc(9px * var(--text-scale));
  line-height: 1.25;
}

.signal-value {
  color: var(--ink);
  font-size: calc(11px * var(--text-scale));
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.launch-page {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 28px;
  color: #f8f1de;
  background: #345044;
}

.launch-mark {
  width: min(74vw, 260px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  border: 8px solid #dfd1aa;
  border-radius: 44% 44% 10px 10px / 18% 18% 10px 10px;
  background: #52695b;
  box-shadow: inset 0 -28px 0 #765f4d;
}

.launch-mark .mini-life {
  width: 86px;
  height: 86px;
  background: var(--moss);
  border: 5px solid #385b3d;
  border-radius: 50%;
  box-shadow: 0 6px 0 #2a4933;
}

.launch-mark .mini-drop {
  position: absolute;
  top: 45px;
  width: 28px;
  height: 34px;
  background: var(--water);
  border: 3px solid #275f67;
  border-radius: 60% 45% 60% 45%;
  transform: rotate(45deg);
  animation: launch-drop 1.2s ease-in-out infinite;
}

.launch-copy {
  margin-top: 22px;
  text-align: center;
}

.launch-copy h1 {
  margin: 0;
  font-size: calc(23px * var(--text-scale));
}

.launch-copy p {
  margin: 8px 0 0;
  color: #d9decf;
}

.tool-grid,
.option-grid,
.species-grid,
.future-grid,
.exception-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tool-card,
.option-card,
.species-card,
.future-card,
.exception-card {
  min-width: 0;
  padding: 11px;
  background: var(--paper);
  border: 1px solid #aaa993;
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(86, 91, 77, .18);
}

.tool-card.selected,
.option-card.selected,
.species-card.selected,
.future-card.selected,
.exception-card.selected {
  border: 2px solid var(--forest);
  box-shadow: inset 0 0 0 2px #dfe8d4;
}

.tool-card h3,
.option-card h3,
.species-card h3,
.future-card h3,
.exception-card h3 {
  margin: 6px 0 4px;
  font-size: calc(14px * var(--text-scale));
}

.tool-card p,
.option-card p,
.species-card p,
.future-card p,
.exception-card p {
  margin: 4px 0;
  color: #5b655f;
  font-size: calc(10px * var(--text-scale));
  line-height: 1.4;
}

.tool-card .button,
.option-card .button,
.future-card .button,
.exception-card .button {
  width: 100%;
  margin-top: 9px;
}

.tool-symbol,
.species-token,
.future-symbol {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--forest);
  border: 3px solid #1f4035;
  border-radius: 50%;
  box-shadow: 0 3px 0 #1f4035;
  font-size: 21px;
}

.tool-card:nth-child(2) .tool-symbol { background: var(--stone); }
.tool-card:nth-child(3) .tool-symbol { background: var(--clay); }
.tool-card:nth-child(4) .tool-symbol { background: var(--amber); color: #4b3418; }

.preview-band {
  padding: 12px;
  background: #e8e1ce;
  border-left: 5px solid var(--water);
}

.preview-band h3 {
  margin: 0 0 7px;
  font-size: calc(14px * var(--text-scale));
}

.preview-band p {
  margin: 4px 0;
  line-height: 1.4;
}

.relation-map {
  min-height: 286px;
  position: relative;
  overflow: hidden;
  background: #e9e2cf;
  border: 2px solid #9d9b85;
  border-radius: 6px;
}

.relation-map::before,
.relation-map::after,
.relation-link {
  content: "";
  position: absolute;
  height: 5px;
  background: #779778;
  border-radius: 999px;
  transform-origin: left center;
  z-index: 0;
}

.relation-map::before { left: 22%; top: 32%; width: 58%; transform: rotate(26deg); }
.relation-map::after { left: 18%; top: 67%; width: 63%; transform: rotate(-24deg); background: #8f6d8f; }
.relation-link.one { left: 28%; top: 48%; width: 47%; transform: rotate(0deg); background: #57aeb3; }
.relation-link.two { left: 48%; top: 18%; width: 40%; transform: rotate(76deg); background: #c87856; }

.relation-node {
  width: 78px;
  min-height: 58px;
  position: absolute;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 2px solid #4d675a;
  border-radius: 8px;
  background: #f5efde;
  box-shadow: 0 4px 0 rgba(58, 70, 61, .24);
  cursor: pointer;
  z-index: 2;
  font-size: calc(10px * var(--text-scale));
  font-weight: 800;
  text-align: center;
}

.relation-node.selected { background: #dce9cd; border-color: #4d7b4a; }
.relation-node.stressed { background: #f2d6cf; border-color: #a14c41; }
.relation-node.locked { opacity: .5; border-style: dashed; }
.relation-node.n1 { left: 50%; top: 12px; transform: translateX(-50%); }
.relation-node.n2 { right: 10px; top: 77px; }
.relation-node.n3 { right: 16px; bottom: 18px; }
.relation-node.n4 { left: 50%; bottom: 8px; transform: translateX(-50%); }
.relation-node.n5 { left: 12px; bottom: 30px; }
.relation-node.n6 { left: 8px; top: 78px; }

.relation-detail {
  padding: 12px;
  background: var(--paper);
  border: 1px solid #aaa993;
  border-radius: 5px;
}

.relation-detail h3 { margin: 0 0 6px; }
.relation-detail p { margin: 4px 0; line-height: 1.4; }

.dial-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dial-button {
  min-height: 72px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 7px;
  border: 1px solid #a7a691;
  border-radius: 6px;
  background: #ece6d4;
  cursor: pointer;
  font-size: calc(10px * var(--text-scale));
}

.dial-button[aria-pressed="true"] {
  background: #d9e4cf;
  border: 2px solid var(--forest);
}

.dial {
  width: 38px;
  height: 38px;
  border: 6px solid #b3b5a8;
  border-right-color: var(--water);
  border-bottom-color: var(--water);
  border-radius: 50%;
  transform: rotate(35deg);
}

.factor-list {
  display: grid;
  gap: 6px;
}

.factor-item {
  min-height: 44px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: #f8f4e7;
  border-left: 4px solid var(--moss);
}

.factor-item.negative { border-left-color: var(--coral); }
.factor-item .metric-value { font-size: calc(11px * var(--text-scale)); }

.rule-panel {
  padding: 13px;
  background: var(--paper);
  border: 2px solid #aaa993;
  border-radius: 7px;
}

.rule-panel + .rule-panel { margin-top: 12px; }
.rule-panel.selected { border-color: var(--forest); box-shadow: inset 0 0 0 3px #dce8d2; }
.rule-panel h3 { margin: 0 0 6px; font-size: calc(16px * var(--text-scale)); }
.rule-panel p { margin: 5px 0; line-height: 1.4; }

.rule-preview {
  min-height: 78px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 11px 0;
  padding: 9px;
  background: #e6e1cf;
  border-radius: 5px;
}

.module-symbol {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: #f9f4e8;
  background: var(--water);
  border: 4px solid #347a7e;
  border-radius: 8px;
  box-shadow: 0 4px 0 #347a7e;
  font-size: 25px;
}

.rule-panel:nth-of-type(2) .module-symbol { background: var(--stone); border-color: #3f4b45; box-shadow: 0 4px 0 #3f4b45; }

.specimen-stage {
  min-height: 190px;
  position: relative;
  display: grid;
  place-items: center;
  background: #dfe2d2;
  border: 2px solid #9ea592;
  border-radius: 6px;
}

.specimen-model {
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--moss);
  border: 7px solid #3b643f;
  border-radius: 45% 55% 50% 42%;
  box-shadow: inset 12px 9px 0 rgba(229, 237, 184, .2), 0 8px 0 #3b543d;
  font-size: 46px;
  font-weight: 900;
}

.specimen-model.fungus { background: var(--fungus); border-color: #513d59; }
.specimen-model.moss { background: #73a35b; border-radius: 52% 48% 35% 42%; }

.timeline {
  display: grid;
  gap: 0;
}

.timeline-node {
  min-height: 84px;
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0 12px;
}

.timeline-node::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 47px;
  bottom: -4px;
  width: 4px;
  background: #c4c5b8;
}

.timeline-node:last-child::after { display: none; }

.timeline-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 3px solid #969f95;
  border-radius: 50%;
  background: #e8e4d6;
  font-weight: 900;
}

.timeline-node.complete .timeline-mark { color: white; background: var(--forest); border-color: var(--forest-deep); }
.timeline-node.active .timeline-mark { color: #3a2a14; background: var(--amber); border-color: #8a672c; }
.timeline-node.locked { opacity: .58; }
.timeline-node h3 { margin: 0 0 4px; font-size: calc(14px * var(--text-scale)); }
.timeline-node p { margin: 0; color: var(--muted); line-height: 1.35; }

.carry-slot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.carry-slot {
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  background: #e5e0cf;
  border: 2px dashed #929789;
  border-radius: 6px;
  font-size: calc(10px * var(--text-scale));
}

.carry-slot.filled {
  background: #d9e5cf;
  border-style: solid;
  border-color: #638158;
}

.offline-summary {
  padding: 14px;
  background: #f4edda;
  border: 2px solid #a5a28a;
  border-radius: 6px;
}

.offline-summary h2 { margin: 0 0 8px; font-size: calc(17px * var(--text-scale)); }
.offline-summary p { margin: 5px 0; line-height: 1.42; }

.stop-reason {
  margin-top: 12px;
  padding: 10px;
  color: #6f3d27;
  background: #f0ddc9;
  border-left: 5px solid var(--coral);
}

.settings-group {
  padding: 12px 0;
  border-bottom: 1px solid #cbc8b7;
}

.settings-group:last-child { border-bottom: 0; }
.settings-group h2 { margin: 0 0 10px; font-size: calc(14px * var(--text-scale)); }

.setting-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.setting-row strong { display: block; }
.setting-row small { display: block; margin-top: 2px; color: var(--muted); }
.setting-row input[type="range"] { width: 118px; min-height: 44px; accent-color: var(--forest); }

.toggle {
  width: 60px;
  height: 44px;
  position: relative;
  padding: 0;
  border: 2px solid #7b877f;
  border-radius: 999px;
  background: #cbcfc7;
  cursor: pointer;
}

.toggle::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .16);
  transition: transform 160ms ease;
}

.toggle[aria-pressed="true"] { background: var(--forest); border-color: var(--forest-deep); }
.toggle[aria-pressed="true"]::after { transform: translateX(16px); }

.modal-layer {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: end;
  background: rgba(38, 52, 47, .68);
  z-index: 30;
}

.modal-layer.centered { align-items: center; padding: 16px; }

.modal-panel {
  width: 100%;
  max-height: 84%;
  overflow-y: auto;
  padding: 16px 14px calc(18px + var(--safe-bottom));
  background: var(--paper);
  border-top: 4px solid var(--forest);
  box-shadow: 0 -12px 28px rgba(29, 41, 36, .3);
}

.centered .modal-panel {
  max-height: 90%;
  border: 3px solid var(--forest);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(29, 41, 36, .35);
}

.modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}

.modal-header h2 { margin: 0; font-size: calc(18px * var(--text-scale)); line-height: 1.2; }
.modal-header p { margin: 5px 0 0; color: var(--muted); line-height: 1.35; }

.decision-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.decision-option {
  min-width: 0;
  padding: 11px;
  background: #ece7d7;
  border: 2px solid #a7a591;
  border-radius: 7px;
}

.decision-option.wet { border-top: 6px solid var(--water); }
.decision-option.cool { border-top: 6px solid var(--stone); }
.decision-option.danger { border-top: 6px solid var(--coral); }
.decision-option.reward { border-top: 6px solid var(--amber); }

.decision-option h3 { margin: 0 0 8px; font-size: calc(15px * var(--text-scale)); }
.decision-option p { margin: 6px 0; line-height: 1.35; font-size: calc(11px * var(--text-scale)); }
.decision-option .button { width: 100%; margin-top: 10px; }

.consequence-line {
  min-height: 36px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: 5px 0;
  border-bottom: 1px solid #cfccb9;
}

.consequence-line:last-of-type { border-bottom: 0; }

.modal-footnote {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: calc(10px * var(--text-scale));
  line-height: 1.35;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  max-width: min(88vw, 420px);
  padding: 10px 14px;
  color: white;
  background: #25352f;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  opacity: 0;
  transform: translate(-50%, 18px);
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 100;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
  border: 2px dashed #a9aa9d;
  border-radius: 6px;
}

.empty-state strong { color: var(--ink); }

.help-panel {
  margin-top: 12px;
  padding: 10px 12px;
  background: #e8e1ce;
  border-left: 5px solid var(--water);
}

.help-panel summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 800;
}

.help-panel p {
  margin: 8px 0 2px;
  color: var(--muted);
  line-height: 1.45;
}

.lucide + .icon-fallback {
  display: none;
}

@keyframes droplet-impact {
  0% { transform: translateX(-50%) rotate(45deg) translate(0, 0); }
  75% { opacity: 1; }
  100% { transform: translateX(-50%) rotate(45deg) translate(105px, 105px) scale(.55); opacity: 0; }
}

@keyframes ripple {
  0% { transform: translateX(-50%) scale(.2); opacity: 0; }
  30% { opacity: .9; }
  100% { transform: translateX(-50%) scale(1.4); opacity: 0; }
}

@keyframes bead-work {
  0% { transform: translate(-18px, 7px) scale(.72); opacity: .25; }
  45% { opacity: 1; }
  100% { transform: translate(32px, -8px) scale(1.05); opacity: .3; }
}

@keyframes canopy-drop {
  from { transform: translateY(-34px) rotate(-7deg); opacity: 0; }
  to { transform: translateY(0) rotate(-7deg); opacity: 1; }
}

@keyframes reward-rise {
  from { transform: translateY(24px) rotate(35deg) scale(.7); opacity: 0; }
  to { transform: translateY(0) rotate(35deg) scale(1); opacity: 1; }
}

@keyframes launch-drop {
  0%, 20% { transform: translateY(-10px) rotate(45deg); }
  70%, 100% { transform: translateY(46px) rotate(45deg); }
}

@keyframes error-nudge {
  0% { transform: translateX(0); }
  35% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 1ms !important;
}

body.reduce-flashes .impact-ripple {
  animation: none !important;
  opacity: .7;
  border-style: dashed;
}

body.reduce-flashes .reward-seed,
body.reduce-flashes .bloom-patch {
  animation: none !important;
  filter: saturate(.72);
}

body.low-power .habitat-light,
body.low-power .resource-bead {
  display: none;
}

@media (max-width: 850px) {
  .prototype-workbench {
    grid-template-columns: 1fr;
  }

  .review-toolbar {
    height: auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .review-brand,
  .review-pages,
  .review-note {
    grid-column: 1 / -1;
  }

  .preview-stage {
    padding: 18px 8px 32px;
  }
}

@media (max-width: 374px) {
  .page-scroll { padding-left: 11px; padding-right: 11px; }
  .app-header { padding-left: 8px; padding-right: 8px; }
  .care-signal { padding-left: 8px; padding-right: 8px; grid-template-columns: 30px minmax(0, 1fr) auto; }
  .signal-icon { width: 29px; height: 29px; }
  .tool-grid,
  .option-grid,
  .future-grid,
  .exception-grid { gap: 8px; }
  .decision-options { grid-template-columns: 1fr; }
  .modal-panel { max-height: 90%; }
}

@media (max-height: 820px) {
  .app-header { min-height: calc(58px + var(--safe-top)); }
  .bottom-nav { min-height: calc(60px + var(--safe-bottom)); }
  .nav-button { min-height: 50px; }
  .care-console { min-height: 156px; grid-template-rows: repeat(3, minmax(49px, auto)); }
  .care-signal { min-height: 49px; padding-top: 5px; padding-bottom: 5px; }
}