@font-face {
  font-family: 'Crimson Pro';
  src: url('../assets/fonts/CrimsonPro-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ------------------------------------------------
   Scene viewport & stage
   ------------------------------------------------ */

.scene-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #4b3021;
}

.loading-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #4b3021;
  z-index: 1000;
  transition: opacity 320ms ease, visibility 320ms ease;
}

.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-screen__background {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loading-screen__logo-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.loading-screen__logo {
  position: relative;
  width: min(18rem, 34vw);
  max-width: none;
  animation: loading-logo-tilt 1.5s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes loading-logo-tilt {
  from {
    transform: rotate(-6deg);
  }

  to {
    transform: rotate(6deg);
  }
}

.scene {
  --scene-width: 4304px;
  --scene-height: 2446px;
  --window-top: 0.8%;
  --window-width: 54%;
  --window-height: 52%;
  --desk-baseline: 29%;
  --left-cluster-left: 5.75%;
  --right-cluster-right: 4%;
  --dinosaur-left: 20%;
  --dinosaur-bottom: 8%;
  --dinosaur-width: 18%;
  --dinosaur-shadow-offset-x: 2.9%;
  --dinosaur-shadow-offset-y: 0%;
  --dinosaur-shadow-scale: 0.5;
  --bearbrick-left: 38%;
  --bearbrick-bottom: 8.5%;
  --bearbrick-width: 15%;
  --bearbrick-shadow-offset-x: 5.5%;
  --bearbrick-shadow-offset-y: -1.3%;
  --bearbrick-shadow-scale: 0.5;
  --desk-items-left: 3%;
  --wall-band-top: 3%;
  width: var(--scene-width);
  height: var(--scene-height);
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.scene.is-ready {
  opacity: 1;
}

.scene,
.scene * {
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------
   Layering & interactivity
   ------------------------------------------------ */

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.window-hotspot,
.monitor-hotspot {
  cursor: pointer;
}

.window-hotspot.is-static {
  cursor: default;
}

.lamp-hotspot {
  cursor: default;
  pointer-events: none;
}

.asset {
  position: absolute;
  max-width: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ------------------------------------------------
   Scene structure
   ------------------------------------------------ */

.asset--wall {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset--eigen-wordmark {
  top: 3.5%;
  left: 7%;
  width: 12%;
  z-index: 5;
}

.asset--time-overlay {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity var(--skyline-fade-duration, 60s) linear;
}

.asset--time-overlay.is-initial {
  transition: none;
}

.asset--time-overlay-front {
  z-index: 1;
}

.asset--time-overlay.is-visible {
  opacity: 0.2;
}

.asset--desk {
  left: 0;
  bottom: 0;
  width: 100%;
}

.asset--desk-mobile {
  display: none;
}

/* ------------------------------------------------
   Window system
   ------------------------------------------------ */

.window-hotspot {
  top: var(--window-top);
  left: 50%;
  width: var(--window-width);
  height: var(--window-height);
  transform: translateX(-50%);
}

.window-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.window-aperture {
  position: absolute;
  top: 0%;
  left: 0.5%;
  width: 99%;
  height: 122%;
  overflow: hidden;
  z-index: 0;

  /* Debugging */
  /* outline: 4px solid red; */
}

.asset--skyline {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0;
  transition: opacity var(--skyline-fade-duration, 60s) linear var(--skyline-fade-delay, 0s);
}

.asset--skyline.is-initial {
  transition: none;
}

.asset--skyline-front {
  z-index: 1;
}

.asset--skyline.is-visible {
  opacity: 1;
}

.cloud-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  --cloud-width: 140%;
  --cloud-start: -140%;
  --cloud-travel: 171.5%;
}

.cloud {
  position: absolute;
  top: 6%;
  left: var(--cloud-start);
  width: var(--cloud-width);
  max-width: none;
  height: auto;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}

.asset--window-frame {
  inset: 0;
  width: 100%;
  top: -66.5%;
  opacity: 0;
  transition: opacity var(--skyline-fade-duration, 60s) linear;
}

.asset--window-frame.is-initial {
  transition: none;
}

.asset--window-frame-back {
  z-index: 3;
}

.asset--window-frame-front {
  z-index: 4;
}

.asset--window-frame.is-visible {
  opacity: 1;
}

.careers-button {
  top: 25%;
  left: calc(100% + 10%);
  width: 19%;
  z-index: 5;
  pointer-events: auto;
}

.careers-button--mobile {
  display: none;
}

.asset--careers-button {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transition: transform 180ms ease;
}

.careers-button:hover .asset--careers-button,
.careers-button:focus-visible .asset--careers-button {
  transform: scale(1.05);

}

.asset--clock {
  top: 47%;
  left: calc(100% + 14.7%);
  width: 9%;
  aspect-ratio: 1 / 1;
  z-index: 4;
  scale: 1.4;
  pointer-events: auto;
}

.asset--clock-base {
  inset: 0;
  width: 100%;
}

.asset--clock-center-guide {
  z-index: 6;
  pointer-events: none;
}

.asset--clock-center-guide--vertical {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}

.asset--clock-center-guide--horizontal {
  left: 0;
  bottom: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(50%);
}

.asset--clock-hand-anchor {
  pointer-events: none;
}

.asset--clock-hour-hand {
  inset: 0;
}

.asset--clock-minute-hand {
  inset: 0;
}

.asset--clock-second-hand {
  inset: 0;
}

.asset--clock-hand-image {
  --clock-hand-rotate: 360deg;
  --clock-hand-rotate-offset: 0deg;
  left: 48%;
  bottom: 46%;
  transform-origin: 50% calc(100% - 8px);
  transform: rotate(calc(var(--clock-hand-rotate)));
}

.asset--clock-hour-hand-image {
  width: 5%;
  left: 47.5%;
}

.asset--clock-minute-hand-image {
  width: 3.5%;
  transform-origin: 50% calc(100% - 8px);
}

.asset--clock-minute-hand-pivot {
  left: 46%;
  bottom: 52%;
  width: 4%;
  aspect-ratio: 766 / 2013;
  transform-origin: 50% calc(100% - 8px);
  transform: rotate(calc(var(--clock-hand-rotate) + var(--clock-hand-rotate-offset)));
  pointer-events: none;
  z-index: 7;
}

.asset--clock-second-hand-image {
  left: 49.5%;
  width: 1%;
}

.asset--clock-center-cap {
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #111;
  transform: translate(-50%, 50%);
  z-index: 5;
  pointer-events: none;
}

/* ------------------------------------------------
   Wall decor
   ------------------------------------------------ */

.asset--polaroid-wall-1 { top: 19%; left: 5.5%; width: 3%; }
.asset--polaroid-wall-2 { top: 11%; left: 8%; width: 3%; }
.asset--polaroid-wall-3 { top: 20.5%; left: 10%; width: 3%; }
.asset--polaroid-wall-4 { top: 29%; left: 7.1%; width: 3%; }

/* ------------------------------------------------
   Foreground clusters
   ------------------------------------------------ */

.monitor-hotspot {
  left: var(--left-cluster-left);
  bottom: calc(var(--desk-baseline) - 1.5%);
  width: 23.8%;
  height: 31%;
}

.asset--crt-frame {
  left: 0;
  bottom: 4%;
  width: 100%;
}

.crt-screen {
  position: absolute;
  left: 32.5%;
  bottom: 41.5%;
  width: 59.5%;
  height: 60.5%;
  overflow: hidden;
  border-radius: 13.42px;
  transform: rotate(-0.75deg);
  mix-blend-mode: plus-lighter;
}

.crt-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.asset--crt-mobile-poster {
  display: none;
}

.crt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.10) 3px,
    rgba(0, 0, 0, 0.10) 6px
  );
  pointer-events: none;
  mix-blend-mode: multiply;
}

.asset--new-yorker {
  bottom: 9%;
  left: 3%;
  width: 6.5%;
  pointer-events: auto;
  cursor: pointer;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: 78% 82%;
  will-change: transform;
}

.asset--polaroid-desk {
  bottom: 9%;
  left: 51.25%;
  width: 4%;
}

.asset--polaroid-radial {
  bottom: 6.7%;
  left: 49.8%;
  width: 7%;
  pointer-events: none;
}

.asset--magazines-desk {
  bottom: 28%;
  left: 35%;
  width: 14%;
  transform:
    translateX(var(--drag-offset-x, 0px))
    rotate(var(--drag-tilt-deg, 0deg))
    scaleX(var(--drag-squash-x, 1))
    scaleY(var(--drag-squash-y, 1));
  transform-origin: 50% 75%;
  pointer-events: auto;
}

.asset--polaroids-desk {
  bottom: 30%;
  left: 55%;
  width: 10%;
  transform:
    translateX(var(--drag-offset-x, 0px))
    rotate(var(--drag-tilt-deg, 0deg))
    scaleX(var(--drag-squash-x, 1))
    scaleY(var(--drag-squash-y, 1));
  transform-origin: 50% 75%;
  pointer-events: auto;
}

.asset--wooden-toy {
  bottom: 7.5%;
  left: 16%;
  width: 8%;
  transform:
    translateX(var(--drag-offset-x, 0px))
    rotate(var(--drag-tilt-deg, 0deg))
    scaleX(var(--drag-squash-x, 1))
    scaleY(var(--drag-squash-y, 1));
  transform-origin: 50% 82%;
  pointer-events: auto;
}

.asset--dinosaur-shadow {
  bottom: calc(var(--dinosaur-bottom) + var(--dinosaur-shadow-offset-y));
  left: calc(var(--dinosaur-left) + var(--dinosaur-shadow-offset-x));
  width: calc(var(--dinosaur-width) * var(--dinosaur-shadow-scale));
  pointer-events: none;
  z-index: 0;
}

.asset--dinosaur {
  bottom: var(--dinosaur-bottom);
  left: var(--dinosaur-left);
  width: var(--dinosaur-width);
  pointer-events: none;
}

.asset--dino-gif {
  bottom: var(--dinosaur-bottom);
  left: var(--dinosaur-left);
  width: var(--dinosaur-width);
  opacity: 0;
  pointer-events: none;
}

.asset--bowling-pin-red-shadow {
  bottom: 8.75%;
  left: 37.5%;
  width: 3.4%;
  pointer-events: none;
  z-index: 0;
}

.asset--bowling-pin-red {
  bottom: 9.5%;
  left: 38.2%;
  width: 2.95%;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(0) translateY(0) rotate(0deg);
  transform-origin: 50% 100%;
  transition: transform 180ms ease;
  will-change: transform;
}

.asset--bowling-pin-white-shadow {
  bottom: 8.5%;
  left: 34.5%;
  width: 3.4%;
  pointer-events: none;
  z-index: 0;
}

.asset--bowling-pin-white {
  bottom: 9.5%;
  left: 35.5%;
  width: 3.1%;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(0) translateY(0) rotate(0deg);
  transform-origin: 50% 100%;
  transition: transform 180ms ease;
  will-change: transform;
}

.asset--bowling-pin-red:hover {
  transform: translateX(-3px) translateY(3px) rotate(-1.2deg);
}

.asset--bowling-pin-white:hover {
  transform: translateX(-3px) translateY(3px) rotate(-1.2deg);
}

.asset--bowling-pin-red.is-bumped,
.asset--bowling-pin-white.is-bumped {
  transform: translateX(-3px) translateY(3px) rotate(-1.2deg);
}

.dinosaur-hotspot {
  bottom: 9%;
  left: 30%;
  width: 7.3%;
  height: 15%;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 2;
}

.asset--bearbrick-shadow {
  bottom: calc(var(--bearbrick-bottom) + var(--bearbrick-shadow-offset-y));
  left: calc(var(--bearbrick-left) + var(--bearbrick-shadow-offset-x));
  width: calc(var(--bearbrick-width) * var(--bearbrick-shadow-scale));
  pointer-events: none;
  z-index: 0;
}

.asset--bearbrick {
  bottom: var(--bearbrick-bottom);
  left: var(--bearbrick-left);
  width: var(--bearbrick-width);
  pointer-events: none;
}

.asset--bearbrick-gif {
  bottom: var(--bearbrick-bottom);
  left: var(--bearbrick-left);
  width: var(--bearbrick-width);
  opacity: 0;
  pointer-events: none;
}

.bearbrick-hotspot {
  bottom: 9%;
  left: 46%;
  width: 4%;
  height: 15%;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 2;
}
.asset--dinosaur-shadow,
.asset--dinosaur,
.asset--dino-gif,
.asset--bearbrick-shadow,
.asset--bearbrick,
.asset--bearbrick-gif {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: opacity, transform;
  contain: paint;
}
.asset--mobile-books-left,
.asset--mobile-books-right,
.asset--mobile-books-bottom,
.asset--mobile-books-momo {
  display: none;
}

.typewriter-hotspot {
  right: 12%;
  bottom: calc(var(--desk-baseline) + 1%);
  width: 20%;
  height: 19.2%;
}

.typewriter {
  --typewriter-carriage-group-top: 4%;
  --typewriter-carriage-group-left: 15%;
  --typewriter-carriage-group-width: 102%;
  --typewriter-carriage-group-height: 100%;
  --typewriter-carriage-top: 0;
  --typewriter-carriage-left: 0;
  --typewriter-carriage-width: 100%;
  --typewriter-base-right: 0;
  --typewriter-base-bottom: 0;
  --typewriter-base-width: 100%;
  --typewriter-keyboard-left: 14.3%;
  --typewriter-keyboard-width: 65%;
  --typewriter-keyboard-bottom: 16%;
  --typewriter-key-gap: 1.5%;
  --typewriter-row-overlap: -7%;
  --typewriter-spacebar-left: 22%;
  --typewriter-spacebar-bottom: 14.2%;
  --typewriter-spacebar-width: 54%;
  --typewriter-front-bottom: 3%;
  --typewriter-letter-bottom: 30%;
  --typewriter-letter-right: 30%;
  --typewriter-letter-width: 42%;
  position: absolute;
  inset: 0;
  transform-origin: center bottom;
}

.typewriter__carriage-group,
.typewriter__base,
.typewriter__carriage,
.typewriter__key,
.typewriter__spacebar,
.typewriter__front {
  position: absolute;
  max-width: none;
  user-select: none;
  -webkit-user-select: none;
}

.typewriter__carriage-group {
  top: var(--typewriter-carriage-group-top);
  left: var(--typewriter-carriage-group-left);
  width: var(--typewriter-carriage-group-width);
  height: var(--typewriter-carriage-group-height);
  z-index: 0;
  transition: transform 160ms ease;
  will-change: transform;
  pointer-events: none;
}

.typewriter__base {
  right: var(--typewriter-base-right);
  bottom: var(--typewriter-base-bottom);
  width: var(--typewriter-base-width);
  z-index: 1;
  pointer-events: none;
}

.typewriter__carriage {
  top: var(--typewriter-carriage-top);
  left: var(--typewriter-carriage-left);
  width: var(--typewriter-carriage-width);
  z-index: 0;
  pointer-events: none;
}

.typewriter__keyboard {
  position: absolute;
  left: var(--typewriter-keyboard-left);
  width: var(--typewriter-keyboard-width);
  bottom: var(--typewriter-keyboard-bottom);
  z-index: 2;
  --typewriter-key-width: calc((100% - (12 * var(--typewriter-key-gap))) / 12);
  --typewriter-key-pitch: calc(var(--typewriter-key-width) + var(--typewriter-key-gap));

  /* outline: 4px solid green; */
}

.typewriter__row {
  display: flex;
  justify-content: flex-start;
  gap: var(--typewriter-key-gap);
  position: relative;
  width: 100%;
}

.typewriter__row + .typewriter__row {
  margin-top: var(--typewriter-row-overlap);
}

.typewriter__row[data-row="0"] {
  z-index: 0;
}

.typewriter__row[data-row="1"] {
  z-index: 1;
}

.typewriter__row[data-row="2"] {
  z-index: 2;
}

.typewriter__row[data-row="3"] {
  z-index: 3;
}

.typewriter__row[data-row="1"] {
  transform: translateX(calc(var(--typewriter-key-pitch) / 2));
}

.typewriter__row[data-row="2"] {
  transform: translateX(var(--typewriter-key-pitch));
}

.typewriter__row[data-row="3"] {
  transform: translateX(calc((var(--typewriter-key-pitch) * 3) / 2));
}

.typewriter__key {
  position: relative;
  width: var(--typewriter-key-width);
  height: auto;
  flex: 0 0 auto;
  transform-origin: center top;
  transition: transform 220ms ease;
  will-change: transform;
  cursor: pointer;
}

.typewriter__key.is-hovered {
  transform: translateY(-28%);
}

.typewriter__key.is-pressed {
  transform: translateY(22%);
}

.typewriter__spacebar {
  left: var(--typewriter-spacebar-left);
  bottom: var(--typewriter-spacebar-bottom);
  width: var(--typewriter-spacebar-width);
  z-index: 3;
  transition: transform 180ms ease;
  will-change: transform;
  cursor: pointer;
  transform-origin: center top;
}

.typewriter__spacebar.is-hovered {
  transform: translateY(-6%);
}

.typewriter__spacebar.is-pressed {
  transform: translateY(28%);
}

.typewriter__front {
  left: 0;
  bottom: var(--typewriter-front-bottom);
  width: 100%;
  z-index: 4;
  pointer-events: none;
}

.typewriter__letter {
  bottom: var(--typewriter-letter-bottom);
  right: var(--typewriter-letter-right);
  width: var(--typewriter-letter-width);
  z-index: 1;
  cursor: pointer;
  pointer-events: auto;
  opacity: 1;
  transform-origin: bottom center;
  transition: transform 220ms ease;
  will-change: transform;
}

.typewriter__letter:hover {
  transform: translateY(-3%) rotate(-1.2deg);
}

.typewriter__letter.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lamp-hotspot {
  right: 2%;
  bottom: calc(var(--desk-baseline) - 0.5%);
  width: 14%;
  height: 43%;
}

.asset--lamp-ray {
  bottom: 8%;
  right: 46%;
  width: 100%;
  opacity: 0.5;
  pointer-events: none !important;
  transition: opacity 0.4s ease;
}

.scene[data-lamp="off"] .asset--lamp-ray {
  opacity: 0;
}

.asset--lamp {
  bottom: 0;
  right: 0;
  width: 73%;
  pointer-events: none;
  /* outline: 4px solid red; */
}

.lamp-head-hotspot {
  top: 28%;
  right: 33%;
  width: 40%;
  height: 25%;
  cursor: pointer;
}

.asset--plant {
  bottom: 26%;
  left: -6%;
  width: 17%;
}

.asset--desk-shadow {
  bottom: 16%;
  left: 0;
  width: 100%;
  pointer-events: none;
  /* display: none; */
}

.asset--spotlight {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--skyline-fade-duration, 60s) linear;
}

.scene[data-time="sunset"] .asset--spotlight,
.scene[data-time="night"] .asset--spotlight {
  opacity: 1;
}

.asset--mobile-top-shadow {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
}

.mobile-top-block {
  display: none;
}

/* ------------------------------------------------
   Drag states & stacking
   ------------------------------------------------ */

.asset--polaroid-wall-1.is-dragging,
.asset--polaroid-wall-2.is-dragging,
.asset--polaroid-wall-3.is-dragging,
.asset--polaroid-wall-4.is-dragging {
  z-index: 100;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
  cursor: grabbing;
}

.asset--polaroid-wall-1.is-invalid-drop,
.asset--polaroid-wall-2.is-invalid-drop,
.asset--polaroid-wall-3.is-invalid-drop,
.asset--polaroid-wall-4.is-invalid-drop {
  opacity: 0.5;
}

.layer--wall           { z-index: 0; }
.layer--window         { z-index: 1; }
.layer--wall-polaroids { z-index: 2; }
.layer--desk           { z-index: 3; }
.layer--plant          { z-index: 4; }
.layer--monitor        { z-index: 5; }
.layer--desk-items     { z-index: 6; }
.layer--typewriter     { z-index: 7; }
.layer--lamp           { z-index: 8; }
.layer--desk-shadow    { z-index: 9; }
.layer--spotlight      { z-index: 10; }
.layer--time-overlay   { z-index: 11; }
.layer--mobile-top-shadow { z-index: 12; }

/* ------------------------------------------------
   Fullscreen overlays
   ------------------------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease;
}

.overlay[hidden] {
  display: none;
}

.overlay.is-active {
  background: rgba(0, 0, 0, 0.85);
}

.overlay__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 2.5rem;
  border: 0;
  background: transparent;
  padding: 0;
  color: white;
  opacity: 0.7;
  z-index: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.overlay__close:hover {
  opacity: 1;
}

.overlay__close--letter {
  display: none;
}

.overlay__close--letter:hover {
  color: #000;
}

.overlay__content {
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

.overlay.is-active .overlay__content {
  opacity: 1;
}

.overlay__content--monitor {
  width: 80vw;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  transform: none;
  position: relative;
  pointer-events: auto;
  touch-action: auto;
}

.overlay.is-active .overlay__content--monitor {
  transform: none;
}

.overlay__content--monitor iframe {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  pointer-events: auto;
  touch-action: auto;
}

.overlay__content--letter {
  width: 620px;
  max-width: 90vw;
  margin: 3rem auto;
  transform: scale(0.95) translateY(10px);
}

.overlay.is-active .overlay__content--letter {
  transform: scale(1) translateY(0);
}

.overlay:has(.overlay__content--letter) {
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.overlay:has(.overlay__content--letter)::-webkit-scrollbar {
  display: none;
}

.overlay:has(.overlay__content--letter).is-active {
  background: none;
}

.overlay:has(.overlay__content--letter)::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.4s ease;
  pointer-events: none;
}

.overlay:has(.overlay__content--letter).is-active::before {
  background: rgba(0, 0, 0, 0.15);
}

.letter-paper {
  background: #f5f0e8;
  color: #2a2a2a;
  padding: 2.5rem 3.5rem 3rem;
  width: 100%;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1rem;
  line-height: 1.8;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  position: relative;
}

.letter-paper::-webkit-scrollbar {
  display: none;
}

.letter-paper__stamp {
  position: static;
  display: block;
  margin: 0 auto 2rem;
  width: 92px;
  height: auto;
  pointer-events: none;
}

.letter-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.letter-paper p {
  margin-bottom: 1em;
}

.letter-paper__separator {
  margin: 3rem 0 0;
  color: #8b7b6d;
  text-align: center;
  font-style: italic;
}

.letter-paper__thanks {
  margin-top: 1.75rem;
  padding-top: 0.35rem;
  color: #7a6a5e;
  font-style: italic;
}

.letter-paper p:last-child {
  margin-bottom: 0;
}