.fs-moat {
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 9vw, 128px) 0 clamp(92px, 10vw, 144px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 52% 50%, rgba(244, 86, 107, 0.1), transparent 36%),
    linear-gradient(180deg, #0a0f0e 0%, #0d100f 48%, #0a0f0e 100%);
  scroll-margin-top: 92px;
}

.fs-moat-wrap {
  position: relative;
  width: min(1180px, calc(100% - clamp(40px, 8vw, 88px)));
  margin: 0 auto;
}

.fs-moat-intro {
  max-width: 1100px;
  margin-bottom: clamp(38px, 5vw, 58px);
}

.fs-moat-intro h2 {
  max-width: 1100px;
  margin: 0;
  color: #f8f1e7;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.55vw, 4rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.fs-moat-intro h2 span { color: #f4566b; }

.fs-moat-intro p {
  max-width: 67ch;
  margin: 22px 0 0;
  color: #c1b8ad;
  font-size: clamp(1rem, 1.45vw, 1.13rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.fs-moat-system {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(248, 241, 231, 0.14);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.fs-moat-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(150px, 0.92fr) minmax(170px, 1.05fr) minmax(132px, 0.74fr) minmax(176px, 1.08fr) minmax(188px, 1.18fr);
  gap: clamp(12px, 1.8vw, 22px);
  align-items: center;
  min-height: 516px;
}

.fs-moat-column {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.fs-moat-label {
  min-height: 34px;
  margin-bottom: 12px;
  color: #f4566b;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
}

.fs-moat-label small {
  display: block;
  margin-top: 4px;
  color: #9a938a;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.fs-moat-source,
.fs-moat-node,
.fs-moat-result,
.fs-moat-page,
.fs-moat-memory {
  border: 1px solid rgba(248, 241, 231, 0.14);
  background: rgba(9, 14, 13, 0.84);
}

.fs-moat-source {
  overflow: hidden;
  border-radius: 10px;
}

.fs-moat-source-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #141918;
}

.fs-moat-source-media img,
.fs-moat-page-product img,
.fs-moat-node-thumb img,
.fs-moat-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fs-moat-source-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 12, 11, 0.02), rgba(7, 12, 11, 0.38));
}

.fs-moat-source-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f8f1e7;
  transform: translate(-50%, -50%);
}

.fs-moat-source-play::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 15px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #0a0f0e;
}

.fs-moat-source-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: #8f8880;
  font-family: var(--font-mono);
  font-size: 0.53rem;
}

.fs-moat-source-meta > :last-child {
  min-width: 0;
  overflow: hidden;
  color: #b8b0a6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-moat-source-meta a:hover { color: #f8f1e7; }

.fs-moat-source-meta a:focus-visible {
  outline: 2px solid #f4566b;
  outline-offset: 2px;
}

.fs-moat-stack {
  display: grid;
  gap: 9px;
}

.fs-moat-node,
.fs-moat-result {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 64px;
  padding: 9px 10px;
  border-radius: 9px;
  transition: border-color 420ms var(--ease), background 420ms var(--ease), opacity 420ms var(--ease), transform 520ms var(--ease);
}

.fs-moat-node-icon,
.fs-moat-result-icon,
.fs-moat-node-thumb,
.fs-moat-result-thumb {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(248, 241, 231, 0.13);
  border-radius: 7px;
  color: #f8f1e7;
}

.fs-moat-node-icon svg,
.fs-moat-result-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.fs-moat-node strong,
.fs-moat-result strong {
  display: block;
  overflow: hidden;
  color: #f8f1e7;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-moat-node small,
.fs-moat-result small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #908980;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-moat-prior-strip {
  display: flex;
  margin-top: 3px;
}

.fs-moat-prior-strip img {
  width: 22px;
  height: 22px;
  margin-right: -5px;
  border: 2px solid #0b100f;
  border-radius: 5px;
  object-fit: cover;
}

.fs-moat-core {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 0.86;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(248, 241, 231, 0.16);
  border-radius: 12px;
  background: #0b100f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.fs-moat-core::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 86, 107, 0.22), rgba(244, 86, 107, 0.05) 38%, transparent 70%);
  pointer-events: none;
}

.fs-moat-core::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, #0b100f 0%, rgba(11, 16, 15, 0.98) 34%, rgba(11, 16, 15, 0.72) 50%, transparent 70%);
  pointer-events: none;
}

.fs-moat-rive {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.26;
  filter: grayscale(1) contrast(1.4) brightness(1.08);
  mix-blend-mode: luminosity;
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.72) 25%, transparent 58%);
  pointer-events: none;
  transition: opacity 500ms var(--ease), transform 700ms var(--ease);
  transform: scale(1.12);
  transform-origin: 50% 100%;
}

.fs-moat-core-mark {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(54px, 5vw, 72px);
  height: clamp(54px, 5vw, 72px);
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #f4566b, #c42a43);
  box-shadow: 0 8px 8px -6px rgba(244, 86, 107, 0.48);
}

.fs-moat-core-mark::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid white;
}

.fs-moat-core-mark::after {
  content: "";
  position: absolute;
  bottom: 12px;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

.fs-moat-core-status {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  left: 10px;
  color: #8f8880;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  text-align: center;
}

.fs-moat-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: #2f8c47;
  color: white;
  font-size: 0.58rem;
  font-weight: 800;
  opacity: 0.35;
  transform: scale(0.8);
  transition: opacity 300ms var(--ease), transform 400ms var(--ease);
}

.fs-moat-output {
  display: grid;
  gap: 10px;
}

.fs-moat-page {
  overflow: hidden;
  border-radius: 9px;
  transition: border-color 420ms var(--ease), opacity 420ms var(--ease), transform 520ms var(--ease);
}

.fs-moat-page-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  color: #8a837b;
  font-family: var(--font-mono);
  font-size: 0.5rem;
}

.fs-moat-page-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f8c47;
}

.fs-moat-page-bar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-moat-page-body {
  display: grid;
  min-height: clamp(148px, 14vw, 196px);
  align-content: center;
  padding: 12px;
  background: #f7f3eb;
  color: #14110d;
}

.fs-moat-page-product {
  display: grid;
  grid-template-columns: 1fr 68px;
  gap: 8px;
  align-items: center;
}

.fs-moat-page-product h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}

.fs-moat-page-product p {
  margin: 4px 0 0;
  color: #5e574f;
  font-size: 0.53rem;
  line-height: 1.35;
}

.fs-moat-page-lines {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.fs-moat-page-lines i {
  display: block;
  width: 88%;
  height: 4px;
  border-radius: 999px;
  background: #ded8ce;
}

.fs-moat-page-lines i:last-child { width: 58%; }

.fs-moat-memory {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 18px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: min(340px, 42%);
  padding: 9px 12px;
  border-radius: 9px;
  transform: translateX(-50%);
  transition: border-color 420ms var(--ease), background 420ms var(--ease), transform 520ms var(--ease);
}

.fs-moat-memory {
  background-image: linear-gradient(
    90deg,
    rgba(244, 86, 107, 0.14) 0,
    rgba(244, 86, 107, 0.14) var(--memory-edge-fill, 0%),
    transparent var(--memory-edge-fill, 0%),
    transparent calc(100% - var(--memory-edge-fill, 0%)),
    rgba(244, 86, 107, 0.14) calc(100% - var(--memory-edge-fill, 0%)),
    rgba(244, 86, 107, 0.14) 100%
  );
}

.fs-moat-memory-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: rgba(244, 86, 107, 0.1);
  color: #f4566b;
  transition: background-color 320ms var(--ease), box-shadow 420ms var(--ease), filter 420ms var(--ease);
}

.fs-moat-memory.is-flow-reached .fs-moat-memory-icon {
  background: rgba(244, 86, 107, 0.22);
  box-shadow: 0 0 18px rgba(244, 86, 107, 0.38);
  filter: brightness(1.18);
}

.fs-moat-memory-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.fs-moat-memory strong {
  display: block;
  color: #f8f1e7;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.fs-moat-memory small {
  display: block;
  margin-top: 3px;
  color: #8f8880;
  font-size: 0.6rem;
}

.fs-moat-wires {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fs-moat-wire {
  fill: none;
  stroke: rgba(248, 241, 231, 0.24);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fs-moat-wire.is-flow {
  stroke: rgba(248, 241, 231, 0.34);
  stroke-width: 1.35;
}

.fs-moat-wire.is-flow-signal {
  stroke: #f4566b;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 3px rgba(244, 86, 107, 0.72));
  opacity: 1;
}

.fs-moat-wire.is-memory {
  stroke: rgba(244, 86, 107, 0.62);
  stroke-dasharray: 0.025 0.025;
  stroke-dashoffset: 1;
  opacity: 0;
}

.fs-moat-closing {
  margin: 26px 0 0;
  color: #f8f1e7;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-align: center;
}

.fs-moat-closing span { color: #f4566b; }

.fs-moat-source,
.fs-moat-node,
.fs-moat-core,
.fs-moat-result,
.fs-moat-page,
.fs-moat-memory { opacity: 0.64; }

.fs-moat-system[data-phase="2"] .fs-moat-rive,
.fs-moat-system[data-phase="3"] .fs-moat-rive,
.fs-moat-system[data-phase="4"] .fs-moat-rive,
.fs-moat-system[data-phase="5"] .fs-moat-rive {
  opacity: 0.52;
  transform: scale(1.16);
}

.fs-moat-result.is-flow-active .fs-moat-check,
.fs-moat-result.is-flow-reached .fs-moat-check {
  opacity: 1;
  transform: scale(1);
}

.fs-moat-source,
.fs-moat-core {
  transition: border-color 420ms var(--ease), background 420ms var(--ease), box-shadow 420ms var(--ease), opacity 420ms var(--ease);
}

.fs-moat-source,
.fs-moat-node,
.fs-moat-core,
.fs-moat-result,
.fs-moat-page,
.fs-moat-memory {
  background-image: linear-gradient(
    90deg,
    rgba(244, 86, 107, 0.13) 0,
    rgba(244, 86, 107, 0.13) var(--flow-fill, 0%),
    transparent var(--flow-fill, 0%),
    transparent 100%
  );
  background-repeat: no-repeat;
}

.fs-moat-page-body {
  background-color: #f7f3eb;
  background-image: linear-gradient(
    90deg,
    rgba(244, 86, 107, 0.12) 0,
    rgba(244, 86, 107, 0.12) var(--flow-fill, 0%),
    transparent var(--flow-fill, 0%),
    transparent 100%
  );
  background-repeat: no-repeat;
}

.fs-moat-source.is-flow-active,
.fs-moat-node.is-flow-active,
.fs-moat-core.is-flow-active,
.fs-moat-result.is-flow-active,
.fs-moat-page.is-flow-active,
.fs-moat-memory.is-flow-active {
  opacity: 1;
  border-color: rgba(244, 86, 107, 0.62);
  box-shadow: inset 0 0 0 1px rgba(244, 86, 107, 0.08);
}

.fs-moat-source.is-flow-reached,
.fs-moat-node.is-flow-reached,
.fs-moat-core.is-flow-reached,
.fs-moat-result.is-flow-reached,
.fs-moat-page.is-flow-reached {
  opacity: 0.88;
  border-color: rgba(248, 241, 231, 0.24);
  box-shadow: none;
}

@media (max-width: 980px) {
  .fs-moat-system { min-height: auto; padding: 18px; }
  .fs-moat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }
  .fs-moat-column { height: auto; }
  .fs-moat-column.is-core { grid-column: 1 / -1; grid-row: 2; }
  .fs-moat-core { width: min(220px, 48vw); aspect-ratio: 1.35; margin: 10px auto 18px; }
  .fs-moat-column.is-confirmed,
  .fs-moat-column.is-output { margin-bottom: 78px; }
  .fs-moat-memory { width: min(360px, calc(100% - 36px)); }
}

@media (max-width: 640px) {
  .fs-moat { padding: 70px 0 88px; }
  .fs-moat-wrap { width: min(100% - 32px, 1180px); }
  .fs-moat-intro h2 { max-width: none; font-size: clamp(2.35rem, 12vw, 3.6rem); }
  .fs-moat-intro p { font-size: 1rem; }
  .fs-moat-system { padding: 16px; }
  .fs-moat-grid { display: flex; flex-direction: column; gap: 24px; }
  .fs-moat-column { width: 100%; }
  .fs-moat-column.is-core { align-items: center; }
  .fs-moat-column.is-core .fs-moat-label { align-self: stretch; }
  .fs-moat-column.is-confirmed,
  .fs-moat-column.is-output { margin-bottom: 0; }
  .fs-moat-label { min-height: 0; margin-bottom: 10px; }
  .fs-moat-core { width: min(210px, 68vw); max-width: none; aspect-ratio: 1; margin: 0 auto; }
  .fs-moat-wire.is-flow { stroke: rgba(244, 86, 107, 0.5); stroke-width: 1.5; }
  .fs-moat-wire.is-flow-signal { stroke-width: 2.2; }
  .fs-moat-memory { position: relative; bottom: auto; left: auto; width: 100%; margin-top: 24px; transform: none; }
  .fs-moat-closing { margin-top: 22px; }
}

@media (max-width: 640px) {
  .fs-moat-source,
  .fs-moat-node,
  .fs-moat-core,
  .fs-moat-result,
  .fs-moat-page,
  .fs-moat-memory:not(.is-flow-active):not(.is-flow-reached) {
    background-image: linear-gradient(
      180deg,
      rgba(244, 86, 107, 0.13) 0,
      rgba(244, 86, 107, 0.13) var(--flow-fill, 0%),
      transparent var(--flow-fill, 0%),
      transparent 100%
    );
  }

  .fs-moat-page-body {
    background-image: linear-gradient(
      180deg,
      rgba(244, 86, 107, 0.12) 0,
      rgba(244, 86, 107, 0.12) var(--flow-fill, 0%),
      transparent var(--flow-fill, 0%),
      transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-moat-node,
  .fs-moat-result,
  .fs-moat-page,
  .fs-moat-memory,
  .fs-moat-rive,
  .fs-moat-check { transition: none !important; }
  .fs-moat-rive { display: none; }
  .fs-moat-wire.is-flow-signal { display: none; }
  .fs-moat-wire { animation: none !important; }
  .fs-moat-wire.is-memory {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}