/* Figma 99:579 and 99:476: proportional, editable design diagrams. */
.wf-breakdown__viewport,
.wf-spec__viewport {
  margin-top: clamp(24px, 2.1vw, 40px);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(137,81,255,.55) transparent;
  scrollbar-width: thin;
}
.wf-breakdown__board,
.wf-spec__board {
  position: relative;
  width: 100%;
  container-type: inline-size;
}
.wf-breakdown__board { aspect-ratio: 1832 / 834; }
.wf-spec__board { aspect-ratio: 1832 / 840; }
.wf-breakdown__placed,
.wf-spec__placed {
  position: absolute;
  left: calc(var(--x) / 1832 * 100%);
  width: calc(var(--w) / 1832 * 100%);
}
.wf-breakdown__placed { top: calc(var(--y) / 834 * 100%); height: calc(var(--h) / 834 * 100%); }
.wf-spec__placed { top: calc(var(--y) / 840 * 100%); height: calc(var(--h) / 840 * 100%); }
.wf-breakdown__phone-screen,
.wf-spec__phone-screen {
  position: absolute;
  left: 5.56%;
  top: 2.95%;
  width: 88.8%;
  height: 94.79%;
  overflow: hidden;
  border-radius: 6.65% / 3.07%;
  background: white;
}
.wf-breakdown__phone-screen img,
.wf-spec__phone-screen img,
.wf-breakdown__phone-frame,
.wf-spec__phone-frame {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.wf-breakdown__phone-frame,
.wf-spec__phone-frame { position: relative; pointer-events: none; }
.wf-breakdown__layer { display: flex; align-items: center; justify-content: center; }
.wf-breakdown__surface {
  position: relative;
  flex: none;
  width: var(--inner-w);
  height: var(--inner-h);
  transform: skewX(var(--skew)) scaleY(var(--scale-y));
}
.wf-breakdown__surface > img,
.wf-breakdown__crop > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.wf-breakdown__glass .wf-breakdown__surface {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 2.69cqw;
  background: linear-gradient(180deg,rgba(63,0,93,.2),rgba(202,85,184,.2) 44.712%,rgba(53,0,36,.2));
  box-shadow: inset 0 -.207cqw .207cqw rgba(255,255,255,.26);
}
.wf-breakdown__crop { position: absolute; inset: 0; overflow: hidden; border-radius: 2.69cqw; }
.wf-breakdown__crop > img { position: absolute; top: -22.01%; height: 122.01%; }
.wf-breakdown__highlight .wf-breakdown__surface {
  border: max(1px,.109cqw) solid white;
  border-radius: 1.583cqw;
  box-shadow: inset -.218cqw -.273cqw 0 .055cqw rgba(255,255,255,.21);
  backdrop-filter: blur(.65cqw);
}
.wf-breakdown__highlight img { border-radius: inherit; }
.wf-breakdown__follow-layer { transform: translate3d(var(--follow-x, 0px), var(--follow-y, 0px), 0); transition: transform .25s ease-out; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .wf-breakdown__follow-layer { transform: none; transition: none; } }
.wf-breakdown__button-glass .wf-breakdown__surface { background: linear-gradient(180deg,rgba(255,231,255,.3),rgba(255,159,159,.3)); }
.wf-breakdown__navigation img { border-radius: 1.092cqw; }
.wf-breakdown__buttons .wf-breakdown__surface { filter: drop-shadow(0 .218cqw .218cqw rgba(255,255,255,.25)); }
.wf-breakdown__callout h3 {
  display: flex;
  align-items: center;
  gap: .382cqw;
  margin: 0 0 .109cqw;
  color: white;
  font-size: 1.528cqw;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}
.wf-breakdown__callout p {
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 1.092cqw;
  font-weight: 400;
  line-height: 1.4;
}
.wf-breakdown__star { position: relative; display: block; width: 1.029cqw; height: .9965cqw; flex: none; transform-origin: center; animation: wf-breakdown-star-spin 8s linear infinite; }
@keyframes wf-breakdown-star-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wf-breakdown__star { animation: none; } }
.wf-breakdown__star img,
.wf-breakdown__connector img,
.wf-spec__measure img,
.wf-spec__measure-vertical-fit img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  transform-origin: top left;
}
.wf-spec__panel {
  border: 1px solid rgba(196,206,255,.5);
  border-radius: .71cqw;
  background: linear-gradient(157.916deg,rgba(1,0,63,.37) 8.09%,rgba(0,85,165,.207) 90.64%);
  box-shadow: inset 0 .218cqw .218cqw rgba(20,149,255,.11);
}
.wf-spec__panel-title strong {
  display: block;
  color: white;
  font: italic 800 1.965cqw/1.4 Arial,sans-serif;
}
.wf-spec__panel-heading h3 {
  margin: 0;
  color: white;
  font-size: 1.528cqw;
  font-weight: 600;
  line-height: 1.4;
}
.wf-spec__draft-note p {
  margin: 0;
  color: rgba(255,255,255,.35);
  font-size: 1.092cqw;
  line-height: 1.4;
}
.wf-spec__example-label p,
.wf-spec__dimension p {
  margin: 0;
  color: white;
  font-size: 1.092cqw;
  line-height: 1.4;
}
.wf-spec__dimension p { font-size: 1.059cqw; }
.wf-spec__image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wf-spec__pattern { overflow: hidden; mix-blend-mode: screen; }
.wf-spec__pattern > img { position: absolute; width: 100.14%; height: 135.52%; left: -.07%; top: -17.76%; }
.wf-spec__measure-vertical-fit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 8.109cqw;
  height: .487cqw;
  transform: rotate(-90deg);
  transform-origin: left bottom;
}
.wf-spec__ratio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .382cqw;
  border: 1px solid rgba(196,206,255,.5);
  border-radius: .71cqw .71cqw .71cqw .437cqw;
  background: linear-gradient(180.514deg,rgba(3,0,196,.22) 18.062%,rgba(0,132,255,.123) 99.892%);
}
.wf-spec__ratio p {
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 1.092cqw;
  line-height: 1.4;
  text-align: center;
}
.wf-spec__card { overflow: hidden; }
@media (max-width: 800px) {
  .wf-breakdown__board,
  .wf-spec__board { min-width: 960px; }
  .wf-breakdown__viewport,
  .wf-spec__viewport { padding-bottom: 12px; }
}