:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #f4fffb;
  --muted: #bad1ce;
  --deep: #0b242a;
  --panel: #143c43;
  --panel-2: #1c5055;
  --line: #6ca5a3;
  --mint: #9cf0d7;
  --mint-strong: #dbfff3;
  --blue: #73d9f4;
  --green: #8ddf78;
  --amber: #f4c66e;
  --coral: #ee9978;
  --metal-light: #effafa;
  --metal: #a9c2c3;
  --metal-dark: #4e686c;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  min-height: 100svh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -8rem, #39747a 0, transparent 36rem),
    var(--deep);
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #fff1a8;
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.app {
  width: min(100%, 31rem);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(0.8rem, env(safe-area-inset-top)) max(0.8rem, env(safe-area-inset-right)) max(0.8rem, env(safe-area-inset-bottom)) max(0.8rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.app-header,
.section-heading,
.order-card__heading,
.machine-heading,
.result-strip,
.next-order__preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.eyebrow,
.section-kicker,
.safety-note {
  margin: 0;
}

.eyebrow,
.section-kicker {
  color: var(--mint);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

h1,
h2,
p {
  margin-block-start: 0;
}

h1 {
  margin: 0.12rem 0 0;
  font-size: clamp(1.35rem, 6vw, 1.9rem);
  line-height: 1.05;
}

h2 {
  margin: 0.12rem 0 0;
  font-size: 1.12rem;
}

.round-mark {
  width: 3.3rem;
  height: 3.3rem;
  display: grid;
  place-content: center;
  border: 1px solid rgba(156, 240, 215, 0.5);
  border-radius: 50%;
  text-align: center;
  background: rgba(12, 47, 51, 0.75);
}

.round-mark span {
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 800;
}

.round-mark strong {
  font-size: 1.15rem;
  line-height: 1;
}

.stepper {
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
}

.stepper__step {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  color: #789896;
}

.stepper__step i {
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.stepper__step b {
  font-size: 0.64rem;
}

.stepper__step.is-current,
.stepper__step.is-done {
  color: var(--mint);
}

.stepper__step.is-current i {
  color: #123b3e;
  background: var(--mint);
}

.stepper__line {
  height: 1px;
  flex: 1;
  margin-inline: 0.35rem;
  background: #466a6b;
}

.screen {
  flex: 1;
  min-height: 0;
}

.screen.is-active {
  animation: screen-in 260ms ease-out both;
}

.screen--plan,
.screen--machine,
.screen--world {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.previous-result {
  min-height: 2.3rem;
  padding: 0.36rem 0.6rem;
  display: grid;
  grid-template-columns: auto 1fr 3.8rem 4rem;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #507b7c;
  border-radius: 0.65rem;
  background: rgba(13, 45, 49, 0.72);
}

.previous-result__label {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
}

.previous-result__processes {
  display: flex;
  gap: 0.2rem;
}

.previous-result__processes i {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.3rem;
  color: #123237;
  background: var(--mint);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.mini-surface,
.surface-signal {
  overflow: hidden;
  border: 1px solid #cde3e2;
  border-radius: 99px;
  background:
    repeating-linear-gradient(var(--surface-angle, 125deg), transparent 0 var(--surface-gap, 0.35rem), rgba(21, 52, 56, 0.56) var(--surface-gap, 0.35rem) calc(var(--surface-gap, 0.35rem) + var(--surface-stroke, 0.12rem))),
    linear-gradient(180deg, var(--metal-light), var(--metal) 50%, var(--metal-dark));
}

.mini-surface {
  height: 0.72rem;
}

.mini-boxes,
.box-signal {
  display: flex;
  align-items: end;
  gap: 0.14rem;
}

.mini-boxes i,
.box-signal i {
  display: block;
  border: 1px solid #f7d99a;
  border-radius: 0.12rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 0.22rem, rgba(255, 244, 207, 0.34) 0.22rem 0.27rem),
    #8a6745;
}

.mini-boxes i {
  width: 0.58rem;
  height: 0.58rem;
}

.order-card,
.process-panel,
.result-strip {
  border: 1px solid rgba(139, 200, 195, 0.48);
  background: rgba(21, 63, 68, 0.88);
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.18);
}

.order-card {
  position: relative;
  overflow: hidden;
  padding: 0.8rem;
  border-radius: 0.9rem;
}

.order-card::after {
  content: "";
  position: absolute;
  width: 9rem;
  height: 9rem;
  top: -5rem;
  right: -3rem;
  border: 1.5rem solid rgba(156, 240, 215, 0.08);
  border-radius: 50%;
}

.order-card--precision {
  border-color: rgba(120, 217, 244, 0.72);
  background: rgba(24, 66, 78, 0.9);
}

.order-symbol {
  position: relative;
  width: 5.1rem;
  height: 2.65rem;
  flex: 0 0 auto;
}

.order-symbol::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.65rem;
  left: 0.65rem;
  height: 0.78rem;
  border: 2px solid #eef9f8;
  border-radius: 99px;
  background: linear-gradient(180deg, #eaf6f5, #729092);
  transform: translateY(-50%);
}

.order-symbol::after,
.order-symbol span,
.order-symbol i {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.75rem;
  height: 1.35rem;
  border: 2px solid #eef9f8;
  border-radius: 0.22rem;
  background: #789496;
  transform: translateY(-50%);
}

.order-symbol::after { left: 0; }
.order-symbol span,
.order-symbol i { right: 0; }

.order-card--precision .order-symbol,
.order-symbol--precision {
  filter: drop-shadow(0 0 0.55rem rgba(115, 217, 244, 0.55));
}

.requirements {
  margin-top: 0.65rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.requirement {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.65rem 1fr;
  align-items: center;
  gap: 0.35rem;
}

.requirement__icon {
  width: 1.55rem;
  height: 1.55rem;
  display: block;
  position: relative;
}

.quality-icon i {
  position: absolute;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 99px;
  background: #e3f2ef;
}

.quality-icon i:nth-child(1) { top: 0.35rem; transform: rotate(8deg); }
.quality-icon i:nth-child(2) { top: 0.75rem; transform: rotate(-5deg); }
.quality-icon i:nth-child(3) { top: 1.15rem; transform: rotate(3deg); }

.boxes-icon i {
  position: absolute;
  width: 0.7rem;
  height: 0.65rem;
  border: 2px solid var(--amber);
  background: #7b5e40;
}

.boxes-icon i:nth-child(1) { left: 0; bottom: 0; }
.boxes-icon i:nth-child(2) { right: 0; bottom: 0; }
.boxes-icon i:nth-child(3) { left: 0.43rem; top: 0; }

.clock-icon {
  border: 2px solid #f1e7c8;
  border-radius: 50%;
}

.clock-icon::before,
.clock-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.45rem;
  height: 2px;
  background: #f1e7c8;
  transform-origin: left center;
}

.clock-icon::before { transform: rotate(-90deg); }
.clock-icon::after { transform: rotate(20deg); }

.requirement__meter {
  height: 0.55rem;
  display: flex;
  gap: 0.13rem;
}

.requirement__meter i {
  flex: 1;
  border: 1px solid #799d9b;
  border-radius: 0.12rem;
  background: rgba(7, 30, 34, 0.45);
}

.requirement__meter i.is-on {
  border-color: var(--mint-strong);
  background: var(--meter-color, var(--mint));
}

.process-panel {
  padding: 0.75rem;
  border-radius: 0.9rem;
}

.process-route {
  display: flex;
  align-items: center;
  gap: 0.22rem;
}

.process-route span {
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border: 1px dashed #789c9b;
  border-radius: 0.38rem;
  color: #12383c;
  background: rgba(10, 37, 41, 0.52);
  font-size: 0.72rem;
  font-weight: 900;
}

.process-route span.is-filled {
  border-style: solid;
  border-color: var(--mint);
  background: var(--mint);
}

.process-route i {
  width: 0.7rem;
  height: 2px;
  background: #729997;
}

.process-grid {
  margin-top: 0.65rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.process-card {
  position: relative;
  min-width: 0;
  min-height: 8rem;
  padding: 0.6rem 0.3rem 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  border: 2px solid #557b7c;
  border-radius: 0.75rem;
  color: var(--ink);
  background: #173d43;
  cursor: pointer;
  touch-action: manipulation;
}

.process-card[aria-pressed="true"] {
  border-color: var(--mint-strong);
  background: #255e60;
  box-shadow: 0 0 0 0.2rem rgba(156, 240, 215, 0.14), inset 0 0 1.5rem rgba(156, 240, 215, 0.08);
  transform: translateY(-0.12rem);
}

.process-card strong {
  font-size: 0.75rem;
  line-height: 1.15;
}

.process-card__number {
  position: absolute;
  top: 0.28rem;
  left: 0.28rem;
  width: 1.25rem;
  height: 1.25rem;
  display: none;
  place-items: center;
  border-radius: 50%;
  color: #12383c;
  background: var(--mint-strong);
  font-size: 0.68rem;
  font-weight: 900;
}

.process-card[aria-pressed="true"] .process-card__number {
  display: grid;
}

.process-icon {
  position: relative;
  width: 3.2rem;
  height: 2.8rem;
  display: block;
}

.process-icon--fast i {
  position: absolute;
  left: 0.2rem;
  height: 0.25rem;
  border-radius: 99px;
  background: var(--amber);
}

.process-icon--fast i:nth-child(1) { top: 0.45rem; width: 2.6rem; }
.process-icon--fast i:nth-child(2) { top: 1.25rem; width: 2rem; }
.process-icon--fast i:nth-child(3) { top: 2rem; width: 1.35rem; }

.process-icon--precision::before {
  content: "";
  position: absolute;
  inset: 0.25rem 0.45rem;
  border: 2px solid var(--blue);
  border-radius: 0.45rem;
}

.process-icon--precision i {
  position: absolute;
  right: 0.75rem;
  left: 0.75rem;
  height: 2px;
  background: var(--blue);
}

.process-icon--precision i:nth-child(1) { top: 0.75rem; }
.process-icon--precision i:nth-child(2) { top: 1.4rem; }
.process-icon--precision i:nth-child(3) { top: 2.05rem; }

.process-icon--inspect i {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.95rem;
  height: 1.95rem;
  border: 0.28rem solid var(--mint);
  border-radius: 50%;
}

.process-icon--inspect b {
  position: absolute;
  top: 1.95rem;
  left: 2rem;
  width: 1.15rem;
  height: 0.3rem;
  border-radius: 99px;
  background: var(--mint);
  transform: rotate(45deg);
  transform-origin: left center;
}

.effect-pair {
  min-height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  color: var(--muted);
}

.effect-pair b {
  font-size: 0.72rem;
}

.effect {
  font-size: 1rem;
  font-style: normal;
}

.effect--boxes { color: var(--amber); }
.effect--surface { color: var(--blue); }
.effect--steady { color: var(--mint); }

.primary-button {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.7rem 1rem;
  border: 2px solid var(--mint-strong);
  border-radius: 0.75rem;
  color: #0b2f33;
  background: linear-gradient(180deg, #c8ffed, #85dfc8);
  box-shadow: 0 0.65rem 1rem rgba(0, 0, 0, 0.2);
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

.primary-button:disabled {
  border-color: #547474;
  color: #91aaa7;
  background: #27494c;
  box-shadow: none;
  cursor: default;
}

.selected-processes {
  margin-top: 0.2rem;
  display: flex;
  gap: 0.3rem;
}

.selected-processes span {
  padding: 0.22rem 0.45rem;
  border: 1px solid var(--mint);
  border-radius: 0.35rem;
  color: #153c3f;
  background: var(--mint);
  font-size: 0.68rem;
  font-weight: 900;
}

.compact-order {
  width: 2.8rem;
  height: 2.8rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--mint) 0 0.2rem, transparent 0.2rem 0.42rem);
}

.machine-chamber {
  position: relative;
  min-height: 29rem;
  flex: 1;
  overflow: hidden;
  border: 2px solid #618e8e;
  border-radius: 1rem;
  background:
    linear-gradient(rgba(222, 255, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 255, 247, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, #2c686c 0, #12363c 72%);
  background-size: 2.2rem 2.2rem, 2.2rem 2.2rem, auto;
  box-shadow: inset 0 0 3rem rgba(4, 23, 27, 0.5);
  touch-action: none;
  user-select: none;
}

.machine-chamber__top {
  position: absolute;
  z-index: 2;
  top: 0.65rem;
  left: 0.7rem;
  display: flex;
  gap: 0.35rem;
}

.machine-chamber__top span {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: #63888a;
}

.machine-chamber__top span:first-child {
  background: var(--mint);
  box-shadow: 0 0 0.65rem rgba(156, 240, 215, 0.72);
}

#machining-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.gesture-hint {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 3;
  width: 11rem;
  height: 4rem;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 180ms;
}

.gesture-hint i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--mint-strong);
  border-radius: 50%;
  background: rgba(156, 240, 215, 0.35);
  box-shadow: 0 0 0.75rem rgba(156, 240, 215, 0.65);
  animation: gesture-slide 1.75s ease-in-out infinite;
}

.gesture-hint span {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--mint-strong);
  font-size: 1.35rem;
}

.machine-chamber.has-input .gesture-hint {
  opacity: 0;
}

.coverage-strip {
  position: absolute;
  right: 1.2rem;
  bottom: 1.05rem;
  left: 1.2rem;
  height: 0.5rem;
  overflow: hidden;
  border: 1px solid #789b9b;
  border-radius: 99px;
  background: rgba(4, 24, 28, 0.56);
}

.coverage-strip span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, var(--mint) 0 0.7rem, #dffff5 0.7rem 0.82rem);
  transition: width 140ms;
}

.result-strip {
  padding: 0.6rem 0.7rem;
  border-radius: 0.8rem;
}

.result-signals {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.surface-signal {
  width: 4.2rem;
  height: 1rem;
}

.box-signal {
  width: 4.4rem;
  flex-wrap: wrap-reverse;
}

.box-signal i {
  width: 0.82rem;
  height: 0.72rem;
}

.world-scene {
  --pump-duration: 0.88s;
  --flow-opacity: 0.95;
  --flow-gap: 18;
  --wobble: 0.06rem;
  --wobble-negative: -0.06rem;
  --wobble-angle: 0.4deg;
  --wobble-angle-negative: -0.4deg;
  --drop-duration: 0.95s;
  position: relative;
  min-height: 31rem;
  flex: 1;
  overflow: hidden;
  border: 2px solid #72a9a8;
  border-radius: 1rem;
  background: linear-gradient(180deg, #528e93 0 57%, #476f54 57% 100%);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  isolation: isolate;
  touch-action: none;
  user-select: none;
  transition: background 900ms;
}

.sky-orbit {
  position: absolute;
  border: 2px solid rgba(231, 255, 249, 0.18);
  border-radius: 50%;
}

.sky-orbit--one { width: 13rem; height: 13rem; top: -6rem; left: -4rem; }
.sky-orbit--two { width: 8rem; height: 8rem; top: 8%; right: -4rem; }

.ground {
  position: absolute;
  inset: 57% 0 0;
  z-index: -1;
  border-top: 1px solid #86ad7c;
  background:
    repeating-linear-gradient(0deg, transparent 0 1.4rem, rgba(255, 255, 255, 0.05) 1.4rem 1.47rem),
    linear-gradient(90deg, #416e54, #5d845d);
}

.greenhouse {
  position: absolute;
  top: 7%;
  right: 4%;
  width: 49%;
  height: 38%;
}

.greenhouse__frame {
  position: absolute;
  inset: 12% 0 0;
  overflow: hidden;
  border: 3px solid #c3e8df;
  border-top: 0;
  background:
    repeating-linear-gradient(90deg, rgba(237, 255, 250, 0.13) 0 2.2rem, rgba(238, 255, 251, 0.27) 2.2rem 2.34rem),
    linear-gradient(180deg, rgba(166, 221, 211, 0.18), rgba(42, 91, 69, 0.52));
  clip-path: polygon(50% 0, 100% 27%, 100% 100%, 0 100%, 0 27%);
  transition: background 650ms, filter 650ms;
}

.greenhouse__roof {
  position: absolute;
  top: 13%;
  left: 3%;
  width: 95%;
  height: 3px;
  background: #c3e8df;
  transform: rotate(14.5deg);
  transform-origin: left center;
}

.greenhouse__roof::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: 3px;
  background: inherit;
  transform: rotate(-29deg);
  transform-origin: right center;
}

.greenhouse__post {
  position: absolute;
  top: 24%;
  bottom: 0;
  width: 2px;
  background: rgba(220, 250, 243, 0.7);
}

.greenhouse__post--left { left: 3%; }
.greenhouse__post--middle { left: 50%; }
.greenhouse__post--right { right: 3%; }

.sprinkler {
  position: absolute;
  top: 31%;
  right: 10%;
  left: 10%;
  height: 30%;
}

.sprinkler::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 99px;
  background: #537376;
}

.sprinkler i {
  position: absolute;
  top: 0.6rem;
  width: 0.48rem;
  height: 0.68rem;
  border: 2px solid var(--blue);
  border-radius: 60% 40% 65% 35%;
  opacity: 0;
  transform: rotate(45deg);
}

.sprinkler i:nth-child(1) { left: 18%; }
.sprinkler i:nth-child(2) { left: 49%; }
.sprinkler i:nth-child(3) { left: 79%; }

.plants {
  position: absolute;
  right: 7%;
  bottom: 4%;
  left: 7%;
  height: 36%;
  display: flex;
  align-items: end;
  justify-content: space-around;
}

.plant {
  position: relative;
  width: 1.3rem;
  height: 2.1rem;
  border-bottom: 0.3rem solid #75563f;
  transform: scaleY(0.45) rotate(6deg);
  transform-origin: center bottom;
  transition: transform 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.plant::before {
  content: "";
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  width: 0.16rem;
  height: 1.7rem;
  border-radius: 99px;
  background: #74b968;
}

.plant i,
.plant b {
  position: absolute;
  left: 50%;
  width: 0.75rem;
  height: 0.45rem;
  border: 2px solid #bded9f;
  border-radius: 90% 20% 85% 20%;
  background: #55a04e;
  transform-origin: left center;
}

.plant i { bottom: 0.7rem; transform: rotate(18deg); }
.plant b { bottom: 1.2rem; transform: rotate(160deg); }

.water-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.water-route__pipe,
.water-route__flow {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.water-route__pipe {
  stroke: #688a8c;
  stroke-width: 18;
}

.water-route__flow {
  stroke: var(--blue);
  stroke-width: 8;
  stroke-dasharray: 16 var(--flow-gap);
  stroke-dashoffset: 280;
  opacity: 0;
}

.pump {
  position: absolute;
  top: 49%;
  left: 4%;
  width: 40%;
  height: 28%;
}

.pump__housing {
  position: absolute;
  top: 4%;
  left: 8%;
  width: 62%;
  aspect-ratio: 1;
  border: 0.7rem solid #668487;
  border-radius: 50%;
  background: rgba(21, 53, 57, 0.82);
  box-shadow: inset 0 0 0 3px #c0d4d3, 0 0.55rem 1rem rgba(0, 0, 0, 0.22);
}

.pump__housing::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 2px dashed rgba(215, 241, 236, 0.45);
  border-radius: 50%;
}

.pump__impeller {
  position: absolute;
  top: 23%;
  left: 27%;
  width: 30%;
  aspect-ratio: 1;
  border: 3px solid #b8cece;
  border-radius: 50%;
}

.pump__impeller i {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 48%;
  height: 10%;
  border-radius: 99px;
  background: var(--metal-light);
  transform-origin: 0 50%;
}

.pump__impeller i:nth-child(1) { transform: rotate(0deg); }
.pump__impeller i:nth-child(2) { transform: rotate(90deg); }
.pump__impeller i:nth-child(3) { transform: rotate(180deg); }
.pump__impeller i:nth-child(4) { transform: rotate(270deg); }

.pump__outlet {
  position: absolute;
  top: 11%;
  left: 61%;
  width: 34%;
  height: 18%;
  border: 4px solid #668487;
  border-left: 0;
  border-radius: 0 99px 99px 0;
  background: #31585e;
}

.pump__base {
  position: absolute;
  right: 5%;
  bottom: 0;
  left: 5%;
  height: 15%;
  border: 3px solid #759393;
  border-radius: 0.4rem;
  background: #3b6162;
}

.shaft-slot {
  position: absolute;
  top: 24%;
  left: 31%;
  width: 58%;
  height: 20%;
  border: 3px dashed var(--mint);
  border-radius: 99px;
  background: repeating-linear-gradient(135deg, rgba(207, 255, 242, 0.2) 0 0.35rem, transparent 0.35rem 0.7rem);
  box-shadow: inset 0 0 0 0.2rem rgba(11, 42, 46, 0.45);
  animation: slot-pulse 1.7s ease-out infinite;
  transition: transform 150ms, box-shadow 150ms, background 150ms;
}

.world-scene.is-guiding .shaft-slot,
.world-scene.is-near .shaft-slot {
  border-color: #f2fff9;
  background-color: rgba(144, 245, 219, 0.3);
  box-shadow: inset 0 0 0 0.2rem rgba(11, 42, 46, 0.4), 0 0 1.2rem rgba(179, 255, 238, 0.82);
}

.world-scene.is-near .shaft-slot {
  transform: scale(1.1);
}

.part-stand {
  position: absolute;
  bottom: 4%;
  left: 5%;
  width: 38%;
  height: 16%;
}

.part-stand i {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 16%;
  border: 2px solid #b18962;
  border-radius: 0.3rem;
  background: #714f39;
}

.part-stand b {
  position: absolute;
  top: 14%;
  bottom: 0;
  width: 7%;
  background: #563927;
}

.part-stand b:nth-child(2) { left: 12%; }
.part-stand b:nth-child(3) { right: 12%; }

.world-shaft {
  position: absolute;
  bottom: 12%;
  left: 8%;
  z-index: 8;
  width: 31%;
  min-width: 7rem;
  height: 3rem;
  display: flex;
  align-items: center;
  cursor: grab;
  filter: drop-shadow(0 0.7rem 0.5rem rgba(0, 0, 0, 0.36));
  animation: shaft-invite 2.1s ease-in-out infinite;
  touch-action: none;
  transition: left 180ms ease-out, top 180ms ease-out, transform 120ms, filter 120ms;
}

.world-shaft::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
  z-index: -1;
  border: 2px solid rgba(219, 255, 243, 0.38);
  border-radius: 99px;
  background: radial-gradient(ellipse, rgba(176, 255, 236, 0.38), transparent 68%);
}

.world-shaft.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 1rem 0.7rem rgba(0, 0, 0, 0.42));
  animation: none;
  transform: translateY(-0.35rem) scale(1.04);
}

.world-shaft__body {
  position: absolute;
  right: 8%;
  left: 8%;
  height: 43%;
  overflow: hidden;
  border: 2px solid var(--metal-light);
  border-radius: 99px;
  background:
    repeating-linear-gradient(var(--surface-angle, 125deg), transparent 0 var(--surface-gap, 0.4rem), rgba(17, 47, 51, 0.62) var(--surface-gap, 0.4rem) calc(var(--surface-gap, 0.4rem) + var(--surface-stroke, 0.13rem))),
    linear-gradient(180deg, #f2fbfb, #8aa4a5 48%, #d9e7e7 55%, #587174);
  box-shadow: inset 0 0.18rem 0.16rem rgba(255, 255, 255, 0.45);
}

.world-shaft__end {
  position: absolute;
  width: 13%;
  height: 65%;
  border: 2px solid var(--metal-light);
  border-radius: 0.28rem;
  background: linear-gradient(180deg, #d8e7e6, #6c8788 50%, #bfd2d1);
}

.world-shaft__end--left { left: 0; }
.world-shaft__end--right { right: 0; }

.world-shaft__mark {
  position: absolute;
  top: 27%;
  left: 22%;
  width: 0.28rem;
  height: 46%;
  border-radius: 99px;
  background: var(--coral);
  box-shadow: 0 0 0.4rem rgba(238, 153, 120, 0.65);
}

.activity {
  position: absolute;
  right: 2%;
  bottom: 3%;
  width: 48%;
  height: 26%;
}

.worker {
  position: absolute;
  bottom: 7%;
  left: 4%;
  width: 3rem;
  height: 6.7rem;
  opacity: 0.68;
  transition: transform 1.25s ease-in-out, opacity 450ms;
}

.worker i {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid #effaf7;
  border-radius: 50%;
  background: #57746e;
  transform: translateX(-50%);
}

.worker i::after {
  content: "";
  position: absolute;
  top: -0.24rem;
  left: -0.22rem;
  width: 1.68rem;
  height: 0.5rem;
  border: 2px solid #ffe0a1;
  border-radius: 99px 99px 35% 35%;
  background: #ae813e;
}

.worker b {
  position: absolute;
  top: 1.4rem;
  left: 50%;
  width: 1.5rem;
  height: 2.65rem;
  border: 2px solid #e9f8f3;
  border-radius: 0.45rem;
  background: #41736a;
  transform: translateX(-50%);
}

.worker span {
  position: absolute;
  top: 3.85rem;
  width: 0.42rem;
  height: 2.55rem;
  border: 2px solid #e9f8f3;
  border-radius: 99px;
  background: #41736a;
  transform-origin: top;
}

.worker span:nth-of-type(1) { left: 0.75rem; transform: rotate(4deg); }
.worker span:nth-of-type(2) { right: 0.75rem; transform: rotate(-4deg); }

.crates {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 70%;
}

.crates i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  height: 27%;
  border: 2px solid #f1d190;
  border-radius: 0.16rem;
  background: repeating-linear-gradient(0deg, #876647 0 0.35rem, #b38b5a 0.35rem 0.43rem);
  opacity: 0;
  transform: translateY(0.4rem) scale(0.9);
  transition: opacity 420ms, transform 480ms;
}

.crates i:nth-child(2) { right: 48%; }
.crates i:nth-child(3) { right: 24%; bottom: 27%; }

.next-order {
  padding: 0.55rem;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid #78aaa6;
  border-radius: 0.8rem;
  background: rgba(22, 61, 65, 0.92);
  animation: next-in 420ms ease-out both;
}

.next-order__preview {
  justify-content: flex-start;
}

.next-order__preview .order-symbol {
  width: 3.4rem;
  height: 2rem;
  transform: scale(0.72);
  transform-origin: left center;
}

.next-order__preview div {
  display: flex;
  flex-direction: column;
  margin-left: -0.65rem;
}

.next-order__preview b {
  font-size: 0.82rem;
}

.next-order__preview span {
  color: var(--muted);
  font-size: 0.62rem;
}

.next-order .primary-button {
  min-height: 2.7rem;
  font-size: 0.82rem;
}

.safety-note {
  color: var(--muted);
  text-align: center;
  font-size: 0.58rem;
}

.world-scene.is-installed .world-shaft {
  width: 21.5%;
  min-width: 0;
  cursor: default;
  animation: shaft-running var(--pump-duration) linear infinite;
}

.world-scene.is-installed .world-shaft__body {
  animation: shaft-texture var(--pump-duration) linear infinite;
}

.world-scene.is-installed .shaft-slot {
  opacity: 0;
  animation: none;
}

.world-scene.is-pumping .pump__housing {
  animation: pump-wobble var(--pump-duration) ease-in-out infinite;
  box-shadow: inset 0 0 0 3px #ddf6f0, 0 0 1.2rem rgba(156, 240, 215, 0.35);
}

.world-scene.is-pumping .pump__impeller {
  animation: mechanical-spin var(--pump-duration) linear infinite;
}

.world-scene.is-flowing {
  background: linear-gradient(180deg, #68aeb3 0 57%, #568261 57% 100%);
}

.world-scene.is-flowing .water-route__flow {
  opacity: var(--flow-opacity);
  animation: water-flow 1.45s linear infinite;
}

.world-scene.is-watered .sprinkler i {
  animation: falling-water var(--drop-duration) ease-in infinite;
}

.world-scene.is-watered .sprinkler i:nth-child(2) { animation-delay: 0.2s; }
.world-scene.is-watered .sprinkler i:nth-child(3) { animation-delay: 0.42s; }

.world-scene.is-growing .greenhouse__frame {
  filter: saturate(1.22) brightness(1.12);
  background:
    repeating-linear-gradient(90deg, rgba(242, 255, 246, 0.22) 0 2.2rem, rgba(235, 255, 241, 0.38) 2.2rem 2.34rem),
    linear-gradient(180deg, rgba(166, 229, 177, 0.42), rgba(53, 126, 72, 0.6));
}

.world-scene.is-growing .plant {
  transform: scaleY(var(--growth, 1)) rotate(0);
}

.world-scene.is-harvest .crates i {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.world-scene.is-harvest .crates i:nth-child(2) { transition-delay: 0.2s; }
.world-scene.is-harvest .crates i:nth-child(3) { transition-delay: 0.4s; }

.world-scene.is-working .worker {
  opacity: 1;
  transform: translateX(2.5rem);
}

.world-scene.is-working .worker span:nth-of-type(1) { animation: leg-left 620ms ease-in-out 2; }
.world-scene.is-working .worker span:nth-of-type(2) { animation: leg-right 620ms ease-in-out 2; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(0.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gesture-slide {
  0%, 100% { left: 0; opacity: 0.4; }
  18%, 82% { opacity: 1; }
  50% { left: calc(100% - 1.25rem); }
}

@keyframes slot-pulse {
  0% { box-shadow: inset 0 0 0 0.2rem rgba(11, 42, 46, 0.45), 0 0 0 0 rgba(156, 240, 215, 0.42); }
  70% { box-shadow: inset 0 0 0 0.2rem rgba(11, 42, 46, 0.45), 0 0 0 0.7rem rgba(156, 240, 215, 0); }
  100% { box-shadow: inset 0 0 0 0.2rem rgba(11, 42, 46, 0.45), 0 0 0 0 rgba(156, 240, 215, 0); }
}

@keyframes shaft-invite {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.3rem); }
}

@keyframes shaft-running {
  0%, 100% { transform: translateY(var(--wobble-negative)); }
  50% { transform: translateY(var(--wobble)); }
}

@keyframes shaft-texture {
  to { background-position: var(--surface-gap, 0.4rem) 0, 0 0; }
}

@keyframes mechanical-spin {
  to { transform: rotate(360deg); }
}

@keyframes pump-wobble {
  0%, 100% { transform: translateY(var(--wobble-negative)) rotate(var(--wobble-angle-negative)); }
  50% { transform: translateY(var(--wobble)) rotate(var(--wobble-angle)); }
}

@keyframes water-flow {
  to { stroke-dashoffset: 0; }
}

@keyframes falling-water {
  0% { opacity: 0; transform: translateY(-0.3rem) rotate(45deg) scale(0.7); }
  28% { opacity: var(--flow-opacity); }
  100% { opacity: 0; transform: translateY(2rem) rotate(45deg) scale(1); }
}

@keyframes leg-left {
  50% { transform: rotate(-13deg); }
}

@keyframes leg-right {
  50% { transform: rotate(13deg); }
}

@keyframes next-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 44rem) {
  .app {
    width: min(100%, 58rem);
  }

  .screen--plan {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    grid-auto-rows: auto;
    align-content: start;
  }

  .previous-result {
    grid-column: 1 / -1;
  }

  .order-card,
  .process-panel {
    min-height: 19rem;
  }

  .screen--plan > .primary-button {
    grid-column: 1 / -1;
  }

  .machine-chamber,
  .world-scene {
    min-height: 34rem;
  }
}

@media (max-width: 25rem) {
  .app {
    padding-inline: max(0.58rem, env(safe-area-inset-left));
    gap: 0.55rem;
  }

  .process-card {
    min-height: 7.35rem;
  }

  .machine-chamber,
  .world-scene {
    min-height: 29rem;
  }
}

@media (max-height: 46rem) and (orientation: portrait) {
  .app-header h1 {
    font-size: 1.25rem;
  }

  .round-mark {
    width: 2.8rem;
    height: 2.8rem;
  }

  .process-card {
    min-height: 6.8rem;
  }

  .machine-chamber,
  .world-scene {
    min-height: 27rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen.is-active,
  .world-shaft,
  .shaft-slot,
  .gesture-hint i {
    animation-duration: 3s;
  }

  .world-scene.is-installed .world-shaft,
  .world-scene.is-installed .world-shaft__body,
  .world-scene.is-pumping .pump__housing,
  .world-scene.is-pumping .pump__impeller,
  .world-scene.is-flowing .water-route__flow,
  .world-scene.is-watered .sprinkler i {
    animation-duration: 1.8s;
  }
}