.dv-canvas {
  position: absolute;
  z-index: 5;
  left: 24px;
  top: 112px;
  width: 700px;
  height: 860px;
  pointer-events: none;
}

.dv-layer {
  position: absolute;
  inset: 0;
}

.dv-frame {
  position: absolute;
  pointer-events: auto;
  cursor: default;
  touch-action: pan-y;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  background: rgb(17, 18, 24);
  animation: dvFrameIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.2s + var(--in, 0s));
  transition: border-color 0.15s ease;
}

.dv-frame__body {
  position: absolute;
  inset: 14px;
  overflow: hidden;
  container-type: inline-size;
}

.dv-frame:hover:not(.is-selected) { border-color: rgba(57, 255, 136, 0.55); }
.dv-frame:hover .dv-frame__label,
.dv-frame.is-selected .dv-frame__label { color: var(--color-green); }
.dv-frame.is-selected { touch-action: none; }
.dv-canvas.is-live .dv-frame.is-selected { z-index: 2; }
.dv-frame.is-moving { cursor: move; }

.dv-frame__label {
  position: absolute;
  transition: color 0.15s ease;
  left: 0;
  bottom: calc(100% + 7px);
  font-size: 12px;
  line-height: 1;
  color: var(--color-muted);
  white-space: nowrap;
}

.dv-frame--style   { left: 0;    top: 0;   width: 236px; height: 132px; }
.dv-frame--desktop { left: 24px; top: 176px; width: 500px; height: 330px; }
.dv-frame--mobile  { left: 496px; top: 392px; width: 160px; height: 336px; }
.dv-frame--parts   { left: 0;    top: 580px; width: 300px; height: 172px; }
.dv-frame--mobile .dv-frame__label { left: auto; right: 0; }

.dv-sk {
  display: block;
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.dv-sk--title { height: 14px; width: 86%; background: rgba(255, 255, 255, 0.5); }
.dv-sk--short { width: 58%; }

.dv-img {
  display: block;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}

.dv-logo {
  display: block;
  width: 18px;
  height: 14px;
  border-radius: 3px;
  background: var(--color-paper);
}

.dv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-paper);
}

.dv-btn--accent { border-color: var(--dv-accent, var(--color-green)); transition: border-color 0.3s ease; }
.dv-click { cursor: pointer; }
.dv-btn--sm { justify-self: start; padding: 6px 12px; font-size: 10px; margin-top: 4px; }
.dv-btn--block { width: 100%; }

.dv-swatches { display: flex; gap: 8px; margin-bottom: 14px; }
.dv-swatches i { width: 34px; height: 34px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.16); }
.dv-swatches i[data-accent] { cursor: pointer; }
.dv-swatches i.is-active { box-shadow: 0 0 0 2px #111218, 0 0 0 3px var(--color-paper); }
.dv-type { display: flex; align-items: baseline; gap: 10px; }
.dv-type b { font-size: 34px; line-height: 1; letter-spacing: -0.02em; }
.dv-type span { font-size: 12px; color: var(--color-muted); }

.dv-parts { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; justify-items: start; }
.dv-field { grid-column: 1 / -1; width: 100%; padding: 11px 10px; border-radius: 4px; background: #1A1A1A; }
.dv-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; width: 60%; }
.dv-check i { flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--dv-accent, var(--color-green)); transition: background-color 0.3s ease; }
.dv-check .dv-sk { flex: 1; }

.dv-site { display: grid; gap: 16px; height: 100%; align-content: start; }
.dv-site__nav { display: flex; align-items: center; gap: 10px; }
.dv-site__nav .dv-sk { width: 34px; height: 4px; }
.dv-site__nav .dv-logo { margin-right: auto; }
.dv-site__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dv-site__copy { display: grid; gap: 9px; align-content: center; }
.dv-site__hero .dv-img { height: 150px; }
.dv-site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dv-site__cards .dv-img { height: 76px; }

.dv-site--mobile { gap: 10px; }
.dv-site--mobile .dv-img { height: 112px; margin-bottom: 4px; }
.dv-burger { width: 14px; height: 9px; border-block: 2px solid rgba(255, 255, 255, 0.6); }
.dv-frame--desktop .dv-burger { display: none; }

@container (max-width: 250px) {
  .dv-frame--desktop .dv-site__nav .dv-sk { display: none; }
  .dv-frame--desktop .dv-burger { display: block; }
  .dv-frame--desktop .dv-site__hero { grid-template-columns: 1fr; gap: 12px; }
  .dv-frame--desktop .dv-site__hero .dv-img { order: -1; height: 90px; }
  .dv-frame--desktop .dv-site__cards { grid-template-columns: 1fr 1fr; }
  .dv-frame--desktop .dv-site__cards .dv-img:nth-child(3) { display: none; }
}

.dv-select {
  position: absolute;
  z-index: 2;
  inset: -1px;
  pointer-events: none;
  border: 1px solid var(--color-green);
  border-radius: var(--radius-sm);
  animation: dvFade 0.4s ease both;
  animation-delay: 1s;
}

.dv-select i {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  width: 8px;
  height: 8px;
  background: var(--color-paper);
  border: 1px solid var(--color-green);
}

.dv-select i:nth-child(1) { left: -4px; top: -4px; }
.dv-select i:nth-child(2) { right: -4px; top: -4px; }
.dv-select i:nth-child(3) { left: -4px; bottom: -4px; }
.dv-select i:nth-child(4) { right: -4px; bottom: -4px; }
.dv-select i:nth-child(1), .dv-select i:nth-child(4) { cursor: nwse-resize; }
.dv-select i:nth-child(2), .dv-select i:nth-child(3) { cursor: nesw-resize; }
.dv-select i::after { content: ''; position: absolute; inset: -10px; }

.dv-select__size {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 3px 6px;
  border-radius: 3px;
  background: var(--color-green);
  color: var(--color-ink);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1;
  white-space: nowrap;
}

.dv-noodle {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: var(--color-green);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dv-noodle circle { fill: var(--color-green); stroke: none; animation: dvFade 0.2s ease both 2.35s; }

.dv-noodle path {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: dvDraw 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards 2.4s;
}

.dv-noodle .dv-noodle__pulse { fill: var(--color-green); stroke: none; opacity: 0; animation: none; }

.dv-canvas.is-live .dv-noodle path,
.dv-canvas.is-live .dv-noodle circle:not(.dv-noodle__pulse) {
  animation: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 1;
}

.dv-canvas.is-live .dv-frame,
.dv-canvas.is-live .dv-select,
.dv-canvas.is-live .dv-click { animation: none; }

.dv-canvas.is-live .dv-click.is-pressed { animation: dvPress 0.5s ease; }

.dv-canvas.is-live .dv-cursor { animation: none; transition: left 0.2s ease, top 0.2s ease; }
.dv-canvas.is-live .dv-cursor.is-instant { transition: none; }

.dv-canvas.is-live .dv-frame.is-hit { animation: dvHit 0.6s ease; }

@keyframes dvHit {
  30% { border-color: var(--color-green); }
}

.dv-noodle .dv-noodle__head {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: dvFade 0.2s ease both 3.15s;
}

.dv-cursor {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  left: 72px;
  top: 337px;
  animation: dvCursor 1.3s cubic-bezier(0.65, 0, 0.35, 1) both 1s;
}

.dv-cursor svg {
  display: block;
  width: 18px;
  height: 22px;
  fill: var(--color-green);
  stroke: var(--color-ink);
  stroke-width: 1;
  animation: dvClick 0.3s ease 2.3s;
}

.dv-cursor__name {
  position: absolute;
  left: 16px;
  top: 20px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-green);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.dv-click { animation: dvPress 0.5s ease 2.3s; }

@keyframes dvFrameIn {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes dvFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dvDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes dvCursor {
  0% { opacity: 0; transform: translate(300px, 380px); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes dvClick {
  50% { transform: scale(0.82); }
}

@keyframes dvPress {
  40% { background: var(--color-green); color: var(--color-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .dv-frame,
  .dv-select,
  .dv-cursor,
  .dv-cursor svg,
  .dv-click,
  .dv-noodle circle,
  .dv-noodle .dv-noodle__head {
    animation: none;
  }

  .dv-noodle path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .dv-canvas.is-live .dv-click.is-pressed,
  .dv-canvas.is-live .dv-frame.is-hit { animation: none; }
  .dv-canvas.is-live .dv-cursor { transition: none; }
}

.dp-sheet {
  --mark: rgba(255, 255, 255, 0.55);
  position: absolute;
  z-index: 5;
  left: 40px;
  top: 120px;
  width: 640px;
  height: 830px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: #121318;
  overflow: hidden;
  animation: dpSheetIn 1s cubic-bezier(0.16, 1, 0.3, 1) both 0.1s;
}

.dp-slug {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  line-height: 1;
  color: var(--color-chimney);
  animation: dpFade 0.6s ease both 0.5s;
}

.dp-print {
  position: absolute;
  display: block;
}

.dp-print::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--img) center / 100% 100% no-repeat;
  background-color: #1a1b21;
  clip-path: inset(0 0 100% 0);
  animation: dpPrint 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: var(--in, 0.3s);
  transition: filter 0.25s ease;
}

.dp-print::before {
  content: '';
  position: absolute;
  inset: -20px;
  background:
    linear-gradient(var(--mark), var(--mark)) left 0 top 20px / 14px 1px,
    linear-gradient(var(--mark), var(--mark)) left 20px top 0 / 1px 14px,
    linear-gradient(var(--mark), var(--mark)) right 0 top 20px / 14px 1px,
    linear-gradient(var(--mark), var(--mark)) right 20px top 0 / 1px 14px,
    linear-gradient(var(--mark), var(--mark)) left 0 bottom 20px / 14px 1px,
    linear-gradient(var(--mark), var(--mark)) left 20px bottom 0 / 1px 14px,
    linear-gradient(var(--mark), var(--mark)) right 0 bottom 20px / 14px 1px,
    linear-gradient(var(--mark), var(--mark)) right 20px bottom 0 / 1px 14px;
  background-repeat: no-repeat;
  animation: dpFade 0.5s ease both;
  animation-delay: calc(var(--in, 0.3s) + 0.7s);
}

.dp-print:hover::after { filter: brightness(1.08); }

.dp-print__label {
  position: absolute;
  left: 0;
  top: calc(100% + 26px);
  font-size: 12px;
  line-height: 1;
  color: var(--color-chimney);
  white-space: nowrap;
  animation: dpFade 0.5s ease both;
  animation-delay: calc(var(--in, 0.3s) + 0.7s);
}

.dp-print--poster { left: 56px;  top: 72px;  width: 300px; height: 375px; }
.dp-print--rollup { left: 56px;  top: 516px; width: 300px; height: 169px; }
.dp-print--menu   { left: 392px; top: 72px;  width: 192px; height: 255px; }
.dp-print--inside { left: 392px; top: 396px; width: 192px; height: 255px; }

.dp-reg {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--mark);
  stroke-width: 1;
  animation: dpReg 0.9s cubic-bezier(0.16, 1, 0.3, 1) both 0.6s;
}

.dp-reg--top    { left: calc(50% - 11px); top: 36px; }
.dp-reg--bottom { left: calc(50% - 11px); bottom: 18px; }
.dp-reg--left   { left: 14px;  top: calc(50% - 11px); }
.dp-reg--right  { right: 14px; top: calc(50% - 11px); }

.dp-bar {
  position: absolute;
  left: 56px;
  top: 752px;
  display: flex;
  align-items: center;
}

.dp-bar i {
  width: 30px;
  height: 18px;
  background: var(--k);
  animation: dpFade 0.25s ease both;
  animation-delay: calc(1.5s + var(--d) * 0.06s);
}

.dp-bar__spot { margin-left: 10px; }

.dp-bar__label {
  margin-left: 10px;
  font-size: 11px;
  color: var(--color-chimney);
  animation: dpFade 0.4s ease both 2.2s;
}

.dp-loupe {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background-color: #1a1b21;
  background-repeat: no-repeat;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 6px rgba(13, 13, 13, 0.35);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.dp-loupe::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0 1.05px, transparent 1.6px) 0 0 / 4px 4px;
  transform: rotate(15deg);
  mix-blend-mode: multiply;
}

.dp-loupe.is-on { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .dp-sheet.has-loupe .dp-print { cursor: none; }
}

@keyframes dpSheetIn {
  from { opacity: 0; transform: translateY(70px); }
  to { opacity: 1; transform: none; }
}

@keyframes dpSheetInMobile {
  from { opacity: 0; transform: translateX(-50%) translateY(70px) scale(var(--dv-scale, 1)); }
  to { opacity: 1; transform: translateX(-50%) scale(var(--dv-scale, 1)); }
}

@keyframes dpPrint {
  to { clip-path: inset(0); }
}

@keyframes dpReg {
  from { opacity: 0; transform: rotate(-90deg) scale(1.8); }
  to { opacity: 1; transform: none; }
}

@keyframes dpPlate {
  from { opacity: 0; transform: translate(var(--px, 0), var(--py, 0)); }
  30% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

@keyframes dpNudge {
  0%, 100% { transform: none; }
  40% { transform: translateX(-16px); }
}

@keyframes dpFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-sheet,
  .dp-slug,
  .dp-print::before,
  .dp-print__label,
  .dp-reg,
  .dp-bar i,
  .dp-bar__label {
    animation: none;
  }

  .dp-print::after {
    animation: none;
    clip-path: none;
  }

  .dp-sheet.is-deck .dp-print { transition: none; }
}

.dx-deck {
  position: absolute;
  z-index: 5;
  left: 40px;
  top: 170px;
  width: 660px;
  height: 700px;
}

.dx-card {
  --mark: rgba(255, 255, 255, 0.55);
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  background: rgb(17, 18, 24);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, border-color 0.2s ease;
  animation: dxDeal 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.dx-card__label {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  font-size: 12px;
  line-height: 1;
  color: var(--color-muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.dx-card__body {
  position: absolute;
  inset: 16px;
  overflow: hidden;
}

.dx-card--ui {
  left: 0;
  top: 40px;
  width: 470px;
  height: 320px;
  transform: rotate(-4deg);
  animation-delay: 0.15s;
}

.dx-card--print {
  left: 350px;
  top: 220px;
  width: 290px;
  height: 400px;
  transform: rotate(5deg);
  animation-delay: 0.4s;
}

.dx-card--print .dp-print {
  left: 38px;
  top: 38px;
  width: 212px;
  height: 265px;
}

.dx-card:hover,
.dx-card:focus-visible {
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.45);
  transform: rotate(0) translateY(-14px);
}


.dx-deck:hover .dx-card:not(:hover) { opacity: 0.45; }

@keyframes dxDeal {
  from { opacity: 0; transform: translate(-60px, 120px) rotate(-14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dx-card { animation: none; transition: none; }
}

.dv-more {
  margin-top: calc(var(--gap-xl) * -0.5);
  margin-bottom: var(--gap-xl);
  font-size: var(--fs-small);
  color: var(--color-chimney);
}

.dv-more a {
  color: var(--color-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dv-allwork {
  margin-top: var(--gap-lg);
}

.dv-head {
  max-width: 52ch;
  margin-bottom: var(--gap-xl);
}

.dv-head .section-heading__title {
  margin-bottom: var(--gap-sm);
}

.dv-head .section-heading__description {
  margin-bottom: 0;
}

.dv-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap-xl);
  align-items: start;
}

.dv-split__head .section-heading__title {
  margin-bottom: var(--gap-sm);
}

.dv-split__head .section-heading__description {
  margin-bottom: 0;
}

.dv-spec__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--gap-md);
  padding: 20px 0;
  border-top: 1px solid var(--color-border-dark);
}

.dv-spec__row:last-child {
  border-bottom: 1px solid var(--color-border-dark);
}

.dv-spec dt {
  font-size: var(--fs-small);
  color: var(--color-chimney);
  padding-top: 2px;
}

.dv-spec dd {
  max-width: 60ch;
}

.dv-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dv-list li {
  position: relative;
  padding-left: 22px;
}

.dv-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: currentColor;
}

.dv-platforms {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
}

.dv-platform {
  padding: var(--gap-lg) var(--gap-md) var(--gap-lg) 0;
}

.dv-platform + .dv-platform {
  padding-left: var(--gap-md);
  border-left: 1px solid var(--color-border-dark);
}

.dv-platform__name {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-h2);
  margin-bottom: var(--gap-md);
}

.dv-platform__text {
  font-size: var(--fs-small);
  color: var(--color-muted);
  max-width: 28ch;
}

.dv-ai {
  margin-bottom: var(--gap-xl);
}

.dv-platforms--3 {
  grid-template-columns: repeat(3, 1fr);
}

.dv-platforms--3 .dv-platform__text {
  max-width: 36ch;
}

.dv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dv-scores__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
}

.dv-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  text-align: center;
}

.dv-score__dial {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(84px, 8.5vw, 124px);
  aspect-ratio: 1;
}

.dv-score__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.dv-score__track,
.dv-score__bar {
  fill: none;
  stroke-width: 5;
}

.dv-score__track {
  stroke: var(--color-border-dark);
}

.dv-score__bar {
  stroke: var(--color-green);
  stroke-linecap: butt;
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100 - var(--score, 100));
}

.dv-score__value {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-h2);
}

.dv-score__dial::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-green);
  opacity: 0;
  pointer-events: none;
}

.dv-score.is-full .dv-score__dial::after {
  animation: dv-score-pulse 0.9s ease-out 1;
}

@keyframes dv-score-pulse {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.28); }
}

.dv-score__label {
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.dv-scores__caption {
  margin-top: var(--gap-lg);
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--fs-small);
  color: var(--color-chimney);
}

@media (prefers-reduced-motion: reduce) {
  .dv-score.is-full .dv-score__dial::after {
    animation: none;
  }
}

.dv-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-lg);
}

.dv-step {
  padding-top: var(--gap-md);
  border-top: 1px solid var(--color-border-dark);
}

.dv-step__nr {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-chimney);
  margin-bottom: var(--gap-lg);
}

.dv-step__title {
  font-size: var(--fs-h3);
  font-weight: var(--weight-regular);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-flat);
  margin-bottom: var(--gap-sm);
}

.dv-step__text {
  color: var(--color-chimney);
}

.dv-faq summary {
  list-style: none;
}

.dv-faq summary::-webkit-details-marker {
  display: none;
}

.dv-faq .faq-item__icon::before {
  content: '+';
}

.dv-faq[open] .faq-item__icon::before {
  content: '\2212';
}

@supports (interpolate-size: allow-keywords) {
  .dv-faq {
    interpolate-size: allow-keywords;
  }

  .dv-faq::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--transition-base), content-visibility var(--transition-base) allow-discrete;
  }

  .dv-faq[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dv-faq::details-content {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .dv-platforms {
    grid-template-columns: repeat(2, 1fr);
  }

  .dv-platform:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .dv-platform:nth-child(n + 3) {
    border-top: 1px solid var(--color-border-dark);
  }

  .dv-steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--gap-xl);
  }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .dv-platforms--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .dv-platforms--3 .dv-platform:nth-child(odd) {
    padding-left: var(--gap-md);
    border-left: 1px solid var(--color-border-dark);
  }

  .dv-platforms--3 .dv-platform:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .dv-platforms--3 .dv-platform:nth-child(n + 3) {
    border-top: 0;
  }
}

@media (max-width: 720px) {
  .dv-canvas {
    left: 50%;
    top: var(--dv-top, 340px);
    width: 360px;
    height: 350px;
    transform: translateX(-50%) scale(var(--dv-scale, 1));
    transform-origin: 50% 0;
  }

  .dx-deck {
    left: 50%;
    top: var(--dv-top, 340px);
    width: 340px;
    height: 340px;
    transform: translateX(-50%) scale(var(--dv-scale, 1));
    transform-origin: 50% 0;
  }

  .dx-card--ui { left: 0; top: 24px; width: 250px; height: 172px; }
  .dx-card__body { inset: 10px; }
  .dx-card--print { left: 172px; top: 104px; width: 160px; height: 220px; }
  .dx-card--print .dp-print { left: 24px; top: 24px; width: 112px; height: 140px; }

  .contact-info .dv-more { order: 2; margin-top: calc(var(--gap-lg) * -0.5); margin-bottom: var(--gap-lg); }

  .dp-sheet {
    left: 50%;
    top: var(--dv-top, 340px);
    width: 340px;
    height: 420px;
    transform: translateX(-50%) scale(var(--dv-scale, 1));
    transform-origin: 50% 0;
    animation-name: dpSheetInMobile;
  }

  .dp-print--rollup,
  .dp-print--inside { display: none; }

  .dp-print--poster { left: 28px;  top: 58px; width: 168px; height: 210px; }
  .dp-print--menu   { left: 218px; top: 58px; width: 94px;  height: 125px; }
  .dp-print__label { top: calc(100% + 24px); }
  .dp-print__label { font-size: 12px; }
  .dp-print--menu .dp-print__label { white-space: normal; width: 94px; line-height: 1.3; }
  .dp-bar { left: 28px; top: 340px; }
  .dp-bar i { width: 20px; height: 14px; }
  .dp-bar__spot { margin-left: 6px; }
  .dp-reg--top { top: 30px; }

  .dp-sheet.is-deck { touch-action: pan-y; }
  .dp-sheet.is-deck .dp-reg--top { top: 22px; }

  .dp-sheet.is-deck .dp-print {
    display: block;
    opacity: 0;
    visibility: hidden;
    isolation: isolate;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
  }

  .dp-sheet.is-deck .dp-print.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
  }

  .dp-sheet.is-deck .dp-print.is-out-left  { transform: translateX(-70px); }
  .dp-sheet.is-deck .dp-print.is-out-right { transform: translateX(70px); }

  .dp-sheet.is-deck .dp-print--poster { left: 70px; top: 50px;  width: 200px; height: 250px; }
  .dp-sheet.is-deck .dp-print--rollup { left: 28px; top: 140px; width: 284px; height: 160px; }
  .dp-sheet.is-deck .dp-print--menu,
  .dp-sheet.is-deck .dp-print--inside { left: 76px; top: 50px;  width: 188px; height: 250px; }
  .dp-sheet.is-deck .dp-print__label { top: calc(100% + 22px); width: auto; white-space: nowrap; }
  .dp-sheet.is-deck .dp-bar { top: 356px; }

  .dp-sheet.is-deck .dp-print::after {
    animation: none;
    clip-path: none;
    opacity: 0;
  }

  .dp-sheet.is-deck .dp-print.is-printed::after { opacity: 1; }
  .dp-sheet.is-deck .dp-print.is-plating { background: #000; }

  .dp-plate {
    position: absolute;
    inset: 0;
    background: var(--img) center / 100% 100% no-repeat, var(--c);
    background-blend-mode: multiply;
    mix-blend-mode: screen;
    opacity: 0;
    animation: dpPlate 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
    animation-delay: var(--pd, 0s);
  }

  .dp-sheet.is-deck .dp-reg { transition: stroke 0.3s ease; }
  .dp-sheet.is-registered .dp-reg { stroke: var(--color-green); }

  .dp-sheet.is-deck .dp-print.is-nudge { animation: dpNudge 0.9s cubic-bezier(0.45, 0, 0.2, 1) 1; }

  .dv-frame--style,
  .dv-frame--parts { display: none; }

  .dv-frame--desktop { left: 0; top: 20px; width: 290px; height: 196px; }
  .dv-frame--mobile  { left: 244px; top: 92px; width: 112px; height: 236px; }

  .dv-frame__body { inset: 10px; }
  .dv-site { gap: 10px; }
  .dv-site__hero { gap: 10px; }
  .dv-site__copy { gap: 6px; }
  .dv-site__hero .dv-img { height: 84px; }
  .dv-site__cards { gap: 6px; }
  .dv-site__cards .dv-img { height: 44px; }
  .dv-sk--title { height: 10px; }
  .dv-site--mobile { gap: 7px; }
  .dv-site--mobile .dv-img { height: 70px; margin-bottom: 2px; }
  .dv-btn { padding: 6px 9px; font-size: 10px; }
  .dv-btn--sm { padding: 5px 9px; }

  .dv-split {
    grid-template-columns: 1fr;
    gap: var(--gap-lg);
  }

  .dv-spec__row {
    grid-template-columns: 1fr;
    gap: var(--gap-xs);
  }

  .dv-head {
    margin-bottom: var(--gap-lg);
  }

  .dv-platforms {
    grid-template-columns: 1fr;
  }

  .dv-platform,
  .dv-platform + .dv-platform {
    padding: var(--gap-md) 0;
    border-left: 0;
  }

  .dv-platform + .dv-platform {
    border-top: 1px solid var(--color-border-dark);
  }

  .dv-platform__name {
    margin-bottom: var(--gap-xs);
  }

  .dv-platforms--3 {
    grid-template-columns: 1fr;
  }

  .dv-scores__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--gap-lg);
  }

  .dv-score__dial {
    width: 108px;
  }

  .dv-score__value {
    font-size: 2rem;
  }

  .dv-steps {
    grid-template-columns: 1fr;
    row-gap: var(--gap-lg);
  }

  .dv-step__nr {
    margin-bottom: var(--gap-sm);
  }
}