.product-demo {
  --pd-paper: #F7F8F5;
  --pd-ink: #1E1E1E;
  --pd-muted: #595C57;
  --pd-soft: #626660;
  --pd-line: #C9CEC1;
  --pd-map: #E8EBDD;
  --pd-map-dark: #D5DCC0;
  --pd-parcel: #A5B78D;
  --pd-parcel-deep: #91A97A;
  --pd-water: #95BBC1;
  --pd-water-edge: #C2D9DC;
  --pd-terra: #D26E29;
  --pd-terra-text: #9A4E18;
  --pd-terra-soft: #F3E3D6;
  --pd-on-terra: #1E1E1E;
  --pd-dark-muted: #C2C5BE;
  --pd-dark-line: #D8DAD4;
  --pd-mark: #8DD229;
  --pd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pd-size-body: 1rem;
  --pd-size-small: 0.8125rem;
  --pd-size-caption: 0.6875rem;
  --pd-weight-regular: 400;
  --pd-weight-medium: 500;
  --pd-weight-semibold: 600;
  --pd-radius-control: 10px;
  --pd-radius-mini: 6px;
  --pd-radius-panel: 18px;
  --pd-control-height: 56px;
  --pd-space-page: 20px;
  --pd-demo-width: 1090px;
  --pd-motion-short: 180ms;
  --pd-motion-long: 520ms;

  box-sizing: border-box;
  width: 100%;
  max-width: var(--pd-demo-width);
  margin: 0 auto;
  padding: 0;
  color: var(--pd-ink);
  background: var(--pd-paper);
  font-family: var(--pd-font);
  font-size: var(--pd-size-body);
  font-variant-numeric: tabular-nums;
}

.product-demo *,
.product-demo *::before,
.product-demo *::after { box-sizing: border-box; }

.product-demo a,
.product-demo button { font: inherit; }

.product-demo button:focus-visible,
.product-demo a:focus-visible { outline: 3px solid var(--pd-terra-text); outline-offset: 3px; }

.product-demo .pd-stage {
  position: relative;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-panel);
  background: var(--pd-map);
  isolation: isolate;
  perspective: 1200px;
}

.product-demo .pd-territory {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.product-demo .pd-map-label {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--pd-ink);
  font-size: var(--pd-size-small);
  font-weight: var(--pd-weight-semibold);
  text-shadow: 0 1px 0 rgb(247 248 245 / 85%);
}

.product-demo .pd-map-label--farm { top: 24px; left: 26px; }
.product-demo .pd-map-label--farm small { margin-left: 3px; color: var(--pd-terra-text); font-size: var(--pd-size-caption); letter-spacing: 0.1em; }
.product-demo .pd-label-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pd-terra); }
.product-demo .pd-map-label--stream { top: 40%; left: 7%; flex-direction: column; gap: 6px; align-items: flex-start; color: #365B62; font-size: var(--pd-size-caption); font-weight: var(--pd-weight-medium); }
.product-demo .pd-map-label--stream i { display: block; width: 64px; height: 1px; background: var(--pd-water); transform: rotate(-12deg); transform-origin: left; }
.product-demo .pd-map-label--parcel { top: 50%; right: 10%; gap: 8px; color: var(--pd-terra-text); }
.product-demo .pd-label-line { width: 30px; height: 1px; background: var(--pd-terra); }
.product-demo .pd-map-scale { position: absolute; bottom: 28px; left: 28px; display: flex; align-items: center; gap: 8px; color: var(--pd-muted); font-size: var(--pd-size-caption); font-weight: var(--pd-weight-medium); }
.product-demo .pd-map-scale span { width: 46px; height: 1px; background: var(--pd-muted); }

.product-demo .pd-device {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 63%;
  width: 306px;
  height: 540px;
  transform: translate(-50%, -50%) rotateY(-8deg) rotateZ(-2.2deg);
  transform-style: preserve-3d;
  filter: drop-shadow(28px 34px 26px rgb(31 41 32 / 28%));
}
.product-demo .pd-device-shell {
  position: absolute;
  inset: 0;
  padding: 7px;
  border: 1px solid #37443B;
  border-radius: 36px;
  background: #101512;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
}
.product-demo .pd-screen {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #37443B;
  border-radius: 29px;
  background: #151B18;
  color: #EFF4F0;
}
.product-demo .pd-statusbar {
  display: flex;
  height: 27px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px;
  color: #EFF4F0;
  font-size: 0.6875rem;
  font-weight: var(--pd-weight-semibold);
}
.product-demo .pd-status-icons { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.product-demo .pd-status-icons i { display: block; width: 3px; border-radius: 1px; background: #EFF4F0; }
.product-demo .pd-status-icons i:nth-child(1) { height: 4px; }
.product-demo .pd-status-icons i:nth-child(2) { height: 7px; }
.product-demo .pd-status-icons i:nth-child(3) { height: 10px; }
.product-demo .pd-status-icons b { width: 14px; height: 8px; margin-left: 4px; border: 1px solid #AFBEB3; border-radius: 2px; }
.product-demo .pd-appbar {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  border-top: 1px solid #202923;
  border-bottom: 1px solid #37443B;
  background: #151B18;
  color: #EFF4F0;
  font-size: 0.8125rem;
  font-weight: var(--pd-weight-medium);
}
.product-demo .pd-topbar-button { display: grid; width: 28px; height: 36px; flex: 0 0 28px; place-items: center; color: #EFF4F0; }
.product-demo .pd-topbar-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.product-demo .pd-kebab-icon svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.product-demo .pd-context { display: flex; min-width: 0; align-items: baseline; gap: 5px; overflow: hidden; color: #EFF4F0; font-size: 0.8125rem; font-weight: var(--pd-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.product-demo .pd-context strong { overflow: hidden; font-weight: var(--pd-weight-semibold); text-overflow: ellipsis; }
.product-demo .pd-context i { color: #AFBEB3; font-style: normal; }
.product-demo .pd-kebab-icon { margin-left: auto; }
.product-demo .pd-phone-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #303A32;
}
.product-demo .pd-phone-territory { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-demo .pd-map-chip {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 49px;
  padding: 6px 8px;
  border: 1px solid #37443B;
  border-radius: var(--pd-radius-mini);
  color: #EFF4F0;
  background: #222A25;
  font-size: 0.625rem;
  font-weight: var(--pd-weight-medium);
}
.product-demo .pd-rail { position: absolute; z-index: 2; top: 12px; display: grid; gap: 6px; }
.product-demo .pd-rail--left { left: 8px; }
.product-demo .pd-rail--right { right: 8px; }
.product-demo .pd-rail-item { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #37443B; border-radius: var(--pd-radius-control); background: #222A25; }
.product-demo .pd-rail-item svg { display: block; width: 19px; height: 19px; }
.product-demo .pd-rail--left .pd-rail-item:first-child { border-color: #78502F; background: #3B2D20; }
.product-demo .pd-scene-marker { position: absolute; z-index: 1; top: 48%; left: 68%; display: grid; width: 26px; height: 26px; place-items: center; border: 2px solid #F0A06A; border-radius: 50%; background: #222A25; box-shadow: 0 0 0 5px rgb(210 110 41 / 18%); }
.product-demo .pd-scene-marker[hidden],
.product-demo .pd-track-overlay[hidden],
.product-demo .pd-gps-chip[hidden],
.product-demo .pd-recording-banner[hidden] { display: none; }
.product-demo .pd-scene-marker i { width: 8px; height: 8px; border-radius: 50%; background: #D26E29; }
.product-demo .pd-track-overlay { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.product-demo .pd-track-line { fill: none; stroke: #D26E29; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.product-demo .pd-track-overlay circle { fill: #222A25; stroke: #D26E29; stroke-width: 3; }
.product-demo .pd-gps-chip,
.product-demo .pd-recording-banner { position: absolute; z-index: 3; bottom: 68px; display: flex; min-height: 34px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #37443B; border-radius: var(--pd-radius-control); background: #222A25; color: #EFF4F0; font-size: 0.625rem; font-weight: var(--pd-weight-medium); white-space: nowrap; }
.product-demo .pd-gps-chip { right: 8px; }
.product-demo .pd-gps-chip i,
.product-demo .pd-recording-banner i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #8DD229; }
.product-demo .pd-recording-banner { left: 8px; gap: 5px; }
.product-demo .pd-recording-banner strong { margin-left: 3px; color: #F0A06A; font-weight: var(--pd-weight-semibold); }
.product-demo .pd-scene-card {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 8px 13px 11px;
  border: 1px solid #37443B;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #222A25;
  box-shadow: 0 -7px 22px rgb(0 0 0 / 22%);
  color: #EFF4F0;
}
.product-demo .pd-scene-card[hidden] { display: none; }
.product-demo .pd-sheet-handle { display: block; width: 33px; height: 3px; margin: 0 auto 8px; border-radius: 2px; background: #526057; }
.product-demo .pd-point-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-demo .pd-point-heading > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.product-demo .pd-point-heading strong { overflow: hidden; color: #EFF4F0; font-size: 0.875rem; font-weight: var(--pd-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.product-demo .pd-point-heading small { color: #AFBEB3; font-size: 0.625rem; }
.product-demo .pd-point-collapse { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border: 1px solid #37443B; border-radius: var(--pd-radius-control); color: #AFBEB3; }
.product-demo .pd-point-collapse svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.product-demo .pd-point-header-actions { display: flex; gap: 4px; }
.product-demo .pd-point-context { margin: 8px 0 4px; color: #EFF4F0; font-size: 0.6875rem; font-weight: var(--pd-weight-medium); }
.product-demo .pd-point-meta { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid #37443B; color: #AFBEB3; font-size: 0.625rem; }
.product-demo .pd-point-meta strong { color: #EFF4F0; font-weight: var(--pd-weight-medium); text-align: right; }
.product-demo .pd-point-description { margin: 6px 0 8px; color: #AFBEB3; font-size: 0.6875rem; line-height: 1.35; }
.product-demo .pd-point-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.product-demo .pd-point-actions span { display: grid; min-height: 34px; place-items: center; border: 1px solid #46534A; border-radius: var(--pd-radius-control); color: #EFF4F0; font-size: 0.6875rem; font-weight: var(--pd-weight-medium); }
.product-demo .pd-point-actions .is-primary { border-color: #D26E29; background: #D26E29; color: #1E1E1E; }
.product-demo .pd-point-actions .is-danger { grid-column: 1 / -1; border-color: #994E4C; color: #F29B97; }
.product-demo .pd-tabbar {
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: grid;
  height: 56px;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 3px;
  border: 1px solid #37443B;
  border-radius: 30px;
  background: #222A25;
  color: #AFBEB3;
  text-align: center;
}
.product-demo .pd-tabbar[hidden] { display: none; }
.product-demo .pd-tab-item { display: grid; height: 48px; align-content: center; justify-items: center; gap: 1px; border-radius: 24px; font-size: 0.5rem; font-weight: var(--pd-weight-medium); }
.product-demo .pd-tab-item svg { width: 18px; height: 18px; }
.product-demo .pd-tab-item small { font-size: 0.5rem; line-height: 1.1; }
.product-demo .pd-tab-item.is-active { color: #F0A06A; background: #3B2D20; }
.product-demo .pd-device-shadow { position: absolute; z-index: -1; right: -24px; bottom: 4px; left: 6px; height: 17px; border-radius: 50%; background: rgb(30 30 30 / 25%); filter: blur(10px); transform: rotate(-2deg); }

.product-demo .pd-stage-coordinates {
  position: absolute;
  right: 26px;
  bottom: 27px;
  color: var(--pd-muted);
  font-size: var(--pd-size-caption);
  font-weight: var(--pd-weight-medium);
  letter-spacing: 0.06em;
}
.product-demo .pd-stage-caption {
  position: absolute;
  top: 50%;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 176px;
  color: var(--pd-muted);
  font-size: 0.5625rem;
  font-weight: var(--pd-weight-semibold);
  letter-spacing: 0.08em;
  line-height: 1.5;
  transform: translateY(100px);
}
.product-demo .pd-caption-rule { width: 22px; height: 1px; flex: 0 0 22px; background: var(--pd-terra); }

.product-demo .pd-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
  align-items: center;
  gap: 18px 32px;
  padding: 20px 2px 0;
}
.product-demo .pd-scene-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-demo .pd-scene-controls[hidden] { display: none; }
.product-demo .pd-scene-button {
  min-width: 88px;
  min-height: var(--pd-control-height);
  padding: 0 18px;
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius-control);
  color: var(--pd-ink);
  background: transparent;
  cursor: pointer;
  font-size: var(--pd-size-body);
  font-weight: var(--pd-weight-semibold);
  transition: border-color var(--pd-motion-short) ease, color var(--pd-motion-short) ease, background-color var(--pd-motion-short) ease;
}
.product-demo .pd-scene-button:hover { border-color: var(--pd-terra); }
.product-demo .pd-scene-button.is-active,
.product-demo .pd-scene-button[aria-pressed="true"] { border-color: var(--pd-terra); color: var(--pd-terra-text); background: var(--pd-terra-soft); }
.product-demo .pd-scene-description { min-height: 24px; margin: 0; color: var(--pd-muted); font-size: var(--pd-size-small); line-height: 1.5; }
.product-demo .pd-disclaimer { margin: 16px 2px 0; color: var(--pd-soft); font-size: var(--pd-size-caption); line-height: 1.5; }

.product-demo.pd-is-animating .pd-device { will-change: transform; }
.product-demo .pd-device,
.product-demo .pd-scene-card,
.product-demo .pd-scene-marker,
.product-demo .pd-track-line { transform-origin: center; }

@media (max-width: 760px) {
  .product-demo .pd-stage { min-height: 540px; border-radius: var(--pd-radius-panel); }
  .product-demo .pd-territory { width: 170%; max-width: none; left: -34%; }
  .product-demo .pd-device { top: 52%; left: 50%; width: min(264px, 72vw); height: 476px; transform: translate(-50%, -50%) rotateY(-5deg) rotateZ(-1.5deg); }
  .product-demo .pd-map-label--farm { top: 18px; left: 16px; font-size: 0.6875rem; }
  .product-demo .pd-map-label--stream { top: 24%; left: 14px; }
  .product-demo .pd-map-label--parcel { top: auto; right: 14px; bottom: 21%; font-size: 0.6875rem; }
  .product-demo .pd-map-label--stream,
  .product-demo .pd-map-label--parcel,
  .product-demo .pd-stage-caption { display: none; }
  .product-demo .pd-map-scale { bottom: 18px; left: 16px; }
  .product-demo .pd-stage-coordinates { right: 16px; bottom: 18px; font-size: 0.5625rem; }
  .product-demo .pd-stage-caption { top: auto; bottom: 64px; left: 16px; max-width: 125px; font-size: 0.5rem; transform: none; }
  .product-demo .pd-console { display: block; padding-top: 16px; }
  .product-demo .pd-scene-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .product-demo .pd-scene-button { min-width: 0; min-height: 52px; padding-inline: 8px; }
  .product-demo .pd-scene-description { margin-top: 12px; }
  .product-demo .pd-disclaimer { margin-top: 12px; }
}

@media (max-width: 360px) {
  .product-demo .pd-stage { min-height: 500px; }
  .product-demo .pd-device { top: 53%; width: min(248px, 76vw); height: 452px; }
  .product-demo .pd-device-shell { border-radius: 33px; }
  .product-demo .pd-screen { border-radius: 27px; }
  .product-demo .pd-scene-button { font-size: 0.875rem; }
  .product-demo .pd-stage-caption { max-width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-demo *,
  .product-demo *::before,
  .product-demo *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .product-demo.pd-is-animating .pd-device { will-change: auto; }
}