#lens-main {
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
}

.lens-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* ---------------------------------
   Shared type
---------------------------------- */

.lens-title,
.lens-line,
.lens-muted,
.lens-button,
.lens-link-button,
.lens-input,
.lens-textarea,
.lens-question-text,
.lens-end-label,
.lens-scale-label,
.lens-bottom-label,
.lens-caption-shell,
.lens-caption-prefix,
.lens-caption-suffix,
.lens-caption-typing,
.lens-alias-shell,
.lens-alias-prefix,
.lens-alias-suffix,
.lens-alias-typing,
#lens-loading-quip,
#lens-loading-dots {
  font-family: "HelveticaNeueRoman", Helvetica, Arial, sans-serif;
  font-size: calc(var(--text-size) + 2px);
  line-height: 0.96;
  letter-spacing: var(--tracking);
  color: var(--fg);
  text-transform: uppercase;
}

.lens-muted {
  opacity: 0.6;
  color: var(--fg);
}

.lens-link-button,
.lens-button {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 1;
  transition: opacity 180ms ease;
}

.lens-link-button:hover,
.lens-link-button:focus-visible,
.lens-button:hover,
.lens-button:focus-visible {
  opacity: 0.45;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  outline: none;
}

.lens-link-button.is-always-underlined {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.lens-mobile-next,
.lens-mobile-alias-next,
.lens-mobile-query-info,
.lens-query-next-row {
  display: none;
}

/* ---------------------------------
   Chunk text reveal
---------------------------------- */

.lens-chunk {
  display: inline-block;
  opacity: 0;
  transition: opacity 110ms linear;
  will-change: opacity;
}

.lens-chunk.is-visible {
  opacity: 1;
}

.lens-chunk-space {
  white-space: pre;
}

.lens-word-wrap {
  display: inline-block;
}

.lens-query-fade {
  opacity: 0;
  transition: opacity 700ms ease;
  will-change: opacity;
}

.lens-query-fade.is-visible {
  opacity: 1;
}

/* ---------------------------------
   Centered text-only screens
---------------------------------- */

.lens-center-screen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lens-center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.lens-inline-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.lens-yn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

/* ---------------------------------
   Questions screen
---------------------------------- */

.lens-questions-layout {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  column-gap: 48px;
  align-items: end;
}

.lens-image-column,
.lens-questions-column {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.lens-image-column {
  position: relative;
  display: block;
}

.lens-image-stack {
  width: 100%;
  height: 100%;
  position: relative;
}

.lens-image-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}

.lens-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: left bottom;
}

.lens-image-placeholder,
.lens-result-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: transparent;
  border: none;
}

.lens-image-bottom {
  position: fixed;
  left: 0;
  bottom: 16px;
  width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 24px;
  z-index: 30;
  pointer-events: auto;
}

.lens-bottom-label {
  font-size: calc(var(--text-size) + 2px);
}

.lens-questions-column {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.lens-questions-stack {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 16px;
  box-sizing: border-box;
}

.lens-right-heading {
  align-self: flex-end;
  text-align: right;
}

.lens-question-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.lens-question-block.is-exiting {
  opacity: 0;
  transform: translateY(10px);
}

.lens-question-text {
  text-align: right;
  white-space: nowrap;
}

.lens-question-index {
  display: none;
}

.lens-scale {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lens-scale-row {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.lens-scale-step {
  width: 24px;
  height: 24px;
  border: none;
  background: #cfcfcf;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

html.dark-mode .lens-scale-step {
  background: rgba(255, 255, 255, 0.28);
}

.lens-scale-step.is-active {
  background: var(--fg);
}

html.dark-mode .lens-scale-step.is-active {
  background: rgba(255, 255, 255, 1);
}

.lens-scale-label-row {
  width: max-content;
  min-width: calc((24px * 9) + (7px * 8));
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-left: auto;
}

.lens-scale-label {
  font-size: calc(var(--text-size) + 1px);
  text-align: left;
}

/* ---------------------------------
   Reveal screen
---------------------------------- */

.lens-reveal-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(54px, 8vh, 96px);
  padding-bottom: 28px;
  box-sizing: border-box;
}

.lens-reveal-center {
  width: min(48vw, 760px);
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lens-reveal-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: min(58vh, 620px);
  background: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    max-height 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lens-reveal-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.lens-reveal-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-height: 96px;
  transform: translateY(0);
  margin-top: 6px;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lens-caption-shell,
.lens-alias-shell {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  text-align: center;
  cursor: text;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

.lens-caption-shell {
  max-width: min(72ch, 80vw);
}

.lens-caption-prefix,
.lens-caption-suffix,
.lens-alias-prefix,
.lens-alias-suffix {
  white-space: pre-wrap;
}

.lens-caption-typing,
.lens-alias-typing {
  display: inline;
  min-width: 1ch;
  max-width: min(72ch, 80vw);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
}

.lens-caption-shell .lens-caption-typing {
  display: inline;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.lens-caption-input,
.lens-alias-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.lens-caret {
  display: inline-block;
  margin-left: 1px;
  animation: lensCaretBlink 1s steps(1, end) infinite;
}

@keyframes lensCaretBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

/* ---------------------------------
   End screens
---------------------------------- */

.lens-end-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.lens-end-label {
  font-size: calc(var(--text-size) + 8px);
}

.underline-word {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ---------------------------------
   Loading transition overlay
---------------------------------- */

#lens-loading {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

#lens-loading.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 220ms ease,
    visibility 0s linear 0s;
}

#lens-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translateY(6px);
  opacity: 0;
}

#lens-loading.is-active #lens-loading-inner {
  animation: lensLoadingInnerIn 260ms ease forwards;
}

@keyframes lensLoadingInnerIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#lens-loading-logo {
  display: grid;
  grid-template-columns: repeat(5, 18px);
  grid-template-rows: repeat(5, 18px);
  gap: 0;
}

.lens-loading-cell {
  width: 18px;
  height: 18px;
  background: transparent;
}

.lens-loading-cell.is-on {
  background: var(--fg);
}

.lens-loading-cell.is-accent {
  background: rgba(0, 0, 0, 0.28);
}

html.dark-mode .lens-loading-cell.is-accent {
  background: rgba(255, 255, 255, 0.28);
}

#lens-loading-quip-row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-height: 1em;
}

#lens-loading-dots {
  width: 1.4em;
  text-align: left;
}


/* ---------------------------------
   Desktop drop screen
---------------------------------- */

.lens-desktop-drop-screen {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.lens-desktop-workspace {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.lens-desktop-targets {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 5;
}

.lens-desktop-target {
  width: 92px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: default;
}

.lens-desktop-target-icon {
  display: block;
  width: 92px;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.lens-desktop-memory {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(2.9);
  transform-origin: center center;
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 520ms ease;
  cursor: grab;
  z-index: 10;
  touch-action: none;
  user-select: none;
}

.lens-desktop-memory.is-ready {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.lens-desktop-memory.is-dragging {
  cursor: grabbing;
  filter: contrast(1.06);
}

.lens-desktop-memory-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.lens-desktop-memory-image,
.lens-desktop-memory-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(1) brightness(0.32) contrast(1.12);
}

.lens-desktop-memory-blackout {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.lens-desktop-copy {
  position: absolute;
  left: 50%;
  top: calc(50% + 52px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 260ms ease;
  width: min(90vw, 640px);
  pointer-events: none;
}

.lens-desktop-copy.is-ready {
  opacity: 1;
}

@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-targets {
    top: 18px;
    left: 8px;
    gap: 14px;
  }

  .lens-desktop-target,
  .lens-desktop-target-icon {
    width: 78px;
  }

  .lens-desktop-memory {
    width: 54px;
    height: 54px;
  }

  .lens-desktop-copy {
    top: calc(50% + 44px);
    width: min(92vw, 420px);
  }
}

@media (max-width: 1400px) {
  .lens-reveal-center {
    width: min(52vw, 740px);
  }

  .lens-reveal-frame {
    max-height: min(56vh, 580px);
  }
}

@media (max-width: 1200px) {
  .lens-questions-layout {
    grid-template-columns: 1fr;
    row-gap: 32px;
    align-items: start;
  }

  .lens-questions-column {
    justify-content: flex-start;
  }

  .lens-questions-stack {
    max-width: none;
  }

  .lens-right-heading,
  .lens-question-text {
    text-align: left;
  }

  .lens-scale-row {
    justify-content: flex-start;
  }

  .lens-scale-label-row {
    margin-left: 0;
  }

  .lens-reveal-center {
    width: min(72vw, 760px);
  }

  .lens-reveal-frame {
    max-height: min(54vh, 560px);
  }

  .lens-question-text {
    white-space: normal;
  }
}

@media (pointer: coarse) and (max-width: 900px) {
  html,
  body,
  #app,
  #lens-main {
    overflow: hidden;
  }

  #lens-main {
    position: fixed;
    top: 16px;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    height: auto;
    min-height: 0;
  }

  .lens-screen,
  .lens-center-screen,
  .lens-intro-screen,
  .lens-reveal-layout,
  .lens-questions-layout-mobile {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .lens-title,
  .lens-line,
  .lens-muted,
  .lens-button,
  .lens-link-button,
  .lens-input,
  .lens-textarea,
  .lens-question-text,
  .lens-end-label,
  .lens-scale-label,
  .lens-bottom-label,
  .lens-caption-shell,
  .lens-caption-prefix,
  .lens-caption-suffix,
  .lens-caption-typing,
  .lens-alias-shell,
  .lens-alias-prefix,
  .lens-alias-suffix,
  .lens-alias-typing,
  #lens-loading-quip,
  #lens-loading-dots,
  .lens-question-index,
  .lens-question-text-mobile,
  .lens-mobile-query-info .lens-right-heading,
  .lens-mobile-query-info .lens-bottom-label,
  .lens-query-next-row-mobile .lens-link-button {
    font-size: calc(var(--text-size) + 2px);
    line-height: 0.96;
  }

  .lens-intro-screen .lens-muted,
  .lens-intro-screen .lens-line,
  .lens-intro-screen .lens-link-button {
    font-size: calc(var(--text-size) + 3px);
  }

  .lens-center-screen .lens-line,
  .lens-center-screen .lens-link-button,
  .lens-end-stack .lens-line {
    font-size: calc(var(--text-size) + 4px);
  }

  .lens-center-screen,
  .lens-intro-screen {
    display: grid;
    place-items: center;
    padding: 56px 12px 56px;
    box-sizing: border-box;
  }

  .lens-center-stack,
  .lens-end-stack,
  .lens-intro-stack {
    width: 100%;
    max-width: min(94vw, 620px);
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .lens-intro-stack {
    gap: 12px;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .lens-intro-stack > .lens-intro-line:nth-of-type(1) {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
  }

  .lens-intro-stack > .lens-intro-line:nth-of-type(2) {
    gap: 8px;
  }

  .lens-questions-layout-mobile {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    row-gap: 10px;
    align-items: stretch;
    padding-top: 62px;
    box-sizing: border-box;
  }

  .lens-image-column,
  .lens-questions-column {
    height: auto;
    min-height: 0;
  }

  .lens-image-column {
    display: contents;
  }

  .lens-image-stack {
    display: contents;
    height: auto;
    position: static;
  }

  .lens-image-frame {
    grid-row: 1;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
    max-height: none;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    margin: 0;
  }

  .lens-image {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: left top;
    flex: 0 0 auto;
  }

  .lens-image-bottom {
    display: none;
  }

  .lens-mobile-query-info {
    grid-row: 2;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
  }

  .lens-mobile-query-info .lens-right-heading,
  .lens-mobile-query-info .lens-bottom-label {
    margin: 0;
    text-align: left;
  }

  .lens-mobile-query-info .lens-bottom-label {
    text-align: right;
  }

  .lens-questions-column {
    grid-row: 3;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }

  .lens-questions-stack {
    width: 100%;
    max-width: none;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 6px;
    box-sizing: border-box;
    gap: 0;
  }

  .lens-question-block-mobile {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
  }

  .lens-question-index {
    display: block;
    text-align: left;
  }

  .lens-question-text,
  .lens-question-text-mobile {
    text-align: left;
    white-space: normal;
    max-width: 100%;
  }

  .lens-scale-mobile {
    gap: 8px;
  }

  .lens-scale-row,
  .lens-scale-row-mobile {
    width: 100%;
    justify-content: space-between;
    gap: 2px;
  }

  .lens-scale-step {
    width: 36px;
    height: 36px;
  }

  .lens-scale-label-row,
  .lens-scale-label-row-mobile {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    gap: 12px;
  }

  .lens-scale-label {
    font-size: calc(var(--text-size) + 2px);
    line-height: 0.96;
  }

  .lens-query-next-row,
  .lens-query-next-row-mobile {
    grid-row: 4;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
  }

  .lens-query-next-row .lens-link-button,
  .lens-query-next-row-mobile .lens-link-button {
    display: inline-flex;
  }

  .lens-reveal-layout {
    display: grid;
    place-items: center;
    padding: 56px 0 56px;
    box-sizing: border-box;
  }

  .lens-reveal-center {
    width: 100%;
    max-width: 100%;
    gap: 14px;
  }

  .lens-reveal-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .lens-reveal-copy {
    width: 100%;
    min-height: 0;
    gap: 8px;
    margin-top: 6px;
  }

  body.lens-mobile-keyboard-open .lens-reveal-layout {
    padding-top: 24px;
    padding-bottom: 10px;
  }

  body.lens-mobile-keyboard-open .lens-reveal-center {
    transform: translateY(calc(-26px - var(--lens-mobile-typing-shift, 0px)));
    gap: 10px;
  }

  body.lens-mobile-keyboard-open .lens-reveal-frame {
    max-height: 18vh;
    opacity: 0.92;
  }

  body.lens-mobile-keyboard-open .lens-reveal-copy {
    transform: translateY(-2px);
    margin-top: 0;
  }

  body.lens-mobile-keyboard-open .lens-caption-shell,
  body.lens-mobile-keyboard-open .lens-alias-shell {
    max-width: 100%;
  }

  body.lens-mobile-keyboard-open .lens-caption-typing,
  body.lens-mobile-keyboard-open .lens-alias-typing {
    max-width: 100%;
    font-size: calc(var(--text-size) + 3px);
    line-height: 1.02;
  }

  .lens-caption-shell,
  .lens-alias-shell,
  .lens-caption-typing,
  .lens-alias-typing {
    max-width: 100%;
  }

  .lens-mobile-next,
  .lens-mobile-alias-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    font-size: calc(var(--text-size) + 2px);
  }
}

@media (max-width: 700px) {
  #lens-loading-logo {
    grid-template-columns: repeat(5, 14px);
    grid-template-rows: repeat(5, 14px);
  }

  .lens-loading-cell {
    width: 14px;
    height: 14px;
  }

  #lens-loading-inner {
    gap: 14px;
  }
}

@media (pointer: coarse) and (max-width: 600px) {
  #lens-main {
    top: 16px;
    right: 16px;
    bottom: 16px;
    left: 16px;
  }

  .lens-center-screen,
  .lens-intro-screen,
  .lens-reveal-layout {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .lens-title,
  .lens-line,
  .lens-muted,
  .lens-button,
  .lens-link-button,
  .lens-input,
  .lens-textarea,
  .lens-question-text,
  .lens-end-label,
  .lens-scale-label,
  .lens-bottom-label,
  .lens-caption-shell,
  .lens-caption-prefix,
  .lens-caption-suffix,
  .lens-caption-typing,
  .lens-alias-shell,
  .lens-alias-prefix,
  .lens-alias-suffix,
  .lens-alias-typing,
  #lens-loading-quip,
  #lens-loading-dots,
  .lens-question-index,
  .lens-question-text-mobile,
  .lens-mobile-query-info .lens-right-heading,
  .lens-mobile-query-info .lens-bottom-label,
  .lens-query-next-row-mobile .lens-link-button {
    font-size: calc(var(--text-size) + 1px);
  }

  .lens-intro-screen .lens-muted,
  .lens-intro-screen .lens-line,
  .lens-intro-screen .lens-link-button {
    font-size: calc(var(--text-size) + 2px);
  }

  .lens-center-screen .lens-line,
  .lens-center-screen .lens-link-button,
  .lens-end-stack .lens-line {
    font-size: calc(var(--text-size) + 3px);
  }

  .lens-intro-stack {
    max-width: 96vw;
    padding: 0 6px;
  }

  .lens-intro-stack > .lens-intro-line:nth-of-type(1) {
    gap: 6px;
  }

  .lens-questions-layout-mobile {
    padding-top: 52px;
  }

  .lens-scale-step {
    width: 32px;
    height: 32px;
  }

  .lens-scale-row,
  .lens-scale-row-mobile {
    gap: 2px;
  }

  .lens-scale-label {
    font-size: calc(var(--text-size) + 1px);
  }

  body.lens-mobile-keyboard-open .lens-reveal-center {
    transform: translateY(calc(-18px - var(--lens-mobile-typing-shift, 0px)));
  }

  body.lens-mobile-keyboard-open .lens-reveal-frame {
    max-height: 16vh;
  }

  body.lens-mobile-keyboard-open .lens-reveal-copy {
    transform: translateY(0);
  }

  body.lens-mobile-keyboard-open .lens-caption-typing,
  body.lens-mobile-keyboard-open .lens-alias-typing {
    font-size: calc(var(--text-size) + 2px);
  }
}

/* ---------------------------------
   Submitted social preview
---------------------------------- */

.lens-submitted-stack {
  gap: 14px;
}

.lens-social-preview {
  position: relative;
  width: 360px;
  height: 640px;
  overflow: hidden;
  background: #111;
}

.lens-social-preview-bg {
  position: absolute;
  inset: 0;
}

.lens-social-preview-bg-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.lens-social-preview-card-shell {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lens-social-preview-card {
  position: relative;
  width: 82%;
  max-width: 312px;
  transform-origin: center center;
  background: #f4efe6;
  box-shadow:
    0 0 0 1px rgba(17, 17, 17, 0.06),
    0 0 0 0.55px rgba(17, 17, 17, 0.055) inset,
    0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.lens-social-preview-card::before,
.lens-social-preview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lens-social-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: url("/assets/textures/paper-grain.png") repeat;
  background-size: 180px 180px;
  background-position: 0 0;
  opacity: 0.16;
  mix-blend-mode: normal;
}

.lens-social-preview-card::after {
  background:
    radial-gradient(circle at 13% 21%, rgba(255, 255, 255, 0.07) 0, transparent 18%),
    radial-gradient(circle at 72% 66%, rgba(0, 0, 0, 0.022) 0, transparent 22%),
    radial-gradient(circle at 38% 44%, rgba(0, 0, 0, 0.016) 0, transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.022) 100%);
  opacity: 0.36;
}

.lens-social-preview-card.is-loading {
  min-height: 240px;
}

.lens-social-preview-card svg,
.lens-social-preview-card img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0.55px);
  filter: saturate(0.9) contrast(0.992) brightness(0.995) blur(0.015px);
}

.lens-social-preview-fallback {
  font-family: "HelveticaNeueRoman", Helvetica, Arial, sans-serif;
  font-size: calc(var(--text-size) + 1px);
  line-height: 0.96;
  letter-spacing: var(--tracking);
  color: #111;
  background: rgba(255, 255, 255, 0.92);
  padding: 16px;
  text-transform: uppercase;
}

@media (pointer: coarse) and (max-width: 900px) {
  .lens-social-preview {
    width: 300px;
    height: 533px;
  }

  .lens-social-preview-card {
    width: 84%;
    max-width: 274px;
  }
}


/* Desktop drop final polish */
body.lens-desktop-drop-active #nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.lens-desktop-dragging,
body.lens-desktop-dragging * {
  cursor: none !important;
}

.lens-desktop-target {
  width: 128px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: default !important;
}

.lens-desktop-target-icon {
  width: 128px !important;
  height: auto !important;
  display: block;
  pointer-events: none;
}

.lens-desktop-copy {
  left: 50% !important;
  top: calc(50% + 52px) !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
  text-align: center !important;
  width: min(90vw, 760px) !important;
}

.lens-desktop-copy-line {
  color: rgba(0, 0, 0, 0.55);
}

html.dark-mode .lens-desktop-copy-line {
  color: rgba(255, 255, 255, 0.55);
}

.lens-desktop-emphasis,
.lens-desktop-emphasis .lens-chunk {
  color: var(--fg) !important;
}

.lens-desktop-inline-space {
  white-space: pre;
}

.lens-desktop-memory,
.lens-desktop-memory.is-dragging {
  cursor: none !important;
}

.lens-desktop-memory-thumb {
  background: #000 !important;
}

html.dark-mode .lens-desktop-memory-thumb {
  background: #fff !important;
}

.lens-desktop-memory-image,
.lens-desktop-memory-fallback {
  opacity: 0 !important;
  visibility: hidden !important;
}

.lens-desktop-memory-blackout {
  background: transparent !important;
}

@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-target,
  .lens-desktop-target-icon {
    width: 104px !important;
  }

  .lens-desktop-copy {
    width: min(92vw, 520px) !important;
    top: calc(50% + 46px) !important;
  }
}


/* ---------------------------------
   Shared-image transition to desktop drop
---------------------------------- */

body.lens-desktop-drop-transition-active #nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

body.lens-desktop-transition-text-fading .lens-reveal-copy,
body.lens-desktop-transition-text-fading .lens-reveal-copy * {
  opacity: 0;
  transition: opacity 260ms ease;
}

body.lens-desktop-transition-text-fading .lens-reveal-frame {
  opacity: 0.94;
}

.lens-desktop-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

.lens-desktop-transition-clone {
  position: fixed;
  overflow: hidden;
  background: transparent;
  transition:
    left 760ms cubic-bezier(0.22, 1, 0.36, 1),
    top 760ms cubic-bezier(0.22, 1, 0.36, 1),
    width 760ms cubic-bezier(0.22, 1, 0.36, 1),
    height 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lens-desktop-transition-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 1;
  transition: opacity 260ms ease;
}

.lens-desktop-transition-blackout {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.lens-desktop-transition-image-moving .lens-desktop-transition-image {
  opacity: 0;
}

body.lens-desktop-transition-image-moving .lens-desktop-transition-blackout {
  background: rgba(0, 0, 0, 1);
}

html.dark-mode body.lens-desktop-transition-image-moving .lens-desktop-transition-blackout {
  background: rgba(255, 255, 255, 1);
}

.lens-desktop-targets {
  opacity: 0;
  transition: opacity 260ms ease;
}

.lens-desktop-workspace.is-ready .lens-desktop-targets {
  opacity: 1;
}

.lens-desktop-copy {
  opacity: 0;
  transition: opacity 260ms ease;
}

.lens-desktop-copy.is-ready {
  opacity: 1;
}


/* Transition cleanup fixes */
body.lens-desktop-drop-transition-active #nav,
body.lens-desktop-drop-active #nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 260ms ease;
}

body.lens-desktop-transition-text-fading .lens-reveal-frame,
body.lens-desktop-transition-image-moving .lens-reveal-frame {
  opacity: 0 !important;
  transition: opacity 260ms ease;
}

body.lens-desktop-transition-text-fading .lens-reveal-image,
body.lens-desktop-transition-image-moving .lens-reveal-image {
  opacity: 0 !important;
  transition: opacity 260ms ease;
}

.lens-desktop-transition-clone {
  z-index: 90;
}

html.dark-mode body.lens-desktop-transition-image-moving .lens-desktop-transition-blackout,
body.lens-desktop-transition-image-moving html.dark-mode .lens-desktop-transition-blackout {
  background: rgba(255, 255, 255, 1);
}


/* More dramatic transition timing + no second intro animation */
body.lens-desktop-transition-text-fading .lens-reveal-copy,
body.lens-desktop-transition-text-fading .lens-reveal-copy * {
  transition: opacity 420ms ease !important;
}

.lens-desktop-transition-clone {
  transition:
    left 980ms cubic-bezier(0.22, 1, 0.36, 1),
    top 980ms cubic-bezier(0.22, 1, 0.36, 1),
    width 980ms cubic-bezier(0.22, 1, 0.36, 1),
    height 980ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.lens-desktop-transition-image,
.lens-desktop-transition-blackout {
  transition-duration: 980ms !important;
}

.lens-desktop-memory.is-ready-no-anim,
.lens-desktop-workspace.is-ready-no-anim .lens-desktop-targets,
.lens-desktop-copy.is-ready-no-anim {
  transition: none !important;
}

.lens-desktop-memory.is-ready-no-anim {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.lens-desktop-workspace.is-ready-no-anim .lens-desktop-targets {
  opacity: 1 !important;
}

.lens-desktop-copy.is-ready-no-anim {
  opacity: 1 !important;
}


/* Fix lingering custom cursor during drag */
body.lens-desktop-dragging #fp-cursor,
body.lens-desktop-dragging #cursor,
body.lens-desktop-dragging .cursor,
body.lens-desktop-dragging .custom-cursor,
body.lens-desktop-dragging .square-cursor,
body.lens-desktop-dragging .cursor-dot,
body.lens-desktop-dragging .cursor-square {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Final desktop drop placement tweaks */
body.lens-desktop-drop-active #dark-mode-button,
body.lens-desktop-drop-transition-active #dark-mode-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 260ms ease;
}

.lens-desktop-targets {
  top: 0 !important;
  left: 0 !important;
  gap: 18px !important;
}

.lens-desktop-target,
.lens-desktop-target-icon {
  width: 152px !important;
}

.lens-desktop-memory {
  width: 52px !important;
  height: 52px !important;
}

@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-targets {
    top: 0 !important;
    left: 0 !important;
    gap: 12px !important;
  }

  .lens-desktop-target,
  .lens-desktop-target-icon {
    width: 120px !important;
  }

  .lens-desktop-memory {
    width: 48px !important;
    height: 48px !important;
  }
}


/* Final position/scale tweaks */
body.lens-desktop-drop-active #dark-mode-button,
body.lens-desktop-drop-transition-active #dark-mode-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 260ms ease;
}

.lens-desktop-targets {
  top: 0 !important;
  left: 0 !important;
  gap: 12px !important;
}

.lens-desktop-target {
  width: 144px !important;
}

.lens-desktop-target-icon {
  width: 144px !important;
}

@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-targets {
    top: 0 !important;
    left: 0 !important;
    gap: 10px !important;
  }

  .lens-desktop-target,
  .lens-desktop-target-icon {
    width: 116px !important;
  }
}


/* Alignment fix: final square matches landed clone */
.lens-desktop-memory,
.lens-desktop-memory-thumb {
  width: 44px !important;
  height: 44px !important;
}

.lens-desktop-targets {
  top: -6px !important;
  left: 0 !important;
  gap: 10px !important;
}

.lens-desktop-target {
  width: 152px !important;
}

.lens-desktop-target-icon {
  width: 152px !important;
}

@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-memory,
  .lens-desktop-memory-thumb {
    width: 40px !important;
    height: 40px !important;
  }

  .lens-desktop-targets {
    top: -4px !important;
    left: 0 !important;
    gap: 8px !important;
  }

  .lens-desktop-target,
  .lens-desktop-target-icon {
    width: 118px !important;
  }
}


/* Final transition polish */
.lens-desktop-transition-clone {
  transition:
    left 900ms cubic-bezier(0.2, 0.9, 0.2, 1),
    top 900ms cubic-bezier(0.2, 0.9, 0.2, 1),
    width 900ms cubic-bezier(0.2, 0.9, 0.2, 1),
    height 900ms cubic-bezier(0.2, 0.9, 0.2, 1) !important;
}

.lens-desktop-transition-image {
  object-fit: contain !important;
}

.lens-desktop-memory,
.lens-desktop-memory-thumb {
  width: 42px !important;
  height: 42px !important;
}

.lens-desktop-targets {
  top: -14px !important;
  left: 0 !important;
  gap: 8px !important;
}

.lens-desktop-target,
.lens-desktop-target-icon {
  width: 158px !important;
}

@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-memory,
  .lens-desktop-memory-thumb {
    width: 38px !important;
    height: 38px !important;
  }

  .lens-desktop-targets {
    top: -10px !important;
    left: 0 !important;
    gap: 6px !important;
  }

  .lens-desktop-target,
  .lens-desktop-target-icon {
    width: 122px !important;
  }
}


/* Transition timing cleanup */
body.lens-desktop-transition-text-fading .lens-reveal-copy,
body.lens-desktop-transition-text-fading .lens-reveal-copy * {
  opacity: 0 !important;
  transition: opacity 520ms ease !important;
}

body.lens-desktop-drop-transition-active #nav,
body.lens-desktop-drop-transition-active #dark-mode-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 520ms ease !important;
}

.lens-desktop-transition-clone {
  transition:
    left 980ms cubic-bezier(0.22, 1, 0.36, 1),
    top 980ms cubic-bezier(0.22, 1, 0.36, 1),
    width 980ms cubic-bezier(0.22, 1, 0.36, 1),
    height 980ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.lens-desktop-transition-image {
  transition: opacity 420ms ease !important;
}


/* Lens transition cleanup */
body.lens-desktop-drop-transition-active #nav,
body.lens-desktop-drop-active #nav,
body.lens-desktop-drop-transition-active #dark-mode-button,
body.lens-desktop-drop-active #dark-mode-button {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.lens-desktop-transition-text-fading .lens-reveal-copy,
body.lens-desktop-transition-text-fading .lens-reveal-copy * {
  opacity: 0 !important;
  transition: opacity 620ms ease !important;
}

.lens-desktop-transition-clone {
  transition:
    left 880ms cubic-bezier(0.22, 1, 0.36, 1),
    top 880ms cubic-bezier(0.22, 1, 0.36, 1),
    width 880ms cubic-bezier(0.22, 1, 0.36, 1),
    height 880ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.lens-desktop-transition-image {
  object-fit: fill !important;
  object-position: center center !important;
  transition: opacity 420ms ease !important;
}

.lens-desktop-targets {
  top: 22px !important;
  left: 0 !important;
  gap: 10px !important;
}

.lens-desktop-target,
.lens-desktop-target-icon {
  width: 150px !important;
}

@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-targets {
    top: 18px !important;
    left: 0 !important;
    gap: 8px !important;
  }

  .lens-desktop-target,
  .lens-desktop-target-icon {
    width: 116px !important;
  }
}


/* Final lens transition cleanup */
body.lens-desktop-drop-transition-active #nav,
body.lens-desktop-drop-active #nav,
body.lens-desktop-drop-transition-active #dark-mode-button,
body.lens-desktop-drop-active #dark-mode-button {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lens-desktop-transition-clone {
  background: transparent !important;
  overflow: hidden !important;
}

.lens-desktop-transition-image {
  object-fit: contain !important;
  object-position: center center !important;
}

body.lens-desktop-transition-text-fading .lens-reveal-copy,
body.lens-desktop-transition-text-fading .lens-reveal-copy * {
  opacity: 0 !important;
  transition: opacity 620ms ease !important;
}

body.lens-desktop-transition-image-moving .lens-reveal-frame,
body.lens-desktop-transition-image-moving .lens-reveal-image {
  opacity: 0 !important;
  transition: opacity 120ms linear !important;
}

.lens-desktop-targets {
  top: 26px !important;
  left: 8px !important;
  gap: 10px !important;
  overflow: visible !important;
}

.lens-desktop-target {
  width: 156px !important;
  overflow: visible !important;
}

.lens-desktop-target-icon {
  width: 156px !important;
  display: block !important;
  height: auto !important;
}

@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-targets {
    top: 20px !important;
    left: 6px !important;
    gap: 8px !important;
  }

  .lens-desktop-target,
  .lens-desktop-target-icon {
    width: 118px !important;
  }
}


/* Icon layout + slower icon reveal */
.lens-desktop-targets {
  position: absolute;
  inset: 0;
  top: auto !important;
  left: auto !important;
  display: block !important;
  pointer-events: none;
}

.lens-desktop-target {
  position: absolute;
  width: 156px !important;
  overflow: visible !important;
}

.lens-desktop-target-icon {
  width: 156px !important;
  display: block !important;
  height: auto !important;
}

.lens-desktop-target[data-drop-target="trash"] {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0 !important;
}

.lens-desktop-target[data-drop-target="archive"] {
  right: 0;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0 !important;
}

.lens-desktop-targets,
.lens-desktop-copy {
  opacity: 0;
  transition: opacity 480ms ease !important;
}

.lens-desktop-workspace.is-ready .lens-desktop-targets {
  opacity: 1;
}

.lens-desktop-copy.is-ready {
  opacity: 1;
}

/* Mobile layout: trash top middle, archive bottom middle, under nav */
@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-target {
    width: 118px !important;
  }

  .lens-desktop-target-icon {
    width: 118px !important;
  }

  .lens-desktop-target[data-drop-target="trash"] {
    left: 50%;
    right: auto;
    top: 70px;
    transform: translateX(-50%);
  }

  .lens-desktop-target[data-drop-target="archive"] {
    left: 50%;
    right: auto;
    bottom: 18px;
    top: auto;
    transform: translateX(-50%);
  }
}


/* Reposition icons cleanly */
.lens-desktop-targets {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 18 !important;
  opacity: 0;
  transition: opacity 720ms ease 120ms !important;
}

.lens-desktop-workspace.is-ready .lens-desktop-targets {
  opacity: 1 !important;
}

.lens-desktop-target {
  position: fixed !important;
  width: 148px !important;
  overflow: visible !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.lens-desktop-target-icon {
  width: 148px !important;
  height: auto !important;
  display: block !important;
}

.lens-desktop-target[data-drop-target="trash"] {
  left: 28px !important;
  top: 50vh !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

.lens-desktop-target[data-drop-target="archive"] {
  right: 28px !important;
  left: auto !important;
  top: 50vh !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

.lens-desktop-copy {
  transition: opacity 620ms ease 120ms !important;
}

/* Mobile layout: top middle + bottom middle */
@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-target {
    width: 114px !important;
  }

  .lens-desktop-target-icon {
    width: 114px !important;
  }

  .lens-desktop-target[data-drop-target="trash"] {
    left: 50vw !important;
    right: auto !important;
    top: 76px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  .lens-desktop-target[data-drop-target="archive"] {
    left: 50vw !important;
    right: auto !important;
    top: auto !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
  }
}



/* Mobile icon swap: archive top middle, trash bottom middle */
@media (pointer: coarse) and (max-width: 900px) {
  .lens-desktop-target[data-drop-target="archive"] {
    left: 50% !important;
    right: auto !important;
    top: 70px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
  }

  .lens-desktop-target[data-drop-target="trash"] {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
  }
}