/* Notion-inspired, editable close for the AI Coding practice. */
#m6-builder-journey .slide-header { padding-top: 16px; padding-bottom: 13px; }
#m6-builder-journey .slide-module-tag { margin-bottom: 6px; }
#m6-builder-journey .slide-title { font-size: clamp(25px, 2.4vw, 32px); }
#m6-builder-journey .slide-subtitle { margin-top: 2px; color: #536675; }
#m6-builder-journey .slide-body { padding: 14px 28px 16px; }
.builder-journey-board {
  position: relative;
  height: clamp(390px, calc(100vh - 315px), 520px);
  overflow: hidden;
  border: 1px solid #d7e1e3;
  border-radius: 14px;
  background: #fbfcfb;
  color: #17324d;
  isolation: isolate;
}
.builder-journey-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: .78;
  pointer-events: none;
  z-index: -1;
}
.builder-journey-origin,
.builder-journey-destination {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 1px;
  max-width: 195px;
  padding: 9px 11px;
  border: 1px solid #cadbdd;
  border-radius: 9px;
  background: rgba(255,255,255,.94);
  line-height: 1.25;
}
.builder-journey-origin { left: 2%; bottom: 5%; }
.builder-journey-destination { right: 2%; bottom: 5%; border-color: #8fb4b6; }
.builder-journey-origin small,
.builder-journey-destination small { color: #2f6f73; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.builder-journey-origin strong,
.builder-journey-destination strong { font-size: 16px; font-weight: 800; }
.builder-journey-origin span,
.builder-journey-destination span { font-size: 11px; color: #526572; }
.builder-journey-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.builder-journey-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.builder-journey-route .route-soft { stroke: #e3eeee; stroke-width: 14; }
.builder-journey-route .route-main { stroke: #2f6f73; stroke-width: 3; stroke-dasharray: 1 0; }
.builder-journey-route .route-tip { stroke: #2f6f73; stroke-width: 3; }
.builder-journey-steps { position: absolute; inset: 0; list-style: none; z-index: 2; }
.builder-journey-steps li {
  position: absolute;
  display: grid;
  gap: 1px;
  width: 15%;
  min-width: 132px;
  padding: 8px 9px 9px;
  background: rgba(255,255,255,.96);
  border: 1px solid #cbdcde;
  border-radius: 9px;
  line-height: 1.22;
}
.builder-journey-steps i { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #dcebec; color: #2f6f73; font-size: 10px; font-style: normal; font-weight: 800; }
.builder-journey-steps b { color: #17324d; font-size: 14px; white-space: nowrap; }
.builder-journey-steps span { color: #526572; font-size: 10px; white-space: nowrap; }
.builder-journey-steps .step-one { left: 23%; top: 47%; }
.builder-journey-steps .step-two { left: 36%; top: 36%; }
.builder-journey-steps .step-three { left: 49%; top: 25%; }
.builder-journey-steps .step-four { left: 62%; top: 14%; }
.builder-journey-loop {
  position: absolute;
  left: 44%;
  bottom: 6%;
  z-index: 2;
  padding: 4px 10px;
  border: 1px solid #bed5d7;
  border-radius: 99px;
  background: rgba(255,255,255,.93);
  color: #2f6f73;
  font-size: 12px;
  font-weight: 700;
}
.builder-journey-caption { margin: 7px 2px 0; color: #506674; font-size: 12px; text-align: center; line-height: 1.35; }
@media (max-width: 760px) {
  #m6-builder-journey .slide-body { padding: 12px; }
  .builder-journey-board { height: 515px; }
  .builder-journey-art { opacity: .25; object-fit: contain; object-position: center bottom; }
  .builder-journey-route { display: none; }
  .builder-journey-origin { left: 5%; top: 4%; bottom: auto; }
  .builder-journey-destination { right: 5%; top: auto; bottom: 4%; }
  .builder-journey-steps { top: 118px; bottom: auto; left: 7%; right: 7%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 110px; gap: 10px; }
  .builder-journey-steps li { position: static; width: auto; min-width: 0; align-content: center; }
  .builder-journey-steps b, .builder-journey-steps span { white-space: normal; }
  .builder-journey-loop { left: 7%; bottom: 7%; }
}