.foundation {
  --foundation-ink: #20231f;
  --foundation-paper: #f3f1e8;
  --foundation-accent: #d8ef70;
  --foundation-muted: #a7aca1;
  width: 100%;
  color: var(--foundation-paper);
  container-name: foundation;
  container-type: inline-size;
}

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

.foundation__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.85fr);
  align-items: center;
  gap: clamp(30px, 5cqw, 84px);
}

.foundation__diagram {
  min-width: 0;
}

.foundation__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.35;
  isolation: isolate;
}

.foundation__datum {
  position: absolute;
  inset: 2% 16% 5% 16%;
  border-left: 1px dashed #a7aca14a;
  border-right: 1px dashed #a7aca14a;
  transform: skewX(-20.5deg);
  pointer-events: none;
}

.foundation__datum::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -13%;
  right: -13%;
  border-bottom: 1px solid #a7aca133;
}

.foundation__layer {
  --layer-offset: 0px;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  display: block;
  width: 88%;
  aspect-ratio: 600 / 186;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foundation-paper);
  font: inherit;
  font-size: clamp(17px, 2.5cqw, 26px);
  text-align: left;
  cursor: pointer;
  transform: translate3d(0, var(--layer-offset), 0);
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1), color 240ms ease;
  touch-action: manipulation;
}

.foundation__layer--improve {
  top: 6%;
  left: 10%;
  z-index: 3;
}

.foundation__layer--build {
  top: 32%;
  left: 6%;
  z-index: 2;
}

.foundation__layer--understand {
  top: 58%;
  left: 2%;
  z-index: 1;
}

.foundation__plate {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 10px #00000016);
}

.foundation__face {
  fill: #30352d;
  stroke: #7d8771;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 240ms ease, stroke 240ms ease;
}

.foundation__edge {
  fill: #262b22;
  stroke: #7d8771;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 240ms ease, stroke 240ms ease;
}

.foundation__detail {
  stroke: #a7aca1;
  stroke-width: 0.6;
  opacity: 0.13;
  pointer-events: none;
}

.foundation__label {
  position: absolute;
  left: 13%;
  top: 44%;
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 2cqw, 25px);
  line-height: 1;
  transform: translateY(-50%);
  letter-spacing: -0.025em;
  pointer-events: none;
}

.foundation__number {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.48em;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.foundation__indicator {
  position: absolute;
  right: 15%;
  top: 44%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  transition: transform 300ms ease;
  pointer-events: none;
}

.foundation__indicator svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.foundation__indicator circle {
  fill: currentColor;
  opacity: 0;
}

.foundation__layer[aria-pressed="true"] {
  --layer-offset: -9px;
  z-index: 4;
  color: var(--foundation-ink);
}

.foundation__layer[aria-pressed="true"] .foundation__face {
  fill: var(--foundation-accent);
  stroke: var(--foundation-accent);
}

.foundation__layer[aria-pressed="true"] .foundation__edge {
  fill: #a8bb56;
  stroke: #a8bb56;
}

.foundation__layer[aria-pressed="true"] .foundation__detail {
  stroke: var(--foundation-ink);
  opacity: 0.09;
}

.foundation__layer[aria-pressed="true"] .foundation__indicator {
  transform: translateY(-50%) scale(0.7);
}

.foundation__layer[aria-pressed="true"] .foundation__indicator path {
  opacity: 0;
}

.foundation__layer[aria-pressed="true"] .foundation__indicator circle {
  opacity: 1;
}

.foundation__layer:focus-visible {
  outline: 2px solid var(--foundation-paper);
  outline-offset: 7px;
}

.foundation__hint {
  margin: 10px 0 0 2%;
  color: var(--foundation-muted);
  font-size: 12px;
  line-height: 1.5;
}

.foundation:not([data-active]) .foundation__hint {
  visibility: hidden;
}

.foundation__layer:disabled {
  cursor: default;
}

.foundation__description {
  padding-block: 20px;
  min-width: 0;
}

.foundation__count {
  display: block;
  margin: 0 0 24px;
  color: var(--foundation-accent);
  font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.08em;
}

.foundation__title {
  max-width: 12ch;
  margin: 0 0 18px;
  color: var(--foundation-paper);
  font: inherit;
  font-size: clamp(28px, 3.5cqw, 44px);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.foundation__copy {
  max-width: 30ch;
  margin: 0;
  color: var(--foundation-muted);
  font-size: 16px;
  line-height: 1.55;
}

@media (hover: hover) {
  .foundation__layer:not(:disabled):not([aria-pressed="true"]):hover {
    --layer-offset: -5px;
  }

  .foundation__layer:not(:disabled):not([aria-pressed="true"]):hover .foundation__face {
    fill: #40483a;
    stroke: #bdc5b3;
  }
}

@container foundation (max-width: 680px) {
  .foundation__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .foundation__diagram {
    max-width: 540px;
    width: 100%;
    margin-inline: auto;
  }

  .foundation__stage {
    aspect-ratio: 1.5;
  }

  .foundation__layer {
    font-size: clamp(17px, 4.6cqw, 25px);
  }

  .foundation__description {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: start;
    align-content: start;
    column-gap: 12px;
    padding: 24px 0 0;
    border-top: 1px solid #a7aca13d;
    min-height: 200px;
  }

  .foundation__count {
    grid-column: 1;
    margin-top: 7px;
  }

  .foundation__title,
  .foundation__copy {
    grid-column: 2;
  }

  .foundation__title {
    font-size: clamp(28px, 6.2cqw, 36px);
    max-width: 16ch;
    margin-bottom: 14px;
  }

  .foundation__copy {
    font-size: 15px;
    max-width: 35ch;
  }
}

.paused .foundation__layer,
.paused .foundation__layer[aria-pressed="true"],
.paused .foundation__layer:not(:disabled):not([aria-pressed="true"]):hover {
  --layer-offset: 0px;
}

@media (prefers-reduced-motion: reduce) {
  .foundation__layer,
  .foundation__face,
  .foundation__edge,
  .foundation__indicator {
    transition: none;
  }

  .foundation__layer,
  .foundation__layer[aria-pressed="true"],
  .foundation__layer:not(:disabled):not([aria-pressed="true"]):hover {
    --layer-offset: 0px;
  }
}