@media (max-width: 900px) {
  :root {
    --poster-width: 96vw;
    --poster-height: 126vw;
    --poster-pad-x: 1.2vw;
    --poster-stage-top: 1.2vw;
    --poster-stage-height: 117vw;
  }

  .hero-section {
    padding: 2vw;
  }

  .poster-stage {
    border-width: 0.22vw;
  }

  .poster-logo {
    top: 3.4vw;
    left: 4.6vw;
    width: 13.2vw;
  }

  .poster-nav {
    top: 3.2vw;
    left: 50%;
    gap: 2.3vw;
    font-size: 3.3vw;
    max-width: 74vw;
    flex-wrap: wrap;
    justify-content: center;
  }

  .poster-nav__arrow {
    font-size: 2.6vw;
  }

  .poster-word--create {
    --font-size: 13.9vw;
    --final-left: 2.7vw;
    --final-top: 94.5vw;
  }

  .poster-word--own {
    --font-size: 14.9vw;
    --final-left: 21.5vw;
    --final-top: 75.5vw;
    --final-rotate: 24.5deg;
  }

  .poster-word--unique {
    --font-size: 12.9vw;
    --final-left: 35vw;
    --final-top: 68vw;
    --final-rotate: 5deg;
  }

  .poster-word--perfume {
    --font-size: 12.9vw;
    --final-left: 69vw;
    --final-top: 76vw;
    --final-rotate: -27deg;
  }

  .poster-object--berry {
    left: 13vw;
    top: 68.5vw;
    width: 15.8vw;
  }

  .poster-object--flower {
    left: 38vw;
    top: 84vw;
    width: 18.3vw;
  }

  .poster-object--bottle {
    left: 64vw;
    top: 56vw;
    width: 23vw;
    --base-rotate: 28deg;
  }

  .content-section {
    min-height: 84vw;
    padding: 0 7vw;
  }

  .content-section__inner {
    max-width: 72vw;
  }

  .content-section__eyebrow {
    margin-bottom: 2.2vw;
    font-size: 2.2vw;
  }

  .content-section h2 {
    margin-bottom: 3vw;
    font-size: 11vw;
  }

  .content-section p {
    font-size: 3.2vw;
    line-height: 1.42;
  }

  .labyrinth-section {
    margin-top: -9vw;
    padding: 0 2vw 2vw;
    scroll-margin-top: 2vw;
  }

  .labyrinth-frame {
    width: 96vw;
    height: 124vw;
  }

  .labyrinth-stage {
    left: 1.2vw;
    right: 1.2vw;
    top: 1.2vw;
    height: 118vw;
    grid-template-columns: 1fr;
    padding: 4vw 3.2vw;
    row-gap: 4vw;
  }

  .labyrinth-copy__head {
    gap: 2.8vw;
  }

  .labyrinth-badge {
    width: 6vw;
    height: 6vw;
    border-width: 0.24vw;
    font-size: 3.2vw;
  }

  .labyrinth-copy h2 {
    font-size: 10.4vw;
  }

  .labyrinth-copy__text {
    margin-top: 3vw;
    font-size: 3.6vw;
  }

  .labyrinth-controls {
    width: 31vw;
    height: 31vw;
    margin-top: 5vw;
    margin-left: 1vw;
  }

  .labyrinth-control {
    width: 11vw;
    height: 11vw;
  }

  .labyrinth-control--up,
  .labyrinth-control--down {
    left: 10vw;
  }

  .labyrinth-control--up {
    top: 1.2vw;
  }

  .labyrinth-control--down {
    bottom: 1.2vw;
  }

  .labyrinth-control--left,
  .labyrinth-control--right {
    top: 10vw;
  }

  .labyrinth-control--left {
    left: 1.2vw;
  }

  .labyrinth-control--right {
    right: 1.2vw;
  }

  .labyrinth-status {
    margin-top: 3vw;
    font-size: 2.4vw;
  }

  .maze-board {
    width: 100%;
    height: 78vw;
    margin-top: 0;
    margin-left: -3vw;
  }

  .maze-wall--h {
    height: 0.24vw;
  }

  .maze-wall--v {
    width: 0.24vw;
  }

  .maze-player {
    width: 4.2vw;
    height: 4.2vw;
    margin-left: -2.1vw;
    margin-top: -2.1vw;
  }

  .maze-item--peach { width: 8.5vw; }
  .maze-item--hibiscus { width: 8.6vw; }
  .maze-item--tube { width: 9vw; }
  .maze-item--plumeria { width: 9vw; }
  .maze-item--berry { width: 6.6vw; }

  .place-section {
    margin-top: 0vw;
    padding: 0 2vw 2vw;
    scroll-margin-top: 2vw;
  }

  .place-frame {
    width: 96vw;
    height: 98vw;
  }

  .place-stage {
    left: 1.2vw;
    right: 1.2vw;
    top: 1.2vw;
    height: 92vw;
  }

  .place-copy {
    top: 4vw;
    right: 3.5vw;
  }

  .place-badge {
    width: 6vw;
    height: 6vw;
    border-width: 0.24vw;
    font-size: 3.1vw;
  }

  .place-copy h2 {
    font-size: 8.8vw;
  }

  .place-copy__text {
    margin-left: 4.6vw;
    font-size: 3.6vw;
  }

  .place-target {
    width: 37.2vw;
    height: 51.6vw;
  }

  .place-target--pink {
    left: 13vw;
    top: 15vw;
  }

  .place-target--blue {
    left: 31vw;
    top: 15vw;
  }

  .place-target--green {
    left: 49vw;
    top: 15vw;
  }

  .place-bottle {
    width: 23.3vw;
  }

  .place-bottle.is-locked {
    width: 17.3vw;
  }

  .place-bottle--pink {
    left: 3vw;
    top: 3vw;
  }

  .place-bottle--green {
    left: 7vw;
    top: 36vw;
  }

  .place-bottle--blue {
    right: 2vw;
    bottom: 4vw;
  }

  .pair-section {
    margin-top: 0;
    padding: 0 2vw 2vw;
    scroll-margin-top: 2vw;
  }

  .pair-frame {
    width: 96vw;
    height: 110vw;
  }

  .pair-stage {
    left: 1.2vw;
    right: 1.2vw;
    top: 1.2vw;
    height: 104vw;
  }

  .pair-copy {
    top: 3.8vw;
    left: 3vw;
  }

  .pair-badge {
    width: 6vw;
    height: 6vw;
    border-width: 0.24vw;
    font-size: 3.1vw;
  }

  .pair-copy h2 {
    font-size: 8.8vw;
  }

  .pair-copy__text {
    font-size: 3.6vw;
  }

  .pair-grid {
    top: 10vw;
    left: 43vw;
    column-gap: 2vw;
    row-gap: 2vw;
  }

  .pair-card {
    width: 18vw;
    height: 28vw;
  }

  .pair-card__face {
    border-width: 0;
  }

  .pair-card {
    border-width: 0.22vw;
  }

  .package-section {
    margin-top: 0;
    padding: 0 2vw 2vw;
    scroll-margin-top: 2vw;
  }

  .package-frame {
    width: 96vw;
    height: 104vw;
  }

  .package-stage {
    left: 1.2vw;
    right: 1.2vw;
    top: 1.2vw;
    height: 98vw;
  }

  .package-swatches {
    top: 18vw;
    left: 3vw;
    gap: 3vw;
  }

  .package-swatch {
    width: 9vw;
    height: 9vw;
  }

  .package-workspace {
    left: 22vw;
    top: 10vw;
    width: 53vw;
    height: 51vw;
  }

  .package-copy {
    top: 4vw;
    right: 3vw;
  }

  .package-badge {
    width: 6vw;
    height: 6vw;
    border-width: 0.24vw;
    font-size: 3.1vw;
  }

  .package-copy h2 {
    font-size: 8.8vw;
  }

  .package-copy__text {
    margin-left: 4.6vw;
    font-size: 3.6vw;
  }

  .package-pen {
    right: 8vw;
    bottom: 6vw;
    width: 10vw;
    height: 25vw;
  }

  .package-pen__body {
    width: 1.8vw;
    height: 22vw;
  }

  .catch-section {
    margin-top: 0;
    padding: 0 2vw 2vw;
  }

  .catch-frame {
    width: 96vw;
    height: 104vw;
  }

  .catch-stage {
    left: 1.2vw;
    right: 1.2vw;
    top: 1.2vw;
    height: 98vw;
  }

  .catch-copy {
    top: 4vw;
    left: 3vw;
  }

  .catch-badge {
    width: 6vw;
    height: 6vw;
    border-width: 0.24vw;
    font-size: 3.1vw;
  }

  .catch-copy h2 {
    font-size: 9.4vw;
  }

  .catch-copy__text {
    font-size: 3.8vw;
  }

  .catch-bottle {
    width: 24vw;
  }

  .catch-bottle.is-caught {
    width: 67vw;
  }

  .credits-section {
    padding: 0 2vw 2vw;
  }

  .credits-frame {
    width: 96vw;
  }

  .credits-stage {
    min-height: 19vw;
    padding: 3vw;
  }

  .credits-copy {
    max-width: 62vw;
  }

  .credits-copy p {
    font-size: 4.2vw;
  }

  .credits-copy p + p {
    margin-top: 1.6vw;
  }

  .credits-logo {
    right: 3vw;
    top: 4vw;
    width: 18vw;
  }
}

@media (max-width: 560px) {
  :root {
    --poster-width: 96vw;
    --poster-height: 176vw;
    --poster-pad-x: 1.2vw;
    --poster-stage-top: 1.2vw;
    --poster-stage-height: 168vw;
  }

  body {
    overflow-x: hidden;
  }

  .hero-section {
    padding: 0 2vw 2vw;
  }

  .poster-frame {
    width: 96vw;
    height: 176vw;
  }

  .poster-stage,
  .labyrinth-stage,
  .place-stage,
  .pair-stage,
  .package-stage,
  .catch-stage,
  .credits-frame {
    border-width: 0.42vw;
  }

  .poster-stage {
    top: 1.2vw;
    height: 168vw;
  }

  .poster-logo {
    top: 4.4vw;
    left: 4vw;
    width: 14.5vw;
  }

  .poster-nav {
    top: 5vw;
    left: 57vw;
    gap: 1.4vw;
    font-size: 3.05vw;
    max-width: none;
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  .poster-nav__arrow {
    font-size: 3vw;
  }

  .poster-word--own {
    --font-size: 12vw;
    --final-left: 39vw;
    --final-top: 148vw;
    --final-rotate: 24deg;
  }

  .poster-word--unique {
    --font-size: 12vw;
    --final-left: 27vw;
    --final-top: 128vw;
    --final-rotate: -8deg;
  }

  .poster-word--perfume {
    --font-size: 12vw;
    --final-left: 42vw;
    --final-top: 111vw;
    --final-rotate: -27deg;
  }

  .poster-word--create {
    --font-size: 12vw;
    --final-left: 2vw;
    --final-top: 152vw;
    --final-rotate: 10deg;
  }

  .poster-object--berry {
    left: 8.5vw;
    top: 128vw;
    width: 23vw;
  }

  .poster-object--flower {
    left: 67vw;
    top: 142vw;
    width: 28vw;
  }

  .poster-object--bottle {
    left: 71vw;
    top: 99vw;
    width: 27vw;
    --base-rotate: 12deg;
  }

  .content-section {
    min-height: 98vw;
    padding: 0 7vw;
  }

  .content-section__inner {
    max-width: 82vw;
  }

  .content-section__eyebrow {
    font-size: 3vw;
  }

  .content-section h2 {
    font-size: 14vw;
  }

  .content-section p {
    font-size: 4.2vw;
  }

  .labyrinth-section {
    margin-top: -6vw;
    padding: 0 2vw 2vw;
    scroll-margin-top: 2vw;
  }

  .labyrinth-frame {
    width: 96vw;
    height: 178vw;
  }

  .labyrinth-stage {
    top: 1.2vw;
    height: 170vw;
    display: block;
    padding: 0;
  }

  .labyrinth-copy {
    position: absolute;
    top: 6vw;
    left: 50%;
    z-index: 4;
    width: 84vw;
    max-width: none;
    transform: translateX(-50%);
    text-align: center;
  }

  .labyrinth-copy__head {
    justify-content: center;
    gap: 1.8vw;
  }

  .labyrinth-badge {
    width: 7vw;
    height: 7vw;
    font-size: 3.8vw;
  }

  .labyrinth-copy h2 {
    font-size: 10vw;
  }

  .labyrinth-copy__text {
    margin-top: 3vw;
    font-size: 4vw;
    line-height: 1.12;
  }

  .labyrinth-controls {
    position: absolute;
    left: 50%;
    top: 116vw;
    width: 38vw;
    height: 38vw;
    margin: 0;
    transform: translateX(-50%);
  }

  .labyrinth-control {
    width: 16vw;
    height: 16vw;
  }

  .labyrinth-control--up,
  .labyrinth-control--down {
    left: 11vw;
  }

  .labyrinth-control--up {
    top: 0vw;
  }

  .labyrinth-control--down {
    bottom: 0vw;
  }

  .labyrinth-control--left,
  .labyrinth-control--right {
    top: 11vw;
  }

  .labyrinth-control--left {
    left: 0vw;
  }

  .labyrinth-control--right {
    right: 0vw;
  }

  .labyrinth-status {
    display: none;
  }

  .maze-board {
    position: absolute;
    top: 42vw;
    left: 50%;
    width: 79vw;
    height: 71vw;
    margin: 0;
    transform: translateX(-50%);
  }

  .maze-board__image {
    object-fit: contain;
  }

  .maze-player {
    width: 5.8vw;
    height: 5.8vw;
    margin-left: -2.9vw;
    margin-top: -2.9vw;
  }

  .maze-item--peach { width: 8.5vw; }
  .maze-item--peach { left: calc(2.4% - 1.5vw); top: calc(26.2% - 2vw); }
  .maze-item--hibiscus { width: 10vw; }
  .maze-item--tube { width: 10.8vw; }
  .maze-item--plumeria { width: 11vw; }
  .maze-item--plumeria { left: calc(39.8% + 7.2vw); top: calc(77.8% - 11.7vw); }
  .maze-item--berry { width: 8.5vw; }
  .maze-item--hibiscus { right: calc(6.2% - 4vw); }
  .maze-item--berry { right: calc(8.2% - 3.8vw); }

  .place-section {
    margin-top: 0;
    padding: 0 2vw 2vw;
    scroll-margin-top: 2vw;
  }

  .place-frame {
    width: 96vw;
    height: 176vw;
  }

  .place-stage {
    top: 1.2vw;
    height: 168vw;
  }

  .place-copy {
    top: 7vw;
    left: 50%;
    right: auto;
    width: 82vw;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
  }

  .place-copy__head {
    justify-content: center;
    gap: 1.8vw;
  }

  .place-badge {
    width: 7vw;
    height: 7vw;
    font-size: 3.8vw;
  }

  .place-copy h2 {
    font-size: 10vw;
  }

  .place-copy__text {
    margin-top: 2.4vw;
    margin-left: 0;
    font-size: 4.2vw;
    line-height: 1.18;
  }

  .place-target {
    width: 45vw;
    height: 55vw;
  }

  .place-target--pink {
    left: 50%;
    top: 26vw;
    transform: translateX(-50%);
  }

  .place-target--blue {
    left: 50%;
    top: 70vw;
    transform: translateX(-50%);
  }

  .place-target--green {
    left: 50%;
    top: 114vw;
    transform: translateX(-50%);
  }

  .place-bottle {
    width: 37vw;
  }

  .place-bottle.is-locked {
    width: 32vw;
  }

  .place-bottle--pink {
    left: 5vw;
    top: 24vw;
  }

  .place-bottle--green {
    left: 61vw;
    top: 58vw;
  }

  .place-bottle--blue {
    right: auto;
    left: 4vw;
    top: 128vw;
  }

  .pair-section {
    margin-top: 0;
    padding: 0 2vw 2vw;
    scroll-margin-top: 2vw;
  }

  .pair-frame {
    width: 96vw;
    height: 172vw;
  }

  .pair-stage {
    top: 1.2vw;
    height: 164vw;
  }

  .pair-copy {
    top: 8vw;
    left: 50%;
    width: 82vw;
    transform: translateX(-50%);
    text-align: center;
  }

  .pair-copy__head {
    justify-content: center;
    gap: 1.8vw;
  }

  .pair-badge {
    width: 7vw;
    height: 7vw;
    font-size: 3.8vw;
  }

  .pair-copy h2 {
    font-size: 10vw;
  }

  .pair-copy__text {
    margin-top: 2.4vw;
    font-size: 4vw;
    line-height: 1.15;
  }

  .pair-grid {
    top: 37vw;
    left: 50%;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4.5vw;
    row-gap: 5vw;
    transform: translateX(-50%);
  }

  .pair-card {
    width: 25vw;
    height: 37.5vw;
  }

  .pair-card__face {
    border-width: 0;
  }

  .pair-card {
    border-width: 0.3vw;
  }

  .package-section {
    margin-top: 0;
    padding: 0 2vw 2vw;
    scroll-margin-top: 2vw;
  }

  .package-frame {
    width: 96vw;
    height: 168vw;
  }

  .package-stage {
    top: 1.2vw;
    height: 160vw;
  }

  .package-swatches {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 6vw;
    flex-direction: row;
    gap: 6vw;
    transform: translateX(-50%);
  }

  .package-swatch {
    width: 14vw;
    height: 14vw;
  }

  .package-workspace {
    left: 50%;
    top: 42vw;
    width: 84vw;
    height: 92vw;
    transform: translateX(-50%);
  }

  .package-copy {
    top: 8vw;
    left: 50%;
    right: auto;
    width: 86vw;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
  }

  .package-copy__head {
    justify-content: center;
    gap: 1.8vw;
  }

  .package-badge {
    width: 7vw;
    height: 7vw;
    font-size: 3.8vw;
  }

  .package-copy h2 {
    font-size: 10vw;
  }

  .package-copy__text {
    margin-top: 2.4vw;
    margin-left: 0;
    font-size: 3.9vw;
    line-height: 1.2;
  }

  .package-pen {
    display: none;
  }

  .package-workspace {
    touch-action: none;
  }

  .package-workspace.is-drawing .package-canvas,
  .package-canvas {
    pointer-events: auto;
  }

  .catch-section {
    margin-top: 0;
    padding: 0 2vw 2vw;
  }

  .catch-frame {
    width: 96vw;
    height: 174vw;
  }

  .catch-stage {
    top: 1.2vw;
    height: 166vw;
  }

  .catch-copy {
    top: 9vw;
    left: 50%;
    width: 84vw;
    transform: translateX(-50%);
    text-align: center;
  }

  .catch-copy__head {
    justify-content: center;
    gap: 1.8vw;
  }

  .catch-badge {
    width: 7vw;
    height: 7vw;
    font-size: 3.8vw;
  }

  .catch-copy h2 {
    font-size: 10vw;
  }

  .catch-copy__text {
    margin-top: 2.4vw;
    font-size: 4.2vw;
    line-height: 1.18;
  }

  .catch-bottle {
    width: 33vw;
  }

  .catch-bottle.is-caught {
    width: 108vw;
    top: 58% !important;
  }

  .credits-section {
    padding: 0 2vw 2vw;
  }

  .credits-frame {
    width: 94vw;
    margin: 0 -2.2vw 0 auto;
  }

  .credits-stage {
    min-height: 48vw;
    padding: 5vw 4vw 8vw;
  }

  .credits-copy {
    max-width: 100%;
    padding-right: 14vw;
  }

  .credits-copy p {
    font-size: 6.5vw;
    line-height: 1.12;
  }

  .credits-copy p + p {
    margin-top: 4vw;
  }

  .credits-logo {
    right: 4vw;
    top: auto;
    bottom: 4vw;
    width: 14vw;
  }
}