html[data-device="mobile"] .mobile-layout-debugger[hidden] {
  display: none;
}

html[data-device="mobile"] .mobile-layout-debugger:not([hidden]) {
  position: fixed;
  z-index: 30;
  right: 8px;
  bottom: 8px;
  left: 8px;
  max-height: min(390px, 48dvh);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 8px;
  color: #fff;
  background: rgb(16 41 58 / 96%);
  box-shadow: 0 4px 20px rgb(0 0 0 / 35%);
  font: 13px/1.35 Arial, Helvetica, sans-serif;
}

.mobile-layout-debugger__header,
.mobile-layout-debugger__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mobile-layout-debugger__header {
  margin-bottom: 10px;
  cursor: grab;
  touch-action: none;
}

.mobile-layout-debugger__header:active {
  cursor: grabbing;
}

.mobile-layout-debugger__header h2,
.mobile-layout-debugger__header p,
.mobile-layout-debugger__status {
  margin: 0;
}

.mobile-layout-debugger__header h2 {
  font-size: 15px;
}

.mobile-layout-debugger__header p,
.mobile-layout-debugger__status {
  color: #c6d8e3;
  font-size: 11px;
}

.mobile-layout-debugger__close,
.mobile-layout-debugger__export,
.mobile-layout-debugger__asset-field select {
  min-height: 36px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 5px;
  color: inherit;
  background: #29485b;
  font: inherit;
}

.mobile-layout-debugger__close,
.mobile-layout-debugger__export {
  cursor: pointer;
}

.mobile-layout-debugger__close {
  width: 36px;
  padding: 0;
  font-size: 23px;
}

.mobile-layout-debugger__asset-field,
.mobile-layout-debugger__range {
  display: grid;
  gap: 4px;
}

.mobile-layout-debugger__asset-field select {
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
}

.mobile-layout-debugger__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-top: 10px;
}

.mobile-layout-debugger__range:last-child {
  grid-column: 1 / -1;
}

.mobile-layout-debugger__range > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.mobile-layout-debugger__range output {
  color: #a9d9ff;
  font-variant-numeric: tabular-nums;
}

.mobile-layout-debugger__range input {
  width: 100%;
  margin: 0;
  accent-color: #75c2ff;
}

.mobile-layout-debugger__actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.mobile-layout-debugger__export {
  padding: 6px 12px;
}

.mobile-layout-debugger__status {
  min-height: 14px;
  margin-top: 5px;
}

html[data-device="mobile"] .landing__cloud--think {
  top: 697px;
  right: auto;
  left: -79px;
  width: 338px;
  min-width: 0;
  margin-left: 0;
  transform: none;
  animation: none;
}

html[data-device="mobile"] .landing__cloud--small {
  top: 699px;
  right: auto;
  left: 143px;
  width: 313px;
  min-width: 0;
  margin-left: 0;
  transform: none;
  animation: none;
}

html[data-device="mobile"] .about__pager-link {
  top: 648px;
  right: auto;
  bottom: auto;
  left: 271px;
  width: 131px;
}

html[data-device="mobile"] #page-one-part-one .section-arrow--down,
html[data-device="mobile"] #page-one-part-two .section-arrow--up {
  right: auto;
  width: 40px;
  height: 40px;
  transform: none;
}

html[data-device="mobile"] #page-one-part-one .section-arrow--down {
  top: 721px;
  left: 180px;
}

html[data-device="mobile"] #page-one-part-two .section-arrow--up {
  top: 696px;
  left: 180px;
}

html[data-device="mobile"].mobile-layout-debugger-active .landing__cloud {
  top: var(--mobile-debug-y);
  right: auto;
  left: var(--mobile-debug-x);
  width: var(--mobile-debug-width);
  min-width: 0;
  margin-left: 0;
  transform: none;
  animation: none;
}

html[data-device="mobile"].mobile-layout-debugger-active .about__pager-link {
  top: var(--mobile-debug-y);
  right: auto;
  bottom: auto;
  left: var(--mobile-debug-x);
  width: var(--mobile-debug-width);
}

html[data-device="mobile"].mobile-layout-debugger-active .section-arrow {
  top: var(--mobile-debug-y);
  right: auto;
  left: var(--mobile-debug-x);
  width: var(--mobile-debug-size);
  height: var(--mobile-debug-size);
  transform: none;
}

html[data-device="mobile"].mobile-layout-debugger-active .about__links {
  position: absolute;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  top: var(--mobile-debug-y);
  right: auto;
  bottom: auto;
  left: var(--mobile-debug-x);
  font-size: var(--mobile-debug-size);
}