* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  position: fixed;
  inset: 0;
  --sticker-rail-space: clamp(74px, 11vw, 128px);
  --dock-background-image: url("../assets/mtn-lion-dock.png?v=20260630");
  --dock-image-length: min(92vh, 930px);
  --dock-rail-hidden-offset: max(260px, 28vw);
  background: #ffffff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.scene-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #ffffff;
  opacity: 1;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.scene-background::after {
  content: none;
}

.scene-background-video {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  object-fit: cover;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0) scale(1.06);
  filter: saturate(1.04);
  /* Song-to-song switch: a gentle "refocus" crossfade. */
  transition:
    opacity 620ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 1400ms cubic-bezier(0.16, 0.84, 0.24, 1),
    filter 760ms ease;
  will-change: opacity, transform, filter;
}

.scene-background-video.is-active {
  opacity: 1;
  transform: translateZ(0) scale(1);
}

.borrow-frame-copy {
  display: none;
}

body.is-borrow-frame {
  background: #ffffff;
}

body.is-borrow-frame .scene-background {
  background: #ffffff;
  opacity: 1;
}

body.is-borrow-frame .scene-background-video,
body.is-borrow-frame .ipod-share-button,
body.is-borrow-frame .sticker-sidebar,
body.is-borrow-frame .tint-sidebar,
body.is-borrow-frame .ipod-projection-shadow {
  display: none !important;
}

body.is-borrow-frame .borrow-frame-copy {
  position: fixed;
  left: 7.2vw;
  top: 51%;
  z-index: 4;
  display: block;
  max-width: 52vw;
  color: #111111;
  font: 500 clamp(34px, 3.7vw, 60px)/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 4px 7px rgba(0, 0, 0, 0.34);
  transform: translateY(-50%);
  pointer-events: none;
}

body.is-borrow-frame .scene-shell {
  left: auto;
  right: 6.8vw;
  width: min(34vw, 520px);
}

body.is-borrow-frame .model-canvas {
  width: 100%;
  height: 100dvh;
  min-height: 100vh;
}

/* The photographic world recedes and dims as the song's world takes over. */
body.has-page-background-video .scene-background {
  opacity: 0;
  transition: opacity 760ms ease;
}

.ipod-share-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 18;
  min-width: 76px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #252b2c;
  font: 700 13px/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(229, 234, 232, 0.8)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 22px rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.11);
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  backdrop-filter: blur(14px) saturate(1.18);
  transition:
    transform 180ms cubic-bezier(0.16, 1.2, 0.22, 1),
    opacity 160ms ease,
    filter 160ms ease;
}

.ipod-share-button:hover {
  transform: translateY(-1px);
}

.ipod-share-button:active {
  transform: translateY(1px) scale(0.98);
}

.ipod-share-button:disabled {
  cursor: wait;
  opacity: 0.76;
  filter: saturate(0.8);
}

.ipod-share-button.is-copied {
  color: #14351e;
  background:
    linear-gradient(180deg, rgba(226, 255, 230, 0.96), rgba(177, 234, 184, 0.84)),
    rgba(224, 255, 229, 0.72);
}

.ipod-share-button.is-error {
  color: #521a1b;
  background:
    linear-gradient(180deg, rgba(255, 236, 236, 0.96), rgba(238, 184, 184, 0.84)),
    rgba(255, 235, 235, 0.72);
}

.ipod-playlist-input {
  position: fixed;
  z-index: 17;
  display: block;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  color: transparent;
  background: transparent;
  box-shadow: none;
  font: 700 14px/1.25 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transform: translate(-200vw, -200vh);
}

.ipod-playlist-input.is-active {
  opacity: 0;
}

.ipod-photo-booth-video-source {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-200vw, -200vh);
}

@media (prefers-reduced-motion: reduce) {
  .scene-background-video,
  body.has-page-background-video .scene-background {
    transition: opacity 300ms ease;
    transform: none;
    filter: none;
  }

}

.sticker-sidebar {
  position: fixed;
  top: 50%;
  left: clamp(2px, 0.55vw, 8px);
  z-index: 3;
  width: clamp(78px, 8.5vw, 116px);
  max-height: min(80vh, 720px);
  /* Waits off-screen until the iPod is plugged in (see body.ipod-docked). */
  transform: translate(calc(-100% - var(--dock-rail-hidden-offset)), -50%);
  overflow: visible;
  isolation: isolate;
  touch-action: none;
}

/* Side rails use the Mountain Lion dock texture behind transparent icons. */
.sticker-sidebar::before,
.tint-sidebar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--dock-image-length);
  aspect-ratio: 3955 / 249;
  z-index: -1;
  border-radius: 0;
  background-image: var(--dock-background-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  box-shadow: none;
  opacity: 0.75;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.sticker-sidebar::before {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(-1);
}

.tint-sidebar::before {
  transform: translate(-50%, -50%) rotate(-90deg) scaleX(-1);
}

.tint-sidebar {
  position: fixed;
  top: 50%;
  right: clamp(2px, 0.55vw, 8px);
  z-index: 8;
  width: clamp(58px, 6vw, 84px);
  max-height: min(82vh, 790px);
  /* Waits off-screen until the iPod is plugged in (see body.ipod-docked). */
  transform: translate(calc(100% + var(--dock-rail-hidden-offset)), -50%);
  overflow: visible;
  isolation: isolate;
  touch-action: none;
}

/* Plugged in during boot: the rails spring in from off-screen with a bounce. */
body.ipod-docked .sticker-sidebar {
  animation: dock-rail-in-left 900ms cubic-bezier(0.26, 1, 0.48, 1) 120ms both;
}

body.ipod-docked .tint-sidebar {
  animation: dock-rail-in-right 900ms cubic-bezier(0.26, 1, 0.48, 1) 240ms both;
}

@keyframes dock-rail-in-left {
  0% {
    transform: translate(calc(-100% - var(--dock-rail-hidden-offset)), -50%);
  }
  58% {
    transform: translate(8%, -50%);
  }
  78% {
    transform: translate(-3%, -50%);
  }
  91% {
    transform: translate(1.2%, -50%);
  }
  100% {
    transform: translate(0, -50%);
  }
}

@keyframes dock-rail-in-right {
  0% {
    transform: translate(calc(100% + var(--dock-rail-hidden-offset)), -50%);
  }
  58% {
    transform: translate(-8%, -50%);
  }
  78% {
    transform: translate(3%, -50%);
  }
  91% {
    transform: translate(-1.2%, -50%);
  }
  100% {
    transform: translate(0, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ipod-docked .sticker-sidebar,
  body.ipod-docked .tint-sidebar {
    animation: none;
    transform: translate(0, -50%);
  }
}

.sticker-list {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  max-height: inherit;
  padding: 56px 18px;
  transform: translateX(22px);
  overflow-y: auto;
  scrollbar-width: none;
  scroll-padding-block: 56px;
  mask-image: linear-gradient(180deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
}

.tint-list {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 13px;
  max-height: inherit;
  /* Widen the scroll box with negative margins + inner padding so a hovered
     color's magnified shadow renders inside the box instead of being clipped
     (overflow-y: auto forces overflow-x to clip, so we make room instead). */
  width: calc(100% + 96px);
  margin-inline: -48px;
  padding: 56px 48px;
  transform: translateX(-22px);
  overflow-y: auto;
  scrollbar-width: none;
  scroll-padding-block: 56px;
  mask-image: linear-gradient(180deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
}

.sticker-list::-webkit-scrollbar {
  display: none;
}

.sticker-list.is-pack-selector {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

.sticker-list.is-pack-transitioning {
  pointer-events: none;
}

.sticker-list.is-sticker-pack {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  padding-top: 0;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

.tint-list::-webkit-scrollbar {
  display: none;
}

.sticker-file-input {
  display: none;
}

.sticker-button,
.sticker-pack-button,
.sticker-back-button,
.custom-sticker-button,
.tint-button {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  overflow: visible;
  touch-action: none;
  transform-origin: 50% 58%;
  transition:
    transform 300ms cubic-bezier(0.16, 1.35, 0.24, 1),
    filter 160ms ease,
    opacity 140ms ease;
}

.tint-button {
  width: clamp(34px, 4vw, 48px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 31% 24%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.34) 18%, transparent 42%),
    radial-gradient(circle at 68% 78%, rgba(0, 0, 0, 0.2), transparent 56%),
    linear-gradient(145deg, var(--tint-color), color-mix(in srgb, var(--tint-color) 62%, #1d2324));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.72),
    inset 0 -8px 12px rgba(0, 0, 0, 0.18),
    0 2px 0 rgba(255, 255, 255, 0.22),
    0 9px 6px rgba(0, 0, 0, 0.32),
    0 18px 18px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.tint-button::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.32), transparent 58%),
    conic-gradient(from 25deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.85));
  opacity: 0;
  transform: scale(0.76);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  transition:
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.2, 0.9, 0.22, 1.25);
  pointer-events: none;
}

.tint-button.is-active::after {
  opacity: 1;
  transform: scale(1);
}

.sticker-button,
.sticker-pack-button {
  width: clamp(48px, 6vw, 76px);
  border-radius: 15px;
}

.sticker-button {
  cursor: grab;
}

.sticker-pack-button,
.sticker-back-button {
  cursor: pointer;
}

.sticker-pack-button {
  width: clamp(48px, 6vw, 76px);
  border-radius: 0;
  isolation: isolate;
  background: transparent;
  box-shadow: none;
}

.sticker-pack-button::before {
  display: none;
}

.sticker-pack-stack {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-2deg) scale(1.08);
  transition: transform 320ms cubic-bezier(0.16, 1.35, 0.24, 1);
}

.sticker-pack-button .sticker-pack-stack-image {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  object-fit: contain;
  opacity: 0.72;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28))
    drop-shadow(0 6px 5px rgba(0, 0, 0, 0.34))
    drop-shadow(0 18px 14px rgba(0, 0, 0, 0.16));
  transform-origin: 50% 78%;
  transition:
    opacity 220ms ease,
    filter 240ms ease,
    transform 340ms cubic-bezier(0.16, 1.35, 0.24, 1);
}

.sticker-pack-button .sticker-pack-stack-image:nth-child(1) {
  opacity: 0.52;
  transform: translate(-16%, 6%) rotate(-15deg) scale(0.94);
}

.sticker-pack-button .sticker-pack-stack-image:nth-child(2) {
  opacity: 0.7;
  transform: translate(14%, -1%) rotate(11deg) scale(1);
}

.sticker-pack-button .sticker-pack-stack-image:nth-child(3),
.sticker-pack-button .sticker-pack-stack-image.is-primary {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1.14);
}

.sticker-pack-button:hover .sticker-pack-stack {
  transform: rotate(2deg) scale(1.14);
}

.sticker-pack-button:hover .sticker-pack-stack-image {
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.28))
    drop-shadow(0 10px 8px rgba(0, 0, 0, 0.38))
    drop-shadow(0 24px 20px rgba(0, 0, 0, 0.2));
}

.sticker-pack-button:hover .sticker-pack-stack-image:nth-child(1) {
  transform: translate(-25%, 8%) rotate(-23deg) scale(0.98);
}

.sticker-pack-button:hover .sticker-pack-stack-image:nth-child(2) {
  transform: translate(23%, -4%) rotate(17deg) scale(1.04);
}

.sticker-pack-button:hover .sticker-pack-stack-image:nth-child(3),
.sticker-pack-button:hover .sticker-pack-stack-image.is-primary {
  transform: translate(0, -4%) rotate(1deg) scale(1.2);
}

.sticker-pack-toolbar {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  pointer-events: auto;
}

.sticker-pack-scroll {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: calc(100% + 96px);
  max-height: calc(min(80vh, 720px) - 154px);
  margin-inline: -48px;
  padding: 52px 48px 56px;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
  scroll-padding-block: 52px 56px;
  mask-image: linear-gradient(180deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
}

.sticker-pack-scroll::-webkit-scrollbar {
  display: none;
}

.sticker-selector-scroll {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 50px;
  width: calc(100% + 96px);
  margin-inline: -48px;
  padding: 52px 48px 56px;
  overflow: visible;
  scrollbar-width: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.sticker-selector-scroll::-webkit-scrollbar {
  display: none;
}

.sticker-back-button {
  width: clamp(42px, 4.8vw, 58px);
  border-radius: 0;
  color: #303738;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(0 8px 7px rgba(0, 0, 0, 0.3))
    drop-shadow(0 18px 14px rgba(0, 0, 0, 0.16));
}

.sticker-back-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: currentColor;
  font: 300 clamp(46px, 5.2vw, 64px) / 0.82 ui-sans-serif, system-ui, -apple-system, sans-serif;
  transform: translateX(-3px) translateY(-1px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
  transition: transform 220ms cubic-bezier(0.16, 1.35, 0.24, 1);
}

.sticker-back-button:hover {
  transform: translateX(-6px) translateY(-2px) rotate(-4deg) scale(1.08);
  transition-duration: 180ms;
}

.sticker-back-button:hover .sticker-back-icon {
  transform: translateX(-8px) translateY(-1px) scale(1.03);
}

.sticker-button:hover,
.sticker-pack-button:hover,
.custom-sticker-button:hover {
  transform: translateX(8px) translateY(-4px) scale(1.24);
  transition-duration: 220ms;
}

.tint-button:hover {
  transform: translateX(-8px) scale(1.3);
  transition-duration: 220ms;
}

.sticker-button.is-dropping,
.sticker-button:active,
.sticker-pack-button:active,
.custom-sticker-button:active {
  transform: translateX(3px) translateY(-1px) scale(1.08);
  transition-duration: 140ms;
}

.sticker-back-button:active {
  transform: translateX(-3px) scale(0.96);
  transition-duration: 120ms;
}

.sticker-pack-toolbar .custom-sticker-button {
  width: clamp(40px, 4.8vw, 58px);
}

.tint-button:active {
  transform: translateX(-3px) scale(1.1);
  transition-duration: 140ms;
}

.sticker-button:active {
  cursor: grabbing;
}

.sticker-button:focus-visible,
.sticker-pack-button:focus-visible,
.sticker-back-button:focus-visible,
.custom-sticker-button:focus-visible,
.tint-button:focus-visible {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.78),
    0 0 0 5px rgba(68, 134, 255, 0.42);
}

.sticker-button.is-custom {
  background: transparent;
}

.custom-sticker-button {
  width: clamp(48px, 6vw, 76px);
  border-radius: 16px;
  color: #5c6466;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 38%, transparent 64%),
    linear-gradient(160deg, rgba(252, 253, 254, 0.95), rgba(214, 221, 224, 0.92) 52%, rgba(186, 194, 197, 0.95));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -8px 14px rgba(120, 132, 136, 0.22),
    0 2px 0 rgba(255, 255, 255, 0.4),
    0 7px 6px rgba(0, 0, 0, 0.2),
    0 14px 16px rgba(0, 0, 0, 0.14);
  cursor: pointer;
}

.custom-sticker-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.custom-sticker-button.is-processing .custom-sticker-icon {
  animation: sticker-upload-pulse 720ms ease-in-out infinite;
}

.custom-sticker-button.is-error {
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12) 34%, transparent 58%),
    linear-gradient(145deg, rgba(255, 118, 108, 0.95), rgba(112, 36, 36, 0.96));
}

.custom-sticker-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: transparent;
  color: currentColor;
  font: 200 clamp(30px, 3.4vw, 44px) / 1 ui-sans-serif, system-ui, -apple-system, sans-serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.sticker-button img,
.sticker-pack-button img {
  position: relative;
  z-index: 1;
  width: 94%;
  height: 94%;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.24))
    drop-shadow(0 7px 5px rgba(0, 0, 0, 0.38))
    drop-shadow(0 18px 14px rgba(0, 0, 0, 0.2));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 78%;
  transition: filter 260ms ease;
}

.sticker-button:hover img,
.sticker-pack-button:hover img {
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.26))
    drop-shadow(0 11px 8px rgba(0, 0, 0, 0.42))
    drop-shadow(0 24px 20px rgba(0, 0, 0, 0.22));
}

.sticker-drag-item {
  position: fixed;
  z-index: 5;
  width: var(--sticker-width, 154px);
  height: var(--sticker-height, 96px);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.36;
  transform: translate(-50%, -50%);
  filter:
    grayscale(1)
    saturate(0.08)
    brightness(1.08)
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.22));
  transition:
    opacity 110ms ease,
    filter 110ms ease,
    transform 110ms ease;
  will-change: transform, left, top, opacity;
}

.sticker-drag-item.is-projecting {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.94);
  transition: none;
}

@keyframes sticker-upload-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.72;
  }

  50% {
    transform: scale(0.86);
    opacity: 1;
  }
}

.scene-shell {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  overflow: visible;
  touch-action: none;
  background: transparent;
  isolation: isolate;
}

.ipod-projection-shadow {
  position: absolute;
  left: var(--projection-left, 50%);
  top: var(--projection-top, 50%);
  z-index: 0;
  width: var(--projection-width, min(24vw, 300px));
  height: var(--projection-height, min(34vw, 380px));
  pointer-events: none;
  opacity: var(--projection-opacity, 0);
  transform:
    translate(-50%, -50%)
    translate(var(--projection-offset-x, 12px), var(--projection-offset-y, 12px))
    rotate(var(--projection-rotation, -0.6deg))
    scale(var(--projection-scale-x, 1), var(--projection-scale-y, 1));
  transform-origin: 50% 50%;
  mix-blend-mode: multiply;
  will-change: left, top, width, height, opacity, transform;
}

.ipod-projection-shadow::before {
  content: "";
  position: absolute;
  inset: 8% 7% 10%;
  border-radius: 28% / 16%;
  background:
    radial-gradient(ellipse at 48% 62%, rgba(0, 0, 0, 0.065) 0%, rgba(0, 0, 0, 0.036) 38%, rgba(0, 0, 0, 0.014) 58%, transparent 78%);
  filter: blur(20px);
}

.ipod-projection-shadow::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 24%;
  bottom: 3%;
  height: 15%;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.075);
  filter: blur(12px);
}

.model-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100vw;
  height: 100dvh;
  outline: none;
  cursor: grab;
  touch-action: none;
  background: transparent;
}

.model-canvas:active {
  cursor: grabbing;
}

@media (max-width: 560px) {
  body {
    --sticker-rail-space: 68px;
  }

  .sticker-list {
    gap: 11px;
    padding: 44px 13px;
    scroll-padding-block: 44px;
    mask-image: linear-gradient(180deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  }

  .sticker-list.is-pack-selector {
    gap: 16px;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .sticker-pack-toolbar {
    gap: 10px;
  }

  .sticker-list.is-sticker-pack {
    padding-top: 0;
    scroll-padding-block: 0 44px;
  }

  .sticker-pack-scroll {
    gap: 11px;
    width: calc(100% + 72px);
    max-height: calc(min(80vh, 720px) - 126px);
    margin-inline: -36px;
    padding: 42px 36px 44px;
    scroll-padding-block: 42px 44px;
    mask-image: linear-gradient(180deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  }

  .sticker-selector-scroll {
    gap: 38px;
    width: calc(100% + 72px);
    margin-inline: -36px;
    padding: 42px 36px 44px;
  }

  .tint-list {
    gap: 11px;
    padding: 44px 12px;
    scroll-padding-block: 44px;
    mask-image: linear-gradient(180deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  }

  body.is-borrow-frame .borrow-frame-copy {
    left: 50%;
    top: 14%;
    max-width: 88vw;
    font-size: clamp(28px, 9vw, 40px);
    text-align: center;
    transform: translate(-50%, -50%);
  }

  body.is-borrow-frame .scene-shell {
    right: 50%;
    top: 18%;
    width: min(76vw, 360px);
    height: 82dvh;
    transform: translateX(50%);
  }

  body.is-borrow-frame .model-canvas {
    height: 82dvh;
    min-height: 520px;
  }
}