/* 전체 박스 크기를 계산하기 쉽게 만듭니다. */
* {
  box-sizing: border-box;
}

/* Sunset sea premium panorama: wide scenic motion without stripe artifacts. */
.travel-scene-id-sea_02_sunset .travel-playback {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 229, 159, 0.2),
      transparent 28%
    ),
    linear-gradient(180deg, #6f63b6 0%, #d95d91 36%, #f0a35c 68%, #695a92 100%);
}

.travel-scene-id-sea_02_sunset .travel-layer-base {
  inset: -5% -4% -7%;
  background-position: 50% 53%;
  background-repeat: no-repeat;
  background-size: auto 118%;
  filter: saturate(1.12) contrast(1.02) brightness(1.03);
  transform-origin: center center;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-panorama {
  animation:
    travelSunsetPremiumPanorama 300s cubic-bezier(0.45, 0, 0.2, 1) infinite,
    travelSunsetPremiumColorCycle 72s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-clouds {
  inset: -20% -72% 42% -72%;
  z-index: 2;
  opacity: 0.36;
  background-image:
    url('assets/effects/cloud_filter_01.png'),
    url('assets/effects/cloud_filter_01.png'),
    url('assets/effects/cloud_filter_01.png');
  background-position:
    8% 18%,
    56% 4%,
    92% 24%;
  background-repeat: no-repeat;
  background-size:
    36% auto,
    48% auto,
    32% auto;
  mix-blend-mode: screen;
  filter: saturate(0.9) hue-rotate(142deg) brightness(1.18);
}

.travel-scene-id-sea_02_sunset .sunset-sea-stage.is-playing .sunset-sea-clouds {
  animation:
    travelSunsetPremiumClouds 150s ease-in-out infinite,
    travelSunsetPremiumCloudTone 64s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-waves {
  inset: auto -12% -9% -12%;
  z-index: 3;
  height: 58%;
  opacity: 0.44;
  background:
    radial-gradient(
      ellipse at 48% 36%,
      rgba(255, 229, 156, 0.3),
      transparent 22%
    ),
    radial-gradient(
      ellipse at 22% 56%,
      rgba(203, 105, 179, 0.18),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 72% 70%,
      rgba(255, 174, 105, 0.22),
      transparent 34%
    ) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  mix-blend-mode: screen;
  filter: blur(7px) saturate(1.05);
}

.travel-scene-id-sea_02_sunset .travel-layer-waves::before,
.travel-scene-id-sea_02_sunset .travel-layer-waves::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  pointer-events: none;
}

.travel-scene-id-sea_02_sunset .travel-layer-waves::before {
  opacity: 0.5;
  background:
    radial-gradient(
      ellipse at 28% 48%,
      rgba(255, 244, 190, 0.24),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 50% 60%,
      rgba(255, 184, 133, 0.24),
      transparent 26%
    ),
    radial-gradient(
      ellipse at 74% 44%,
      rgba(187, 110, 204, 0.16),
      transparent 24%
    ) !important;
  filter: blur(8px);
}

.travel-scene-id-sea_02_sunset .travel-layer-waves::after {
  opacity: 0.42;
  background:
    radial-gradient(
      ellipse at 34% 62%,
      rgba(255, 230, 172, 0.2),
      transparent 22%
    ),
    radial-gradient(
      ellipse at 64% 48%,
      rgba(255, 136, 152, 0.18),
      transparent 26%
    ),
    radial-gradient(
      ellipse at 82% 72%,
      rgba(255, 201, 122, 0.18),
      transparent 28%
    ) !important;
  filter: blur(10px);
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-wave-front {
  animation:
    travelSunsetPremiumWaveDrift 18s ease-in-out infinite,
    travelSunsetPremiumWaveTone 58s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-wave-front::before {
  animation: travelSunsetPremiumWavePulse 22s ease-in-out infinite alternate;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-wave-front::after {
  animation: travelSunsetPremiumWavePulse 28s ease-in-out infinite
    alternate-reverse;
}

.travel-scene-id-sea_02_sunset .travel-layer-light {
  z-index: 4;
  opacity: 0.42;
  background:
    radial-gradient(
      circle at 50% 39%,
      rgba(255, 237, 151, 0.5),
      transparent 16%
    ),
    radial-gradient(
      ellipse at 50% 66%,
      rgba(255, 208, 112, 0.3),
      transparent 22%
    ),
    linear-gradient(
      90deg,
      rgba(87, 72, 164, 0.26),
      transparent 28%,
      rgba(251, 102, 133, 0.22) 55%,
      rgba(241, 159, 67, 0.28)
    );
  mix-blend-mode: soft-light;
  filter: saturate(1.08);
}

.travel-scene-id-sea_02_sunset .sunset-sea-stage.is-playing .sunset-sea-light {
  animation: travelSunsetPremiumLightShift 52s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-playback::before {
  z-index: 5;
  opacity: 0.42;
  background:
    linear-gradient(
      90deg,
      rgba(63, 70, 163, 0.26),
      rgba(199, 54, 146, 0.2) 24%,
      rgba(245, 105, 119, 0.22) 46%,
      rgba(255, 171, 85, 0.24) 68%,
      rgba(158, 107, 70, 0.18)
    ),
    radial-gradient(
      circle at 50% 37%,
      rgba(255, 234, 169, 0.22),
      transparent 26%
    );
  mix-blend-mode: color;
  animation: travelSunsetPremiumColorWash 72s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-playback::after {
  inset: 45% -8% -8%;
  z-index: 6;
  opacity: 0.34;
  background:
    radial-gradient(
      ellipse at 49% 28%,
      rgba(255, 236, 161, 0.34),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 34% 66%,
      rgba(189, 96, 195, 0.16),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 69% 72%,
      rgba(247, 119, 90, 0.18),
      transparent 32%
    );
  mix-blend-mode: screen;
  filter: blur(12px);
  animation: travelSunsetPremiumWaterGlow 48s ease-in-out infinite;
}

/* Latest sunset sea pass: no baked-in shape artifacts, intermittent clouds, boat and reflection layers. */
.travel-scene-id-sea_02_sunset .travel-playback {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(255, 228, 159, 0.12),
      transparent 24%
    ),
    linear-gradient(180deg, #675eb0 0%, #cb5d98 34%, #efa062 66%, #695a94 100%);
}

.travel-scene-id-sea_02_sunset .travel-layer-base {
  inset: -4% -3% -6%;
  background-position: 50% 53%;
  background-repeat: no-repeat;
  background-size: auto 106%;
  filter: saturate(1.08) contrast(1.01) brightness(1.02);
  transform-origin: center center;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-panorama {
  animation:
    travelSunsetDistantPanorama 300s cubic-bezier(0.45, 0, 0.2, 1) infinite,
    travelSunsetDuskColorCycle 68s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-clouds {
  inset: -22% -76% 44% -76%;
  z-index: 2;
  opacity: 0;
  background-image:
    url('assets/effects/cloud_filter_01.png'),
    url('assets/effects/cloud_filter_01.png'),
    url('assets/effects/cloud_filter_01.png');
  background-position:
    8% 18%,
    56% 4%,
    92% 24%;
  background-repeat: no-repeat;
  background-size:
    36% auto,
    48% auto,
    32% auto;
  mix-blend-mode: soft-light;
  filter: saturate(0.86) hue-rotate(140deg) brightness(1.18) blur(0.2px);
}

.travel-scene-id-sea_02_sunset .sunset-sea-stage.is-playing .sunset-sea-clouds {
  animation: travelSunsetCloudIntermittent 20s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-waves {
  inset: auto -12% -9% -12%;
  z-index: 3;
  height: 58%;
  opacity: 0.4;
  background:
    radial-gradient(
      ellipse at 48% 36%,
      rgba(255, 229, 156, 0.26),
      transparent 22%
    ),
    radial-gradient(
      ellipse at 22% 56%,
      rgba(203, 105, 179, 0.14),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 72% 70%,
      rgba(255, 174, 105, 0.18),
      transparent 34%
    ) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  mix-blend-mode: screen;
  filter: blur(8px) saturate(1.03);
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-wave-front {
  animation:
    travelSunsetEarlyWaveDrift 11s ease-in-out infinite,
    travelSunsetWaveWarmth 54s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-light {
  z-index: 4;
  opacity: 0.34;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 236, 161, 0.28),
      transparent 12%
    ),
    radial-gradient(
      ellipse at 50% 66%,
      rgba(255, 208, 112, 0.24),
      transparent 20%
    ),
    linear-gradient(
      90deg,
      rgba(87, 72, 164, 0.22),
      transparent 28%,
      rgba(251, 102, 133, 0.18) 55%,
      rgba(241, 159, 67, 0.24)
    );
  mix-blend-mode: soft-light;
  filter: saturate(1.08);
}

.travel-scene-id-sea_02_sunset .sunset-sea-stage.is-playing .sunset-sea-light {
  animation: travelSunsetTimeLightShift 46s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-playback::before {
  z-index: 5;
  opacity: 0.36;
  background:
    linear-gradient(
      90deg,
      rgba(58, 64, 158, 0.22),
      rgba(180, 58, 150, 0.18) 22%,
      rgba(232, 82, 126, 0.2) 45%,
      rgba(255, 158, 80, 0.22) 68%,
      rgba(153, 105, 72, 0.18)
    ),
    radial-gradient(
      circle at 50% 38%,
      rgba(255, 229, 165, 0.16),
      transparent 23%
    );
  mix-blend-mode: color;
  animation: travelSunsetTimeColorWash 64s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-playback::after {
  inset: 45% -8% -8%;
  z-index: 6;
  opacity: 0.28;
  background:
    radial-gradient(
      ellipse at 49% 28%,
      rgba(255, 236, 161, 0.28),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 34% 66%,
      rgba(189, 96, 195, 0.12),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 69% 72%,
      rgba(247, 119, 90, 0.14),
      transparent 32%
    );
  mix-blend-mode: screen;
  filter: blur(13px);
  animation: travelSunsetWaterGlowSoft 36s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer {
  inset: 42% 34% 4% 34%;
  z-index: 7;
  opacity: 0;
  background-image: url('assets/effects/sunset_reflection_02.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: screen;
  filter: saturate(0.72) sepia(0.24) hue-rotate(332deg) brightness(1.2)
    blur(0.15px);
  transform-origin: center top;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-reflection-layer {
  animation: travelSunsetReflectionBlink 9.5s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-boat-layer {
  inset: auto;
  left: 13%;
  top: 52%;
  z-index: 8;
  display: block;
  width: clamp(74px, 7vw, 138px);
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.78;
  filter: saturate(0.96) brightness(0.96)
    drop-shadow(0 8px 10px rgba(67, 45, 82, 0.12));
  transform-origin: 50% 78%;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-boat-layer {
  animation: travelSunsetBoatFloat 5.6s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
  inset: auto;
  right: 8.8%;
  top: 33.5%;
  z-index: 7;
  display: block;
  width: clamp(58px, 5.2vw, 104px);
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: multiply;
  filter: saturate(0.88) sepia(0.16) hue-rotate(338deg) brightness(1.04)
    drop-shadow(0 8px 12px rgba(72, 43, 62, 0.12));
  transform: translate3d(34px, 8px, 0) scale(0.88);
  transform-origin: 50% 88%;
  will-change: transform, opacity, filter;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-lighthouse-layer {
  animation: travelSunsetLighthousePass 300s ease-in-out infinite;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-layer-base {
    background-size: auto 112%;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-boat-layer {
    left: 9%;
    top: 56%;
    width: clamp(58px, 16vw, 92px);
    opacity: 0.72;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer {
    inset: 45% 27% 8% 27%;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
    right: 5%;
    top: 34.5%;
    width: clamp(44px, 13vw, 68px);
  }
}

/* Clear sea UI restore v1: labels/progress only, no scene motion changes. */
body.travel-scene-playing-mode
  .travel-scene-id-sea_01_clear
  .travel-intro-progress {
  position: absolute !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 44 !important;
  display: block !important;
  width: min(240px, 42vw) !important;
  height: 7px !important;
  transform: translateX(-50%) !important;
  opacity: 0.95 !important;
  pointer-events: none;
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_01_clear
  .travel-intro-progress
  span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  animation: travelIntroFill var(--travel-intro-duration, 300s) linear forwards !important;
  transform-origin: left center;
}

@media (max-width: 600px) {
  body.travel-scene-playing-mode
    .travel-scene-id-sea_01_clear
    .travel-intro-progress {
    top: 9px !important;
    width: min(190px, 46vw) !important;
    height: 6px !important;
  }
}

@keyframes travelSunsetDistantPanorama {
  0%,
  100% {
    background-position: 50% 53%;
    background-size: auto 106%;
    transform: translate3d(0, 0, 0) scale(1.002);
  }

  4% {
    background-position: 50.8% 53.2%;
    background-size: auto 106.8%;
    transform: translate3d(-0.2%, -0.2%, 0) scale(1.006);
  }

  18% {
    background-position: 44% 54%;
    background-size: auto 108%;
    transform: translate3d(0.3%, -0.5%, 0) scale(1.012);
  }

  36% {
    background-position: 53% 52%;
    background-size: auto 106.6%;
    transform: translate3d(0, 0.1%, 0) scale(1.004);
  }

  58% {
    background-position: 61% 53.5%;
    background-size: auto 109%;
    transform: translate3d(-0.4%, -0.3%, 0) scale(1.014);
  }

  76% {
    background-position: 48% 52%;
    background-size: auto 107%;
    transform: translate3d(0.2%, 0, 0) scale(1.006);
  }

  90% {
    background-position: 51% 53%;
    background-size: auto 106.5%;
    transform: translate3d(0, -0.15%, 0) scale(1.004);
  }
}

@keyframes travelSunsetDuskColorCycle {
  0%,
  100% {
    filter: saturate(1.06) contrast(1.01) brightness(1.01) hue-rotate(-8deg);
  }

  18% {
    filter: saturate(1.1) contrast(1.02) brightness(1.03) hue-rotate(5deg);
  }

  36% {
    filter: saturate(1.18) contrast(1.03) brightness(1.05) hue-rotate(14deg);
  }

  58% {
    filter: saturate(1.12) contrast(1.02) brightness(1.02) hue-rotate(-12deg);
  }

  78% {
    filter: saturate(1.16) contrast(1.02) brightness(0.98) hue-rotate(-24deg);
  }
}

@keyframes travelSunsetCloudIntermittent {
  0% {
    opacity: 0;
    background-position:
      6% 18%,
      55% 4%,
      91% 24%;
    transform: translate3d(-1.2%, 0, 0) scale(1);
    filter: saturate(0.85) hue-rotate(140deg) brightness(1.12) blur(0.8px);
  }

  7% {
    opacity: 0.3;
    transform: translate3d(-0.4%, -0.2%, 0) scale(1.006);
  }

  20% {
    opacity: 0.42;
    background-position:
      10% 16%,
      58% 5%,
      94% 21%;
    transform: translate3d(0.6%, -0.4%, 0) scale(1.012);
    filter: saturate(0.95) hue-rotate(132deg) brightness(1.24) blur(0.15px);
  }

  34% {
    opacity: 0.2;
    transform: translate3d(1.4%, -0.1%, 0) scale(1.008);
  }

  46%,
  100% {
    opacity: 0;
    background-position:
      14% 17%,
      62% 5%,
      98% 23%;
    transform: translate3d(2.2%, 0, 0) scale(1.004);
    filter: saturate(0.84) hue-rotate(140deg) brightness(1.1) blur(0.9px);
  }
}

@keyframes travelSunsetEarlyWaveDrift {
  0%,
  100% {
    transform: translate3d(-0.4%, 0, 0) scaleY(1);
    opacity: 0.38;
  }

  14% {
    transform: translate3d(0.6%, -0.8%, 0) scaleY(1.025);
    opacity: 0.48;
  }

  42% {
    transform: translate3d(1.1%, 0.3%, 0) scaleY(0.985);
    opacity: 0.4;
  }

  72% {
    transform: translate3d(-0.8%, -0.35%, 0) scaleY(1.015);
    opacity: 0.46;
  }
}

@keyframes travelSunsetWaveWarmth {
  0%,
  100% {
    filter: blur(8px) saturate(1.02) hue-rotate(0deg);
  }

  34% {
    filter: blur(7px) saturate(1.16) hue-rotate(12deg);
  }

  70% {
    filter: blur(8px) saturate(1.08) hue-rotate(-18deg);
  }
}

@keyframes travelSunsetTimeLightShift {
  0%,
  100% {
    opacity: 0.28;
    transform: translate3d(-1.5%, 0, 0) scale(1);
  }

  30% {
    opacity: 0.44;
    transform: translate3d(1%, -0.5%, 0) scale(1.03);
  }

  62% {
    opacity: 0.38;
    transform: translate3d(-0.4%, 0.4%, 0) scale(1.015);
  }

  82% {
    opacity: 0.5;
    transform: translate3d(0.8%, -0.2%, 0) scale(1.04);
  }
}

@keyframes travelSunsetTimeColorWash {
  0%,
  100% {
    opacity: 0.26;
    filter: hue-rotate(-18deg) saturate(1.02);
  }

  18% {
    opacity: 0.36;
    filter: hue-rotate(6deg) saturate(1.12);
  }

  36% {
    opacity: 0.43;
    filter: hue-rotate(24deg) saturate(1.18);
  }

  55% {
    opacity: 0.34;
    filter: hue-rotate(-8deg) saturate(1.08);
  }

  74% {
    opacity: 0.42;
    filter: hue-rotate(-32deg) saturate(1.12);
  }
}

@keyframes travelSunsetWaterGlowSoft {
  0%,
  100% {
    opacity: 0.22;
    transform: translate3d(-0.8%, 0, 0) scale(1);
  }

  20% {
    opacity: 0.4;
    transform: translate3d(0.4%, -0.2%, 0) scale(1.02);
  }

  52% {
    opacity: 0.28;
    transform: translate3d(0.9%, 0.2%, 0) scale(1.01);
  }

  80% {
    opacity: 0.38;
    transform: translate3d(-0.3%, -0.1%, 0) scale(1.018);
  }
}

@keyframes travelSunsetReflectionBlink {
  0% {
    opacity: 0;
    transform: translate3d(0, 2%, 0) scale(0.96);
  }

  10% {
    opacity: 0.18;
  }

  22% {
    opacity: 0.48;
    transform: translate3d(1.2%, -0.8%, 0) scale(1.02);
  }

  40% {
    opacity: 0.14;
    transform: translate3d(-0.6%, 0.3%, 0) scale(1.005);
  }

  54%,
  100% {
    opacity: 0;
    transform: translate3d(0, 2%, 0) scale(0.98);
  }
}

@keyframes travelSunsetBoatFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1.4deg) scale(1);
  }

  24% {
    transform: translate3d(2px, -4px, 0) rotate(1.2deg) scale(1.008);
  }

  52% {
    transform: translate3d(-1px, 2px, 0) rotate(-0.4deg) scale(0.998);
  }

  76% {
    transform: translate3d(1px, -2px, 0) rotate(0.8deg) scale(1.004);
  }
}

@keyframes travelSunsetLighthousePass {
  0%,
  5%,
  19%,
  36%,
  52%,
  68%,
  86%,
  100% {
    opacity: 0;
    filter: saturate(0.86) sepia(0.18) hue-rotate(338deg) brightness(1.02)
      drop-shadow(0 8px 12px rgba(72, 43, 62, 0.1));
    transform: translate3d(34px, 9px, 0) scale(0.86);
  }

  8% {
    opacity: 0.24;
    transform: translate3d(18px, 4px, 0) scale(0.9);
  }

  11% {
    opacity: 0.58;
    filter: saturate(0.92) sepia(0.24) hue-rotate(340deg) brightness(1.06)
      drop-shadow(0 10px 16px rgba(72, 43, 62, 0.13));
    transform: translate3d(0, -1px, 0) scale(0.94);
  }

  15% {
    opacity: 0.42;
    transform: translate3d(-12px, -3px, 0) scale(0.93);
  }

  41% {
    opacity: 0.2;
    transform: translate3d(26px, 7px, 0) scale(0.88);
  }

  45% {
    opacity: 0.62;
    filter: saturate(0.9) sepia(0.22) hue-rotate(336deg) brightness(1.05)
      drop-shadow(0 10px 16px rgba(72, 43, 62, 0.13));
    transform: translate3d(4px, -2px, 0) scale(0.95);
  }

  49% {
    opacity: 0.36;
    transform: translate3d(-10px, 0, 0) scale(0.92);
  }

  73% {
    opacity: 0.18;
    transform: translate3d(30px, 8px, 0) scale(0.87);
  }

  77% {
    opacity: 0.54;
    filter: saturate(0.88) sepia(0.2) hue-rotate(342deg) brightness(1.04)
      drop-shadow(0 10px 15px rgba(72, 43, 62, 0.12));
    transform: translate3d(2px, -2px, 0) scale(0.93);
  }

  82% {
    opacity: 0.34;
    transform: translate3d(-14px, -1px, 0) scale(0.91);
  }
}

@keyframes travelSunsetPremiumPanorama {
  0%,
  100% {
    background-position: 50% 53%;
    background-size: auto 118%;
    transform: translate3d(0, 0, 0) scale(1.004);
  }

  14% {
    background-position: 50% 53%;
    background-size: auto 119%;
    transform: translate3d(0, -0.4%, 0) scale(1.01);
  }

  30% {
    background-position: 16% 55%;
    background-size: auto 121%;
    transform: translate3d(0.8%, 0.2%, 0) scale(1.026);
  }

  44% {
    background-position: 48% 53%;
    background-size: auto 118%;
    transform: translate3d(0, 0, 0) scale(1.006);
  }

  62% {
    background-position: 84% 54%;
    background-size: auto 121%;
    transform: translate3d(-0.8%, -0.2%, 0) scale(1.024);
  }

  78% {
    background-position: 58% 51%;
    background-size: auto 119%;
    transform: translate3d(0, -0.8%, 0) scale(1.012);
  }

  90% {
    background-position: 50% 53%;
    background-size: auto 118%;
    transform: translate3d(0, 0.2%, 0) scale(1.006);
  }
}

@keyframes travelSunsetPremiumColorCycle {
  0%,
  100% {
    filter: saturate(1.08) contrast(1.02) brightness(1.02) hue-rotate(-38deg);
  }

  18% {
    filter: saturate(1.18) contrast(1.03) brightness(1.03) hue-rotate(-18deg);
  }

  34% {
    filter: saturate(1.25) contrast(1.04) brightness(1.04) hue-rotate(10deg);
  }

  52% {
    filter: saturate(1.18) contrast(1.03) brightness(1.02) hue-rotate(26deg);
  }

  72% {
    filter: saturate(1.2) contrast(1.02) brightness(1.04) hue-rotate(46deg);
  }

  88% {
    filter: saturate(1.08) contrast(1.02) brightness(1) hue-rotate(-8deg);
  }
}

@keyframes travelSunsetPremiumClouds {
  0%,
  100% {
    background-position:
      8% 18%,
      56% 4%,
      92% 24%;
    transform: translate3d(-1%, 0, 0) scale(1);
  }

  28% {
    background-position:
      18% 14%,
      48% 8%,
      84% 20%;
    transform: translate3d(2.2%, -1.2%, 0) scale(1.025);
  }

  52% {
    background-position:
      12% 22%,
      62% 5%,
      78% 28%;
    transform: translate3d(-1.5%, 1.2%, 0) scale(1.01);
  }

  76% {
    background-position:
      22% 16%,
      52% 12%,
      96% 18%;
    transform: translate3d(1.4%, -0.7%, 0) scale(1.022);
  }
}

@keyframes travelSunsetPremiumCloudTone {
  0%,
  100% {
    opacity: 0.28;
    filter: saturate(0.85) hue-rotate(132deg) brightness(1.1);
  }

  35% {
    opacity: 0.43;
    filter: saturate(1.05) hue-rotate(164deg) brightness(1.28);
  }

  62% {
    opacity: 0.34;
    filter: saturate(1) hue-rotate(198deg) brightness(1.18);
  }

  82% {
    opacity: 0.46;
    filter: saturate(1.06) hue-rotate(92deg) brightness(1.24);
  }
}

@keyframes travelSunsetPremiumWaveDrift {
  0%,
  100% {
    transform: translate3d(-1.5%, 1%, 0) scaleX(1.01) scaleY(0.98);
    opacity: 0.38;
  }

  36% {
    transform: translate3d(1.6%, -0.4%, 0) scaleX(1.035) scaleY(1.04);
    opacity: 0.52;
  }

  68% {
    transform: translate3d(-0.3%, 0.8%, 0) scaleX(1.02) scaleY(1.01);
    opacity: 0.45;
  }
}

@keyframes travelSunsetPremiumWaveTone {
  0%,
  100% {
    filter: blur(7px) saturate(0.98) hue-rotate(-36deg) brightness(1);
  }

  30% {
    filter: blur(6px) saturate(1.18) hue-rotate(18deg) brightness(1.1);
  }

  58% {
    filter: blur(8px) saturate(1.08) hue-rotate(52deg) brightness(1.04);
  }

  78% {
    filter: blur(6px) saturate(1.2) hue-rotate(-6deg) brightness(1.12);
  }
}

@keyframes travelSunsetPremiumWavePulse {
  0% {
    transform: translate3d(-2.4%, 0.8%, 0) scaleX(1);
    opacity: 0.34;
  }

  100% {
    transform: translate3d(2.4%, -0.8%, 0) scaleX(1.06);
    opacity: 0.56;
  }
}

@keyframes travelSunsetPremiumLightShift {
  0%,
  100% {
    opacity: 0.24;
    filter: saturate(0.9) hue-rotate(-26deg) brightness(1);
    transform: translate3d(-2%, 1%, 0) scale(1);
  }

  32% {
    opacity: 0.48;
    filter: saturate(1.22) hue-rotate(8deg) brightness(1.18);
    transform: translate3d(1.2%, -0.8%, 0) scale(1.035);
  }

  60% {
    opacity: 0.36;
    filter: saturate(1.08) hue-rotate(40deg) brightness(1.08);
    transform: translate3d(-1%, 0, 0) scale(1.018);
  }

  82% {
    opacity: 0.5;
    filter: saturate(1.16) hue-rotate(-8deg) brightness(1.16);
    transform: translate3d(2%, -0.4%, 0) scale(1.028);
  }
}

@keyframes travelSunsetPremiumColorWash {
  0%,
  100% {
    opacity: 0.28;
    filter: hue-rotate(220deg) saturate(1.08) brightness(1);
  }

  18% {
    opacity: 0.42;
    filter: hue-rotate(270deg) saturate(1.16) brightness(1.04);
  }

  36% {
    opacity: 0.48;
    filter: hue-rotate(310deg) saturate(1.2) brightness(1.04);
  }

  54% {
    opacity: 0.4;
    filter: hue-rotate(345deg) saturate(1.12) brightness(1.02);
  }

  74% {
    opacity: 0.48;
    filter: hue-rotate(22deg) saturate(1.16) brightness(1.06);
  }

  88% {
    opacity: 0.36;
    filter: hue-rotate(48deg) saturate(1.06) brightness(1.02);
  }
}

@keyframes travelSunsetPremiumWaterGlow {
  0%,
  100% {
    opacity: 0.22;
    transform: translate3d(-2%, 1%, 0) scaleX(1);
  }

  34% {
    opacity: 0.42;
    transform: translate3d(2%, -0.6%, 0) scaleX(1.08);
  }

  66% {
    opacity: 0.32;
    transform: translate3d(-1%, 0.4%, 0) scaleX(1.02);
  }
}

:root {
  --page-bg: #fff3df;
  --app-bg: #fff8ef;
  --bar-bg: #fffaf4;
  --panel-bg: #fffaf4;
  --card-bg: #ffffff;
  --card-hover-bg: #fff6ec;
  --preview-bg: #ffffff;
  --line-color: #ead8c2;
  --strong-line: #d9bea1;
  --text-color: #34251e;
  --muted-color: #816c5e;
  --soft-color: #aa917e;
  --button-bg: #fff2e3;
  --button-text: #4b3a30;
  --accent-color: #4fa9e8;
  --accent-soft: rgba(79, 169, 232, 0.2);
  --shadow-color: rgba(99, 64, 32, 0.16);
  --surface-3d: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 237, 215, 0.9)
  );
  --surface-3d-deep: linear-gradient(
    145deg,
    rgba(255, 248, 239, 0.95),
    rgba(239, 216, 191, 0.88)
  );
  --surface-rim: rgba(255, 255, 255, 0.82);
  --surface-lowlight: rgba(140, 100, 66, 0.15);
  --outer-3d-shadow:
    14px 18px 34px rgba(123, 82, 46, 0.14),
    -8px -8px 22px rgba(255, 255, 255, 0.72);
  --inner-3d-shadow:
    inset 4px 4px 10px rgba(255, 255, 255, 0.82),
    inset -8px -10px 18px rgba(141, 93, 54, 0.14);
  --pressed-3d-shadow:
    inset 5px 6px 12px rgba(126, 82, 45, 0.16),
    inset -5px -5px 12px rgba(255, 255, 255, 0.72);
  --clay-drop-shadow:
    0 18px 24px rgba(73, 49, 36, 0.18), 0 4px 6px rgba(255, 255, 255, 0.26);
  --clay-inset-shadow:
    inset 12px 14px 22px rgba(255, 255, 255, 0.24),
    inset -14px -18px 26px rgba(75, 45, 36, 0.18);
}

body[data-theme='dark'] {
  --page-bg: #10191d;
  --app-bg: #10191d;
  --bar-bg: #111b20;
  --panel-bg: #10191d;
  --card-bg: #173f3b;
  --card-hover-bg: #1d4f49;
  --preview-bg: #111b20;
  --line-color: #26343b;
  --strong-line: #2d3d45;
  --text-color: #f3f8fb;
  --muted-color: #dce7ec;
  --soft-color: #82909a;
  --button-bg: #152126;
  --button-text: #dce7ec;
  --accent-color: #67c7ff;
  --accent-soft: rgba(103, 199, 255, 0.18);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --surface-3d: linear-gradient(
    145deg,
    rgba(35, 71, 67, 0.98),
    rgba(12, 31, 34, 0.96)
  );
  --surface-3d-deep: linear-gradient(
    145deg,
    rgba(28, 59, 56, 0.98),
    rgba(9, 24, 28, 0.96)
  );
  --surface-rim: rgba(142, 218, 213, 0.18);
  --surface-lowlight: rgba(0, 0, 0, 0.34);
  --outer-3d-shadow:
    12px 16px 32px rgba(0, 0, 0, 0.36), -5px -5px 18px rgba(94, 147, 149, 0.1);
  --inner-3d-shadow:
    inset 4px 4px 10px rgba(125, 196, 194, 0.12),
    inset -8px -10px 18px rgba(0, 0, 0, 0.35);
  --pressed-3d-shadow:
    inset 5px 6px 12px rgba(0, 0, 0, 0.38),
    inset -5px -5px 12px rgba(122, 205, 205, 0.12);
  --clay-drop-shadow:
    0 18px 24px rgba(0, 0, 0, 0.34), 0 4px 8px rgba(139, 213, 213, 0.1);
  --clay-inset-shadow:
    inset 12px 14px 22px rgba(255, 255, 255, 0.12),
    inset -14px -18px 26px rgba(0, 0, 0, 0.28);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-color);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  background: var(--page-bg);
}

body.brand-intro-active {
  overflow: hidden;
}

body.brand-intro-active .editor-app {
  visibility: hidden;
  pointer-events: none;
}

body.auth-booting {
  background: #fff8ec;
}

body.auth-booting .brand-intro-screen,
body.auth-booting .editor-app {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.brand-intro-screen[hidden] {
  display: none !important;
}

.brand-intro-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(18px, 4vw, 46px);
  color: #4f5f3d;
  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(236, 216, 160, 0.32),
      transparent 29%
    ),
    radial-gradient(
      circle at 86% 18%,
      rgba(155, 184, 127, 0.22),
      transparent 28%
    ),
    radial-gradient(
      circle at 72% 88%,
      rgba(194, 221, 168, 0.34),
      transparent 35%
    ),
    linear-gradient(180deg, #fffaf0 0%, #fff8ef 46%, #f7f0df 100%);
}

.brand-intro-screen::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background:
    linear-gradient(
      180deg,
      rgba(255, 250, 240, 0),
      rgba(255, 250, 240, 0.42) 34%,
      rgba(255, 250, 240, 0.9)
    ),
    url('assets/fairy-forest-background.png') center bottom / cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}

.brand-intro-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 27% 72%,
      rgba(255, 255, 255, 0.64),
      transparent 18%
    ),
    radial-gradient(
      circle at 76% 29%,
      rgba(255, 255, 255, 0.48),
      transparent 20%
    );
  pointer-events: none;
}

.brand-intro-panel {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  min-height: min(720px, calc(100dvh - 48px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(22px, 4vw, 44px);
  padding: clamp(24px, 5vw, 58px);
  border: 1px solid rgba(187, 161, 116, 0.32);
  border-radius: clamp(26px, 5vw, 46px);
  background:
    radial-gradient(
      circle at 22% 20%,
      rgba(255, 255, 255, 0.88),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 16%,
      rgba(245, 228, 182, 0.36),
      transparent 30%
    ),
    linear-gradient(145deg, rgba(255, 253, 248, 0.9), rgba(255, 245, 229, 0.78));
  box-shadow:
    0 34px 90px rgba(104, 82, 55, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset -12px -16px 42px rgba(151, 122, 84, 0.08);
  backdrop-filter: blur(8px);
}

.brand-intro-kicker {
  margin: 0;
  color: #b48a51;
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.brand-intro-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: center;
}

.brand-intro-emblem {
  position: relative;
  width: min(360px, 74vw);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 60%,
      rgba(201, 224, 164, 0.34),
      transparent 38%
    ),
    radial-gradient(
      circle at 45% 35%,
      rgba(255, 250, 224, 0.72),
      transparent 46%
    );
}

.brand-intro-emblem::before {
  content: '';
  position: absolute;
  inset: 8%;
  border: 6px solid rgba(131, 154, 98, 0.42);
  border-right-color: transparent;
  border-bottom-color: rgba(131, 154, 98, 0.18);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.brand-intro-emblem::after {
  content: '';
  position: absolute;
  inset: auto 8% 5%;
  height: 28%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 18% 58%, #98b46f 0 9%, transparent 10%),
    radial-gradient(ellipse at 38% 54%, #b7cf86 0 12%, transparent 13%),
    radial-gradient(ellipse at 63% 55%, #89aa63 0 10%, transparent 11%),
    radial-gradient(ellipse at 82% 60%, #d4c36b 0 5%, transparent 6%),
    linear-gradient(180deg, transparent, rgba(133, 169, 96, 0.18));
}

.brand-intro-sprout-face {
  position: relative;
  width: 38%;
  aspect-ratio: 0.78;
  border-radius: 46% 46% 40% 40%;
  background:
    radial-gradient(
      circle at 36% 36%,
      rgba(255, 255, 255, 0.74),
      transparent 24%
    ),
    linear-gradient(145deg, #d7e4a9, #abc680 58%, #86aa65);
  box-shadow:
    inset 12px 12px 22px rgba(255, 255, 255, 0.34),
    inset -14px -18px 28px rgba(81, 111, 62, 0.16),
    0 18px 28px rgba(89, 101, 55, 0.14);
}

.brand-intro-sprout-face::before,
.brand-intro-sprout-face::after {
  content: '';
  position: absolute;
  top: -20%;
  width: 44%;
  height: 28%;
  border-radius: 90% 12% 90% 12%;
  background: linear-gradient(145deg, #e5efbc, #8eae66);
  box-shadow: inset 4px 5px 8px rgba(255, 255, 255, 0.36);
  transform-origin: bottom center;
}

.brand-intro-sprout-face::before {
  left: 17%;
  transform: rotate(-34deg);
}

.brand-intro-sprout-face::after {
  right: 16%;
  transform: scaleX(-1) rotate(-34deg);
}

.brand-intro-eye {
  position: absolute;
  top: 49%;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #49513c;
}

.brand-intro-eye.left {
  left: 34%;
}

.brand-intro-eye.right {
  right: 34%;
}

.brand-intro-smile {
  position: absolute;
  left: 50%;
  top: 59%;
  width: 22%;
  height: 11%;
  border-bottom: 3px solid #637047;
  border-radius: 0 0 999px 999px;
  transform: translateX(-50%);
}

.brand-intro-leaf,
.brand-intro-spark {
  position: absolute;
  display: block;
}

.brand-intro-leaf {
  width: 12%;
  height: 7%;
  border-radius: 90% 12% 90% 12%;
  background: linear-gradient(145deg, #d8e7ae, #91ad68);
}

.brand-intro-leaf.leaf-a {
  left: 9%;
  bottom: 31%;
  transform: rotate(-28deg);
}

.brand-intro-leaf.leaf-b {
  left: 18%;
  bottom: 22%;
  transform: rotate(12deg);
}

.brand-intro-leaf.leaf-c {
  right: 12%;
  bottom: 27%;
  transform: scaleX(-1) rotate(-24deg);
}

.brand-intro-spark {
  width: 22px;
  height: 22px;
}

.brand-intro-spark::before,
.brand-intro-spark::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: #dfb05b;
}

.brand-intro-spark::before {
  width: 4px;
  height: 22px;
  border-radius: 999px;
}

.brand-intro-spark::after {
  width: 22px;
  height: 4px;
  border-radius: 999px;
}

.brand-intro-spark.spark-a {
  right: 19%;
  top: 26%;
}

.brand-intro-spark.spark-b {
  left: 18%;
  top: 31%;
  transform: scale(0.72);
}

.brand-intro-spark.spark-c {
  right: 12%;
  top: 42%;
  transform: scale(0.48);
}

.brand-intro-copy {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.brand-intro-copy h1 {
  margin: 0;
  color: #71855c;
  font-size: clamp(4.2rem, 11vw, 8.2rem);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 8px 28px rgba(95, 109, 72, 0.12);
}

.brand-intro-roman {
  margin: 0;
  color: #bb8b51;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.2rem, 5.6vw, 4.1rem);
  line-height: 1;
}

.brand-intro-tagline {
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(180, 143, 88, 0.24);
  color: #657a4f;
  font-size: clamp(1.1rem, 2.5vw, 1.55rem);
  font-weight: 850;
}

.brand-intro-description {
  max-width: 34rem;
  margin: 0;
  color: #7d7060;
  font-size: clamp(0.96rem, 1.8vw, 1.12rem);
  font-weight: 650;
  line-height: 1.65;
  word-break: keep-all;
}

.brand-intro-start {
  min-height: 54px;
  margin-top: 8px;
  padding: 0 28px;
  border: 1px solid rgba(128, 155, 95, 0.38);
  border-radius: 999px;
  color: #fffaf0;
  background:
    radial-gradient(
      circle at 25% 18%,
      rgba(255, 255, 255, 0.28),
      transparent 36%
    ),
    linear-gradient(145deg, #91ad69, #6f8b55);
  box-shadow:
    0 18px 32px rgba(91, 116, 67, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  font-size: 1rem;
  font-weight: 900;
}

.brand-intro-start:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 36px rgba(91, 116, 67, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.brand-intro-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(199, 174, 133, 0.3);
  border-radius: 24px;
  background: rgba(255, 250, 242, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.brand-intro-value {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 10px;
  align-items: center;
  color: #6d604f;
}

.brand-intro-value strong {
  color: #6b7f55;
  font-size: 0.92rem;
}

.brand-intro-value span:last-child {
  grid-column: 2;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.35;
}

.brand-intro-value-icon {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(
      circle at 35% 26%,
      rgba(255, 255, 255, 0.72),
      transparent 30%
    ),
    linear-gradient(145deg, #dce7b9, #94ad72);
  box-shadow: inset -4px -5px 9px rgba(78, 105, 58, 0.12);
}

.brand-intro-value-icon.comfort {
  background:
    radial-gradient(
      circle at 35% 26%,
      rgba(255, 255, 255, 0.72),
      transparent 30%
    ),
    linear-gradient(145deg, #f4dba4, #d7a65c);
}

.brand-intro-value-icon.dialog {
  border-radius: 50% 50% 50% 12px;
}

.brand-intro-value-icon.garden {
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      transparent 0 42%,
      #789467 43% 47%,
      transparent 48%
    ),
    radial-gradient(
      circle at 35% 26%,
      rgba(255, 255, 255, 0.72),
      transparent 30%
    ),
    linear-gradient(145deg, #dce7b9, #94ad72);
}

.brand-intro-screen.brand-intro-exiting {
  opacity: 0;
  transform: scale(1.01);
  transition:
    opacity 0.26s ease,
    transform 0.26s ease;
}

@media (max-width: 760px) {
  .brand-intro-screen {
    align-items: start;
    padding: 14px;
  }

  .brand-intro-panel {
    min-height: auto;
    gap: 22px;
    padding: 22px 18px 18px;
    border-radius: 28px;
  }

  .brand-intro-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .brand-intro-emblem {
    width: min(240px, 68vw);
  }

  .brand-intro-copy {
    justify-items: center;
  }

  .brand-intro-copy h1 {
    font-size: clamp(3.3rem, 19vw, 5.2rem);
  }

  .brand-intro-roman {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }

  .brand-intro-tagline {
    width: 100%;
    font-size: clamp(1rem, 5vw, 1.28rem);
  }

  .brand-intro-description {
    max-width: 23rem;
    font-size: 0.92rem;
  }

  .brand-intro-values {
    grid-template-columns: 1fr 1fr;
    padding: 12px;
  }

  .brand-intro-value {
    grid-template-columns: 28px 1fr;
    gap: 3px 8px;
  }

  .brand-intro-value-icon {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 430px) {
  .brand-intro-screen {
    padding: 10px;
  }

  .brand-intro-panel {
    padding: 18px 14px 14px;
  }

  .brand-intro-values {
    grid-template-columns: 1fr;
  }
}

/* Sharalong first screen: vertical app cover, not a brand board. */
.brand-intro-screen {
  align-items: center;
  overflow: auto;
  padding: clamp(16px, 3.2vw, 42px);
  color: #5f744d;
  background:
    radial-gradient(
      circle at 50% 6%,
      rgba(245, 220, 156, 0.28),
      transparent 28%
    ),
    radial-gradient(
      circle at 12% 90%,
      rgba(186, 214, 151, 0.32),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 88%,
      rgba(234, 213, 157, 0.3),
      transparent 28%
    ),
    linear-gradient(180deg, #fff8eb 0%, #fff5e6 52%, #f3ead7 100%);
}

.brand-intro-screen::before {
  inset: auto 0 0;
  height: 30%;
  background:
    radial-gradient(
      ellipse at 11% 92%,
      rgba(139, 170, 102, 0.32) 0 8%,
      transparent 9%
    ),
    radial-gradient(
      ellipse at 18% 94%,
      rgba(178, 202, 137, 0.42) 0 8%,
      transparent 9%
    ),
    radial-gradient(
      ellipse at 87% 93%,
      rgba(138, 174, 102, 0.34) 0 8%,
      transparent 9%
    ),
    radial-gradient(
      ellipse at 76% 96%,
      rgba(207, 221, 165, 0.48) 0 10%,
      transparent 11%
    ),
    linear-gradient(180deg, rgba(255, 249, 238, 0), rgba(241, 232, 210, 0.82));
  opacity: 1;
}

.brand-intro-screen::after {
  background:
    radial-gradient(
      circle at 13% 84%,
      rgba(255, 255, 255, 0.72),
      transparent 12%
    ),
    radial-gradient(
      circle at 87% 17%,
      rgba(255, 255, 255, 0.58),
      transparent 15%
    ),
    radial-gradient(
      circle at 50% 58%,
      rgba(255, 255, 255, 0.3),
      transparent 28%
    );
}

.brand-intro-panel {
  width: min(560px, 100%);
  min-height: min(940px, calc(100dvh - 34px));
  grid-template-rows: auto auto auto auto auto;
  justify-items: center;
  gap: clamp(14px, 2.2vh, 24px);
  padding: clamp(28px, 5.2vh, 58px) clamp(22px, 5vw, 52px)
    clamp(22px, 4vh, 38px);
  border: 1px solid rgba(196, 178, 143, 0.5);
  border-radius: clamp(34px, 7vw, 58px);
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(255, 255, 255, 0.88),
      transparent 30%
    ),
    radial-gradient(
      circle at 14% 78%,
      rgba(214, 225, 185, 0.24),
      transparent 28%
    ),
    radial-gradient(
      circle at 86% 76%,
      rgba(244, 221, 165, 0.24),
      transparent 25%
    ),
    linear-gradient(180deg, rgba(255, 253, 247, 0.95), rgba(255, 249, 237, 0.9));
  box-shadow:
    0 34px 90px rgba(117, 91, 54, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.brand-intro-kicker {
  color: #b4874e;
  font-size: clamp(0.78rem, 1.9vw, 0.95rem);
  line-height: 1;
  text-transform: uppercase;
}

.brand-intro-emblem {
  width: min(320px, 72vw);
  margin-top: clamp(4px, 1vh, 12px);
  background:
    radial-gradient(
      circle at 50% 52%,
      rgba(240, 229, 174, 0.44),
      transparent 43%
    ),
    radial-gradient(
      circle at 48% 65%,
      rgba(185, 214, 149, 0.34),
      transparent 42%
    );
  transform: none;
}

.brand-intro-emblem::before,
.brand-intro-emblem::after {
  display: none;
}

.brand-intro-arc {
  position: absolute;
  inset: 6% 12% 24% 12%;
  border: 5px solid rgba(139, 160, 102, 0.42);
  border-bottom-color: transparent;
  border-left-color: rgba(139, 160, 102, 0.24);
  border-radius: 999px 999px 0 0;
  transform: rotate(5deg);
}

.brand-intro-botanical {
  position: absolute;
  inset: 18% 3% 3%;
}

.brand-intro-stem {
  position: absolute;
  bottom: 18%;
  width: 34%;
  height: 48%;
  border-bottom: 4px solid rgba(108, 137, 82, 0.44);
  border-radius: 50%;
}

.brand-intro-stem::before,
.brand-intro-stem::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 16%;
  border-radius: 90% 12% 90% 12%;
  background: linear-gradient(
    145deg,
    rgba(224, 236, 187, 0.94),
    rgba(133, 166, 101, 0.88)
  );
  box-shadow: inset 3px 4px 7px rgba(255, 255, 255, 0.34);
}

.brand-intro-stem.stem-left {
  left: 9%;
  transform: rotate(-24deg);
}

.brand-intro-stem.stem-left::before {
  left: 8%;
  top: 21%;
  transform: rotate(-42deg);
}

.brand-intro-stem.stem-left::after {
  right: 6%;
  top: 44%;
  transform: rotate(18deg);
}

.brand-intro-stem.stem-right {
  right: 8%;
  transform: scaleX(-1) rotate(-24deg);
}

.brand-intro-stem.stem-right::before {
  left: 8%;
  top: 20%;
  transform: rotate(-42deg);
}

.brand-intro-stem.stem-right::after {
  right: 6%;
  top: 46%;
  transform: rotate(18deg);
}

.brand-intro-flower {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle, #edc05d 0 18%, transparent 19%),
    radial-gradient(
      ellipse at 50% 8%,
      rgba(238, 189, 75, 0.9) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 92% 50%,
      rgba(238, 189, 75, 0.88) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 50% 92%,
      rgba(238, 189, 75, 0.82) 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 8% 50%,
      rgba(238, 189, 75, 0.82) 0 18%,
      transparent 19%
    );
}

.brand-intro-flower.flower-yellow {
  right: 12%;
  bottom: 31%;
  width: 32px;
  height: 32px;
}

.brand-intro-flower.flower-blue {
  right: 22%;
  bottom: 16%;
  width: 34px;
  height: 34px;
  filter: hue-rotate(165deg) saturate(0.75);
}

.brand-intro-sprout-face {
  width: 35%;
  margin-top: 16%;
  border-radius: 46% 46% 39% 39%;
  background:
    radial-gradient(
      circle at 35% 34%,
      rgba(255, 255, 255, 0.68),
      transparent 24%
    ),
    radial-gradient(
      circle at 37% 65%,
      rgba(225, 235, 174, 0.5),
      transparent 29%
    ),
    linear-gradient(145deg, #dde7aa, #aac77d 58%, #7fa25f);
}

.brand-intro-copy {
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.brand-intro-copy h1 {
  color: #6f865d;
  font-size: clamp(4.4rem, 16vw, 7rem);
  line-height: 0.92;
}

.brand-intro-roman {
  color: #b4874e;
  font-size: clamp(2.3rem, 8vw, 3.7rem);
}

.brand-intro-divider {
  width: min(280px, 66vw);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 4px 0 2px;
  color: #88a06a;
}

.brand-intro-divider span {
  height: 1px;
  background: rgba(185, 151, 92, 0.28);
}

.brand-intro-divider i {
  width: 22px;
  height: 16px;
  display: block;
  border-radius: 80% 8% 80% 8%;
  background: linear-gradient(145deg, #d9e8b0, #8aa866);
  transform: rotate(-35deg);
}

.brand-intro-tagline {
  margin: 0;
  padding: 0;
  border: 0;
  color: #5f7d4c;
  font-size: clamp(1.15rem, 4vw, 1.45rem);
}

.brand-intro-description {
  max-width: 28rem;
  color: #5f5349;
  font-size: clamp(0.96rem, 3vw, 1.1rem);
  line-height: 1.7;
}

.brand-intro-description-soft {
  margin-top: -4px;
}

.brand-intro-start {
  width: min(330px, 82vw);
  min-height: 66px;
  margin-top: clamp(4px, 1vh, 10px);
  color: #fffaf0;
  border: 1px solid rgba(112, 143, 88, 0.4);
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 28% 16%,
      rgba(255, 255, 255, 0.34),
      transparent 34%
    ),
    linear-gradient(145deg, #9ab474, #6f8e59);
  box-shadow:
    0 18px 36px rgba(92, 112, 66, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
  font-size: clamp(1.13rem, 3.8vw, 1.45rem);
}

.brand-intro-value {
  width: min(430px, 92%);
  min-height: 100px;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: clamp(4px, 1vh, 14px);
  padding: 16px 20px;
  border: 1px solid rgba(205, 177, 129, 0.42);
  border-radius: 28px;
  color: #65574d;
  background:
    radial-gradient(
      circle at 16% 26%,
      rgba(255, 255, 255, 0.8),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255, 253, 248, 0.88),
      rgba(255, 245, 225, 0.78)
    );
  box-shadow:
    0 12px 28px rgba(118, 91, 54, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.brand-intro-value > span:last-child {
  display: grid;
  gap: 6px;
}

.brand-intro-value strong {
  color: #5f7d4c;
  font-size: clamp(1.18rem, 4vw, 1.45rem);
}

.brand-intro-value em {
  color: #6f6258;
  font-size: clamp(0.9rem, 3vw, 1.02rem);
  font-style: normal;
  font-weight: 650;
}

.brand-intro-value-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 78%,
      rgba(142, 176, 102, 0.24) 0 18%,
      transparent 19%
    ),
    radial-gradient(ellipse at 39% 45%, #b7d18a 0 17%, transparent 18%),
    radial-gradient(ellipse at 61% 45%, #98bb72 0 17%, transparent 18%),
    linear-gradient(180deg, rgba(247, 238, 204, 0.95), rgba(226, 214, 169, 0.8));
  box-shadow: none;
}

@media (max-width: 760px) {
  .brand-intro-screen {
    padding: 12px;
  }

  .brand-intro-panel {
    width: min(520px, 100%);
    min-height: min(900px, calc(100dvh - 24px));
    gap: 14px;
    padding: 26px 18px 18px;
  }

  .brand-intro-emblem {
    width: min(280px, 72vw);
  }

  .brand-intro-copy h1 {
    font-size: clamp(4rem, 18vw, 5.8rem);
  }

  .brand-intro-roman {
    font-size: clamp(2rem, 9vw, 3.1rem);
  }

  .brand-intro-value {
    grid-template-columns: 62px 1fr;
    gap: 13px;
    min-height: 88px;
    padding: 14px 16px;
  }

  .brand-intro-value-icon {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 430px) {
  .brand-intro-panel {
    border-radius: 34px;
    padding: 22px 14px 14px;
  }

  .brand-intro-emblem {
    width: min(244px, 72vw);
  }

  .brand-intro-description {
    font-size: 0.92rem;
  }

  .brand-intro-start {
    min-height: 58px;
  }
}

/* Image-backed cover using the watercolor background and sprout logo layer. */
.brand-intro-screen {
  padding: clamp(12px, 3vw, 36px);
  background:
    radial-gradient(
      circle at 50% 8%,
      rgba(255, 241, 194, 0.42),
      transparent 30%
    ),
    linear-gradient(180deg, #fff8eb 0%, #f6ead5 100%);
}

.brand-intro-screen::before,
.brand-intro-screen::after {
  display: none;
}

.brand-intro-panel {
  position: relative;
  width: min(590px, 100%);
  min-height: min(960px, calc(100dvh - 28px));
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  justify-items: center;
  align-content: start;
  gap: clamp(12px, 2vh, 20px);
  overflow: hidden;
  padding: clamp(28px, 5vh, 54px) clamp(22px, 5vw, 54px)
    clamp(18px, 3.6vh, 34px);
  border-radius: clamp(34px, 7vw, 60px);
  border: 1px solid rgba(218, 201, 166, 0.72);
  background:
    linear-gradient(
      180deg,
      rgba(255, 252, 245, 0.54),
      rgba(255, 247, 232, 0.38)
    ),
    url('assets/brand/sharalong-intro-background.png') center / cover no-repeat;
  box-shadow:
    0 34px 88px rgba(116, 90, 52, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.brand-intro-panel > * {
  position: relative;
  z-index: 1;
}

.brand-intro-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 252, 245, 0.5) 0%,
      rgba(255, 252, 245, 0.3) 27%,
      rgba(255, 248, 234, 0.18) 54%,
      rgba(255, 245, 225, 0.28) 100%
    ),
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 255, 255, 0.36),
      transparent 30%
    );
  pointer-events: none;
}

.brand-intro-kicker {
  color: #b4874f;
  font-size: clamp(0.72rem, 2.4vw, 0.92rem);
  font-weight: 900;
  line-height: 1;
}

.brand-intro-emblem {
  width: min(310px, 72vw);
  aspect-ratio: 1;
  margin: clamp(2px, 0.8vh, 10px) 0 0;
  background: transparent;
  filter: drop-shadow(0 16px 28px rgba(84, 105, 59, 0.12));
}

.brand-intro-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.brand-intro-copy {
  width: 100%;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.brand-intro-wordmark {
  width: min(350px, 82vw);
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(84, 105, 59, 0.08));
}

.brand-intro-copy h1 {
  color: #6d865b;
  font-size: clamp(4.2rem, 15vw, 6.8rem);
  font-weight: 950;
  line-height: 0.9;
  text-shadow: 0 8px 20px rgba(77, 96, 57, 0.12);
}

.brand-intro-copy .brand-intro-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.brand-intro-roman {
  color: #b3854e;
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  line-height: 0.95;
}

.brand-intro-divider {
  margin: 3px 0 0;
}

.brand-intro-tagline {
  color: #5d7c4c;
  font-size: clamp(1.08rem, 3.7vw, 1.38rem);
}

.brand-intro-description {
  max-width: 31rem;
  color: #584d45;
  font-size: clamp(0.92rem, 2.8vw, 1.06rem);
  font-weight: 720;
  line-height: 1.68;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

.brand-intro-description-soft {
  margin-top: -6px;
}

.brand-intro-start {
  width: min(340px, 84vw);
  min-height: 64px;
  margin-top: clamp(4px, 1vh, 12px);
  border-radius: 999px;
  color: #fffaf0;
  background:
    radial-gradient(
      circle at 28% 16%,
      rgba(255, 255, 255, 0.3),
      transparent 34%
    ),
    linear-gradient(145deg, #95b170, #6f8d58);
  box-shadow:
    0 18px 32px rgba(84, 104, 61, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  font-size: clamp(1.08rem, 3.4vw, 1.35rem);
}

.brand-intro-value {
  width: min(420px, 92%);
  min-height: 96px;
  margin-top: clamp(4px, 1.2vh, 16px);
  grid-template-columns: 72px 1fr;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid rgba(214, 189, 145, 0.58);
  border-radius: 26px;
  background: linear-gradient(
    145deg,
    rgba(255, 253, 247, 0.84),
    rgba(255, 246, 230, 0.7)
  );
  backdrop-filter: blur(3px);
}

.brand-intro-value strong {
  color: #5f7d4c;
}

.brand-intro-growth-icon {
  width: 68px;
  height: 68px;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(91, 112, 58, 0.12));
}

@media (max-width: 760px) {
  .brand-intro-panel {
    width: min(530px, 100%);
    min-height: min(890px, calc(100dvh - 24px));
    gap: 12px;
    padding: 24px 16px 16px;
  }

  .brand-intro-emblem {
    width: min(285px, 74vw);
  }

  .brand-intro-wordmark {
    width: min(335px, 84vw);
  }
}

@media (max-width: 430px) {
  .brand-intro-screen {
    padding: 10px;
  }

  .brand-intro-panel {
    min-height: min(820px, calc(100dvh - 20px));
    border-radius: 34px;
    padding: 20px 13px 13px;
  }

  .brand-intro-emblem {
    width: min(230px, 70vw);
  }

  .brand-intro-wordmark {
    width: min(300px, 84vw);
  }

  .brand-intro-copy h1 {
    font-size: clamp(3.7rem, 17vw, 4.8rem);
  }

  .brand-intro-roman {
    font-size: clamp(1.9rem, 8vw, 2.7rem);
  }

  .brand-intro-value {
    grid-template-columns: 58px 1fr;
    min-height: 82px;
    padding: 12px 14px;
  }

  .brand-intro-growth-icon {
    width: 56px;
    height: 56px;
  }
}

button,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.editor-app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 72px minmax(320px, 46vh) 72px 52px 1fr;
  background:
    radial-gradient(
      circle at 20% 8%,
      rgba(255, 255, 255, 0.58),
      transparent 30%
    ),
    radial-gradient(
      circle at 86% 96%,
      rgba(111, 206, 190, 0.13),
      transparent 34%
    ),
    linear-gradient(145deg, var(--app-bg), var(--panel-bg));
  box-shadow: var(--inner-3d-shadow);
}

.top-bar {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto minmax(0, 112px);
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  max-width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--line-color);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 72%),
    var(--surface-3d);
  box-shadow:
    inset 0 1px 0 var(--surface-rim),
    inset 0 -8px 18px var(--surface-lowlight);
}

.brand-lockup {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  line-height: 1.08;
}

.brand-lockup h1 {
  margin: 0;
  min-width: 0;
  color: var(--soft-color);
  font-size: clamp(1.12rem, 3vw, 1.65rem);
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-lockup h1[lang='en'] {
  color: var(--muted-color);
  font-size: clamp(0.94rem, 2.45vw, 1.24rem);
}

.brand-subtitle {
  margin: 3px 0 0;
  color: var(--muted-color);
  font-size: clamp(0.56rem, 1.45vw, 0.72rem);
  font-weight: 700;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-subtitle[lang='en'] {
  color: var(--soft-color);
  font-size: clamp(0.52rem, 1.34vw, 0.66rem);
  font-weight: 650;
}

.top-icon-button,
.done-button,
.theme-choice {
  border: 0;
}

.top-icon-button {
  justify-self: start;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: transparent;
  font-size: 0;
  line-height: 1;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.38),
    rgba(255, 255, 255, 0.02)
  );
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.38),
    inset -4px -5px 8px rgba(93, 60, 38, 0.08);
}

.top-icon-symbol {
  display: block;
  width: 40px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}

.done-button {
  justify-self: end;
  min-width: 0;
  max-width: 112px;
  color: var(--accent-color);
  font-size: 1.35rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.48),
    rgba(255, 255, 255, 0.04)
  );
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.travel-select-symbol-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
  padding: 14px 0 8px;
}

.travel-select-symbol-button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(104, 132, 95, 0.32);
  border-radius: 999px;
  background: rgba(255, 253, 241, 0.9);
  box-shadow:
    0 6px 14px rgba(47, 61, 44, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.travel-select-symbol-button img {
  width: 22px;
  height: auto;
  max-height: 22px;
  object-fit: contain;
}

.travel-select-symbol-button:focus-visible {
  outline: 3px solid rgba(69, 154, 201, 0.72);
  outline-offset: 3px;
}

.theme-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-self: end;
  min-width: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-color);
  border-radius: 999px;
  background: var(--surface-3d-deep);
  box-shadow: var(--pressed-3d-shadow);
}

.theme-choice {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--soft-color);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 900;
}

.theme-choice.active {
  color: #ffffff;
  background:
    radial-gradient(
      circle at 32% 22%,
      rgba(255, 255, 255, 0.42),
      transparent 34%
    ),
    linear-gradient(145deg, #79d7ff, var(--accent-color) 58%, #378bd0);
  box-shadow:
    0 8px 18px var(--accent-soft),
    inset 3px 3px 8px rgba(255, 255, 255, 0.35),
    inset -5px -6px 10px rgba(34, 89, 129, 0.22);
}

.auth-panel {
  position: relative;
  justify-self: end;
  min-width: 0;
  z-index: 120;
  pointer-events: auto;
}

.auth-control-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.auth-toggle-button,
.auth-primary-button,
.auth-secondary-button {
  border: 0;
  font: inherit;
}

.auth-toggle-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--accent-color);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.14)
  );
  box-shadow:
    inset 2px 2px 6px rgba(255, 255, 255, 0.48),
    inset -4px -5px 8px rgba(93, 60, 38, 0.08),
    0 8px 20px rgba(90, 62, 42, 0.09);
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.auth-panel.is-signed-in .auth-toggle-button {
  color: #3f7c4d;
}

.auth-save-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 86px;
  padding: 0 9px;
  border-radius: 999px;
  color: #6f5b45;
  background: rgba(255, 248, 232, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(222, 201, 165, 0.58),
    0 6px 14px rgba(90, 62, 42, 0.06);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-save-status-saving {
  color: #7b6a28;
  background: rgba(255, 246, 188, 0.76);
}

.auth-save-status-saved {
  color: #3f7c4d;
  background: rgba(224, 247, 210, 0.76);
}

.auth-save-status-failed {
  color: #9b584c;
  background: rgba(255, 229, 220, 0.78);
}

.auth-popover {
  position: fixed;
  top: 82px;
  right: max(16px, env(safe-area-inset-right));
  z-index: 30000;
  display: none;
  width: min(320px, calc(100vw - 32px));
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(222, 201, 165, 0.78);
  border-radius: 22px;
  background: linear-gradient(
    145deg,
    rgba(255, 252, 244, 0.96),
    rgba(242, 249, 231, 0.92)
  );
  box-shadow:
    0 18px 42px rgba(73, 53, 37, 0.14),
    inset 1px 1px 0 rgba(255, 255, 255, 0.7);
  color: #4f3b2f;
}

.auth-panel.is-open .auth-popover {
  display: grid;
}

.auth-popover label {
  display: grid;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 800;
}

.auth-popover input {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  border: 1px solid rgba(203, 179, 143, 0.72);
  border-radius: 14px;
  padding: 0 12px;
  color: #3c2d25;
  background: rgba(255, 255, 255, 0.76);
  font: inherit;
}

.auth-eyebrow,
.auth-message {
  margin: 0;
}

.auth-eyebrow {
  color: var(--accent-color);
  font-size: 0.78rem;
  font-weight: 900;
}

.auth-user-email {
  font-size: 0.92rem;
}

.auth-message {
  color: #765f4c;
  font-size: 0.78rem;
  line-height: 1.45;
}

.auth-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.auth-primary-button,
.auth-secondary-button {
  min-height: 38px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
}

.auth-primary-button {
  color: #08364d;
  background: linear-gradient(145deg, #8fdcff, #3ba7e4);
  box-shadow: 0 8px 18px rgba(61, 155, 209, 0.24);
}

.auth-secondary-button {
  color: #5b4435;
  background: rgba(255, 247, 233, 0.86);
  box-shadow: inset 0 0 0 1px rgba(216, 191, 150, 0.55);
}

.preview-stage {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 54%),
    var(--app-bg);
  box-shadow:
    inset 0 12px 24px rgba(255, 255, 255, 0.55),
    inset 0 -16px 30px rgba(128, 89, 58, 0.08);
}

.preview-sky {
  position: relative;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
  border-bottom: 1px solid rgba(64, 47, 37, 0.08);
  background: var(--preview-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -22px 42px rgba(255, 255, 255, 0.2),
    inset -18px -22px 36px rgba(90, 67, 45, 0.08);
}

.preview-sky.avatar-l2p-handoff-pending {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
}

.preview-sky.avatar-l2p-handoff-revealing {
  transform-origin: center bottom;
  animation: avatar-l2p-preview-reveal 130ms ease-out both;
}

@keyframes avatar-l2p-preview-reveal {
  from {
    opacity: 0;
    transform: scale(0.99);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.preview-sky::before,
.preview-sky::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.main-background {
  position: absolute;
  inset: 0 0 32% 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at 18% 18%,
      rgba(255, 255, 255, 0.78) 0 12%,
      transparent 32%
    ),
    linear-gradient(180deg, #dff7ff 0%, #effcff 46%, #fff8e7 100%);
  z-index: 0;
  pointer-events: none;
}

.main-background::before,
.main-background::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.main-background::before {
  background:
    radial-gradient(
      ellipse at 17% 72%,
      rgba(99, 159, 131, 0.28) 0 17%,
      transparent 31%
    ),
    radial-gradient(
      ellipse at 37% 70%,
      rgba(117, 169, 142, 0.34) 0 19%,
      transparent 34%
    ),
    radial-gradient(
      ellipse at 66% 72%,
      rgba(91, 141, 128, 0.25) 0 21%,
      transparent 37%
    ),
    radial-gradient(
      ellipse at 88% 74%,
      rgba(128, 174, 144, 0.26) 0 16%,
      transparent 30%
    ),
    linear-gradient(
      138deg,
      transparent 0 20%,
      rgba(163, 191, 166, 0.34) 20% 36%,
      transparent 37%
    ),
    linear-gradient(
      42deg,
      transparent 0 44%,
      rgba(125, 169, 151, 0.28) 44% 61%,
      transparent 62%
    );
  filter: blur(0.5px) saturate(0.88);
  opacity: 0.92;
}

.main-background::after {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.42),
      transparent 20% 80%,
      rgba(255, 255, 255, 0.28)
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.36),
      rgba(255, 246, 226, 0.18) 62%,
      rgba(255, 255, 255, 0.34)
    );
  mix-blend-mode: screen;
  opacity: 0.82;
}

.foreground-platform {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -22px;
  height: 42%;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(
      ellipse at 34% 10%,
      rgba(255, 255, 255, 0.28),
      transparent 44%
    ),
    linear-gradient(135deg, #9ee3b1, #62bd8e 64%, #4eaa7d);
  box-shadow:
    inset 0 12px 20px rgba(255, 255, 255, 0.2),
    inset 0 -14px 24px rgba(38, 97, 68, 0.16);
  z-index: 1;
  pointer-events: none;
}

body[data-theme='dark'] .main-background {
  background:
    radial-gradient(
      ellipse at 18% 18%,
      rgba(145, 222, 212, 0.14) 0 12%,
      transparent 32%
    ),
    linear-gradient(180deg, #223f4a 0%, #2a4d56 48%, #20373b 100%);
}

body[data-theme='dark'] .main-background::before {
  background:
    radial-gradient(
      ellipse at 17% 72%,
      rgba(74, 131, 114, 0.46) 0 17%,
      transparent 31%
    ),
    radial-gradient(
      ellipse at 37% 70%,
      rgba(85, 145, 126, 0.48) 0 19%,
      transparent 34%
    ),
    radial-gradient(
      ellipse at 66% 72%,
      rgba(61, 113, 111, 0.44) 0 21%,
      transparent 37%
    ),
    radial-gradient(
      ellipse at 88% 74%,
      rgba(93, 145, 121, 0.36) 0 16%,
      transparent 30%
    );
  opacity: 0.9;
}

body[data-theme='dark'] .main-background::after {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08),
      transparent 18% 82%,
      rgba(255, 255, 255, 0.06)
    ),
    linear-gradient(
      180deg,
      rgba(173, 231, 226, 0.08),
      rgba(255, 246, 226, 0.04) 62%,
      rgba(255, 255, 255, 0.08)
    );
  opacity: 0.72;
}

body[data-theme='dark'] .foreground-platform {
  background:
    radial-gradient(
      ellipse at 34% 10%,
      rgba(170, 230, 210, 0.12),
      transparent 44%
    ),
    linear-gradient(135deg, #37665c, #28584f 64%, #1e4741);
  box-shadow:
    inset 0 12px 20px rgba(145, 222, 212, 0.08),
    inset 0 -14px 24px rgba(0, 0, 0, 0.22);
}

.soft-sun {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 232, 125, 0.86);
  box-shadow: 0 0 40px rgba(255, 219, 90, 0.45);
  opacity: 0;
  z-index: 4;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.preview-ground {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -58px;
  height: 118px;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(
      ellipse at 36% 12%,
      rgba(255, 255, 255, 0.3),
      transparent 42%
    ),
    linear-gradient(135deg, #9ee3b1, #62bd8e 64%, #4eaa7d);
  box-shadow:
    inset 0 12px 20px rgba(255, 255, 255, 0.22),
    inset 0 -14px 24px rgba(38, 97, 68, 0.18);
  z-index: 2;
}

.preview-scene {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: min(920px, 100%);
  height: 300px;
  transform: translateX(-50%);
  z-index: 3;
  isolation: isolate;
}

.preview-sky.report-arrange-sky .soft-sun,
.preview-sky.report-arrange-sky .preview-ground {
  opacity: 0;
}

.preview-scene.report-preview-canvas {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 300px;
  transform: none;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 232, 185, 0.58),
      transparent 22%
    ),
    radial-gradient(
      circle at 78% 20%,
      rgba(209, 237, 255, 0.78),
      transparent 28%
    ),
    linear-gradient(180deg, #ddf7ff 0%, #fff7df 60%, #aee7b5 61%, #6ccf91 100%);
  box-shadow:
    inset 0 10px 24px rgba(255, 255, 255, 0.48),
    inset 0 -18px 28px rgba(56, 139, 92, 0.18);
  touch-action: none;
  z-index: 5;
}

body[data-theme='dark'] .preview-scene.report-preview-canvas {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 232, 185, 0.2),
      transparent 22%
    ),
    linear-gradient(180deg, #20404b 0%, #263f45 60%, #315f55 61%, #254f48 100%);
}

.preview-sky.weather-sunny-warm {
  background:
    radial-gradient(
      circle at 26% 42%,
      rgba(255, 255, 255, 0.28) 0 80px,
      transparent 82px
    ),
    linear-gradient(180deg, #bfefff 0%, #ddf6ff 56%, #fff0d8 100%);
}

.preview-sky.weather-sunny-warm .soft-sun {
  top: 28px;
  left: auto;
  right: 28px;
  width: 72px;
  height: 72px;
  background: radial-gradient(circle, #ffdca5 0 18%, #ffb878 60%, #ffad6a 100%);
  box-shadow:
    0 0 54px rgba(255, 184, 95, 0.72),
    0 0 104px rgba(255, 205, 132, 0.56);
  opacity: 1;
  transform: none;
}

.preview-sky.weather-clear-blue {
  background: linear-gradient(180deg, #aee9ff 0%, #c9f2ff 54%, #eefbff 100%);
}

.preview-sky.weather-fluffy-cloud {
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 255, 255, 0.18) 0 42px,
      transparent 44px
    ),
    linear-gradient(180deg, #087dc1 0%, #0f9cdc 48%, #7ed2f2 100%);
}

.preview-sky.weather-fluffy-cloud::before {
  inset: 12px -6% auto -6%;
  height: 210px;
  background:
    radial-gradient(
      ellipse at 18% 26%,
      rgba(255, 255, 255, 0.96) 0 34px,
      rgba(235, 244, 250, 0.92) 35px 54px,
      transparent 56px
    ),
    radial-gradient(
      ellipse at 27% 20%,
      rgba(255, 255, 255, 0.98) 0 44px,
      rgba(232, 242, 249, 0.9) 45px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 39% 30%,
      rgba(255, 255, 255, 0.95) 0 36px,
      rgba(224, 237, 246, 0.88) 37px 58px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at 63% 48%,
      rgba(255, 255, 255, 0.98) 0 50px,
      rgba(229, 240, 248, 0.9) 51px 78px,
      transparent 80px
    ),
    radial-gradient(
      ellipse at 76% 42%,
      rgba(255, 255, 255, 0.96) 0 44px,
      rgba(222, 236, 246, 0.88) 45px 72px,
      transparent 74px
    ),
    radial-gradient(
      ellipse at 88% 56%,
      rgba(255, 255, 255, 0.92) 0 28px,
      rgba(222, 236, 246, 0.78) 29px 48px,
      transparent 50px
    );
  filter: drop-shadow(0 15px 12px rgba(25, 92, 137, 0.18))
    drop-shadow(0 3px 2px rgba(255, 255, 255, 0.3));
}

.preview-sky.weather-fluffy-cloud::after {
  inset: auto -8% 0 -8%;
  height: 150px;
  background:
    radial-gradient(
      ellipse at 8% 72%,
      rgba(255, 255, 255, 0.94) 0 32px,
      rgba(228, 238, 246, 0.84) 33px 52px,
      transparent 54px
    ),
    radial-gradient(
      ellipse at 22% 64%,
      rgba(255, 255, 255, 0.96) 0 42px,
      rgba(230, 241, 249, 0.86) 43px 68px,
      transparent 70px
    ),
    radial-gradient(
      ellipse at 40% 74%,
      rgba(255, 255, 255, 0.92) 0 34px,
      rgba(222, 236, 246, 0.78) 35px 56px,
      transparent 58px
    ),
    radial-gradient(
      ellipse at 62% 68%,
      rgba(255, 255, 255, 0.95) 0 38px,
      rgba(226, 238, 247, 0.82) 39px 62px,
      transparent 64px
    ),
    radial-gradient(
      ellipse at 82% 76%,
      rgba(255, 255, 255, 0.92) 0 34px,
      rgba(220, 234, 245, 0.78) 35px 58px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at 94% 64%,
      rgba(255, 255, 255, 0.86) 0 24px,
      rgba(220, 234, 245, 0.68) 25px 42px,
      transparent 44px
    );
  filter: drop-shadow(0 12px 10px rgba(24, 93, 138, 0.16));
  opacity: 0.96;
}

.preview-sky.weather-gray-cloud {
  background: linear-gradient(180deg, #eaf1f3 0%, #d4dee4 68%, #f2f6f5 100%);
}

.preview-sky.weather-gray-cloud::before,
.preview-sky.weather-rainy::before {
  inset: 18px 0 auto 0;
  height: 134px;
  background:
    radial-gradient(
      circle at 8% 68%,
      rgba(196, 209, 216, 0.9) 0 48px,
      transparent 49px
    ),
    radial-gradient(
      circle at 24% 48%,
      rgba(225, 232, 235, 0.96) 0 64px,
      transparent 65px
    ),
    radial-gradient(
      circle at 42% 66%,
      rgba(194, 208, 216, 0.9) 0 52px,
      transparent 53px
    ),
    radial-gradient(
      circle at 63% 42%,
      rgba(226, 232, 236, 0.96) 0 68px,
      transparent 69px
    ),
    radial-gradient(
      circle at 84% 64%,
      rgba(190, 204, 213, 0.9) 0 50px,
      transparent 51px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent);
}

.preview-sky.weather-gray-cloud::before {
  inset: 8px -10% auto -10%;
  height: 236px;
  background:
    radial-gradient(
      ellipse at 10% 58%,
      rgba(240, 244, 246, 0.9) 0 48px,
      rgba(205, 216, 223, 0.86) 49px 76px,
      transparent 78px
    ),
    radial-gradient(
      ellipse at 20% 52%,
      rgba(251, 253, 254, 0.92) 0 62px,
      rgba(218, 228, 234, 0.88) 63px 96px,
      transparent 98px
    ),
    radial-gradient(
      ellipse at 34% 68%,
      rgba(226, 234, 238, 0.86) 0 54px,
      rgba(188, 201, 211, 0.8) 55px 84px,
      transparent 86px
    ),
    radial-gradient(
      ellipse at 50% 38%,
      rgba(248, 251, 252, 0.92) 0 42px,
      rgba(213, 223, 230, 0.84) 43px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 70% 50%,
      rgba(238, 243, 246, 0.9) 0 58px,
      rgba(202, 214, 222, 0.86) 59px 88px,
      transparent 90px
    ),
    radial-gradient(
      ellipse at 84% 44%,
      rgba(250, 252, 253, 0.92) 0 48px,
      rgba(214, 224, 231, 0.84) 49px 74px,
      transparent 76px
    ),
    radial-gradient(
      ellipse at 96% 66%,
      rgba(226, 234, 238, 0.82) 0 42px,
      rgba(190, 202, 212, 0.74) 43px 68px,
      transparent 70px
    );
  filter: drop-shadow(0 14px 14px rgba(128, 147, 158, 0.2))
    drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.32));
  opacity: 0.97;
}

.preview-sky.weather-rainy {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(122, 130, 148, 0.28) 0 78px,
      transparent 80px
    ),
    linear-gradient(180deg, #4a4e5a 0%, #626675 46%, #858997 100%);
}

.preview-sky.weather-rainy::before {
  inset: 8px -10% auto -10%;
  height: 236px;
  background:
    radial-gradient(
      ellipse at 10% 58%,
      rgba(221, 222, 228, 0.86) 0 48px,
      rgba(153, 156, 169, 0.88) 49px 76px,
      transparent 78px
    ),
    radial-gradient(
      ellipse at 20% 52%,
      rgba(239, 240, 244, 0.9) 0 62px,
      rgba(170, 173, 186, 0.88) 63px 96px,
      transparent 98px
    ),
    radial-gradient(
      ellipse at 34% 68%,
      rgba(207, 210, 218, 0.84) 0 54px,
      rgba(130, 134, 150, 0.82) 55px 84px,
      transparent 86px
    ),
    radial-gradient(
      ellipse at 50% 38%,
      rgba(238, 239, 243, 0.9) 0 42px,
      rgba(164, 166, 179, 0.86) 43px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 70% 50%,
      rgba(229, 230, 236, 0.88) 0 58px,
      rgba(151, 154, 169, 0.86) 59px 88px,
      transparent 90px
    ),
    radial-gradient(
      ellipse at 84% 44%,
      rgba(238, 239, 243, 0.9) 0 48px,
      rgba(162, 165, 178, 0.84) 49px 74px,
      transparent 76px
    ),
    radial-gradient(
      ellipse at 96% 66%,
      rgba(207, 210, 218, 0.8) 0 42px,
      rgba(130, 134, 150, 0.78) 43px 68px,
      transparent 70px
    );
  filter: drop-shadow(0 14px 14px rgba(45, 48, 61, 0.32))
    drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.26));
  opacity: 0.98;
}

.preview-sky.weather-rainy::after {
  inset: 0;
  background:
    repeating-linear-gradient(
      104deg,
      transparent 0 16px,
      rgba(248, 251, 255, 0.74) 16px 18px,
      transparent 18px 30px
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 30px,
      rgba(168, 206, 225, 0.58) 30px 31px,
      transparent 31px 48px
    ),
    radial-gradient(
      ellipse at 20% 100%,
      rgba(234, 235, 241, 0.72) 0 58px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at 44% 104%,
      rgba(194, 197, 210, 0.68) 0 70px,
      transparent 72px
    ),
    radial-gradient(
      ellipse at 78% 102%,
      rgba(224, 225, 232, 0.7) 0 64px,
      transparent 66px
    );
  background-size:
    28px 58px,
    46px 76px,
    auto,
    auto,
    auto;
  opacity: 0.9;
}

.preview-sky.weather-storm {
  background:
    radial-gradient(circle at 20% 22%, rgba(49, 77, 127, 0.7), transparent 34%),
    linear-gradient(180deg, #07142e 0%, #142849 58%, #2d405c 100%);
}

.preview-sky.weather-storm::before {
  top: 26px;
  left: 57%;
  width: 82px;
  height: 164px;
  background: linear-gradient(180deg, #fff7a8, #ffd34e);
  clip-path: polygon(
    42% 0,
    78% 0,
    58% 42%,
    88% 42%,
    30% 100%,
    45% 56%,
    16% 56%
  );
  filter: drop-shadow(0 0 14px rgba(255, 225, 79, 0.8));
  opacity: 0.95;
}

.preview-sky.weather-storm::after {
  inset: 0;
  background: repeating-linear-gradient(
    112deg,
    rgba(144, 190, 230, 0.65) 0 2px,
    transparent 2px 17px
  );
  background-size: 20px 34px;
  opacity: 0.72;
}

.preview-sky.weather-snowy-blue {
  background: linear-gradient(180deg, #aee9ff 0%, #d8f6ff 64%, #ffffff 100%);
}

.preview-sky.weather-snowy-blue::after {
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(220, 244, 255, 0.95) 0 2px, transparent 2.5px);
  background-position:
    24px 18px,
    88px 52px,
    150px 28px;
  background-size:
    96px 82px,
    128px 110px,
    164px 136px;
  opacity: 0.95;
}

.scene-object {
  position: absolute;
  bottom: 10px;
  transition:
    left 0.25s ease,
    bottom 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.tree-object {
  left: 50%;
  z-index: 2;
  opacity: 0;
  transform: translateX(-50%) scale(1.06);
  transform-origin: bottom center;
}

.house-object {
  left: 50%;
  z-index: 1;
  opacity: 0;
  transform: translateX(-50%) scale(1.08);
  transform-origin: bottom center;
}

.avatar-object {
  left: 50%;
  z-index: 4;
  opacity: 0;
  transform: translateX(-50%) scale(0.68);
  transform-origin: bottom center;
}

.focus-face .avatar-object.avatar-render-pending:empty::after {
  content: '';
  display: block;
  width: 118px;
  height: 210px;
  border-radius: 58px 58px 28px 28px;
  background: linear-gradient(
    100deg,
    rgba(222, 231, 222, 0.42) 20%,
    rgba(248, 244, 232, 0.72) 42%,
    rgba(222, 231, 222, 0.42) 64%
  );
  background-size: 220% 100%;
  animation: avatar-shell-loading 1.25s ease-in-out infinite;
}

@keyframes avatar-shell-loading {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

.focus-tree .tree-object {
  left: 50%;
  bottom: 0;
  opacity: 1;
  transform: translateX(-50%) scale(1.06);
}

.focus-tree .house-object,
.focus-tree .avatar-object {
  opacity: 0;
  pointer-events: none;
}

.focus-house .house-object {
  left: 50%;
  bottom: 0;
  opacity: 1;
  transform: translateX(-50%) scale(1.08);
}

.focus-house .tree-object,
.focus-house .avatar-object {
  opacity: 0;
  pointer-events: none;
}

.focus-face .avatar-object {
  left: 50%;
  bottom: -2px;
  opacity: 1;
  transform: translateX(-50%) scale(0.72);
}

.focus-face .tree-object,
.focus-face .house-object {
  opacity: 0;
  pointer-events: none;
}

.focus-all .tree-object {
  left: 25%;
  opacity: 1;
  transform: translateX(-50%) scale(0.76);
}

.focus-all .house-object {
  left: 76%;
  opacity: 1;
  transform: translateX(-50%) scale(0.68);
}

.focus-all .avatar-object {
  left: 52%;
  opacity: 1;
  transform: translateX(-50%) scale(0.52);
}

/* 가운데 아이콘 탭 */
.part-tabs {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 0 18px;
  border-top: 1px solid var(--line-color);
  border-bottom: 3px solid var(--strong-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 70%),
    var(--surface-3d-deep);
  box-shadow:
    inset 0 1px 0 var(--surface-rim),
    inset 0 -10px 18px var(--surface-lowlight);
}

.part-tab {
  position: relative;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  height: 72px;
  border: 0;
  border-radius: 22px;
  color: var(--soft-color);
  background: transparent;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.part-tab-icon {
  font-size: 2rem;
  filter: grayscale(1);
  opacity: 0.72;
}

.comb-tab-icon {
  position: relative;
  display: block;
  width: 36px;
  height: 34px;
  filter: none;
  opacity: 0.76;
  transform: rotate(-28deg);
}

.comb-tab-icon::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 5px;
  width: 22px;
  height: 8px;
  border-radius: 999px 999px 5px 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), transparent 42%),
    currentColor;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.32),
    inset -3px -3px 5px rgba(45, 74, 92, 0.18),
    0 6px 10px var(--accent-soft);
}

.comb-tab-icon::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 13px;
  width: 21px;
  height: 17px;
  border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(
    90deg,
    currentColor 0 3px,
    transparent 3px 5px
  );
  filter: drop-shadow(0 4px 5px rgba(46, 67, 82, 0.14));
}

.sculpt-tab-icon {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  color: currentColor;
  filter: drop-shadow(0 7px 8px rgba(46, 67, 82, 0.16));
  opacity: 0.78;
}

.sculpt-tab-icon::before,
.sculpt-tab-icon::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
}

.tab-icon-trunk {
  color: #aa6738;
}

body[data-theme='dark'] .tab-icon-trunk {
  color: #c9844f;
}

.tab-icon-trunk::before {
  left: 11px;
  top: 7px;
  width: 20px;
  height: 29px;
  border-radius: 10px 10px 6px 6px / 8px 8px 5px 5px;
  background:
    radial-gradient(
      ellipse at 50% 11%,
      rgba(255, 226, 172, 0.95) 0 26%,
      rgba(126, 65, 31, 0.82) 27% 42%,
      transparent 43%
    ),
    linear-gradient(
      105deg,
      rgba(255, 195, 121, 0.38) 0 18%,
      transparent 19% 60%,
      rgba(82, 35, 18, 0.2) 61% 100%
    ),
    linear-gradient(180deg, #c8793f 0%, #9d552c 100%);
  clip-path: polygon(15% 5%, 86% 2%, 78% 100%, 22% 100%);
  box-shadow:
    inset 4px 3px 6px rgba(255, 221, 167, 0.34),
    inset -5px -6px 9px rgba(77, 36, 19, 0.28),
    0 7px 9px rgba(73, 49, 36, 0.17);
}

.tab-icon-trunk::after {
  left: 15px;
  top: 13px;
  width: 11px;
  height: 20px;
  border-left: 2px solid rgba(86, 38, 18, 0.42);
  border-right: 1px solid rgba(255, 202, 135, 0.36);
  border-radius: 50%;
  transform: rotate(7deg);
  box-shadow:
    -4px 5px 0 -3px rgba(85, 39, 19, 0.55),
    5px 8px 0 -4px rgba(85, 39, 19, 0.45),
    -2px 14px 0 -4px rgba(255, 209, 142, 0.5);
}

.tab-icon-leaves::before {
  left: 12px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 28%,
      rgba(255, 255, 255, 0.58),
      transparent 34%
    ),
    currentColor;
  box-shadow:
    -8px 8px 0 -1px currentColor,
    8px 8px 0 -1px currentColor,
    -3px 16px 0 -2px currentColor,
    6px 17px 0 -3px currentColor,
    inset -4px -5px 8px rgba(46, 67, 82, 0.15);
}

.tab-icon-leaves::after {
  left: 19px;
  top: 24px;
  width: 5px;
  height: 11px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.82;
}

.part-tab .tab-icon-leaves,
.part-tab.active .tab-icon-leaves {
  color: #45a85d;
}

body[data-theme='dark'] .part-tab .tab-icon-leaves,
body[data-theme='dark'] .part-tab.active .tab-icon-leaves {
  color: #66c77d;
}

.tab-icon-weather::before {
  left: 7px;
  top: 7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 32%,
      rgba(255, 255, 255, 0.72),
      transparent 32%
    ),
    currentColor;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.18),
    inset -4px -5px 7px rgba(46, 67, 82, 0.12);
}

.tab-icon-weather::after {
  left: 14px;
  top: 19px;
  width: 22px;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), transparent 46%),
    currentColor;
  box-shadow:
    -7px 2px 0 -1px currentColor,
    7px 3px 0 -2px currentColor,
    inset -4px -4px 6px rgba(46, 67, 82, 0.12);
}

.tab-icon-floors::before {
  left: 10px;
  top: 17px;
  width: 22px;
  height: 18px;
  border-radius: 4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), transparent 44%),
    currentColor;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.28),
    inset -4px -5px 7px rgba(46, 67, 82, 0.16);
}

.tab-icon-floors::after {
  left: 7px;
  top: 8px;
  width: 28px;
  height: 18px;
  border-radius: 4px 4px 2px 2px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 62%, 88% 100%, 12% 100%, 0 62%);
  opacity: 0.94;
}

.tab-icon-roof::before {
  left: 7px;
  top: 9px;
  width: 28px;
  height: 20px;
  border-radius: 5px 5px 3px 3px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.28) 0 2px,
      transparent 2px 5px
    ),
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), transparent 42%),
    currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: inset -5px -5px 7px rgba(46, 67, 82, 0.14);
}

.tab-icon-roof::after {
  left: 26px;
  top: 10px;
  width: 5px;
  height: 11px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.82;
}

.tab-icon-houseWindow::before {
  left: 9px;
  top: 8px;
  width: 24px;
  height: 27px;
  border: 5px solid currentColor;
  border-radius: 12px 12px 5px 5px;
  background:
    linear-gradient(currentColor 0 0) 50% 0 / 3px 100% no-repeat,
    linear-gradient(currentColor 0 0) 0 50% / 100% 3px no-repeat,
    rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.35),
    inset -3px -4px 7px rgba(46, 67, 82, 0.15);
}

.tab-icon-houseWindow::after {
  left: 14px;
  top: 12px;
  width: 14px;
  height: 8px;
  border-top: 3px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px 999px 0 0;
}

.tab-icon-houseDoor::before {
  left: 12px;
  top: 9px;
  width: 18px;
  height: 27px;
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), transparent 42%),
    currentColor;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.28),
    inset -4px -5px 7px rgba(46, 67, 82, 0.17);
}

.tab-icon-houseDoor::after {
  left: 24px;
  top: 23px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(46, 67, 82, 0.12);
}

.tab-icon-faceShape::before {
  left: 9px;
  top: 7px;
  width: 24px;
  height: 28px;
  border-radius: 7px 7px 8px 8px;
  clip-path: polygon(14% 0, 86% 0, 98% 34%, 84% 96%, 16% 96%, 2% 34%);
  background:
    radial-gradient(
      circle at 34% 28%,
      rgba(255, 255, 255, 0.62),
      transparent 32%
    ),
    currentColor;
  box-shadow:
    -5px 12px 0 -4px currentColor,
    5px 12px 0 -4px currentColor,
    inset -4px -5px 8px rgba(46, 67, 82, 0.15);
}

.tab-icon-faceShape::after {
  left: 15px;
  top: 18px;
  width: 12px;
  height: 6px;
  border-bottom: 3px solid rgba(255, 255, 255, 0.66);
  border-radius: 0 0 999px 999px;
}

.tab-icon-skinTone::before {
  left: 8px;
  top: 9px;
  width: 25px;
  height: 22px;
  border-radius: 56% 44% 46% 54% / 60% 50% 50% 40%;
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(255, 255, 255, 0.62),
      transparent 28%
    ),
    currentColor;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.28),
    inset -4px -5px 8px rgba(46, 67, 82, 0.15);
}

.tab-icon-skinTone::after {
  left: 14px;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    9px 1px 0 rgba(255, 255, 255, 0.62),
    4px 8px 0 rgba(255, 255, 255, 0.5);
}

.tab-icon-outfitColor::before {
  left: 6px;
  top: 9px;
  width: 29px;
  height: 27px;
  border-radius: 8px 8px 6px 6px;
  background:
    radial-gradient(circle at 50% 8%, var(--bar-bg) 0 5px, transparent 5.5px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.52), transparent 43%),
    currentColor;
  clip-path: polygon(
    0 22%,
    24% 2%,
    36% 10%,
    64% 10%,
    76% 2%,
    100% 22%,
    86% 43%,
    75% 36%,
    75% 100%,
    25% 100%,
    25% 36%,
    14% 43%
  );
  box-shadow:
    inset 4px 4px 7px rgba(255, 255, 255, 0.34),
    inset -5px -6px 9px rgba(46, 67, 82, 0.18);
}

.tab-icon-outfitColor::after {
  left: 13px;
  top: 15px;
  width: 16px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.38) 0 2px,
    transparent 2px 6px,
    rgba(255, 255, 255, 0.22) 6px 8px,
    transparent 8px 100%
  );
  opacity: 0.82;
}

.tab-icon-outfitStyle::before {
  left: 6px;
  top: 8px;
  width: 30px;
  height: 29px;
  border-radius: 8px 8px 7px 7px;
  background:
    radial-gradient(circle at 50% 7%, var(--bar-bg) 0 5px, transparent 5.5px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.56), transparent 42%),
    currentColor;
  clip-path: polygon(
    0 20%,
    23% 0,
    38% 9%,
    62% 9%,
    77% 0,
    100% 20%,
    84% 46%,
    74% 38%,
    74% 100%,
    26% 100%,
    26% 38%,
    16% 46%
  );
  box-shadow:
    inset 4px 4px 8px rgba(255, 255, 255, 0.34),
    inset -5px -6px 9px rgba(46, 67, 82, 0.18);
}

.tab-icon-outfitStyle::after {
  left: 18px;
  top: 15px;
  width: 6px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    -8px 3px 0 rgba(255, 255, 255, 0.32),
    8px 3px 0 rgba(255, 255, 255, 0.32);
}

.tab-icon-hairStyle {
  transform: rotate(-28deg);
}

.tab-icon-hairStyle::before {
  left: 7px;
  top: 5px;
  width: 22px;
  height: 8px;
  border-radius: 999px 999px 5px 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), transparent 42%),
    currentColor;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.32),
    inset -3px -3px 5px rgba(45, 74, 92, 0.18),
    0 6px 10px var(--accent-soft);
}

.tab-icon-hairStyle::after {
  left: 8px;
  top: 13px;
  width: 21px;
  height: 17px;
  border-radius: 0 0 8px 8px;
  background: repeating-linear-gradient(
    90deg,
    currentColor 0 3px,
    transparent 3px 5px
  );
}

.tab-icon-eyeStyle::before {
  left: 7px;
  top: 14px;
  width: 12px;
  height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 45% 36%,
      rgba(255, 255, 255, 0.86) 0 3px,
      transparent 4px
    ),
    currentColor;
  box-shadow:
    14px 0 0 currentColor,
    inset -3px -4px 6px rgba(46, 67, 82, 0.14);
}

.tab-icon-eyeStyle::after {
  left: 13px;
  top: 9px;
  width: 15px;
  height: 9px;
  border-top: 3px solid currentColor;
  border-radius: 999px 999px 0 0;
  opacity: 0.72;
}

.tab-icon-body::before {
  left: 13px;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.58),
      transparent 30%
    ),
    currentColor;
}

.tab-icon-body::after {
  left: 7px;
  top: 22px;
  width: 28px;
  height: 15px;
  border-radius: 14px 14px 5px 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.44), transparent 42%),
    currentColor;
  box-shadow: inset -4px -5px 7px rgba(46, 67, 82, 0.14);
}

.tab-icon-question::before {
  content: '?';
  left: 9px;
  top: 1px;
  width: 23px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: currentColor;
  font-size: 2.1rem;
  font-weight: 950;
  line-height: 1;
  text-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.26),
    0 7px 10px rgba(46, 67, 82, 0.12);
}

.tab-icon-question::after {
  left: 18px;
  top: 34px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.part-tab.active {
  color: var(--accent-color);
  background:
    radial-gradient(
      circle at 34% 24%,
      rgba(255, 255, 255, 0.62),
      transparent 32%
    ),
    var(--surface-3d);
  box-shadow:
    7px 9px 18px rgba(77, 52, 34, 0.1),
    -5px -5px 14px rgba(255, 255, 255, 0.52),
    inset 3px 3px 7px rgba(255, 255, 255, 0.55),
    inset -6px -7px 12px var(--surface-lowlight);
  transform: translateY(-1px);
}

.part-tab.active .part-tab-icon {
  filter: none;
  opacity: 1;
  text-shadow: 0 6px 12px var(--accent-soft);
}

.part-tab.active .sculpt-tab-icon {
  filter: drop-shadow(0 9px 10px var(--accent-soft))
    drop-shadow(0 2px 2px rgba(255, 255, 255, 0.35));
}

.part-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent-color);
}

.stage-controls {
  display: grid;
  grid-template-columns: 78px 1fr 78px;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line-color);
  background: var(--app-bg);
}

.stage-controls span {
  color: var(--muted-color);
  font-size: 0.95rem;
  font-weight: 900;
  text-align: center;
}

.stage-button {
  min-height: 34px;
  border: 1px solid var(--line-color);
  border-radius: 999px;
  color: var(--button-text);
  background: var(--surface-3d);
  font-weight: 900;
  box-shadow: var(--outer-3d-shadow), var(--inner-3d-shadow);
}

.stage-button:disabled {
  color: var(--soft-color);
  cursor: default;
  opacity: 0.55;
}

/* 아래 선택 패널 */
.picker-panel {
  min-height: 0;
  overflow-y: auto;
  padding: 22px 18px 32px;
  background: var(--panel-bg);
}

.panel-heading {
  margin-bottom: 18px;
}

.panel-heading p {
  margin: 0 0 3px;
  color: var(--accent-color);
  font-size: 0.92rem;
  font-weight: 900;
}

.panel-heading h2 {
  margin: 0;
  color: var(--text-color);
  font-size: clamp(1.7rem, 7vw, 2.45rem);
  font-weight: 950;
}

.title-helper-badge {
  display: inline-grid;
  min-height: 34px;
  margin-left: 8px;
  padding: 8px 12px;
  vertical-align: middle;
  place-items: center;
  border: 2px dashed var(--strong-line);
  border-radius: 14px;
  color: var(--soft-color);
  background: var(--button-bg);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.option-grid.swatch-card {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.option-grid.avatar-gender-grid {
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.option-card {
  position: relative;
  min-width: 0;
  min-height: 146px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 18px;
  color: var(--text-color);
  background: var(--surface-3d);
  box-shadow: var(--outer-3d-shadow), var(--inner-3d-shadow);
  transition:
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.option-card:hover {
  transform: translateY(-3px) scale(1.01);
  background:
    radial-gradient(
      circle at 30% 18%,
      rgba(255, 255, 255, 0.72),
      transparent 38%
    ),
    var(--surface-3d);
  box-shadow:
    18px 22px 38px rgba(123, 82, 46, 0.16),
    -9px -9px 24px rgba(255, 255, 255, 0.7),
    var(--inner-3d-shadow);
}

.option-card.active {
  border-color: var(--accent-color);
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 14px 26px rgba(79, 169, 232, 0.18),
    var(--pressed-3d-shadow);
  transform: scale(1.02);
}

.option-card.avatar-gender-card {
  display: flex;
  min-height: 374px;
  padding: 16px;
  flex-direction: column;
  border: 1px solid rgba(154, 116, 80, 0.2) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(
      circle at 30% 10%,
      rgba(255, 255, 255, 0.9),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 245, 0.96),
      rgba(236, 214, 188, 0.56)
    );
  box-shadow:
    0 18px 34px rgba(112, 80, 48, 0.14),
    inset 5px 6px 15px rgba(255, 255, 255, 0.72),
    inset -8px -10px 18px rgba(124, 90, 55, 0.12) !important;
}

.avatar-gender-card .option-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 288px;
  overflow: hidden;
  border: 1px solid rgba(151, 112, 74, 0.12);
  border-radius: 20px !important;
  background:
    radial-gradient(
      ellipse at 50% 84%,
      rgba(118, 88, 58, 0.18) 0 20%,
      transparent 46%
    ),
    radial-gradient(
      circle at 36% 12%,
      rgba(255, 255, 255, 0.86),
      transparent 34%
    ),
    linear-gradient(180deg, rgba(255, 250, 240, 0.7), rgba(235, 214, 190, 0.24));
  box-shadow:
    inset 4px 5px 12px rgba(255, 255, 255, 0.52),
    inset -6px -8px 14px rgba(92, 69, 47, 0.08) !important;
}

.avatar-gender-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.avatar-gender-thumb-image {
  display: block;
  width: auto;
  height: min(268px, 94%);
  max-width: 88%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 16px 15px rgba(74, 52, 37, 0.14))
    drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.16));
}

.avatar-gender-card .option-visual .avatar-model {
  top: 46%;
  bottom: auto;
  transform: translate(-50%, -50%) scale(0.62);
  transform-origin: center center;
}

.avatar-gender-card .option-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  border-radius: 16px;
  color: #5f4635;
  background: rgba(255, 248, 238, 0.88);
  box-shadow:
    inset 3px 4px 10px rgba(255, 255, 255, 0.68),
    inset -5px -7px 12px rgba(126, 91, 56, 0.09);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
}

.option-card.avatar-gender-card:hover {
  border-color: rgba(92, 176, 224, 0.36) !important;
  background:
    radial-gradient(
      circle at 30% 10%,
      rgba(255, 255, 255, 0.96),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 246, 0.98),
      rgba(239, 219, 194, 0.64)
    );
  box-shadow:
    0 22px 38px rgba(105, 76, 47, 0.16),
    inset 5px 6px 15px rgba(255, 255, 255, 0.76),
    inset -8px -10px 18px rgba(124, 90, 55, 0.12) !important;
}

.option-card.avatar-gender-card.active {
  border-color: rgba(79, 169, 232, 0.48) !important;
  box-shadow:
    0 0 0 3px rgba(103, 199, 255, 0.18),
    0 20px 38px rgba(79, 169, 232, 0.18),
    inset 5px 6px 15px rgba(255, 255, 255, 0.76),
    inset -8px -10px 18px rgba(63, 127, 173, 0.14) !important;
}

.avatar-gender-card.active .option-label {
  color: #385d75;
  background: rgba(238, 249, 255, 0.92);
}

@media (max-width: 560px) {
  .option-grid.avatar-gender-grid {
    grid-template-columns: 1fr;
  }

  .option-card.avatar-gender-card {
    min-height: 348px;
  }

  .avatar-gender-card .option-visual {
    height: 274px;
  }

  .avatar-gender-thumb-image {
    height: min(254px, 94%);
  }

  .avatar-gender-card .option-visual .avatar-model {
    top: 46%;
    transform: translate(-50%, -50%) scale(0.56);
  }
}

.option-visual {
  position: relative;
  display: grid;
  place-items: center;
  height: 104px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 34% 18%,
      rgba(255, 255, 255, 0.78),
      transparent 38%
    ),
    linear-gradient(145deg, rgba(255, 255, 255, 0.32), rgba(213, 184, 151, 0.1));
  box-shadow:
    inset 4px 5px 10px rgba(255, 255, 255, 0.5),
    inset -7px -9px 14px rgba(112, 82, 55, 0.1);
}

.weather-card .option-visual {
  height: 124px;
}

.weather-sample {
  position: relative;
  width: min(142px, 100%);
  aspect-ratio: 1 / 0.82;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 -10px 28px rgba(255, 255, 255, 0.18),
    0 10px 18px rgba(55, 83, 96, 0.12);
}

.weather-sample::before,
.weather-sample::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.weather-sample-sun {
  position: absolute;
  top: 27%;
  left: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffdca5 0 18%, #ffb878 60%, #ffad6a 100%);
  box-shadow:
    0 0 22px rgba(255, 184, 95, 0.7),
    0 0 42px rgba(255, 205, 132, 0.55);
  opacity: 0;
  transform: translateX(-50%);
}

.weather-sample.weather-sunny-warm {
  background:
    radial-gradient(
      circle at 48% 45%,
      rgba(255, 221, 164, 0.45) 0 44px,
      transparent 46px
    ),
    radial-gradient(
      circle at 24% 20%,
      rgba(255, 255, 255, 0.26) 0 40px,
      transparent 42px
    ),
    linear-gradient(180deg, #b7ecff 0%, #dff7ff 62%, #fff1d7 100%);
}

.weather-sample.weather-sunny-warm .weather-sample-sun {
  opacity: 1;
}

.weather-sample.weather-clear-blue {
  background: linear-gradient(180deg, #9fe2fb 0%, #c9f1ff 58%, #e8fbff 100%);
}

.weather-sample.weather-fluffy-cloud {
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(255, 255, 255, 0.18) 0 20px,
      transparent 21px
    ),
    linear-gradient(180deg, #087dc1 0%, #0c9fdd 58%, #82d7f2 100%);
}

.weather-sample.weather-fluffy-cloud::before {
  inset: 0;
  background:
    radial-gradient(
      ellipse at 12% 70%,
      rgba(255, 255, 255, 0.94) 0 18px,
      rgba(224, 237, 246, 0.82) 19px 29px,
      transparent 30px
    ),
    radial-gradient(
      ellipse at 28% 60%,
      rgba(255, 255, 255, 0.97) 0 25px,
      rgba(229, 240, 248, 0.86) 26px 38px,
      transparent 39px
    ),
    radial-gradient(
      ellipse at 46% 72%,
      rgba(255, 255, 255, 0.93) 0 19px,
      rgba(222, 236, 246, 0.78) 20px 31px,
      transparent 32px
    ),
    radial-gradient(
      ellipse at 64% 38%,
      rgba(255, 255, 255, 0.98) 0 25px,
      rgba(230, 241, 249, 0.88) 26px 40px,
      transparent 41px
    ),
    radial-gradient(
      ellipse at 82% 46%,
      rgba(255, 255, 255, 0.94) 0 20px,
      rgba(224, 237, 246, 0.8) 21px 34px,
      transparent 35px
    ),
    radial-gradient(
      ellipse at 95% 32%,
      rgba(255, 255, 255, 0.9) 0 14px,
      rgba(224, 237, 246, 0.68) 15px 24px,
      transparent 25px
    );
  filter: drop-shadow(0 7px 7px rgba(26, 91, 134, 0.22))
    drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.36));
}

.weather-sample.weather-fluffy-cloud::after {
  inset: 0;
  background:
    radial-gradient(
      ellipse at 12% 28%,
      rgba(255, 255, 255, 0.82) 0 7px,
      transparent 9px
    ),
    radial-gradient(
      ellipse at 40% 18%,
      rgba(255, 255, 255, 0.75) 0 8px,
      transparent 10px
    ),
    radial-gradient(
      ellipse at 78% 20%,
      rgba(255, 255, 255, 0.72) 0 10px,
      transparent 12px
    );
  opacity: 0.8;
}

.weather-sample.weather-gray-cloud {
  background: linear-gradient(180deg, #e8f0f3 0%, #cbd8de 100%);
}

.weather-sample.weather-gray-cloud::before,
.weather-sample.weather-rainy::before {
  inset: 0;
  background:
    radial-gradient(
      circle at 8% 60%,
      rgba(210, 222, 228, 0.82) 0 24px,
      transparent 25px
    ),
    radial-gradient(
      circle at 26% 46%,
      rgba(231, 238, 241, 0.92) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      circle at 48% 60%,
      rgba(202, 216, 224, 0.86) 0 28px,
      transparent 29px
    ),
    radial-gradient(
      circle at 70% 44%,
      rgba(229, 236, 240, 0.92) 0 36px,
      transparent 37px
    ),
    radial-gradient(
      circle at 92% 62%,
      rgba(194, 209, 218, 0.84) 0 26px,
      transparent 27px
    );
}

.weather-sample.weather-gray-cloud::before {
  inset: 0;
  background:
    radial-gradient(
      ellipse at 10% 58%,
      rgba(240, 244, 246, 0.9) 0 20px,
      rgba(202, 214, 222, 0.82) 21px 32px,
      transparent 33px
    ),
    radial-gradient(
      ellipse at 26% 54%,
      rgba(251, 253, 254, 0.92) 0 28px,
      rgba(216, 226, 233, 0.86) 29px 44px,
      transparent 45px
    ),
    radial-gradient(
      ellipse at 46% 72%,
      rgba(226, 234, 238, 0.82) 0 22px,
      rgba(188, 201, 211, 0.74) 23px 36px,
      transparent 37px
    ),
    radial-gradient(
      ellipse at 64% 38%,
      rgba(248, 251, 252, 0.92) 0 24px,
      rgba(212, 222, 229, 0.84) 25px 39px,
      transparent 40px
    ),
    radial-gradient(
      ellipse at 82% 48%,
      rgba(238, 243, 246, 0.86) 0 28px,
      rgba(202, 214, 222, 0.82) 29px 44px,
      transparent 45px
    ),
    radial-gradient(
      ellipse at 96% 62%,
      rgba(226, 234, 238, 0.78) 0 18px,
      rgba(190, 202, 212, 0.68) 19px 30px,
      transparent 31px
    );
  filter: drop-shadow(0 6px 6px rgba(117, 136, 148, 0.18));
}

.weather-sample.weather-rainy {
  background:
    radial-gradient(
      circle at 20% 14%,
      rgba(132, 137, 153, 0.26) 0 32px,
      transparent 34px
    ),
    linear-gradient(180deg, #4b4f5b 0%, #686c78 52%, #8c909a 100%);
}

.weather-sample.weather-rainy::before {
  inset: 0;
  background:
    radial-gradient(
      ellipse at 10% 58%,
      rgba(221, 222, 228, 0.86) 0 20px,
      rgba(148, 151, 164, 0.82) 21px 32px,
      transparent 33px
    ),
    radial-gradient(
      ellipse at 26% 54%,
      rgba(239, 240, 244, 0.9) 0 28px,
      rgba(166, 169, 181, 0.86) 29px 44px,
      transparent 45px
    ),
    radial-gradient(
      ellipse at 46% 72%,
      rgba(204, 207, 216, 0.8) 0 22px,
      rgba(130, 134, 150, 0.76) 23px 36px,
      transparent 37px
    ),
    radial-gradient(
      ellipse at 64% 38%,
      rgba(236, 237, 242, 0.9) 0 24px,
      rgba(159, 162, 176, 0.84) 25px 39px,
      transparent 40px
    ),
    radial-gradient(
      ellipse at 82% 48%,
      rgba(228, 229, 236, 0.86) 0 28px,
      rgba(150, 153, 168, 0.82) 29px 44px,
      transparent 45px
    ),
    radial-gradient(
      ellipse at 96% 62%,
      rgba(207, 210, 218, 0.78) 0 18px,
      rgba(130, 134, 150, 0.7) 19px 30px,
      transparent 31px
    );
  filter: drop-shadow(0 6px 6px rgba(38, 41, 53, 0.28));
}

.weather-sample.weather-rainy::after {
  inset: 0;
  background:
    repeating-linear-gradient(
      104deg,
      transparent 0 10px,
      rgba(248, 251, 255, 0.76) 10px 11.5px,
      transparent 11.5px 20px
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 22px,
      rgba(171, 210, 229, 0.58) 22px 23px,
      transparent 23px 34px
    ),
    radial-gradient(
      ellipse at 14% 104%,
      rgba(230, 231, 237, 0.7) 0 24px,
      transparent 25px
    ),
    radial-gradient(
      ellipse at 54% 108%,
      rgba(194, 197, 210, 0.65) 0 32px,
      transparent 33px
    ),
    radial-gradient(
      ellipse at 86% 104%,
      rgba(224, 225, 232, 0.68) 0 28px,
      transparent 29px
    );
  background-size:
    18px 38px,
    30px 50px,
    auto,
    auto,
    auto;
  opacity: 0.92;
}

.weather-sample.weather-storm {
  background:
    radial-gradient(
      circle at 24% 18%,
      rgba(40, 73, 129, 0.82),
      transparent 42%
    ),
    linear-gradient(180deg, #061334 0%, #14274d 58%, #273c5f 100%);
}

.weather-sample.weather-storm::before {
  top: 10px;
  left: 45%;
  width: 42px;
  height: 76px;
  background: linear-gradient(180deg, #ffffff, #fff18f 42%, #ffe146);
  clip-path: polygon(
    42% 0,
    76% 0,
    58% 38%,
    88% 38%,
    24% 100%,
    42% 55%,
    14% 55%
  );
  filter: drop-shadow(0 0 10px rgba(255, 241, 130, 0.92));
  z-index: 1;
}

.weather-sample.weather-storm::after {
  inset: 0;
  background:
    repeating-linear-gradient(
      112deg,
      rgba(172, 214, 255, 0.7) 0 2px,
      transparent 2px 13px
    ),
    radial-gradient(
      circle at 14% 22%,
      rgba(37, 61, 105, 0.75) 0 28px,
      transparent 29px
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(44, 70, 112, 0.55) 0 32px,
      transparent 33px
    );
  background-size:
    16px 26px,
    auto,
    auto;
}

.weather-sample.weather-snowy-blue {
  background: linear-gradient(180deg, #9fe4fb 0%, #d2f4ff 58%, #f8fdff 100%);
}

.weather-sample.weather-snowy-blue::after {
  inset: 0;
  background-image:
    radial-gradient(circle, #ffffff 0 2px, transparent 2.5px),
    radial-gradient(circle, #ffffff 0 1.5px, transparent 2px),
    radial-gradient(circle, #e1f8ff 0 2px, transparent 2.5px),
    linear-gradient(
      45deg,
      transparent 48%,
      rgba(255, 255, 255, 0.75) 49% 51%,
      transparent 52%
    );
  background-position:
    14px 10px,
    54px 28px,
    88px 8px,
    0 0;
  background-size:
    36px 32px,
    48px 42px,
    58px 50px,
    24px 24px;
}

.option-label {
  display: block;
  min-height: 32px;
  margin-top: 6px;
  color: var(--text-color);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: center;
}

/* 나무 도형 */
.tree-model {
  position: relative;
  width: 210px;
  height: 275px;
}

.option-visual .tree-model {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%) scale(0.42);
  transform-origin: center bottom;
}

.leaves-only-model {
  position: relative;
  width: 240px;
  height: 240px;
  filter: drop-shadow(0 12px 18px rgba(66, 54, 48, 0.12));
}

.option-visual .leaves-only-model {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.43);
  transform-origin: center;
}

.tree-object .leaves-only-model {
  transform: translateY(-12px) scale(1.05);
  transform-origin: center bottom;
}

.tree-trunk {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 156px;
  border-radius: 28px 28px 10px 10px;
  --bark-light: #d38943;
  --bark-mid: #a95e2f;
  --bark-dark: #5a2f17;
  --bark-line: rgba(55, 28, 14, 0.62);
  --bark-glow: rgba(255, 203, 126, 0.28);
  background:
    radial-gradient(
      ellipse at 38% 18%,
      rgba(255, 214, 145, 0.48) 0 7%,
      transparent 8%
    ),
    radial-gradient(
      ellipse at 63% 38%,
      rgba(75, 37, 18, 0.55) 0 7%,
      transparent 8%
    ),
    radial-gradient(
      ellipse at 35% 67%,
      rgba(83, 40, 18, 0.45) 0 6%,
      transparent 7%
    ),
    repeating-linear-gradient(
      102deg,
      transparent 0 8px,
      var(--bark-line) 8px 10px,
      transparent 10px 18px
    ),
    repeating-linear-gradient(
      82deg,
      rgba(223, 129, 56, 0.42) 0 4px,
      transparent 4px 14px
    ),
    linear-gradient(
      90deg,
      var(--bark-dark) 0%,
      var(--bark-mid) 25%,
      var(--bark-light) 52%,
      #7a3f1f 100%
    );
  box-shadow:
    inset 10px 0 0 rgba(255, 221, 158, 0.14),
    inset -12px 0 0 rgba(42, 20, 10, 0.24),
    inset 0 10px 16px rgba(255, 220, 152, 0.12),
    0 9px 14px rgba(74, 39, 18, 0.18);
  transform: translateX(-50%);
  z-index: 5;
  overflow: hidden;
  isolation: isolate;
}

.trunk-thin-long .tree-trunk {
  width: 38px;
  height: 224px;
  border-radius: 18px 18px 5px 5px;
  clip-path: polygon(20% 0, 78% 0, 94% 100%, 4% 100%);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      96deg,
      transparent 0 9px,
      rgba(54, 30, 18, 0.7) 9px 11px,
      transparent 11px 19px
    ),
    repeating-linear-gradient(
      82deg,
      rgba(180, 98, 38, 0.45) 0 3px,
      transparent 3px 13px
    ),
    linear-gradient(90deg, #8d4a22 0%, #b7652d 42%, #5a2f17 100%);
  box-shadow:
    inset 8px 0 0 rgba(255, 184, 94, 0.14),
    inset -8px 0 0 rgba(35, 18, 9, 0.28),
    0 7px 12px rgba(74, 39, 18, 0.16);
}

.trunk-thin-short .tree-trunk {
  width: 34px;
  height: 142px;
  border-radius: 18px 18px 5px 5px;
  clip-path: polygon(22% 0, 80% 0, 92% 100%, 6% 100%);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      96deg,
      transparent 0 8px,
      rgba(54, 30, 18, 0.68) 8px 10px,
      transparent 10px 17px
    ),
    repeating-linear-gradient(
      82deg,
      rgba(180, 98, 38, 0.42) 0 3px,
      transparent 3px 12px
    ),
    linear-gradient(90deg, #8d4a22 0%, #b7652d 42%, #5a2f17 100%);
  box-shadow:
    inset 7px 0 0 rgba(255, 184, 94, 0.14),
    inset -7px 0 0 rgba(35, 18, 9, 0.28),
    0 7px 12px rgba(74, 39, 18, 0.16);
}

.trunk-thin-long .tree-trunk::before,
.trunk-thin-short .tree-trunk::before,
.trunk-thick-long .tree-trunk::before,
.trunk-thick-short .tree-trunk::before,
.trunk-normal-long .tree-trunk::before,
.trunk-normal-medium .tree-trunk::before {
  content: '';
  position: absolute;
  inset: 5px 4px;
  background:
    repeating-radial-gradient(
      ellipse at 44% 17%,
      transparent 0 5px,
      rgba(59, 30, 14, 0.84) 5px 6px,
      transparent 6px 9px
    ),
    repeating-radial-gradient(
      ellipse at 64% 43%,
      transparent 0 4px,
      rgba(59, 30, 14, 0.62) 4px 5px,
      transparent 5px 8px
    ),
    repeating-radial-gradient(
      ellipse at 34% 70%,
      transparent 0 3px,
      rgba(96, 44, 18, 0.5) 3px 4px,
      transparent 4px 8px
    ),
    repeating-linear-gradient(
      105deg,
      transparent 0 11px,
      rgba(40, 22, 13, 0.66) 11px 13px,
      transparent 13px 25px
    ),
    repeating-linear-gradient(
      74deg,
      transparent 0 13px,
      rgba(224, 129, 50, 0.5) 13px 15px,
      transparent 15px 27px
    );
  background-repeat: round;
  opacity: 0.88;
  -webkit-mask-image: repeating-linear-gradient(
    98deg,
    rgba(0, 0, 0, 0.92) 0 8px,
    rgba(0, 0, 0, 0.48) 8px 11px,
    rgba(0, 0, 0, 0.9) 11px 19px
  );
  mask-image: repeating-linear-gradient(
    98deg,
    rgba(0, 0, 0, 0.92) 0 8px,
    rgba(0, 0, 0, 0.48) 8px 11px,
    rgba(0, 0, 0, 0.9) 11px 19px
  );
  z-index: 1;
}

.trunk-thin-long .tree-trunk::after,
.trunk-thin-short .tree-trunk::after,
.trunk-thick-long .tree-trunk::after,
.trunk-thick-short .tree-trunk::after,
.trunk-normal-long .tree-trunk::after,
.trunk-normal-medium .tree-trunk::after {
  content: '';
  position: absolute;
  inset: 0 4px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 215, 143, 0.3),
      transparent 28%,
      transparent 62%,
      rgba(28, 13, 6, 0.28)
    ),
    linear-gradient(
      180deg,
      rgba(255, 237, 196, 0.18),
      transparent 18%,
      transparent 76%,
      rgba(42, 20, 9, 0.14)
    ),
    repeating-linear-gradient(
      171deg,
      transparent 0 18px,
      rgba(63, 33, 18, 0.78) 18px 20px,
      transparent 20px 31px
    ),
    repeating-linear-gradient(
      9deg,
      transparent 0 32px,
      rgba(255, 199, 113, 0.22) 32px 34px,
      transparent 34px 48px
    );
  opacity: 0.82;
  z-index: 2;
  pointer-events: none;
}

.trunk-thick-long .tree-trunk::before,
.trunk-thick-short .tree-trunk::before {
  background:
    repeating-radial-gradient(
      ellipse at 43% 22%,
      transparent 0 7px,
      rgba(58, 30, 15, 0.82) 7px 8px,
      transparent 8px 12px
    ),
    repeating-radial-gradient(
      ellipse at 62% 48%,
      transparent 0 6px,
      rgba(58, 30, 15, 0.68) 6px 8px,
      transparent 8px 13px
    ),
    radial-gradient(
      ellipse at 72% 74%,
      rgba(72, 34, 15, 0.55) 0 7%,
      transparent 8%
    ),
    repeating-linear-gradient(
      101deg,
      transparent 0 15px,
      rgba(38, 22, 13, 0.58) 15px 17px,
      transparent 17px 31px
    ),
    repeating-linear-gradient(
      78deg,
      transparent 0 17px,
      rgba(224, 129, 50, 0.42) 17px 19px,
      transparent 19px 33px
    );
}

.trunk-thin-long .tree-trunk::before,
.trunk-thin-short .tree-trunk::before {
  inset: 5px 3px;
  background:
    repeating-radial-gradient(
      ellipse at 48% 22%,
      transparent 0 4px,
      rgba(59, 30, 14, 0.84) 4px 5px,
      transparent 5px 8px
    ),
    repeating-linear-gradient(
      100deg,
      transparent 0 10px,
      rgba(40, 22, 13, 0.72) 10px 12px,
      transparent 12px 22px
    ),
    repeating-linear-gradient(
      76deg,
      transparent 0 13px,
      rgba(224, 129, 50, 0.52) 13px 15px,
      transparent 15px 24px
    );
}

.tree-trunk-only .leaf-layer,
.leaf-layer.no-leaves {
  display: none;
}

.trunk-thick-long .tree-trunk {
  width: 70px;
  height: 205px;
}

.trunk-thick-short .tree-trunk {
  width: 70px;
  height: 126px;
}

.trunk-normal-long .tree-trunk {
  width: 48px;
  height: 205px;
}

.trunk-normal-medium .tree-trunk {
  width: 36px;
  height: 156px;
}

.trunk-thin-long .tree-trunk,
.trunk-thin-short .tree-trunk,
.trunk-thick-long .tree-trunk,
.trunk-thick-short .tree-trunk,
.trunk-normal-long .tree-trunk,
.trunk-normal-medium .tree-trunk {
  border-radius: 20px 20px 5px 5px;
  clip-path: polygon(18% 0, 82% 0, 96% 100%, 4% 100%);
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 44% 12%,
      rgba(255, 221, 153, 0.55) 0 6%,
      transparent 7%
    ),
    radial-gradient(
      ellipse at 63% 34%,
      rgba(70, 34, 16, 0.52) 0 6%,
      transparent 7%
    ),
    radial-gradient(
      ellipse at 34% 62%,
      rgba(89, 42, 19, 0.5) 0 5%,
      transparent 6%
    ),
    radial-gradient(
      ellipse at 58% 82%,
      rgba(255, 190, 105, 0.28) 0 5%,
      transparent 6%
    ),
    repeating-linear-gradient(
      96deg,
      transparent 0 9px,
      rgba(54, 30, 18, 0.72) 9px 11px,
      transparent 11px 19px
    ),
    repeating-linear-gradient(
      82deg,
      rgba(205, 111, 42, 0.45) 0 3px,
      transparent 3px 13px
    ),
    linear-gradient(90deg, #6e3719 0%, #b8662f 34%, #d08342 55%, #5a2f17 100%);
  box-shadow:
    inset 10px 0 0 rgba(255, 206, 130, 0.16),
    inset -10px 0 0 rgba(35, 18, 9, 0.3),
    inset 0 10px 16px rgba(255, 230, 165, 0.1),
    0 7px 12px rgba(74, 39, 18, 0.16);
}

/* 나무기둥 선택 칸 1~5: 외부 이미지 없이 CSS 질감만으로 만든 일러스트 스타일 */
.trunk-thin-long .tree-trunk,
.trunk-thin-short .tree-trunk,
.trunk-thick-long .tree-trunk,
.trunk-thick-short .tree-trunk,
.trunk-normal-long .tree-trunk {
  --trunk-outline: rgba(95, 63, 38, 0.24);
  --trunk-deep: #4c2512;
  --trunk-dark: #6e371c;
  --trunk-mid: #b66731;
  --trunk-warm: #d98a45;
  --trunk-light: #f1b76b;
  border: 3px solid var(--trunk-outline);
  box-sizing: border-box;
  filter: drop-shadow(0 10px 8px rgba(52, 28, 14, 0.16));
  overflow: visible;
}

.trunk-thin-long .branch-layer,
.trunk-thin-short .branch-layer,
.trunk-thick-long .branch-layer,
.trunk-thick-short .branch-layer,
.trunk-normal-long .branch-layer {
  display: none;
}

/* 1번 칸: 세로형 각진 기둥 */
.trunk-thin-long .tree-trunk {
  width: 72px;
  height: 218px;
  border-radius: 12px 12px 7px 7px;
  clip-path: polygon(18% 0, 82% 0, 96% 100%, 4% 100%);
  background:
    repeating-linear-gradient(
      88deg,
      transparent 0 18px,
      rgba(52, 25, 12, 0.54) 18px 20px,
      transparent 20px 34px
    ),
    repeating-linear-gradient(
      176deg,
      transparent 0 30px,
      rgba(255, 212, 142, 0.24) 30px 32px,
      transparent 32px 54px
    ),
    linear-gradient(
      90deg,
      #5c2d17 0 15%,
      #9c5428 15% 33%,
      #dc8c43 33% 53%,
      #b86530 53% 73%,
      #6d3419 73% 100%
    );
  box-shadow:
    inset 12px 0 0 rgba(255, 212, 132, 0.18),
    inset -17px 0 0 rgba(43, 20, 8, 0.34),
    inset 0 8px 0 rgba(255, 228, 166, 0.12),
    0 8px 0 rgba(43, 29, 17, 0.08);
}

.trunk-thin-long .tree-trunk::before {
  content: '';
  position: absolute;
  inset: 9px 10px;
  border-left: 2px solid rgba(59, 28, 13, 0.68);
  border-right: 2px solid rgba(94, 45, 18, 0.5);
  background:
    linear-gradient(
      72deg,
      transparent 0 36%,
      rgba(63, 29, 12, 0.62) 37% 39%,
      transparent 40%
    ),
    linear-gradient(
      108deg,
      transparent 0 60%,
      rgba(255, 204, 119, 0.3) 61% 63%,
      transparent 64%
    ),
    repeating-linear-gradient(
      92deg,
      transparent 0 13px,
      rgba(66, 34, 17, 0.36) 13px 15px,
      transparent 15px 25px
    );
  opacity: 0.92;
  pointer-events: none;
}

.trunk-thin-long .tree-trunk::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 72px;
  width: 24px;
  height: 34px;
  border: 2px solid rgba(61, 28, 11, 0.75);
  border-radius: 52% 48% 58% 42%;
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(80, 37, 16, 0.9) 0 26%,
      transparent 27%
    ),
    repeating-radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 192, 98, 0.28) 0 4px,
      rgba(61, 28, 11, 0.35) 4px 6px,
      transparent 6px 9px
    );
  box-shadow: 0 38px 0 -8px rgba(86, 40, 16, 0.36);
  pointer-events: none;
}

/* 2번 칸: 가늘고 뒤틀린 기둥 */
.trunk-thin-short .tree-trunk {
  width: 25px;
  height: 172px;
  border-radius: 17px 15px 7px 7px;
  clip-path: none;
  background:
    linear-gradient(
      73deg,
      transparent 0 31%,
      rgba(48, 23, 12, 0.78) 32% 36%,
      transparent 37% 100%
    ),
    linear-gradient(
      107deg,
      transparent 0 56%,
      rgba(255, 194, 99, 0.34) 57% 61%,
      transparent 62% 100%
    ),
    repeating-linear-gradient(
      96deg,
      rgba(75, 35, 15, 0.5) 0 3px,
      transparent 3px 13px
    ),
    linear-gradient(90deg, #542712 0%, #bc642c 54%, #633018 100%);
  box-shadow:
    inset 5px 0 0 rgba(255, 207, 125, 0.14),
    inset -8px 0 0 rgba(36, 17, 8, 0.34),
    0 8px 0 rgba(43, 29, 17, 0.08);
  transform: translateX(-50%) skewX(-4deg);
}

.trunk-thin-short .tree-trunk::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -66px;
  width: 116px;
  height: 96px;
  background:
    linear-gradient(
      58deg,
      transparent 0 46%,
      rgba(95, 63, 38, 0.24) 47% 50%,
      #8b451f 51% 55%,
      transparent 56% 100%
    ),
    linear-gradient(
      90deg,
      transparent 0 48%,
      rgba(95, 63, 38, 0.24) 49% 52%,
      #9a4f24 53% 57%,
      transparent 58% 100%
    ),
    linear-gradient(
      123deg,
      transparent 0 45%,
      rgba(95, 63, 38, 0.24) 46% 49%,
      #7a3b1c 50% 54%,
      transparent 55% 100%
    ),
    linear-gradient(
      48deg,
      transparent 0 58%,
      rgba(255, 186, 95, 0.36) 59% 61%,
      transparent 62% 100%
    ),
    linear-gradient(
      132deg,
      transparent 0 57%,
      rgba(255, 186, 95, 0.28) 58% 60%,
      transparent 61% 100%
    );
  background-repeat: no-repeat;
  background-size:
    54px 86px,
    28px 92px,
    54px 86px,
    54px 86px,
    54px 86px;
  background-position:
    5px 7px,
    44px 0,
    58px 7px,
    5px 7px,
    58px 7px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 0 rgba(95, 63, 38, 0.18));
  z-index: -1;
  pointer-events: none;
}

.trunk-thin-short .tree-trunk::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 18px;
  width: 17px;
  height: 120px;
  border-radius: 50%;
  background:
    linear-gradient(
      100deg,
      transparent 0 42%,
      rgba(48, 23, 12, 0.7) 43% 48%,
      transparent 49% 100%
    ),
    repeating-linear-gradient(
      82deg,
      transparent 0 13px,
      rgba(255, 194, 99, 0.28) 13px 15px,
      transparent 15px 26px
    );
  box-shadow:
    -3px 28px 0 -5px rgba(48, 23, 12, 0.7),
    4px 72px 0 -5px rgba(255, 194, 99, 0.25);
  transform: translateX(-50%) rotate(4deg);
  pointer-events: none;
}

/* 3번 칸: 밑동이 넓은 종형 기둥 */
.trunk-thick-long .tree-trunk {
  width: 104px;
  height: 202px;
  border-radius: 26px 26px 22px 22px;
  clip-path: polygon(
    36% 0,
    64% 0,
    72% 36%,
    81% 72%,
    98% 100%,
    2% 100%,
    19% 72%,
    28% 36%
  );
  background:
    radial-gradient(
      ellipse at 50% 95%,
      rgba(255, 217, 145, 0.38) 0 20%,
      transparent 21%
    ),
    repeating-linear-gradient(
      86deg,
      transparent 0 17px,
      rgba(61, 28, 13, 0.42) 17px 19px,
      transparent 19px 33px
    ),
    repeating-linear-gradient(
      176deg,
      transparent 0 26px,
      rgba(255, 205, 120, 0.22) 26px 28px,
      transparent 28px 48px
    ),
    linear-gradient(
      90deg,
      #653016 0%,
      #a75a2a 28%,
      #df8d43 54%,
      #9b4d22 78%,
      #4a2311 100%
    );
  box-shadow:
    inset 18px 0 0 rgba(255, 212, 132, 0.14),
    inset -20px 0 0 rgba(39, 18, 8, 0.34),
    inset 0 -16px 0 rgba(80, 37, 16, 0.18),
    0 8px 0 rgba(43, 29, 17, 0.08);
}

.trunk-thick-long .tree-trunk::before {
  content: '';
  position: absolute;
  left: 19px;
  right: 18px;
  bottom: 8px;
  height: 34px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    ellipse at 50% 50%,
    rgba(70, 32, 12, 0.58) 0 5px,
    rgba(255, 193, 97, 0.22) 5px 9px,
    transparent 9px 12px
  );
  opacity: 0.72;
  pointer-events: none;
}

.trunk-thick-long .tree-trunk::after {
  content: '';
  position: absolute;
  left: 45px;
  top: 18px;
  width: 2px;
  height: 142px;
  border-radius: 999px;
  background: rgba(54, 26, 13, 0.42);
  box-shadow:
    -18px 18px 0 rgba(89, 43, 20, 0.36),
    20px 34px 0 rgba(255, 201, 111, 0.28),
    31px 68px 0 rgba(64, 29, 12, 0.34);
  pointer-events: none;
}

/* 4번 칸: 가운데 구멍이 파인 기둥 */
.trunk-thick-short .tree-trunk {
  width: 82px;
  height: 178px;
  border-radius: 24px 24px 10px 10px;
  clip-path: polygon(19% 0, 83% 0, 94% 100%, 6% 100%);
  background:
    repeating-linear-gradient(
      98deg,
      transparent 0 14px,
      rgba(61, 28, 13, 0.5) 14px 16px,
      transparent 16px 29px
    ),
    linear-gradient(90deg, #663118 0%, #bd682f 38%, #e18f43 58%, #743719 100%);
  box-shadow:
    inset 12px 0 0 rgba(255, 209, 127, 0.15),
    inset -18px 0 0 rgba(37, 17, 7, 0.35),
    0 8px 0 rgba(43, 29, 17, 0.08);
}

.trunk-thick-short .tree-trunk::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 48%;
  width: 42px;
  height: 58px;
  border: 4px solid rgba(95, 63, 38, 0.18);
  border-radius: 56% 44% 58% 42%;
  background: radial-gradient(
    ellipse at 42% 42%,
    rgba(23, 10, 4, 0.96) 0 35%,
    rgba(72, 31, 12, 0.96) 36% 62%,
    rgba(158, 80, 31, 0.4) 63% 100%
  );
  box-shadow:
    inset -8px -6px 0 rgba(10, 5, 2, 0.38),
    0 0 0 4px rgba(255, 184, 88, 0.22);
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
}

.trunk-thick-short .tree-trunk::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 16px;
  width: 44px;
  height: 138px;
  border-left: 2px solid rgba(60, 28, 13, 0.48);
  border-right: 2px solid rgba(255, 201, 112, 0.24);
  border-radius: 50%;
  transform: rotate(4deg);
  pointer-events: none;
}

/* 5번 칸: 소용돌이 문양의 거친 기둥 */
.trunk-normal-long .tree-trunk {
  width: 76px;
  height: 196px;
  border-radius: 28px 22px 9px 12px;
  clip-path: polygon(18% 0, 82% 0, 94% 100%, 6% 100%);
  background:
    repeating-radial-gradient(
      ellipse at 30% 28%,
      rgba(65, 29, 12, 0.78) 0 4px,
      rgba(232, 143, 66, 0.26) 4px 8px,
      transparent 8px 13px
    ),
    repeating-radial-gradient(
      ellipse at 68% 52%,
      rgba(58, 25, 10, 0.74) 0 3px,
      rgba(255, 189, 93, 0.26) 3px 7px,
      transparent 7px 12px
    ),
    repeating-radial-gradient(
      ellipse at 43% 78%,
      rgba(76, 34, 13, 0.68) 0 4px,
      rgba(230, 132, 55, 0.28) 4px 8px,
      transparent 8px 14px
    ),
    repeating-linear-gradient(
      101deg,
      transparent 0 12px,
      rgba(54, 25, 12, 0.52) 12px 15px,
      transparent 15px 28px
    ),
    linear-gradient(90deg, #5d2d15 0%, #b9632d 39%, #e18d42 61%, #522611 100%);
  box-shadow:
    inset 13px 0 0 rgba(255, 211, 129, 0.12),
    inset -18px 0 0 rgba(31, 14, 6, 0.36),
    inset 0 0 0 2px rgba(255, 211, 128, 0.08),
    0 8px 0 rgba(43, 29, 17, 0.08);
}

.trunk-normal-long .tree-trunk::before {
  content: '';
  position: absolute;
  inset: 10px 8px;
  border-radius: 45% 55% 50% 48%;
  background:
    radial-gradient(
      ellipse at 28% 25%,
      transparent 0 12px,
      rgba(52, 24, 10, 0.68) 13px 15px,
      transparent 16px
    ),
    radial-gradient(
      ellipse at 70% 53%,
      transparent 0 16px,
      rgba(52, 24, 10, 0.66) 17px 20px,
      transparent 21px
    ),
    radial-gradient(
      ellipse at 43% 80%,
      transparent 0 12px,
      rgba(52, 24, 10, 0.58) 13px 16px,
      transparent 17px
    ),
    repeating-linear-gradient(
      83deg,
      transparent 0 18px,
      rgba(255, 198, 102, 0.22) 18px 20px,
      transparent 20px 34px
    );
  opacity: 0.92;
  pointer-events: none;
}

.trunk-normal-long .tree-trunk::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(49, 23, 10, 0.72);
  border-radius: 50%;
  background: rgba(107, 48, 18, 0.55);
  box-shadow:
    31px 42px 0 7px rgba(84, 37, 15, 0.38),
    8px 98px 0 3px rgba(64, 29, 12, 0.34);
  pointer-events: none;
}

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

.branch-layer {
  z-index: 4;
}

.leaf-layer {
  z-index: 3;
}

.tree-object .tree-with-leaves .leaf-layer {
  translate: 0 var(--canopy-shift-y, 0px);
  z-index: 6;
}

.garden-tree .tree-with-leaves .leaf-layer {
  translate: 0 var(--canopy-shift-y, 0px);
  z-index: 6;
}

.leaf-layer.maple-canopy {
  left: -10px;
  top: 0;
  width: 232px;
  height: 240px;
}

.leaf-layer.needle-canopy {
  top: -8px;
  left: -6px;
}

.tree-object .leaf-layer.detailed-canopy {
  top: -6px;
  transform: scale(1.08);
  transform-origin: center top;
}

.tree-object .leaf-layer.needle-canopy {
  left: -18px;
}

.tree-object .leaf-layer.cloud-canopy {
  left: -30px;
  top: -4px;
}

.leaf-layer.willow-canopy {
  left: -16px;
  top: -18px;
  width: 260px;
  height: 306px;
}

.tree-object .leaf-layer.willow-canopy {
  left: -16px;
  top: -24px;
}

.branch {
  position: absolute;
  left: calc(50% + var(--x));
  bottom: var(--bottom);
  width: var(--length);
  height: var(--thickness);
  border-radius: 999px;
  background: linear-gradient(90deg, #4d2f1a, #9c6738);
  transform: rotate(var(--angle));
  transform-origin: 0 50%;
}

.branch::before,
.branch::after {
  content: '';
  position: absolute;
  left: var(--twig-left);
  top: 50%;
  width: var(--twig-length);
  height: max(2px, calc(var(--thickness) * 0.55));
  border-radius: 999px;
  background: #6e421f;
  transform-origin: 0 50%;
}

.branch::before {
  transform: translateY(-50%) rotate(var(--twig-angle-a));
}

.branch::after {
  transform: translateY(-50%) rotate(var(--twig-angle-b));
  opacity: 0.82;
}

.trunk-thin-long .branch,
.trunk-thin-short .branch,
.branch.bare-branch {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(47, 24, 13, 0.86) 0 4px,
      rgba(160, 80, 31, 0.72) 4px 7px
    ),
    linear-gradient(90deg, #3a2114, #9a531f 62%, #2b180e);
  box-shadow:
    inset 0 1px 0 rgba(255, 178, 87, 0.26),
    0 2px 3px rgba(47, 24, 13, 0.18);
}

.trunk-thin-long .branch::before,
.trunk-thin-long .branch::after,
.trunk-thin-short .branch::before,
.trunk-thin-short .branch::after,
.branch.bare-branch::before,
.branch.bare-branch::after {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(49, 25, 13, 0.8) 0 4px,
      rgba(176, 86, 31, 0.72) 4px 8px
    ),
    #5d351c;
  box-shadow: 0 1px 2px rgba(45, 24, 13, 0.18);
}

.leaf {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0.94;
  background: #9be282;
  box-shadow: 0 8px 12px rgba(64, 92, 43, 0.12);
}

.leaf.real {
  border-radius: 6px 80% 6px 80%;
  transform: rotate(var(--rotate));
}

.leaf.blossom {
  border-radius: 50% 50% 50% 0;
  background:
    radial-gradient(circle at 62% 62%, #ffd9a9 0 12%, transparent 13%),
    radial-gradient(circle at 34% 34%, #fff5fb 0 20%, transparent 21%),
    linear-gradient(135deg, #ffd2e7, #f48ebd);
  box-shadow:
    10px 0 0 -2px #ffc2df,
    -8px 4px 0 -3px #ffe4f0,
    2px 10px 0 -3px #f7a1c9,
    0 8px 12px rgba(180, 80, 120, 0.14);
  transform: rotate(var(--rotate));
}

.leaf.detailed {
  border-radius: 8px 84% 8px 84%;
  background:
    linear-gradient(
      45deg,
      transparent calc(50% - 1px),
      rgba(250, 255, 241, 0.9) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    repeating-linear-gradient(
      110deg,
      transparent 0 8px,
      rgba(244, 255, 232, 0.58) 8px 9px,
      transparent 9px 16px
    ),
    linear-gradient(135deg, #77c96a, #2e8e4e);
  box-shadow: 0 7px 12px rgba(46, 99, 54, 0.15);
  transform: rotate(var(--rotate));
}

.leaf.cloud {
  --cloud-deep: #184b24;
  --cloud-mid: #4f8f35;
  --cloud-light: #b4dc62;
  border-radius: 58% 42% 56% 44% / 48% 62% 38% 52%;
  background:
    radial-gradient(
      circle at 26% 24%,
      rgba(225, 245, 138, 0.72) 0 8%,
      transparent 9%
    ),
    radial-gradient(
      circle at 58% 18%,
      rgba(190, 229, 89, 0.55) 0 10%,
      transparent 11%
    ),
    radial-gradient(
      circle at 78% 52%,
      rgba(105, 169, 58, 0.7) 0 13%,
      transparent 14%
    ),
    repeating-radial-gradient(
      circle at 44% 58%,
      rgba(231, 247, 158, 0.38) 0 1px,
      transparent 1px 5px
    ),
    repeating-linear-gradient(
      150deg,
      rgba(9, 57, 27, 0.26) 0 2px,
      transparent 2px 8px
    ),
    linear-gradient(
      135deg,
      var(--cloud-light) 0%,
      var(--cloud-mid) 42%,
      var(--cloud-deep) 100%
    );
  box-shadow:
    16px 4px 0 -7px rgba(82, 145, 55, 0.92),
    -14px 7px 0 -7px rgba(146, 192, 72, 0.9),
    6px -9px 0 -10px rgba(211, 237, 111, 0.82),
    inset 0 -12px 18px rgba(11, 55, 26, 0.24),
    inset 5px 5px 14px rgba(226, 246, 139, 0.2),
    0 10px 16px rgba(36, 85, 43, 0.15);
}

.leaf.cloud::before,
.leaf.cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.leaf.cloud::before {
  inset: 12% 10% 18% 8%;
  background:
    radial-gradient(
      circle at 20% 34%,
      rgba(229, 247, 145, 0.7) 0 8%,
      transparent 9%
    ),
    radial-gradient(
      circle at 54% 48%,
      rgba(49, 119, 43, 0.62) 0 11%,
      transparent 12%
    ),
    repeating-linear-gradient(
      118deg,
      rgba(245, 255, 196, 0.42) 0 1px,
      transparent 1px 7px
    );
  opacity: 0.82;
}

.leaf.cloud::after {
  inset: 20% 18% 14% 24%;
  background:
    repeating-linear-gradient(
      34deg,
      rgba(11, 69, 30, 0.5) 0 2px,
      transparent 2px 9px
    ),
    radial-gradient(
      circle at 66% 24%,
      rgba(199, 232, 99, 0.48) 0 12%,
      transparent 13%
    );
  opacity: 0.55;
}

.leaf.cloud:nth-child(3n + 1) {
  --cloud-deep: #113f21;
  --cloud-mid: #43842f;
  --cloud-light: #a8d957;
}

.leaf.cloud:nth-child(3n + 2) {
  --cloud-deep: #1c5428;
  --cloud-mid: #5c9b37;
  --cloud-light: #c2e46d;
}

.leaf.cloud:nth-child(3n) {
  --cloud-deep: #0d351b;
  --cloud-mid: #387a2d;
  --cloud-light: #91ca4e;
}

.leaf.needle {
  --pine-deep: #143a25;
  --pine-mid: #2f7740;
  --pine-light: #78ad62;
  width: calc(var(--size) * 1.08);
  height: calc(var(--size) * 0.46);
  border-radius: 52% 52% 44% 44% / 68% 68% 36% 36%;
  clip-path: polygon(
    50% 0%,
    72% 50%,
    94% 48%,
    78% 72%,
    100% 100%,
    0 100%,
    22% 72%,
    6% 48%,
    28% 50%
  );
  background:
    repeating-linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.2) 0 2px,
      transparent 2px 9px
    ),
    repeating-linear-gradient(
      166deg,
      rgba(17, 65, 32, 0.46) 0 2px,
      transparent 2px 8px
    ),
    radial-gradient(
      circle at 48% 10%,
      rgba(195, 224, 137, 0.45),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      var(--pine-light) 0%,
      var(--pine-mid) 44%,
      var(--pine-deep) 100%
    );
  box-shadow:
    inset 0 -9px 12px rgba(13, 54, 28, 0.26),
    inset 0 5px 10px rgba(191, 221, 141, 0.16),
    0 7px 10px rgba(18, 44, 32, 0.16);
  opacity: 0.98;
  transform: rotate(var(--rotate));
  transform-origin: center top;
}

.leaf.needle::before,
.leaf.needle::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.leaf.needle::before {
  inset: 8% 9% 10%;
  clip-path: inherit;
  background:
    repeating-linear-gradient(
      74deg,
      rgba(238, 255, 193, 0.42) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      112deg,
      rgba(12, 52, 28, 0.42) 0 1px,
      transparent 1px 8px
    );
  opacity: 0.72;
}

.leaf.needle::after {
  left: 50%;
  top: 18%;
  width: 7%;
  height: 70%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(80, 104, 45, 0.12),
    rgba(74, 49, 22, 0.42)
  );
  transform: translateX(-50%);
}

.leaf.pine:nth-child(3n + 1) {
  --pine-deep: #12351f;
  --pine-mid: #2c6f38;
  --pine-light: #6ea75a;
}

.leaf.pine:nth-child(3n + 2) {
  --pine-deep: #1c4528;
  --pine-mid: #3f8444;
  --pine-light: #86b86a;
}

.leaf.pine:nth-child(3n) {
  --pine-deep: #0f2d1d;
  --pine-mid: #2e6535;
  --pine-light: #5f9d4f;
}

.leaf.willow {
  --willow-deep: #4a7628;
  --willow-mid: #76a83d;
  --willow-light: #a7c957;
  width: calc(var(--size) * 0.34);
  height: var(--size);
  border-radius: 52% 52% 46% 46% / 16% 16% 88% 88%;
  clip-path: polygon(
    50% 0,
    74% 8%,
    92% 36%,
    82% 100%,
    64% 84%,
    50% 98%,
    36% 84%,
    18% 100%,
    8% 36%,
    26% 8%
  );
  background:
    repeating-linear-gradient(
      105deg,
      transparent 0 5px,
      rgba(49, 96, 28, 0.64) 5px 7px,
      transparent 7px 13px
    ),
    repeating-linear-gradient(
      82deg,
      rgba(205, 225, 123, 0.56) 0 2px,
      transparent 2px 8px
    ),
    linear-gradient(
      180deg,
      var(--willow-light) 0%,
      var(--willow-mid) 42%,
      var(--willow-deep) 100%
    );
  box-shadow:
    inset 0 -14px 16px rgba(44, 88, 27, 0.2),
    inset 0 5px 10px rgba(221, 237, 142, 0.18),
    0 8px 12px rgba(65, 105, 60, 0.12);
  opacity: 0.94;
  transform: rotate(var(--rotate));
  transform-origin: 50% 0;
}

.leaf.willow::before,
.leaf.willow::after {
  content: '';
  position: absolute;
  top: 8%;
  width: 38%;
  height: 92%;
  border-radius: 999px 999px 60% 60%;
  background:
    repeating-linear-gradient(
      96deg,
      transparent 0 7px,
      rgba(44, 91, 28, 0.72) 7px 9px,
      transparent 9px 15px
    ),
    linear-gradient(180deg, rgba(183, 216, 88, 0.82), rgba(73, 124, 43, 0.76));
  opacity: 0.82;
}

.leaf.willow::before {
  left: 10%;
  transform: rotate(10deg);
  transform-origin: 50% 0;
}

.leaf.willow::after {
  right: 10%;
  transform: rotate(-10deg);
  transform-origin: 50% 0;
}

.leaf.willow:nth-child(3n + 1) {
  --willow-deep: #436d24;
  --willow-mid: #6fa13a;
  --willow-light: #a1c850;
}

.leaf.willow:nth-child(3n + 2) {
  --willow-deep: #557f2d;
  --willow-mid: #83ad43;
  --willow-light: #b2d263;
}

.leaf.willow:nth-child(3n) {
  --willow-deep: #3d6725;
  --willow-mid: #689738;
  --willow-light: #96bd4d;
}

.leaf.maple {
  width: calc(var(--size) * 1.33);
  height: calc(var(--size) * 1.33);
  border-radius: 0;
  clip-path: polygon(
    50% 0%,
    57% 22%,
    76% 9%,
    72% 31%,
    96% 28%,
    78% 45%,
    100% 58%,
    73% 62%,
    82% 88%,
    58% 74%,
    50% 100%,
    42% 74%,
    18% 88%,
    27% 62%,
    0% 58%,
    22% 45%,
    4% 28%,
    28% 31%,
    24% 9%,
    43% 22%
  );
  transform: rotate(var(--rotate));
}

.leaf.green {
  background: linear-gradient(135deg, #82df77, #35a45d);
}

.leaf.red {
  background: linear-gradient(135deg, #ff7d68, #c9364c);
}

.leaf.mixed:nth-child(4n + 1) {
  background: #ffacd2;
}

.leaf.mixed:nth-child(4n + 2) {
  background: #ffe381;
}

.leaf.mixed:nth-child(4n + 3) {
  background: #9be7d0;
}

.leaf.mixed:nth-child(4n) {
  background: #bba3ff;
}

.leaf.autumn:nth-child(5n + 1) {
  background: linear-gradient(135deg, #ffb21f, #f07913);
}

.leaf.autumn:nth-child(5n + 2) {
  background: linear-gradient(135deg, #ff4c24, #d5361c);
}

.leaf.autumn:nth-child(5n + 3) {
  background: linear-gradient(135deg, #d37b2a, #8f461d);
}

.leaf.autumn:nth-child(5n + 4) {
  background: linear-gradient(135deg, #ffd45a, #f3a21b);
}

.leaf.autumn:nth-child(5n) {
  background: linear-gradient(135deg, #bc6128, #753819);
}

/* 집 도형 */
.house-model {
  position: relative;
  width: 210px;
  height: 270px;
  --roof-color: #ec5e79;
  --roof-light: #ff9aae;
  --roof-dark: #c94b62;
  --roof-deep: #9f3347;
  --door-color: #a76038;
  --door-light: #d99258;
  --door-dark: #6d3921;
  --door-border: #513224;
  --house-color: #ffd49a;
  --house-light: #fff0c6;
  --house-dark: #ffaea2;
  --house-accent: #e98024;
}

.option-visual .house-model {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%) scale(0.42);
  transform-origin: center bottom;
}

.roof-sample {
  position: relative;
  width: 220px;
  height: 142px;
  --roof-color: #ec5e79;
  --roof-light: #ff9aae;
  --roof-dark: #c94b62;
  --roof-deep: #9f3347;
}

.door-sample {
  --door-color: #a76038;
  --door-light: #d99258;
  --door-dark: #6d3921;
  --door-border: #513224;
}

.option-visual .roof-sample {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scale(0.58);
  transform-origin: center bottom;
}

.roof-sample .house-roof {
  bottom: 24px;
}

.roof-color-pink {
  --roof-color: #ec5e79;
  --roof-light: #ff9aae;
  --roof-dark: #c94b62;
  --roof-deep: #9f3347;
}

.roof-color-green {
  --roof-color: #62ad48;
  --roof-light: #95d96a;
  --roof-dark: #2e8c4a;
  --roof-deep: #1f6636;
}

.roof-color-blue {
  --roof-color: #5fa8dc;
  --roof-light: #a3d8ff;
  --roof-dark: #3476b0;
  --roof-deep: #22547f;
}

.roof-color-gray {
  --roof-color: #6f8490;
  --roof-light: #aebec8;
  --roof-dark: #405463;
  --roof-deep: #263847;
}

.roof-color-red {
  --roof-color: #d95a46;
  --roof-light: #ff9176;
  --roof-dark: #a83d32;
  --roof-deep: #7b2b24;
}

.roof-color-yellow {
  --roof-color: #f1c84b;
  --roof-light: #ffe68a;
  --roof-dark: #d58b26;
  --roof-deep: #9b6318;
}

.roof-color-white {
  --roof-color: #edf4f1;
  --roof-light: #ffffff;
  --roof-dark: #c7d5d4;
  --roof-deep: #8fa2a6;
}

.roof-color-terracotta {
  --roof-color: #b85c38;
  --roof-light: #e79a73;
  --roof-dark: #884026;
  --roof-deep: #5c2818;
}

.roof-color-sun {
  --roof-color: #f2c94c;
  --roof-light: #ffe58a;
  --roof-dark: #cc8a23;
  --roof-deep: #8d5e16;
}

.roof-color-stone {
  --roof-color: #7e8790;
  --roof-light: #b9c1c8;
  --roof-dark: #4f5963;
  --roof-deep: #2d343b;
}

.roof-color-clearblue {
  --roof-color: #5fa8dc;
  --roof-light: #a8daf6;
  --roof-dark: #367ab1;
  --roof-deep: #22547f;
}

.roof-color-violet {
  --roof-color: #7e65c7;
  --roof-light: #b7a4ed;
  --roof-dark: #59409f;
  --roof-deep: #362764;
}

.door-color-brown {
  --door-color: #a76038;
  --door-light: #d99258;
  --door-dark: #6d3921;
  --door-border: #513224;
}

.door-color-pink {
  --door-color: #ec8fb8;
  --door-light: #ffc0dc;
  --door-dark: #bd5f86;
  --door-border: #8d4365;
}

.door-color-blue {
  --door-color: #64acd6;
  --door-light: #a9d9f4;
  --door-dark: #347ca8;
  --door-border: #245675;
}

.door-color-green {
  --door-color: #7fba62;
  --door-light: #b5dc8f;
  --door-dark: #4f873e;
  --door-border: #36622c;
}

.door-color-yellow {
  --door-color: #f1cf5b;
  --door-light: #ffe68b;
  --door-dark: #d99a30;
  --door-border: #9b6d22;
}

.door-color-purple {
  --door-color: #9b78c9;
  --door-light: #c9a9ee;
  --door-dark: #6d4b9d;
  --door-border: #503476;
}

.door-color-white {
  --door-color: #edf2f2;
  --door-light: #ffffff;
  --door-dark: #c7d1d2;
  --door-border: #8fa1a5;
}

.door-color-dark {
  --door-color: #4b4f55;
  --door-light: #777d86;
  --door-dark: #282b30;
  --door-border: #191c20;
}

.house-color-cream {
  --house-color: #ffd49a;
  --house-light: #fff0c6;
  --house-dark: #ffaea2;
  --house-accent: #e98024;
}

.house-color-ivory {
  --house-color: #f7ead2;
  --house-light: #fff8e8;
  --house-dark: #dfcbaa;
  --house-accent: #c79d64;
}

.house-color-pink {
  --house-color: #f6b8c9;
  --house-light: #ffe0ea;
  --house-dark: #d981a4;
  --house-accent: #c45e8a;
}

.house-color-mint {
  --house-color: #9fd8c4;
  --house-light: #d7f3e8;
  --house-dark: #65ad99;
  --house-accent: #3f8d7a;
}

.house-color-blue {
  --house-color: #9ed2ee;
  --house-light: #d8f2ff;
  --house-dark: #5fa7cd;
  --house-accent: #397fa8;
}

.house-color-lavender {
  --house-color: #cdb9ee;
  --house-light: #eadfff;
  --house-dark: #9e80d0;
  --house-accent: #7659a8;
}

.house-color-yellow {
  --house-color: #f6d66d;
  --house-light: #fff2a6;
  --house-dark: #e1a83a;
  --house-accent: #c98224;
}

.house-color-gray {
  --house-color: #b7c4c8;
  --house-light: #e1eaec;
  --house-dark: #83979f;
  --house-accent: #5d737d;
}

.house-color-earth {
  --house-color: #d2b48c;
  --house-light: #ead8bd;
  --house-dark: #a9825d;
  --house-accent: #8f6a42;
}

.house-color-sun {
  --house-color: #ffefd5;
  --house-light: #fff9ec;
  --house-dark: #f2cf90;
  --house-accent: #e3ad57;
}

.house-color-reflection {
  --house-color: #a9a9a9;
  --house-light: #dddddd;
  --house-dark: #7f7f7f;
  --house-accent: #666666;
}

.house-color-sky {
  --house-color: #87ceeb;
  --house-light: #d8f4ff;
  --house-dark: #55a9cf;
  --house-accent: #347fa2;
}

.house-color-depth {
  --house-color: #9370db;
  --house-light: #ddceff;
  --house-dark: #6d4eb8;
  --house-accent: #51358f;
}

.house-body {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 170px;
  height: 140px;
  overflow: visible;
  border: 4px solid rgba(65, 45, 50, 0.14);
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    var(--house-light),
    var(--house-color) 58%,
    var(--house-dark)
  );
  transform: translateX(-50%);
  box-shadow: 0 12px 18px rgba(35, 25, 30, 0.12);
}

.floor-one .house-body {
  width: 180px;
  height: 116px;
}

.floor-two .house-body {
  width: 184px;
  height: 154px;
}

.floor-five .house-body {
  width: 156px;
  height: 218px;
}

.floor-ten .house-body {
  width: 132px;
  height: 252px;
}

.house-roof {
  position: absolute;
  left: 50%;
  bottom: 136px;
  width: 202px;
  height: 68px;
  background: linear-gradient(
    135deg,
    var(--roof-light),
    var(--roof-color) 58%,
    var(--roof-dark)
  );
  transform: translateX(-50%);
  z-index: 2;
}

.floor-one .house-roof {
  bottom: 112px;
}

.floor-two .house-roof {
  bottom: 150px;
}

.floor-five .house-roof {
  bottom: 214px;
  width: 178px;
}

.floor-ten .house-roof {
  bottom: 248px;
  width: 154px;
}

.roof-hanok .house-roof {
  height: 76px;
  border-radius: 48% 48% 24px 24px / 58% 58% 28px 28px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0 3px,
      transparent 3px 13px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 12px,
      rgba(12, 24, 34, 0.22) 12px 15px
    ),
    linear-gradient(
      180deg,
      var(--roof-light) 0%,
      var(--roof-color) 52%,
      var(--roof-dark) 100%
    );
  box-shadow:
    inset 0 8px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 0 rgba(8, 17, 24, 0.22),
    0 10px 0 rgba(95, 61, 36, 0.2);
}

.roof-hanok .house-roof::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 8px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--roof-dark), var(--roof-deep));
  box-shadow:
    -22px 8px 0 -3px var(--roof-dark),
    22px 8px 0 -3px var(--roof-dark);
}

.roof-hanok .house-roof::after {
  content: '';
  position: absolute;
  left: -22px;
  right: -22px;
  bottom: -2px;
  height: 22px;
  border-radius: 6px 6px 24px 24px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 0 2px,
      transparent 2px 12px
    ),
    linear-gradient(180deg, var(--roof-dark), var(--roof-deep));
  clip-path: polygon(
    0 52%,
    7% 30%,
    17% 42%,
    50% 68%,
    83% 42%,
    93% 30%,
    100% 52%,
    100% 100%,
    0 100%
  );
}

.roof-hanok .house-body {
  border-color: rgba(111, 59, 28, 0.28);
  background:
    linear-gradient(
      90deg,
      rgba(119, 62, 31, 0.28) 0 8px,
      transparent 8px calc(100% - 8px),
      rgba(119, 62, 31, 0.28) calc(100% - 8px)
    ),
    linear-gradient(180deg, #fff3df 0%, #f3dfc8 100%);
}

.roof-arch .house-roof {
  height: 78px;
  border-radius: 120px 120px 8px 8px;
  background:
    radial-gradient(
        ellipse at 50% 100%,
        transparent 0 55%,
        rgba(65, 41, 48, 0.34) 56%,
        rgba(65, 41, 48, 0.34) 60%,
        transparent 61%
      )
      0 2px / 42px 18px,
    radial-gradient(
        ellipse at 50% 100%,
        transparent 0 55%,
        rgba(255, 255, 255, 0.22) 56%,
        rgba(255, 255, 255, 0.22) 59%,
        transparent 60%
      )
      21px 10px / 42px 18px,
    linear-gradient(135deg, rgba(255, 255, 255, 0.44) 0%, transparent 38%),
    linear-gradient(
      180deg,
      var(--roof-light),
      var(--roof-color) 56%,
      var(--roof-dark)
    );
  box-shadow:
    inset 0 12px 20px rgba(255, 255, 255, 0.28),
    inset 0 -12px 18px rgba(60, 35, 45, 0.18);
}

.roof-spire .house-roof {
  height: 92px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.48) 0 18%, transparent 34%),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16),
      transparent 45%,
      rgba(41, 24, 32, 0.28)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 26px,
      rgba(45, 29, 35, 0.46) 26px 28px,
      rgba(255, 255, 255, 0.18) 28px 29px,
      transparent 29px 48px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 14px,
      rgba(45, 29, 35, 0.34) 14px 16px,
      transparent 16px 28px
    ),
    linear-gradient(
      160deg,
      var(--roof-light),
      var(--roof-color) 55%,
      var(--roof-dark)
    );
  box-shadow:
    inset 10px 0 18px rgba(255, 255, 255, 0.2),
    inset -14px -10px 18px rgba(50, 28, 36, 0.24);
}

.floor-list {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-around;
  height: 100%;
  padding: 12px 10px 16px;
}

.floor-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.house-window {
  position: relative;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(61, 47, 70, 0.18);
  border-radius: 6px;
  background: linear-gradient(135deg, #fff7ae, #aee5ff);
}

.window-small .house-window {
  width: 23px;
  height: 23px;
}

.window-big .house-window {
  width: 44px;
  height: 37px;
}

.window-curtain-closed .house-window {
  background: linear-gradient(
    90deg,
    #ff9ac0 0 44%,
    #ffe7f0 44% 56%,
    #ff9ac0 56%
  );
}

.window-curtain-tied .house-window {
  background: linear-gradient(
    90deg,
    #ff9ac0 0 28%,
    #fff4b8 28% 72%,
    #ff9ac0 72%
  );
}

.house-door {
  width: 32px;
  height: 44px;
  margin-bottom: -16px;
  border-radius: 8px 8px 0 0;
  background: var(--door-color, #875032);
}

/* 단층집 전용 디자인: 초록 지붕, 노란 벽, 둥근 문, 작은 덤불 */
.house-model.floor-one {
  width: 230px;
}

.house-model.floor-one .house-body {
  bottom: 16px;
  width: 178px;
  height: 126px;
  overflow: visible;
  border: 0;
  border-radius: 8px 8px 12px 12px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.24) 0 16px,
      transparent 16px 76%,
      rgba(80, 60, 40, 0.18) 76%
    ),
    linear-gradient(
      135deg,
      var(--house-light) 0%,
      var(--house-color) 58%,
      var(--house-accent) 100%
    );
  box-shadow:
    inset 8px 0 0 rgba(255, 246, 190, 0.32),
    0 10px 0 rgba(42, 45, 52, 0.25);
}

.house-model.floor-one .house-body::before,
.house-model.floor-one .house-body::after {
  content: '';
  position: absolute;
  bottom: -10px;
  width: 48px;
  height: 44px;
  border-radius: 28px 28px 10px 10px;
  background: #5eaa48;
  z-index: -1;
}

.house-model.floor-one .house-body::before {
  left: -34px;
  box-shadow: 16px 6px 0 #77bc54;
}

.house-model.floor-one .house-body::after {
  right: -34px;
  box-shadow: -16px 6px 0 #77bc54;
}

.house-model.floor-one .house-roof {
  bottom: 132px;
  width: 208px;
  height: 94px;
  border-radius: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0 36%,
      var(--roof-dark) 36% 58%,
      transparent 58%
    ),
    linear-gradient(
      135deg,
      var(--roof-light) 0%,
      var(--roof-color) 58%,
      var(--roof-dark) 100%
    );
  clip-path: polygon(28% 0, 88% 0, 100% 60%, 42% 60%, 18% 100%, 0 100%);
  filter: drop-shadow(-8px 6px 0 #39444c)
    drop-shadow(0 8px 0 rgba(44, 53, 61, 0.28));
  box-shadow: none;
}

.house-model.floor-one .house-roof::before {
  content: '';
  position: absolute;
  right: 46px;
  top: -30px;
  width: 18px;
  height: 54px;
  border-radius: 3px;
  background: linear-gradient(90deg, #313942, #515b66);
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0.18);
}

.house-model.floor-one .house-roof::after {
  content: '';
  position: absolute;
  left: 5px;
  right: 10px;
  bottom: 36px;
  height: 9px;
  border-radius: 999px;
  background: #2f3941;
  transform: rotate(0deg);
}

.house-model.floor-one .floor-list {
  justify-content: flex-end;
  padding: 0 13px 13px;
}

.house-model.floor-one .floor-row {
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.house-model.floor-one .house-door {
  order: -1;
  width: 42px;
  height: 76px;
  margin: 0;
  border-radius: 24px 24px 5px 5px;
  background: linear-gradient(180deg, #f06b44, #e24a2f);
  box-shadow: inset 6px 0 0 rgba(255, 194, 97, 0.34);
}

.house-model.floor-one .house-window {
  width: 34px;
  height: 48px;
  border: 5px solid #39444c;
  border-radius: 2px;
  background: #eef8fb;
}

.house-model.floor-one .house-window::before,
.house-model.floor-one .house-window::after {
  content: '';
  position: absolute;
  background: #39444c;
}

.house-model.floor-one .house-window::before {
  left: 50%;
  top: 0;
  width: 4px;
  height: 100%;
  transform: translateX(-50%);
}

.house-model.floor-one .house-window::after {
  left: 0;
  top: 50%;
  width: 100%;
  height: 4px;
  transform: translateY(-50%);
}

/* 이층집 전용 디자인: 분홍 기와 지붕, 중앙 박공, 발코니, 장식 문 */
.house-model.floor-two {
  width: 238px;
}

.house-model.floor-two .house-body {
  bottom: 2px;
  width: 182px;
  height: 168px;
  overflow: visible;
  border: 0;
  border-radius: 10px 10px 8px 8px;
  background: linear-gradient(
    180deg,
    var(--house-light) 0%,
    var(--house-color) 58%,
    var(--house-dark) 100%
  );
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.28),
    0 12px 0 rgba(117, 74, 55, 0.18);
}

.house-model.floor-two .house-body::before {
  display: none;
}

.house-model.floor-two .house-body::after {
  display: none;
}

.house-model.floor-two .house-roof {
  bottom: 154px;
  width: 226px;
  height: 102px;
  border-radius: 8px 8px 6px 6px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--roof-dark) 0 4px,
      transparent 4px 17px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 12px,
      rgba(255, 255, 255, 0.24) 12px 15px,
      rgba(0, 0, 0, 0.12) 15px 18px
    ),
    linear-gradient(180deg, var(--roof-light) 0%, var(--roof-color) 100%);
  clip-path: polygon(
    4% 0,
    96% 0,
    100% 100%,
    64% 100%,
    50% 36%,
    36% 100%,
    0 100%
  );
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, 0.2),
    0 7px 0 var(--roof-dark);
}

.house-model.floor-two .house-roof::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80px;
  height: 88px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.14) 0 4px,
      transparent 4px 15px
    ),
    linear-gradient(180deg, var(--roof-light), var(--roof-color));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 0 var(--roof-dark));
}

.house-model.floor-two .house-roof::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 16px;
  height: 20px;
  border-radius: 50% 50% 4px 4px;
  background: #fff8ee;
  transform: translateX(-50%);
}

.house-model.floor-two .floor-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 16px 18px 14px;
}

.house-model.floor-two .floor-row {
  align-items: center;
  justify-content: space-between;
}

.house-model.floor-two .floor-row:first-child {
  align-items: flex-end;
}

.house-model.floor-two .house-door {
  width: 48px;
  height: 74px;
  margin: 0;
  border: 5px solid #c58b55;
  border-radius: 24px 24px 6px 6px;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 8px,
      rgba(255, 238, 180, 0.5) 9px 11px,
      transparent 12px
    ),
    linear-gradient(180deg, #c99554, #a46836);
  box-shadow: inset 6px 0 0 rgba(255, 224, 157, 0.35);
}

.house-model.floor-two .house-window {
  width: 38px;
  height: 44px;
  border: 5px solid #d5a568;
  border-radius: 16px 16px 4px 4px;
  background: #fff7c9;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.house-model.floor-two .house-window::before,
.house-model.floor-two .house-window::after {
  content: '';
  position: absolute;
  background: #9c673d;
}

.house-model.floor-two .house-window::before {
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  transform: translateX(-50%);
}

.house-model.floor-two .house-window::after {
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  transform: translateY(-50%);
}

/* 단층집과 이층집도 지붕 탭에서 고른 모양이 바로 보이도록 다시 덮어씁니다. */
.house-model.floor-one.roof-hanok .house-roof,
.house-model.floor-two.roof-hanok .house-roof {
  height: 76px;
  border-radius: 48% 48% 24px 24px / 58% 58% 28px 28px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0 3px,
      transparent 3px 13px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 12px,
      rgba(12, 24, 34, 0.22) 12px 15px
    ),
    linear-gradient(
      180deg,
      var(--roof-light) 0%,
      var(--roof-color) 52%,
      var(--roof-dark) 100%
    );
  clip-path: none;
  filter: none;
  box-shadow:
    inset 0 8px 0 rgba(255, 255, 255, 0.08),
    inset 0 -10px 0 rgba(8, 17, 24, 0.22),
    0 10px 0 rgba(95, 61, 36, 0.2);
}

.house-model.floor-one.roof-hanok .house-roof::before,
.house-model.floor-two.roof-hanok .house-roof::before {
  content: '';
  display: block;
  position: absolute;
  left: 12%;
  right: 12%;
  top: 8px;
  width: auto;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--roof-dark), var(--roof-deep));
  box-shadow:
    -22px 8px 0 -3px var(--roof-dark),
    22px 8px 0 -3px var(--roof-dark);
  transform: none;
  clip-path: none;
  filter: none;
}

.house-model.floor-one.roof-hanok .house-roof::after,
.house-model.floor-two.roof-hanok .house-roof::after {
  content: '';
  display: block;
  position: absolute;
  left: -22px;
  right: -22px;
  bottom: -2px;
  width: auto;
  height: 22px;
  border-radius: 6px 6px 24px 24px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 0 2px,
      transparent 2px 12px
    ),
    linear-gradient(180deg, var(--roof-dark), var(--roof-deep));
  clip-path: polygon(
    0 52%,
    7% 30%,
    17% 42%,
    50% 68%,
    83% 42%,
    93% 30%,
    100% 52%,
    100% 100%,
    0 100%
  );
  transform: none;
}

.house-model.floor-one.roof-arch .house-roof,
.house-model.floor-two.roof-arch .house-roof {
  height: 78px;
  border-radius: 120px 120px 8px 8px;
  background:
    radial-gradient(
        ellipse at 50% 100%,
        transparent 0 55%,
        rgba(65, 41, 48, 0.34) 56%,
        rgba(65, 41, 48, 0.34) 60%,
        transparent 61%
      )
      0 2px / 42px 18px,
    radial-gradient(
        ellipse at 50% 100%,
        transparent 0 55%,
        rgba(255, 255, 255, 0.22) 56%,
        rgba(255, 255, 255, 0.22) 59%,
        transparent 60%
      )
      21px 10px / 42px 18px,
    linear-gradient(135deg, rgba(255, 255, 255, 0.44) 0%, transparent 38%),
    linear-gradient(
      180deg,
      var(--roof-light),
      var(--roof-color) 56%,
      var(--roof-dark)
    );
  clip-path: none;
  filter: none;
  box-shadow:
    inset 0 12px 20px rgba(255, 255, 255, 0.28),
    inset 0 -12px 18px rgba(60, 35, 45, 0.18),
    0 7px 0 var(--roof-dark);
}

.house-model.floor-one.roof-spire .house-roof,
.house-model.floor-two.roof-spire .house-roof {
  height: 92px;
  border-radius: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.48) 0 18%, transparent 34%),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16),
      transparent 45%,
      rgba(41, 24, 32, 0.28)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 26px,
      rgba(45, 29, 35, 0.46) 26px 28px,
      rgba(255, 255, 255, 0.18) 28px 29px,
      transparent 29px 48px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 14px,
      rgba(45, 29, 35, 0.34) 14px 16px,
      transparent 16px 28px
    ),
    linear-gradient(
      160deg,
      var(--roof-light),
      var(--roof-color) 55%,
      var(--roof-dark)
    );
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: none;
  box-shadow:
    inset 10px 0 18px rgba(255, 255, 255, 0.2),
    inset -14px -10px 18px rgba(50, 28, 36, 0.24),
    0 7px 0 rgba(0, 0, 0, 0.12);
}

.house-model.floor-one.roof-arch .house-roof::before,
.house-model.floor-one.roof-arch .house-roof::after,
.house-model.floor-one.roof-spire .house-roof::before,
.house-model.floor-one.roof-spire .house-roof::after,
.house-model.floor-two.roof-arch .house-roof::before,
.house-model.floor-two.roof-arch .house-roof::after,
.house-model.floor-two.roof-spire .house-roof::before,
.house-model.floor-two.roof-spire .house-roof::after {
  display: none;
}

/* 요청 이미지 스타일: 파란 기와 지붕과 분홍 셔터가 있는 아치형 창문 */
.roof-hanok .house-roof,
.house-model.floor-one.roof-hanok .house-roof,
.house-model.floor-two.roof-hanok .house-roof {
  width: 204px;
  height: 98px;
  border-radius: 10px 10px 5px 5px;
  background:
    radial-gradient(
        circle at 9px 11px,
        rgba(255, 255, 255, 0.32) 0 4px,
        transparent 4.5px
      )
      0 0 / 18px 14px,
    repeating-linear-gradient(
      180deg,
      transparent 0 11px,
      rgba(20, 58, 78, 0.32) 11px 14px
    ),
    linear-gradient(
      180deg,
      var(--roof-light) 0%,
      var(--roof-color) 48%,
      var(--roof-dark) 100%
    );
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  filter: none;
  box-shadow:
    inset 0 8px 0 rgba(255, 255, 255, 0.16),
    inset 0 -9px 0 rgba(9, 31, 44, 0.26),
    0 8px 0 rgba(29, 54, 66, 0.2);
}

.roof-hanok .house-roof::before,
.house-model.floor-one.roof-hanok .house-roof::before,
.house-model.floor-two.roof-hanok .house-roof::before {
  content: '';
  display: block;
  position: absolute;
  left: 20%;
  right: 20%;
  top: -7px;
  width: auto;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--roof-dark), var(--roof-deep));
  box-shadow: 0 4px 0 rgba(255, 255, 255, 0.08);
  transform: none;
  clip-path: none;
  filter: none;
}

.roof-hanok .house-roof::after,
.house-model.floor-one.roof-hanok .house-roof::after,
.house-model.floor-two.roof-hanok .house-roof::after {
  content: '';
  display: block;
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: -5px;
  width: auto;
  height: 18px;
  border-radius: 4px 4px 10px 10px;
  background:
    radial-gradient(
        circle at 8px 7px,
        rgba(255, 255, 255, 0.18) 0 3px,
        transparent 3.5px
      )
      0 0 / 16px 10px,
    linear-gradient(180deg, var(--roof-dark), var(--roof-deep));
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  transform: none;
}

.house-model.roof-hanok .house-body,
.house-model.floor-one.roof-hanok .house-body,
.house-model.floor-two.roof-hanok .house-body {
  border: 4px solid rgba(47, 72, 88, 0.22);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 11px,
      rgba(44, 72, 88, 0.22) 11px 13px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 28px,
      rgba(255, 255, 255, 0.12) 28px 30px
    ),
    linear-gradient(
      180deg,
      var(--house-light) 0%,
      var(--house-color) 52%,
      var(--house-dark) 100%
    );
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.12),
    0 12px 18px rgba(35, 25, 30, 0.12);
}

.house-model .house-window,
.house-model.floor-one .house-window,
.house-model.floor-two .house-window {
  --window-width: 32px;
  --window-height: 44px;
  position: relative;
  width: var(--window-width);
  height: var(--window-height);
  overflow: visible;
  border: 4px solid #eeb7d0;
  border-radius: 18px 18px 5px 5px;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1.5px),
      #5d7484 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(180deg, transparent 48%, #5d7484 48% 54%, transparent 54%),
    linear-gradient(180deg, #fffaf1 0%, #dff4ff 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.62),
    0 4px 0 rgba(54, 84, 100, 0.18);
}

.house-model .house-window::before,
.house-model.floor-one .house-window::before,
.house-model.floor-two .house-window::before {
  content: '';
  display: block;
  position: absolute;
  left: -12px;
  top: 5px;
  width: 9px;
  height: calc(var(--window-height) - 10px);
  border-radius: 8px 2px 2px 8px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24) 0 5px,
      transparent 5px 10px
    ),
    #efb4d0;
  box-shadow: calc(var(--window-width) + 15px) 0 0 #efb4d0;
  transform: none;
  clip-path: none;
  filter: none;
}

.house-model .house-window::after,
.house-model.floor-one .house-window::after,
.house-model.floor-two .house-window::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: -7px;
  width: 62%;
  height: 13px;
  border: 4px solid #eeb7d0;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: rgba(255, 250, 244, 0.9);
  transform: translateX(-50%);
}

.house-model.window-small .house-window {
  --window-width: 24px;
  --window-height: 34px;
}

.house-model.window-medium .house-window {
  --window-width: 32px;
  --window-height: 44px;
}

.house-model.window-big .house-window {
  --window-width: 44px;
  --window-height: 54px;
}

.house-model.window-curtain-closed .house-window {
  background:
    linear-gradient(90deg, #f6b7d4 0 42%, #fff8ef 42% 58%, #f6b7d4 58%),
    linear-gradient(180deg, #fffaf1 0%, #dff4ff 100%);
}

.house-model.window-curtain-tied .house-window {
  background:
    radial-gradient(circle at 24% 58%, #f6b7d4 0 6px, transparent 7px),
    radial-gradient(circle at 76% 58%, #f6b7d4 0 6px, transparent 7px),
    linear-gradient(90deg, #f6b7d4 0 24%, #fff8ef 24% 76%, #f6b7d4 76%),
    linear-gradient(180deg, #fffaf1 0%, #dff4ff 100%);
}

.window-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.door-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.house-body.drop-ready {
  outline: 3px dashed rgba(103, 199, 255, 0.85);
  outline-offset: 5px;
}

.placed-window {
  position: absolute;
  left: var(--window-x);
  top: var(--window-y);
  display: block;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: auto;
  cursor: grab;
}

.placed-door {
  position: absolute;
  left: var(--door-x);
  top: var(--door-y);
  display: block;
  transform: translate(-50%, -100%);
  z-index: 7;
  pointer-events: auto;
  cursor: grab;
}

.placed-window.dragging,
.placed-door.dragging {
  opacity: 0.52;
}

.window-editor-sections,
.door-editor-sections {
  display: grid;
  gap: 16px;
}

.window-style-grid,
.door-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.window-card,
.door-card {
  cursor: grab;
  touch-action: none;
}

.window-card.dragging,
.door-card.dragging {
  opacity: 0.62;
}

.window-panel-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.window-clear-button {
  min-height: 42px;
}

.delete-drop-zone {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 10px 12px;
  border: 2px dashed var(--strong-line);
  border-radius: 14px;
  color: var(--soft-color);
  background: var(--button-bg);
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
}

.delete-drop-zone.drop-ready {
  border-color: #ff8aa8;
  color: #ffffff;
  background: rgba(255, 116, 150, 0.2);
  box-shadow: 0 0 0 3px rgba(255, 116, 150, 0.1);
}

.window-sample {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 98px;
}

.option-visual .window-sample {
  transform: scale(1.05);
}

.drag-window-ghost {
  position: fixed;
  z-index: 999;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.95);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.28));
}

.drag-window-ghost .window-sample {
  transform: scale(0.95);
}

.drag-window-ghost .door-sample {
  transform: scale(0.95);
}

.window-sample .house-window,
.placed-window .house-window {
  --window-width: 34px;
  --window-height: 50px;
  position: relative;
  display: block;
  width: var(--window-width);
  height: var(--window-height);
  overflow: hidden;
  border: 5px solid #f5f7f4;
  border-radius: 24px 24px 5px 5px;
  outline: 2px solid rgba(20, 36, 44, 0.72);
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1.5px),
      #f5f7f4 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(180deg, transparent 48%, #f5f7f4 48% 54%, transparent 54%),
    linear-gradient(135deg, #7fd2ee 0%, #d7f4ff 46%, #3eb6d6 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.38),
    0 4px 0 rgba(43, 73, 86, 0.18);
}

.window-sample .house-window::before,
.placed-window .house-window::before {
  display: none;
}

.window-sample .house-window::after,
.placed-window .house-window::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  width: 86%;
  height: 40%;
  border-top: 3px solid rgba(245, 247, 244, 0.95);
  border-left: 3px solid rgba(245, 247, 244, 0.95);
  border-right: 3px solid rgba(245, 247, 244, 0.95);
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
}

.window-swatch {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    0 8px 14px rgba(48, 74, 82, 0.14);
}

.window-sample.window-color-blue .house-window,
.placed-window.window-color-blue .house-window {
  border-color: #f5f7f4;
  filter: saturate(1.05) brightness(1.02);
}

.window-sample.window-color-pink .house-window,
.placed-window.window-color-pink .house-window {
  border-color: #ffe0ee;
  outline-color: rgba(126, 62, 91, 0.48);
  filter: hue-rotate(135deg) saturate(0.84) brightness(1.06);
}

.window-sample.window-color-mint .house-window,
.placed-window.window-color-mint .house-window {
  border-color: #e7fff6;
  outline-color: rgba(42, 111, 96, 0.46);
  filter: hue-rotate(-42deg) saturate(0.9) brightness(1.05);
}

.window-sample.window-color-yellow .house-window,
.placed-window.window-color-yellow .house-window {
  border-color: #fff4bd;
  outline-color: rgba(132, 101, 28, 0.46);
  filter: hue-rotate(218deg) saturate(0.78) brightness(1.18);
}

.window-sample.window-color-violet .house-window,
.placed-window.window-color-violet .house-window {
  border-color: #eee6ff;
  outline-color: rgba(88, 65, 132, 0.48);
  filter: hue-rotate(66deg) saturate(0.9) brightness(1.04);
}

.window-sample.window-color-gray .house-window,
.placed-window.window-color-gray .house-window {
  border-color: #eef1f0;
  outline-color: rgba(77, 87, 91, 0.48);
  filter: saturate(0.18) brightness(1.04);
}

.window-sample.window-color-blue,
.placed-window.window-color-blue {
  --window-glass-color: rgba(105, 196, 231, 0.62);
}

.window-sample.window-color-pink,
.placed-window.window-color-pink {
  --window-glass-color: rgba(244, 154, 197, 0.58);
}

.window-sample.window-color-mint,
.placed-window.window-color-mint {
  --window-glass-color: rgba(119, 217, 190, 0.58);
}

.window-sample.window-color-yellow,
.placed-window.window-color-yellow {
  --window-glass-color: rgba(246, 213, 99, 0.56);
}

.window-sample.window-color-violet,
.placed-window.window-color-violet {
  --window-glass-color: rgba(166, 137, 226, 0.58);
}

.window-sample.window-color-gray,
.placed-window.window-color-gray {
  --window-glass-color: rgba(160, 170, 174, 0.58);
}

.window-arch-double .house-window {
  --window-width: 38px;
  --window-height: 54px;
  background:
    linear-gradient(45deg, transparent 47%, #f5f7f4 47% 52%, transparent 52%),
    linear-gradient(-45deg, transparent 47%, #f5f7f4 47% 52%, transparent 52%),
    linear-gradient(
      90deg,
      transparent calc(50% - 1.5px),
      #f5f7f4 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(180deg, transparent 47%, #f5f7f4 47% 53%, transparent 53%),
    linear-gradient(135deg, #83d6f2 0%, #e4f8ff 48%, #3ab4d3 100%);
}

.window-arch-simple .house-window {
  --window-width: 34px;
  --window-height: 54px;
}

.window-arch-grid .house-window {
  --window-width: 42px;
  --window-height: 62px;
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, #f5f7f4 11px 14px),
    repeating-linear-gradient(180deg, transparent 0 14px, #f5f7f4 14px 17px),
    linear-gradient(135deg, #78d2ef 0%, #dbf6ff 48%, #3ab4d3 100%);
}

.window-shutter-pink .house-window {
  --window-width: 34px;
  --window-height: 54px;
  overflow: visible;
}

.window-shutter-pink .house-window::before {
  content: '';
  display: block;
  position: absolute;
  left: -15px;
  top: 6px;
  width: 10px;
  height: calc(var(--window-height) - 12px);
  border-radius: 8px 2px 2px 8px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24) 0 5px,
      transparent 5px 10px
    ),
    #efb4d0;
  box-shadow: calc(var(--window-width) + 20px) 0 0 #efb4d0;
}

.window-arch-curtain .house-window {
  --window-width: 36px;
  --window-height: 54px;
  background:
    radial-gradient(circle at 24% 58%, #f6b7d4 0 6px, transparent 7px),
    radial-gradient(circle at 76% 58%, #f6b7d4 0 6px, transparent 7px),
    linear-gradient(90deg, #f6b7d4 0 22%, transparent 22% 78%, #f6b7d4 78%),
    linear-gradient(135deg, #83d6f2 0%, #e4f8ff 48%, #3ab4d3 100%);
}

.window-square-grid .house-window {
  --window-width: 44px;
  --window-height: 44px;
  border-radius: 4px;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1.5px),
      #0f2028 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(
      180deg,
      transparent calc(50% - 1.5px),
      #0f2028 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(180deg, #6ed3ed 0%, #c5f3ff 52%, #33abc8 100%);
}

.window-square-grid .house-window::after,
.window-octagon .house-window::after,
.window-round-rose .house-window::after,
.window-shield .house-window::after {
  display: none;
}

.window-tall-grid .house-window {
  --window-width: 38px;
  --window-height: 76px;
  border-radius: 24px 24px 4px 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, #0f2028 10px 12px),
    repeating-linear-gradient(180deg, transparent 0 13px, #0f2028 13px 15px),
    linear-gradient(180deg, #7fd9f1 0%, #c8f4ff 50%, #2ba9c8 100%);
}

.window-octagon .house-window {
  --window-width: 54px;
  --window-height: 54px;
  border-radius: 0;
  clip-path: polygon(
    26% 0,
    74% 0,
    100% 26%,
    100% 74%,
    74% 100%,
    26% 100%,
    0 74%,
    0 26%
  );
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1.5px),
      #0f2028 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(
      180deg,
      transparent calc(50% - 1.5px),
      #0f2028 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(180deg, #85dff2 0%, #c9f5ff 55%, #2fb0cf 100%);
}

.window-round-rose .house-window {
  --window-width: 56px;
  --window-height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      transparent 0 10px,
      #f5f7f4 10px 13px,
      transparent 13px
    ),
    conic-gradient(
      from 0deg,
      transparent 0 8deg,
      #0f2028 8deg 11deg,
      transparent 11deg 52deg,
      #0f2028 52deg 55deg,
      transparent 55deg 100%
    ),
    radial-gradient(circle, #dff8ff 0 24%, #75d6ed 25% 100%);
}

.window-shield .house-window {
  --window-width: 48px;
  --window-height: 62px;
  border-radius: 18px 18px 5px 5px;
  clip-path: polygon(50% 0, 92% 16%, 100% 100%, 0 100%, 8% 16%);
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1.5px),
      #0f2028 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(180deg, #85dff2 0%, #d5f8ff 52%, #2fb0cf 100%);
}

.window-panoramic .house-window {
  --window-width: 68px;
  --window-height: 54px;
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      transparent calc(33% - 1px),
      #f5f7f4 calc(33% - 1px) calc(33% + 1px),
      transparent calc(33% + 1px)
    ),
    linear-gradient(
      90deg,
      transparent calc(66% - 1px),
      #f5f7f4 calc(66% - 1px) calc(66% + 1px),
      transparent calc(66% + 1px)
    ),
    linear-gradient(135deg, #69cef0 0%, #e1f9ff 48%, #33abc8 100%);
}

.window-panoramic .house-window::after,
.window-decorative .house-window::after,
.window-grid-dense .house-window::after,
.window-tiny-high .house-window::after {
  display: none;
}

.window-decorative .house-window {
  --window-width: 44px;
  --window-height: 56px;
  overflow: visible;
  border-radius: 20px 20px 6px 6px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(245, 247, 244, 0.9) 0 4px,
      rgba(245, 247, 244, 0.9) 4px 6px,
      transparent 6px 11px
    ),
    linear-gradient(90deg, #f7bdd8 0 18%, transparent 18% 82%, #f7bdd8 82%),
    linear-gradient(135deg, #83d6f2 0%, #e4f8ff 48%, #3ab4d3 100%);
}

.window-decorative .house-window::before {
  content: '';
  display: block;
  position: absolute;
  left: -12px;
  top: 8px;
  width: 8px;
  height: calc(var(--window-height) - 16px);
  border-radius: 8px 2px 2px 8px;
  background: #efb4d0;
  box-shadow: calc(var(--window-width) + 8px) 0 0 #efb4d0;
}

.window-grid-dense .house-window {
  --window-width: 48px;
  --window-height: 66px;
  border-radius: 18px 18px 4px 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, #0f2028 8px 10px),
    repeating-linear-gradient(180deg, transparent 0 10px, #0f2028 10px 12px),
    linear-gradient(180deg, #85dff2 0%, #d5f8ff 52%, #2fb0cf 100%);
}

.window-arch-fairy .house-window {
  --window-width: 46px;
  --window-height: 60px;
  border-radius: 30px 30px 7px 7px;
  background:
    radial-gradient(
      circle at 50% 17px,
      transparent 0 11px,
      #f5f7f4 12px 14px,
      transparent 15px
    ),
    conic-gradient(
      from 220deg at 50% 24%,
      transparent 0 18deg,
      #f5f7f4 18deg 21deg,
      transparent 21deg 45deg,
      #f5f7f4 45deg 48deg,
      transparent 48deg 100%
    ),
    linear-gradient(
      90deg,
      transparent calc(50% - 1.5px),
      #f5f7f4 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(180deg, transparent 46%, #f5f7f4 46% 52%, transparent 52%),
    linear-gradient(135deg, #86daf2 0%, #e5fbff 50%, #38b5d1 100%);
}

.window-tiny-high .house-window {
  --window-width: 24px;
  --window-height: 34px;
  border-radius: 14px 14px 4px 4px;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1px),
      #f5f7f4 calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(180deg, #92dff2 0%, #e5fbff 48%, #3ab4d3 100%);
}

.placed-window.window-panoramic .house-window,
.placed-window.window-decorative .house-window,
.placed-window.window-grid-dense .house-window,
.placed-window.window-arch-fairy .house-window,
.placed-window.window-tiny-high .house-window {
  position: relative;
  display: block;
  overflow: hidden;
  border: 5px solid #f5f7f4;
  outline: 2px solid rgba(20, 36, 44, 0.72);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.38),
    0 4px 0 rgba(43, 73, 86, 0.18);
}

.placed-window.window-panoramic .house-window {
  --window-width: 68px;
  --window-height: 54px;
  width: var(--window-width);
  height: var(--window-height);
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      transparent calc(33% - 1px),
      #f5f7f4 calc(33% - 1px) calc(33% + 1px),
      transparent calc(33% + 1px)
    ),
    linear-gradient(
      90deg,
      transparent calc(66% - 1px),
      #f5f7f4 calc(66% - 1px) calc(66% + 1px),
      transparent calc(66% + 1px)
    ),
    linear-gradient(135deg, #69cef0 0%, #e1f9ff 48%, #33abc8 100%);
}

.placed-window.window-decorative .house-window {
  --window-width: 44px;
  --window-height: 56px;
  width: var(--window-width);
  height: var(--window-height);
  overflow: visible;
  border-radius: 20px 20px 6px 6px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(245, 247, 244, 0.9) 0 4px,
      rgba(245, 247, 244, 0.9) 4px 6px,
      transparent 6px 11px
    ),
    linear-gradient(90deg, #f7bdd8 0 18%, transparent 18% 82%, #f7bdd8 82%),
    linear-gradient(135deg, #83d6f2 0%, #e4f8ff 48%, #3ab4d3 100%);
}

.placed-window.window-grid-dense .house-window {
  --window-width: 48px;
  --window-height: 66px;
  width: var(--window-width);
  height: var(--window-height);
  border-radius: 18px 18px 4px 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, #0f2028 8px 10px),
    repeating-linear-gradient(180deg, transparent 0 10px, #0f2028 10px 12px),
    linear-gradient(180deg, #85dff2 0%, #d5f8ff 52%, #2fb0cf 100%);
}

.placed-window.window-arch-fairy .house-window {
  --window-width: 46px;
  --window-height: 60px;
  width: var(--window-width);
  height: var(--window-height);
  border-radius: 30px 30px 7px 7px;
  background:
    radial-gradient(
      circle at 50% 17px,
      transparent 0 11px,
      #f5f7f4 12px 14px,
      transparent 15px
    ),
    conic-gradient(
      from 220deg at 50% 24%,
      transparent 0 18deg,
      #f5f7f4 18deg 21deg,
      transparent 21deg 45deg,
      #f5f7f4 45deg 48deg,
      transparent 48deg 100%
    ),
    linear-gradient(
      90deg,
      transparent calc(50% - 1.5px),
      #f5f7f4 calc(50% - 1.5px) calc(50% + 1.5px),
      transparent calc(50% + 1.5px)
    ),
    linear-gradient(180deg, transparent 46%, #f5f7f4 46% 52%, transparent 52%),
    linear-gradient(135deg, #86daf2 0%, #e5fbff 50%, #38b5d1 100%);
}

.placed-window.window-tiny-high .house-window {
  --window-width: 24px;
  --window-height: 34px;
  width: var(--window-width);
  height: var(--window-height);
  border-radius: 14px 14px 4px 4px;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1px),
      #f5f7f4 calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(180deg, #92dff2 0%, #e5fbff 48%, #3ab4d3 100%);
}

.placed-window.window-panoramic .house-window::before,
.placed-window.window-grid-dense .house-window::before,
.placed-window.window-arch-fairy .house-window::before,
.placed-window.window-tiny-high .house-window::before,
.placed-window.window-panoramic .house-window::after,
.placed-window.window-decorative .house-window::after,
.placed-window.window-grid-dense .house-window::after,
.placed-window.window-arch-fairy .house-window::after,
.placed-window.window-tiny-high .house-window::after {
  display: none;
}

.placed-window.window-decorative .house-window::before {
  content: '';
  display: block;
  position: absolute;
  left: -12px;
  top: 8px;
  width: 8px;
  height: calc(var(--window-height) - 16px);
  border-radius: 8px 2px 2px 8px;
  background: #efb4d0;
  box-shadow: calc(var(--window-width) + 8px) 0 0 #efb4d0;
}

.door-sample {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 104px;
}

.option-visual .door-sample {
  transform: scale(0.98);
}

.door-sample .house-door,
.placed-door .house-door,
.house-model.floor-one .placed-door .house-door,
.house-model.floor-two .placed-door .house-door {
  position: relative;
  display: block;
  width: var(--door-width, 42px);
  height: var(--door-height, 68px);
  margin: 0;
  border: 4px solid var(--door-border, #5f3b2c);
  border-radius: 22px 22px 5px 5px;
  background:
    radial-gradient(circle at 76% 54%, #ffe9a4 0 3px, transparent 3.5px),
    linear-gradient(90deg, rgba(255, 226, 161, 0.3) 0 8px, transparent 8px),
    linear-gradient(
      180deg,
      var(--door-light, #d18b4b),
      var(--door-color, #b36d36) 52%,
      var(--door-dark, #8c4f2e)
    );
  box-shadow:
    inset 5px 0 0 rgba(255, 230, 171, 0.22),
    0 5px 0 rgba(42, 29, 24, 0.18);
}

.door-wide .house-door {
  --door-width: 58px;
  --door-height: 66px;
  border-radius: 18px 18px 5px 5px;
}

.door-small .house-door {
  --door-width: 32px;
  --door-height: 52px;
  border-radius: 16px 16px 4px 4px;
}

.door-open .house-door {
  --door-width: 44px;
  --door-height: 68px;
  background: linear-gradient(180deg, #3c2b28, #1f1716);
  box-shadow: inset 0 0 0 4px rgba(255, 236, 190, 0.18);
}

.door-open .house-door::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 4px;
  width: 38px;
  height: 64px;
  border-radius: 18px 18px 4px 4px;
  background:
    radial-gradient(circle at 72% 52%, #ffe9a4 0 3px, transparent 3.5px),
    linear-gradient(
      180deg,
      var(--door-light, #e38d50),
      var(--door-color, #b36d36) 50%,
      var(--door-dark, #9a5434)
    );
  transform: skewY(-7deg);
  transform-origin: left bottom;
  box-shadow: 8px 5px 8px rgba(20, 14, 12, 0.16);
}

.door-glass .house-door {
  --door-width: 42px;
  --door-height: 68px;
  border-color: var(--door-border, #405463);
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1px),
      #ffffff calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.62),
      rgba(255, 255, 255, 0.18)
    ),
    linear-gradient(
      180deg,
      var(--door-light, #92e1f6),
      var(--door-color, #64acd6) 45%,
      var(--door-dark, #347ca8)
    );
}

.door-locked .house-door {
  --door-width: 42px;
  --door-height: 68px;
  border-radius: 16px 16px 5px 5px;
  background:
    radial-gradient(circle at 78% 52%, #ffe9a4 0 5px, transparent 5.5px),
    linear-gradient(90deg, rgba(255, 226, 161, 0.22) 0 8px, transparent 8px),
    linear-gradient(
      180deg,
      var(--door-light, #d18b4b),
      var(--door-color, #b36d36) 52%,
      var(--door-dark, #8c4f2e)
    );
}

.door-locked .house-door::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 38px;
  width: 22px;
  height: 17px;
  border: 3px solid #ffe9a4;
  border-radius: 5px;
  background: rgba(70, 45, 32, 0.24);
  transform: translateX(-50%);
  box-shadow: inset 0 -4px 0 rgba(70, 45, 32, 0.16);
}

.door-locked .house-door::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 27px;
  width: 17px;
  height: 16px;
  border: 3px solid #ffe9a4;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  transform: translateX(-50%);
}

.door-wood .house-door {
  --door-width: 44px;
  --door-height: 70px;
  border-radius: 8px 8px 4px 4px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(72, 37, 18, 0.22) 0 3px,
      transparent 3px 10px
    ),
    radial-gradient(circle at 76% 54%, #ffe9a4 0 3px, transparent 3.5px),
    linear-gradient(
      180deg,
      var(--door-light, #b36d36),
      var(--door-color, #a76038) 48%,
      var(--door-dark, #6c351d)
    );
}

/* 내 얼굴 도형 */
.avatar-model {
  position: relative;
  width: var(--avatar-width, 190px);
  height: var(--avatar-height, 380px);
  --avatar-width: 190px;
  --avatar-height: 380px;
  --head-scale: 0.46;
  --hair-top: 16px;
  --face-top: 40px;
  --torso-top: 112px;
  --torso-width: calc(var(--avatar-width) * 0.56);
  --torso-height: calc(var(--avatar-height) * 0.31);
  --skin-color: #f6c6b1;
  --skin-light: #ffe0cf;
  --skin-shadow: #dea083;
  --hair-color: #ec8fc7;
  --hair-shadow: #df7fba;
  --outfit-color: #f0bfd8;
  --outfit-shadow: #e788b9;
  --outfit-pants-light: #eba2c6;
  --outfit-pants: #c66b9b;
  isolation: isolate;
}

.option-visual .avatar-model {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%) scale(0.23);
  transform-origin: center bottom;
}

.avatar-full-body {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--avatar-width, 190px);
  height: var(--avatar-height, 380px);
  overflow: visible;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 14px 16px rgba(74, 52, 37, 0.14))
    drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.18));
}

.avatar-image-avatar {
  --avatar-image-scale: 0.92;
  --avatar-image-x-offset: -15px;
  --avatar-image-y-center: 50px;
  overflow: visible;
}

.avatar-image-avatar::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  z-index: 1;
  width: 152px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(95, 72, 47, 0.24) 0 28%,
      rgba(122, 96, 63, 0.14) 44%,
      transparent 72%
    ),
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.32) 0 38%,
      transparent 74%
    );
  filter: blur(0.4px);
  opacity: 0.78;
  pointer-events: none;
}

.avatar-image-avatar::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 18px;
  z-index: 3;
  width: 204px;
  height: 350px;
  transform: translateX(-50%);
  border-radius: 46% 46% 42% 42%;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.22) 0 26%, transparent 46%),
    radial-gradient(
      ellipse at 52% 92%,
      rgba(174, 143, 94, 0.16),
      transparent 52%
    ),
    radial-gradient(
      ellipse at 50% 16%,
      rgba(255, 246, 230, 0.18),
      transparent 48%
    );
  mix-blend-mode: soft-light;
  opacity: 0.42;
  pointer-events: none;
}

.avatar-image-stack.avatar-full-body {
  left: calc(50% + var(--avatar-image-x-offset));
  top: var(--avatar-image-y-center);
  width: 1024px;
  height: 1024px;
  overflow: visible;
  contain: layout paint;
  transform: translate(-50%, -50%) scale(var(--avatar-image-scale));
  transform-origin: center center;
  opacity: 0.97;
  visibility: visible;
  filter: saturate(0.9) contrast(0.95) brightness(1.02)
    drop-shadow(0 17px 13px rgba(74, 52, 37, 0.12))
    drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.16));
}

.avatar-image-avatar.avatar-layers-loading .avatar-image-stack {
  opacity: 0;
  visibility: hidden;
}

.avatar-image-avatar.avatar-layers-ready .avatar-image-stack {
  opacity: 0.97;
  visibility: visible;
  transition: opacity 0.18s ease;
}

.avatar-stack {
  position: relative;
  overflow: visible;
  contain: layout paint;
}

.avatar-image-stack.avatar-full-body.avatar-stack {
  position: absolute;
}

.avatar-layer,
.avatar-image-layer {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: var(--avatar-layer-z, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translate3d(0, 0, 0);
  transform-origin: var(--avatar-part-origin, 50% 50%);
  backface-visibility: hidden;
  will-change: transform, filter, opacity;
  transition:
    transform 0.16s ease,
    filter 0.22s ease,
    opacity 0.22s ease;
}

.avatar-image-layer[data-avatar-part='torso'] {
  --avatar-part-origin: 50% 53%;
}

.avatar-image-layer[data-avatar-part='outfit_back'],
.avatar-image-layer[data-avatar-part='outfit_front'] {
  --avatar-part-origin: 50% 67%;
}

.avatar-image-layer[data-avatar-part='neck'],
.avatar-image-layer[data-avatar-part='face_base'],
.avatar-image-layer[data-avatar-part='ear_left'],
.avatar-image-layer[data-avatar-part='ear_right'],
.avatar-image-layer[data-avatar-part='cheek_left'],
.avatar-image-layer[data-avatar-part='cheek_right'],
.avatar-image-layer[data-avatar-part='nose'],
.avatar-image-layer[data-avatar-part='lip_base'],
.avatar-image-layer[data-avatar-part='mouth'],
.avatar-image-layer[data-avatar-part='brow'],
.avatar-image-layer[data-avatar-part='brow_left'],
.avatar-image-layer[data-avatar-part='brow_right'],
.avatar-image-layer[data-avatar-part='hair_front'],
.avatar-image-layer[data-avatar-part='hair_back'] {
  --avatar-part-origin: 50% 52%;
}

.avatar-image-layer[data-avatar-part='eyes'],
.avatar-image-layer[data-avatar-part='eyes_left'],
.avatar-image-layer[data-avatar-part='eyes_right'] {
  --avatar-part-origin: 50% 50.4%;
}

.avatar-image-layer[data-avatar-part='upper_arm_left'] {
  --avatar-part-origin: 50% 54%;
}

.avatar-image-layer[data-avatar-part='upper_arm_right'] {
  --avatar-part-origin: 48% 54%;
}

.avatar-image-layer[data-avatar-part='forearm_left'] {
  --avatar-part-origin: 50% 62%;
}

.avatar-image-layer[data-avatar-part='forearm_right'] {
  --avatar-part-origin: 51% 62%;
}

.avatar-image-layer[data-avatar-part='hand_left'] {
  --avatar-part-origin: 55.4% 64.1%;
}

.avatar-image-layer[data-avatar-part='hand_right'] {
  --avatar-part-origin: 44.2% 64.1%;
}

.avatar-image-avatar[data-avatar-gender='male'] .avatar-image-idle-hand-left {
  --avatar-part-origin: 58.2% 64.1%;
}

.avatar-image-avatar[data-avatar-gender='male'] .avatar-image-idle-hand-right {
  --avatar-part-origin: 42.2% 64.1%;
}

.avatar-image-avatar[data-avatar-gender='female'] .avatar-image-idle-hand-left {
  --avatar-part-origin: 55% 63.9%;
}

.avatar-image-avatar[data-avatar-gender='female']
  .avatar-image-idle-hand-right {
  --avatar-part-origin: 45.4% 63.8%;
}

.avatar-image-idle-hand {
  z-index: var(--avatar-layer-z, 0);
}

.avatar-image-layer[data-avatar-part='thigh_left'],
.avatar-image-layer[data-avatar-part='thigh_right'] {
  --avatar-part-origin: 50% 66%;
}

.avatar-image-layer[data-avatar-part='calf_left'],
.avatar-image-layer[data-avatar-part='calf_right'] {
  --avatar-part-origin: 50% 74%;
}

.avatar-image-layer[data-avatar-part='foot_left'],
.avatar-image-layer[data-avatar-part='foot_right'] {
  --avatar-part-origin: 50% 82%;
}

.avatar-image-avatar.avatar-animate-idle .avatar-image-stack {
  animation: none;
}

.avatar-image-avatar.avatar-animate-idle
  .avatar-image-layer[data-avatar-part='hair_front'],
.avatar-image-avatar.avatar-animate-idle
  .avatar-image-layer[data-avatar-part='hair_back'] {
  animation: none;
}

.avatar-image-avatar.avatar-animate-idle .avatar-image-idle-hand-left {
  animation: avatarIdleWristLeft 4.4s ease-in-out 0.25s infinite both;
}

.avatar-image-avatar.avatar-animate-idle .avatar-image-idle-hand-right {
  animation: avatarIdleWristRight 4.8s ease-in-out 0.46s infinite both;
}

.avatar-image-avatar.avatar-blink-now
  .avatar-image-layer[data-avatar-part='eyes'],
.avatar-image-avatar.avatar-blink-now
  .avatar-image-layer[data-avatar-part='eyes_left'],
.avatar-image-avatar.avatar-blink-now
  .avatar-image-layer[data-avatar-part='eyes_right'] {
  transform: translate3d(0, 0, 0) scaleY(0.12);
}

.avatar-motion-version-badge {
  position: absolute;
  left: 50%;
  top: -28px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 4px 7px;
  border: 1px solid rgba(132, 101, 74, 0.22);
  border-radius: 8px;
  background: rgba(255, 250, 241, 0.86);
  color: #6e5646;
  box-shadow: 0 5px 12px rgba(93, 68, 45, 0.12);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.option-visual .avatar-image-avatar .avatar-image-stack,
.option-visual .avatar-image-avatar .avatar-image-layer,
.avatar-image-avatar.avatar-motion-reduced .avatar-image-stack,
.avatar-image-avatar.avatar-motion-reduced .avatar-image-layer {
  animation: none !important;
}

.option-visual .avatar-motion-version-badge {
  display: none;
}

@keyframes avatarIdleBreath {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(var(--avatar-image-scale));
  }

  50% {
    transform: translate(-50%, calc(-50% - 4px))
      scale(var(--avatar-image-scale));
  }
}

@keyframes avatarIdleWristLeft {
  0%,
  100% {
    transform: rotate(0deg);
  }

  24% {
    transform: rotate(-3.5deg);
  }

  52% {
    transform: rotate(2.45deg);
  }

  76% {
    transform: rotate(-1.2deg);
  }
}

@keyframes avatarIdleWristRight {
  0%,
  100% {
    transform: rotate(0deg);
  }

  24% {
    transform: rotate(3.5deg);
  }

  52% {
    transform: rotate(-2.45deg);
  }

  76% {
    transform: rotate(1.2deg);
  }
}

@keyframes avatarIdleHair {
  0%,
  100% {
    transform: rotate(-0.2deg);
  }

  50% {
    transform: rotate(0.35deg) translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-image-avatar .avatar-image-stack,
  .avatar-image-avatar .avatar-image-layer {
    animation: none !important;
    transition: none !important;
  }
}

.avatar-image-layer.avatar-image-skin-layer {
  filter: var(--avatar-skin-filter, none);
}

.avatar-image-layer.avatar-image-hair-layer {
  filter: var(--avatar-hair-filter, none);
}

.avatar-image-layer.avatar-image-outfit-layer {
  filter: var(--avatar-outfit-filter, none);
}

.avatar-image-layer.avatar-image-outfit-asset-layer {
  filter: var(--avatar-outfit-filter, none);
}

.avatar-image-avatar.skin-cream {
  --avatar-skin-filter: none;
}

.avatar-image-avatar.skin-pink {
  --avatar-skin-filter: sepia(0.16) saturate(1.2) hue-rotate(315deg)
    brightness(1.05);
}

.avatar-image-avatar.skin-ivory {
  --avatar-skin-filter: sepia(0.05) saturate(0.82) hue-rotate(350deg)
    brightness(1.08) contrast(0.98);
}

.avatar-image-avatar.skin-ocher {
  --avatar-skin-filter: sepia(0.34) saturate(1.18) hue-rotate(350deg)
    brightness(1.08);
}

.avatar-image-avatar.skin-white {
  --avatar-skin-filter: grayscale(1) brightness(1.07) contrast(0.94);
}

.avatar-image-avatar.hair-color-black {
  --avatar-hair-filter: grayscale(1) brightness(0.24) contrast(1.58)
    saturate(0.7);
}

.avatar-image-avatar.hair-color-dark-brown {
  --avatar-hair-filter: sepia(0.78) saturate(1.55) hue-rotate(344deg)
    brightness(0.58) contrast(1.1);
}

.avatar-image-avatar.hair-color-light-brown {
  --avatar-hair-filter: sepia(0.64) saturate(1.26) hue-rotate(343deg)
    brightness(0.78) contrast(1.08);
}

.avatar-image-avatar.hair-color-soft-brown {
  --avatar-hair-filter: sepia(0.58) saturate(1.08) hue-rotate(342deg)
    brightness(0.86) contrast(1.04);
}

.avatar-image-avatar.hair-color-light-ocher,
.avatar-image-avatar.hair-color-caramel {
  --avatar-hair-filter: sepia(0.62) saturate(1.32) hue-rotate(352deg)
    brightness(0.96) contrast(1.04);
}

.avatar-image-avatar.hair-color-red,
.avatar-image-avatar.hair-color-red-brown,
.avatar-image-avatar.hair-color-coral,
.avatar-image-avatar.hair-color-vivid-warm {
  --avatar-hair-filter: sepia(0.52) saturate(1.82) hue-rotate(316deg)
    brightness(0.94) contrast(1.07);
}

.avatar-image-avatar.hair-color-orange {
  --avatar-hair-filter: sepia(0.68) saturate(1.62) hue-rotate(358deg)
    brightness(1.04) contrast(1.03);
}

.avatar-image-avatar.hair-color-gold,
.avatar-image-avatar.hair-color-blonde {
  --avatar-hair-filter: sepia(0.62) saturate(1.36) hue-rotate(8deg)
    brightness(1.1) contrast(1.01);
}

.avatar-image-avatar.hair-color-silver-new,
.avatar-image-avatar.hair-color-silver {
  --avatar-hair-filter: grayscale(0.95) saturate(0.22) brightness(1.08)
    contrast(0.96);
}

.avatar-image-avatar.hair-color-white,
.avatar-image-avatar.hair-color-bright-bleached,
.avatar-image-avatar.hair-color-cream {
  --avatar-hair-filter: grayscale(0.9) saturate(0.16) brightness(1.34)
    contrast(0.84);
}

.avatar-image-avatar.hair-color-blue,
.avatar-image-avatar.hair-color-cool-tone {
  --avatar-hair-filter: sepia(0.34) saturate(1.72) hue-rotate(176deg)
    brightness(0.9) contrast(1.02);
}

.avatar-image-avatar.hair-color-green {
  --avatar-hair-filter: sepia(0.48) saturate(1.38) hue-rotate(72deg)
    brightness(0.86) contrast(1.02);
}

.avatar-image-avatar.hair-color-purple,
.avatar-image-avatar.hair-color-purple-cool,
.avatar-image-avatar.hair-color-pink {
  --avatar-hair-filter: sepia(0.34) saturate(1.48) hue-rotate(235deg)
    brightness(0.94) contrast(1.02);
}

.avatar-image-avatar.outfit-warm,
.avatar-image-avatar.outfit-purple,
.avatar-image-avatar.outfit-pink,
.outfit-asset-sample.outfit-warm,
.outfit-asset-sample.outfit-purple,
.outfit-asset-sample.outfit-pink {
  --avatar-outfit-filter: saturate(0.92) brightness(1.02) contrast(0.97);
}

.avatar-image-avatar.outfit-bright,
.avatar-image-avatar.outfit-yellow,
.outfit-asset-sample.outfit-bright,
.outfit-asset-sample.outfit-yellow {
  --avatar-outfit-filter: sepia(0.38) saturate(1.08) hue-rotate(4deg)
    brightness(1.02) contrast(0.94);
}

.avatar-image-avatar.outfit-cool,
.avatar-image-avatar.outfit-blue,
.outfit-asset-sample.outfit-cool,
.outfit-asset-sample.outfit-blue {
  --avatar-outfit-filter: sepia(0.24) saturate(1.18) hue-rotate(168deg)
    brightness(0.98) contrast(0.96);
}

.avatar-image-avatar.outfit-nature,
.avatar-image-avatar.outfit-green,
.outfit-asset-sample.outfit-nature,
.outfit-asset-sample.outfit-green {
  --avatar-outfit-filter: sepia(0.32) saturate(1.08) hue-rotate(62deg)
    brightness(0.96) contrast(0.96);
}

.avatar-image-avatar.outfit-passion,
.avatar-image-avatar.outfit-orange,
.avatar-image-avatar.outfit-rose,
.outfit-asset-sample.outfit-passion,
.outfit-asset-sample.outfit-orange,
.outfit-asset-sample.outfit-rose {
  --avatar-outfit-filter: sepia(0.28) saturate(1.22) hue-rotate(318deg)
    brightness(0.98) contrast(0.97);
}

.avatar-image-avatar.outfit-white,
.outfit-asset-sample.outfit-white {
  --avatar-outfit-filter: grayscale(0.8) saturate(0.42) brightness(1.18);
}

.avatar-image-avatar.outfit-dark,
.outfit-asset-sample.outfit-dark {
  --avatar-outfit-filter: grayscale(1) brightness(0.42) contrast(1.28);
}

.full-body-avatar .avatar-neck {
  opacity: 0;
  pointer-events: none;
}

.svg-face-base {
  opacity: 0;
}

.svg-head-path,
.svg-neck path,
.svg-arm path,
.svg-leg path,
.svg-torso path,
.svg-hip path,
.svg-single-body,
.svg-body-full,
.svg-arms-full,
.svg-body-side-shade,
.svg-arms-shade,
.svg-underarm-shade,
.svg-sleeve-overlay,
.svg-sleeve-outer-patch,
.svg-outfit-overlay,
.svg-lower-overlay,
.svg-hip-shade,
.svg-foot-shape,
.svg-fabric-waist-hem,
.svg-fabric-pants-crease,
.svg-fabric-side-shade,
.svg-fabric-sleeve-hem,
.svg-fabric-sleeve-highlight,
.svg-joint-shade,
.svg-center-shade,
.svg-hand-soft,
.svg-hand-wrist,
.svg-hand-thumb,
.svg-hand-line {
  stroke: none;
  transition:
    d 0.26s ease,
    fill 0.26s ease,
    filter 0.26s ease,
    transform 0.26s ease;
}

.svg-single-silhouette {
  transform-origin: 95px 228px;
}

.svg-anatomical-avatar,
.svg-single-silhouette {
  transform-origin: 95px 226px;
}

.svg-single-body,
.svg-body-full {
  filter: drop-shadow(0 16px 18px rgba(82, 58, 42, 0.13))
    drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.16));
}

.svg-body-side-shade {
  opacity: 0.46;
  mix-blend-mode: multiply;
}

.svg-arms-full {
  filter: drop-shadow(0 8px 8px rgba(82, 58, 42, 0.08))
    drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.18));
}

.svg-arms-shade {
  opacity: 0.48;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.svg-underarm-shade {
  fill: rgba(92, 57, 43, 0.18) !important;
  opacity: 0.72;
  mix-blend-mode: multiply;
  pointer-events: none;
  filter: blur(0.25px);
}

.svg-sleeve-overlay {
  opacity: 0.995;
  transform: scaleX(1.024);
  transform-box: view-box;
  transform-origin: center center;
  filter: drop-shadow(0 1px 1px rgba(75, 50, 38, 0.05))
    drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.12));
}

.svg-sleeve-outer-patch {
  opacity: 0.995;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(75, 50, 38, 0.05))
    drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.12));
}

.svg-outfit-overlay,
.svg-lower-overlay {
  opacity: 0.995;
  transform-box: view-box;
  transform-origin: center center;
  filter: drop-shadow(0 1px 1px rgba(75, 50, 38, 0.04))
    drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.14));
}

.svg-outfit-overlay {
  clip-path: none;
  transform: scaleX(1.017);
}

.svg-lower-overlay {
  opacity: 0.995;
  transform: scaleX(1.024);
  filter: drop-shadow(0 1px 1px rgba(75, 50, 38, 0.04))
    drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.12));
}

.svg-outfit-detail {
  pointer-events: none;
}

.svg-outfit-shirt {
  fill: rgba(255, 250, 240, 0.96);
  filter: drop-shadow(0 2px 3px rgba(76, 52, 38, 0.08));
}

.svg-outfit-lapel {
  fill: color-mix(in srgb, var(--outfit-shadow) 78%, #2c3e73);
  opacity: 0.86;
}

.svg-outfit-button,
.svg-outfit-dot,
.svg-outfit-logo {
  fill: var(--outfit-highlight, rgba(255, 245, 220, 0.78));
}

.svg-outfit-hood,
.svg-outfit-pocket,
.svg-outfit-slash {
  fill: var(--outfit-highlight, rgba(255, 245, 220, 0.62));
  opacity: 0.72;
}

.svg-outfit-string,
.svg-outfit-knit-line,
.svg-outfit-cutline,
.svg-outfit-stripe {
  fill: none !important;
  stroke: var(--outfit-highlight, rgba(255, 255, 255, 0.72));
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.74;
}

.svg-outfit-knit-line {
  stroke-width: 3.6;
  opacity: 0.68;
}

.svg-outfit-stripe {
  stroke-width: 4.2;
}

.svg-fabric-depth {
  pointer-events: none;
}

.svg-fabric-waist-hem,
.svg-fabric-pants-crease,
.svg-fabric-side-shade,
.svg-fabric-sleeve-hem,
.svg-fabric-sleeve-highlight {
  fill: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svg-fabric-waist-hem,
.svg-fabric-sleeve-hem {
  stroke: color-mix(in srgb, var(--outfit-shadow) 58%, #5d3b2f) !important;
  stroke-width: 2.4;
  opacity: 0.28;
}

.svg-fabric-pants-crease,
.svg-fabric-side-shade {
  stroke: color-mix(in srgb, var(--outfit-shadow) 54%, transparent) !important;
  stroke-width: 2.2;
  opacity: 0.24;
}

.svg-fabric-sleeve-highlight {
  stroke: rgba(255, 255, 255, 0.38) !important;
  stroke-width: 1.8;
  opacity: 0.32;
}

.svg-foot-shape {
  opacity: 0.96;
  filter: drop-shadow(0 4px 4px rgba(74, 50, 38, 0.1))
    drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.22));
}

.svg-hip-shade {
  opacity: 0.65;
  mix-blend-mode: multiply;
}

.svg-joint-shade {
  opacity: 0.5;
  fill: none !important;
  stroke: rgba(108, 67, 50, 0.13) !important;
  stroke-linecap: round;
  stroke-width: 3;
}

.svg-center-shade {
  opacity: 0.46;
  fill: none !important;
  stroke: rgba(92, 57, 44, 0.12) !important;
  stroke-linecap: round;
  stroke-width: 3;
}

.svg-hand-detail {
  pointer-events: none;
}

.svg-hand-soft {
  fill: var(--skin-color) !important;
  stroke: none !important;
  opacity: 0.96;
  mix-blend-mode: normal;
  filter: drop-shadow(0 2px 2px rgba(91, 57, 43, 0.09))
    drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.18));
}

.svg-hand-wrist,
.svg-hand-thumb,
.svg-hand-line {
  fill: none !important;
  stroke: rgba(104, 63, 48, 0.28) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svg-hand-wrist {
  opacity: 0.5;
  stroke-width: 1.7;
}

.svg-hand-thumb {
  opacity: 0.42;
  stroke-width: 1.35;
}

.svg-hand-line {
  opacity: 0.44;
  stroke-width: 1.25;
}

.svg-skin:not([fill]) {
  fill: var(--skin-color);
}

.svg-outfit:not([fill]) {
  fill: var(--outfit-color);
}

.svg-pants:not([fill]) {
  fill: var(--outfit-pants, var(--outfit-shadow));
}

.svg-head-path {
  filter: drop-shadow(0 10px 10px rgba(105, 72, 50, 0.12));
}

.svg-neck {
  transform-origin: 95px 100px;
}

.svg-arm-left {
  transform-origin: 64px 110px;
}

.svg-arm-right {
  transform-origin: 126px 110px;
}

.svg-torso {
  transform-origin: 95px 110px;
  filter: drop-shadow(0 10px 10px rgba(76, 50, 39, 0.1));
  opacity: 0.2;
}

.svg-hip {
  transform-origin: 95px 212px;
}

.svg-leg-left {
  transform-origin: 84px 228px;
}

.svg-leg-right {
  transform-origin: 106px 228px;
}

.svg-foot {
  opacity: 0.95;
  filter: brightness(0.98);
}

.body-slim {
  --head-scale: 0.45;
  --face-top: 39px;
  --hair-top: 15px;
  --torso-top: 111px;
  --torso-width: calc(var(--avatar-width) * 0.49);
  --torso-height: calc(var(--avatar-height) * 0.32);
}

.body-balanced {
  --head-scale: 0.46;
  --face-top: 40px;
  --hair-top: 16px;
  --torso-top: 112px;
  --torso-width: calc(var(--avatar-width) * 0.56);
  --torso-height: calc(var(--avatar-height) * 0.31);
}

.body-soft {
  --head-scale: 0.47;
  --face-top: 40px;
  --hair-top: 16px;
  --torso-top: 114px;
  --torso-width: calc(var(--avatar-width) * 0.63);
  --torso-height: calc(var(--avatar-height) * 0.31);
}

.avatar-hair {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 156px;
  height: 150px;
  border-radius: 48% 52% 44% 44%;
  background: var(--hair-color);
  transform: translateX(-50%);
  z-index: 1;
  box-shadow: var(--clay-inset-shadow), var(--clay-drop-shadow);
  filter: saturate(0.96);
}

.avatar-hair,
.avatar-neck,
.avatar-body,
.avatar-face,
.avatar-ear,
.avatar-eyes,
.avatar-nose,
.avatar-mouth {
  transition:
    background 0.24s ease,
    border-radius 0.24s ease,
    clip-path 0.24s ease,
    width 0.24s ease,
    height 0.24s ease,
    top 0.24s ease,
    left 0.24s ease,
    opacity 0.24s ease,
    transform 0.24s ease,
    box-shadow 0.24s ease;
}

.preview-scene .avatar-model {
  filter: drop-shadow(0 22px 24px rgba(78, 58, 42, 0.2))
    drop-shadow(0 5px 0 rgba(255, 255, 255, 0.2));
}

.preview-scene .avatar-model::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 220px;
  height: 226px;
  border-radius: 46% 46% 36% 36%;
  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(255, 255, 255, 0.5),
      transparent 62%
    ),
    radial-gradient(
      ellipse at 50% 76%,
      rgba(98, 177, 165, 0.1),
      transparent 72%
    );
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

.avatar-face {
  position: absolute;
  left: 50%;
  top: 64px;
  width: 116px;
  height: 112px;
  border-radius: 30px;
  background: #f6c6b1;
  transform: translateX(-50%);
  z-index: 3;
  box-shadow:
    inset 10px 10px 18px rgba(255, 255, 255, 0.28),
    inset -10px -14px 22px rgba(177, 103, 80, 0.18),
    0 10px 16px rgba(75, 49, 36, 0.13);
}

.avatar-neck {
  position: absolute;
  left: 50%;
  top: 158px;
  width: 40px;
  height: 46px;
  border-radius: 18px 18px 14px 14px;
  background: #f6c6b1;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow:
    inset 6px 6px 10px rgba(255, 255, 255, 0.2),
    inset -7px -9px 12px rgba(169, 103, 82, 0.14);
}

.avatar-ear {
  position: absolute;
  top: 46px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: inherit;
  z-index: 2;
}

.avatar-ear.left {
  left: -15px;
}

.avatar-ear.right {
  right: -15px;
}

.avatar-body {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 96px;
  height: 98px;
  border-radius: 28px 28px 8px 8px;
  background: linear-gradient(
    135deg,
    var(--outfit-color),
    var(--outfit-shadow)
  );
  clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
  z-index: 0;
  box-shadow:
    inset 12px 12px 20px rgba(255, 255, 255, 0.22),
    inset -12px -16px 22px rgba(63, 32, 84, 0.15),
    0 16px 20px rgba(71, 48, 37, 0.13);
}

.avatar-body::before,
.avatar-body::after {
  content: '';
  position: absolute;
  bottom: 16px;
  width: 15px;
  height: 38px;
  border-radius: 4px;
  background: rgba(69, 34, 91, 0.18);
}

.avatar-body::before {
  left: 36%;
}

.avatar-body::after {
  right: 36%;
}

.body-small .avatar-body {
  width: 72px;
  height: 82px;
}

.body-wide .avatar-body {
  width: 132px;
  height: 90px;
  border-radius: 52px 52px 8px 8px;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.body-dress .avatar-body {
  width: 112px;
  height: 112px;
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}

.body-square .avatar-body {
  width: 104px;
  height: 84px;
  border-radius: 10px 10px 4px 4px;
  clip-path: none;
}

.body-round .avatar-body {
  width: 126px;
  height: 82px;
  border-radius: 80px 80px 8px 8px;
  clip-path: none;
}

.body-balanced .avatar-body {
  width: 100px;
  height: 98px;
  border-radius: 30px 30px 9px 9px;
  clip-path: polygon(24% 0, 76% 0, 96% 100%, 4% 100%);
}

.body-soft .avatar-body {
  width: 120px;
  height: 90px;
  border-radius: 54px 54px 12px 12px;
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

.face-shape-sample {
  position: relative;
  display: grid;
  width: 122px;
  height: 104px;
  margin: 0 auto;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #f7efe3, #d8c8ae);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.face-shape-image-sample {
  width: 132px;
  height: 112px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(255, 255, 255, 0.82),
      transparent 46%
    ),
    linear-gradient(145deg, #f7efe3, #dbcbb4);
}

.face-shape-image {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 1500px;
  height: 1500px;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  transform: translate(-50%, -50%);
  filter: saturate(0.9) contrast(0.96) brightness(1.02)
    drop-shadow(0 8px 8px rgba(93, 67, 38, 0.16));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.face-shape-svg {
  width: 88px;
  height: 104px;
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
  transform: translateZ(0);
  filter: drop-shadow(0 8px 8px rgba(93, 67, 38, 0.16));
}

.face-shape-svg-face {
  fill: var(--face-thumbnail-fill, #f8d8c8);
  stroke: var(--face-thumbnail-stroke, rgba(120, 91, 77, 0.58));
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.face-shape-svg-shadow {
  fill: rgba(121, 86, 62, 0.12);
  transform: translateY(3px);
}

.face-shape-svg-highlight {
  fill: none;
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 3.4;
  stroke-linecap: round;
}

.face-shape-svg-contour {
  fill: none;
  stroke: rgba(122, 92, 80, 0.28);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.skin-cream .face-shape-svg {
  --face-thumbnail-fill: #f8d8c8;
  --face-thumbnail-stroke: rgba(125, 88, 75, 0.54);
}

.skin-ocher .face-shape-svg {
  --face-thumbnail-fill: #ffe3a5;
  --face-thumbnail-stroke: rgba(130, 96, 44, 0.48);
}

.skin-white .face-shape-svg {
  --face-thumbnail-fill: #dedede;
  --face-thumbnail-stroke: rgba(105, 105, 105, 0.46);
}

.skin-ivory .face-shape-svg {
  --face-thumbnail-fill: #f1eee9;
  --face-thumbnail-stroke: rgba(112, 103, 100, 0.42);
}

.skin-pink .face-shape-svg {
  --face-thumbnail-fill: #ffd1d1;
  --face-thumbnail-stroke: rgba(129, 86, 86, 0.45);
}

.face-shape-svg-round {
  width: 92px;
  height: 100px;
}

.face-shape-svg-square {
  width: 92px;
  height: 104px;
}

.face-shape-svg-triangle {
  width: 94px;
  height: 106px;
}

.face-shape-svg-oval {
  width: 86px;
  height: 112px;
}

.face-shape-svg-slim {
  width: 78px;
  height: 118px;
  transform: translateY(-3px) translateZ(0);
}

.face-shape-image-sample.face-square .face-shape-image,
.face-shape-image-sample.face-oval .face-shape-image {
  width: 1560px;
  height: 1560px;
}

.face-shape-image-sample.face-slim .face-shape-image {
  width: 1620px;
  height: 1620px;
  transform: translate(-50%, -50%) translateY(2px);
}

.face-shape-image-sample.face-triangle .face-shape-image {
  transform: translate(-50%, -50%) translateY(1px);
}

.face-shape-grid .option-card {
  min-height: 164px;
}

.face-shape-grid .option-visual {
  height: 124px;
  overflow: visible;
}

.face-shape-outline {
  position: relative;
  display: block;
  width: 72px;
  height: 78px;
  background: #fffaf0;
  filter: drop-shadow(0 8px 7px rgba(93, 67, 38, 0.22));
}

.face-shape-outline::after {
  content: '';
  position: absolute;
  inset: 9px;
  background: #eadfce;
  border-radius: inherit;
  clip-path: inherit;
  box-shadow: inset 0 4px 7px rgba(94, 67, 39, 0.18);
}

.skin-cream .face-shape-outline::after {
  background: #f8d8c8;
}

.skin-ocher .face-shape-outline::after {
  background: #ffe7ae;
}

.skin-white .face-shape-outline::after {
  background: #dddddd;
}

.skin-ivory .face-shape-outline::after {
  background: #f1eee9;
}

.skin-pink .face-shape-outline::after {
  background: #ffd1d1;
}

.face-shape-sample.face-round .face-shape-outline {
  width: 76px;
  height: 76px;
  border-radius: 50%;
}

.face-shape-sample.face-square .face-shape-outline {
  width: 80px;
  height: 78px;
  clip-path: polygon(16% 0, 84% 0, 96% 34%, 86% 92%, 14% 92%, 4% 34%);
}

.face-shape-sample.face-triangle .face-shape-outline {
  width: 82px;
  height: 82px;
  clip-path: polygon(50% 0, 88% 16%, 100% 44%, 50% 100%, 0 44%, 12% 16%);
}

.face-shape-sample.face-oval .face-shape-outline {
  width: 70px;
  height: 86px;
  border-radius: 50% / 46%;
}

.face-shape-sample.face-slim .face-shape-outline {
  width: 58px;
  height: 92px;
  border-radius: 50% / 44%;
}

.face-round .avatar-face {
  border-radius: 50%;
}

.face-oval .avatar-face {
  width: 104px;
  height: 126px;
  border-radius: 48%;
}

.face-slim .avatar-face {
  width: 88px;
  height: 120px;
  border-radius: 44%;
}

.face-square .avatar-face {
  border-radius: 18px;
}

.face-triangle .avatar-face {
  width: 128px;
  clip-path: polygon(14% 12%, 86% 12%, 72% 100%, 28% 100%);
}

.skin-cream {
  --skin-color: #f8d8c8;
  --skin-light: #ffe6da;
  --skin-shadow: #dfa893;
}

.skin-cream .avatar-face,
.skin-cream .avatar-ear,
.skin-cream .avatar-neck {
  background: #f8d8c8;
}

.skin-ocher {
  --skin-color: #ffe7ae;
  --skin-light: #fff2ce;
  --skin-shadow: #e8be78;
}

.skin-ocher .avatar-face,
.skin-ocher .avatar-ear,
.skin-ocher .avatar-neck {
  background: #ffe7ae;
}

.skin-white {
  --skin-color: #dddddd;
  --skin-light: #f3f3f3;
  --skin-shadow: #bdbdbd;
}

.skin-white .avatar-face,
.skin-white .avatar-ear,
.skin-white .avatar-neck {
  background: #dddddd;
}

.skin-deep {
  --skin-color: #7b4a35;
  --skin-light: #9b6348;
  --skin-shadow: #563121;
}

.skin-deep .avatar-face,
.skin-deep .avatar-ear,
.skin-deep .avatar-neck {
  background: #7b4a35;
}

.skin-ivory {
  --skin-color: #f1eee9;
  --skin-light: #fff9f4;
  --skin-shadow: #d8cbc3;
}

.skin-ivory .avatar-face,
.skin-ivory .avatar-ear,
.skin-ivory .avatar-neck {
  background: #f1eee9;
}

.skin-pink {
  --skin-color: #ffd1d1;
  --skin-light: #ffe4e4;
  --skin-shadow: #e3a6a6;
}

.skin-pink .avatar-face,
.skin-pink .avatar-ear,
.skin-pink .avatar-neck {
  background: #ffd1d1;
}

.hair-color-red-brown {
  --hair-color: #d85a4f;
  --hair-shadow: #ad3c34;
}

.hair-color-taupe {
  --hair-color: #9c877f;
  --hair-shadow: #7f6c65;
}

.hair-color-caramel {
  --hair-color: #b97a4e;
  --hair-shadow: #925a35;
}

.hair-color-coral {
  --hair-color: #d85a4f;
  --hair-shadow: #ad3c34;
}

.hair-color-blonde {
  --hair-color: #e2b84a;
  --hair-shadow: #bd8f2e;
}

.hair-color-cream {
  --hair-color: #ece9e2;
  --hair-shadow: #d2cdc4;
}

.hair-color-silver {
  --hair-color: #c8c8c2;
  --hair-shadow: #a9a9a4;
}

.hair-color-pink {
  --hair-color: #ec8fc7;
  --hair-shadow: #df7fba;
}

.hair-color-purple {
  --hair-color: #875cf0;
  --hair-shadow: #7045d8;
}

.hair-color-dark-natural {
  --hair-color: #3f2f2a;
  --hair-shadow: #241b18;
}

.hair-color-soft-brown {
  --hair-color: #b8794f;
  --hair-shadow: #8d5a3a;
}

.hair-color-vivid-warm {
  --hair-color: #d85a4f;
  --hair-shadow: #ad3c34;
}

.hair-color-bright-bleached {
  --hair-color: #ece9e2;
  --hair-shadow: #d2cdc4;
}

.hair-color-cool-tone {
  --hair-color: #5f8edb;
  --hair-shadow: #3f6fb9;
}

.hair-color-black {
  --hair-color: #231f20;
  --hair-shadow: #11100f;
}

.hair-color-dark-brown {
  --hair-color: #5a3a2a;
  --hair-shadow: #332117;
}

.hair-color-light-brown {
  --hair-color: #7a5238;
  --hair-shadow: #563724;
}

.hair-color-light-ocher {
  --hair-color: #b97a4e;
  --hair-shadow: #925a35;
}

.hair-color-red {
  --hair-color: #d85a4f;
  --hair-shadow: #ad3c34;
}

.hair-color-orange {
  --hair-color: #e78b34;
  --hair-shadow: #bf6822;
}

.hair-color-gold {
  --hair-color: #e2b84a;
  --hair-shadow: #bd8f2e;
}

.hair-color-silver-new {
  --hair-color: #c8c8c2;
  --hair-shadow: #a9a9a4;
}

.hair-color-white {
  --hair-color: #ece9e2;
  --hair-shadow: #d2cdc4;
}

.hair-color-blue {
  --hair-color: #5f8edb;
  --hair-shadow: #3f6fb9;
}

.hair-color-green {
  --hair-color: #67a96f;
  --hair-shadow: #438753;
}

.hair-color-purple-cool {
  --hair-color: #8a63d2;
  --hair-shadow: #6d4bb1;
}

.outfit-warm,
.outfit-purple,
.outfit-pink {
  --outfit-color: #d4bc9a;
  --outfit-shadow: #b99a70;
  --outfit-pants-light: #c9aa7f;
  --outfit-pants: #a78258;
  --outfit-highlight: rgba(255, 248, 225, 0.64);
}

.outfit-bright,
.outfit-yellow {
  --outfit-color: #e7c84e;
  --outfit-shadow: #c5a33c;
  --outfit-pants-light: #d7b846;
  --outfit-pants: #b28e2f;
  --outfit-highlight: rgba(255, 244, 190, 0.62);
}

.outfit-cool,
.outfit-blue {
  --outfit-color: #7faed8;
  --outfit-shadow: #5e8fb9;
  --outfit-pants-light: #6ea0c9;
  --outfit-pants: #4e7ea5;
  --outfit-highlight: rgba(222, 241, 255, 0.6);
}

.outfit-nature,
.outfit-green {
  --outfit-color: #7fb07f;
  --outfit-shadow: #5e915f;
  --outfit-pants-light: #72a372;
  --outfit-pants: #4f7e51;
  --outfit-highlight: rgba(226, 246, 218, 0.58);
}

.outfit-passion,
.outfit-orange,
.outfit-rose {
  --outfit-color: #d97a7a;
  --outfit-shadow: #b95d5f;
  --outfit-pants-light: #ca6c6d;
  --outfit-pants: #9e4c50;
  --outfit-highlight: rgba(255, 225, 220, 0.56);
}

.outfit-white {
  --outfit-color: #edf2f2;
  --outfit-shadow: #cbd4d5;
  --outfit-pants-light: #d8dedf;
  --outfit-pants: #aeb8ba;
  --outfit-highlight: rgba(255, 255, 255, 0.72);
}

.outfit-dark {
  --outfit-color: #444444;
  --outfit-shadow: #303030;
  --outfit-pants-light: #393939;
  --outfit-pants: #242424;
  --outfit-highlight: rgba(255, 255, 255, 0.18);
}

.outfit-style-sample {
  --active-clothing-color: var(--outfit-color, #d2b48c);
  --active-clothing-shadow: var(--outfit-shadow, #b99265);
  --active-clothing-pants: var(--outfit-pants, var(--active-clothing-shadow));
  --active-clothing-highlight: var(
    --outfit-highlight,
    rgba(255, 245, 220, 0.68)
  );
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.outfit-icon-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 10px 12px rgba(76, 54, 35, 0.16));
}

.outfit-icon-svg .icon-bg {
  fill: #fffaf0;
  transition:
    fill 0.24s ease,
    opacity 0.24s ease,
    filter 0.24s ease;
}

.option-card.active .outfit-icon-svg .icon-bg {
  filter: brightness(1.04);
}

.outfit-style-classic .icon-bg {
  fill: #e3d4b6;
}

.outfit-style-classic .jacket {
  fill: #1e3a8a;
  stroke: #172f72;
  stroke-width: 2;
}

.outfit-style-classic .shirt {
  fill: #fffaf0;
  stroke: #d8cab2;
  stroke-width: 1.5;
}

.outfit-style-classic .lapel {
  fill: #27499d;
  opacity: 0.86;
}

.outfit-style-classic .pants {
  fill: #795548;
}

.outfit-style-classic .button {
  fill: #e7d3a5;
}

.outfit-style-casual .icon-bg {
  fill: #d1c1a0;
}

.outfit-style-casual .hood,
.outfit-style-casual .hoodie {
  fill: #6b7280;
  stroke: #565d68;
  stroke-width: 2;
}

.outfit-style-casual .pocket {
  fill: rgba(255, 255, 255, 0.2);
}

.outfit-style-casual .string {
  fill: none;
  stroke: #f2e9dc;
  stroke-width: 2;
  stroke-linecap: round;
}

.outfit-style-casual .jogger {
  fill: #505761;
}

.outfit-style-statement .icon-bg {
  fill: #fffaf0;
}

.outfit-style-statement .jumper {
  fill: #dc143c;
  stroke: #b21233;
  stroke-width: 2;
}

.outfit-style-statement .slash {
  fill: rgba(255, 255, 255, 0.2);
}

.outfit-style-statement .pattern-pants {
  fill: #ffb74d;
  stroke: #d88929;
  stroke-width: 1.6;
}

.outfit-style-statement .dot {
  fill: #fffbf0;
}

.outfit-style-knit .icon-bg {
  fill: #e3f2fd;
}

.outfit-style-knit .knit {
  fill: #f8bbd0;
  stroke: #dc89aa;
  stroke-width: 2;
}

.outfit-style-knit .braid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 3;
  stroke-linecap: round;
}

.outfit-style-knit .soft-pants {
  fill: #d8c4a8;
}

.outfit-style-sporty .icon-bg {
  fill: #e8f5e9;
}

.outfit-style-sporty .sport-top {
  fill: #81c784;
  stroke: #5ca766;
  stroke-width: 2;
}

.outfit-style-sporty .cut-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 3;
  stroke-linecap: round;
}

.outfit-style-sporty .logo {
  fill: #f4fff5;
}

.outfit-style-sporty .leggings {
  fill: #1f2933;
}

.outfit-style-sample .icon-bg {
  fill: var(--active-clothing-color);
  opacity: 0.22;
}

.outfit-style-sample .jacket,
.outfit-style-sample .hood,
.outfit-style-sample .hoodie,
.outfit-style-sample .jumper,
.outfit-style-sample .knit,
.outfit-style-sample .sport-top {
  fill: var(--active-clothing-color);
  stroke: var(--active-clothing-shadow);
  transition:
    fill 0.22s ease,
    stroke 0.22s ease;
}

.outfit-style-sample .pants,
.outfit-style-sample .jogger,
.outfit-style-sample .pattern-pants,
.outfit-style-sample .soft-pants,
.outfit-style-sample .leggings {
  fill: var(--active-clothing-pants);
  stroke: color-mix(in srgb, var(--active-clothing-pants) 82%, #5f4032);
  transition:
    fill 0.22s ease,
    stroke 0.22s ease;
}

.outfit-style-sample .slash,
.outfit-style-sample .pocket {
  fill: var(--active-clothing-highlight);
}

.outfit-style-classic .avatar-body {
  width: 104px;
  height: 98px;
  border-radius: 26px 26px 7px 7px;
  clip-path: polygon(24% 0, 76% 0, 98% 100%, 2% 100%);
  background:
    radial-gradient(
      circle at 50% 68%,
      var(--outfit-highlight, #e7d3a5) 0 3px,
      transparent 4px
    ),
    radial-gradient(
      circle at 50% 79%,
      var(--outfit-highlight, #e7d3a5) 0 3px,
      transparent 4px
    ),
    linear-gradient(
      90deg,
      var(--outfit-shadow) 0 36%,
      #fffaf0 36% 64%,
      var(--outfit-color) 64% 100%
    );
}

.outfit-style-casual .avatar-body {
  width: 118px;
  height: 96px;
  border-radius: 42px 42px 12px 12px;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(
      ellipse at 50% 8%,
      transparent 0 16px,
      rgba(255, 255, 255, 0.16) 17px 22px,
      transparent 23px
    ),
    radial-gradient(
      ellipse at 50% 72%,
      rgba(255, 255, 255, 0.18) 0 20px,
      transparent 21px
    ),
    linear-gradient(135deg, var(--outfit-color), var(--outfit-shadow));
}

.outfit-style-statement .avatar-body {
  width: 112px;
  height: 104px;
  border-radius: 18px 34px 8px 8px;
  clip-path: polygon(18% 0, 82% 0, 96% 100%, 0 100%);
  background:
    repeating-linear-gradient(
      135deg,
      var(--outfit-highlight, rgba(255, 251, 240, 0.82)) 0 6px,
      transparent 6px 14px
    ),
    linear-gradient(
      115deg,
      var(--outfit-color) 0 55%,
      var(--outfit-shadow) 55% 100%
    );
}

.outfit-style-knit .avatar-body {
  width: 112px;
  height: 102px;
  border-radius: 36px 36px 10px 10px;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.34) 0 4px,
      transparent 4px 10px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.24) 0 4px,
      transparent 4px 12px
    ),
    linear-gradient(135deg, var(--outfit-color), var(--outfit-shadow));
}

.outfit-style-sporty .avatar-body {
  width: 96px;
  height: 104px;
  border-radius: 24px 24px 8px 8px;
  clip-path: polygon(28% 0, 72% 0, 90% 100%, 10% 100%);
  background:
    radial-gradient(circle at 50% 34%, #f4fff5 0 6px, transparent 7px),
    linear-gradient(
      90deg,
      transparent 0 36%,
      rgba(255, 255, 255, 0.62) 36% 40%,
      transparent 40% 60%,
      rgba(255, 255, 255, 0.62) 60% 64%,
      transparent 64%
    ),
    linear-gradient(135deg, var(--outfit-color), var(--outfit-shadow));
}

.outfit-style-classic .avatar-body::before,
.outfit-style-classic .avatar-body::after,
.outfit-style-casual .avatar-body::before,
.outfit-style-casual .avatar-body::after,
.outfit-style-statement .avatar-body::before,
.outfit-style-statement .avatar-body::after,
.outfit-style-knit .avatar-body::before,
.outfit-style-knit .avatar-body::after,
.outfit-style-sporty .avatar-body::before,
.outfit-style-sporty .avatar-body::after {
  opacity: 0.36;
}

.avatar-model.body-slim .avatar-body {
  transform: translateX(-50%) scaleX(0.84) scaleY(1.04);
  border-radius: 24px 24px 8px 8px;
}

.avatar-model.body-balanced .avatar-body {
  transform: translateX(-50%) scaleX(1) scaleY(1);
  border-radius: 30px 30px 9px 9px;
}

.avatar-model.body-soft .avatar-body {
  transform: translateX(-50%) scaleX(1.12) scaleY(0.96);
  border-radius: 46px 46px 12px 12px;
}

.hair-bangs-long .avatar-hair {
  height: 190px;
  border-radius: 48% 52% 26% 26%;
}

.hair-bob .avatar-hair {
  height: 148px;
  border-radius: 45% 45% 20% 20%;
}

.hair-short .avatar-hair {
  top: 36px;
  height: 88px;
  border-radius: 42px 42px 18px 18px;
}

.hair-side-long .avatar-hair {
  height: 190px;
  border-radius: 56% 42% 28% 28%;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 20% 100%, 35% 40%, 0 62%);
}

.hair-perm-bob .avatar-hair {
  background:
    radial-gradient(
      circle at 24% 34%,
      var(--hair-color) 0 28px,
      transparent 29px
    ),
    radial-gradient(
      circle at 72% 38%,
      var(--hair-color) 0 30px,
      transparent 31px
    ),
    var(--hair-shadow);
}

.hair-volume .avatar-hair {
  width: 172px;
  height: 154px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 18% 45%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      circle at 52% 20%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      circle at 82% 48%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    var(--hair-shadow);
}

.hair-neat .avatar-hair {
  top: 28px;
  width: 152px;
  height: 132px;
  border-radius: 48% 48% 24% 24%;
  background:
    radial-gradient(
      ellipse at 36% 24%,
      rgba(255, 255, 255, 0.2) 0 18%,
      transparent 19%
    ),
    linear-gradient(
      95deg,
      transparent 0 42%,
      rgba(255, 255, 255, 0.18) 43% 47%,
      transparent 48%
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-wave .avatar-hair {
  top: -2px;
  width: 190px;
  height: 186px;
  border-radius: 52% 52% 38% 38%;
  background:
    radial-gradient(
      circle at 9% 52%,
      var(--hair-color) 0 24px,
      var(--hair-shadow) 25px 29px,
      transparent 30px
    ),
    radial-gradient(
      circle at 8% 72%,
      var(--hair-color) 0 21px,
      transparent 22px
    ),
    radial-gradient(
      circle at 18% 30%,
      var(--hair-color) 0 27px,
      var(--hair-shadow) 28px 32px,
      transparent 33px
    ),
    radial-gradient(
      circle at 24% 78%,
      var(--hair-color) 0 23px,
      transparent 24px
    ),
    radial-gradient(
      circle at 33% 18%,
      var(--hair-color) 0 30px,
      var(--hair-shadow) 31px 35px,
      transparent 36px
    ),
    radial-gradient(
      circle at 50% 14%,
      var(--hair-color) 0 32px,
      var(--hair-shadow) 33px 37px,
      transparent 38px
    ),
    radial-gradient(
      circle at 67% 18%,
      var(--hair-color) 0 30px,
      var(--hair-shadow) 31px 35px,
      transparent 36px
    ),
    radial-gradient(
      circle at 76% 78%,
      var(--hair-color) 0 23px,
      transparent 24px
    ),
    radial-gradient(
      circle at 82% 30%,
      var(--hair-color) 0 27px,
      var(--hair-shadow) 28px 32px,
      transparent 33px
    ),
    radial-gradient(
      circle at 92% 54%,
      var(--hair-color) 0 24px,
      var(--hair-shadow) 25px 29px,
      transparent 30px
    ),
    radial-gradient(
      circle at 92% 72%,
      var(--hair-color) 0 21px,
      transparent 22px
    ),
    radial-gradient(
      circle at 26% 58%,
      var(--hair-color) 0 28px,
      transparent 29px
    ),
    radial-gradient(
      circle at 38% 78%,
      var(--hair-color) 0 24px,
      transparent 25px
    ),
    radial-gradient(
      circle at 50% 54%,
      var(--hair-color) 0 30px,
      transparent 31px
    ),
    radial-gradient(
      circle at 62% 78%,
      var(--hair-color) 0 24px,
      transparent 25px
    ),
    radial-gradient(
      circle at 74% 58%,
      var(--hair-color) 0 28px,
      transparent 29px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-wave .avatar-hair::before {
  content: '';
  position: absolute;
  inset: 12px 10px 10px;
  border-radius: 50% 50% 38% 38%;
  background:
    radial-gradient(
      circle at 14% 48%,
      transparent 0 9px,
      rgba(255, 255, 255, 0.28) 10px 12px,
      rgba(88, 48, 42, 0.16) 13px 15px,
      transparent 16px
    ),
    radial-gradient(
      circle at 24% 26%,
      transparent 0 10px,
      rgba(255, 255, 255, 0.3) 11px 13px,
      rgba(88, 48, 42, 0.15) 14px 16px,
      transparent 17px
    ),
    radial-gradient(
      circle at 38% 42%,
      transparent 0 11px,
      rgba(255, 255, 255, 0.26) 12px 14px,
      rgba(88, 48, 42, 0.14) 15px 17px,
      transparent 18px
    ),
    radial-gradient(
      circle at 50% 24%,
      transparent 0 11px,
      rgba(255, 255, 255, 0.3) 12px 14px,
      rgba(88, 48, 42, 0.15) 15px 17px,
      transparent 18px
    ),
    radial-gradient(
      circle at 62% 42%,
      transparent 0 11px,
      rgba(255, 255, 255, 0.26) 12px 14px,
      rgba(88, 48, 42, 0.14) 15px 17px,
      transparent 18px
    ),
    radial-gradient(
      circle at 76% 26%,
      transparent 0 10px,
      rgba(255, 255, 255, 0.3) 11px 13px,
      rgba(88, 48, 42, 0.15) 14px 16px,
      transparent 17px
    ),
    radial-gradient(
      circle at 86% 50%,
      transparent 0 9px,
      rgba(255, 255, 255, 0.28) 10px 12px,
      rgba(88, 48, 42, 0.16) 13px 15px,
      transparent 16px
    ),
    radial-gradient(
      circle at 18% 72%,
      transparent 0 8px,
      rgba(255, 255, 255, 0.24) 9px 11px,
      rgba(88, 48, 42, 0.13) 12px 14px,
      transparent 15px
    ),
    radial-gradient(
      circle at 30% 68%,
      transparent 0 10px,
      rgba(255, 255, 255, 0.24) 11px 13px,
      rgba(88, 48, 42, 0.13) 14px 16px,
      transparent 17px
    ),
    radial-gradient(
      circle at 50% 70%,
      transparent 0 11px,
      rgba(255, 255, 255, 0.25) 12px 14px,
      rgba(88, 48, 42, 0.14) 15px 17px,
      transparent 18px
    ),
    radial-gradient(
      circle at 62% 72%,
      transparent 0 8px,
      rgba(255, 255, 255, 0.24) 9px 11px,
      rgba(88, 48, 42, 0.13) 12px 14px,
      transparent 15px
    ),
    radial-gradient(
      circle at 70% 68%,
      transparent 0 10px,
      rgba(255, 255, 255, 0.24) 11px 13px,
      rgba(88, 48, 42, 0.13) 14px 16px,
      transparent 17px
    );
  opacity: 0.9;
}

.hair-wave .avatar-hair::after {
  content: '';
  position: absolute;
  left: -3px;
  top: 76px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 28%,
      rgba(255, 255, 255, 0.22) 0 5px,
      transparent 6px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow:
    8px -36px 0 2px var(--hair-color),
    26px -60px 0 5px var(--hair-color),
    56px -76px 0 6px var(--hair-color),
    88px -82px 0 7px var(--hair-color),
    120px -76px 0 6px var(--hair-color),
    150px -58px 0 5px var(--hair-color),
    168px -32px 0 3px var(--hair-color),
    174px -2px 0 1px var(--hair-color),
    164px 30px 0 0 var(--hair-color),
    136px 50px 0 1px var(--hair-color),
    100px 58px 0 2px var(--hair-color),
    62px 56px 0 1px var(--hair-color),
    26px 42px 0 1px var(--hair-color),
    -8px 16px 0 0 var(--hair-color);
  opacity: 0.96;
}

.hair-wave-short .avatar-hair {
  top: 36px;
  width: 146px;
  height: 96px;
  border-radius: 46px 46px 24px 24px;
  background:
    radial-gradient(
      circle at 6% 54%,
      var(--hair-color) 0 18px,
      transparent 19px
    ),
    radial-gradient(
      circle at 18% 26%,
      var(--hair-color) 0 22px,
      transparent 23px
    ),
    radial-gradient(
      circle at 38% 12%,
      var(--hair-color) 0 24px,
      transparent 25px
    ),
    radial-gradient(
      circle at 62% 12%,
      var(--hair-color) 0 24px,
      transparent 25px
    ),
    radial-gradient(
      circle at 82% 26%,
      var(--hair-color) 0 22px,
      transparent 23px
    ),
    radial-gradient(
      circle at 94% 54%,
      var(--hair-color) 0 18px,
      transparent 19px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-wave-bob .avatar-hair {
  top: 18px;
  width: 176px;
  height: 176px;
  border-radius: 50% 50% 24px 24px;
  background:
    radial-gradient(
      circle at 7% 48%,
      var(--hair-color) 0 25px,
      transparent 26px
    ),
    radial-gradient(
      circle at 20% 24%,
      var(--hair-color) 0 30px,
      transparent 31px
    ),
    radial-gradient(
      circle at 40% 12%,
      var(--hair-color) 0 32px,
      transparent 33px
    ),
    radial-gradient(
      circle at 60% 12%,
      var(--hair-color) 0 32px,
      transparent 33px
    ),
    radial-gradient(
      circle at 80% 24%,
      var(--hair-color) 0 30px,
      transparent 31px
    ),
    radial-gradient(
      circle at 93% 48%,
      var(--hair-color) 0 25px,
      transparent 26px
    ),
    radial-gradient(
      circle at 22% 76%,
      var(--hair-color) 0 24px,
      transparent 25px
    ),
    radial-gradient(
      circle at 50% 78%,
      var(--hair-color) 0 28px,
      transparent 29px
    ),
    radial-gradient(
      circle at 78% 76%,
      var(--hair-color) 0 24px,
      transparent 25px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-wave-long .avatar-hair {
  top: 4px;
  width: 188px;
  height: 232px;
  border-radius: 52% 52% 34px 34px;
  background:
    radial-gradient(
      circle at 6% 38%,
      var(--hair-color) 0 26px,
      transparent 27px
    ),
    radial-gradient(
      circle at 17% 20%,
      var(--hair-color) 0 30px,
      transparent 31px
    ),
    radial-gradient(
      circle at 38% 10%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      circle at 62% 10%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      circle at 83% 20%,
      var(--hair-color) 0 30px,
      transparent 31px
    ),
    radial-gradient(
      circle at 94% 38%,
      var(--hair-color) 0 26px,
      transparent 27px
    ),
    radial-gradient(
      circle at 13% 72%,
      var(--hair-color) 0 28px,
      transparent 29px
    ),
    radial-gradient(
      circle at 34% 82%,
      var(--hair-color) 0 30px,
      transparent 31px
    ),
    radial-gradient(
      circle at 66% 82%,
      var(--hair-color) 0 30px,
      transparent 31px
    ),
    radial-gradient(
      circle at 87% 72%,
      var(--hair-color) 0 28px,
      transparent 29px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  z-index: 0;
}

.hair-wave-short .avatar-hair::before,
.hair-wave-bob .avatar-hair::before,
.hair-wave-long .avatar-hair::before {
  content: '';
  position: absolute;
  inset: 12px 10px;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 18% 32%,
      transparent 0 8px,
      rgba(255, 255, 255, 0.28) 9px 11px,
      rgba(88, 48, 42, 0.15) 12px 14px,
      transparent 15px
    ),
    radial-gradient(
      circle at 38% 20%,
      transparent 0 9px,
      rgba(255, 255, 255, 0.28) 10px 12px,
      rgba(88, 48, 42, 0.15) 13px 15px,
      transparent 16px
    ),
    radial-gradient(
      circle at 60% 24%,
      transparent 0 9px,
      rgba(255, 255, 255, 0.28) 10px 12px,
      rgba(88, 48, 42, 0.15) 13px 15px,
      transparent 16px
    ),
    radial-gradient(
      circle at 80% 42%,
      transparent 0 8px,
      rgba(255, 255, 255, 0.26) 9px 11px,
      rgba(88, 48, 42, 0.14) 12px 14px,
      transparent 15px
    ),
    radial-gradient(
      circle at 28% 66%,
      transparent 0 8px,
      rgba(255, 255, 255, 0.24) 9px 11px,
      rgba(88, 48, 42, 0.13) 12px 14px,
      transparent 15px
    ),
    radial-gradient(
      circle at 54% 66%,
      transparent 0 9px,
      rgba(255, 255, 255, 0.25) 10px 12px,
      rgba(88, 48, 42, 0.14) 13px 15px,
      transparent 16px
    ),
    radial-gradient(
      circle at 72% 70%,
      transparent 0 8px,
      rgba(255, 255, 255, 0.24) 9px 11px,
      rgba(88, 48, 42, 0.13) 12px 14px,
      transparent 15px
    );
  opacity: 0.9;
}

.hair-wave-short .avatar-hair::after,
.hair-wave-bob .avatar-hair::after,
.hair-wave-long .avatar-hair::after {
  content: '';
  position: absolute;
  inset: 8px 8px 10px;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 8% 10%,
      transparent 0 4px,
      rgba(255, 255, 255, 0.24) 5px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 12% 22%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.28) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 26% 18%,
      transparent 0 6px,
      rgba(255, 255, 255, 0.26) 7px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 44% 14%,
      transparent 0 6px,
      rgba(255, 255, 255, 0.28) 7px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 62% 16%,
      transparent 0 6px,
      rgba(255, 255, 255, 0.26) 7px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 80% 24%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.28) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 92% 18%,
      transparent 0 4px,
      rgba(255, 255, 255, 0.24) 5px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 7% 36%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.22) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 18% 42%,
      transparent 0 6px,
      rgba(255, 255, 255, 0.24) 7px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 34% 38%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.28) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 52% 40%,
      transparent 0 6px,
      rgba(255, 255, 255, 0.24) 7px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 70% 42%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.28) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 86% 48%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.24) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 95% 40%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.22) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 14% 66%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.24) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 30% 66%,
      transparent 0 6px,
      rgba(255, 255, 255, 0.26) 7px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 48% 70%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.24) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 66% 68%,
      transparent 0 6px,
      rgba(255, 255, 255, 0.26) 7px 9px,
      transparent 10px
    ),
    radial-gradient(
      circle at 82% 68%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.24) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 10% 86%,
      transparent 0 4px,
      rgba(255, 255, 255, 0.22) 5px 7px,
      transparent 8px
    ),
    radial-gradient(
      circle at 24% 88%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.24) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 42% 90%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.23) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 60% 90%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.23) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 78% 88%,
      transparent 0 5px,
      rgba(255, 255, 255, 0.24) 6px 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 92% 84%,
      transparent 0 4px,
      rgba(255, 255, 255, 0.22) 5px 7px,
      transparent 8px
    );
  opacity: 0.95;
}

.hair-wave-short .avatar-face::before,
.hair-wave-bob .avatar-face::before,
.hair-wave-long .avatar-face::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -8px;
  width: 112px;
  height: 34px;
  border-radius: 30px 30px 22px 22px;
  background:
    radial-gradient(
      circle at 7% 58%,
      var(--hair-color) 0 10px,
      var(--hair-shadow) 11px 13px,
      transparent 14px
    ),
    radial-gradient(
      circle at 16% 50%,
      var(--hair-color) 0 16px,
      transparent 17px
    ),
    radial-gradient(
      circle at 26% 32%,
      var(--hair-color) 0 12px,
      var(--hair-shadow) 13px 15px,
      transparent 16px
    ),
    radial-gradient(
      circle at 36% 38%,
      var(--hair-color) 0 18px,
      transparent 19px
    ),
    radial-gradient(
      circle at 48% 62%,
      var(--hair-color) 0 13px,
      var(--hair-shadow) 14px 16px,
      transparent 17px
    ),
    radial-gradient(
      circle at 58% 40%,
      var(--hair-color) 0 18px,
      transparent 19px
    ),
    radial-gradient(
      circle at 72% 32%,
      var(--hair-color) 0 12px,
      var(--hair-shadow) 13px 15px,
      transparent 16px
    ),
    radial-gradient(
      circle at 82% 52%,
      var(--hair-color) 0 16px,
      transparent 17px
    ),
    radial-gradient(
      circle at 94% 62%,
      var(--hair-color) 0 10px,
      var(--hair-shadow) 11px 13px,
      transparent 14px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  transform: translateX(-50%);
  z-index: 1;
}

.hair-wave-short .avatar-face::after,
.hair-wave-bob .avatar-face::after,
.hair-wave-long .avatar-face::after {
  content: '';
  position: absolute;
  left: -7px;
  top: 6px;
  width: 18px;
  height: 56px;
  border-radius: 13px;
  background:
    radial-gradient(
      circle at 50% 14%,
      var(--hair-color) 0 10px,
      var(--hair-shadow) 11px 13px,
      transparent 14px
    ),
    radial-gradient(
      circle at 46% 38%,
      var(--hair-color) 0 9px,
      var(--hair-shadow) 10px 12px,
      transparent 13px
    ),
    radial-gradient(
      circle at 52% 66%,
      var(--hair-color) 0 10px,
      var(--hair-shadow) 11px 13px,
      transparent 14px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow: 112px 0 0 -1px var(--hair-color);
  z-index: 2;
}

.hair-wave-bob .avatar-face::after {
  height: 66px;
}

.hair-wave-long .avatar-face::after {
  height: 76px;
}

.hair-wave-long .avatar-body {
  z-index: 1;
}

.hair-wave-short .avatar-eyes,
.hair-wave-short .avatar-nose,
.hair-wave-short .avatar-mouth,
.hair-wave-bob .avatar-eyes,
.hair-wave-bob .avatar-nose,
.hair-wave-bob .avatar-mouth,
.hair-wave-long .avatar-eyes,
.hair-wave-long .avatar-nose,
.hair-wave-long .avatar-mouth {
  z-index: 3;
}

.hair-hidden .avatar-hair {
  top: 42px;
  width: 166px;
  height: 118px;
  border-radius: 48% 48% 32px 32px;
  background:
    radial-gradient(
      ellipse at 14% 62%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      ellipse at 86% 62%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow: inset 0 -16px 0 rgba(96, 54, 44, 0.12);
}

.hair-hidden .avatar-hair::before {
  content: '';
  display: none;
}

.hair-hidden .avatar-hair::after {
  content: '';
  display: none;
}

.hair-hidden .avatar-face::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -66px;
  width: 138px;
  height: 82px;
  border-radius: 58px 58px 22px 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), transparent 38%),
    linear-gradient(180deg, #f2dfbd, #c8a874);
  box-shadow: inset 0 -8px 0 rgba(121, 82, 42, 0.15);
  transform: translateX(-50%);
  z-index: 4;
}

.hair-hidden .avatar-face::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;
  width: 206px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7e8c9, #c5a16c);
  box-shadow: 0 5px 0 rgba(116, 82, 45, 0.14);
  transform: translateX(-50%);
  z-index: 4;
}

.hair-hidden-short .avatar-hair {
  top: 54px;
  width: 146px;
  height: 78px;
  border-radius: 44px 44px 28px 28px;
  background:
    radial-gradient(
      ellipse at 14% 70%,
      var(--hair-color) 0 24px,
      transparent 25px
    ),
    radial-gradient(
      ellipse at 86% 70%,
      var(--hair-color) 0 24px,
      transparent 25px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-hidden-medium .avatar-hair {
  top: 42px;
  width: 166px;
  height: 118px;
}

.hair-hidden-long .avatar-hair {
  top: 34px;
  width: 178px;
  height: 184px;
  border-radius: 50% 50% 34px 34px;
  background:
    radial-gradient(
      ellipse at 12% 46%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      ellipse at 88% 46%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      ellipse at 50% 84%,
      var(--hair-shadow) 0 48px,
      transparent 49px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 32%),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  z-index: 0;
}

.hair-hidden-male-short .avatar-hair {
  top: 58px;
  width: 132px;
  height: 64px;
  border-radius: 40px 40px 18px 18px;
  clip-path: polygon(
    3% 36%,
    20% 10%,
    54% 0,
    86% 12%,
    98% 38%,
    96% 100%,
    7% 100%
  );
  background:
    linear-gradient(
      110deg,
      transparent 0 44%,
      rgba(255, 255, 255, 0.15) 45% 50%,
      transparent 51%
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-hidden-male-short .avatar-face::before {
  top: -58px;
  width: 118px;
  height: 72px;
  border-radius: 50px 50px 20px 20px;
}

.hair-hidden-male-short .avatar-face::after {
  top: -8px;
  width: 176px;
  height: 30px;
}

.hair-hidden-short .avatar-hair::before,
.hair-hidden-short .avatar-hair::after,
.hair-hidden-medium .avatar-hair::before,
.hair-hidden-medium .avatar-hair::after,
.hair-hidden-long .avatar-hair::before,
.hair-hidden-long .avatar-hair::after {
  content: '';
  display: block;
  position: absolute;
  background: linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow: inset 0 -6px 0 rgba(96, 54, 44, 0.12);
}

.hair-hidden-short .avatar-hair::before,
.hair-hidden-short .avatar-hair::after {
  top: 58px;
  width: 30px;
  height: 24px;
  border-radius: 50%;
}

.hair-hidden-short .avatar-hair::before {
  left: -8px;
}

.hair-hidden-short .avatar-hair::after {
  right: -8px;
}

.hair-hidden-medium .avatar-hair::before,
.hair-hidden-medium .avatar-hair::after {
  top: 82px;
  width: 30px;
  height: 54px;
  border-radius: 18px 18px 22px 22px;
}

.hair-hidden-medium .avatar-hair::before {
  left: -6px;
  transform: rotate(5deg);
}

.hair-hidden-medium .avatar-hair::after {
  right: -6px;
  transform: rotate(-5deg);
}

.hair-hidden-long .avatar-hair::before {
  left: 50%;
  top: 92px;
  width: 54px;
  height: 118px;
  border-radius: 26px 26px 34px 34px;
  transform: translateX(-50%);
}

.hair-hidden-long .avatar-hair::after {
  left: 50%;
  top: 100px;
  width: 70px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2),
    var(--hair-shadow)
  );
  transform: translateX(-50%);
}

.hair-hidden-long .avatar-body {
  z-index: 1;
}

.hair-spiky .avatar-hair {
  top: 28px;
  width: 160px;
  height: 126px;
  border-radius: 48% 48% 28px 28px;
  background:
    radial-gradient(
      ellipse at 28% 24%,
      rgba(255, 255, 255, 0.2) 0 18%,
      transparent 19%
    ),
    linear-gradient(
      112deg,
      transparent 0 34%,
      rgba(255, 255, 255, 0.17) 35% 42%,
      transparent 43% 100%
    ),
    radial-gradient(
      ellipse at 21% 76%,
      var(--hair-shadow) 0 20px,
      transparent 21px
    ),
    radial-gradient(
      ellipse at 79% 76%,
      var(--hair-shadow) 0 20px,
      transparent 21px
    ),
    linear-gradient(180deg, var(--hair-color) 0 44%, var(--hair-shadow) 100%);
  box-shadow:
    inset -10px -13px 18px rgba(63, 32, 28, 0.14),
    inset 8px 7px 13px rgba(255, 255, 255, 0.16),
    0 12px 16px rgba(73, 49, 36, 0.11);
  transform: translateX(-50%);
  z-index: 1;
}

.hair-spiky .avatar-hair::before,
.hair-spiky .avatar-hair::after {
  content: '';
  position: absolute;
  display: block;
  pointer-events: none;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow:
    inset -7px -8px 12px rgba(63, 32, 28, 0.13),
    inset 6px 6px 10px rgba(255, 255, 255, 0.14),
    0 7px 11px rgba(73, 49, 36, 0.1);
}

.hair-spiky .avatar-face::before,
.hair-spiky .avatar-face::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 24% 22%,
      rgba(255, 255, 255, 0.22) 0 18%,
      transparent 19%
    ),
    linear-gradient(118deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(180deg, var(--hair-color) 0%, var(--hair-shadow) 100%);
  box-shadow:
    inset -5px -6px 10px rgba(63, 32, 28, 0.11),
    0 6px 9px rgba(73, 49, 36, 0.09);
  z-index: 1;
}

/* 삐죽한 머리 1: 이마와 눈이 드러나는 초단정 소프트 숏컷 */
.hair-spiky-short .avatar-hair {
  top: 46px;
  width: 138px;
  height: 78px;
  border-radius: 44px 44px 22px 22px;
  background:
    repeating-linear-gradient(
      102deg,
      rgba(255, 255, 255, 0.16) 0 4px,
      transparent 5px 16px
    ),
    radial-gradient(
      ellipse at 32% 28%,
      rgba(255, 255, 255, 0.18) 0 22%,
      transparent 23%
    ),
    linear-gradient(180deg, var(--hair-color) 0 52%, var(--hair-shadow) 100%);
}

.hair-spiky-short .avatar-hair::before {
  left: 10px;
  top: 14px;
  width: 64px;
  height: 38px;
  border-radius: 30px 24px 18px 20px;
  transform: rotate(-8deg);
}

.hair-spiky-short .avatar-hair::after {
  right: 8px;
  top: 18px;
  width: 58px;
  height: 34px;
  border-radius: 24px 30px 20px 18px;
  transform: rotate(7deg);
}

.hair-spiky-short .avatar-face::before {
  left: 38%;
  top: -8px;
  width: 70px;
  height: 24px;
  border-radius: 58% 30% 52% 28%;
  transform: rotate(10deg) skewX(-4deg);
  box-shadow:
    inset -5px -6px 10px rgba(63, 32, 28, 0.11),
    12px -3px 0 -8px var(--hair-shadow),
    0 6px 9px rgba(73, 49, 36, 0.09);
}

.hair-spiky-short .avatar-face::after {
  left: 20%;
  top: -5px;
  width: 50px;
  height: 20px;
  border-radius: 28% 58% 30% 52%;
  transform: rotate(-13deg) skewX(5deg);
  box-shadow:
    inset -4px -5px 8px rgba(63, 32, 28, 0.1),
    -8px -2px 0 -7px var(--hair-shadow),
    0 5px 8px rgba(73, 49, 36, 0.08);
}

/* 삐죽한 머리 2: 윗머리는 볼륨 있게, 눈은 완전히 보이는 활동적인 중간 컷 */
.hair-spiky-medium .avatar-hair {
  top: 28px;
  width: 158px;
  height: 112px;
  border-radius: 54px 50px 26px 26px;
  background:
    radial-gradient(
      ellipse at 46% 16%,
      rgba(255, 255, 255, 0.22) 0 22%,
      transparent 23%
    ),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.14) 0 4px,
      transparent 5px 18px
    ),
    radial-gradient(
      ellipse at 18% 74%,
      var(--hair-shadow) 0 22px,
      transparent 23px
    ),
    radial-gradient(
      ellipse at 84% 74%,
      var(--hair-shadow) 0 20px,
      transparent 21px
    ),
    linear-gradient(180deg, var(--hair-color) 0 42%, var(--hair-shadow) 100%);
}

.hair-spiky-medium .avatar-hair::before {
  left: 18px;
  top: -2px;
  width: 94px;
  height: 62px;
  border-radius: 54% 46% 46% 34%;
  transform: rotate(-9deg);
}

.hair-spiky-medium .avatar-hair::after {
  right: 14px;
  top: 12px;
  width: 76px;
  height: 54px;
  border-radius: 44% 56% 34% 44%;
  transform: rotate(10deg);
}

.hair-spiky-medium .avatar-face::before {
  left: 35%;
  top: -12px;
  width: 92px;
  height: 36px;
  border-radius: 64% 28% 58% 30%;
  transform: rotate(11deg) skewX(-6deg);
  box-shadow:
    inset -6px -7px 11px rgba(63, 32, 28, 0.12),
    16px -5px 0 -10px var(--hair-shadow),
    0 7px 10px rgba(73, 49, 36, 0.09);
}

.hair-spiky-medium .avatar-face::after {
  left: 18%;
  top: -7px;
  width: 62px;
  height: 30px;
  border-radius: 30% 64% 30% 58%;
  transform: rotate(-14deg) skewX(6deg);
  box-shadow:
    inset -4px -5px 9px rgba(63, 32, 28, 0.1),
    -10px -3px 0 -8px var(--hair-shadow),
    0 6px 9px rgba(73, 49, 36, 0.08);
}

/* 삐죽한 머리 3: 얼굴을 열어둔 C컬 레이어드 단발 */
.hair-spiky-long .avatar-hair {
  top: 10px;
  width: 184px;
  height: 214px;
  border-radius: 54% 54% 34px 34px;
  background:
    radial-gradient(
      ellipse at 35% 18%,
      rgba(255, 255, 255, 0.2) 0 20%,
      transparent 21%
    ),
    repeating-linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.13) 0 4px,
      transparent 5px 20px
    ),
    radial-gradient(
      ellipse at 12% 62%,
      var(--hair-shadow) 0 30px,
      transparent 31px
    ),
    radial-gradient(
      ellipse at 88% 62%,
      var(--hair-shadow) 0 30px,
      transparent 31px
    ),
    linear-gradient(180deg, var(--hair-color) 0 34%, var(--hair-shadow) 100%);
  z-index: 0;
}

.hair-spiky-long .avatar-hair::before {
  left: 0;
  top: 64px;
  width: 42px;
  height: 132px;
  border-radius: 26px 20px 34px 40px;
  transform: rotate(8deg);
}

.hair-spiky-long .avatar-hair::after {
  right: 0;
  top: 64px;
  width: 42px;
  height: 132px;
  border-radius: 20px 26px 40px 34px;
  transform: rotate(-8deg);
}

.hair-spiky-long .avatar-face::before {
  left: 34%;
  top: -11px;
  width: 98px;
  height: 42px;
  border-radius: 66% 30% 60% 32%;
  transform: rotate(10deg) skewX(-5deg);
  box-shadow:
    inset -7px -8px 12px rgba(63, 32, 28, 0.12),
    18px -4px 0 -11px var(--hair-shadow),
    0 7px 11px rgba(73, 49, 36, 0.09);
}

.hair-spiky-long .avatar-face::after {
  left: 17%;
  top: -5px;
  width: 68px;
  height: 34px;
  border-radius: 32% 66% 32% 58%;
  transform: rotate(-12deg) skewX(5deg);
  box-shadow:
    inset -5px -6px 10px rgba(63, 32, 28, 0.1),
    -11px -2px 0 -9px var(--hair-shadow),
    0 6px 9px rgba(73, 49, 36, 0.08);
}

.hair-spiky-long .avatar-body {
  z-index: 1;
}

.hair-spiky .avatar-eyes,
.hair-spiky .avatar-nose,
.hair-spiky .avatar-mouth {
  z-index: 4;
}

.hair-spiky .avatar-ear::before {
  content: '';
  position: absolute;
  top: -32px;
  width: 4px;
  height: 54px;
  border-radius: 999px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow:
    inset -1px -4px 5px rgba(63, 32, 28, 0.14),
    0 4px 7px rgba(73, 49, 36, 0.08);
  pointer-events: none;
  z-index: 3;
}

.hair-spiky .avatar-ear.left::before {
  right: -1px;
  transform: rotate(5deg);
}

.hair-spiky .avatar-ear.right::before {
  left: -1px;
  transform: rotate(-5deg);
}

.hair-spiky-short .avatar-ear::before {
  top: -28px;
  width: 3px;
  height: 46px;
}

.hair-spiky-medium .avatar-ear::before {
  top: -33px;
  height: 56px;
}

.hair-spiky-long .avatar-ear::before {
  top: -36px;
  height: 66px;
}

.hair-heavy-bangs .avatar-hair {
  top: 16px;
  width: 166px;
  height: 154px;
  border-radius: 48% 48% 24% 24%;
  background:
    radial-gradient(
      circle at 30% 38%,
      var(--hair-color) 0 48px,
      transparent 49px
    ),
    radial-gradient(
      circle at 68% 38%,
      var(--hair-color) 0 50px,
      transparent 51px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-heavy-bangs .avatar-hair::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 48px;
  width: 126px;
  height: 58px;
  border-radius: 0 0 38px 38px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.22) 0 2px,
      transparent 3px 11px
    ),
    var(--hair-color);
  transform: translateX(-50%);
}

.hair-heavy-bangs .avatar-face::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -4px;
  width: 122px;
  height: 46px;
  border-radius: 34px 34px 28px 28px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.22) 0 2px,
      transparent 3px 10px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow: inset 0 -8px 0 rgba(97, 55, 47, 0.12);
  transform: translateX(-50%);
  z-index: 1;
}

.hair-heavy-bangs .avatar-eyes,
.hair-heavy-bangs .avatar-nose,
.hair-heavy-bangs .avatar-mouth {
  z-index: 2;
}

.option-visual .hair-style-sample {
  top: 4px;
  bottom: auto;
  transform: translateX(-50%) scale(0.48);
  transform-origin: center top;
}

.hair-style-sample .avatar-face {
  top: 82px;
}

.hair-style-sample.hair-slot-only .avatar-face,
.hair-style-sample.hair-slot-only .avatar-neck,
.hair-style-sample.hair-slot-only .avatar-ear,
.hair-style-sample.hair-slot-only .avatar-eyes,
.hair-style-sample.hair-slot-only .avatar-nose,
.hair-style-sample.hair-slot-only .avatar-mouth {
  display: none !important;
}

.hair-style-grid .option-card {
  min-height: 176px;
}

.hair-style-grid .option-visual {
  height: 138px;
}

.avatar-hair-card .option-visual {
  height: 138px;
  overflow: hidden;
}

.hair-image-sample {
  position: relative;
  width: var(--hair-thumb-box-width, 122px);
  height: var(--hair-thumb-box-height, 108px);
  overflow: hidden;
  border-radius: 14px;
  transform: none;
  transform-origin: center center;
  pointer-events: none;
}

.avatar-hair-card .option-visual .hair-image-sample.hair-style-sample {
  top: auto;
  bottom: auto;
  left: auto;
  transform: none;
}

.avatar-hair-thumb-layer {
  position: absolute;
  left: var(--hair-thumb-left, 0);
  top: var(--hair-thumb-top, 0);
  display: block;
  width: var(--hair-thumb-render-size, 1024px);
  height: var(--hair-thumb-render-size, 1024px);
  max-width: none;
  object-fit: contain;
  filter: var(--avatar-hair-filter, none);
}

.avatar-hair-thumb-front {
  z-index: 1;
}

.hair-image-sample[data-has-hair-asset='false'] {
  width: 84px;
  height: 84px;
  transform: none;
  border: 1px dashed rgba(134, 105, 77, 0.32);
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 36% 24%,
      rgba(255, 255, 255, 0.68),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(255, 247, 235, 0.82),
      rgba(222, 198, 169, 0.28)
    );
}

.avatar-hair-placeholder-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgba(115, 88, 68, 0.58);
  font-size: 1.55rem;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.option-visual .hair-style-sample.hair-hidden .avatar-face::before {
  top: -70px;
  width: 150px;
  height: 86px;
}

.option-visual .hair-style-sample.hair-hidden .avatar-face::after {
  top: -12px;
  width: 224px;
  height: 36px;
}

.option-visual .hair-style-sample.hair-hidden-long .avatar-hair {
  background:
    radial-gradient(
      ellipse at 12% 46%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      ellipse at 88% 46%,
      var(--hair-color) 0 34px,
      transparent 35px
    ),
    radial-gradient(
      ellipse at 78% 82%,
      var(--hair-shadow) 0 34px,
      transparent 35px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 32%),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.option-visual .hair-style-sample.hair-hidden-long .avatar-hair::before {
  left: 78%;
  top: 98px;
  width: 44px;
  height: 96px;
  border-radius: 24px 24px 34px 34px;
  transform: translateX(-50%) rotate(-8deg);
}

.option-visual .hair-style-sample.hair-hidden-long .avatar-hair::after {
  left: 76%;
  top: 96px;
  width: 58px;
  height: 16px;
  transform: translateX(-50%) rotate(-8deg);
}

.option-visual .hair-style-sample.hair-hidden-male-short .avatar-face::before {
  top: -62px;
  width: 128px;
  height: 76px;
}

.option-visual .hair-style-sample.hair-hidden-male-short .avatar-face::after {
  top: -10px;
  width: 190px;
  height: 32px;
}

.hair-neat-male-short .avatar-hair {
  top: 48px;
  width: 132px;
  height: 72px;
  border-radius: 42px 42px 18px 18px;
  clip-path: polygon(
    3% 34%,
    20% 10%,
    54% 0,
    86% 12%,
    98% 38%,
    96% 100%,
    7% 100%
  );
  background:
    linear-gradient(
      110deg,
      transparent 0 44%,
      rgba(255, 255, 255, 0.16) 45% 50%,
      transparent 51%
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-neat-male-side .avatar-hair {
  top: 32px;
  width: 146px;
  height: 102px;
  border-radius: 50px 44px 24px 24px;
  clip-path: polygon(0 28%, 74% 0, 100% 22%, 96% 100%, 8% 100%);
  background: linear-gradient(150deg, var(--hair-color), var(--hair-shadow));
}

.hair-neat-bob .avatar-hair {
  top: 26px;
  width: 164px;
  height: 166px;
  border-radius: 48% 48% 20px 20px;
  clip-path: polygon(10% 6%, 90% 6%, 100% 88%, 88% 100%, 12% 100%, 0 88%);
  background:
    linear-gradient(
      90deg,
      transparent 0 48%,
      rgba(255, 255, 255, 0.18) 49% 52%,
      transparent 53%
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-neat-long .avatar-hair {
  top: 10px;
  width: 186px;
  height: 226px;
  border-radius: 52% 52% 32px 32px;
  clip-path: polygon(8% 2%, 92% 2%, 100% 35%, 96% 100%, 4% 100%, 0 35%);
  background:
    radial-gradient(
      ellipse at 34% 18%,
      rgba(255, 255, 255, 0.18) 0 22%,
      transparent 23%
    ),
    linear-gradient(
      105deg,
      transparent 0 62%,
      rgba(255, 255, 255, 0.12) 63% 68%,
      transparent 69%
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  z-index: 0;
}

.hair-neat-bob .avatar-hair::before,
.hair-neat-bob .avatar-hair::after,
.hair-neat-long .avatar-hair::before,
.hair-neat-long .avatar-hair::after {
  content: '';
  position: absolute;
  border-radius: 18px 18px 15px 15px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow: inset 0 -7px 0 rgba(97, 55, 47, 0.08);
}

.hair-neat-bob .avatar-hair::before,
.hair-neat-bob .avatar-hair::after {
  top: 78px;
  width: 24px;
  height: 82px;
}

.hair-neat-bob .avatar-hair::before {
  left: 16px;
  transform: rotate(3deg);
}

.hair-neat-bob .avatar-hair::after {
  right: 16px;
  transform: rotate(-3deg);
}

.hair-neat-long .avatar-hair::before,
.hair-neat-long .avatar-hair::after {
  display: none;
}

.hair-neat-long .avatar-body {
  z-index: 1;
}

.hair-neat-male-short .avatar-face::before,
.hair-neat-bob .avatar-face::before,
.hair-neat-long .avatar-face::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 104px;
  height: 30px;
  border-radius: 26px 26px 20px 20px;
  background:
    linear-gradient(
      105deg,
      transparent 0 40%,
      rgba(255, 255, 255, 0.18) 41% 47%,
      transparent 48%
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow: inset 0 -5px 0 rgba(97, 55, 47, 0.08);
  transform: translateX(-50%);
  z-index: 1;
}

.hair-neat-male-short .avatar-face::after {
  content: '';
  position: absolute;
  left: -4px;
  top: 2px;
  width: 17px;
  height: 46px;
  border-radius: 14px 10px 12px 14px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow:
    107px 0 0 -1px var(--hair-color),
    inset 0 -5px 0 rgba(97, 55, 47, 0.08);
  transform: rotate(2deg);
  z-index: 2;
}

.hair-neat-bob .avatar-face::after,
.hair-neat-long .avatar-face::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 8px;
  width: 16px;
  height: 62px;
  border-radius: 12px 10px 14px 14px;
  background: linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow: 110px 0 0 -1px var(--hair-color);
  transform: rotate(3deg);
  z-index: 2;
}

.hair-neat-long .avatar-face::after {
  top: 6px;
  height: 72px;
  box-shadow: 110px 0 0 -1px var(--hair-color);
}

.hair-neat-male-short .avatar-eyes,
.hair-neat-male-short .avatar-nose,
.hair-neat-male-short .avatar-mouth,
.hair-neat-bob .avatar-eyes,
.hair-neat-bob .avatar-nose,
.hair-neat-bob .avatar-mouth,
.hair-neat-long .avatar-eyes,
.hair-neat-long .avatar-nose,
.hair-neat-long .avatar-mouth {
  z-index: 3;
}

.hair-neat-round-bangs .avatar-hair {
  top: 20px;
  width: 166px;
  height: 156px;
  border-radius: 50% 50% 26% 26%;
  background:
    radial-gradient(
      circle at 26% 38%,
      var(--hair-color) 0 42px,
      transparent 43px
    ),
    radial-gradient(
      circle at 62% 36%,
      var(--hair-color) 0 46px,
      transparent 47px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.hair-neat-round-bangs .avatar-hair::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 54px;
  width: 126px;
  height: 46px;
  border-radius: 0 0 40px 40px;
  background: var(--hair-color);
  transform: translateX(-50%);
}

.hair-neat-soft-wave .avatar-hair {
  top: 12px;
  width: 178px;
  height: 176px;
  border-radius: 50% 50% 34% 34%;
  background:
    radial-gradient(
      circle at 18% 50%,
      var(--hair-color) 0 32px,
      transparent 33px
    ),
    radial-gradient(
      circle at 40% 24%,
      var(--hair-color) 0 38px,
      transparent 39px
    ),
    radial-gradient(
      circle at 66% 28%,
      var(--hair-color) 0 38px,
      transparent 39px
    ),
    radial-gradient(
      circle at 84% 54%,
      var(--hair-color) 0 32px,
      transparent 33px
    ),
    linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
}

.avatar-model .avatar-hair {
  box-shadow: var(--clay-inset-shadow), var(--clay-drop-shadow);
}

.avatar-model .avatar-hair::before,
.avatar-model .avatar-hair::after,
.avatar-model .avatar-face::before,
.avatar-model .avatar-face::after {
  filter: drop-shadow(0 8px 8px rgba(73, 49, 36, 0.12))
    drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.18));
}

.hair-hidden .avatar-face::before,
.hair-hidden .avatar-face::after {
  box-shadow:
    inset 6px 7px 12px rgba(255, 255, 255, 0.36),
    inset -8px -10px 16px rgba(120, 85, 45, 0.18),
    0 10px 16px rgba(71, 48, 37, 0.12);
}

.option-visual .avatar-model,
.option-visual .hair-style-sample {
  filter: drop-shadow(0 12px 12px rgba(71, 48, 37, 0.18))
    drop-shadow(0 -2px 1px rgba(255, 255, 255, 0.16));
}

/* 자연스러운 아바타 비율 수선 레이어
   기존 머리와 옷의 질감은 유지하고, 위치와 크기만 청소년~초기 성인 비율에 맞춥니다. */
.full-body-avatar .avatar-hair {
  top: var(--hair-top);
  transform: translateX(-50%) scale(var(--head-scale));
  transform-origin: center top;
  z-index: 1;
}

.full-body-avatar .avatar-neck {
  z-index: 4;
}

.full-body-avatar .avatar-face {
  top: var(--face-top);
  transform: translateX(-50%) scale(var(--head-scale));
  transform-origin: center top;
  z-index: 5;
}

.full-body-avatar .avatar-face::before,
.full-body-avatar .avatar-face::after {
  z-index: 6;
}

.full-body-avatar.hair-hidden .avatar-hair {
  z-index: 1;
  opacity: 1;
}

.full-body-avatar.hair-hidden .avatar-face::before,
.full-body-avatar.hair-hidden .avatar-face::after {
  z-index: 7;
}

/* 큰 미리보기에서는 머리 본체를 목/몸 뒤로 보내고,
   앞머리와 모자만 얼굴 위에 남겨 목이 가려지지 않게 합니다. */
.full-body-avatar.hair-neat-bob .avatar-hair,
.full-body-avatar.hair-neat-long .avatar-hair {
  z-index: 1;
}

.full-body-avatar.hair-neat-bob .avatar-hair::before,
.full-body-avatar.hair-neat-bob .avatar-hair::after {
  top: 70px;
  height: 60px;
}

.full-body-avatar.hair-neat-bob .avatar-face::after,
.full-body-avatar.hair-neat-long .avatar-face::after {
  top: 5px;
  width: 15px;
  height: 54px;
  z-index: 6;
}

.full-body-avatar.hair-wave-bob .avatar-hair,
.full-body-avatar.hair-wave-long .avatar-hair {
  z-index: 1;
}

.full-body-avatar.hair-wave-bob .avatar-face::after,
.full-body-avatar.hair-wave-long .avatar-face::after {
  top: 5px;
  width: 15px;
  height: 54px;
  z-index: 6;
}

.full-body-avatar.hair-hidden-short .avatar-hair {
  top: 38px;
  width: 150px;
  height: 86px;
}

.full-body-avatar.hair-hidden-medium .avatar-hair {
  top: 34px;
  width: 160px;
  height: 108px;
}

.full-body-avatar.hair-hidden-long .avatar-hair {
  top: 32px;
  width: 168px;
  height: 154px;
}

.full-body-avatar.hair-hidden-male-short .avatar-hair {
  top: 42px;
  width: 136px;
  height: 72px;
  clip-path: none;
}

.full-body-avatar.hair-hidden-short .avatar-hair::before,
.full-body-avatar.hair-hidden-short .avatar-hair::after {
  top: 30px;
  width: 24px;
  height: 58px;
  border-radius: 16px 16px 22px 22px;
}

.full-body-avatar.hair-hidden-medium .avatar-hair::before,
.full-body-avatar.hair-hidden-medium .avatar-hair::after {
  top: 34px;
  width: 25px;
  height: 72px;
  border-radius: 17px 17px 24px 24px;
}

.full-body-avatar.hair-hidden-long .avatar-hair::before {
  left: -4px;
  top: 38px;
  width: 30px;
  height: 92px;
  border-radius: 18px 18px 28px 28px;
  transform: rotate(5deg);
}

.full-body-avatar.hair-hidden-long .avatar-hair::after {
  left: auto;
  right: -4px;
  top: 38px;
  width: 30px;
  height: 92px;
  border-radius: 18px 18px 28px 28px;
  transform: rotate(-5deg);
}

.full-body-avatar.hair-hidden-male-short .avatar-hair::before,
.full-body-avatar.hair-hidden-male-short .avatar-hair::after {
  content: '';
  display: block;
  position: absolute;
  top: 28px;
  width: 20px;
  height: 48px;
  border-radius: 14px 14px 20px 20px;
  background: linear-gradient(180deg, var(--hair-color), var(--hair-shadow));
  box-shadow: inset 0 -6px 0 rgba(96, 54, 44, 0.12);
}

.full-body-avatar.hair-hidden-male-short .avatar-hair::before {
  left: 2px;
  transform: rotate(5deg);
}

.full-body-avatar.hair-hidden-male-short .avatar-hair::after {
  right: 2px;
  transform: rotate(-5deg);
}

.full-body-avatar .avatar-body {
  top: var(--torso-top);
  bottom: auto;
  width: var(--torso-width);
  height: var(--torso-height);
  transform: translateX(-50%);
  transform-origin: center top;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: multiply;
  filter: blur(0.2px);
  pointer-events: none;
}

.full-body-avatar .avatar-body::before,
.full-body-avatar .avatar-body::after {
  height: calc(var(--torso-height) * 0.34);
  bottom: calc(var(--torso-height) * 0.13);
  opacity: 0;
}

.avatar-eyes {
  position: absolute;
  left: 50%;
  top: 46px;
  display: flex;
  gap: 22px;
  transform: translateX(-50%);
}

.avatar-eye {
  position: relative;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #22252b;
}

.avatar-eye::before {
  content: '';
  position: absolute;
  display: none;
}

.avatar-eye::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.eyes-big .avatar-eye {
  width: 25px;
  height: 25px;
}

.eyes-small .avatar-eye {
  width: 11px;
  height: 11px;
}

.eyes-calm .avatar-eye {
  height: 11px;
  border-radius: 999px;
}

.eyes-black .avatar-eye::after {
  display: none;
}

.eyes-sample {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  height: 72px;
}

.eyes-sample .avatar-eyes {
  position: static;
  gap: 28px;
  transform: none;
}

.eyes-sample .avatar-eye {
  width: 22px;
  height: 22px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
}

.eyes-sample.eyes-big .avatar-eye {
  width: 34px;
  height: 34px;
}

.eyes-sample.eyes-small .avatar-eye {
  width: 16px;
  height: 16px;
}

.eyes-sample.eyes-calm .avatar-eye {
  height: 14px;
}

.eyes-sparkle .avatar-eye,
.eyes-sample.eyes-sparkle .avatar-eye {
  width: 28px;
  height: 28px;
  background:
    radial-gradient(circle at 33% 30%, #ffffff 0 5px, transparent 5.5px),
    radial-gradient(
      circle at 64% 66%,
      rgba(255, 255, 255, 0.92) 0 3px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 50% 52%,
      #6fa6ff 0 36%,
      #3b4bd6 40% 70%,
      #22252b 72%
    );
}

.eyes-sparkle .avatar-eye::after {
  top: 8px;
  left: 18px;
  width: 8px;
  height: 8px;
  background: #ffffff;
  clip-path: polygon(
    50% 0,
    62% 38%,
    100% 50%,
    62% 62%,
    50% 100%,
    38% 62%,
    0 50%,
    38% 38%
  );
}

.eyes-pastel .avatar-eye,
.eyes-sample.eyes-pastel .avatar-eye {
  width: 24px;
  height: 24px;
  background:
    radial-gradient(
      circle at 36% 32%,
      rgba(255, 255, 255, 0.88) 0 4px,
      transparent 4.5px
    ),
    radial-gradient(
      circle at 50% 56%,
      #9fd4dc 0 38%,
      #c9b4ea 40% 72%,
      #6c7894 74%
    );
}

.eyes-curious .avatar-eyes {
  gap: 18px;
}

.eyes-curious .avatar-eye,
.eyes-sample.eyes-curious .avatar-eye {
  width: 28px;
  height: 22px;
  border: 3px solid rgba(48, 58, 66, 0.22);
  background: #ffffff;
}

.eyes-curious .avatar-eye::before {
  display: block;
  top: 3px;
  right: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2b3038;
}

.eyes-curious .avatar-eye::after {
  top: 5px;
  left: 16px;
  width: 4px;
  height: 4px;
}

.eyes-half .avatar-eye,
.eyes-sample.eyes-half .avatar-eye {
  width: 28px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #675f63 0 38%, #2c2a2f 40% 100%);
}

.eyes-half .avatar-eye::after {
  display: none;
}

.eyes-watery .avatar-eye,
.eyes-sample.eyes-watery .avatar-eye {
  width: 27px;
  height: 30px;
  background:
    radial-gradient(circle at 35% 28%, #ffffff 0 5px, transparent 5.5px),
    radial-gradient(
      circle at 64% 70%,
      rgba(255, 255, 255, 0.78) 0 4px,
      transparent 4.5px
    ),
    radial-gradient(
      circle at 50% 50%,
      #6ec3ff 0 35%,
      #3d7dd9 38% 70%,
      #1c2435 72%
    );
}

.eyes-watery .avatar-eye::before {
  display: block;
  right: -3px;
  bottom: -5px;
  width: 8px;
  height: 11px;
  border-radius: 50% 50% 60% 60%;
  background: rgba(148, 220, 255, 0.82);
  transform: rotate(-18deg);
}

.eyes-intense .avatar-eyes {
  gap: 20px;
}

.eyes-intense .avatar-eye,
.eyes-sample.eyes-intense .avatar-eye {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(31, 37, 43, 0.2);
  background: radial-gradient(
    circle at 50% 50%,
    #111317 0 42%,
    #2d3038 44% 72%,
    #0d0f12 74%
  );
  box-shadow: 0 0 0 2px rgba(31, 37, 43, 0.12);
}

.eyes-intense .avatar-eye::after {
  top: 5px;
  left: 6px;
  width: 5px;
  height: 5px;
}

.eyes-closed-smile .avatar-eyes {
  gap: 20px;
}

.eyes-closed-smile .avatar-eye,
.eyes-sample.eyes-closed-smile .avatar-eye {
  width: 30px;
  height: 16px;
  border-radius: 0 0 999px 999px;
  border-bottom: 5px solid #2d2a2f;
  background: transparent;
  box-shadow: none;
}

.eyes-closed-smile .avatar-eye::after {
  display: none;
}

.eyes-sharp .avatar-eyes,
.eyes-sample.eyes-sharp .avatar-eyes {
  gap: 18px;
}

.eyes-sharp .avatar-eye,
.eyes-sample.eyes-sharp .avatar-eye {
  width: 31px;
  height: 13px;
  border-radius: 999px 999px 6px 6px;
  background:
    radial-gradient(circle at 68% 58%, #20242b 0 4px, transparent 4.5px),
    linear-gradient(180deg, #ffffff 0 52%, #e9eef4 53% 100%);
  border-top: 4px solid #20242b;
  box-shadow:
    inset 0 -2px 3px rgba(28, 31, 38, 0.12),
    0 4px 0 rgba(0, 0, 0, 0.08);
}

.eyes-sharp .avatar-eye:first-child,
.eyes-sample.eyes-sharp .avatar-eye:first-child {
  transform: rotate(8deg);
}

.eyes-sharp .avatar-eye:last-child,
.eyes-sample.eyes-sharp .avatar-eye:last-child {
  transform: rotate(-8deg);
}

.eyes-sharp .avatar-eye::after {
  display: none;
}

.eyes-tired .avatar-eyes,
.eyes-sample.eyes-tired .avatar-eyes {
  gap: 21px;
  transform: translateX(-50%) translateY(4px);
}

.eyes-sample.eyes-tired .avatar-eyes {
  transform: translateY(4px);
}

.eyes-tired .avatar-eye,
.eyes-sample.eyes-tired .avatar-eye {
  width: 30px;
  height: 15px;
  border-radius: 0 0 999px 999px;
  border-bottom: 5px solid #3a3439;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0 40%,
    transparent 41%
  );
  box-shadow: none;
  transform: rotate(4deg);
}

.eyes-tired .avatar-eye:last-child,
.eyes-sample.eyes-tired .avatar-eye:last-child {
  transform: rotate(-4deg);
}

.eyes-tired .avatar-eye::after {
  display: none;
}

.eyes-asymmetric .avatar-eyes,
.eyes-sample.eyes-asymmetric .avatar-eyes {
  gap: 18px;
}

.eyes-asymmetric .avatar-eye:first-child,
.eyes-sample.eyes-asymmetric .avatar-eye:first-child {
  width: 28px;
  height: 14px;
  border-radius: 0 0 999px 999px;
  border-bottom: 5px solid #2d2a2f;
  background: transparent;
  box-shadow: none;
  transform: rotate(9deg);
}

.eyes-asymmetric .avatar-eye:first-child::after {
  display: none;
}

.eyes-asymmetric .avatar-eye:last-child,
.eyes-sample.eyes-asymmetric .avatar-eye:last-child {
  width: 25px;
  height: 25px;
  border: 3px solid rgba(48, 58, 66, 0.2);
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(255, 255, 255, 0.9) 0 4px,
      transparent 4.5px
    ),
    radial-gradient(circle at 56% 58%, #2a3038 0 38%, #ffffff 39% 100%);
  transform: rotate(-4deg);
}

.eyes-asymmetric .avatar-eye:last-child::after {
  display: none;
}

.eyes-hidden .avatar-eyes {
  position: absolute;
  left: 50%;
  top: 37px;
  gap: 7px;
  transform: translateX(-50%);
}

.eyes-sample.eyes-hidden .avatar-eyes {
  position: relative;
  left: auto;
  top: auto;
  gap: 7px;
  justify-content: center;
  align-items: center;
  transform: none;
}

.eyes-hidden .avatar-eyes::before,
.eyes-sample.eyes-hidden .avatar-eyes::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10px;
  width: 11px;
  height: 7px;
  border-radius: 999px;
  border-top: 3px solid rgba(48, 58, 66, 0.18);
  background: transparent;
  transform: translateX(-50%);
  z-index: 3;
}

.eyes-hidden .avatar-eye,
.eyes-sample.eyes-hidden .avatar-eye {
  width: 30px;
  height: 22px;
  border-radius: 10px 10px 13px 13px;
  border: 3px solid rgba(48, 58, 66, 0.18);
  background:
    radial-gradient(circle at 52% 58%, #2b3038 0 4px, transparent 4.5px),
    radial-gradient(
      circle at 34% 26%,
      rgba(255, 255, 255, 0.9) 0 4px,
      transparent 4.5px
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.78),
      rgba(151, 211, 232, 0.28)
    );
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.52),
    inset -3px -3px 5px rgba(37, 62, 73, 0.12),
    0 4px 0 rgba(0, 0, 0, 0.12);
}

.eyes-hidden .avatar-eye::before,
.eyes-sample.eyes-hidden .avatar-eye::before {
  display: block;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 10px;
  border-radius: 50%;
  background: #252b32;
  transform: translate(-50%, -42%);
}

.eyes-hidden .avatar-eye::after,
.eyes-sample.eyes-hidden .avatar-eye::after {
  display: block;
  top: 4px;
  left: 6px;
  width: 6px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.84);
}

.expression-sample {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(
      circle at 36% 30%,
      rgba(255, 255, 255, 0.7) 0 10px,
      transparent 11px
    ),
    linear-gradient(145deg, #ffe3d5, #f2c3ae);
  box-shadow:
    inset 5px 6px 12px rgba(255, 255, 255, 0.42),
    inset -6px -8px 12px rgba(142, 83, 68, 0.14),
    0 10px 22px rgba(87, 62, 48, 0.12);
}

.option-card.avatar-expression-card {
  min-height: 184px;
}

.avatar-expression-card .option-visual {
  height: 126px;
  background:
    radial-gradient(
      circle at 46% 16%,
      rgba(255, 255, 255, 0.86),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255, 251, 244, 0.66),
      rgba(235, 214, 190, 0.22)
    );
}

.expression-sample.expression-image-sample {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 118px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
}

.expression-thumbnail-image {
  display: block;
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(78, 55, 38, 0.14))
    drop-shadow(0 -1px 1px rgba(255, 255, 255, 0.16));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.expression-sample-brows,
.expression-sample-eyes,
.expression-sample-mouth {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.expression-sample-brows {
  top: 31px;
  width: 48px;
  height: 10px;
}

.expression-sample-brows::before,
.expression-sample-brows::after {
  content: '';
  position: absolute;
  top: 0;
  width: 18px;
  height: 6px;
  border-top: 3px solid rgba(71, 48, 41, 0.74);
  border-radius: 999px 999px 0 0;
}

.expression-sample-brows::before {
  left: 0;
}

.expression-sample-brows::after {
  right: 0;
}

.expression-sample-eyes {
  top: 43px;
  width: 48px;
  height: 12px;
}

.expression-sample-eyes::before,
.expression-sample-eyes::after {
  content: '';
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(255, 255, 255, 0.88) 0 3px,
      transparent 3.5px
    ),
    #2a2b31;
}

.expression-sample-eyes::before {
  left: 4px;
}

.expression-sample-eyes::after {
  right: 4px;
}

.expression-sample-mouth {
  top: 66px;
  width: 30px;
  height: 14px;
  border-bottom: 4px solid rgba(163, 76, 84, 0.76);
  border-radius: 0 0 999px 999px;
}

.expression-thoughtful .expression-sample-brows::before {
  transform: rotate(14deg);
}

.expression-thoughtful .expression-sample-brows::after {
  transform: rotate(-14deg);
}

.expression-thoughtful .expression-sample-mouth {
  width: 24px;
  height: 8px;
  border-bottom: 0;
  border-top: 4px solid rgba(129, 75, 82, 0.72);
  border-radius: 999px 999px 0 0;
}

.expression-relieved .expression-sample-eyes::before,
.expression-relieved .expression-sample-eyes::after {
  height: 8px;
  border-radius: 0 0 999px 999px;
  border-bottom: 4px solid #2f3036;
  background: transparent;
}

.expression-relieved .expression-sample-mouth {
  width: 34px;
  height: 16px;
  border-bottom-width: 5px;
}

.avatar-nose {
  position: absolute;
  left: 50%;
  top: 66px;
  width: 14px;
  height: 22px;
  border-radius: 50%;
  background: rgba(203, 113, 95, 0.65);
  transform: translateX(-50%);
}

.avatar-mouth {
  position: absolute;
  left: 50%;
  top: 92px;
  width: 40px;
  height: 20px;
  border-bottom: 5px solid rgba(176, 87, 92, 0.62);
  border-radius: 0 0 36px 36px;
  transform: translateX(-50%);
}

.swatch-card .option-visual {
  height: 82px;
}

.swatch-card .option-card {
  min-height: 112px;
}

.floor-editor-sections,
.face-editor-sections,
.hair-editor-sections,
.roof-editor-sections {
  display: grid;
  gap: 20px;
}

.outfit-mix-layout {
  display: block;
}

.outfit-mix-card {
  --active-clothing-color: var(--outfit-color, #d2b48c);
  min-height: 300px;
  padding: clamp(16px, 2.5vw, 24px);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 22% 12%,
      rgba(255, 255, 255, 0.92),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.88),
      rgba(248, 239, 225, 0.72)
    );
  box-shadow:
    22px 26px 52px rgba(127, 88, 58, 0.16),
    -12px -12px 32px rgba(255, 255, 255, 0.78),
    inset 5px 6px 12px rgba(255, 255, 255, 0.72),
    inset -9px -11px 22px rgba(126, 91, 61, 0.08);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 26px);
  align-items: stretch;
}

.outfit-mix-preview {
  position: relative;
  min-height: 350px;
  overflow: hidden;
  border-radius: 28px;
  display: grid;
  place-items: end center;
  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(255, 255, 255, 0.75) 0 22%,
      transparent 44%
    ),
    radial-gradient(
      circle at 50% 96%,
      color-mix(in srgb, var(--active-clothing-color) 22%, transparent),
      transparent 44%
    ),
    linear-gradient(180deg, #ecfff6 0%, #f8f3e7 100%);
  box-shadow:
    inset 7px 8px 18px rgba(255, 255, 255, 0.72),
    inset -10px -13px 26px rgba(84, 90, 72, 0.1),
    0 16px 28px rgba(92, 68, 48, 0.1);
}

.outfit-mix-preview::before {
  content: '';
  position: absolute;
  inset: auto 18% 18px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(
    in srgb,
    var(--active-clothing-color) 28%,
    rgba(122, 99, 74, 0.16)
  );
  filter: blur(9px);
}

.outfit-mix-preview .avatar-model {
  margin-bottom: 16px;
  transform: scale(0.68);
  transform-origin: center bottom;
}

.outfit-mix-controls {
  display: grid;
  gap: 18px;
  align-content: center;
}

.outfit-mix-heading {
  display: grid;
  gap: 5px;
}

.outfit-mix-heading p,
.outfit-mix-subtitle {
  margin: 0;
  color: var(--soft-color);
  font-size: 0.92rem;
  font-weight: 900;
}

.outfit-mix-heading h3 {
  margin: 0;
  color: var(--text-color);
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  font-weight: 950;
}

.outfit-mix-subtitle {
  margin-bottom: 10px;
}

.outfit-mix-style-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 12px;
}

.outfit-mix-style-button {
  min-width: 0;
  min-height: 176px;
  padding: 12px 9px 10px;
  border: 0;
  border-radius: 24px;
  color: var(--text-color);
  background:
    radial-gradient(
      circle at 32% 18%,
      rgba(255, 255, 255, 0.92),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--active-clothing-color) 12%, #ffffff),
      rgba(255, 255, 255, 0.74)
    );
  box-shadow:
    10px 14px 24px rgba(103, 78, 57, 0.12),
    -6px -6px 18px rgba(255, 255, 255, 0.7),
    inset 4px 5px 10px rgba(255, 255, 255, 0.62),
    inset -6px -8px 13px rgba(91, 62, 43, 0.06);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.outfit-mix-style-button:hover {
  transform: translateY(-3px);
}

.outfit-mix-style-button.active {
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--active-clothing-color) 34%, transparent),
    0 18px 30px
      color-mix(
        in srgb,
        var(--active-clothing-color) 24%,
        rgba(58, 49, 40, 0.1)
      ),
    inset 5px 6px 12px rgba(255, 255, 255, 0.74);
}

.outfit-mix-style-visual {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
}

.outfit-mix-style-visual .outfit-style-sample {
  width: 94px;
  height: 94px;
}

.outfit-asset-sample {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.88),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(255, 252, 245, 0.92),
      rgba(239, 229, 213, 0.76)
    );
}

.outfit-asset-thumb-image {
  position: absolute;
  left: 50%;
  top: -132px;
  width: 270px;
  height: 270px;
  max-width: none;
  object-fit: contain;
  transform: translateX(-50%);
  filter: var(--avatar-outfit-filter, none);
  pointer-events: none;
  user-select: none;
}

.outfit-mix-style-label {
  display: block;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
  word-break: keep-all;
}

.outfit-mix-style-description {
  display: block;
  width: min(100%, 12rem);
  color: color-mix(in srgb, var(--text-color) 72%, var(--soft-color));
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.25;
  word-break: keep-all;
}

.outfit-mix-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.outfit-mix-swatch {
  min-width: 82px;
  min-height: 70px;
  padding: 8px 8px 7px;
  border: 0;
  border-radius: 22px;
  color: var(--text-color);
  background:
    radial-gradient(
      circle at 30% 18%,
      rgba(255, 255, 255, 0.84),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.88),
      color-mix(in srgb, var(--swatch-color) 16%, #ffffff)
    );
  box-shadow:
    8px 10px 18px rgba(100, 76, 58, 0.11),
    -5px -5px 16px rgba(255, 255, 255, 0.68),
    inset 3px 4px 8px rgba(255, 255, 255, 0.62),
    inset -5px -6px 10px rgba(90, 68, 52, 0.06);
  display: grid;
  justify-items: center;
  gap: 5px;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.outfit-mix-swatch:hover {
  transform: translateY(-3px);
}

.outfit-mix-swatch.active {
  transform: translateY(-4px) scale(1.04);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--swatch-color) 32%, transparent),
    0 14px 24px
      color-mix(in srgb, var(--swatch-color) 23%, rgba(56, 48, 40, 0.1)),
    inset 4px 5px 10px rgba(255, 255, 255, 0.74);
}

.outfit-mix-swatch-dot {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  box-shadow:
    inset 5px 6px 10px rgba(255, 255, 255, 0.36),
    inset -5px -6px 11px rgba(50, 39, 33, 0.14),
    0 7px 12px rgba(76, 58, 43, 0.14);
}

.outfit-mix-swatch-label {
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
  word-break: keep-all;
}

.inline-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
}

.color-only-card {
  min-height: 94px;
}

.color-only-card .option-visual {
  height: 68px;
}

.sub-panel-title {
  margin: 0 0 -4px;
  color: var(--text-color);
  font-size: clamp(1.7rem, 7vw, 2.45rem);
  font-weight: 950;
}

.roof-story-guide {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(122, 86, 57, 0.14);
  border-radius: 16px;
  color: var(--soft-color);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.82),
    rgba(250, 239, 222, 0.64)
  );
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.floor-style-grid,
.face-shape-grid,
.hair-style-grid,
.roof-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.skin-swatch {
  width: 58px;
  height: 58px;
  border-radius: 18px;
}

.roof-swatch {
  border-radius: 14px 14px 6px 6px;
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}

.house-swatch {
  border: 4px solid rgba(70, 48, 40, 0.18);
  border-radius: 12px;
  box-shadow: inset 8px 0 0 rgba(255, 255, 255, 0.24);
}

.door-swatch {
  width: 48px;
  height: 62px;
  border: 4px solid rgba(55, 38, 32, 0.38);
  border-radius: 24px 24px 7px 7px;
  box-shadow:
    inset 7px 0 0 rgba(255, 255, 255, 0.24),
    0 5px 0 rgba(31, 27, 25, 0.12);
}

/* 질문 화면 */
.question-view {
  display: grid;
  gap: 14px;
}

.summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.summary-chip {
  padding: 8px 10px;
  border: 1px solid var(--strong-line);
  border-radius: 999px;
  color: var(--button-text);
  background: var(--button-bg);
  font-size: 0.84rem;
}

.reason-input {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  padding: 13px;
  border: 2px solid var(--strong-line);
  border-radius: 14px;
  color: var(--text-color);
  background: var(--card-bg);
  outline: none;
}

.reason-input:focus {
  border-color: var(--accent-color);
}

.question-actions {
  display: flex;
  gap: 10px;
}

.primary-action,
.soft-action {
  min-height: 48px;
  padding: 11px 16px;
  border-radius: 14px;
  font-weight: 900;
}

.primary-action {
  border: 0;
  color: #082130;
  background: var(--accent-color);
}

.soft-action {
  border: 2px solid var(--strong-line);
  color: var(--button-text);
  background: var(--button-bg);
}

.result-box {
  padding: 16px;
  border: 2px solid var(--strong-line);
  border-radius: 18px;
  color: var(--text-color);
  background: var(--card-bg);
  line-height: 1.6;
}

.result-box:empty {
  display: none;
}

.result-box h3 {
  margin: 0 0 8px;
  color: var(--text-color);
}

.result-box p {
  margin: 0 0 10px;
}

.result-box ul {
  margin: 8px 0 12px;
  padding-left: 20px;
}

.result-box li {
  margin-bottom: 7px;
}

.counseling-card {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--accent-soft);
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--accent-soft), rgba(240, 191, 216, 0.1)),
    var(--card-bg);
}

.placement-note {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(255, 188, 94, 0.32);
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 188, 94, 0.12),
      rgba(103, 199, 255, 0.08)
    ),
    var(--card-bg);
}

.ai-message {
  padding: 12px;
  border-radius: 12px;
  color: var(--text-color);
  background: var(--button-bg);
}

/* 질문 단계: 3단계 감성 플로우 */
.emotional-flow {
  gap: 16px;
  animation: softFlowIn 0.35s ease both;
}

@keyframes softFlowIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flow-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.flow-progress span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--strong-line);
  border-radius: 999px;
  color: var(--muted-color);
  background: var(--button-bg);
  font-size: 0.86rem;
  font-weight: 900;
}

.flow-progress span.active {
  color: #11312d;
  border-color: rgba(90, 185, 146, 0.42);
  background: linear-gradient(135deg, #aaf0c8, #9ee1ff 58%, #ffd8e7);
  box-shadow:
    0 10px 20px rgba(84, 165, 150, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.64);
}

.garden-flow-card,
.storybook-result,
.detail-result-hero,
.gentle-question-box {
  border: 1px solid rgba(195, 164, 127, 0.34);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 14% 12%,
      rgba(255, 255, 255, 0.72),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255, 251, 241, 0.92),
      rgba(235, 249, 236, 0.78)
    );
  box-shadow:
    16px 20px 42px rgba(105, 82, 53, 0.12),
    inset 4px 5px 12px rgba(255, 255, 255, 0.68),
    inset -8px -10px 18px rgba(153, 116, 84, 0.08);
}

body[data-theme='dark'] .garden-flow-card,
body[data-theme='dark'] .storybook-result,
body[data-theme='dark'] .detail-result-hero,
body[data-theme='dark'] .gentle-question-box {
  background:
    radial-gradient(
      circle at 14% 12%,
      rgba(255, 255, 255, 0.08),
      transparent 34%
    ),
    linear-gradient(145deg, #18353a, #142b30);
  border-color: rgba(119, 201, 179, 0.24);
}

.garden-flow-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.flow-copy {
  display: grid;
  gap: 6px;
}

.flow-copy h3,
.speech-bubble h3,
.detail-result-hero h3,
.gentle-question-box h3,
.empathy-card h3 {
  margin: 0;
  color: var(--text-color);
}

.flow-copy p,
.detail-result-hero p,
.gentle-question-box p,
.empathy-card p {
  margin: 0;
  color: var(--muted-color);
  line-height: 1.65;
}

.flow-kicker {
  color: var(--accent-color) !important;
  font-size: 0.86rem;
  font-weight: 900;
}

.flow-garden-canvas,
.read-only-garden-inner {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 2px solid rgba(134, 196, 171, 0.36);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 232, 185, 0.58),
      transparent 22%
    ),
    radial-gradient(
      circle at 78% 20%,
      rgba(209, 237, 255, 0.78),
      transparent 28%
    ),
    linear-gradient(180deg, #ddf7ff 0%, #fff7df 60%, #aee7b5 61%, #6ccf91 100%);
  box-shadow:
    inset 0 10px 24px rgba(255, 255, 255, 0.48),
    inset 0 -18px 28px rgba(56, 139, 92, 0.18);
  touch-action: none;
}

body[data-theme='dark'] .flow-garden-canvas,
body[data-theme='dark'] .read-only-garden-inner {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 232, 185, 0.2),
      transparent 22%
    ),
    linear-gradient(180deg, #20404b 0%, #263f45 60%, #315f55 61%, #254f48 100%);
}

.flow-garden-canvas::before,
.read-only-garden-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 28% 100%,
      rgba(73, 166, 107, 0.28),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 74% 92%,
      rgba(255, 255, 255, 0.22),
      transparent 28%
    );
  pointer-events: none;
  z-index: 0;
}

.garden-weather-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.flow-garden-canvas.garden-weather-surface::after,
.read-only-garden-inner.garden-weather-surface::after {
  inset: 0 0 32% 0;
  overflow: hidden;
  border-radius: inherit;
}

.garden-weather-surface.weather-sunny-warm {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 188, 106, 0.86) 0 38px,
      rgba(255, 218, 154, 0.42) 39px 78px,
      transparent 80px
    ),
    linear-gradient(180deg, #bfefff 0%, #ddf6ff 60%, #aee7b5 61%, #6ccf91 100%);
}

.garden-weather-surface.weather-sunny-warm::after {
  background: radial-gradient(
    circle at 18% 18%,
    rgba(255, 218, 154, 0.95) 0 36px,
    rgba(255, 185, 111, 0.78) 37px 58px,
    transparent 60px
  );
  filter: drop-shadow(0 0 28px rgba(255, 186, 92, 0.55));
}

.garden-weather-surface.weather-clear-blue {
  background: linear-gradient(
    180deg,
    #aee9ff 0%,
    #d8f6ff 60%,
    #aee7b5 61%,
    #6ccf91 100%
  );
}

.garden-weather-surface.weather-fluffy-cloud {
  background: linear-gradient(
    180deg,
    #0a88c8 0%,
    #2fb5ea 58%,
    #aee7b5 59%,
    #6ccf91 100%
  );
}

.garden-weather-surface.weather-fluffy-cloud::after {
  background:
    radial-gradient(
      ellipse at 18% 24%,
      rgba(255, 255, 255, 0.96) 0 34px,
      rgba(229, 241, 249, 0.86) 35px 56px,
      transparent 58px
    ),
    radial-gradient(
      ellipse at 32% 18%,
      rgba(255, 255, 255, 0.98) 0 46px,
      rgba(232, 243, 250, 0.9) 47px 70px,
      transparent 72px
    ),
    radial-gradient(
      ellipse at 52% 30%,
      rgba(255, 255, 255, 0.92) 0 36px,
      rgba(222, 236, 246, 0.78) 37px 58px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at 72% 20%,
      rgba(255, 255, 255, 0.95) 0 42px,
      rgba(225, 239, 248, 0.84) 43px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 88% 32%,
      rgba(255, 255, 255, 0.88) 0 28px,
      rgba(220, 234, 245, 0.68) 29px 48px,
      transparent 50px
    );
  filter: drop-shadow(0 12px 12px rgba(26, 91, 134, 0.18));
  opacity: 0.96;
}

.garden-weather-surface.weather-gray-cloud {
  background: linear-gradient(
    180deg,
    #eaf1f3 0%,
    #d4dee4 60%,
    #aee7b5 61%,
    #6ccf91 100%
  );
}

.garden-weather-surface.weather-gray-cloud::after {
  background:
    radial-gradient(
      ellipse at 10% 28%,
      rgba(240, 244, 246, 0.9) 0 42px,
      rgba(205, 216, 223, 0.86) 43px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 28% 22%,
      rgba(251, 253, 254, 0.92) 0 58px,
      rgba(218, 228, 234, 0.88) 59px 88px,
      transparent 90px
    ),
    radial-gradient(
      ellipse at 48% 34%,
      rgba(226, 234, 238, 0.86) 0 48px,
      rgba(188, 201, 211, 0.8) 49px 76px,
      transparent 78px
    ),
    radial-gradient(
      ellipse at 70% 24%,
      rgba(248, 251, 252, 0.92) 0 56px,
      rgba(212, 222, 229, 0.84) 57px 86px,
      transparent 88px
    ),
    radial-gradient(
      ellipse at 91% 32%,
      rgba(226, 234, 238, 0.78) 0 38px,
      rgba(190, 202, 212, 0.68) 39px 62px,
      transparent 64px
    );
  filter: drop-shadow(0 12px 12px rgba(117, 136, 148, 0.18));
}

.garden-weather-surface.weather-rainy {
  background:
    radial-gradient(
      circle at 20% 14%,
      rgba(132, 137, 153, 0.22) 0 52px,
      transparent 54px
    ),
    linear-gradient(180deg, #4b4f5b 0%, #686c78 58%, #7bbb92 59%, #57956d 100%);
}

.garden-weather-surface.weather-rainy::after {
  background:
    radial-gradient(
      ellipse at 12% 24%,
      rgba(221, 222, 228, 0.86) 0 34px,
      rgba(148, 151, 164, 0.82) 35px 54px,
      transparent 56px
    ),
    radial-gradient(
      ellipse at 36% 18%,
      rgba(239, 240, 244, 0.9) 0 48px,
      rgba(166, 169, 181, 0.86) 49px 72px,
      transparent 74px
    ),
    radial-gradient(
      ellipse at 66% 28%,
      rgba(228, 229, 236, 0.86) 0 44px,
      rgba(150, 153, 168, 0.82) 45px 70px,
      transparent 72px
    ),
    radial-gradient(
      ellipse at 90% 22%,
      rgba(207, 210, 218, 0.78) 0 30px,
      rgba(130, 134, 150, 0.7) 31px 50px,
      transparent 52px
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 14px,
      rgba(248, 251, 255, 0.72) 14px 16px,
      transparent 16px 28px
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 28px,
      rgba(171, 210, 229, 0.48) 28px 29px,
      transparent 29px 45px
    );
  background-size:
    auto,
    auto,
    auto,
    auto,
    24px 52px,
    38px 66px;
  filter: drop-shadow(0 8px 8px rgba(38, 41, 53, 0.22));
}

.garden-weather-surface.weather-storm {
  background:
    radial-gradient(
      circle at 24% 18%,
      rgba(40, 73, 129, 0.82),
      transparent 42%
    ),
    linear-gradient(180deg, #061334 0%, #14274d 58%, #314e57 59%, #223f3c 100%);
}

.garden-weather-surface.weather-storm::after {
  background:
    linear-gradient(180deg, #ffffff, #fff18f 42%, #ffe146) 58% 12% / 74px 136px
      no-repeat,
    repeating-linear-gradient(
      112deg,
      rgba(172, 214, 255, 0.62) 0 2px,
      transparent 2px 16px
    ),
    radial-gradient(
      circle at 14% 22%,
      rgba(37, 61, 105, 0.75) 0 48px,
      transparent 50px
    ),
    radial-gradient(
      circle at 82% 36%,
      rgba(44, 70, 112, 0.55) 0 56px,
      transparent 58px
    );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 12px rgba(255, 241, 130, 0.58));
}

.garden-weather-surface.weather-snowy-blue {
  background: linear-gradient(
    180deg,
    #aee9ff 0%,
    #d8f6ff 60%,
    #dcf7d8 61%,
    #fbffff 100%
  );
}

.garden-weather-surface.weather-snowy-blue::after {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(220, 244, 255, 0.95) 0 2px, transparent 2.5px);
  background-position:
    24px 18px,
    88px 52px,
    150px 28px;
  background-size:
    96px 82px,
    128px 110px,
    164px 136px;
  opacity: 0.95;
}

.garden-arrange-item {
  --garden-x: 50%;
  --garden-y: 60%;
  --garden-scale: 0.8;
  position: absolute;
  left: var(--garden-x);
  top: var(--garden-y);
  width: 230px;
  height: 300px;
  transform: translate(-50%, -72%) scale(var(--garden-scale));
  transform-origin: center bottom;
  cursor: grab;
  user-select: none;
  z-index: 2;
  animation: objectBloom 0.55s ease both;
}

.garden-arrange-item:active {
  cursor: grabbing;
}

.garden-arrange-item.selected {
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0))
    drop-shadow(0 12px 18px rgba(69, 162, 143, 0.24));
}

.garden-arrange-item.selected::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(63, 174, 148, 0.72);
  border-radius: 26px;
  pointer-events: none;
}

.garden-arrange-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  pointer-events: none;
}

.garden-arrange-visual .tree-model {
  transform: scale(0.98);
  transform-origin: center bottom;
}

.garden-house .garden-arrange-visual .house-model {
  transform: scale(0.82);
  transform-origin: center bottom;
}

.garden-house-composite .house-model {
  --house-preview-shadow: drop-shadow(0 0.35rem 0.18rem rgba(59, 45, 31, 0.16));
  --roof-preview-shadow: drop-shadow(0 0.16rem 0.06rem rgba(72, 39, 16, 0.24))
    drop-shadow(0 0.44rem 0.18rem rgba(66, 49, 31, 0.16));
  transform-origin: center bottom !important;
}

.garden-house-composite .house-model .house-roof {
  filter: var(--roof-preview-shadow) !important;
  transform-origin: center bottom !important;
}

.garden-house-composite .house-model.floor-balanced {
  height: 16.9rem !important;
}

.garden-house-composite .house-model.floor-balanced::before {
  bottom: 0.95rem !important;
}

.garden-house-composite .house-model.floor-balanced .house-roof {
  bottom: 10.18rem !important;
  z-index: 8 !important;
}

.garden-house-composite .house-model.floor-balanced.roof-flat .house-roof {
  bottom: 9.18rem !important;
  width: 20.75rem !important;
  height: 6.95rem !important;
}

.garden-house-composite
  .house-model.floor-balanced.roof-tall-triangle
  .house-roof {
  bottom: 9.08rem !important;
  width: 21.15rem !important;
  height: 10.1rem !important;
}

.garden-house-composite .house-model.floor-balanced.roof-moss-dome .house-roof {
  bottom: 9.1rem !important;
  width: 20.35rem !important;
  height: 10.35rem !important;
  transform: translateX(-50%) translateY(0.2cm) scale(1.1) !important;
}

.garden-house-composite
  .house-model.floor-balanced.roof-attic-window
  .house-roof {
  bottom: 9.14rem !important;
  width: 20.35rem !important;
  height: 7.55rem !important;
}

.garden-house-composite
  .house-model.floor-balanced.roof-asymmetric
  .house-roof {
  bottom: 9.1rem !important;
  width: 20.75rem !important;
  height: 9.25rem !important;
  transform: translateX(-50%) scale(1.1) !important;
}

.garden-avatar .garden-arrange-visual .avatar-model {
  transform: scale(0.62);
  transform-origin: center bottom;
}

.garden-arrange-visual .placed-window,
.garden-arrange-visual .placed-door {
  pointer-events: none;
}

.garden-object-toolbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.garden-object-button {
  min-height: 42px;
  border: 2px solid var(--strong-line);
  border-radius: 14px;
  color: var(--button-text);
  background: var(--button-bg);
  font-weight: 900;
}

.garden-object-button.active {
  border-color: rgba(72, 180, 144, 0.62);
  background: linear-gradient(135deg, #b9f3ce, #bfe8ff);
  color: #12302e;
}

.scale-control {
  display: grid;
  gap: 8px;
  color: var(--text-color);
  font-weight: 900;
}

.scale-control input {
  width: 100%;
  accent-color: var(--accent-color);
}

@keyframes objectBloom {
  from {
    opacity: 0;
    transform: translate(-50%, -66%) scale(calc(var(--garden-scale) * 0.82));
  }

  to {
    opacity: 1;
    transform: translate(-50%, -72%) scale(var(--garden-scale));
  }
}

.storybook-result {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.comic-result {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 16% 12%,
      rgba(255, 255, 255, 0.72),
      transparent 26%
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(255, 255, 255, 0.48),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255, 248, 229, 0.92),
      rgba(228, 246, 255, 0.84)
    );
  box-shadow:
    18px 22px 40px rgba(123, 92, 54, 0.12),
    inset 4px 5px 16px rgba(255, 255, 255, 0.68);
}

.comic-result::before {
  content: '';
  position: absolute;
  inset: -20%;
  opacity: 0.8;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 16% 30%,
      var(--comic-light-one, rgba(255, 215, 128, 0.42)),
      transparent 24%
    ),
    radial-gradient(
      circle at 82% 28%,
      var(--comic-light-two, rgba(180, 226, 255, 0.36)),
      transparent 28%
    ),
    radial-gradient(
      circle at 48% 88%,
      var(--comic-light-three, rgba(194, 239, 205, 0.3)),
      transparent 28%
    );
  filter: blur(10px);
}

.comic-mood-sun {
  --comic-light-one: rgba(255, 204, 98, 0.58);
  --comic-light-two: rgba(255, 236, 165, 0.44);
  --comic-light-three: rgba(255, 171, 122, 0.22);
}

.comic-mood-rain {
  --comic-light-one: rgba(167, 229, 218, 0.52);
  --comic-light-two: rgba(188, 213, 238, 0.42);
  --comic-light-three: rgba(226, 244, 234, 0.4);
}

.comic-mood-violet {
  --comic-light-one: rgba(190, 164, 236, 0.52);
  --comic-light-two: rgba(221, 203, 255, 0.42);
  --comic-light-three: rgba(178, 218, 242, 0.3);
}

.comic-mood-sprout {
  --comic-light-one: rgba(151, 229, 161, 0.52);
  --comic-light-two: rgba(203, 244, 190, 0.42);
  --comic-light-three: rgba(255, 238, 162, 0.26);
}

.comic-mood-earth {
  --comic-light-one: rgba(214, 174, 125, 0.46);
  --comic-light-two: rgba(242, 220, 185, 0.45);
  --comic-light-three: rgba(187, 223, 188, 0.28);
}

.comic-mood-sky {
  --comic-light-one: rgba(157, 220, 255, 0.52);
  --comic-light-two: rgba(215, 244, 255, 0.46);
  --comic-light-three: rgba(255, 241, 184, 0.26);
}

.comic-mood-cream {
  --comic-light-one: rgba(255, 230, 190, 0.52);
  --comic-light-two: rgba(239, 231, 255, 0.36);
  --comic-light-three: rgba(198, 235, 212, 0.3);
}

body[data-theme='dark'] .comic-result {
  background:
    radial-gradient(
      circle at 16% 12%,
      rgba(255, 255, 255, 0.1),
      transparent 26%
    ),
    linear-gradient(145deg, rgba(19, 42, 46, 0.94), rgba(34, 44, 65, 0.9));
}

.comic-result-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.comic-page-count {
  min-width: 74px;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--text-color);
  font-weight: 900;
  text-align: center;
  background: rgba(255, 255, 255, 0.64);
  box-shadow:
    0 10px 18px rgba(113, 83, 50, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.72);
}

.comic-stage {
  position: relative;
  z-index: 2;
  min-height: 350px;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(
    180deg,
    rgba(218, 247, 255, 0.8) 0 56%,
    rgba(143, 217, 164, 0.78) 57% 100%
  );
  box-shadow:
    inset 0 10px 24px rgba(255, 255, 255, 0.58),
    inset 0 -14px 22px rgba(78, 154, 99, 0.18),
    0 16px 28px rgba(94, 120, 96, 0.12);
}

.comic-garden-window {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 16px;
  bottom: 74px;
  overflow: hidden;
  border-radius: 22px;
  opacity: 0.78;
  transform: scale(0.98);
  transform-origin: center bottom;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 12px 24px rgba(95, 121, 90, 0.1);
}

.comic-garden-window .read-only-garden-inner {
  min-height: 100%;
  border-radius: 22px;
  border: 0;
}

.read-only-garden-comic .garden-arrange-item {
  width: 150px;
  height: 195px;
}

.comic-glow-orb {
  position: absolute;
  left: 10%;
  top: 12%;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 244, 190, 0.86),
    rgba(255, 202, 122, 0.28) 58%,
    transparent 70%
  );
  filter: blur(0.5px);
  animation: comicFloat 4s ease-in-out infinite;
}

.comic-heart-flower {
  position: absolute;
  right: 18%;
  bottom: 94px;
  width: 54px;
  height: 54px;
  border-radius: 50% 50% 48% 48%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.82) 0 8px,
      transparent 9px
    ),
    radial-gradient(
      circle at 34% 38%,
      rgba(255, 150, 190, 0.82) 0 14px,
      transparent 15px
    ),
    radial-gradient(
      circle at 66% 38%,
      rgba(255, 150, 190, 0.82) 0 14px,
      transparent 15px
    ),
    radial-gradient(
      circle at 50% 66%,
      rgba(255, 190, 98, 0.82) 0 16px,
      transparent 17px
    );
  box-shadow: 0 10px 18px rgba(133, 92, 77, 0.16);
  animation: comicPulse 2.8s ease-in-out infinite;
}

.comic-friends {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 26px;
  pointer-events: none;
}

.comic-friend {
  display: grid;
  justify-items: center;
  gap: 4px;
  animation: comicFriendBob 3.4s ease-in-out infinite;
}

.comic-friend-moon {
  animation-delay: 0.8s;
}

.comic-avatar {
  position: relative;
  display: grid;
  place-items: end center;
  width: 132px;
  height: 154px;
}

.comic-avatar .avatar-model {
  display: none;
}

.uploaded-fairy-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}

.sun-fairy-character {
  border-radius: 28px;
  transform: translateY(8px) scale(1.05);
  transform-origin: center bottom;
  box-shadow:
    0 16px 22px rgba(112, 72, 35, 0.16),
    0 0 22px rgba(255, 207, 98, 0.2);
}

.moon-fairy-character {
  border-radius: 28px;
  transform: translateY(8px) scale(1.05);
  transform-origin: center bottom;
  box-shadow:
    0 16px 22px rgba(72, 76, 136, 0.16),
    0 0 22px rgba(180, 190, 255, 0.22);
}

.comic-friend-sun .comic-avatar {
  overflow: visible;
}

.comic-friend-moon .comic-avatar {
  overflow: visible;
}

.fairy-character {
  --body-a: #ffd982;
  --body-b: #ffad71;
  --body-c: #fff2b8;
  --shadow: rgba(170, 96, 55, 0.28);
  --eye-a: #5f432b;
  --eye-b: #fff9e8;
  position: relative;
  width: 112px;
  height: 132px;
  transform-origin: center bottom;
  filter: drop-shadow(0 16px 18px rgba(74, 54, 36, 0.18));
}

.fairy-character::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 22px;
  z-index: 2;
  width: 80px;
  height: 92px;
  border-radius: 48% 52% 45% 45% / 52% 52% 46% 46%;
  background:
    radial-gradient(
      circle at 32% 26%,
      rgba(255, 255, 255, 0.7),
      transparent 24%
    ),
    radial-gradient(
      circle at 72% 76%,
      rgba(255, 255, 255, 0.32),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      var(--body-c) 0%,
      var(--body-a) 42%,
      var(--body-b) 100%
    );
  box-shadow:
    inset 10px 12px 18px rgba(255, 255, 255, 0.36),
    inset -12px -10px 18px var(--shadow),
    0 10px 18px rgba(101, 70, 47, 0.12);
}

.moonlight-fairy {
  --body-a: #c6d8ff;
  --body-b: #9d9ee7;
  --body-c: #f2f6ff;
  --shadow: rgba(91, 89, 160, 0.3);
  --eye-a: #2f3f75;
  --eye-b: #f7fbff;
}

.fairy-wing {
  position: absolute;
  top: 43px;
  z-index: 1;
  width: 38px;
  height: 54px;
  border-radius: 70% 26% 70% 24%;
  opacity: 0.9;
  background:
    radial-gradient(
      circle at 42% 30%,
      rgba(255, 255, 255, 0.72),
      transparent 28%
    ),
    linear-gradient(145deg, rgba(255, 244, 164, 0.94), rgba(255, 159, 96, 0.56));
  box-shadow:
    inset 6px 8px 12px rgba(255, 255, 255, 0.45),
    inset -5px -6px 10px rgba(179, 94, 57, 0.16);
}

.wing-left {
  left: 0;
  transform: rotate(-24deg);
}

.wing-right {
  right: 0;
  transform: scaleX(-1) rotate(-24deg);
}

.moonlight-fairy .fairy-wing {
  width: 40px;
  height: 58px;
  background:
    radial-gradient(
      circle at 38% 28%,
      rgba(255, 255, 255, 0.78),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(238, 246, 255, 0.95),
      rgba(151, 168, 230, 0.58)
    );
  box-shadow:
    inset 6px 8px 12px rgba(255, 255, 255, 0.5),
    inset -5px -8px 10px rgba(80, 92, 155, 0.18);
}

.fairy-face,
.fairy-hair,
.fairy-arm,
.fairy-foot,
.fairy-notebook,
.fairy-moon-orb,
.fairy-sun,
.fairy-sparkle,
.fairy-crescent,
.fairy-star {
  position: absolute;
  z-index: 4;
}

.fairy-hair {
  left: 35px;
  top: 8px;
  z-index: 5;
  width: 42px;
  height: 28px;
  border-radius: 54% 46% 42% 58%;
  background:
    radial-gradient(circle at 34% 18%, #fff1a6 0 18%, transparent 19%),
    radial-gradient(circle at 62% 30%, #ffb24e 0 24%, transparent 25%),
    linear-gradient(140deg, #ffd86e, #ff8a55);
  box-shadow:
    10px 4px 0 -8px #f37a45,
    -8px 8px 0 -6px #ffc35f,
    inset -8px -8px 8px rgba(171, 82, 37, 0.16);
  transform: rotate(-9deg);
}

.fairy-face {
  left: 16px;
  top: 22px;
  width: 80px;
  height: 92px;
  z-index: 6;
}

.fairy-eye {
  position: absolute;
  top: 31px;
  width: 18px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, #fff 0 13%, transparent 14%),
    radial-gradient(
      circle at 58% 64%,
      rgba(255, 255, 255, 0.95) 0 7%,
      transparent 8%
    ),
    radial-gradient(
      circle at 53% 55%,
      var(--eye-a) 0 42%,
      #30213c 43% 72%,
      transparent 73%
    ),
    var(--eye-b);
  box-shadow:
    inset 0 -3px 0 rgba(75, 56, 48, 0.1),
    0 2px 4px rgba(68, 45, 42, 0.12);
}

.fairy-eye.eye-left {
  left: 20px;
}

.fairy-eye.eye-right {
  right: 20px;
}

.moonlight-fairy .fairy-eye {
  background:
    radial-gradient(circle at 32% 26%, #fff 0 13%, transparent 14%),
    radial-gradient(
      circle at 61% 67%,
      rgba(255, 255, 255, 0.95) 0 7%,
      transparent 8%
    ),
    radial-gradient(circle at 48% 50%, #6f83ff 0 16%, transparent 17%),
    radial-gradient(
      circle at 54% 56%,
      var(--eye-a) 0 42%,
      #27325d 43% 72%,
      transparent 73%
    ),
    var(--eye-b);
}

.fairy-blush {
  position: absolute;
  top: 58px;
  width: 15px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 127, 116, 0.36);
  filter: blur(0.2px);
}

.blush-left {
  left: 12px;
}

.blush-right {
  right: 12px;
}

.fairy-mouth {
  position: absolute;
  left: 50%;
  top: 63px;
  width: 20px;
  height: 11px;
  border-bottom: 3px solid rgba(126, 65, 54, 0.55);
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%);
}

.fairy-arm {
  top: 76px;
  z-index: 7;
  width: 15px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 239, 183, 0.92),
    rgba(255, 158, 104, 0.82)
  );
  box-shadow: inset -4px -4px 6px rgba(145, 78, 49, 0.12);
}

.arm-left {
  left: 21px;
  transform: rotate(14deg);
}

.arm-right {
  right: 21px;
  transform: rotate(-14deg);
}

.moonlight-fairy .fairy-arm {
  background: linear-gradient(
    180deg,
    rgba(236, 242, 255, 0.9),
    rgba(156, 165, 230, 0.78)
  );
}

.fairy-foot {
  bottom: 0;
  z-index: 3;
  width: 22px;
  height: 12px;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(180deg, var(--body-a), var(--body-b));
  box-shadow: inset -4px -3px 5px rgba(132, 72, 48, 0.14);
}

.foot-left {
  left: 36px;
  transform: rotate(-8deg);
}

.foot-right {
  right: 36px;
  transform: rotate(8deg);
}

.fairy-notebook {
  left: 47px;
  top: 77px;
  z-index: 8;
  width: 28px;
  height: 34px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(128, 91, 65, 0.28) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(
      180deg,
      transparent 0 6px,
      rgba(170, 112, 61, 0.18) 7px
    ),
    linear-gradient(145deg, #fff3cc, #f5dca5);
  box-shadow:
    -4px 0 0 rgba(120, 83, 59, 0.18),
    0 6px 8px rgba(100, 68, 45, 0.15);
  transform: rotate(-7deg);
}

.fairy-notebook::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 3px;
  width: 7px;
  height: 24px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    180deg,
    #805d45 0 2px,
    transparent 2px 5px
  );
  opacity: 0.62;
}

.fairy-notebook span {
  position: absolute;
  left: 8px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe77a 0 37%, #f7a449 39% 100%);
}

.fairy-notebook span::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: conic-gradient(
    from 0deg,
    transparent 0 8%,
    #f0a43f 9% 12%,
    transparent 13% 25%,
    #f0a43f 26% 29%,
    transparent 30% 42%,
    #f0a43f 43% 46%,
    transparent 47% 59%,
    #f0a43f 60% 63%,
    transparent 64% 76%,
    #f0a43f 77% 80%,
    transparent 81%
  );
  border-radius: 50%;
  z-index: -1;
}

.fairy-sun {
  left: 15px;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7a6 0 32%, #ffb545 34% 100%);
  box-shadow: 0 0 0 4px rgba(255, 176, 56, 0.16);
}

.fairy-sun::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(
    from 4deg,
    transparent 0 8%,
    rgba(241, 151, 39, 0.68) 9% 12%,
    transparent 13% 24%,
    rgba(241, 151, 39, 0.68) 25% 28%,
    transparent 29% 40%,
    rgba(241, 151, 39, 0.68) 41% 44%,
    transparent 45% 56%,
    rgba(241, 151, 39, 0.68) 57% 60%,
    transparent 61% 72%,
    rgba(241, 151, 39, 0.68) 73% 76%,
    transparent 77% 88%,
    rgba(241, 151, 39, 0.68) 89% 92%,
    transparent 93%
  );
  z-index: -1;
}

.fairy-sparkle {
  width: 10px;
  height: 10px;
  background: #ffe98f;
  clip-path: polygon(
    50% 0,
    62% 36%,
    100% 50%,
    62% 64%,
    50% 100%,
    38% 64%,
    0 50%,
    38% 36%
  );
  filter: drop-shadow(0 2px 3px rgba(199, 126, 37, 0.18));
}

.sparkle-one {
  right: 9px;
  top: 24px;
}

.sparkle-two {
  left: 6px;
  top: 92px;
  transform: scale(0.72) rotate(18deg);
}

.fairy-crescent {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff1a9;
  box-shadow: 0 4px 8px rgba(72, 67, 132, 0.18);
}

.fairy-crescent::after {
  content: '';
  position: absolute;
  left: 8px;
  top: -1px;
  width: 22px;
  height: 24px;
  border-radius: 50%;
  background: #b9c7f7;
}

.head-crescent {
  right: 23px;
  top: 6px;
  z-index: 8;
  transform: rotate(-28deg) scale(0.82);
}

.float-crescent-one {
  left: 10px;
  top: 98px;
  z-index: 1;
  transform: rotate(22deg) scale(0.56);
  opacity: 0.85;
}

.float-crescent-two {
  right: 3px;
  top: 77px;
  z-index: 1;
  transform: rotate(-12deg) scale(0.48);
  opacity: 0.78;
}

.fairy-star {
  width: 9px;
  height: 9px;
  background: #f8f2ff;
  clip-path: polygon(
    50% 0,
    61% 36%,
    100% 50%,
    61% 64%,
    50% 100%,
    39% 64%,
    0 50%,
    39% 36%
  );
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.star-one {
  left: 19px;
  top: 20px;
}

.star-two {
  right: 9px;
  top: 112px;
  transform: scale(0.72);
}

.fairy-moon-orb {
  left: 44px;
  top: 78px;
  z-index: 8;
  width: 25px;
  height: 30px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(
      circle at 36% 30%,
      rgba(255, 255, 255, 0.78),
      transparent 24%
    ),
    linear-gradient(145deg, #eff6ff, #8d9cdf);
  box-shadow:
    inset -5px -5px 8px rgba(67, 75, 139, 0.2),
    0 6px 8px rgba(63, 69, 130, 0.15);
}

.fairy-moon-orb span,
.fairy-moon-orb span::before {
  position: absolute;
  content: '';
  border-radius: 50%;
  background: #fff0ad;
}

.fairy-moon-orb span {
  left: 7px;
  top: 7px;
  width: 11px;
  height: 11px;
  box-shadow: inset -4px 0 0 #8d9cdf;
}

.fairy-moon-orb span::before {
  left: 4px;
  top: 12px;
  width: 9px;
  height: 9px;
  box-shadow: inset -3px 0 0 #8d9cdf;
}

.comic-friend-sun .fairy-character {
  animation: fairyGlowWarm 3.2s ease-in-out infinite;
}

.comic-friend-moon .fairy-character {
  animation: fairyGlowCool 3.8s ease-in-out infinite;
}

.comic-friend span {
  padding: 6px 12px;
  border-radius: 999px;
  color: #493328;
  font-size: 0.82rem;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 8px 14px rgba(86, 62, 41, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.75);
}

.comic-dialogue-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 16px 30px rgba(103, 76, 49, 0.1),
    inset 3px 4px 12px rgba(255, 255, 255, 0.72);
}

body[data-theme='dark'] .comic-dialogue-panel {
  background: rgba(20, 39, 43, 0.86);
}

.comic-dialogue-panel h3 {
  margin: -4px 0 0;
  color: var(--text-color);
  font-size: clamp(1.2rem, 3.2vw, 1.75rem);
}

.comic-bubble-stack {
  display: grid;
  gap: 10px;
}

.comic-bubble {
  position: relative;
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 18px;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 10px 18px rgba(82, 60, 38, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.comic-bubble-sun {
  justify-self: start;
  border-bottom-left-radius: 6px;
  background: linear-gradient(
    135deg,
    rgba(255, 248, 200, 0.94),
    rgba(255, 226, 168, 0.88)
  );
}

.comic-bubble-moon {
  justify-self: end;
  border-bottom-right-radius: 6px;
  background: linear-gradient(
    135deg,
    rgba(230, 237, 255, 0.95),
    rgba(218, 249, 245, 0.88)
  );
}

.comic-bubble-both {
  justify-self: center;
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(255, 234, 214, 0.95),
    rgba(228, 247, 255, 0.9)
  );
}

.comic-bubble strong {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-color);
  font-size: 0.88rem;
}

.comic-bubble p {
  margin: 0;
  color: var(--muted-color);
  font-weight: 800;
  line-height: 1.55;
}

body[data-theme='dark'] .comic-bubble {
  background: rgba(28, 49, 54, 0.9);
}

body[data-theme='dark'] .comic-bubble-sun {
  background: linear-gradient(
    135deg,
    rgba(87, 76, 42, 0.95),
    rgba(93, 65, 54, 0.88)
  );
}

body[data-theme='dark'] .comic-bubble-moon {
  background: linear-gradient(
    135deg,
    rgba(46, 57, 86, 0.95),
    rgba(35, 80, 76, 0.88)
  );
}

body.report-comic-mode .preview-stage,
body.report-comic-mode .part-tabs,
body.report-comic-mode .stage-controls,
body.report-comic-mode .panel-heading,
body.report-comic-mode .delete-drop-zone,
body.instant-reading-mode .preview-stage,
body.instant-reading-mode .part-tabs,
body.instant-reading-mode .stage-controls,
body.instant-reading-mode .panel-heading {
  display: none;
}

body.report-comic-mode .picker-panel,
body.instant-reading-mode .picker-panel {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: auto;
  background: transparent;
  box-shadow: none;
}

body.report-comic-mode .option-grid,
body.instant-reading-mode .option-grid {
  gap: 0;
  padding: 0;
}

body.travel-healing-mode .picker-panel {
  height: calc(100dvh - 64px);
  min-height: calc(100dvh - 64px);
  overflow: hidden !important;
  background: transparent;
}

body.travel-healing-mode .option-grid.travel-healing-view {
  height: 100%;
  min-height: 0;
}

body.travel-healing-mode .option-grid.travel-scene-view {
  display: block;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.forest-comic-result {
  display: grid;
  gap: 14px;
  min-height: 100%;
}

.forest-comic-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 0;
}

.forest-comic-top h3 {
  margin: 2px 0 0;
  color: var(--text-color);
  font-size: clamp(1.28rem, 4.8vw, 2rem);
  line-height: 1.15;
}

.report-page-subtitle {
  margin: 4px 0 0;
  color: rgba(91, 67, 48, 0.76);
  font-size: clamp(0.88rem, 2.6vw, 1.02rem);
  font-weight: 850;
  line-height: 1.28;
}

.prescription-report-page .forest-comic-top h3 {
  font-size: clamp(1.12rem, 3.8vw, 1.52rem);
}

.prescription-report-page .report-page-subtitle {
  color: rgba(90, 68, 52, 0.72);
}

.forest-comic-stage {
  position: relative;
  min-height: min(680px, calc(100vh - 196px));
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(255, 247, 190, 0.92) 0 12%,
      transparent 36%
    ),
    radial-gradient(
      ellipse at 18% 82%,
      rgba(255, 235, 169, 0.42),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 78% 78%,
      rgba(191, 222, 171, 0.46),
      transparent 30%
    ),
    linear-gradient(180deg, #e9dfaa 0%, #d6dba0 32%, #98ba76 68%, #6f9b5f 100%);
  box-shadow:
    0 20px 34px rgba(89, 80, 46, 0.15),
    inset 0 14px 26px rgba(255, 255, 255, 0.34),
    inset 0 -22px 30px rgba(47, 93, 54, 0.18);
  isolation: isolate;
}

.forest-comic-stage::before {
  content: '';
  position: absolute;
  inset: -4% -6%;
  z-index: 0;
  opacity: 0.78;
  background:
    linear-gradient(
      88deg,
      transparent 0 6%,
      rgba(93, 68, 43, 0.28) 7% 10%,
      transparent 11% 32%,
      rgba(84, 61, 40, 0.22) 34% 39%,
      transparent 40% 68%,
      rgba(94, 66, 42, 0.22) 70% 76%,
      transparent 77% 100%
    ),
    radial-gradient(
      ellipse at 16% 34%,
      rgba(95, 124, 72, 0.24),
      transparent 30%
    ),
    radial-gradient(
      ellipse at 88% 42%,
      rgba(82, 112, 70, 0.22),
      transparent 32%
    );
  filter: blur(1.6px);
}

.forest-comic-stage::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -12%;
  z-index: 1;
  height: 42%;
  border-radius: 52% 52% 0 0;
  background:
    radial-gradient(
      circle at 18% 40%,
      rgba(255, 242, 176, 0.34),
      transparent 18%
    ),
    radial-gradient(
      circle at 77% 34%,
      rgba(136, 186, 105, 0.42),
      transparent 20%
    ),
    linear-gradient(180deg, #9fc573, #628f52);
  box-shadow: inset 0 14px 22px rgba(255, 255, 255, 0.18);
}

body[data-theme='dark'] .forest-comic-stage {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(194, 194, 255, 0.26) 0 13%,
      transparent 38%
    ),
    radial-gradient(
      ellipse at 18% 82%,
      rgba(87, 100, 112, 0.42),
      transparent 28%
    ),
    linear-gradient(180deg, #293c55 0%, #274055 34%, #284f48 70%, #17382f 100%);
}

.forest-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(255, 247, 182, 0.38), transparent 28% 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 226, 0.18) 0 8px,
      transparent 9px 44px
    );
  mix-blend-mode: screen;
}

.forest-tree {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 46px;
  height: 94%;
  border-radius: 52% 44% 0 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16),
      transparent 26% 72%,
      rgba(76, 47, 28, 0.2)
    ),
    repeating-linear-gradient(
      92deg,
      rgba(82, 59, 36, 0.12) 0 3px,
      transparent 4px 13px
    ),
    linear-gradient(180deg, rgba(112, 82, 53, 0.6), rgba(66, 48, 32, 0.66));
  filter: blur(0.2px);
  opacity: 0.65;
}

.forest-tree-left {
  left: 4%;
  transform: rotate(2deg);
}

.forest-tree-right {
  right: 5%;
  width: 58px;
  transform: rotate(-3deg);
}

.forest-leaf,
.forest-sprout {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.forest-leaf {
  width: 32px;
  height: 18px;
  border-radius: 100% 0 100% 0;
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255, 255, 255, 0.45),
      transparent 24%
    ),
    linear-gradient(135deg, #b8d96e, #5f9e46);
  box-shadow: 0 4px 9px rgba(48, 93, 42, 0.14);
}

.leaf-one {
  left: 18%;
  top: 21%;
  transform: rotate(-24deg);
}

.leaf-two {
  right: 22%;
  top: 32%;
  transform: rotate(28deg) scale(0.86);
}

.leaf-three {
  right: 13%;
  bottom: 26%;
  transform: rotate(-12deg) scale(0.72);
}

.forest-mushroom {
  position: absolute;
  z-index: 4;
  bottom: 8%;
  width: 30px;
  height: 30px;
}

.forest-mushroom::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 18px;
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(
      circle at 31% 36%,
      rgba(255, 240, 196, 0.8) 0 12%,
      transparent 13%
    ),
    radial-gradient(
      circle at 65% 32%,
      rgba(255, 240, 196, 0.72) 0 9%,
      transparent 10%
    ),
    linear-gradient(180deg, #d8906b, #aa5a43);
  box-shadow: inset -4px -4px 8px rgba(112, 47, 35, 0.18);
}

.forest-mushroom::after {
  content: '';
  position: absolute;
  left: 11px;
  bottom: 0;
  width: 9px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8dfb5, #d4aa7a);
}

.mushroom-one {
  left: 9%;
}

.mushroom-two {
  right: 10%;
  bottom: 13%;
  transform: scale(0.78);
}

.forest-sprout {
  bottom: 20%;
  width: 18px;
  height: 36px;
  border-radius: 999px;
  border-left: 4px solid rgba(75, 130, 58, 0.8);
}

.forest-sprout::before,
.forest-sprout::after {
  content: '';
  position: absolute;
  top: 4px;
  width: 20px;
  height: 12px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #c7df77, #67a34e);
}

.forest-sprout::before {
  left: -18px;
  transform: rotate(18deg);
}

.forest-sprout::after {
  left: 2px;
  transform: scaleX(-1) rotate(18deg);
}

.sprout-one {
  left: 67%;
}

.sprout-two {
  left: 78%;
  bottom: 28%;
  transform: scale(0.74);
}

.forest-bubble-stack {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  z-index: 10;
  display: grid;
  gap: 12px;
  pointer-events: none;
}

.forest-bubble {
  position: relative;
  max-width: min(78%, 430px);
  padding: 15px 18px;
  border-radius: 24px;
  color: #192214;
  box-shadow:
    0 12px 20px rgba(55, 69, 38, 0.16),
    inset 0 3px 0 rgba(255, 255, 255, 0.46);
}

.forest-bubble::after {
  content: '';
  position: absolute;
  bottom: -14px;
  width: 26px;
  height: 22px;
  clip-path: polygon(0 0, 100% 0, 20% 100%);
}

.forest-bubble-sun {
  justify-self: start;
  background: linear-gradient(145deg, #d9ef93, #a9d56b);
}

.forest-bubble-sun::after {
  left: 34px;
  background: #a9d56b;
}

.forest-bubble-moon {
  justify-self: end;
  background: linear-gradient(145deg, #d4b495, #ab7c62);
  color: #221611;
}

.forest-bubble-moon::after {
  right: 34px;
  background: #ab7c62;
  transform: scaleX(-1);
}

.forest-bubble-both {
  justify-self: center;
  text-align: center;
  background: linear-gradient(145deg, #e8f4b2, #c6e0a2);
}

.forest-bubble-both::after {
  left: 50%;
  background: #c6e0a2;
  transform: translateX(-50%);
}

.forest-bubble strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 950;
}

.forest-bubble p {
  margin: 0;
  font-size: clamp(1rem, 3.4vw, 1.28rem);
  font-weight: 950;
  line-height: 1.38;
  word-break: keep-all;
}

.forest-bubble.is-narrating,
.instant-bubble.is-narrating {
  outline: 3px solid rgba(255, 248, 176, 0.94);
  box-shadow:
    0 0 0 7px rgba(255, 244, 145, 0.24),
    0 18px 30px rgba(68, 84, 43, 0.2),
    inset 0 3px 0 rgba(255, 255, 255, 0.62);
  filter: brightness(1.07) saturate(1.06);
  transition:
    filter 180ms ease,
    box-shadow 180ms ease,
    outline-color 180ms ease;
}

.forest-bubble .bubble-index-2,
.forest-bubble.bubble-index-2 {
  margin-top: 2px;
}

.forest-comic-friends {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 70px;
  z-index: 8;
  display: flex;
  align-items: end;
  justify-content: space-between;
  pointer-events: none;
}

.forest-comic-friends .comic-avatar {
  width: 158px;
  height: 174px;
}

.forest-comic-friends .comic-friend-sun .comic-avatar {
  width: clamp(134px, 29vw, 182px);
  height: clamp(176px, 32vh, 232px);
}

.forest-comic-friends .fairy-character {
  scale: 1.18;
}

.forest-comic-friends .comic-friend span {
  background: rgba(246, 255, 204, 0.82);
}

.forest-comic-friends .comic-friend-moon span {
  background: rgba(228, 223, 255, 0.86);
}

.forest-comic-actions {
  padding: 0 12px 14px;
}

.comic-focus-flower .comic-heart-flower,
.comic-focus-mission .comic-heart-flower {
  transform: scale(1.18);
}

.comic-focus-comfort .comic-friend-moon {
  transform-origin: center bottom;
  animation-name: comicComfortNod;
}

@keyframes comicFriendBob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes fairyGlowWarm {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
    filter: drop-shadow(0 16px 18px rgba(168, 93, 40, 0.18));
  }

  50% {
    transform: translateY(-3px) rotate(1deg);
    filter: drop-shadow(0 18px 20px rgba(255, 166, 72, 0.26));
  }
}

@keyframes fairyGlowCool {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
    filter: drop-shadow(0 16px 18px rgba(76, 82, 152, 0.16));
  }

  50% {
    transform: translateY(-4px) rotate(-1deg);
    filter: drop-shadow(0 18px 22px rgba(130, 146, 226, 0.26));
  }
}

@keyframes comicFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.05);
  }
}

@keyframes comicPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes comicComfortNod {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }

  50% {
    transform: rotate(-2deg) translateY(-4px);
  }
}

.tts-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  color: #14332f;
  background: linear-gradient(135deg, #fff2a8, #ffd2e5 48%, #bdeeff);
  box-shadow:
    0 12px 24px rgba(163, 105, 73, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.68);
}

.tts-button span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
}

.storybook-scene {
  min-height: 300px;
}

.speech-bubble {
  position: relative;
  padding: 18px;
  border: 2px solid rgba(88, 73, 57, 0.18);
  border-radius: 22px 22px 22px 8px;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 12px 24px rgba(83, 61, 39, 0.12),
    inset 3px 4px 12px rgba(255, 255, 255, 0.72);
}

body[data-theme='dark'] .speech-bubble {
  background: rgba(22, 38, 40, 0.86);
}

.speech-bubble p {
  margin: 0 0 6px;
  color: var(--accent-color);
  font-weight: 900;
}

.speech-bubble span {
  display: block;
  margin-top: 8px;
  color: var(--muted-color);
  line-height: 1.7;
}

.wall-color-message,
.roof-color-message,
.color-harmony-message,
.door-color-message,
.outfit-analysis-message,
.outfit-color-message,
.body-acceptance-message,
.self-image-message {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(170, 131, 86, 0.24);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(255, 255, 255, 0.72),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(255, 249, 231, 0.86),
      rgba(236, 247, 255, 0.74)
    );
  box-shadow:
    0 10px 20px rgba(113, 83, 50, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 0.68);
}

.wall-color-message strong,
.roof-color-message strong,
.color-harmony-message strong,
.door-color-message strong,
.outfit-analysis-message strong,
.outfit-color-message strong,
.body-acceptance-message strong,
.self-image-message strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text-color);
  font-size: 0.95rem;
}

.wall-color-message p,
.roof-color-message p,
.color-harmony-message p,
.door-color-message p,
.outfit-analysis-message p,
.outfit-color-message p,
.body-acceptance-message p,
.self-image-message p {
  margin: 0;
  color: var(--muted-color);
  font-weight: 800;
  line-height: 1.65;
}

body[data-theme='dark'] .wall-color-message,
body[data-theme='dark'] .roof-color-message,
body[data-theme='dark'] .color-harmony-message,
body[data-theme='dark'] .door-color-message,
body[data-theme='dark'] .outfit-analysis-message,
body[data-theme='dark'] .outfit-color-message,
body[data-theme='dark'] .body-acceptance-message,
body[data-theme='dark'] .self-image-message {
  border-color: rgba(139, 219, 199, 0.22);
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(255, 255, 255, 0.08),
      transparent 42%
    ),
    linear-gradient(135deg, rgba(22, 69, 67, 0.78), rgba(28, 42, 58, 0.72));
}

.detail-result-hero {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
}

.mini-garden .read-only-garden-inner {
  min-height: 220px;
}

.read-only-garden .garden-arrange-item {
  pointer-events: none;
}

.read-only-garden-storybook .garden-arrange-item {
  width: 230px;
  height: 300px;
}

.read-only-garden-mini .garden-arrange-item {
  width: 200px;
  height: 250px;
}

.empathy-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.treasure-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(191, 158, 121, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 255, 255, 0.72),
      transparent 30%
    ),
    linear-gradient(145deg, rgba(255, 245, 220, 0.9), rgba(222, 245, 236, 0.72));
  box-shadow:
    14px 18px 34px rgba(103, 76, 49, 0.1),
    inset 4px 5px 12px rgba(255, 255, 255, 0.62),
    inset -6px -8px 14px rgba(126, 103, 75, 0.07);
}

body[data-theme='dark'] .treasure-section {
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(83, 132, 124, 0.32),
      transparent 32%
    ),
    linear-gradient(145deg, rgba(28, 55, 58, 0.96), rgba(22, 38, 44, 0.96));
  border-color: rgba(125, 190, 181, 0.22);
}

.treasure-heading h3 {
  margin: 2px 0 0;
  font-size: 1.28rem;
}

.treasure-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.treasure-card {
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 13px;
  border: 1px solid rgba(95, 130, 112, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.78),
      rgba(255, 247, 230, 0.58)
    ),
    var(--card-bg);
  box-shadow:
    8px 10px 18px rgba(68, 48, 30, 0.08),
    inset 3px 3px 9px rgba(255, 255, 255, 0.66);
}

body[data-theme='dark'] .treasure-card {
  background: linear-gradient(
    150deg,
    rgba(56, 95, 90, 0.7),
    rgba(28, 49, 54, 0.82)
  );
  border-color: rgba(134, 206, 196, 0.18);
}

.treasure-card span {
  color: var(--accent-color);
  font-size: 0.78rem;
  font-weight: 900;
}

.treasure-card strong {
  color: var(--text-color);
  font-size: 0.96rem;
}

.treasure-card p {
  margin: 0;
  color: var(--muted-color);
  font-size: 0.9rem;
  line-height: 1.58;
}

.empathy-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(191, 158, 121, 0.28);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(255, 255, 255, 0.66),
      transparent 34%
    ),
    var(--card-bg);
  box-shadow:
    12px 16px 30px rgba(103, 76, 49, 0.1),
    inset 3px 4px 10px rgba(255, 255, 255, 0.54);
}

.empathy-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #17362f;
  background: linear-gradient(135deg, #d7f7ce, #ffe4ad);
  font-weight: 900;
}

.gentle-question-box {
  padding: 16px;
  line-height: 1.65;
}

.gentle-question-box ul {
  margin: 10px 0 14px;
  padding-left: 20px;
}

.gentle-question-box li {
  margin-bottom: 7px;
}

@media (max-width: 719px) {
  .detail-result-hero,
  .empathy-card-grid,
  .treasure-card-grid {
    grid-template-columns: 1fr;
  }

  .flow-garden-canvas,
  .read-only-garden-inner {
    min-height: 300px;
  }

  .garden-arrange-item {
    width: 200px;
    height: 270px;
  }

  .comic-stage {
    min-height: 320px;
  }

  .comic-garden-window {
    left: 10px;
    right: 10px;
    bottom: 70px;
  }

  .comic-friends {
    padding: 0 12px;
  }

  .comic-avatar {
    width: 112px;
    height: 136px;
  }

  .comic-avatar .fairy-character {
    scale: 0.88;
  }

  .comic-bubble {
    max-width: 96%;
  }

  .forest-comic-top {
    padding: 10px 10px 0;
  }

  .forest-comic-stage {
    min-height: calc(100vh - 178px);
    border-radius: 24px;
  }

  .forest-bubble-stack {
    left: 12px;
    right: 12px;
    top: 12px;
    gap: 9px;
  }

  .forest-bubble {
    max-width: 92%;
    padding: 12px 14px;
    border-radius: 20px;
  }

  .forest-bubble p {
    font-size: 0.95rem;
    line-height: 1.34;
  }

  .forest-bubble strong {
    font-size: 0.78rem;
  }

  .forest-comic-friends {
    left: 0;
    right: 0;
    bottom: 52px;
    padding: 0 8px;
  }

  .forest-comic-friends .comic-avatar {
    width: 118px;
    height: 140px;
  }

  .forest-comic-friends .fairy-character {
    scale: 0.88;
  }

  .forest-tree-left {
    left: -2%;
  }

  .forest-tree-right {
    right: -3%;
  }

  .question-actions {
    flex-wrap: wrap;
  }

  .primary-action,
  .soft-action {
    flex: 1 1 180px;
  }
}

@media (min-width: 720px) {
  body {
    display: grid;
    place-items: center;
    padding: 24px;
    background:
      radial-gradient(
        circle at 12% 18%,
        rgba(255, 216, 160, 0.45),
        transparent 28%
      ),
      radial-gradient(
        circle at 88% 84%,
        rgba(255, 187, 200, 0.32),
        transparent 30%
      ),
      var(--page-bg);
  }

  .editor-app {
    width: min(1024px, 100%);
    min-height: min(860px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid var(--line-color);
    border-radius: 24px;
    box-shadow: 0 26px 72px var(--shadow-color);
  }

  .preview-stage {
    padding: 12px 16px 0;
  }

  .preview-sky {
    min-height: 0;
    border: 1px solid rgba(220, 193, 164, 0.5);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
  }
}

@media (max-width: 640px) {
  .top-bar {
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
    gap: 6px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .top-bar .done-button {
    display: none;
  }

  .theme-switch {
    max-width: min(32vw, 136px);
  }
}

@media (max-width: 430px) {
  .editor-app {
    grid-template-rows: 84px minmax(270px, 40vh) 68px 50px 1fr;
  }

  .top-bar {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 6px;
    padding: 8px 10px 24px;
  }

  .brand-lockup {
    align-self: start;
    padding-top: 1px;
  }

  .brand-lockup h1 {
    font-size: clamp(1rem, 4.5vw, 1.32rem);
  }

  .brand-lockup h1[lang='en'] {
    font-size: clamp(0.88rem, 3.6vw, 1.08rem);
  }

  .brand-subtitle {
    position: absolute;
    right: 8px;
    bottom: 7px;
    left: 8px;
    margin: 0;
    font-size: 0.64rem;
    line-height: 1.12;
  }

  .brand-subtitle[lang='en'] {
    font-size: 0.58rem;
  }

  .top-icon-button {
    width: 40px;
    height: 40px;
  }

  .top-icon-symbol {
    width: 34px;
    max-height: 34px;
  }

  .done-button {
    padding: 0 7px;
    font-size: 0.95rem;
  }

  .theme-choice {
    min-height: 28px;
    padding: 0 7px;
    font-size: 0.72rem;
  }

  .option-grid {
    gap: 12px;
  }

  .option-card {
    min-height: 132px;
    padding: 8px;
  }

  .option-visual {
    height: 92px;
  }

  .option-label {
    font-size: 0.72rem;
  }

  .preview-scene {
    transform: translateX(-50%) scale(0.9);
    transform-origin: bottom center;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .top-bar {
    align-items: center;
    padding-bottom: 18px;
  }

  .top-icon-button {
    width: 50px !important;
    height: 50px !important;
  }

  .top-icon-symbol {
    width: 43px !important;
    max-height: 43px !important;
  }

  .brand-lockup {
    position: static;
    width: auto;
    max-width: 100%;
    min-width: 0;
    justify-self: center;
    align-self: center;
    transform: none;
    text-align: center;
    pointer-events: auto;
    padding-top: 0;
  }

  .brand-subtitle {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 100%;
    margin-top: 1px;
    text-align: center;
  }

  .travel-select-scroll-shell {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 8px;
  }
}

.house-model.roof-chimney::before,
.roof-sample.roof-chimney::before {
  content: '';
  position: absolute;
  width: 21px;
  height: 58px;
  border-radius: 5px 5px 3px 3px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 5px, transparent 5px),
    linear-gradient(180deg, #a87552, #6f4330);
  box-shadow:
    inset -4px 0 0 rgba(0, 0, 0, 0.14),
    0 5px 0 rgba(73, 43, 31, 0.16);
  z-index: 3;
}

.house-model.roof-chimney::after,
.roof-sample.roof-chimney::after {
  content: '';
  position: absolute;
  width: 31px;
  height: 10px;
  border-radius: 4px;
  background: #5d3528;
  box-shadow:
    7px -14px 0 -5px rgba(255, 255, 255, 0.44),
    17px -24px 0 -6px rgba(255, 255, 255, 0.28);
  z-index: 4;
}

.house-model.floor-one.roof-chimney::before {
  top: 42px;
  left: calc(50% + 42px);
}

.house-model.floor-one.roof-chimney::after {
  top: 34px;
  left: calc(50% + 37px);
}

.house-model.floor-two.roof-chimney::before {
  top: 32px;
  left: calc(50% + 42px);
}

.house-model.floor-two.roof-chimney::after {
  top: 24px;
  left: calc(50% + 37px);
}

.house-model.floor-five.roof-chimney::before,
.house-model.floor-ten.roof-chimney::before {
  top: 18px;
  left: calc(50% + 30px);
  height: 46px;
}

.house-model.floor-five.roof-chimney::after,
.house-model.floor-ten.roof-chimney::after {
  top: 10px;
  left: calc(50% + 25px);
}

.roof-sample.roof-chimney::before {
  top: 25px;
  left: 140px;
  height: 52px;
}

.roof-sample.roof-chimney::after {
  top: 17px;
  left: 135px;
}

.roof-sample.roof-spire.roof-chimney::before {
  top: 30px;
  left: 137px;
}

.roof-sample.roof-spire.roof-chimney::after {
  top: 22px;
  left: 132px;
}

.roof-spire .house-roof::before,
.house-model.floor-one.roof-spire .house-roof::before,
.house-model.floor-two.roof-spire .house-roof::before {
  content: '';
  display: block;
  position: absolute;
  inset: 7px 11px 7px;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 30px,
      rgba(30, 20, 25, 0.52) 30px 32px,
      rgba(255, 255, 255, 0.18) 32px 33px,
      transparent 33px 48px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 13px,
      rgba(30, 20, 25, 0.42) 13px 15px,
      rgba(255, 255, 255, 0.14) 15px 16px,
      transparent 16px 26px
    );
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0.82;
  transform: none;
  filter: none;
}

.roof-spire .house-roof::after,
.house-model.floor-one.roof-spire .house-roof::after,
.house-model.floor-two.roof-spire .house-roof::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.52) 0 18%,
      transparent 19% 64%,
      rgba(44, 26, 34, 0.2) 100%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.24),
      transparent 36%,
      rgba(0, 0, 0, 0.18)
    );
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: none;
  filter: none;
}

/* 집 크기 5단계: 작은 안전지대에서 큰 성까지 점점 커지는 흐름 */
.floor-style-grid {
  grid-template-columns: repeat(5, minmax(116px, 1fr));
}

.floor-style-grid .option-card {
  min-height: 178px;
}

.floor-style-grid .option-visual {
  height: 126px;
}

.floor-style-grid .option-visual .house-model.roof-chimney::before,
.floor-style-grid .option-visual .house-model.roof-chimney::after {
  display: none;
}

.option-visual .house-model.floor-tiny,
.option-visual .house-model.floor-small {
  transform: translateX(-50%) scale(0.48);
}

.option-visual .house-model.floor-balanced {
  transform: translateX(-50%) scale(0.39);
}

.option-visual .house-model.floor-open {
  transform: translateX(-50%) scale(0.39);
}

.option-visual .house-model.floor-grand {
  transform: translateX(-50%) scale(0.31);
}

.house-model.floor-tiny,
.house-model.floor-small,
.house-model.floor-balanced,
.house-model.floor-open,
.house-model.floor-grand {
  height: 292px;
}

.house-model.floor-tiny .house-body,
.house-model.floor-small .house-body,
.house-model.floor-balanced .house-body,
.house-model.floor-open .house-body,
.house-model.floor-grand .house-body {
  border: 4px solid rgba(66, 47, 39, 0.2);
  background:
    radial-gradient(
      circle at 28% 16%,
      rgba(255, 255, 255, 0.38),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--house-light),
      var(--house-color) 58%,
      var(--house-dark)
    );
  box-shadow:
    inset 8px 0 0 rgba(255, 255, 255, 0.2),
    inset -12px -8px 0 rgba(88, 55, 42, 0.08),
    0 14px 18px rgba(40, 29, 24, 0.13);
}

.house-model.floor-tiny .floor-list,
.house-model.floor-small .floor-list,
.house-model.floor-balanced .floor-list,
.house-model.floor-open .floor-list,
.house-model.floor-grand .floor-list {
  position: relative;
  z-index: 8;
}

.house-model.floor-tiny .house-body {
  bottom: 18px;
  width: 106px;
  height: 78px;
  overflow: visible;
  border: 3px solid rgba(95, 63, 38, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(
      ellipse at 24% 28%,
      rgba(72, 40, 20, 0.38) 0 4px,
      rgba(151, 88, 43, 0.34) 4px 8px,
      transparent 8.5px
    ),
    radial-gradient(
      ellipse at 73% 58%,
      rgba(62, 35, 20, 0.34) 0 3px,
      rgba(175, 105, 54, 0.28) 3px 7px,
      transparent 7.5px
    ),
    repeating-radial-gradient(
      ellipse at 40% 38%,
      rgba(255, 212, 142, 0.22) 0 2px,
      transparent 2px 9px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(55, 31, 18, 0.28) 0 3px,
      transparent 3px 17px,
      rgba(255, 197, 114, 0.2) 17px 20px,
      transparent 20px 30px
    ),
    linear-gradient(
      110deg,
      var(--house-dark) 0%,
      var(--house-color) 44%,
      var(--house-accent) 72%,
      var(--house-dark) 100%
    );
  box-shadow:
    inset 10px 0 0 rgba(255, 201, 122, 0.2),
    inset -15px 0 0 rgba(62, 33, 18, 0.24),
    inset 0 -8px 0 rgba(74, 40, 22, 0.18),
    0 11px 0 rgba(43, 28, 18, 0.22);
  z-index: 4;
}

.house-model.floor-tiny .house-roof {
  bottom: 91px;
  width: 136px;
  height: 74px;
  border-radius: 0;
  background:
    radial-gradient(
      circle at 24% 52%,
      rgba(201, 235, 160, 0.46) 0 6px,
      transparent 7px
    ),
    radial-gradient(
      circle at 66% 36%,
      rgba(155, 205, 120, 0.42) 0 5px,
      transparent 6px
    ),
    repeating-linear-gradient(
      115deg,
      rgba(46, 70, 34, 0.38) 0 4px,
      transparent 4px 13px
    ),
    linear-gradient(
      135deg,
      var(--roof-light) 0%,
      var(--roof-color) 54%,
      var(--roof-dark) 100%
    );
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 4px 0 rgba(95, 63, 38, 0.16))
    drop-shadow(0 8px 0 rgba(41, 26, 17, 0.12));
  box-shadow:
    inset 10px 10px 16px rgba(221, 245, 165, 0.34),
    inset -16px -12px 20px rgba(22, 49, 28, 0.28);
  z-index: 2;
}

.house-model.floor-tiny.roof-hanok .house-roof {
  bottom: 94px;
  width: 148px;
  height: 56px;
  border-radius: 10px 10px 5px 5px;
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(
        circle at 9px 11px,
        rgba(255, 255, 255, 0.28) 0 4px,
        transparent 4.5px
      )
      0 0 / 18px 14px,
    repeating-linear-gradient(
      180deg,
      transparent 0 10px,
      rgba(20, 58, 78, 0.28) 10px 13px
    ),
    linear-gradient(
      180deg,
      var(--roof-light) 0%,
      var(--roof-color) 48%,
      var(--roof-dark) 100%
    );
  filter: drop-shadow(0 4px 0 rgba(95, 63, 38, 0.16))
    drop-shadow(0 8px 0 rgba(41, 26, 17, 0.12));
}

.house-model.floor-tiny.roof-arch .house-roof {
  bottom: 96px;
  width: 142px;
  height: 66px;
  border-radius: 120px 120px 8px 8px;
  clip-path: none;
  background:
    radial-gradient(
        ellipse at 50% 100%,
        transparent 0 55%,
        rgba(65, 41, 48, 0.3) 56%,
        rgba(65, 41, 48, 0.3) 60%,
        transparent 61%
      )
      0 2px / 34px 15px,
    radial-gradient(
        ellipse at 50% 100%,
        transparent 0 55%,
        rgba(255, 255, 255, 0.22) 56%,
        rgba(255, 255, 255, 0.22) 59%,
        transparent 60%
      )
      17px 9px / 34px 15px,
    linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, transparent 38%),
    linear-gradient(
      180deg,
      var(--roof-light),
      var(--roof-color) 56%,
      var(--roof-dark)
    );
  filter: drop-shadow(0 4px 0 rgba(95, 63, 38, 0.16))
    drop-shadow(0 8px 0 rgba(41, 26, 17, 0.12));
}

.house-model.floor-tiny.roof-spire .house-roof {
  bottom: 91px;
  width: 136px;
  height: 74px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.48) 0 18%, transparent 34%),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16),
      transparent 45%,
      rgba(41, 24, 32, 0.26)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 20px,
      rgba(45, 29, 35, 0.36) 20px 22px,
      rgba(255, 255, 255, 0.16) 22px 23px,
      transparent 23px 38px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 12px,
      rgba(45, 29, 35, 0.28) 12px 14px,
      transparent 14px 24px
    ),
    linear-gradient(
      160deg,
      var(--roof-light),
      var(--roof-color) 55%,
      var(--roof-dark)
    );
  filter: drop-shadow(0 4px 0 rgba(95, 63, 38, 0.16))
    drop-shadow(0 8px 0 rgba(41, 26, 17, 0.12));
}

.house-model.floor-tiny.roof-hanok .house-roof::before,
.house-model.floor-tiny.roof-hanok .house-roof::after,
.house-model.floor-tiny.roof-arch .house-roof::before,
.house-model.floor-tiny.roof-arch .house-roof::after,
.house-model.floor-tiny.roof-spire .house-roof::before,
.house-model.floor-tiny.roof-spire .house-roof::after {
  display: none;
}

.house-model.floor-tiny::before {
  content: '';
  position: absolute;
  left: calc(50% + 16px);
  top: 122px;
  width: 16px;
  height: 42px;
  border: 3px solid rgba(95, 63, 38, 0.18);
  border-radius: 4px 4px 2px 2px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(43, 29, 17, 0.2) 0 4px,
      transparent 4px 10px
    ),
    linear-gradient(90deg, #8e4f31, #c17945 48%, #6a3c27);
  box-shadow:
    inset -4px 0 0 rgba(43, 25, 14, 0.28),
    0 3px 0 rgba(43, 29, 17, 0.16);
  z-index: 1;
}

.house-model.floor-tiny::after {
  content: '';
  position: absolute;
  left: calc(50% + 8px);
  top: 82px;
  width: 50px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 35% 70%,
      rgba(255, 255, 255, 0.55) 0 8px,
      transparent 8.5px
    ),
    radial-gradient(
      ellipse at 58% 45%,
      rgba(255, 255, 255, 0.42) 0 10px,
      transparent 10.5px
    ),
    radial-gradient(
      ellipse at 76% 22%,
      rgba(255, 255, 255, 0.28) 0 8px,
      transparent 8.5px
    );
  filter: blur(0.4px);
  opacity: 0.72;
  z-index: 1;
  pointer-events: none;
}

.house-model.floor-tiny .house-body::before,
.house-model.floor-tiny .house-body::after {
  content: '';
  position: absolute;
  inset: 8px auto auto 13px;
  width: 24px;
  height: 13px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    ellipse at center,
    rgba(55, 31, 18, 0.42) 0 1px,
    rgba(191, 116, 58, 0.28) 1px 4px,
    transparent 4px 6px
  );
  opacity: 0.58;
  pointer-events: none;
}

.house-model.floor-tiny .house-body::after {
  left: auto;
  right: 16px;
  top: 46px;
  width: 20px;
  height: 11px;
  transform: rotate(-8deg);
}

.house-model.floor-tiny .floor-list {
  display: none;
}

.floor-style-grid .option-visual .house-model.floor-tiny::before,
.floor-style-grid .option-visual .house-model.floor-tiny::after {
  display: block;
}

.house-model.floor-small .house-body {
  bottom: 38px;
  width: 148px;
  height: 108px;
  overflow: visible;
  border: 3px solid rgba(95, 63, 38, 0.18);
  border-radius: 10px 10px 8px 8px;
  background:
    radial-gradient(
      ellipse at 18% 35%,
      rgba(70, 39, 18, 0.38) 0 4px,
      rgba(189, 112, 54, 0.25) 4px 8px,
      transparent 8.5px
    ),
    radial-gradient(
      ellipse at 78% 64%,
      rgba(70, 39, 18, 0.3) 0 3px,
      rgba(189, 112, 54, 0.22) 3px 7px,
      transparent 7.5px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(72, 43, 20, 0.46) 0 3px,
      transparent 3px 14px,
      rgba(255, 214, 142, 0.2) 14px 17px,
      transparent 17px 24px
    ),
    linear-gradient(
      115deg,
      var(--house-dark) 0%,
      var(--house-color) 42%,
      var(--house-accent) 74%,
      var(--house-dark) 100%
    );
  box-shadow:
    inset 10px 0 0 rgba(255, 225, 162, 0.2),
    inset -14px 0 0 rgba(72, 43, 20, 0.24),
    inset 0 -9px 0 rgba(70, 40, 22, 0.16),
    0 12px 0 rgba(58, 38, 22, 0.18);
  z-index: 4;
}

.house-model.floor-small .house-roof {
  bottom: 138px;
  width: 172px;
  height: 70px;
}

.house-model.floor-small .house-body::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 24px;
  width: 20px;
  height: 78px;
  border: 3px solid rgba(95, 63, 38, 0.18);
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 50% 13%,
      #f2c57b 0 3px,
      #9f602c 3px 8px,
      rgba(95, 63, 38, 0.24) 8px 10px,
      transparent 10.5px
    ),
    repeating-linear-gradient(
      0deg,
      #7f4b28 0 4px,
      #c8793d 4px 11px,
      #5f341d 11px 14px
    );
  box-shadow:
    150px 0 0 -3px #8a5129,
    150px 0 0 0 rgba(95, 63, 38, 0.22),
    inset -4px 0 0 rgba(62, 35, 18, 0.22);
  z-index: 2;
  pointer-events: none;
}

.house-model.floor-small .house-body::after {
  content: '';
  position: absolute;
  left: 24%;
  top: -4px;
  width: 52%;
  height: 33px;
  border: 3px solid rgba(95, 63, 38, 0.18);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(78, 49, 25, 0.28) 0 2px,
      transparent 2px 13px
    ),
    linear-gradient(180deg, rgba(120, 72, 34, 0.4), rgba(76, 45, 22, 0.25));
  box-shadow:
    inset 0 -8px 0 rgba(68, 39, 20, 0.12),
    0 3px 0 rgba(255, 227, 164, 0.18);
  pointer-events: none;
}

.house-model.floor-small .floor-list {
  position: absolute;
  left: 50%;
  bottom: -52px;
  width: 252px;
  height: 88px;
  padding: 0;
  display: block;
  transform: translateX(-50%);
  border-radius: 50% 50% 18px 18px / 24% 24% 16px 16px;
  background:
    radial-gradient(ellipse at 45% 76%, #d7d0bf 0 9px, transparent 9.5px),
    radial-gradient(ellipse at 52% 61%, #c7c0ad 0 8px, transparent 8.5px),
    radial-gradient(ellipse at 58% 46%, #ded6c6 0 7px, transparent 7.5px),
    radial-gradient(circle at 18% 78%, #f2a3d3 0 2px, transparent 2.5px),
    radial-gradient(circle at 23% 71%, #b995e9 0 2px, transparent 2.5px),
    radial-gradient(circle at 79% 76%, #f2a3d3 0 2px, transparent 2.5px),
    radial-gradient(circle at 84% 68%, #b995e9 0 2px, transparent 2.5px),
    linear-gradient(
      180deg,
      transparent 0 28px,
      #fffaf0 28px 34px,
      transparent 34px 43px,
      #fffaf0 43px 49px,
      transparent 49px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      #fffaf0 9px 17px,
      transparent 17px 26px
    ),
    radial-gradient(ellipse at 50% 100%, #9fe285 0 64%, transparent 65%);
  filter: drop-shadow(0 8px 0 rgba(52, 35, 21, 0.08));
  z-index: 1;
  pointer-events: none;
}

.house-model.floor-small .floor-list::before,
.house-model.floor-small .floor-list::after {
  content: '';
  position: absolute;
  bottom: 24px;
  width: 72px;
  height: 96px;
  border-radius: 42px 42px 20px 20px;
  background:
    linear-gradient(
        90deg,
        transparent calc(50% - 4px),
        #6f4725 calc(50% - 4px) calc(50% + 4px),
        transparent calc(50% + 4px)
      )
      0 44px / 100% 52px no-repeat,
    radial-gradient(circle at 44% 20%, #b9ee83 0 18px, transparent 19px),
    radial-gradient(circle at 25% 39%, #7ecb65 0 17px, transparent 18px),
    radial-gradient(circle at 63% 41%, #71bd5e 0 20px, transparent 21px),
    radial-gradient(circle at 43% 58%, #5fae4e 0 22px, transparent 23px),
    linear-gradient(150deg, #b8ee87, #5aa94d);
  filter: drop-shadow(0 6px 0 rgba(57, 42, 24, 0.16));
  z-index: -1;
}

.house-model.floor-small .floor-list::before {
  left: -8px;
  transform: scale(0.92) rotate(-3deg);
}

.house-model.floor-small .floor-list::after {
  right: -12px;
  transform: scale(1.08) rotate(4deg);
}

.house-model.floor-small .floor-row {
  display: none;
}

.house-model.floor-balanced {
  --stable-body-bottom: 1.875rem;
  --stable-body-width: 12.625rem;
  --stable-body-height: 8.875rem;
  --stable-roof-bottom: 10.5rem;
  --stable-roof-width: 14.75rem;
  --stable-roof-height: 5.5rem;
  --stable-porch-width: 4.625rem;
  --stable-porch-height: 5.5rem;
  --stable-yard-width: 19.875rem;
  --stable-yard-height: 6.125rem;
  width: var(--stable-yard-width);
  height: 18.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.house-model.floor-balanced .house-body {
  bottom: var(--stable-body-bottom);
  width: var(--stable-body-width);
  height: var(--stable-body-height);
  overflow: visible;
  border: 0.1875rem solid rgba(95, 63, 38, 0.18);
  border-radius: 0.75rem 0.75rem 0.5625rem 0.5625rem;
  background:
    repeating-linear-gradient(
      28deg,
      rgba(74, 55, 36, 0.045) 0 0.0625rem,
      transparent 0.0625rem 0.95rem
    ),
    repeating-linear-gradient(
      148deg,
      rgba(255, 255, 255, 0.055) 0 0.0625rem,
      transparent 0.0625rem 1.25rem
    ),
    linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.22) 0 0.125rem,
        transparent 0.125rem 2.125rem
      )
      0.25rem 0 / 2.125rem 100%,
    linear-gradient(
        0deg,
        rgba(83, 63, 42, 0.08) 0 0.125rem,
        transparent 0.125rem 1.75rem
      )
      0 0.6875rem / 100% 1.75rem,
    radial-gradient(
      circle at 27% 12%,
      rgba(255, 255, 255, 0.35),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--house-light, #f4e8cf) 0%,
      #e3d4b6 48%,
      var(--house-dark, #c3ae88) 100%
    );
  box-shadow:
    inset 0.5625rem 0 0 rgba(255, 255, 255, 0.2),
    inset -0.75rem 0 0 rgba(88, 65, 42, 0.14),
    inset 0 -0.5rem 0 rgba(98, 72, 45, 0.12),
    0 0.8125rem 0 rgba(43, 29, 17, 0.16);
  z-index: 4;
}

.house-model.floor-balanced .house-roof {
  bottom: var(--stable-roof-bottom);
  width: var(--stable-roof-width);
  height: var(--stable-roof-height);
}

.house-model.floor-balanced .house-body::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.1875rem;
  width: var(--stable-porch-width);
  height: var(--stable-porch-height);
  border: 0.1875rem solid rgba(95, 63, 38, 0.18);
  border-bottom: 0;
  border-radius: 0.625rem 0.625rem 0 0;
  background:
    repeating-linear-gradient(
      35deg,
      rgba(79, 58, 36, 0.06) 0 0.0625rem,
      transparent 0.0625rem 0.7rem
    ),
    repeating-linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.06) 0 0.0625rem,
      transparent 0.0625rem 0.95rem
    ),
    linear-gradient(
      90deg,
      rgba(78, 53, 30, 0.22) 0 0.1875rem,
      transparent 0.1875rem 1.6875rem,
      rgba(78, 53, 30, 0.22) 1.6875rem 1.875rem,
      transparent 1.875rem
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 226, 0.52),
      rgba(189, 170, 132, 0.34)
    );
  transform: translateX(-50%);
  box-shadow:
    inset 0.375rem 0 0 rgba(255, 255, 255, 0.18),
    inset -0.4375rem 0 0 rgba(73, 49, 28, 0.12),
    0 -0.4375rem 0 rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.house-model.floor-balanced .house-body::after {
  content: '';
  position: absolute;
  left: 21%;
  top: -0.25rem;
  width: 58%;
  height: 2.125rem;
  border: 0.1875rem solid rgba(95, 63, 38, 0.18);
  border-top: 0;
  border-radius: 0 0 0.875rem 0.875rem;
  background:
    repeating-linear-gradient(
      32deg,
      rgba(82, 61, 39, 0.055) 0 0.0625rem,
      transparent 0.0625rem 0.8rem
    ),
    linear-gradient(
      90deg,
      rgba(75, 52, 31, 0.18) 0 0.1875rem,
      transparent 0.1875rem 1.1875rem
    ),
    linear-gradient(180deg, rgba(166, 145, 106, 0.42), rgba(92, 66, 39, 0.12));
  box-shadow:
    inset 0 -0.5rem 0 rgba(74, 53, 31, 0.08),
    0 0.1875rem 0 rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.house-model.floor-balanced .floor-list {
  position: absolute;
  left: 50%;
  bottom: -3.5rem;
  width: var(--stable-yard-width);
  height: var(--stable-yard-height);
  padding: 0;
  display: block;
  transform: translateX(-50%);
  border-radius: 50% 50% 20px 20px / 24% 24% 16px 16px;
  background:
    radial-gradient(
      ellipse at 40% 69%,
      rgba(125, 201, 91, 0.72) 0 30%,
      transparent 31%
    ),
    radial-gradient(
      ellipse at 60% 68%,
      rgba(92, 176, 76, 0.56) 0 33%,
      transparent 34%
    ),
    linear-gradient(
      168deg,
      transparent 0 46%,
      rgba(104, 187, 75, 0.42) 46% 57%,
      transparent 57%
    ),
    radial-gradient(ellipse at 50% 100%, #9ae178 0 66%, transparent 67%);
  filter: drop-shadow(0 8px 0 rgba(45, 32, 20, 0.08));
  z-index: 1;
  pointer-events: none;
}

.house-model.floor-balanced .floor-list::before,
.house-model.floor-balanced .floor-list::after {
  content: '';
  position: absolute;
  bottom: 1.5625rem;
  width: 5.375rem;
  height: 4rem;
  border: 0.1875rem solid rgba(43, 29, 17, 0.18);
  border-radius: 2.8125rem 2.8125rem 1.125rem 1.125rem;
  background:
    radial-gradient(circle at 28% 54%, #7cc760 0 15px, transparent 16px),
    radial-gradient(circle at 52% 34%, #b5e985 0 18px, transparent 19px),
    radial-gradient(circle at 73% 56%, #68b953 0 17px, transparent 18px),
    linear-gradient(135deg, #a9e67c, #5cac4e);
  box-shadow:
    inset 0.375rem 0.4375rem 0 rgba(255, 255, 255, 0.16),
    inset -0.4375rem -0.5rem 0 rgba(42, 106, 44, 0.16),
    0 0.375rem 0 rgba(55, 42, 24, 0.12);
  z-index: -1;
}

.house-model.floor-balanced .floor-list::before {
  left: 1.25rem;
}

.house-model.floor-balanced .floor-list::after {
  right: 1.25rem;
}

.house-model.floor-balanced .floor-row {
  display: none;
}

.house-model.floor-balanced.roof-hanok .house-roof {
  bottom: 10.625rem;
  width: 14.75rem;
  height: 6.125rem;
}

.house-model.floor-balanced.roof-arch .house-roof {
  bottom: 10.625rem;
  width: 14.5rem;
  height: 5.5rem;
}

.house-model.floor-balanced.roof-spire .house-roof {
  bottom: 10.5rem;
  width: 14.125rem;
  height: 6.5rem;
}

.house-model.floor-open {
  --open-body-bottom: 1.65rem;
  --open-body-width: 13.9rem;
  --open-body-height: 10.25rem;
  --open-roof-bottom: 11.45rem;
  --open-roof-width: 16.25rem;
  --open-roof-height: 5.6rem;
  --open-yard-width: 21.8rem;
  --open-yard-height: 6.35rem;
  width: var(--open-yard-width);
  height: 18.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.house-model.floor-open .house-body {
  bottom: var(--open-body-bottom);
  width: var(--open-body-width);
  height: var(--open-body-height);
  overflow: visible;
  border: 0.1875rem solid rgba(95, 63, 38, 0.18);
  border-radius: 0.875rem 0.875rem 0.625rem 0.625rem;
  background:
    linear-gradient(
      90deg,
      transparent 0 29%,
      rgba(43, 29, 17, 0.22) 29% 31%,
      transparent 31% 69%,
      rgba(43, 29, 17, 0.22) 69% 71%,
      transparent 71%
    ),
    linear-gradient(
      0deg,
      transparent 0 48%,
      rgba(43, 29, 17, 0.42) 48% 52%,
      transparent 52%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(90, 68, 42, 0.04) 0 0.0625rem,
      transparent 0.0625rem 1rem
    ),
    repeating-linear-gradient(
      0deg,
      rgba(90, 68, 42, 0.045) 0 0.0625rem,
      transparent 0.0625rem 0.9rem
    ),
    radial-gradient(
      circle at 25% 17%,
      rgba(255, 255, 255, 0.52),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #fffaf0 0%,
      var(--house-light, #fff0c6) 48%,
      var(--house-color) 72%,
      var(--house-dark) 100%
    );
  box-shadow:
    inset 0.625rem 0 0 rgba(255, 255, 255, 0.22),
    inset -0.875rem 0 0 rgba(96, 66, 38, 0.12),
    inset 0 -0.625rem 0 rgba(96, 66, 38, 0.1),
    0 0.9rem 0 rgba(43, 29, 17, 0.14);
  z-index: 4;
}

.house-model.floor-open .house-roof {
  bottom: var(--open-roof-bottom);
  width: var(--open-roof-width);
  height: var(--open-roof-height);
}

.house-model.floor-open .house-body::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 2.15rem;
  width: 5.75rem;
  height: 2.55rem;
  border: 0.1875rem solid rgba(95, 63, 38, 0.18);
  border-radius: 0.625rem 0.625rem 0.25rem 0.25rem;
  background:
    linear-gradient(
      90deg,
      rgba(43, 29, 17, 0.22) 0 0.18rem,
      transparent 0.18rem 1.65rem,
      rgba(43, 29, 17, 0.22) 1.65rem 1.83rem,
      transparent 1.83rem
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.36),
      rgba(218, 184, 126, 0.18)
    );
  transform: translateX(-50%);
  box-shadow:
    -1.55rem 4.85rem 0 -1.18rem rgba(95, 63, 38, 0.18),
    1.55rem 4.85rem 0 -1.18rem rgba(95, 63, 38, 0.18),
    inset 0 -0.35rem 0 rgba(88, 58, 32, 0.12),
    0 0.35rem 0 rgba(43, 29, 17, 0.16);
  pointer-events: none;
}

.house-model.floor-open .house-body::after {
  content: '';
  position: absolute;
  left: -0.1875rem;
  right: -0.1875rem;
  top: 49%;
  height: 0.6rem;
  border-top: 0.1875rem solid rgba(95, 63, 38, 0.18);
  border-bottom: 0.1875rem solid rgba(95, 63, 38, 0.18);
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.24),
      rgba(231, 188, 112, 0.18)
    ),
    #f7dfaf;
  box-shadow:
    0 -4.75rem 0 -0.28rem rgba(255, 255, 255, 0.18),
    0 0.35rem 0 rgba(43, 29, 17, 0.1);
  pointer-events: none;
}

.house-model.floor-open .floor-list {
  position: absolute;
  left: 50%;
  bottom: -3.6rem;
  width: var(--open-yard-width);
  height: var(--open-yard-height);
  padding: 0;
  display: block;
  transform: translateX(-50%);
  border-radius: 50% 50% 1.25rem 1.25rem / 24% 24% 16% 16%;
  background:
    radial-gradient(ellipse at 50% 74%, #ded7c7 0 0.52rem, transparent 0.56rem),
    radial-gradient(ellipse at 50% 58%, #c7c1b0 0 0.46rem, transparent 0.5rem),
    radial-gradient(ellipse at 50% 43%, #e3dccb 0 0.4rem, transparent 0.44rem),
    radial-gradient(ellipse at 50% 28%, #cfc8b7 0 0.34rem, transparent 0.38rem),
    linear-gradient(
      180deg,
      transparent 0 38%,
      rgba(143, 214, 91, 0.34) 38% 53%,
      transparent 53%
    ),
    radial-gradient(ellipse at 50% 100%, #a8eb73 0 66%, transparent 67%);
  filter: drop-shadow(0 0.5rem 0 rgba(45, 32, 20, 0.08));
  z-index: 1;
  pointer-events: none;
}

.house-model.floor-open .floor-list::before,
.house-model.floor-open .floor-list::after {
  content: '';
  position: absolute;
  bottom: 2.1rem;
  width: 6.7rem;
  height: 7.7rem;
  background:
    linear-gradient(
        90deg,
        transparent 0 1.3rem,
        #6f4725 1.3rem 1.65rem,
        transparent 1.65rem 4.8rem,
        #6f4725 4.8rem 5.15rem,
        transparent 5.15rem
      )
      0 4.1rem / 100% 3.6rem no-repeat,
    radial-gradient(circle at 22% 25%, #bdf08c 0 1.05rem, transparent 1.1rem),
    radial-gradient(circle at 38% 14%, #8ed46b 0 1.2rem, transparent 1.25rem),
    radial-gradient(circle at 56% 25%, #7ac85d 0 1.1rem, transparent 1.15rem),
    radial-gradient(circle at 78% 16%, #b7ec83 0 1.05rem, transparent 1.1rem),
    radial-gradient(circle at 28% 43%, #66b753 0 1.15rem, transparent 1.2rem),
    radial-gradient(circle at 70% 42%, #5eaa4f 0 1.2rem, transparent 1.25rem);
  filter: drop-shadow(0 0.45rem 0 rgba(57, 42, 24, 0.14));
  z-index: -1;
}

.house-model.floor-open .floor-list::before {
  left: -0.6rem;
  transform: rotate(-3deg);
}

.house-model.floor-open .floor-list::after {
  right: -0.6rem;
  transform: rotate(3deg);
}

.house-model.floor-open .floor-row {
  display: none;
}

.house-model.floor-grand {
  --castle-wall: var(--house-color, #d3d3d3);
  --castle-light: var(--house-light, #eeeeea);
  --castle-mid: var(--house-accent, #bfc1bf);
  --castle-dark: var(--house-dark, #8f918f);
  --castle-outline: rgba(95, 63, 38, 0.18);
  --castle-body-bottom: 1.7rem;
  --castle-body-width: 11.8rem;
  --castle-body-height: 14rem;
  --castle-yard-width: 22rem;
  --castle-yard-height: 7rem;
  width: var(--castle-yard-width);
  height: 20rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.house-model.floor-grand .house-body {
  bottom: var(--castle-body-bottom);
  width: var(--castle-body-width);
  height: var(--castle-body-height);
  overflow: visible;
  border: 0.16rem solid var(--castle-outline);
  border-radius: 0.45rem 0.45rem 0.35rem 0.35rem;
  background:
    radial-gradient(
      ellipse at 50% 63%,
      rgba(55, 43, 34, 0.38) 0 0.62rem,
      transparent 0.68rem
    ),
    radial-gradient(
      ellipse at 30% 38%,
      rgba(55, 43, 34, 0.28) 0 0.46rem,
      transparent 0.52rem
    ),
    radial-gradient(
      ellipse at 70% 39%,
      rgba(55, 43, 34, 0.28) 0 0.46rem,
      transparent 0.52rem
    ),
    repeating-linear-gradient(
      90deg,
      rgba(45, 34, 26, 0.11) 0 0.125rem,
      transparent 0.125rem 2rem
    ),
    repeating-linear-gradient(
      0deg,
      rgba(45, 34, 26, 0.12) 0 0.125rem,
      transparent 0.125rem 1.15rem
    ),
    radial-gradient(
      circle at 26% 13%,
      rgba(255, 255, 255, 0.5),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--castle-light) 0%,
      var(--castle-wall) 48%,
      var(--castle-mid) 78%,
      var(--castle-dark) 100%
    );
  clip-path: polygon(
    0 18%,
    7% 18%,
    7% 4%,
    17% 4%,
    17% 18%,
    27% 18%,
    27% 4%,
    37% 4%,
    37% 18%,
    43% 18%,
    43% 0,
    57% 0,
    57% 18%,
    63% 18%,
    63% 4%,
    73% 4%,
    73% 18%,
    83% 18%,
    83% 4%,
    93% 4%,
    93% 18%,
    100% 18%,
    100% 100%,
    0 100%
  );
  box-shadow:
    inset 0.75rem 0 0 rgba(255, 255, 255, 0.2),
    inset -0.95rem 0 0 rgba(43, 29, 17, 0.18),
    inset 0 -0.8rem 0 rgba(43, 29, 17, 0.14),
    0 1rem 0 rgba(43, 29, 17, 0.17);
  z-index: 5;
}

.house-model.floor-grand .house-roof {
  bottom: calc(var(--castle-body-bottom) + var(--castle-body-height) - 0.2rem);
  width: calc(var(--castle-body-width) + 2.2rem);
  transform: translateX(-50%);
}

.house-model.floor-grand .castle-side-walls {
  position: absolute;
  left: 50%;
  bottom: var(--castle-body-bottom);
  width: var(--castle-body-width);
  height: var(--castle-body-height);
  transform: translateX(-50%);
  background: none;
  border: 0;
  box-shadow: none;
  clip-path: none;
  z-index: 4;
  pointer-events: none;
}

.house-model.floor-grand .castle-side-walls::before,
.house-model.floor-grand .castle-side-walls::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 5.2rem;
  height: 10.5rem;
  border: 0.16rem solid var(--castle-outline);
  border-radius: 0.35rem;
  background:
    radial-gradient(
      ellipse at 50% 48%,
      rgba(55, 43, 34, 0.3) 0 0.48rem,
      transparent 0.54rem
    ),
    repeating-linear-gradient(
      90deg,
      rgba(45, 34, 26, 0.1) 0 0.125rem,
      transparent 0.125rem 1.55rem
    ),
    repeating-linear-gradient(
      0deg,
      rgba(45, 34, 26, 0.12) 0 0.125rem,
      transparent 0.125rem 1rem
    ),
    radial-gradient(
      circle at 36% 16%,
      rgba(255, 255, 255, 0.45),
      transparent 34%
    ),
    linear-gradient(
      150deg,
      var(--castle-light),
      var(--castle-wall) 55%,
      var(--castle-dark)
    );
  clip-path: polygon(
    0 18%,
    15% 18%,
    15% 0,
    34% 0,
    34% 18%,
    47% 18%,
    47% 0,
    66% 0,
    66% 18%,
    81% 18%,
    81% 0,
    100% 0,
    100% 100%,
    0 100%
  );
  box-shadow:
    inset 0.5rem 0 0 rgba(255, 255, 255, 0.18),
    inset -0.6rem 0 0 rgba(43, 29, 17, 0.14),
    0 0.8rem 0 rgba(43, 29, 17, 0.12);
  z-index: -1;
}

.house-model.floor-grand .castle-side-walls::before {
  left: -4.5rem;
}

.house-model.floor-grand .castle-side-walls::after {
  right: -4.5rem;
}

.house-model.floor-grand .floor-list {
  position: absolute;
  left: 50%;
  bottom: -4.1rem;
  width: var(--castle-yard-width);
  height: var(--castle-yard-height);
  padding: 0;
  display: block;
  transform: translateX(-50%);
  border-radius: 46% 46% 1.5rem 1.5rem / 24% 24% 18% 18%;
  background:
    radial-gradient(circle at 14% 44%, #355e3e 0 0.55rem, transparent 0.6rem),
    radial-gradient(circle at 86% 42%, #2d573b 0 0.55rem, transparent 0.6rem),
    radial-gradient(ellipse at 50% 55%, #b9b2a1 0 0.55rem, transparent 0.6rem),
    radial-gradient(ellipse at 43% 61%, #8b8474 0 0.5rem, transparent 0.55rem),
    radial-gradient(ellipse at 57% 66%, #a49c8a 0 0.52rem, transparent 0.57rem),
    repeating-radial-gradient(
      circle at 42% 78%,
      rgba(92, 70, 49, 0.22) 0 0.12rem,
      transparent 0.12rem 0.65rem
    ),
    radial-gradient(ellipse at 50% 100%, #7b6245 0 68%, transparent 69%);
  filter: drop-shadow(0 0.55rem 0 rgba(43, 29, 17, 0.1));
  z-index: 1;
  pointer-events: none;
}

.house-model.floor-grand .floor-list::before,
.house-model.floor-grand .floor-list::after {
  content: '';
  position: absolute;
  bottom: 1.8rem;
  width: 7.6rem;
  height: 9.1rem;
  background:
    linear-gradient(
        90deg,
        transparent 0 1.65rem,
        #513516 1.65rem 2rem,
        transparent 2rem 5.3rem,
        #513516 5.3rem 5.65rem,
        transparent 5.65rem
      )
      0 5.8rem / 100% 3.3rem no-repeat,
    linear-gradient(135deg, transparent 0 34%, #26533c 34% 66%, transparent 66%)
      0 0 / 2.25rem 4.1rem,
    linear-gradient(135deg, transparent 0 34%, #3f7b48 34% 66%, transparent 66%)
      1.65rem 0.75rem / 2.25rem 4.15rem,
    linear-gradient(135deg, transparent 0 34%, #234f38 34% 66%, transparent 66%)
      3.3rem 0.2rem / 2.25rem 4.25rem,
    linear-gradient(135deg, transparent 0 34%, #4a8a50 34% 66%, transparent 66%)
      4.95rem 1rem / 2.25rem 4.2rem,
    radial-gradient(circle at 18% 83%, #253f2f 0 0.4rem, transparent 0.45rem),
    radial-gradient(circle at 52% 82%, #315b3b 0 0.45rem, transparent 0.5rem);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0.45rem 0 rgba(24, 21, 16, 0.18));
  z-index: -1;
}

.house-model.floor-grand .floor-list::before {
  left: -0.55rem;
}

.house-model.floor-grand .floor-list::after {
  right: -0.55rem;
  transform: scaleX(-1);
}

.house-model.floor-grand .floor-row {
  display: none;
}

.house-model.floor-grand.roof-chimney::before,
.house-model.floor-open.roof-chimney::before,
.house-model.floor-balanced.roof-chimney::before,
.house-model.floor-small.roof-chimney::before,
.house-model.floor-tiny.roof-chimney::before {
  top: 24px;
  left: calc(50% + 34px);
}

.house-model.floor-grand.roof-chimney::after,
.house-model.floor-open.roof-chimney::after,
.house-model.floor-balanced.roof-chimney::after,
.house-model.floor-small.roof-chimney::after,
.house-model.floor-tiny.roof-chimney::after {
  top: 16px;
  left: calc(50% + 29px);
}

.house-model.floor-tiny.roof-chimney::before {
  top: 122px;
  left: calc(50% + 16px);
  z-index: 1;
}

.house-model.floor-tiny.roof-chimney::after {
  top: 82px;
  left: calc(50% + 8px);
  z-index: 1;
}

.house-model.floor-grand.roof-chimney::before,
.house-model.floor-grand.roof-chimney::after {
  display: none;
}

/* 새 지붕 에셋 5종: 집 본체 위에 갈아 끼우는 별도 레이어입니다. */
.roof-sample.roof-flat .house-roof,
.roof-sample.roof-tall-triangle .house-roof,
.roof-sample.roof-moss-dome .house-roof,
.roof-sample.roof-attic-window .house-roof,
.roof-sample.roof-asymmetric .house-roof,
.house-model.roof-flat .house-roof,
.house-model.roof-tall-triangle .house-roof,
.house-model.roof-moss-dome .house-roof,
.house-model.roof-attic-window .house-roof,
.house-model.roof-asymmetric .house-roof {
  border: 3px solid rgba(95, 63, 38, 0.18);
  box-sizing: border-box;
  overflow: visible;
  z-index: 7;
  filter: drop-shadow(0 4px 0 rgba(43, 29, 17, 0.52))
    drop-shadow(0 10px 10px rgba(43, 29, 17, 0.18));
}

.roof-sample.roof-flat .house-roof::before,
.roof-sample.roof-flat .house-roof::after,
.roof-sample.roof-tall-triangle .house-roof::before,
.roof-sample.roof-tall-triangle .house-roof::after,
.roof-sample.roof-moss-dome .house-roof::before,
.roof-sample.roof-moss-dome .house-roof::after,
.roof-sample.roof-attic-window .house-roof::before,
.roof-sample.roof-attic-window .house-roof::after,
.roof-sample.roof-asymmetric .house-roof::before,
.roof-sample.roof-asymmetric .house-roof::after,
.house-model.roof-flat .house-roof::before,
.house-model.roof-flat .house-roof::after,
.house-model.roof-tall-triangle .house-roof::before,
.house-model.roof-tall-triangle .house-roof::after,
.house-model.roof-moss-dome .house-roof::before,
.house-model.roof-moss-dome .house-roof::after,
.house-model.roof-attic-window .house-roof::before,
.house-model.roof-attic-window .house-roof::after,
.house-model.roof-asymmetric .house-roof::before,
.house-model.roof-asymmetric .house-roof::after {
  content: '';
  position: absolute;
  display: none;
  pointer-events: none;
}

.roof-sample.roof-flat .house-roof,
.house-model.roof-flat .house-roof {
  height: 3.55rem;
  border-radius: 0.35rem 0.35rem 0.15rem 0.15rem;
  clip-path: polygon(9% 22%, 91% 22%, 100% 100%, 0 100%);
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.45) 0 22%,
      transparent 23% 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(80, 56, 31, 0.2) 0 0.11rem,
      transparent 0.11rem 1.05rem
    ),
    repeating-linear-gradient(
      0deg,
      rgba(80, 56, 31, 0.16) 0 0.08rem,
      transparent 0.08rem 0.72rem
    ),
    linear-gradient(
      180deg,
      var(--roof-light) 0%,
      var(--roof-color) 58%,
      var(--roof-dark) 100%
    );
  box-shadow:
    inset 0.7rem 0.55rem 0 rgba(255, 245, 214, 0.24),
    inset -0.85rem -0.5rem 0 rgba(82, 47, 24, 0.22);
}

.roof-sample.roof-tall-triangle .house-roof,
.house-model.roof-tall-triangle .house-roof {
  height: 6.8rem;
  border-radius: 0;
  clip-path: polygon(50% 0, 98% 100%, 2% 100%);
  background:
    linear-gradient(
      118deg,
      rgba(255, 230, 181, 0.28) 0 23%,
      transparent 24% 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(42, 23, 11, 0.28) 0 0.12rem,
      transparent 0.12rem 1.15rem
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 210, 146, 0.11) 0 0.12rem,
      transparent 0.12rem 0.92rem
    ),
    linear-gradient(
      160deg,
      var(--roof-light) 0%,
      var(--roof-color) 55%,
      var(--roof-deep) 100%
    );
  box-shadow:
    inset 0.8rem 0.65rem 0 rgba(255, 226, 178, 0.18),
    inset -1rem -0.75rem 0 rgba(23, 12, 7, 0.24);
}

.roof-sample.roof-moss-dome .house-roof,
.house-model.roof-moss-dome .house-roof {
  height: 4.95rem;
  border-radius: 3.6rem 3.6rem 0.45rem 0.45rem;
  clip-path: polygon(
    0 100%,
    4% 72%,
    13% 48%,
    28% 24%,
    50% 8%,
    72% 24%,
    87% 48%,
    96% 72%,
    100% 100%
  );
  background:
    radial-gradient(
      circle at 22% 58%,
      rgba(255, 255, 255, 0.24) 0 0.42rem,
      transparent 0.46rem
    ),
    radial-gradient(
      circle at 58% 34%,
      rgba(255, 255, 255, 0.16) 0 0.36rem,
      transparent 0.4rem
    ),
    radial-gradient(
      circle at 78% 63%,
      rgba(35, 35, 35, 0.12) 0 0.34rem,
      transparent 0.38rem
    ),
    repeating-linear-gradient(
      115deg,
      rgba(30, 35, 37, 0.18) 0 0.15rem,
      transparent 0.15rem 0.82rem
    ),
    linear-gradient(
      160deg,
      var(--roof-light) 0%,
      var(--roof-color) 58%,
      var(--roof-dark) 100%
    );
  box-shadow:
    inset 0.85rem 0.72rem 0 rgba(220, 245, 170, 0.22),
    inset -0.9rem -0.78rem 0 rgba(20, 55, 28, 0.26);
}

.roof-sample.roof-attic-window .house-roof,
.house-model.roof-attic-window .house-roof {
  height: 5.4rem;
  border-radius: 0.28rem;
  clip-path: polygon(50% 0, 100% 82%, 94% 100%, 6% 100%, 0 82%);
  background:
    linear-gradient(
      120deg,
      rgba(255, 247, 218, 0.38) 0 20%,
      transparent 21% 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(87, 45, 17, 0.24) 0 0.12rem,
      transparent 0.12rem 0.95rem
    ),
    repeating-linear-gradient(
      0deg,
      rgba(87, 45, 17, 0.18) 0 0.12rem,
      transparent 0.12rem 0.78rem
    ),
    linear-gradient(
      160deg,
      var(--roof-light) 0%,
      var(--roof-color) 58%,
      var(--roof-dark) 100%
    );
  box-shadow:
    inset 0.75rem 0.7rem 0 rgba(255, 236, 186, 0.24),
    inset -0.9rem -0.65rem 0 rgba(89, 39, 11, 0.25);
}

.roof-sample.roof-attic-window .house-roof::before,
.house-model.roof-attic-window .house-roof::before {
  display: block;
  left: 50%;
  bottom: 0.72rem;
  width: 2.4rem;
  height: 2.15rem;
  border: 0.18rem solid rgba(95, 63, 38, 0.18);
  border-radius: 0.15rem 0.15rem 0.38rem 0.38rem;
  background:
    linear-gradient(
      90deg,
      transparent 46%,
      rgba(43, 29, 17, 0.75) 47% 53%,
      transparent 54%
    ),
    linear-gradient(
      0deg,
      transparent 46%,
      rgba(43, 29, 17, 0.75) 47% 53%,
      transparent 54%
    ),
    linear-gradient(145deg, #d6f1ff 0%, #85c4df 70%, #4a8fb0 100%);
  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);
  transform: translateX(-50%);
  box-shadow:
    inset 0.28rem 0.2rem 0 rgba(255, 255, 255, 0.32),
    0 0.28rem 0 rgba(43, 29, 17, 0.22);
}

.roof-sample.roof-asymmetric .house-roof,
.house-model.roof-asymmetric .house-roof {
  height: 5.15rem;
  border-radius: 0.28rem 0.28rem 0.12rem 0.12rem;
  clip-path: polygon(2% 62%, 70% 10%, 100% 100%, 0 100%);
  background:
    linear-gradient(
      128deg,
      rgba(255, 255, 255, 0.28) 0 18%,
      transparent 19% 100%
    ),
    repeating-linear-gradient(
      105deg,
      rgba(15, 18, 20, 0.24) 0 0.12rem,
      transparent 0.12rem 0.88rem
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.08) 0 0.11rem,
      transparent 0.11rem 0.82rem
    ),
    linear-gradient(
      155deg,
      var(--roof-light) 0%,
      var(--roof-color) 60%,
      var(--roof-deep) 100%
    );
  box-shadow:
    inset 0.75rem 0.6rem 0 rgba(255, 255, 255, 0.15),
    inset -1rem -0.7rem 0 rgba(18, 20, 22, 0.28);
}

.roof-sample.roof-flat .house-roof,
.roof-sample.roof-tall-triangle .house-roof,
.roof-sample.roof-moss-dome .house-roof,
.roof-sample.roof-attic-window .house-roof,
.roof-sample.roof-asymmetric .house-roof {
  left: 50%;
  bottom: 1.55rem;
  width: 12.4rem;
  transform: translateX(-50%);
}

.roof-sample.roof-tall-triangle .house-roof {
  width: 11rem;
}

.roof-sample.roof-moss-dome .house-roof {
  width: 12rem;
}

.roof-sample.roof-asymmetric .house-roof {
  width: 12.25rem;
}

/* 큰 성은 성벽 실루엣 자체가 완성형이라 별도 지붕 레이어를 숨깁니다. */
.house-model.floor-grand .house-roof {
  display: none;
}

@media (max-width: 860px) {
  .floor-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Soft emotional layout override: dark outlines are replaced with light, rounded depth. */
:root {
  --soft-edge: rgba(142, 105, 73, 0.18);
  --soft-edge-strong: rgba(116, 82, 55, 0.24);
  --soft-drop:
    0 10px 18px rgba(96, 64, 37, 0.12), 0 3px 6px rgba(96, 64, 37, 0.08);
  --soft-float:
    0 18px 36px rgba(103, 75, 45, 0.13), -8px -8px 22px rgba(255, 255, 255, 0.7);
  --soft-inner:
    inset 4px 5px 12px rgba(255, 255, 255, 0.62),
    inset -7px -9px 18px rgba(118, 84, 52, 0.12);
}

body[data-theme='dark'] {
  --soft-edge: rgba(127, 215, 198, 0.18);
  --soft-edge-strong: rgba(127, 215, 198, 0.28);
  --soft-drop: 0 10px 20px rgba(0, 0, 0, 0.26), 0 3px 7px rgba(0, 0, 0, 0.18);
  --soft-float:
    0 18px 36px rgba(0, 0, 0, 0.34), -6px -6px 18px rgba(116, 205, 198, 0.08);
  --soft-inner:
    inset 4px 5px 12px rgba(145, 222, 212, 0.1),
    inset -7px -9px 18px rgba(0, 0, 0, 0.3);
}

.editor-app,
.preview-stage,
.preview-sky,
.tab-bar,
.panel-header,
.part-tabs,
.option-panel,
.garden-flow-card,
.storybook-result,
.comic-result,
.comic-dialogue-panel,
.detail-result-hero,
.treasure-card,
.empathy-card,
.speech-bubble,
.wall-color-message,
.roof-color-message,
.color-harmony-message,
.door-color-message,
.outfit-analysis-message,
.outfit-color-message,
.body-acceptance-message,
.self-image-message {
  border-color: transparent !important;
  box-shadow: var(--soft-float), var(--soft-inner) !important;
}

.preview-stage,
.preview-sky,
.option-panel,
.garden-flow-card,
.storybook-result,
.comic-result,
.detail-result-hero {
  border-radius: 24px !important;
}

.option-card,
.color-only-card,
.part-tab,
.garden-object-button,
.soft-action,
.primary-action,
.tts-button,
.scale-control,
.drop-trash,
.window-delete-zone,
.door-delete-zone,
.flow-progress span,
.theme-toggle,
.theme-toggle button {
  border-color: transparent !important;
  border-radius: 20px !important;
  box-shadow: var(--soft-drop), var(--soft-inner) !important;
}

.option-card.active,
.part-tab.active,
.garden-object-button.active,
.theme-toggle button.active {
  border-color: rgba(103, 199, 255, 0.18) !important;
  box-shadow:
    0 10px 22px rgba(82, 169, 217, 0.2),
    inset 4px 5px 12px rgba(255, 255, 255, 0.48),
    inset -7px -9px 18px rgba(63, 127, 173, 0.16) !important;
}

.option-visual {
  border-radius: 18px !important;
  box-shadow:
    inset 4px 5px 12px rgba(255, 255, 255, 0.42),
    inset -6px -8px 14px rgba(92, 69, 47, 0.08) !important;
}

.tree-model {
  --trunk-outline: rgba(118, 78, 39, 0.16);
}

.tree-trunk,
.branch-stroke,
.branch-layer span,
.leaf-layer,
.tree-model::before,
.tree-model::after {
  border-color: var(--soft-edge) !important;
  filter: drop-shadow(0 6px 8px rgba(91, 58, 31, 0.12));
}

.house-model {
  --castle-outline: rgba(104, 82, 65, 0.18);
}

.house-model .house-body,
.house-model .house-roof,
.roof-sample .house-roof,
.house-model .castle-side-walls,
.house-model .floor-list,
.house-model .floor-row,
.house-model .house-window,
.house-model .house-door,
.window-sample .house-window,
.door-sample .house-door,
.placed-window .house-window,
.placed-door .house-door {
  border-color: var(--soft-edge) !important;
  box-shadow:
    var(--soft-drop),
    inset 5px 6px 14px rgba(255, 255, 255, 0.28),
    inset -7px -8px 16px rgba(82, 55, 35, 0.12) !important;
}

.house-model .house-roof,
.roof-sample .house-roof {
  filter: drop-shadow(0 8px 10px rgba(76, 48, 28, 0.14))
    drop-shadow(0 2px 2px rgba(255, 255, 255, 0.18)) !important;
}

.house-model::before,
.house-model::after,
.house-model .house-body::before,
.house-model .house-body::after,
.house-model .house-roof::before,
.house-model .house-roof::after,
.roof-sample .house-roof::before,
.roof-sample .house-roof::after,
.house-model .floor-list::before,
.house-model .floor-list::after,
.house-model .castle-side-walls::before,
.house-model .castle-side-walls::after,
.house-window::before,
.house-window::after,
.house-door::before,
.house-door::after {
  border-color: var(--soft-edge-strong) !important;
}

.roof-sample.roof-attic-window .house-roof::before,
.house-model.roof-attic-window .house-roof::before {
  border-color: rgba(84, 66, 47, 0.2) !important;
}

.avatar-model,
.avatar-face,
.avatar-hair,
.face-shape-outline,
.eye-style-sample,
.hair-style-sample {
  border-color: transparent !important;
  filter: drop-shadow(0 12px 18px rgba(82, 55, 38, 0.13));
}

.avatar-face,
.avatar-hair,
.avatar-body,
.face-shape-outline {
  box-shadow: var(--clay-inset-shadow), var(--clay-drop-shadow) !important;
}

.window-delete-zone,
.door-delete-zone,
.drop-trash {
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(255, 255, 255, 0.55),
      transparent 48%
    ),
    linear-gradient(145deg, rgba(255, 247, 236, 0.9), rgba(232, 217, 198, 0.72)) !important;
}

body[data-theme='dark'] .window-delete-zone,
body[data-theme='dark'] .door-delete-zone,
body[data-theme='dark'] .drop-trash {
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(135, 222, 210, 0.12),
      transparent 48%
    ),
    linear-gradient(145deg, rgba(26, 72, 67, 0.9), rgba(12, 36, 40, 0.78)) !important;
}

/* Watercolor scene stabilization: background, objects, and UI now live on separate layers. */
.preview-sky,
.flow-garden-canvas,
.read-only-garden-inner {
  --sky-top: #c9eff8;
  --sky-mid: #e9f8f5;
  --sky-low: #fff5dc;
  --wash-rose: rgba(255, 196, 190, 0.24);
  --wash-mint: rgba(152, 217, 188, 0.24);
  --wash-blue: rgba(116, 190, 219, 0.22);
  --mountain-far: rgba(159, 184, 160, 0.34);
  --mountain-near: rgba(114, 160, 132, 0.36);
  --paper-grain: rgba(112, 83, 58, 0.035);
  --sun-core: rgba(255, 178, 104, 0);
  --sun-glow: rgba(255, 218, 142, 0);
  --sun-size: 58px;
  --cloud-layer: none;
  --rain-layer: none;
  --storm-layer: none;
  --snow-layer: none;
  --effect-opacity: 0;
  --effect-blend: normal;
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

.preview-sky.weather-sunny-warm,
.garden-weather-surface.weather-sunny-warm {
  --sky-top: #bfeaf5;
  --sky-mid: #dff6fa;
  --sky-low: #fff1d7;
  --wash-rose: rgba(255, 198, 164, 0.28);
  --sun-core: rgba(255, 174, 104, 0.88);
  --sun-glow: rgba(255, 224, 156, 0.58);
  --sun-size: 72px;
}

.preview-sky.weather-clear-blue,
.garden-weather-surface.weather-clear-blue {
  --sky-top: #aee9ff;
  --sky-mid: #d5f5ff;
  --sky-low: #f4fffb;
  --wash-blue: rgba(81, 174, 226, 0.18);
}

.preview-sky.weather-fluffy-cloud,
.garden-weather-surface.weather-fluffy-cloud {
  --sky-top: #4db7e6;
  --sky-mid: #87d7f6;
  --sky-low: #e4f8ff;
  --cloud-layer:
    radial-gradient(
      ellipse at 14% 30%,
      rgba(255, 255, 255, 0.9) 0 36px,
      rgba(229, 241, 248, 0.78) 37px 58px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at 32% 22%,
      rgba(255, 255, 255, 0.96) 0 52px,
      rgba(232, 242, 249, 0.82) 53px 78px,
      transparent 80px
    ),
    radial-gradient(
      ellipse at 58% 38%,
      rgba(255, 255, 255, 0.92) 0 46px,
      rgba(224, 237, 246, 0.76) 47px 72px,
      transparent 74px
    ),
    radial-gradient(
      ellipse at 82% 28%,
      rgba(255, 255, 255, 0.9) 0 44px,
      rgba(226, 238, 247, 0.76) 45px 70px,
      transparent 72px
    );
  --effect-opacity: 0.96;
}

.preview-sky.weather-gray-cloud,
.garden-weather-surface.weather-gray-cloud {
  --sky-top: #edf3f2;
  --sky-mid: #d8e2e4;
  --sky-low: #f4f4ec;
  --wash-blue: rgba(134, 156, 167, 0.14);
  --cloud-layer:
    radial-gradient(
      ellipse at 10% 40%,
      rgba(247, 250, 250, 0.82) 0 48px,
      rgba(207, 219, 224, 0.72) 49px 76px,
      transparent 78px
    ),
    radial-gradient(
      ellipse at 28% 32%,
      rgba(255, 255, 255, 0.86) 0 64px,
      rgba(216, 227, 231, 0.72) 65px 96px,
      transparent 98px
    ),
    radial-gradient(
      ellipse at 56% 42%,
      rgba(239, 245, 246, 0.78) 0 54px,
      rgba(193, 207, 215, 0.66) 55px 84px,
      transparent 86px
    ),
    radial-gradient(
      ellipse at 82% 34%,
      rgba(251, 253, 253, 0.8) 0 58px,
      rgba(208, 220, 226, 0.68) 59px 88px,
      transparent 90px
    );
  --effect-opacity: 0.88;
}

.preview-sky.weather-rainy,
.garden-weather-surface.weather-rainy {
  --sky-top: #5a5e69;
  --sky-mid: #777b86;
  --sky-low: #a4a8b0;
  --wash-blue: rgba(82, 97, 124, 0.32);
  --mountain-far: rgba(78, 103, 102, 0.26);
  --mountain-near: rgba(75, 112, 88, 0.3);
  --cloud-layer:
    radial-gradient(
      ellipse at 12% 34%,
      rgba(221, 222, 228, 0.78) 0 42px,
      rgba(148, 151, 164, 0.72) 43px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 34% 28%,
      rgba(240, 241, 245, 0.82) 0 58px,
      rgba(166, 169, 181, 0.74) 59px 88px,
      transparent 90px
    ),
    radial-gradient(
      ellipse at 62% 38%,
      rgba(226, 228, 235, 0.78) 0 52px,
      rgba(146, 150, 164, 0.72) 53px 82px,
      transparent 84px
    ),
    radial-gradient(
      ellipse at 88% 30%,
      rgba(212, 214, 222, 0.72) 0 38px,
      rgba(130, 134, 150, 0.64) 39px 62px,
      transparent 64px
    );
  --rain-layer:
    repeating-linear-gradient(
      104deg,
      transparent 0 16px,
      rgba(248, 251, 255, 0.72) 16px 18px,
      transparent 18px 30px
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 30px,
      rgba(171, 210, 229, 0.48) 30px 31px,
      transparent 31px 48px
    );
  --effect-opacity: 0.92;
}

.preview-sky.weather-storm,
.garden-weather-surface.weather-storm {
  --sky-top: #07142e;
  --sky-mid: #16294c;
  --sky-low: #30445c;
  --wash-blue: rgba(39, 72, 125, 0.44);
  --mountain-far: rgba(26, 49, 67, 0.4);
  --mountain-near: rgba(33, 63, 63, 0.42);
  --storm-layer:
    linear-gradient(
      118deg,
      transparent 0 42%,
      rgba(255, 255, 255, 0.95) 43% 46%,
      rgba(255, 230, 86, 0.9) 47% 50%,
      transparent 51% 100%
    ),
    repeating-linear-gradient(
      112deg,
      rgba(172, 214, 255, 0.58) 0 2px,
      transparent 2px 17px
    );
  --effect-opacity: 0.9;
  --effect-blend: screen;
}

.preview-sky.weather-snowy-blue,
.garden-weather-surface.weather-snowy-blue {
  --sky-top: #aee9ff;
  --sky-mid: #d8f6ff;
  --sky-low: #fbffff;
  --snow-layer:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.84) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(220, 244, 255, 0.92) 0 2px, transparent 2.5px);
  --effect-opacity: 0.95;
}

.preview-sky .main-background,
.garden-weather-surface .main-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 18% 18%,
      var(--sun-core) 0 calc(var(--sun-size) * 0.45),
      var(--sun-glow) calc(var(--sun-size) * 0.46) var(--sun-size),
      transparent calc(var(--sun-size) + 2px)
    ),
    radial-gradient(
      ellipse at 22% 18%,
      rgba(255, 255, 255, 0.4),
      transparent 30%
    ),
    radial-gradient(ellipse at 12% 74%, var(--wash-rose), transparent 32%),
    radial-gradient(ellipse at 84% 24%, var(--wash-blue), transparent 36%),
    radial-gradient(ellipse at 76% 72%, var(--wash-mint), transparent 34%),
    linear-gradient(
      180deg,
      var(--sky-top) 0%,
      var(--sky-mid) 54%,
      var(--sky-low) 100%
    ) !important;
}

.preview-sky .main-background::before,
.garden-weather-surface .main-background::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 14% 76%,
      var(--mountain-far) 0 15%,
      transparent 29%
    ),
    radial-gradient(
      ellipse at 32% 74%,
      var(--mountain-near) 0 19%,
      transparent 35%
    ),
    radial-gradient(
      ellipse at 60% 76%,
      var(--mountain-far) 0 22%,
      transparent 38%
    ),
    radial-gradient(
      ellipse at 86% 78%,
      var(--mountain-near) 0 17%,
      transparent 31%
    ),
    linear-gradient(
      132deg,
      transparent 0 18%,
      rgba(255, 255, 255, 0.2) 18% 24%,
      transparent 25%
    ),
    linear-gradient(
      42deg,
      transparent 0 48%,
      rgba(97, 145, 128, 0.12) 48% 64%,
      transparent 65%
    ) !important;
  filter: blur(0.7px) saturate(0.88);
  mix-blend-mode: multiply;
  opacity: 0.92;
}

.preview-sky .main-background::after,
.garden-weather-surface .main-background::after {
  content: '';
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background:
    repeating-radial-gradient(
      circle at 16% 18%,
      var(--paper-grain) 0 1px,
      transparent 1px 8px
    ),
    repeating-radial-gradient(
      circle at 84% 62%,
      rgba(255, 255, 255, 0.18) 0 1px,
      transparent 1px 11px
    ),
    radial-gradient(
      ellipse at 26% 34%,
      rgba(255, 255, 255, 0.28),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 72% 26%,
      rgba(255, 255, 255, 0.18),
      transparent 36%
    ) !important;
  mix-blend-mode: multiply;
  opacity: 0.52;
  filter: blur(0.15px);
}

.preview-sky::before,
.preview-sky::after {
  z-index: 1;
}

.preview-sky::before,
.garden-weather-surface::after {
  background-image:
    var(--cloud-layer), var(--rain-layer), var(--storm-layer), var(--snow-layer);
  background-size:
    auto,
    28px 58px,
    auto,
    96px 82px;
  background-position:
    center top,
    0 0,
    center top,
    24px 18px;
  background-repeat: no-repeat, repeat, no-repeat, repeat;
  opacity: var(--effect-opacity);
  mix-blend-mode: var(--effect-blend);
  filter: drop-shadow(0 14px 14px rgba(57, 82, 90, 0.14));
}

.preview-sky.weather-sunny-warm::before,
.preview-sky.weather-clear-blue::before,
.preview-sky.weather-fluffy-cloud::before,
.preview-sky.weather-gray-cloud::before,
.preview-sky.weather-rainy::before,
.preview-sky.weather-storm::before,
.preview-sky.weather-snowy-blue::before,
.garden-weather-surface.weather-sunny-warm::after,
.garden-weather-surface.weather-clear-blue::after,
.garden-weather-surface.weather-fluffy-cloud::after,
.garden-weather-surface.weather-gray-cloud::after,
.garden-weather-surface.weather-rainy::after,
.garden-weather-surface.weather-storm::after,
.garden-weather-surface.weather-snowy-blue::after {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  clip-path: none !important;
  background-image:
    var(--cloud-layer), var(--rain-layer), var(--storm-layer), var(--snow-layer) !important;
  background-size:
    auto,
    28px 58px,
    auto,
    96px 82px !important;
  background-position:
    center top,
    0 0,
    center top,
    24px 18px !important;
  background-repeat: no-repeat, repeat, no-repeat, repeat !important;
  opacity: var(--effect-opacity) !important;
  mix-blend-mode: var(--effect-blend) !important;
  filter: drop-shadow(0 14px 14px rgba(57, 82, 90, 0.14)) !important;
}

.preview-sky::before {
  inset: 0;
}

.preview-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18),
      transparent 45%,
      rgba(255, 255, 255, 0.08)
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255, 255, 255, 0.16),
      transparent 34%
    );
  opacity: 0.58;
  mix-blend-mode: screen;
}

.preview-sky.weather-sunny-warm::after,
.preview-sky.weather-clear-blue::after,
.preview-sky.weather-fluffy-cloud::after,
.preview-sky.weather-gray-cloud::after,
.preview-sky.weather-rainy::after,
.preview-sky.weather-storm::after,
.preview-sky.weather-snowy-blue::after {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  clip-path: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18),
      transparent 45%,
      rgba(255, 255, 255, 0.08)
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255, 255, 255, 0.16),
      transparent 34%
    ) !important;
  background-size: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0.58 !important;
  mix-blend-mode: screen !important;
  filter: none !important;
}

.preview-sky .soft-sun {
  display: none !important;
}

.preview-sky.weather-sunny-warm .soft-sun {
  display: none !important;
}

.preview-ground,
.foreground-platform {
  z-index: 2;
}

.editor-app {
  position: relative;
  isolation: isolate;
}

.top-bar,
.part-tabs,
.stage-controls,
.picker-panel,
.garden-flow-card,
.storybook-result,
.detail-result-hero,
.gentle-question-box,
.flow-progress {
  position: relative;
  z-index: 2;
}

.preview-stage {
  position: relative;
  z-index: 1;
}

.preview-scene,
.garden-arrange-item {
  z-index: 3;
}

.garden-avatar {
  z-index: 4;
}

.garden-house {
  z-index: 3;
}

.garden-tree {
  z-index: 2;
}

.flow-garden-canvas,
.read-only-garden-inner {
  border: 0 !important;
  box-shadow:
    0 18px 36px rgba(105, 82, 53, 0.12),
    inset 0 8px 24px rgba(255, 255, 255, 0.36),
    inset 0 -18px 26px rgba(69, 126, 85, 0.14) !important;
}

.flow-garden-canvas::before,
.read-only-garden-inner::before {
  z-index: 2;
  background:
    radial-gradient(
      ellipse at 28% 100%,
      rgba(73, 166, 107, 0.2),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 74% 92%,
      rgba(255, 255, 255, 0.16),
      transparent 28%
    );
}

.garden-weather-surface.weather-sunny-warm,
.garden-weather-surface.weather-clear-blue,
.garden-weather-surface.weather-fluffy-cloud,
.garden-weather-surface.weather-gray-cloud,
.garden-weather-surface.weather-rainy,
.garden-weather-surface.weather-storm,
.garden-weather-surface.weather-snowy-blue {
  background: transparent !important;
}

body[data-theme='dark'] .preview-sky,
body[data-theme='dark'] .flow-garden-canvas,
body[data-theme='dark'] .read-only-garden-inner {
  --sky-top: #1f3e47;
  --sky-mid: #284e54;
  --sky-low: #20393c;
  --wash-rose: rgba(164, 117, 110, 0.1);
  --wash-mint: rgba(119, 208, 188, 0.14);
  --wash-blue: rgba(87, 167, 198, 0.12);
  --mountain-far: rgba(79, 132, 116, 0.36);
  --mountain-near: rgba(71, 121, 103, 0.4);
  --paper-grain: rgba(221, 246, 236, 0.035);
}

/* Watercolor weather repaint: soft glazing clouds with randomized CSS variables from script.js. */
.preview-sky,
.garden-weather-surface {
  --wc-cloud-light-rgb: 255, 255, 255;
  --wc-cloud-shadow-rgb: 220, 240, 246;
  --wc-cloud-blend: normal;
  --wc-cloud-blur: 26px;
  --wc-rain-opacity: 0;
  --wc-snow-opacity: 0;
  --wc-storm-opacity: 0;
  --wc-lightning-x: 58%;
  --wc-lightning-y: 14%;
  --wc-cloud-1-x: 18%;
  --wc-cloud-1-y: 24%;
  --wc-cloud-1-core: 38px;
  --wc-cloud-1-soft: 62px;
  --wc-cloud-1-fade: 104px;
  --wc-cloud-1-o: 0.08;
  --wc-cloud-1-so: 0.04;
  --wc-cloud-2-x: 36%;
  --wc-cloud-2-y: 18%;
  --wc-cloud-2-core: 48px;
  --wc-cloud-2-soft: 78px;
  --wc-cloud-2-fade: 130px;
  --wc-cloud-2-o: 0.08;
  --wc-cloud-2-so: 0.04;
  --wc-cloud-3-x: 58%;
  --wc-cloud-3-y: 34%;
  --wc-cloud-3-core: 44px;
  --wc-cloud-3-soft: 76px;
  --wc-cloud-3-fade: 128px;
  --wc-cloud-3-o: 0.08;
  --wc-cloud-3-so: 0.04;
  --wc-cloud-4-x: 78%;
  --wc-cloud-4-y: 22%;
  --wc-cloud-4-core: 42px;
  --wc-cloud-4-soft: 70px;
  --wc-cloud-4-fade: 118px;
  --wc-cloud-4-o: 0.08;
  --wc-cloud-4-so: 0.04;
  --wc-cloud-5-x: 8%;
  --wc-cloud-5-y: 46%;
  --wc-cloud-5-core: 34px;
  --wc-cloud-5-soft: 56px;
  --wc-cloud-5-fade: 98px;
  --wc-cloud-5-o: 0.06;
  --wc-cloud-5-so: 0.03;
  --wc-cloud-6-x: 92%;
  --wc-cloud-6-y: 44%;
  --wc-cloud-6-core: 34px;
  --wc-cloud-6-soft: 58px;
  --wc-cloud-6-fade: 100px;
  --wc-cloud-6-o: 0.06;
  --wc-cloud-6-so: 0.03;
}

.preview-sky.weather-clear-blue,
.garden-weather-surface.weather-clear-blue {
  --sky-top: #c9f4ff;
  --sky-mid: rgba(230, 251, 250, 0.9);
  --sky-low: rgba(255, 255, 255, 0.66);
}

.preview-sky.weather-fluffy-cloud,
.garden-weather-surface.weather-fluffy-cloud {
  --sky-top: #c8f1ff;
  --sky-mid: #e0f8fb;
  --sky-low: rgba(255, 255, 255, 0.72);
}

.preview-sky .main-background,
.garden-weather-surface .main-background {
  background:
    radial-gradient(
      circle at 18% 18%,
      var(--sun-core) 0 calc(var(--sun-size) * 0.44),
      var(--sun-glow) calc(var(--sun-size) * 0.45) var(--sun-size),
      transparent calc(var(--sun-size) + 2px)
    ),
    radial-gradient(
      ellipse at 14% 26%,
      rgba(255, 255, 255, 0.28),
      transparent 36%
    ),
    radial-gradient(
      ellipse at 86% 20%,
      rgba(255, 255, 255, 0.18),
      transparent 34%
    ),
    radial-gradient(ellipse at 12% 74%, var(--wash-rose), transparent 36%),
    radial-gradient(ellipse at 84% 24%, var(--wash-blue), transparent 40%),
    radial-gradient(ellipse at 76% 72%, var(--wash-mint), transparent 38%),
    linear-gradient(
      180deg,
      var(--sky-top) 0%,
      var(--sky-mid) 48%,
      var(--sky-low) 100%
    ) !important;
}

.preview-sky.weather-sunny-warm .main-background,
.garden-weather-surface.weather-sunny-warm .main-background {
  --sun-core: rgba(255, 177, 105, 0.82);
  --sun-glow: rgba(255, 223, 159, 0.5);
}

.preview-sky.weather-sunny-warm::before,
.preview-sky.weather-clear-blue::before,
.preview-sky.weather-fluffy-cloud::before,
.preview-sky.weather-gray-cloud::before,
.preview-sky.weather-rainy::before,
.preview-sky.weather-storm::before,
.preview-sky.weather-snowy-blue::before,
.garden-weather-surface.weather-sunny-warm::after,
.garden-weather-surface.weather-clear-blue::after,
.garden-weather-surface.weather-fluffy-cloud::after,
.garden-weather-surface.weather-gray-cloud::after,
.garden-weather-surface.weather-rainy::after,
.garden-weather-surface.weather-storm::after,
.garden-weather-surface.weather-snowy-blue::after {
  inset: -18% -16% 18% -16% !important;
  background-image:
    radial-gradient(
      ellipse at var(--wc-cloud-1-x) var(--wc-cloud-1-y),
      rgba(var(--wc-cloud-light-rgb), var(--wc-cloud-1-o)) 0
        var(--wc-cloud-1-core),
      rgba(var(--wc-cloud-shadow-rgb), var(--wc-cloud-1-so))
        var(--wc-cloud-1-soft),
      transparent var(--wc-cloud-1-fade)
    ),
    radial-gradient(
      ellipse at var(--wc-cloud-2-x) var(--wc-cloud-2-y),
      rgba(var(--wc-cloud-light-rgb), var(--wc-cloud-2-o)) 0
        var(--wc-cloud-2-core),
      rgba(var(--wc-cloud-shadow-rgb), var(--wc-cloud-2-so))
        var(--wc-cloud-2-soft),
      transparent var(--wc-cloud-2-fade)
    ),
    radial-gradient(
      ellipse at var(--wc-cloud-3-x) var(--wc-cloud-3-y),
      rgba(var(--wc-cloud-light-rgb), var(--wc-cloud-3-o)) 0
        var(--wc-cloud-3-core),
      rgba(var(--wc-cloud-shadow-rgb), var(--wc-cloud-3-so))
        var(--wc-cloud-3-soft),
      transparent var(--wc-cloud-3-fade)
    ),
    radial-gradient(
      ellipse at var(--wc-cloud-4-x) var(--wc-cloud-4-y),
      rgba(var(--wc-cloud-light-rgb), var(--wc-cloud-4-o)) 0
        var(--wc-cloud-4-core),
      rgba(var(--wc-cloud-shadow-rgb), var(--wc-cloud-4-so))
        var(--wc-cloud-4-soft),
      transparent var(--wc-cloud-4-fade)
    ),
    radial-gradient(
      ellipse at var(--wc-cloud-5-x) var(--wc-cloud-5-y),
      rgba(var(--wc-cloud-light-rgb), var(--wc-cloud-5-o)) 0
        var(--wc-cloud-5-core),
      rgba(var(--wc-cloud-shadow-rgb), var(--wc-cloud-5-so))
        var(--wc-cloud-5-soft),
      transparent var(--wc-cloud-5-fade)
    ),
    radial-gradient(
      ellipse at var(--wc-cloud-6-x) var(--wc-cloud-6-y),
      rgba(var(--wc-cloud-light-rgb), var(--wc-cloud-6-o)) 0
        var(--wc-cloud-6-core),
      rgba(var(--wc-cloud-shadow-rgb), var(--wc-cloud-6-so))
        var(--wc-cloud-6-soft),
      transparent var(--wc-cloud-6-fade)
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 17px,
      rgba(248, 251, 255, var(--wc-rain-opacity)) 17px 18px,
      transparent 18px 31px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, var(--wc-snow-opacity)) 0 1.8px,
      transparent 2.6px
    ),
    linear-gradient(
      118deg,
      transparent 0 43%,
      rgba(255, 255, 245, var(--wc-storm-opacity)) 43% 45%,
      rgba(255, 230, 86, var(--wc-storm-opacity)) 46% 48%,
      transparent 49% 100%
    ) !important;
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    36px 74px,
    112px 94px,
    92px 160px !important;
  background-position:
    center,
    center,
    center,
    center,
    center,
    center,
    0 0,
    32px 18px,
    var(--wc-lightning-x) var(--wc-lightning-y) !important;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat,
    repeat, no-repeat !important;
  opacity: 1 !important;
  filter: blur(var(--wc-cloud-blur)) saturate(0.92) !important;
  mix-blend-mode: var(--wc-cloud-blend) !important;
}

.preview-sky.weather-rainy::before,
.garden-weather-surface.weather-rainy::after,
.preview-sky.weather-storm::before,
.garden-weather-surface.weather-storm::after {
  filter: blur(var(--wc-cloud-blur)) saturate(0.82) !important;
}

.preview-sky.weather-snowy-blue::before,
.garden-weather-surface.weather-snowy-blue::after {
  filter: blur(var(--wc-cloud-blur)) saturate(0.94) !important;
}

.preview-sky.weather-sunny-warm::after,
.preview-sky.weather-clear-blue::after,
.preview-sky.weather-fluffy-cloud::after,
.preview-sky.weather-gray-cloud::after,
.preview-sky.weather-rainy::after,
.preview-sky.weather-storm::after,
.preview-sky.weather-snowy-blue::after {
  background:
    radial-gradient(
      ellipse at 34% 18%,
      rgba(255, 255, 255, 0.18),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2),
      transparent 42%,
      rgba(255, 255, 255, 0.04)
    ) !important;
  opacity: 0.5 !important;
  mix-blend-mode: screen !important;
}

/* Weather card restore: remove the watercolor experiment and return to the crisp weather-card look. */
.preview-sky .main-background,
.garden-weather-surface .main-background {
  display: none !important;
}

.preview-sky .soft-sun {
  display: block !important;
}

.preview-sky.weather-sunny-warm {
  background:
    radial-gradient(
      circle at 26% 42%,
      rgba(255, 255, 255, 0.28) 0 80px,
      transparent 82px
    ),
    linear-gradient(180deg, #bfefff 0%, #ddf6ff 56%, #fff0d8 100%) !important;
}

.preview-sky.weather-sunny-warm .soft-sun {
  top: 28px !important;
  left: auto !important;
  right: 28px !important;
  width: 72px !important;
  height: 72px !important;
  background: radial-gradient(
    circle,
    #ffdca5 0 18%,
    #ffb878 60%,
    #ffad6a 100%
  ) !important;
  box-shadow:
    0 0 54px rgba(255, 184, 95, 0.72),
    0 0 104px rgba(255, 205, 132, 0.56) !important;
  opacity: 1 !important;
  transform: none !important;
}

.preview-sky.weather-sunny-warm::before,
.preview-sky.weather-sunny-warm::after,
.preview-sky.weather-clear-blue::before,
.preview-sky.weather-clear-blue::after {
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.preview-sky.weather-clear-blue {
  background: linear-gradient(
    180deg,
    #aee9ff 0%,
    #c9f2ff 54%,
    #eefbff 100%
  ) !important;
}

.preview-sky.weather-fluffy-cloud {
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 255, 255, 0.18) 0 42px,
      transparent 44px
    ),
    linear-gradient(180deg, #087dc1 0%, #0f9cdc 48%, #7ed2f2 100%) !important;
}

.preview-sky.weather-fluffy-cloud::before {
  inset: 12px -6% auto -6% !important;
  height: 210px !important;
  width: auto !important;
  background:
    radial-gradient(
      ellipse at 18% 26%,
      rgba(255, 255, 255, 0.96) 0 34px,
      rgba(235, 244, 250, 0.92) 35px 54px,
      transparent 56px
    ),
    radial-gradient(
      ellipse at 27% 20%,
      rgba(255, 255, 255, 0.98) 0 44px,
      rgba(232, 242, 249, 0.9) 45px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 39% 30%,
      rgba(255, 255, 255, 0.95) 0 36px,
      rgba(224, 237, 246, 0.88) 37px 58px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at 63% 48%,
      rgba(255, 255, 255, 0.98) 0 50px,
      rgba(229, 240, 248, 0.9) 51px 78px,
      transparent 80px
    ),
    radial-gradient(
      ellipse at 76% 42%,
      rgba(255, 255, 255, 0.96) 0 44px,
      rgba(222, 236, 246, 0.88) 45px 72px,
      transparent 74px
    ),
    radial-gradient(
      ellipse at 88% 56%,
      rgba(255, 255, 255, 0.92) 0 28px,
      rgba(222, 236, 246, 0.78) 29px 48px,
      transparent 50px
    ) !important;
  filter: drop-shadow(0 15px 12px rgba(25, 92, 137, 0.18))
    drop-shadow(0 3px 2px rgba(255, 255, 255, 0.3)) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.preview-sky.weather-fluffy-cloud::after {
  inset: auto -8% 0 -8% !important;
  height: 150px !important;
  width: auto !important;
  background:
    radial-gradient(
      ellipse at 8% 72%,
      rgba(255, 255, 255, 0.94) 0 32px,
      rgba(228, 238, 246, 0.84) 33px 52px,
      transparent 54px
    ),
    radial-gradient(
      ellipse at 22% 64%,
      rgba(255, 255, 255, 0.96) 0 42px,
      rgba(230, 241, 249, 0.86) 43px 68px,
      transparent 70px
    ),
    radial-gradient(
      ellipse at 40% 74%,
      rgba(255, 255, 255, 0.92) 0 34px,
      rgba(222, 236, 246, 0.78) 35px 56px,
      transparent 58px
    ),
    radial-gradient(
      ellipse at 62% 68%,
      rgba(255, 255, 255, 0.95) 0 38px,
      rgba(226, 238, 247, 0.82) 39px 62px,
      transparent 64px
    ),
    radial-gradient(
      ellipse at 82% 76%,
      rgba(255, 255, 255, 0.92) 0 34px,
      rgba(220, 234, 245, 0.78) 35px 58px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at 94% 64%,
      rgba(255, 255, 255, 0.86) 0 24px,
      rgba(220, 234, 245, 0.68) 25px 42px,
      transparent 44px
    ) !important;
  filter: drop-shadow(0 12px 10px rgba(24, 93, 138, 0.16)) !important;
  opacity: 0.96 !important;
  mix-blend-mode: normal !important;
}

.preview-sky.weather-gray-cloud {
  background: linear-gradient(
    180deg,
    #eaf1f3 0%,
    #d4dee4 68%,
    #f2f6f5 100%
  ) !important;
}

.preview-sky.weather-gray-cloud::before {
  inset: 8px -10% auto -10% !important;
  height: 236px !important;
  width: auto !important;
  background:
    radial-gradient(
      ellipse at 10% 58%,
      rgba(240, 244, 246, 0.9) 0 48px,
      rgba(205, 216, 223, 0.86) 49px 76px,
      transparent 78px
    ),
    radial-gradient(
      ellipse at 20% 52%,
      rgba(251, 253, 254, 0.92) 0 62px,
      rgba(218, 228, 234, 0.88) 63px 96px,
      transparent 98px
    ),
    radial-gradient(
      ellipse at 34% 68%,
      rgba(226, 234, 238, 0.86) 0 54px,
      rgba(188, 201, 211, 0.8) 55px 84px,
      transparent 86px
    ),
    radial-gradient(
      ellipse at 50% 38%,
      rgba(248, 251, 252, 0.92) 0 42px,
      rgba(213, 223, 230, 0.84) 43px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 70% 50%,
      rgba(238, 243, 246, 0.9) 0 58px,
      rgba(202, 214, 222, 0.86) 59px 88px,
      transparent 90px
    ),
    radial-gradient(
      ellipse at 84% 44%,
      rgba(250, 252, 253, 0.92) 0 48px,
      rgba(214, 224, 231, 0.84) 49px 74px,
      transparent 76px
    ),
    radial-gradient(
      ellipse at 96% 66%,
      rgba(226, 234, 238, 0.82) 0 42px,
      rgba(190, 202, 212, 0.74) 43px 68px,
      transparent 70px
    ) !important;
  filter: drop-shadow(0 14px 14px rgba(128, 147, 158, 0.2))
    drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.32)) !important;
  opacity: 0.97 !important;
  mix-blend-mode: normal !important;
}

.preview-sky.weather-gray-cloud::after {
  background: none !important;
  opacity: 0 !important;
}

.preview-sky.weather-rainy {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(122, 130, 148, 0.28) 0 78px,
      transparent 80px
    ),
    linear-gradient(180deg, #4a4e5a 0%, #626675 46%, #858997 100%) !important;
}

.preview-sky.weather-rainy::before {
  inset: 8px -10% auto -10% !important;
  height: 236px !important;
  width: auto !important;
  background:
    radial-gradient(
      ellipse at 10% 58%,
      rgba(221, 222, 228, 0.86) 0 48px,
      rgba(153, 156, 169, 0.88) 49px 76px,
      transparent 78px
    ),
    radial-gradient(
      ellipse at 20% 52%,
      rgba(239, 240, 244, 0.9) 0 62px,
      rgba(170, 173, 186, 0.88) 63px 96px,
      transparent 98px
    ),
    radial-gradient(
      ellipse at 34% 68%,
      rgba(207, 210, 218, 0.84) 0 54px,
      rgba(130, 134, 150, 0.82) 55px 84px,
      transparent 86px
    ),
    radial-gradient(
      ellipse at 50% 38%,
      rgba(238, 239, 243, 0.9) 0 42px,
      rgba(164, 166, 179, 0.86) 43px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 70% 50%,
      rgba(229, 230, 236, 0.88) 0 58px,
      rgba(151, 154, 169, 0.86) 59px 88px,
      transparent 90px
    ),
    radial-gradient(
      ellipse at 84% 44%,
      rgba(238, 239, 243, 0.9) 0 48px,
      rgba(162, 165, 178, 0.84) 49px 74px,
      transparent 76px
    ),
    radial-gradient(
      ellipse at 96% 66%,
      rgba(207, 210, 218, 0.8) 0 42px,
      rgba(130, 134, 150, 0.78) 43px 68px,
      transparent 70px
    ) !important;
  filter: drop-shadow(0 14px 14px rgba(45, 48, 61, 0.32))
    drop-shadow(0 -2px 2px rgba(255, 255, 255, 0.26)) !important;
  opacity: 0.98 !important;
  mix-blend-mode: normal !important;
}

.preview-sky.weather-rainy::after {
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      104deg,
      transparent 0 16px,
      rgba(248, 251, 255, 0.74) 16px 18px,
      transparent 18px 30px
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 30px,
      rgba(168, 206, 225, 0.58) 30px 31px,
      transparent 31px 48px
    ),
    radial-gradient(
      ellipse at 20% 100%,
      rgba(234, 235, 241, 0.72) 0 58px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at 44% 104%,
      rgba(194, 197, 210, 0.68) 0 70px,
      transparent 72px
    ),
    radial-gradient(
      ellipse at 78% 102%,
      rgba(224, 225, 232, 0.7) 0 64px,
      transparent 66px
    ) !important;
  background-size:
    28px 58px,
    46px 76px,
    auto,
    auto,
    auto !important;
  opacity: 0.9 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.preview-sky.weather-storm {
  background:
    radial-gradient(circle at 20% 22%, rgba(49, 77, 127, 0.7), transparent 34%),
    linear-gradient(180deg, #07142e 0%, #142849 58%, #2d405c 100%) !important;
}

.preview-sky.weather-storm::before {
  top: 26px !important;
  left: 57% !important;
  width: 82px !important;
  height: 164px !important;
  background: linear-gradient(180deg, #fff7a8, #ffd34e) !important;
  clip-path: polygon(
    42% 0,
    78% 0,
    58% 42%,
    88% 42%,
    30% 100%,
    45% 56%,
    16% 56%
  ) !important;
  filter: drop-shadow(0 0 14px rgba(255, 225, 79, 0.8)) !important;
  opacity: 0.95 !important;
  mix-blend-mode: normal !important;
}

.preview-sky.weather-storm::after {
  inset: 0 !important;
  background: repeating-linear-gradient(
    112deg,
    rgba(144, 190, 230, 0.65) 0 2px,
    transparent 2px 17px
  ) !important;
  background-size: 20px 34px !important;
  opacity: 0.72 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.preview-sky.weather-snowy-blue {
  background: linear-gradient(
    180deg,
    #aee9ff 0%,
    #d8f6ff 64%,
    #ffffff 100%
  ) !important;
}

.preview-sky.weather-snowy-blue::before {
  background: none !important;
  opacity: 0 !important;
}

.preview-sky.weather-snowy-blue::after {
  inset: 0 !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(220, 244, 255, 0.95) 0 2px, transparent 2.5px) !important;
  background-position:
    24px 18px,
    88px 52px,
    150px 28px !important;
  background-size:
    96px 82px,
    128px 110px,
    164px 136px !important;
  opacity: 0.95 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.garden-weather-surface.weather-sunny-warm {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 188, 106, 0.86) 0 38px,
      rgba(255, 218, 154, 0.42) 39px 78px,
      transparent 80px
    ),
    linear-gradient(180deg, #bfefff 0%, #ddf6ff 60%, #aee7b5 61%, #6ccf91 100%) !important;
}

.garden-weather-surface.weather-clear-blue {
  background: linear-gradient(
    180deg,
    #aee9ff 0%,
    #d8f6ff 60%,
    #aee7b5 61%,
    #6ccf91 100%
  ) !important;
}

.garden-weather-surface.weather-fluffy-cloud {
  background: linear-gradient(
    180deg,
    #0a88c8 0%,
    #2fb5ea 58%,
    #aee7b5 59%,
    #6ccf91 100%
  ) !important;
}

.garden-weather-surface.weather-gray-cloud {
  background: linear-gradient(
    180deg,
    #eaf1f3 0%,
    #d4dee4 60%,
    #aee7b5 61%,
    #6ccf91 100%
  ) !important;
}

.garden-weather-surface.weather-rainy {
  background:
    radial-gradient(
      circle at 20% 14%,
      rgba(132, 137, 153, 0.22) 0 52px,
      transparent 54px
    ),
    linear-gradient(180deg, #4b4f5b 0%, #686c78 58%, #7bbb92 59%, #57956d 100%) !important;
}

.garden-weather-surface.weather-storm {
  background:
    radial-gradient(
      circle at 24% 18%,
      rgba(40, 73, 129, 0.82),
      transparent 42%
    ),
    linear-gradient(180deg, #061334 0%, #14274d 58%, #314e57 59%, #223f3c 100%) !important;
}

.garden-weather-surface.weather-snowy-blue {
  background: linear-gradient(
    180deg,
    #aee9ff 0%,
    #d8f6ff 60%,
    #dcf7d8 61%,
    #fbffff 100%
  ) !important;
}

.garden-weather-surface.weather-sunny-warm::after,
.garden-weather-surface.weather-clear-blue::after,
.garden-weather-surface.weather-fluffy-cloud::after,
.garden-weather-surface.weather-gray-cloud::after,
.garden-weather-surface.weather-rainy::after,
.garden-weather-surface.weather-storm::after,
.garden-weather-surface.weather-snowy-blue::after {
  inset: 0 0 32% 0 !important;
  width: auto !important;
  height: auto !important;
  clip-path: none !important;
  background-size: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.garden-weather-surface.weather-sunny-warm::after {
  background: radial-gradient(
    circle at 18% 18%,
    rgba(255, 218, 154, 0.95) 0 36px,
    rgba(255, 185, 111, 0.78) 37px 58px,
    transparent 60px
  ) !important;
  filter: drop-shadow(0 0 28px rgba(255, 186, 92, 0.55)) !important;
}

.garden-weather-surface.weather-clear-blue::after {
  background: none !important;
}

.garden-weather-surface.weather-fluffy-cloud::after {
  background:
    radial-gradient(
      ellipse at 18% 24%,
      rgba(255, 255, 255, 0.96) 0 34px,
      rgba(229, 241, 249, 0.86) 35px 56px,
      transparent 58px
    ),
    radial-gradient(
      ellipse at 32% 18%,
      rgba(255, 255, 255, 0.98) 0 46px,
      rgba(232, 243, 250, 0.9) 47px 70px,
      transparent 72px
    ),
    radial-gradient(
      ellipse at 52% 30%,
      rgba(255, 255, 255, 0.92) 0 36px,
      rgba(222, 236, 246, 0.78) 37px 58px,
      transparent 60px
    ),
    radial-gradient(
      ellipse at 72% 20%,
      rgba(255, 255, 255, 0.95) 0 42px,
      rgba(225, 239, 248, 0.84) 43px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 88% 32%,
      rgba(255, 255, 255, 0.88) 0 28px,
      rgba(220, 234, 245, 0.68) 29px 48px,
      transparent 50px
    ) !important;
  filter: drop-shadow(0 12px 12px rgba(26, 91, 134, 0.18)) !important;
}

.garden-weather-surface.weather-gray-cloud::after {
  background:
    radial-gradient(
      ellipse at 10% 28%,
      rgba(240, 244, 246, 0.9) 0 42px,
      rgba(205, 216, 223, 0.86) 43px 66px,
      transparent 68px
    ),
    radial-gradient(
      ellipse at 28% 22%,
      rgba(251, 253, 254, 0.92) 0 58px,
      rgba(218, 228, 234, 0.88) 59px 88px,
      transparent 90px
    ),
    radial-gradient(
      ellipse at 48% 34%,
      rgba(226, 234, 238, 0.86) 0 48px,
      rgba(188, 201, 211, 0.8) 49px 76px,
      transparent 78px
    ),
    radial-gradient(
      ellipse at 70% 24%,
      rgba(248, 251, 252, 0.92) 0 56px,
      rgba(212, 222, 229, 0.84) 57px 86px,
      transparent 88px
    ),
    radial-gradient(
      ellipse at 91% 32%,
      rgba(226, 234, 238, 0.78) 0 38px,
      rgba(190, 202, 212, 0.68) 39px 62px,
      transparent 64px
    ) !important;
  filter: drop-shadow(0 12px 12px rgba(117, 136, 148, 0.18)) !important;
}

.garden-weather-surface.weather-rainy::after {
  background:
    radial-gradient(
      ellipse at 12% 24%,
      rgba(221, 222, 228, 0.86) 0 34px,
      rgba(148, 151, 164, 0.82) 35px 54px,
      transparent 56px
    ),
    radial-gradient(
      ellipse at 36% 18%,
      rgba(239, 240, 244, 0.9) 0 48px,
      rgba(166, 169, 181, 0.86) 49px 72px,
      transparent 74px
    ),
    radial-gradient(
      ellipse at 66% 28%,
      rgba(228, 229, 236, 0.86) 0 44px,
      rgba(150, 153, 168, 0.82) 45px 70px,
      transparent 72px
    ),
    radial-gradient(
      ellipse at 90% 22%,
      rgba(207, 210, 218, 0.78) 0 30px,
      rgba(130, 134, 150, 0.7) 31px 50px,
      transparent 52px
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 14px,
      rgba(248, 251, 255, 0.72) 14px 16px,
      transparent 16px 28px
    ),
    repeating-linear-gradient(
      104deg,
      transparent 0 28px,
      rgba(171, 210, 229, 0.48) 28px 29px,
      transparent 29px 45px
    ) !important;
  background-size:
    auto,
    auto,
    auto,
    auto,
    24px 52px,
    38px 66px !important;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat !important;
  filter: drop-shadow(0 8px 8px rgba(38, 41, 53, 0.22)) !important;
}

.garden-weather-surface.weather-storm::after {
  background:
    linear-gradient(180deg, #ffffff, #fff18f 42%, #ffe146) 58% 12% / 74px 136px
      no-repeat,
    repeating-linear-gradient(
      112deg,
      rgba(172, 214, 255, 0.62) 0 2px,
      transparent 2px 16px
    ),
    radial-gradient(
      circle at 14% 22%,
      rgba(37, 61, 105, 0.75) 0 48px,
      transparent 50px
    ),
    radial-gradient(
      circle at 82% 36%,
      rgba(44, 70, 112, 0.55) 0 56px,
      transparent 58px
    ) !important;
  filter: drop-shadow(0 0 12px rgba(255, 241, 130, 0.58)) !important;
}

.garden-weather-surface.weather-snowy-blue::after {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(220, 244, 255, 0.95) 0 2px, transparent 2.5px) !important;
  background-position:
    24px 18px,
    88px 52px,
    150px 28px !important;
  background-size:
    96px 82px,
    128px 110px,
    164px 136px !important;
  background-repeat: repeat !important;
  opacity: 0.95 !important;
}

body.report-comic-mode {
  display: block !important;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
  background: var(--app-bg);
}

body.report-comic-mode .editor-app {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  grid-template-rows: 64px minmax(0, 1fr) !important;
  box-shadow: none !important;
}

body.instant-reading-mode {
  display: block !important;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
  background: var(--app-bg);
}

body.instant-reading-mode .editor-app {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  grid-template-rows: 64px minmax(0, 1fr) !important;
  box-shadow: none !important;
}

body.report-comic-mode .top-bar {
  min-height: 64px;
  border-radius: 0;
  position: relative;
  z-index: 30000;
  overflow: visible !important;
  pointer-events: auto;
}

body.instant-reading-mode .top-bar {
  min-height: 64px;
  border-radius: 0;
  position: relative;
  z-index: 30000;
  overflow: visible !important;
  pointer-events: auto;
}

body.report-comic-mode .auth-panel,
body.instant-reading-mode .auth-panel,
body.travel-healing-mode .auth-panel,
body.monetization-mode .auth-panel {
  z-index: 30001 !important;
  pointer-events: auto !important;
}

body.report-comic-mode .auth-toggle-button,
body.instant-reading-mode .auth-toggle-button,
body.travel-healing-mode .auth-toggle-button,
body.monetization-mode .auth-toggle-button {
  pointer-events: auto !important;
}

body.report-comic-mode .auth-popover,
body.instant-reading-mode .auth-popover,
body.travel-healing-mode .auth-popover,
body.monetization-mode .auth-popover {
  position: fixed !important;
  z-index: 30002 !important;
  max-height: calc(100dvh - 92px);
  overflow: auto;
}

body.report-comic-mode .picker-panel,
body.instant-reading-mode .picker-panel {
  height: calc(100dvh - 64px);
  min-height: 0;
  overflow: hidden !important;
}

body.report-comic-mode .comic-only-report,
body.report-comic-mode .forest-comic-result,
body.report-comic-mode .report-arrange-page,
body.report-comic-mode .first-garden-page,
body.report-comic-mode .monetization-page,
body.report-comic-mode .travel-page,
body.instant-reading-mode .instant-reading-view,
body.instant-reading-mode .instant-reading-page {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.report-arrange-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 100%;
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 232, 179, 0.42),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 243, 0.86),
      rgba(248, 238, 224, 0.96)
    );
}

.report-arrange-top {
  min-height: 58px;
}

.report-arrange-stage-wrap {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.report-arrange-canvas {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  border-radius: 0 !important;
  touch-action: none;
}

.report-arrange-canvas > .foreground-platform {
  display: none;
}

.report-arrange-canvas .garden-house .garden-arrange-visual .house-model {
  transform: scale(0.95);
}

.report-arrange-canvas .garden-arrange-item {
  transition: filter 0.18s ease;
}

.report-arrange-canvas .garden-arrange-item.selected::after {
  inset: 6px;
}

.report-arrange-controls {
  display: grid;
  gap: 8px;
  padding: 8px 14px 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 242, 0.9),
    rgba(255, 242, 224, 0.98)
  );
  box-shadow:
    0 -12px 28px rgba(105, 82, 53, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.arrange-helper {
  margin: 0;
  color: var(--muted-text);
  font-size: clamp(0.88rem, 2.7vw, 1rem);
  font-weight: 750;
  line-height: 1.45;
  word-break: keep-all;
}

.report-arrange-controls .garden-object-toolbar {
  gap: 8px;
}

.report-arrange-controls .garden-object-button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  box-shadow:
    0 8px 18px rgba(105, 82, 53, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.72);
}

.report-arrange-controls .scale-control {
  gap: 4px;
  font-size: 0.92rem;
}

.report-arrange-controls .scale-control input {
  height: 18px;
}

.report-arrange-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px;
  padding: 0;
}

.report-arrange-actions .primary-action,
.report-arrange-actions .soft-action {
  min-height: 42px;
}

.instant-reading-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 100%;
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 232, 179, 0.42),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 243, 0.88),
      rgba(248, 238, 224, 0.96)
    );
}

.instant-reading-top {
  min-height: 58px;
  padding: 8px 16px 0;
}

.instant-reading-tts-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.instant-reading-tts-actions .tts-button {
  min-height: 46px;
  padding: 8px 12px;
}

.instant-reading-tts-actions .tts-button span {
  width: 30px;
  height: 30px;
}

.tts-auto-button {
  background: linear-gradient(135deg, #fff7bc, #d8f0ff 52%, #e3d3ff);
}

.tts-button.is-playing {
  filter: saturate(1.08);
  box-shadow:
    0 10px 24px rgba(77, 150, 208, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.72);
}

.tts-button.has-resume {
  background: linear-gradient(135deg, #fff2c4, #dbf2d1 52%, #d9f0ff);
}

.instant-reading-stage {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background-color: #d9ead4;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow:
    inset 0 18px 34px rgba(255, 255, 255, 0.2),
    inset 0 -22px 34px rgba(54, 93, 55, 0.12);
}

.instant-stage-tree {
  background-color: #dceecf;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 252, 232, 0.14),
      rgba(255, 255, 255, 0.02) 46%,
      rgba(45, 87, 61, 0.08)
    ),
    url('assets/interpretation/backgrounds/tree_desktop.png');
  background-position: center center;
  background-size: cover;
}

.instant-stage-house {
  background-color: #d9ead4;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 250, 230, 0.08),
      rgba(255, 255, 255, 0.02) 48%,
      rgba(48, 93, 55, 0.08)
    ),
    url('assets/interpretation/backgrounds/house_desktop.png');
  background-position: center center;
  background-size: cover;
}

.instant-stage-face {
  background-color: #dceecf;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 250, 230, 0.08),
      rgba(255, 255, 255, 0.02) 48%,
      rgba(45, 87, 61, 0.07)
    ),
    url('assets/interpretation/backgrounds/person_desktop.png');
  background-position: center center;
  background-size: cover;
}

.instant-scene-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(255, 248, 205, 0.34), transparent 30% 100%),
    repeating-linear-gradient(
      108deg,
      rgba(255, 255, 226, 0.12) 0 8px,
      transparent 9px 46px
    );
  mix-blend-mode: screen;
}

.instant-reading-motion {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.instant-cloud-drift {
  inset: -9% -12%;
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(
      ellipse at 18% 26%,
      rgba(255, 255, 255, 0.34),
      transparent 24%
    ),
    radial-gradient(
      ellipse at 68% 18%,
      rgba(255, 255, 255, 0.25),
      transparent 20%
    ),
    radial-gradient(
      ellipse at 82% 42%,
      rgba(255, 248, 205, 0.18),
      transparent 22%
    );
  filter: blur(8px);
  mix-blend-mode: screen;
}

.instant-leaf {
  z-index: 8;
  width: 24px;
  height: 13px;
  border-radius: 100% 0 100% 0;
  opacity: 0;
  background:
    radial-gradient(
      circle at 32% 28%,
      rgba(255, 255, 255, 0.42),
      transparent 26%
    ),
    linear-gradient(135deg, rgba(190, 221, 118, 0.92), rgba(88, 151, 72, 0.88));
  box-shadow: 0 4px 10px rgba(61, 112, 52, 0.13);
}

.instant-leaf-a {
  left: 7%;
  top: 18%;
  transform: rotate(-18deg);
}

.instant-leaf-b {
  right: 10%;
  top: 28%;
  transform: rotate(22deg) scale(0.84);
}

.instant-leaf-c {
  left: 54%;
  bottom: 24%;
  transform: rotate(-34deg) scale(0.72);
}

.instant-reading-stage.is-reading .instant-cloud-drift {
  opacity: 0.54;
  animation: instantReadingCloudDrift 24s ease-in-out infinite alternate;
}

.instant-reading-stage.is-reading .instant-leaf-a {
  opacity: 0.72;
  animation: instantReadingLeafA 18s ease-in-out infinite;
}

.instant-reading-stage.is-reading .instant-leaf-b {
  opacity: 0.62;
  animation: instantReadingLeafB 21s ease-in-out infinite;
}

.instant-reading-stage.is-reading .instant-leaf-c {
  opacity: 0.5;
  animation: instantReadingLeafC 23s ease-in-out infinite;
}

.instant-stage-tree .instant-scene-light {
  background:
    radial-gradient(
      circle at 14% 8%,
      rgba(255, 246, 190, 0.22),
      transparent 26%
    ),
    linear-gradient(105deg, rgba(255, 250, 214, 0.14), transparent 34% 100%);
}

.instant-stage-house .instant-scene-light {
  background:
    radial-gradient(
      circle at 72% 14%,
      rgba(255, 248, 206, 0.18),
      transparent 25%
    ),
    linear-gradient(105deg, rgba(255, 250, 218, 0.1), transparent 36% 100%);
}

.instant-stage-face .instant-scene-light {
  background:
    radial-gradient(
      circle at 52% 12%,
      rgba(255, 248, 206, 0.16),
      transparent 27%
    ),
    linear-gradient(105deg, rgba(255, 250, 218, 0.09), transparent 38% 100%);
}

.instant-selected-scene {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  width: min(820px, 100%) !important;
  height: min(430px, 56vh) !important;
  min-height: 0 !important;
  transform: translate(-50%, -42%) !important;
  z-index: 4 !important;
  overflow: visible;
  pointer-events: none;
}

.instant-selected-scene.focus-tree .tree-object {
  bottom: -8px;
  transform: translateX(-50%) scale(1.18);
}

.instant-selected-scene.focus-house .house-object {
  bottom: 8px;
  transform: translateX(-50%) scale(1.1);
}

.instant-selected-scene.focus-face .avatar-object {
  bottom: -8px;
  transform: translateX(-50%) scale(0.78);
}

.instant-reading-bubbles {
  position: absolute;
  left: clamp(10px, 3vw, 26px);
  right: clamp(10px, 3vw, 26px);
  top: clamp(12px, 2.4vh, 24px);
  z-index: 10;
  display: grid;
  pointer-events: none;
}

.instant-bubble {
  grid-area: 1 / 1;
  max-width: min(74%, 500px);
  padding: 13px 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 220ms ease,
    transform 260ms ease,
    visibility 0s linear 260ms,
    filter 180ms ease,
    box-shadow 180ms ease;
}

.instant-bubble.is-narrating {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 220ms ease,
    transform 260ms ease,
    visibility 0s;
}

.instant-bubble strong {
  display: none;
}

.instant-bubble.forest-bubble-sun {
  justify-self: start;
  background: linear-gradient(
    145deg,
    rgba(249, 255, 199, 0.94),
    rgba(185, 226, 113, 0.92)
  );
  box-shadow:
    0 16px 26px rgba(59, 91, 40, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.44),
    inset 0 3px 0 rgba(255, 255, 255, 0.54);
}

.instant-bubble.forest-bubble-moon {
  justify-self: end;
  background: linear-gradient(
    145deg,
    rgba(224, 214, 255, 0.94),
    rgba(170, 148, 211, 0.9)
  );
  color: #21192e;
  box-shadow:
    0 16px 26px rgba(62, 60, 107, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 3px 0 rgba(255, 255, 255, 0.52);
}

.instant-bubble p {
  font-size: clamp(0.94rem, 2.7vw, 1.12rem);
  line-height: 1.34;
}

.instant-reading-friends {
  left: clamp(12px, 4vw, 46px);
  right: clamp(12px, 4vw, 46px);
  bottom: clamp(28px, 5.8vh, 66px);
  z-index: 9;
}

.instant-reading-friends .comic-friend {
  position: relative;
  will-change: transform;
}

.instant-reading-friends .comic-friend-sun {
  animation: instantSunFloat 3.4s ease-in-out infinite;
}

.instant-reading-friends .comic-friend-moon {
  animation: instantMoonFloat 4.8s ease-in-out infinite;
}

.instant-reading-friends .comic-avatar {
  width: clamp(108px, 15vw, 148px);
  height: clamp(128px, 20vh, 184px);
  will-change: transform;
}

.instant-reading-friends .comic-friend-sun .comic-avatar {
  width: clamp(120px, 17vw, 164px);
  height: clamp(142px, 22vh, 198px);
}

.instant-reading-friends .comic-friend.is-speaking .comic-avatar {
  animation: instantSpeakerPulse 920ms ease-in-out infinite;
}

.instant-reading-friends .comic-friend > span {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 10px);
  z-index: 12;
  min-width: max-content;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.96);
  pointer-events: none;
  box-shadow:
    0 10px 18px rgba(54, 65, 42, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.instant-reading-friends .comic-friend-sun > span {
  color: #5f3a08;
  background: linear-gradient(
    145deg,
    rgba(255, 239, 151, 0.96),
    rgba(255, 184, 91, 0.94)
  );
}

.instant-reading-friends .comic-friend-moon > span {
  color: #2a2861;
  background: linear-gradient(
    145deg,
    rgba(232, 236, 255, 0.96),
    rgba(184, 180, 246, 0.94)
  );
}

.instant-reading-friends .comic-friend.show-name-tag > span {
  animation: instantNameTagPop 1.15s ease both;
}

.instant-reading-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  min-height: 62px;
  padding: 8px 12px 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 242, 0.42),
    rgba(255, 244, 228, 0.9)
  );
}

.instant-reading-actions .soft-action,
.instant-reading-actions .primary-action {
  min-height: 44px;
}

.reading-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.reading-nav-button__symbol {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.82;
  transition:
    opacity 160ms ease,
    filter 160ms ease;
}

.reading-nav-button:disabled .reading-nav-button__symbol {
  opacity: 0.34;
  filter: grayscale(0.55) saturate(0.45);
}

@media (max-width: 719px) {
  .instant-reading-top {
    align-items: flex-start;
    flex-wrap: wrap;
    min-height: 52px;
    padding: 8px 10px 0;
  }

  .instant-reading-top h3 {
    font-size: clamp(1.08rem, 6vw, 1.42rem);
  }

  .instant-reading-tts-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .instant-reading-tts-actions .tts-button {
    flex: 1 1 132px;
    justify-content: center;
  }

  .instant-stage-tree {
    background-image:
      linear-gradient(
        180deg,
        rgba(255, 252, 232, 0.1),
        rgba(255, 255, 255, 0.02) 46%,
        rgba(45, 87, 61, 0.06)
      ),
      url('assets/interpretation/backgrounds/tree_mobile.png');
    background-position: center center;
    background-size: cover;
  }

  .instant-stage-house {
    background-image:
      linear-gradient(
        180deg,
        rgba(255, 252, 232, 0.1),
        rgba(255, 255, 255, 0.02) 46%,
        rgba(45, 87, 61, 0.06)
      ),
      url('assets/interpretation/backgrounds/house_mobile.png');
    background-position: center center;
    background-size: cover;
  }

  .instant-selected-scene {
    top: 54% !important;
    height: min(390px, 48vh) !important;
  }

  .instant-selected-scene.focus-tree .tree-object {
    transform: translateX(-50%) scale(1.02);
  }

  .instant-selected-scene.focus-house .house-object {
    transform: translateX(-50%) scale(0.9);
  }

  .instant-selected-scene.focus-face .avatar-object {
    transform: translateX(-50%) scale(0.66);
  }

  .instant-bubble {
    max-width: 94%;
    padding: 10px 12px;
  }

  .instant-bubble p {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .instant-reading-friends {
    left: 8px;
    right: 8px;
    bottom: 38px;
    padding: 0;
  }
}

@keyframes instantSunFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  45% {
    transform: translate3d(4px, -9px, 0) rotate(1deg);
  }
}

@keyframes instantMoonFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(1deg);
  }

  50% {
    transform: translate3d(-3px, -7px, 0) rotate(-2deg);
  }
}

@keyframes instantSpeakerPulse {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  45% {
    transform: translate3d(0, -3px, 0) scale(1.045);
  }
}

@keyframes instantNameTagPop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.94);
  }

  18%,
  62% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -5px) scale(0.98);
  }
}

@keyframes instantReadingCloudDrift {
  0% {
    transform: translate3d(-1.5%, 0, 0) scale(1);
  }

  48% {
    transform: translate3d(1.8%, -1.2%, 0) scale(1.015);
  }

  100% {
    transform: translate3d(3.2%, 0.8%, 0) scale(1.008);
  }
}

@keyframes instantReadingLeafA {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-18deg);
  }

  45% {
    transform: translate3d(34px, 18px, 0) rotate(16deg);
  }

  72% {
    transform: translate3d(72px, -6px, 0) rotate(-8deg);
  }
}

@keyframes instantReadingLeafB {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(22deg) scale(0.84);
  }

  42% {
    transform: translate3d(-28px, 22px, 0) rotate(-12deg) scale(0.84);
  }

  76% {
    transform: translate3d(-68px, 8px, 0) rotate(24deg) scale(0.84);
  }
}

@keyframes instantReadingLeafC {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-34deg) scale(0.72);
  }

  52% {
    transform: translate3d(22px, -18px, 0) rotate(14deg) scale(0.72);
  }
}

@keyframes reportReadingCloudDrift {
  0% {
    transform: translate3d(-1.2%, 0, 0) scale(1);
    opacity: 0.7;
  }

  100% {
    transform: translate3d(1.8%, -0.8%, 0) scale(1.012);
    opacity: 0.82;
  }
}

@keyframes reportReadingLeafOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-24deg);
  }

  45% {
    transform: translate3d(30px, 18px, 0) rotate(12deg);
  }
}

@keyframes reportReadingLeafTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(28deg) scale(0.86);
  }

  50% {
    transform: translate3d(-34px, 20px, 0) rotate(-10deg) scale(0.86);
  }
}

@keyframes reportReadingLeafThree {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-12deg) scale(0.72);
  }

  55% {
    transform: translate3d(-20px, -24px, 0) rotate(18deg) scale(0.72);
  }
}

.comic-focus-goodbye .forest-comic-friends {
  bottom: clamp(178px, 26vh, 220px);
}

.first-prescription-card {
  position: absolute;
  left: clamp(14px, 4vw, 32px);
  right: clamp(14px, 4vw, 32px);
  bottom: clamp(14px, 3vh, 28px);
  z-index: 15;
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 26px;
  color: #302015;
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(255, 238, 176, 0.88),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(255, 250, 230, 0.96),
      rgba(221, 243, 190, 0.94)
    );
  box-shadow:
    0 18px 32px rgba(70, 86, 41, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.78);
}

.prescription-badge {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  color: #3a672f;
  background: rgba(176, 230, 145, 0.78);
  font-size: 0.78rem;
  font-weight: 950;
}

.first-prescription-card h4 {
  margin: 0;
  font-size: clamp(1.18rem, 4.4vw, 1.6rem);
  line-height: 1.12;
}

.first-prescription-card p,
.prescription-note {
  margin: 0;
  color: #6a4e36;
  font-size: clamp(0.86rem, 3vw, 1rem);
  font-weight: 800;
  line-height: 1.42;
  word-break: keep-all;
}

.prescription-note {
  padding: 10px 12px;
  border-radius: 18px;
  color: #594330;
  background: rgba(255, 255, 255, 0.48);
  font-size: clamp(0.82rem, 2.7vw, 0.94rem);
  font-weight: 850;
}

.prescription-seed {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: inset 0 2px 8px rgba(97, 130, 65, 0.08);
}

.prescription-seed span {
  color: #3f8d48;
  font-size: 0.86rem;
  font-weight: 950;
}

.prescription-seed strong {
  color: #2e241b;
  font-size: 0.94rem;
  line-height: 1.32;
}

.open-first-garden-button {
  min-height: 42px;
  border-radius: 999px;
}

.first-garden-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 100%;
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 226, 167, 0.38),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      rgba(255, 251, 240, 0.96),
      rgba(240, 249, 225, 0.96)
    );
}

.first-garden-top {
  min-height: 58px;
}

.first-garden-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 28% 16%,
      rgba(255, 247, 194, 0.82),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 78% 24%,
      rgba(189, 232, 255, 0.54),
      transparent 26%
    ),
    linear-gradient(180deg, #dff7ef 0%, #f9f3dc 56%, #9bd57f 57%, #68b965 100%);
  box-shadow:
    inset 0 18px 28px rgba(255, 255, 255, 0.48),
    inset 0 -18px 28px rgba(84, 135, 72, 0.18);
}

.first-garden-stage::before {
  content: '';
  position: absolute;
  inset: 7% 7% 42%;
  z-index: 1;
  border-radius: 34px 34px 12px 12px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.46),
      transparent 36% 64%,
      rgba(255, 255, 255, 0.36)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(117, 174, 155, 0.22) 0 3px,
      transparent 3px 72px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(117, 174, 155, 0.18) 0 3px,
      transparent 3px 58px
    );
  box-shadow:
    0 12px 24px rgba(75, 136, 111, 0.12),
    inset 0 0 0 2px rgba(255, 255, 255, 0.62);
  pointer-events: none;
}

.first-garden-stage::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -10%;
  z-index: 2;
  height: 42%;
  border-radius: 52% 52% 0 0;
  background:
    radial-gradient(
      circle at 16% 36%,
      rgba(255, 229, 153, 0.34),
      transparent 18%
    ),
    radial-gradient(
      circle at 78% 38%,
      rgba(154, 212, 116, 0.52),
      transparent 22%
    ),
    linear-gradient(180deg, #aede82, #6dbb65);
}

.greenhouse-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(255, 255, 221, 0.48), transparent 28%),
    radial-gradient(
      circle at 52% 40%,
      rgba(255, 255, 255, 0.34),
      transparent 24%
    );
  mix-blend-mode: screen;
}

.greenhouse-frame {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 12%;
  height: 34%;
  z-index: 2;
  border-radius: 28px 28px 8px 8px;
  background:
    linear-gradient(
      90deg,
      rgba(97, 151, 130, 0.22) 0 4px,
      transparent 4px 100%
    ),
    linear-gradient(0deg, rgba(97, 151, 130, 0.18) 0 4px, transparent 4px 100%);
  background-size:
    76px 100%,
    100% 54px;
  opacity: 0.68;
  pointer-events: none;
}

.first-garden-guide-character {
  position: absolute;
  right: clamp(8px, 5vw, 42px);
  bottom: clamp(210px, 38vh, 300px);
  z-index: 8;
  width: clamp(82px, 21vw, 132px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 16px rgba(101, 69, 38, 0.18))
    drop-shadow(0 0 16px rgba(255, 218, 132, 0.22));
  animation: comicFriendBob 3.6s ease-in-out infinite;
}

.sprout-fairy-character {
  transform-origin: center bottom;
}

.flower-story-bubbles {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  z-index: 12;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.flower-story-note,
.flower-dialogue {
  max-width: min(88%, 480px);
  padding: 11px 13px;
  border-radius: 20px;
  color: #2c2219;
  background: rgba(255, 255, 238, 0.9);
  box-shadow:
    0 10px 22px rgba(81, 102, 55, 0.13),
    inset 0 2px 0 rgba(255, 255, 255, 0.76);
}

.flower-story-note {
  justify-self: center;
  text-align: center;
  background: linear-gradient(
    145deg,
    rgba(219, 246, 174, 0.94),
    rgba(255, 246, 194, 0.92)
  );
}

.flower-story-note span,
.flower-dialogue strong {
  display: block;
  margin-bottom: 3px;
  color: #458341;
  font-size: 0.78rem;
  font-weight: 950;
}

.flower-story-note p,
.flower-dialogue p {
  margin: 0;
  font-size: clamp(0.82rem, 2.7vw, 1rem);
  font-weight: 850;
  line-height: 1.34;
  word-break: keep-all;
}

.flower-dialogue-0 {
  justify-self: start;
}

.flower-dialogue-1 {
  justify-self: end;
  background: rgba(227, 247, 207, 0.92);
}

.flower-dialogue-2 {
  justify-self: center;
  background: rgba(255, 241, 220, 0.94);
}

.flower-bed-row {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: clamp(58px, 12vh, 92px);
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.flower-pot-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  min-height: clamp(132px, 22vh, 180px);
  padding: 12px 8px 10px;
  border: 0;
  border-radius: 26px;
  color: #3b2c20;
  background:
    radial-gradient(
      circle at 28% 18%,
      rgba(255, 255, 255, 0.72),
      transparent 22%
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 235, 0.72),
      rgba(232, 247, 205, 0.84)
    );
  box-shadow:
    0 12px 22px rgba(77, 103, 45, 0.14),
    inset 0 2px 0 rgba(255, 255, 255, 0.74);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.flower-pot-card.active {
  transform: translateY(-6px);
  box-shadow:
    0 18px 32px rgba(69, 132, 64, 0.22),
    0 0 0 4px rgba(174, 231, 153, 0.42),
    inset 0 2px 0 rgba(255, 255, 255, 0.84);
}

.flower-pot-card strong {
  margin-top: 8px;
  font-size: clamp(0.82rem, 2.8vw, 0.98rem);
  font-weight: 950;
}

.flower-pot-card small {
  margin-top: 2px;
  color: #6f644f;
  font-size: 0.72rem;
  font-weight: 850;
}

.flower-pot-soil {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 44px;
  height: 34px;
  border-radius: 50% 50% 18px 18px;
  background:
    radial-gradient(
      circle at 26% 28%,
      rgba(255, 219, 157, 0.42),
      transparent 18%
    ),
    linear-gradient(180deg, #b87048, #8b4b2e);
  box-shadow: inset -6px -5px 10px rgba(73, 34, 23, 0.18);
}

.flower-sprout {
  position: relative;
  width: 64px;
  height: 92px;
  margin-bottom: 26px;
}

.flower-stem {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(180deg, #75b55d, #3f863f);
  transform: translateX(-50%);
}

.flower-stem::before,
.flower-stem::after {
  content: '';
  position: absolute;
  top: 20px;
  width: 28px;
  height: 16px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #bbe57d, #5ba34b);
}

.flower-stem::before {
  left: -24px;
  transform: rotate(12deg);
}

.flower-stem::after {
  right: -24px;
  transform: scaleX(-1) rotate(12deg);
}

.flower-head {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 46px;
  height: 46px;
  transform: translateX(-50%);
}

.story-tulip .flower-head {
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(
      circle at 36% 28%,
      rgba(255, 255, 255, 0.68),
      transparent 18%
    ),
    linear-gradient(180deg, #ffe66f, #f1b84a);
  clip-path: polygon(
    50% 4%,
    65% 30%,
    86% 14%,
    78% 100%,
    22% 100%,
    14% 14%,
    35% 30%
  );
}

.story-lavender .flower-head {
  width: 54px;
  height: 58px;
  background:
    radial-gradient(circle at 48% 14%, #caa4ff 0 7px, transparent 8px),
    radial-gradient(circle at 34% 30%, #b58af0 0 8px, transparent 9px),
    radial-gradient(circle at 63% 32%, #a978dc 0 8px, transparent 9px),
    radial-gradient(circle at 42% 48%, #9367ca 0 8px, transparent 9px),
    radial-gradient(circle at 58% 56%, #c6a0f4 0 7px, transparent 8px);
}

.story-rose .flower-head {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffced5 0 9px, transparent 10px),
    radial-gradient(circle at 35% 36%, #ff7b8d 0 14px, transparent 15px),
    radial-gradient(circle at 65% 36%, #e84e66 0 14px, transparent 15px),
    radial-gradient(circle at 50% 66%, #c92b44 0 17px, transparent 18px);
}

.flower-reward-chip {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 12;
  padding: 8px 14px;
  border-radius: 999px;
  color: #31572c;
  background: rgba(245, 255, 218, 0.92);
  box-shadow: 0 10px 18px rgba(72, 104, 46, 0.14);
  font-weight: 950;
  transform: translateX(-50%);
}

.first-garden-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
  gap: 8px;
  padding: 8px 12px 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 242, 0.62),
    rgba(255, 244, 228, 0.92)
  );
}

.first-garden-actions .soft-action,
.first-garden-actions .primary-action {
  min-height: 44px;
  padding-inline: 8px;
}

.monetization-page {
  display: grid;
  min-height: 100%;
  color: #2f241c;
  background:
    radial-gradient(
      circle at 14% 10%,
      rgba(255, 230, 171, 0.46),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(181, 232, 255, 0.22),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255, 251, 241, 0.98),
      rgba(247, 238, 223, 0.96)
    );
}

.monetization-scene {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2.4vw, 18px);
  min-height: 0;
  padding: clamp(14px, 3vw, 28px);
  overflow: auto;
  isolation: isolate;
}

.monetization-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 246, 231, 0.12)
    ),
    url('https://media.sharalong.com/assets/travel/sea/sea_01_clear_watercolor.png') center center / cover
      no-repeat;
  opacity: 0.18;
  filter: saturate(0.82) brightness(1.08);
}

.monetization-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.monetization-header h3 {
  margin: 4px 0 0;
  max-width: 760px;
  color: #2f241c;
  font-size: clamp(1.42rem, 5.4vw, 2.45rem);
  line-height: 1.12;
}

.monetization-header p {
  max-width: 760px;
  margin: 10px 0 0;
  color: rgba(70, 52, 39, 0.78);
  font-size: clamp(0.92rem, 2.6vw, 1.08rem);
  font-weight: 850;
  line-height: 1.45;
  word-break: keep-all;
}

.monetization-header-tools {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.monetization-status {
  padding: 7px 11px;
  border-radius: 999px;
  color: #226074;
  background: rgba(219, 246, 255, 0.86);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 950;
  white-space: nowrap;
}

.monetization-language-switch {
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 250, 239, 0.78);
  box-shadow: var(--pressed-3d-shadow);
}

.monetization-language-switch button {
  min-height: 32px;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  color: rgba(73, 54, 40, 0.72);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 950;
}

.monetization-language-switch button.active {
  color: #ffffff;
  background: linear-gradient(145deg, #78cfff, #4fa9e8 62%, #377ec5);
  box-shadow: 0 8px 18px rgba(72, 156, 214, 0.22);
}

.monetization-content {
  display: grid;
  align-content: center;
  gap: clamp(12px, 2.6vw, 18px);
  min-height: 0;
}

.monetization-section-heading {
  display: grid;
  gap: 5px;
  max-width: 760px;
}

.monetization-section-heading span {
  color: #23718c;
  font-size: 0.82rem;
  font-weight: 950;
}

.monetization-section-heading p {
  margin: 0;
  color: rgba(70, 52, 39, 0.76);
  font-weight: 850;
  line-height: 1.42;
  word-break: keep-all;
}

.monetization-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 2vw, 14px);
}

.monetization-product-card,
.monetization-purchase-card {
  display: grid;
  gap: 8px;
  padding: clamp(14px, 2.5vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 243, 196, 0.72),
      transparent 34%
    ),
    linear-gradient(145deg, rgba(255, 253, 245, 0.93), rgba(242, 232, 215, 0.9));
  box-shadow:
    0 18px 34px rgba(94, 66, 43, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.76);
}

.monetization-product-card h4,
.monetization-purchase-card h4 {
  margin: 0;
  color: #2f241c;
  font-size: clamp(0.95rem, 2.7vw, 1.12rem);
  font-weight: 950;
}

.monetization-product-card p,
.monetization-purchase-card p {
  margin: 0;
  color: rgba(68, 49, 36, 0.8);
  font-size: 0.92rem;
  font-weight: 820;
  line-height: 1.42;
  word-break: keep-all;
}

.monetization-purchase-card {
  width: min(720px, 100%);
  margin-inline: auto;
}

.monetization-purchase-card span {
  color: #23718c;
  font-size: 0.84rem;
  font-weight: 950;
}

.monetization-purchase-card em {
  color: rgba(63, 45, 34, 0.78);
  font-style: normal;
  font-weight: 950;
}

.monetization-purchase-card strong {
  color: #2f241c;
  font-size: clamp(1.38rem, 6vw, 2.2rem);
  line-height: 1;
}

.monetization-summary-list {
  display: grid;
  gap: 7px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.monetization-summary-list li {
  position: relative;
  padding-left: 18px;
  color: rgba(68, 49, 36, 0.84);
  font-weight: 850;
  line-height: 1.34;
}

.monetization-summary-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7dccf1;
  box-shadow: 0 0 0 4px rgba(125, 204, 241, 0.16);
}

.monetization-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2.4vw, 16px);
}

.monetization-feature-card,
.monetization-note-card {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 3vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(255, 243, 196, 0.74),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 242, 0.92),
      rgba(242, 232, 215, 0.88)
    );
  box-shadow:
    0 20px 38px rgba(94, 66, 43, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.76);
}

.monetization-feature-card h4 {
  margin: 0;
  color: #2f241c;
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 950;
}

.monetization-feature-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.monetization-feature-card li {
  position: relative;
  padding-left: 18px;
  color: rgba(68, 49, 36, 0.84);
  font-weight: 850;
  line-height: 1.35;
}

.monetization-feature-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7dccf1;
  box-shadow: 0 0 0 4px rgba(125, 204, 241, 0.16);
}

.monetization-note-card {
  width: min(720px, 100%);
  margin-inline: auto;
}

.monetization-note-card span {
  color: #23718c;
  font-size: 0.84rem;
  font-weight: 950;
}

.monetization-note-card p,
.monetization-note-card small {
  margin: 0;
  color: rgba(63, 45, 34, 0.82);
  font-weight: 850;
  line-height: 1.45;
  word-break: keep-all;
}

.monetization-footer {
  display: grid;
  gap: 10px;
}

.monetization-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.monetization-actions .primary-action,
.monetization-actions .soft-action {
  min-height: 44px;
  padding-inline: 16px;
  border-radius: 999px;
}

.monetization-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
  filter: grayscale(0.24);
}

.monetization-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: rgba(79, 61, 48, 0.68);
  font-size: 0.8rem;
  font-weight: 850;
}

.monetization-legal-links a {
  color: #246d87;
  text-decoration: none;
}

@media (max-width: 719px) {
  .monetization-scene {
    padding: 12px;
  }

  .monetization-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .monetization-header-tools {
    justify-items: start;
  }

  .monetization-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .monetization-product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .monetization-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

.travel-page {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 100%;
  color: #2c2119;
  background:
    radial-gradient(
      circle at 14% 8%,
      rgba(255, 234, 179, 0.42),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      rgba(255, 251, 240, 0.96),
      rgba(237, 246, 229, 0.96)
    );
}

.travel-start-scene {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 0;
  overflow: hidden;
  padding: clamp(20px, 5vw, 52px);
  isolation: isolate;
}

.travel-start-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(255, 250, 237, 0.38),
      rgba(255, 255, 255, 0.12) 42%,
      rgba(84, 142, 126, 0.18)
    ),
    url('https://media.sharalong.com/assets/travel/sea/sea_01_clear_watercolor.png') center center / cover
      no-repeat;
  animation: travelSlowZoom 26s ease-in-out infinite alternate;
}

.travel-start-background::after,
.travel-full-vignette {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(255, 255, 244, 0.28),
      transparent 42%
    ),
    linear-gradient(180deg, rgba(255, 251, 239, 0.28), rgba(35, 67, 73, 0.2));
}

.travel-start-content {
  width: min(620px, 100%);
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 28px;
  background: rgba(255, 250, 238, 0.72);
  box-shadow:
    0 24px 54px rgba(56, 82, 84, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(10px);
}

.travel-start-content h3,
.travel-select-top h3,
.travel-scene-header h3 {
  margin: 4px 0 0;
  color: #2f241c;
  font-size: clamp(1.7rem, 7vw, 3rem);
  line-height: 1.08;
}

.travel-start-content p:not(.flow-kicker),
.travel-select-top p {
  margin: 12px 0 0;
  color: rgba(65, 49, 37, 0.78);
  font-size: clamp(0.95rem, 3.2vw, 1.12rem);
  font-weight: 850;
  line-height: 1.44;
}

.travel-main-button {
  width: min(260px, 100%);
  min-height: 52px;
  margin-top: 22px;
  border-radius: 999px;
}

.travel-category-row {
  position: absolute;
  left: clamp(16px, 5vw, 52px);
  right: clamp(16px, 5vw, 52px);
  bottom: clamp(16px, 4vh, 38px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.travel-category-chip {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  color: #3a2c22;
  background: rgba(255, 249, 235, 0.78);
  box-shadow:
    0 10px 20px rgba(56, 82, 84, 0.14),
    inset 0 2px 0 rgba(255, 255, 255, 0.74);
  font-weight: 950;
}

.travel-category-chip.active {
  color: #155069;
  background: linear-gradient(
    135deg,
    rgba(203, 240, 255, 0.92),
    rgba(255, 244, 205, 0.88)
  );
}

.travel-category-chip:disabled {
  opacity: 0.46;
}

.travel-select-page {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: clamp(14px, 3vw, 28px);
  overflow: auto;
}

.travel-select-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.travel-select-top h3 {
  font-size: clamp(1.32rem, 5.4vw, 2.2rem);
}

.travel-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: clamp(10px, 2vw, 16px);
  align-content: start;
  width: min(880px, 100%);
  margin-inline: auto;
  padding: 0 2px 8px;
}

.travel-scene-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 252px;
  padding: 12px;
  border: 0;
  border-radius: 24px;
  color: #35271f;
  text-align: left;
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 241, 190, 0.54),
      transparent 28%
    ),
    linear-gradient(145deg, rgba(255, 251, 241, 0.94), rgba(245, 235, 218, 0.9));
  box-shadow:
    0 18px 34px rgba(91, 68, 45, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.72);
}

.travel-scene-card.is-premium {
  opacity: 0.78;
}

.travel-scene-thumb {
  display: block;
  min-height: 144px;
  border-radius: 18px;
  background-position: center center;
  background-size: cover;
  box-shadow: inset 0 -18px 28px rgba(30, 51, 60, 0.16);
}

.travel-scene-meta {
  display: grid;
  gap: 4px;
}

.travel-scene-meta strong {
  font-size: 1.02rem;
  font-weight: 950;
}

.travel-scene-meta small {
  color: rgba(78, 58, 43, 0.72);
  font-weight: 850;
  line-height: 1.32;
}

.travel-card-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.travel-play-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #1b5a71;
  background: rgba(218, 242, 255, 0.92);
  font-size: 0.85rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.74);
}

.travel-mini-progress {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(180, 157, 128, 0.22);
}

.travel-mini-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7dccf1, #ffe0a3);
}

.travel-premium-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #6e4b1e;
  background: rgba(255, 237, 181, 0.94);
  font-size: 0.72rem;
  font-weight: 950;
}

.travel-select-page[aria-label='숲 풍경 선택'] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  overflow: hidden;
  gap: 8px;
  padding: clamp(8px, 1.7vw, 14px);
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-select-top {
  width: min(880px, calc(100vw - 2 * clamp(8px, 1.7vw, 14px)));
  margin-inline: auto;
  gap: 6px;
}

.travel-select-scroll-shell {
  width: min(880px, calc(100vw - 2 * clamp(8px, 1.7vw, 14px)));
  min-height: 0;
  height: calc(100dvh - 33vh);
  max-height: calc(100dvh - 33vh);
  margin-inline: auto;
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(8px, 0.9vw, 12px);
  gap: 10px;
  align-items: stretch;
}

.travel-select-scroll-viewport {
  min-height: 0;
  padding-right: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.travel-select-scroll-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.travel-select-scrollbar {
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 2px 0;
}

.travel-select-scrollbar-track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid rgba(198, 232, 224, 0.8);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(222, 243, 235, 0.78),
    rgba(205, 233, 223, 0.9)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(155, 205, 193, 0.28),
    0 4px 12px rgba(93, 138, 126, 0.1);
}

.travel-select-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 1px;
  right: 1px;
  width: calc(100% - 2px);
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(124, 180, 165, 0.72);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(149, 206, 187, 0.92),
    rgba(123, 188, 169, 0.96)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 4px rgba(71, 128, 116, 0.22),
    0 6px 12px rgba(72, 122, 110, 0.16);
  cursor: grab;
  color: transparent;
  appearance: none;
  touch-action: none;
}

.travel-select-scrollbar-thumb:active {
  border-color: rgba(103, 166, 151, 0.82);
  background: linear-gradient(
    180deg,
    rgba(117, 184, 161, 0.96),
    rgba(96, 169, 146, 0.98)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 5px rgba(58, 112, 100, 0.2),
    0 8px 14px rgba(62, 109, 98, 0.18);
  cursor: grabbing;
}

.travel-select-scrollbar-thumb:focus-visible {
  outline: 3px solid rgba(69, 154, 201, 0.76);
  outline-offset: 3px;
}

.travel-select-scrollbar-thumb:hover {
  border-color: rgba(103, 166, 151, 0.82);
  background: linear-gradient(
    180deg,
    rgba(117, 184, 161, 0.96),
    rgba(96, 169, 146, 0.98)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 5px rgba(58, 112, 100, 0.2),
    0 8px 14px rgba(62, 109, 98, 0.18);
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-select-top h3 {
  margin-top: 2px;
  font-size: clamp(1.5rem, 2.55vw, 2.25rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-shadow: none;
  filter: none;
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-select-top p {
  text-shadow: none;
  filter: none;
}

.travel-select-page[aria-label='숲 풍경 선택']
  .travel-select-top
  > div
  > p:first-of-type {
  margin-top: 6px;
  font-size: clamp(0.88rem, 1.1vw, 0.92rem);
  font-weight: 680;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.travel-select-page[aria-label='숲 풍경 선택']
  .travel-select-top
  > div
  > p:last-of-type {
  margin-top: 10px;
  font-size: clamp(0.81rem, 1.05vw, 0.88rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.006em;
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-card-grid {
  gap: clamp(9px, 1.6vw, 13px);
  padding-bottom: 2px;
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-card {
  min-height: 240px;
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-thumb {
  min-height: 146px;
}

.sunshine-p5-entry-card {
  min-height: 196px;
  border: 1px dashed rgba(92, 148, 81, 0.45);
  background:
    radial-gradient(
      circle at 14% 10%,
      rgba(233, 255, 193, 0.55),
      transparent 28%
    ),
    linear-gradient(145deg, rgba(255, 253, 241, 0.96), rgba(235, 247, 218, 0.9));
}

.sunshine-p5-entry-card .travel-scene-thumb {
  min-height: 104px;
  filter: saturate(1.04) brightness(1.03);
}

.sunshine-p5-entry-card .travel-play-icon {
  color: #34633c;
  background: rgba(222, 247, 205, 0.94);
}

.sunshine-p5-entry-card:focus-visible,
.sunshine-p5-return-button:focus-visible {
  outline: 3px solid rgba(69, 154, 201, 0.72);
  outline-offset: 4px;
}

.sunshine-p5-entry-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #416234;
  background: rgba(235, 252, 201, 0.94);
  font-size: 0.72rem;
  font-weight: 950;
}

body.sunshine-p5-overlay-open {
  overflow: hidden;
}

.sunshine-p5-integration-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  background: #f7f2e8;
}

.sunshine-p5-integration-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f7f2e8;
}

.sunshine-p5-return-button {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 10000;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(104, 132, 95, 0.32);
  border-radius: 999px;
  color: #31543c;
  background: rgba(255, 253, 241, 0.9);
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow:
    0 10px 24px rgba(47, 61, 44, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
}

.sunshine-p5-return-button:hover {
  background: rgba(241, 253, 219, 0.94);
}

@media (max-width: 600px) {
  .sunshine-p5-entry-card {
    min-height: 158px;
  }

  .sunshine-p5-entry-card .travel-scene-thumb {
    min-height: 82px;
  }

  .sunshine-p5-return-button {
    min-height: 38px;
    padding: 0 13px;
    font-size: 0.86rem;
  }
}

.travel-premium-message {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255, 250, 238, 0.84);
  box-shadow:
    0 12px 22px rgba(92, 66, 45, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.72);
}

.travel-premium-message p {
  margin: 0;
  color: rgba(75, 56, 43, 0.76);
  font-weight: 850;
  line-height: 1.38;
}

.travel-premium-offer-page {
  display: grid;
  align-items: center;
  min-height: calc(100dvh - var(--header-height, 76px));
  padding: clamp(18px, 4vw, 42px);
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 198, 146, 0.42),
      transparent 28%
    ),
    radial-gradient(
      circle at 86% 18%,
      rgba(253, 151, 120, 0.24),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 239, 0.96),
      rgba(248, 235, 217, 0.94)
    );
}

.travel-premium-offer-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(18px, 4vw, 34px);
  width: min(920px, 100%);
  margin-inline: auto;
  padding: clamp(16px, 3vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 32px;
  background: rgba(255, 251, 242, 0.84);
  box-shadow:
    0 24px 54px rgba(101, 60, 38, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
}

.travel-premium-offer-art {
  position: relative;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  background: rgba(255, 240, 218, 0.9);
  box-shadow: inset 0 -32px 48px rgba(96, 61, 41, 0.16);
}

.travel-premium-offer-art img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
}

.travel-premium-offer-art span {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #7a4e22;
  background: rgba(255, 238, 182, 0.94);
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 8px 16px rgba(110, 69, 32, 0.12);
}

.travel-premium-offer-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  color: #33241d;
}

.travel-premium-offer-copy h3 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.55rem);
  line-height: 1.08;
}

.travel-premium-offer-copy p {
  margin: 0;
  color: rgba(71, 51, 39, 0.84);
  font-weight: 850;
  line-height: 1.55;
  word-break: keep-all;
}

.travel-premium-included {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255, 247, 229, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.travel-premium-included strong {
  color: #8a532c;
  font-size: 0.9rem;
  font-weight: 950;
}

.travel-premium-included ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.travel-premium-included li {
  position: relative;
  padding-left: 18px;
  color: rgba(68, 48, 36, 0.82);
  font-weight: 850;
  line-height: 1.36;
}

.travel-premium-included li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e7a257;
  box-shadow: 0 0 0 4px rgba(231, 162, 87, 0.16);
}

.travel-premium-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.travel-premium-offer-actions .primary-action,
.travel-premium-offer-actions .soft-action {
  min-height: 48px;
  padding-inline: 18px;
  border-radius: 999px;
}

.deep-garden-gateway {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  align-content: start;
  gap: clamp(12px, 2vw, 18px);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: clamp(14px, 3vw, 28px);
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(
      circle at 14% 8%,
      rgba(255, 225, 162, 0.4),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 16%,
      rgba(203, 238, 187, 0.46),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(255, 252, 242, 0.98),
      rgba(239, 248, 226, 0.96)
    );
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.deep-garden-hero,
.deep-prescription-card,
.deep-gateway-note {
  width: min(960px, 100%);
  margin-inline: auto;
}

.deep-garden-hero {
  position: relative;
  padding: clamp(14px, 2.8vw, 24px);
  overflow: hidden;
  border-radius: 28px;
  background:
    linear-gradient(
      115deg,
      rgba(255, 250, 235, 0.94),
      rgba(231, 247, 222, 0.86)
    ),
    url('assets/interpretation/backgrounds/tree_desktop.png') center center /
      cover no-repeat;
  box-shadow:
    0 18px 36px rgba(92, 118, 70, 0.13),
    inset 0 2px 0 rgba(255, 255, 255, 0.78);
  isolation: isolate;
}

.deep-garden-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(255, 252, 241, 0.9),
      rgba(255, 252, 241, 0.64) 52%,
      rgba(255, 252, 241, 0.28)
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(255, 225, 139, 0.28),
      transparent 28%
    );
}

.deep-garden-hero h3 {
  margin: 2px 0 0;
  color: #2e241c;
  font-size: clamp(1.24rem, 4.6vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: 0;
  white-space: nowrap;
  word-break: keep-all;
}

.deep-garden-hero p:not(.flow-kicker) {
  max-width: 520px;
  margin: 8px 0 0;
  color: rgba(55, 43, 32, 0.8);
  font-size: clamp(0.9rem, 2.5vw, 1.02rem);
  font-weight: 850;
  line-height: 1.38;
  word-break: keep-all;
}

.deep-prescription-card {
  display: grid;
  gap: 6px;
  padding: clamp(14px, 2.4vw, 20px);
  border: 1px solid rgba(218, 200, 164, 0.58);
  border-radius: 26px;
  background:
    radial-gradient(
      circle at 92% 18%,
      rgba(190, 232, 174, 0.36),
      transparent 26%
    ),
    rgba(255, 250, 238, 0.9);
  box-shadow:
    0 16px 32px rgba(102, 82, 55, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

.deep-prescription-card span,
.deep-course-card-head span,
.deep-gateway-note span {
  color: #4a8b45;
  font-size: 0.8rem;
  font-weight: 950;
}

.deep-prescription-card h4,
.deep-course-card h4 {
  margin: 0;
  color: #2f241c;
  font-size: clamp(1.1rem, 3.3vw, 1.42rem);
  line-height: 1.24;
}

.deep-prescription-card p,
.deep-course-card p,
.deep-gateway-note p {
  margin: 0;
  color: rgba(64, 48, 36, 0.78);
  font-size: clamp(0.9rem, 2.8vw, 1rem);
  font-weight: 820;
  line-height: 1.48;
  word-break: keep-all;
}

.deep-prescription-card small {
  display: block;
  padding: 8px 10px;
  border-radius: 14px;
  color: rgba(82, 62, 43, 0.78);
  background: rgba(255, 255, 246, 0.74);
  font-size: clamp(0.86rem, 2.3vw, 0.94rem);
  font-weight: 850;
  line-height: 1.32;
}

.deep-prescription-card h4 {
  font-size: clamp(1.02rem, 3vw, 1.28rem);
  line-height: 1.18;
}

.deep-prescription-card p {
  font-size: clamp(0.94rem, 2.4vw, 1rem);
  line-height: 1.36;
}

.deep-course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
  width: min(940px, 100%);
  margin-inline: auto;
}

.deep-course-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  min-height: 360px;
  padding: 16px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 22% 14%,
      rgba(255, 241, 184, 0.42),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 242, 0.94),
      rgba(241, 234, 216, 0.88)
    );
  box-shadow:
    0 16px 30px rgba(86, 68, 45, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.78);
}

.deep-course-card > * {
  position: relative;
  z-index: 1;
}

.deep-course-visual {
  width: 100%;
  height: clamp(190px, 22vw, 250px);
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 24% 18%,
      rgba(255, 255, 255, 0.62),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255, 250, 238, 0.86),
      rgba(238, 246, 226, 0.72)
    );
  box-shadow:
    inset 0 -18px 24px rgba(69, 91, 63, 0.09),
    0 8px 16px rgba(81, 67, 45, 0.08);
}

.deep-course-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.deep-course-card.is-active {
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(198, 238, 255, 0.54),
      transparent 28%
    ),
    linear-gradient(145deg, rgba(255, 253, 241, 0.98), rgba(224, 246, 222, 0.9));
  box-shadow:
    0 18px 34px rgba(68, 139, 126, 0.18),
    0 0 0 3px rgba(159, 219, 238, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.82);
}

.deep-course-card.is-locked {
  filter: saturate(0.82);
}

.deep-course-card.is-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.26);
  pointer-events: none;
}

.deep-course-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deep-course-card-head strong,
.deep-lock-label {
  position: relative;
  z-index: 1;
  padding: 5px 9px;
  border-radius: 999px;
  color: #77542e;
  background: rgba(255, 237, 181, 0.88);
  font-size: 0.72rem;
  font-weight: 950;
  white-space: nowrap;
}

.deep-course-button {
  align-self: end;
  min-height: 42px;
  margin-top: auto;
  border-radius: 999px;
}

.deep-lock-label {
  align-self: end;
  margin-top: auto;
  color: rgba(83, 64, 46, 0.78);
  background: rgba(255, 248, 228, 0.86);
}

.deep-premium-button {
  border: 0;
  font: inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.deep-premium-button:hover,
.deep-premium-button:focus-visible {
  color: #5d442c;
  background: rgba(255, 235, 172, 0.96);
  outline: 2px solid rgba(73, 169, 222, 0.42);
  outline-offset: 2px;
}

.premium-access-notice {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  pointer-events: auto;
}

.premium-access-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 50% 32%,
      rgba(255, 243, 204, 0.36),
      transparent 42%
    ),
    rgba(44, 33, 25, 0.34);
  backdrop-filter: blur(8px);
}

.premium-access-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(720px, calc(100dvh - 36px));
  overflow: auto;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 30px;
  color: #35251b;
  background:
    linear-gradient(
      145deg,
      rgba(255, 252, 239, 0.95),
      rgba(238, 252, 230, 0.9)
    ),
    rgba(255, 249, 232, 0.92);
  box-shadow:
    0 30px 72px rgba(66, 47, 31, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.premium-access-card h3 {
  margin: 8px 42px 10px 0;
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: 0;
}

.premium-access-description {
  margin: 0 0 16px;
  color: rgba(72, 52, 38, 0.84);
  font-size: 1rem;
  line-height: 1.65;
}

.premium-access-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: #6b5139;
  background: rgba(255, 248, 231, 0.92);
  box-shadow: 0 10px 22px rgba(98, 72, 45, 0.14);
  cursor: pointer;
}

.premium-access-status-line {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 18px;
  color: #45642d;
  background: rgba(221, 247, 184, 0.74);
  font-weight: 850;
  line-height: 1.5;
}

.premium-access-notice.premium-access-not_logged_in
  .premium-access-status-line {
  color: #0d5d7d;
  background: rgba(218, 244, 255, 0.72);
}

.premium-access-notice.premium-access-inactive .premium-access-status-line,
.premium-access-notice.premium-access-check_failed .premium-access-status-line {
  color: #7c4f22;
  background: rgba(255, 235, 191, 0.82);
}

.premium-access-included {
  margin-top: 16px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.58);
}

.premium-access-included strong {
  display: block;
  margin-bottom: 10px;
  color: #684f35;
}

.premium-access-included ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.premium-access-included li {
  position: relative;
  padding-left: 18px;
  color: rgba(54, 41, 31, 0.86);
  line-height: 1.45;
}

.premium-access-included li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #73c7e8;
  box-shadow: 0 0 0 4px rgba(115, 199, 232, 0.16);
}

.premium-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.premium-access-actions .primary-action,
.premium-access-actions .soft-action {
  flex: 1 1 190px;
  min-height: 48px;
}

.premium-access-actions button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.2);
  opacity: 0.72;
}

.premium-access-card small {
  display: block;
  margin-top: 12px;
  color: rgba(108, 73, 43, 0.78);
  line-height: 1.45;
}

.premium-asset-loading-stage {
  display: grid;
  min-height: calc(100dvh - var(--header-height, 76px));
  place-items: center;
  padding: clamp(24px, 6vw, 72px);
  background:
    linear-gradient(
      135deg,
      rgba(255, 242, 220, 0.92),
      rgba(230, 245, 238, 0.86)
    ),
    url('https://media.sharalong.com/assets/travel/sea/sea_02_sunset_watercolor.png') center / cover
      no-repeat;
}

.premium-asset-loading-card {
  width: min(560px, 100%);
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  background: rgba(255, 252, 243, 0.88);
  box-shadow: 0 22px 70px rgba(115, 82, 52, 0.18);
  color: #3d2b20;
}

.premium-asset-loading-card h3 {
  margin: 8px 0 12px;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  line-height: 1.2;
}

.premium-asset-loading-card p {
  margin: 0;
  color: rgba(61, 43, 32, 0.78);
  font-weight: 700;
  line-height: 1.65;
}

.premium-asset-loading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.deep-gateway-note {
  position: sticky;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(14px, 3vw, 20px);
  border-radius: 26px;
  background: linear-gradient(
    135deg,
    rgba(229, 248, 220, 0.9),
    rgba(255, 250, 234, 0.92)
  );
  box-shadow:
    0 18px 34px rgba(85, 116, 65, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
}

.deep-gateway-note .primary-action {
  flex: 0 0 min(260px, 46%);
  min-height: 48px;
}

.deep-gateway-actions {
  width: min(960px, 100%);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 0;
}

.travel-category-select-scene {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: clamp(14px, 3vw, 22px);
  height: 100%;
  min-height: 0;
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.travel-category-select-page {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.travel-category-intro {
  width: min(760px, 100%);
}

.travel-category-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
  width: min(980px, 100%);
  margin-inline: auto;
  align-items: stretch;
}

.travel-category-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  gap: 11px;
  min-height: 430px;
  padding: clamp(16px, 2.2vw, 22px);
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  color: #35271f;
  text-align: left;
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(255, 241, 184, 0.5),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 242, 0.94),
      rgba(241, 234, 216, 0.88)
    );
  box-shadow:
    0 16px 30px rgba(86, 68, 45, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.travel-category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(255, 253, 242, 0.12) 0%,
      rgba(255, 253, 242, 0.03) 44%,
      rgba(255, 251, 239, 0.18) 100%
    ),
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 245, 201, 0.42),
      transparent 28%
    );
  pointer-events: none;
}

.travel-category-card > * {
  position: relative;
  z-index: 2;
}

.travel-category-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(190px, 21vw, 250px);
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 255, 255, 0.58),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(231, 247, 251, 0.82),
      rgba(255, 248, 229, 0.78)
    );
  box-shadow:
    inset 0 -18px 24px rgba(42, 92, 92, 0.1),
    0 8px 16px rgba(81, 67, 45, 0.08);
}

.travel-category-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.travel-category-card.is-active {
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(204, 239, 255, 0.54),
      transparent 28%
    ),
    linear-gradient(145deg, rgba(255, 253, 242, 0.98), rgba(224, 246, 222, 0.9));
  box-shadow:
    0 18px 34px rgba(68, 139, 126, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.82);
}

.travel-category-card.is-locked {
  cursor: pointer;
  opacity: 0.76;
  filter: saturate(0.8);
}

.travel-category-card.is-locked::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 253, 242, 0.34) 0%,
      rgba(255, 253, 242, 0.2) 44%,
      rgba(255, 251, 239, 0.46) 100%
    ),
    rgba(255, 255, 255, 0.12);
}

.travel-category-card.is-locked .travel-category-image img {
  filter: saturate(0.72) blur(0.4px);
  opacity: 0.68;
}

.travel-category-symbol {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  color: #4f8d45;
  background: rgba(234, 248, 212, 0.88);
  font-size: 0.72rem;
  font-weight: 950;
}

.travel-category-card.is-locked .travel-category-symbol {
  color: #77542e;
  background: rgba(255, 237, 181, 0.88);
}

.travel-category-card strong {
  color: #2f241c;
  font-size: clamp(1.12rem, 3.2vw, 1.42rem);
  font-weight: 950;
}

.travel-category-card small,
.travel-category-card em,
.travel-scene-meta em {
  color: rgba(78, 58, 43, 0.72);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.38;
  word-break: keep-all;
}

.travel-category-card em {
  margin-top: auto;
  color: #6b8e42;
}

.travel-category-card.is-locked em {
  color: #8d724e;
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta {
  gap: 4px;
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta strong {
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.016em;
  text-shadow: none;
  filter: none;
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta small {
  color: rgba(78, 58, 43, 0.74);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.008em;
  text-shadow: none;
  filter: none;
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta em {
  color: rgba(78, 58, 43, 0.78);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.006em;
  text-shadow: none;
  filter: none;
}

.travel-select-page[aria-label='숲 풍경 선택'] .travel-premium-badge {
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: none;
  filter: none;
}

.travel-scene-page {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100%;
  overflow: hidden;
}

body.travel-healing-mode .travel-scene-page {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: calc(100dvh - 64px);
  overflow: hidden;
  background: transparent;
}

.travel-scene-stage {
  position: relative;
  height: 100%;
  min-height: clamp(420px, calc(100dvh - 126px), 760px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 238, 174, 0.4),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(202, 233, 244, 0.92),
      rgba(249, 240, 218, 0.94)
    );
}

body.travel-healing-mode .travel-scene-stage {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
}

.travel-playback {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.travel-scene-id-sea_01_clear .travel-playback::before,
.travel-scene-id-sea_01_clear .travel-playback::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.travel-scene-id-sea_01_clear .travel-playback::before {
  opacity: 0;
  background:
    radial-gradient(
      circle at 18% 14%,
      rgba(255, 243, 173, 0.38),
      transparent 20%
    ),
    radial-gradient(
      ellipse at 42% 58%,
      rgba(255, 255, 255, 0.2),
      transparent 36%
    ),
    linear-gradient(
      120deg,
      transparent 0 32%,
      rgba(255, 255, 255, 0.13) 42%,
      transparent 58% 100%
    );
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  animation: clearSeaSunGlowScene 90s ease-in-out infinite;
}

.travel-scene-id-sea_01_clear .travel-playback::after {
  inset: 38% -8% -8%;
  opacity: 0;
  background:
    radial-gradient(
      circle at 13% 72%,
      rgba(255, 255, 255, 0.58) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 23% 54%,
      rgba(255, 255, 255, 0.4) 0 1px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 34% 66%,
      rgba(255, 255, 255, 0.46) 0 1.3px,
      transparent 3px
    ),
    radial-gradient(
      circle at 49% 48%,
      rgba(255, 255, 255, 0.42) 0 1px,
      transparent 2.6px
    ),
    radial-gradient(
      circle at 62% 70%,
      rgba(255, 255, 255, 0.54) 0 1.4px,
      transparent 3px
    ),
    radial-gradient(
      circle at 76% 51%,
      rgba(255, 255, 255, 0.4) 0 1px,
      transparent 2.8px
    ),
    radial-gradient(
      circle at 88% 68%,
      rgba(255, 255, 255, 0.52) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      ellipse at 42% 62%,
      rgba(255, 255, 255, 0.16),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 68% 58%,
      rgba(166, 235, 246, 0.14),
      transparent 46%
    ),
    linear-gradient(
      116deg,
      transparent 0 36%,
      rgba(255, 255, 255, 0.08) 46%,
      transparent 62% 100%
    );
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: blur(0.2px);
  animation: clearSeaSparkleScene 90s ease-in-out infinite;
}

.travel-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.travel-full-background {
  position: absolute;
  inset: -6%;
  z-index: 0;
  transform: scale(1);
}

.travel-layer-base {
  background-image: var(--travel-scene-image);
  background-position: center center;
  background-size: cover;
  animation: travelSeaHorizon 72s ease-in-out infinite;
}

.travel-scene-id-sea_01_clear .travel-layer-base {
  inset: -9% -12% -10%;
  background-position: 4% 68%;
  background-size: auto 124%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform-origin: center center;
  animation: none;
}

.travel-scene-id-sea_01_clear .clear-sea-stage.is-playing .clear-sea-panorama {
  animation: clearSeaScenePanorama 90s cubic-bezier(0.45, 0, 0.22, 1) infinite;
}

.travel-scene-id-sea_04_cliff .travel-playback {
  background: #eef7fb;
}

.travel-scene-id-sea_01_clear .travel-layer-clouds {
  inset: -12% -28% 38% -28%;
  opacity: 0.68;
  background-repeat: no-repeat;
  filter: blur(10px);
  animation: none;
}

.travel-scene-id-sea_01_clear .clear-sea-stage.is-playing .clear-sea-clouds {
  animation: clearSeaSceneClouds 118s ease-in-out infinite;
}

.travel-scene-id-sea_01_clear .travel-layer-waves {
  inset: auto -24% -9% -24%;
  height: 72%;
  opacity: 0.84;
  background:
    radial-gradient(
      ellipse at 20% 24%,
      rgba(255, 255, 255, 0.34),
      transparent 24%
    ),
    radial-gradient(
      ellipse at 42% 18%,
      rgba(255, 255, 255, 0.3),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 68% 54%,
      rgba(132, 222, 236, 0.18),
      transparent 56%
    ),
    radial-gradient(
      ellipse at 84% 32%,
      rgba(255, 255, 255, 0.22),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.08) 34%,
      rgba(87, 196, 219, 0.12) 58%,
      rgba(255, 255, 255, 0.12) 82%,
      rgba(255, 255, 255, 0) 100%
    );
  background-repeat: no-repeat;
  backface-visibility: hidden;
  animation: none;
}

.travel-scene-id-sea_01_clear
  .clear-sea-stage.is-playing
  .clear-sea-wave-front {
  animation:
    clearSeaSceneWaves 8.5s ease-in-out infinite,
    clearSeaWaveStrength 90s ease-in-out infinite;
}

.travel-scene-id-sea_01_clear .travel-layer-waves::before {
  opacity: 0.76;
  background:
    radial-gradient(
      ellipse at 18% 60%,
      rgba(255, 255, 255, 0.34),
      transparent 22%
    ),
    radial-gradient(
      ellipse at 48% 42%,
      rgba(255, 255, 255, 0.28),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 76% 58%,
      rgba(255, 255, 255, 0.3),
      transparent 24%
    ),
    linear-gradient(
      178deg,
      transparent 0%,
      rgba(255, 255, 255, 0.16) 48%,
      transparent 72%
    );
  background-repeat: no-repeat;
  animation:
    travelWaveRipple 41s ease-in-out infinite alternate,
    clearSeaFoamPulse 90s ease-in-out infinite;
}

.travel-scene-id-sea_01_clear .travel-layer-waves::after {
  opacity: 0.58;
  background:
    radial-gradient(
      ellipse at 26% 44%,
      rgba(255, 255, 255, 0.26),
      transparent 20%
    ),
    radial-gradient(
      ellipse at 58% 62%,
      rgba(255, 255, 255, 0.24),
      transparent 26%
    ),
    radial-gradient(
      ellipse at 84% 48%,
      rgba(255, 255, 255, 0.28),
      transparent 22%
    ),
    linear-gradient(
      182deg,
      transparent 0%,
      rgba(199, 247, 255, 0.14) 54%,
      transparent 80%
    );
  background-repeat: no-repeat;
  animation:
    travelWaveRipple 53s ease-in-out infinite alternate-reverse,
    clearSeaFoamPulse 90s ease-in-out infinite reverse;
}

.travel-scene-id-sea_01_clear .travel-layer-light {
  opacity: 0.52;
  animation: clearSeaSceneLight 16s ease-in-out infinite alternate;
}

.travel-scene-id-sea_01_clear .clear-sea-stage::after {
  content: '';
  position: absolute;
  left: 18%;
  bottom: 18%;
  z-index: 5;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(211, 92, 62, 0.9) 0 24%,
      transparent 26%
    ),
    radial-gradient(
      circle at 32% 42%,
      rgba(236, 139, 92, 0.86) 0 12%,
      transparent 14%
    ),
    radial-gradient(
      circle at 68% 42%,
      rgba(236, 139, 92, 0.86) 0 12%,
      transparent 14%
    ),
    linear-gradient(
      90deg,
      transparent 0 16%,
      rgba(177, 68, 54, 0.72) 18% 24%,
      transparent 26% 74%,
      rgba(177, 68, 54, 0.72) 76% 82%,
      transparent 84% 100%
    );
  filter: blur(0.2px) saturate(0.9);
  transform: translate3d(0, 0, 0) scale(0.72);
}

.travel-scene-id-sea_01_clear .clear-sea-stage.is-playing::after {
  animation: clearSeaTinyCrabScene 90s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-scene-stage {
  background:
    radial-gradient(
      circle at 52% 26%,
      rgba(255, 217, 144, 0.52),
      transparent 28%
    ),
    linear-gradient(180deg, #fed9bd 0%, #dca0c4 42%, #7bb6c7 100%);
}

.travel-scene-id-sea_02_sunset .travel-playback {
  isolation: isolate;
}

.travel-scene-id-sea_02_sunset .travel-playback::before,
.travel-scene-id-sea_02_sunset .travel-playback::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: opacity, transform, filter;
}

.travel-scene-id-sea_02_sunset .travel-playback::before {
  inset: 0;
  z-index: 4;
  opacity: 0.64;
  background:
    radial-gradient(
      circle at 48% 30%,
      rgba(255, 224, 132, 0.36),
      transparent 21%
    ),
    radial-gradient(
      ellipse at 30% 38%,
      rgba(76, 82, 190, 0.42),
      transparent 40%
    ),
    radial-gradient(
      ellipse at 56% 42%,
      rgba(184, 51, 145, 0.36),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 62% 56%,
      rgba(227, 53, 82, 0.28),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 50% 72%,
      rgba(255, 143, 75, 0.34),
      transparent 46%
    ),
    linear-gradient(
      180deg,
      rgba(86, 82, 180, 0.22),
      rgba(219, 74, 139, 0.26) 42%,
      rgba(218, 132, 57, 0.28) 100%
    );
  mix-blend-mode: color;
  animation: travelSunsetColorWash 28s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-playback::after {
  inset: 42% -10% -6%;
  z-index: 5;
  opacity: 0.58;
  background:
    radial-gradient(
      ellipse at 28% 46%,
      rgba(255, 240, 190, 0.32),
      transparent 24%
    ),
    radial-gradient(
      ellipse at 48% 38%,
      rgba(255, 205, 126, 0.46),
      transparent 24%
    ),
    radial-gradient(
      ellipse at 62% 58%,
      rgba(255, 124, 153, 0.28),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 78% 42%,
      rgba(181, 116, 212, 0.22),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 50% 80%,
      rgba(255, 225, 166, 0.24),
      transparent 48%
    );
  mix-blend-mode: screen;
  filter: blur(8px);
  animation: travelSunsetWaterGlow 16s ease-in-out infinite alternate;
}

.travel-scene-id-sea_02_sunset .travel-layer-base {
  inset: -11% -18% -12%;
  background-position: 48% 62%;
  background-size: auto 130%;
  background-repeat: no-repeat;
  transform-origin: center center;
  filter: saturate(1.24) contrast(1.04) brightness(1.03);
  animation: none;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-panorama {
  animation:
    travelSunsetPanorama 52s cubic-bezier(0.45, 0, 0.22, 1) infinite,
    travelSunsetColorCycle 28s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-clouds {
  inset: -14% -26% 42% -26%;
  z-index: 1;
  opacity: 0.56;
  background:
    radial-gradient(
      ellipse at 18% 30%,
      rgba(255, 247, 228, 0.74),
      transparent 30%
    ),
    radial-gradient(
      ellipse at 48% 18%,
      rgba(255, 205, 196, 0.5),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 78% 32%,
      rgba(220, 190, 242, 0.44),
      transparent 32%
    );
  mix-blend-mode: screen;
  filter: blur(10px) saturate(1.04);
  animation: none;
}

.travel-scene-id-sea_02_sunset .sunset-sea-stage.is-playing .sunset-sea-clouds {
  animation:
    travelSunsetClouds 54s ease-in-out infinite,
    travelSunsetCloudTone 30s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-waves {
  inset: auto -20% -8% -20%;
  z-index: 2;
  height: 68%;
  opacity: 0.58;
  background:
    radial-gradient(
      ellipse at 12% 34%,
      rgba(255, 233, 203, 0.28),
      transparent 24%
    ),
    radial-gradient(
      ellipse at 34% 52%,
      rgba(255, 158, 185, 0.18),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 56% 28%,
      rgba(255, 244, 206, 0.26),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 82% 58%,
      rgba(143, 96, 178, 0.14),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 50% 72%,
      rgba(255, 180, 112, 0.16),
      transparent 54%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  mix-blend-mode: screen;
  filter: blur(5px);
  animation: none;
  will-change: opacity, transform, filter;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-wave-front {
  animation:
    travelSunsetWaveDrift 10s ease-in-out infinite,
    travelSunsetWaveTone 28s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-waves::before {
  opacity: 0.62;
  background:
    radial-gradient(
      ellipse at 22% 62%,
      rgba(255, 255, 255, 0.24),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 52% 44%,
      rgba(255, 222, 170, 0.26),
      transparent 24%
    ),
    radial-gradient(
      ellipse at 78% 60%,
      rgba(255, 168, 198, 0.22),
      transparent 24%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  filter: blur(7px);
  animation: travelSunsetWaveRipple 18s ease-in-out infinite alternate;
}

.travel-scene-id-sea_02_sunset .travel-layer-waves::after {
  opacity: 0.5;
  background:
    radial-gradient(
      ellipse at 26% 42%,
      rgba(255, 230, 188, 0.22),
      transparent 22%
    ),
    radial-gradient(
      ellipse at 60% 64%,
      rgba(254, 157, 187, 0.2),
      transparent 26%
    ),
    radial-gradient(
      ellipse at 86% 46%,
      rgba(255, 247, 216, 0.24),
      transparent 22%
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  filter: blur(8px);
  animation: travelSunsetWaveRipple 24s ease-in-out infinite alternate-reverse;
}

.travel-scene-id-sea_02_sunset .travel-layer-light {
  z-index: 3;
  opacity: 0.46;
  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(255, 231, 142, 0.48),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 46% 54%,
      rgba(255, 115, 151, 0.24),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 68% 42%,
      rgba(142, 94, 190, 0.18),
      transparent 42%
    ),
    linear-gradient(
      112deg,
      transparent 0 24%,
      rgba(255, 241, 196, 0.22) 38%,
      rgba(255, 117, 157, 0.13) 54%,
      transparent 74% 100%
    );
  mix-blend-mode: soft-light;
  animation: none;
}

.travel-scene-id-sea_02_sunset .sunset-sea-stage.is-playing .sunset-sea-light {
  animation: travelSunsetLightShift 22s ease-in-out infinite;
}

.travel-layer-clouds {
  inset: -10% -22% 36% -22%;
  z-index: 1;
  opacity: 0.52;
  background:
    radial-gradient(
      ellipse at 18% 24%,
      rgba(255, 255, 255, 0.78),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 48% 14%,
      rgba(255, 250, 235, 0.62),
      transparent 30%
    ),
    radial-gradient(
      ellipse at 78% 28%,
      rgba(228, 244, 255, 0.58),
      transparent 32%
    );
  filter: blur(12px);
  animation: travelCloudPan 82s ease-in-out infinite alternate;
}

.travel-layer-waves {
  inset: auto -18% -8% -18%;
  z-index: 2;
  height: 64%;
  opacity: 0.68;
  background:
    repeating-linear-gradient(
      178deg,
      rgba(255, 255, 255, 0) 0 15px,
      rgba(255, 255, 255, 0.48) 16px 20px,
      rgba(91, 186, 212, 0.16) 21px 34px
    ),
    radial-gradient(
      ellipse at 50% 20%,
      rgba(255, 255, 255, 0.38),
      transparent 48%
    );
  mix-blend-mode: screen;
  filter: blur(0.45px);
  animation: travelWaveDrift 42s ease-in-out infinite alternate;
}

.travel-layer-waves::before,
.travel-layer-waves::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  height: 46%;
  pointer-events: none;
  background: repeating-linear-gradient(
    182deg,
    rgba(255, 255, 255, 0) 0 20px,
    rgba(255, 255, 255, 0.46) 21px 24px,
    rgba(73, 184, 213, 0.12) 25px 42px
  );
  mix-blend-mode: screen;
}

.travel-layer-waves::before {
  top: 18%;
  opacity: 0.66;
  animation: travelWaveRipple 58s ease-in-out infinite alternate;
}

.travel-layer-waves::after {
  bottom: 4%;
  opacity: 0.48;
  animation: travelWaveRipple 74s ease-in-out infinite alternate-reverse;
}

.travel-layer-light {
  z-index: 3;
  opacity: 0.4;
  background:
    radial-gradient(
      circle at 26% 20%,
      rgba(255, 244, 177, 0.36),
      transparent 20%
    ),
    linear-gradient(
      115deg,
      transparent 0 34%,
      rgba(255, 255, 255, 0.18) 42%,
      transparent 54% 100%
    );
  mix-blend-mode: soft-light;
  animation: travelLightPulse 14s ease-in-out infinite alternate;
}

.travel-scene-stage .travel-full-vignette {
  z-index: 1;
}

.travel-scene-stage
  > :not(.travel-playback):not(.travel-full-background):not(
    .travel-full-vignette
  ) {
  position: relative;
}

.travel-scene-slow_zoom .travel-full-background {
  animation: travelSeaHorizon 72s ease-in-out infinite;
}

.travel-scene-slow_pan .travel-full-background {
  animation: travelSeaHorizon 78s ease-in-out infinite;
}

.travel-scene-header {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.travel-scene-header > * {
  pointer-events: auto;
}

.travel-scene-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
}

.travel-scene-header .tts-button {
  max-width: 100%;
  overflow: hidden;
}

.travel-scene-header .tts-button strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.travel-sound-button.is-playing {
  color: #16465a;
  background: linear-gradient(
    145deg,
    rgba(206, 244, 255, 0.94),
    rgba(255, 244, 209, 0.9)
  );
}

.travel-scene-header h3 {
  color: #fff9ef;
  font-size: clamp(1.3rem, 5vw, 2.1rem);
  text-shadow: 0 3px 16px rgba(32, 46, 58, 0.36);
}

.travel-scene-header .flow-kicker {
  color: #fff8dc;
  text-shadow: 0 2px 10px rgba(32, 46, 58, 0.34);
}

.travel-dialogue-layer {
  position: absolute;
  left: clamp(12px, 4vw, 34px);
  right: clamp(12px, 4vw, 34px);
  top: clamp(92px, 17vh, 150px);
  z-index: 10;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.travel-bubble {
  max-width: min(78%, 500px);
  padding: 12px 15px;
}

.travel-bubble p {
  font-size: clamp(0.9rem, 2.7vw, 1.08rem);
  line-height: 1.34;
}

.travel-friends {
  bottom: clamp(176px, 26vh, 234px);
  z-index: 11;
}

.travel-interpretation-card {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3vh, 28px);
  z-index: 12;
  display: grid;
  gap: 8px;
  width: min(88%, 620px);
  padding: clamp(14px, 3vw, 18px);
  border-radius: 24px;
  color: #31231a;
  background: rgba(255, 250, 239, 0.84);
  box-shadow:
    0 22px 42px rgba(37, 55, 57, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.travel-interpretation-card span {
  color: #23718c;
  font-size: 0.82rem;
  font-weight: 950;
}

.travel-interpretation-card p,
.travel-interpretation-card small {
  margin: 0;
  color: rgba(63, 45, 34, 0.82);
  font-weight: 850;
  line-height: 1.42;
  word-break: keep-all;
}

.travel-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.travel-keywords b {
  padding: 5px 9px;
  border-radius: 999px;
  color: #19566d;
  background: rgba(211, 241, 255, 0.82);
  font-size: 0.78rem;
}

.travel-premium-cta {
  min-height: 42px;
  border-radius: 999px;
}

.travel-sunset-complete-card {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 8vh, 72px);
  z-index: 13;
  display: grid;
  gap: 10px;
  width: min(88%, 560px);
  padding: clamp(18px, 4vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 28px;
  color: #34231c;
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(255, 223, 145, 0.52),
      transparent 34%
    ),
    linear-gradient(145deg, rgba(255, 250, 239, 0.9), rgba(252, 224, 205, 0.82));
  box-shadow:
    0 24px 46px rgba(89, 44, 54, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.travel-sunset-complete-card span {
  width: fit-content;
  padding: 6px 11px;
  border-radius: 999px;
  color: #9a4d37;
  background: rgba(255, 228, 169, 0.8);
  font-size: 0.82rem;
  font-weight: 950;
}

.travel-sunset-complete-card h3,
.travel-sunset-complete-card p {
  margin: 0;
  word-break: keep-all;
}

.travel-sunset-complete-card h3 {
  font-size: clamp(1.28rem, 4.6vw, 1.8rem);
}

.travel-sunset-complete-card p {
  color: rgba(65, 44, 35, 0.82);
  font-weight: 850;
  line-height: 1.45;
}

.travel-sunset-complete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.travel-sunset-complete-actions .primary-action,
.travel-sunset-complete-actions .soft-action {
  flex: 1 1 180px;
  min-height: 44px;
  border-radius: 999px;
}

.travel-intro-progress {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 6vh, 58px);
  z-index: 4;
  width: min(220px, 42vw);
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 8px 18px rgba(25, 52, 61, 0.18);
  transform: translateX(-50%);
}

.travel-intro-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 246, 196, 0.95),
    rgba(150, 224, 255, 0.95)
  );
  animation: travelIntroFill var(--travel-intro-duration, 300s) linear forwards;
  transform-origin: left center;
}

.travel-scene-fallback-stage {
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 38px);
}

.travel-scene-fallback-card {
  display: grid;
  gap: 10px;
  width: min(520px, 100%);
  padding: clamp(18px, 5vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 26px;
  color: #2f241c;
  background:
    radial-gradient(
      circle at 16% 10%,
      rgba(255, 238, 180, 0.74),
      transparent 34%
    ),
    linear-gradient(145deg, rgba(255, 252, 243, 0.94), rgba(239, 230, 211, 0.9));
  box-shadow:
    0 22px 42px rgba(73, 55, 37, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.72);
}

.travel-scene-fallback-card span {
  color: #23718c;
  font-size: 0.82rem;
  font-weight: 950;
}

.travel-scene-fallback-card h3,
.travel-scene-fallback-card p {
  margin: 0;
  word-break: keep-all;
}

.travel-actions {
  min-height: 62px;
  padding: 8px 12px 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 242, 0.54),
    rgba(255, 244, 228, 0.9)
  );
}

body.travel-healing-mode .travel-scene-page .travel-actions {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  right: auto;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  width: auto;
  max-width: calc(100vw - 20px);
  min-height: 0;
  gap: 8px;
  padding: 0;
  background: transparent;
  pointer-events: auto;
}

@keyframes travelSlowZoom {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.1) translate3d(-1.5%, -1%, 0);
  }
}

@keyframes travelSlowPan {
  from {
    transform: scale(1.06) translate3d(-2%, 0, 0);
  }

  to {
    transform: scale(1.1) translate3d(2%, -1%, 0);
  }
}

@keyframes travelSeaHorizon {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }

  50% {
    transform: scale(1.035) translate3d(0, -4px, 0);
  }

  100% {
    transform: scale(1) translate3d(0, 4px, 0);
  }
}

@keyframes clearSeaPanTest {
  0% {
    background-position: 0% 70%;
    transform: scale(1.05) translate3d(0, 0, 0);
  }

  50% {
    background-position: 100% 70%;
    transform: scale(1.14) translate3d(-2.2%, -2px, 0);
  }

  100% {
    background-position: 0% 70%;
    transform: scale(1.05) translate3d(0, 0, 0);
  }
}

@keyframes clearSeaCloudTest {
  0% {
    transform: translate3d(-8%, 1%, 0) scale(1.02);
    opacity: 0.48;
  }

  50% {
    transform: translate3d(8%, -1%, 0) scale(1.1);
    opacity: 0.78;
  }

  100% {
    transform: translate3d(-8%, 1%, 0) scale(1.02);
    opacity: 0.48;
  }
}

@keyframes clearSeaWaveTest {
  0% {
    transform: translate3d(-8%, 2%, 0) scaleX(1.04) scaleY(1);
    opacity: 0.66;
  }

  50% {
    transform: translate3d(8%, -2.5%, 0) scaleX(1.16) scaleY(1.08);
    opacity: 0.94;
  }

  100% {
    transform: translate3d(-8%, 2%, 0) scaleX(1.04) scaleY(1);
    opacity: 0.66;
  }
}

@keyframes clearSeaScenePanorama {
  0% {
    background-position: 12% 67%;
    background-size: auto 124%;
    transform: scale(1.012) translate3d(0, 0, 0);
  }

  8% {
    background-position: 16% 67%;
    background-size: auto 125%;
    transform: scale(1.016) translate3d(0, -1px, 0);
  }

  13.333% {
    background-position: 24% 68%;
    background-size: auto 126%;
    transform: scale(1.02) translate3d(-0.1%, -1px, 0);
  }

  26.666% {
    background-position: 78% 68%;
    background-size: auto 130%;
    transform: scale(1.032) translate3d(-0.34%, -8px, 0);
  }

  40% {
    background-position: 54% 82%;
    background-size: auto 152%;
    transform: scale(1.055) translate3d(-0.22%, 1.4%, 0);
  }

  53.333% {
    background-position: 0% 70%;
    background-size: auto 132%;
    transform: scale(1.024) translate3d(0.24%, 4px, 0);
  }

  66.666% {
    background-position: 44% 58%;
    background-size: auto 136%;
    transform: scale(1.038) translate3d(0, -18px, 0);
  }

  80% {
    background-position: 64% 56%;
    background-size: auto 142%;
    transform: scale(1.05) translate3d(-0.12%, -22px, 0);
  }

  91.111% {
    background-position: 90% 67%;
    background-size: auto 132%;
    transform: scale(1.034) translate3d(-0.36%, -2px, 0);
  }

  100% {
    background-position: 12% 67%;
    background-size: auto 124%;
    transform: scale(1.012) translate3d(0, 0, 0);
  }
}

@keyframes clearSeaSceneClouds {
  0% {
    transform: translate3d(-5.5%, 0.8%, 0) scale(1.03);
    opacity: 0.54;
    filter: blur(12px) saturate(0.94) contrast(0.96);
  }

  18% {
    transform: translate3d(-1%, 0.1%, 0) scale(1.06);
    opacity: 0.64;
    filter: blur(10px) saturate(1) contrast(1);
  }

  42% {
    transform: translate3d(4.8%, -0.6%, 0) scale(1.08);
    opacity: 0.7;
    filter: blur(8px) saturate(1.03) contrast(1.06);
  }

  68% {
    transform: translate3d(8.2%, -1.7%, 0) scale(1.15);
    opacity: 0.76;
    filter: blur(5.5px) saturate(1.08) contrast(1.12);
  }

  86% {
    transform: translate3d(1.8%, -0.6%, 0) scale(1.08);
    opacity: 0.62;
    filter: blur(9px) saturate(1.01) contrast(1.03);
  }

  100% {
    transform: translate3d(-5.5%, 0.8%, 0) scale(1.03);
    opacity: 0.54;
    filter: blur(12px) saturate(0.94) contrast(0.96);
  }
}

@keyframes clearSeaSceneWaves {
  0% {
    transform: translate3d(-3.8%, 1.2%, 0) scaleX(1.04) scaleY(1);
    opacity: 0.74;
  }

  45% {
    transform: translate3d(4.4%, -1.4%, 0) scaleX(1.1) scaleY(1.045);
    opacity: 0.92;
  }

  100% {
    transform: translate3d(-3.8%, 1.2%, 0) scaleX(1.04) scaleY(1);
    opacity: 0.74;
  }
}

@keyframes clearSeaSceneLight {
  0% {
    opacity: 0.22;
    transform: translate3d(-2.5%, 1%, 0) scale(1);
  }

  18% {
    opacity: 0.38;
    transform: translate3d(-0.8%, 0, 0) scale(1.02);
  }

  34% {
    opacity: 0.62;
    transform: translate3d(1.2%, -0.7%, 0) scale(1.05);
  }

  50% {
    opacity: 0.28;
    transform: translate3d(2.1%, 0.2%, 0) scale(1.01);
  }

  70% {
    opacity: 0.68;
    transform: translate3d(0.8%, -0.9%, 0) scale(1.06);
  }

  84% {
    opacity: 0.42;
    transform: translate3d(2.8%, -0.2%, 0) scale(1.03);
  }

  100% {
    opacity: 0.24;
    transform: translate3d(-2.5%, 1%, 0) scale(1);
  }
}

@keyframes travelSunsetPanorama {
  0% {
    background-position: 48% 62%;
    background-size: auto 130%;
    transform: scale(1.018) translate3d(0, 0, 0);
  }

  16% {
    background-position: 62% 60%;
    background-size: auto 142%;
    transform: scale(1.05) translate3d(-0.6%, -10px, 0);
  }

  32% {
    background-position: 69% 58%;
    background-size: auto 150%;
    transform: scale(1.074) translate3d(-1%, -18px, 0);
  }

  48% {
    background-position: 51% 68%;
    background-size: auto 158%;
    transform: scale(1.09) translate3d(0.18%, 10px, 0);
  }

  66% {
    background-position: 34% 62%;
    background-size: auto 144%;
    transform: scale(1.058) translate3d(0.8%, -8px, 0);
  }

  84% {
    background-position: 58% 56%;
    background-size: auto 148%;
    transform: scale(1.068) translate3d(-0.34%, -20px, 0);
  }

  100% {
    background-position: 48% 62%;
    background-size: auto 130%;
    transform: scale(1.018) translate3d(0, 0, 0);
  }
}

@keyframes travelSunsetColorCycle {
  0% {
    filter: saturate(1.18) contrast(1.03) brightness(1.01) hue-rotate(-46deg);
  }

  18% {
    filter: saturate(1.36) contrast(1.07) brightness(1.03) hue-rotate(-62deg);
  }

  34% {
    filter: saturate(1.46) contrast(1.08) brightness(1.06) hue-rotate(-24deg);
  }

  50% {
    filter: saturate(1.52) contrast(1.08) brightness(1.08) hue-rotate(10deg);
  }

  68% {
    filter: saturate(1.32) contrast(1.05) brightness(1.05) hue-rotate(34deg);
  }

  84% {
    filter: saturate(1.42) contrast(1.07) brightness(1.06) hue-rotate(-36deg);
  }

  100% {
    filter: saturate(1.18) contrast(1.03) brightness(1.01) hue-rotate(-46deg);
  }
}

@keyframes travelSunsetColorWash {
  0% {
    opacity: 0.46;
    filter: hue-rotate(222deg) saturate(1.22) brightness(1.02);
    transform: translate3d(-1%, 0, 0) scale(1);
  }

  18% {
    opacity: 0.58;
    filter: hue-rotate(264deg) saturate(1.36) brightness(1.04);
    transform: translate3d(0.8%, -0.6%, 0) scale(1.04);
  }

  34% {
    opacity: 0.66;
    filter: hue-rotate(310deg) saturate(1.48) brightness(1.06);
    transform: translate3d(1.6%, -1%, 0) scale(1.06);
  }

  50% {
    opacity: 0.68;
    filter: hue-rotate(344deg) saturate(1.42) brightness(1.08);
    transform: translate3d(0.5%, 0.4%, 0) scale(1.03);
  }

  68% {
    opacity: 0.6;
    filter: hue-rotate(22deg) saturate(1.3) brightness(1.06);
    transform: translate3d(-1.4%, 0.8%, 0) scale(1.05);
  }

  84% {
    opacity: 0.64;
    filter: hue-rotate(52deg) saturate(1.18) brightness(1.04);
    transform: translate3d(-0.5%, -0.4%, 0) scale(1.02);
  }

  100% {
    opacity: 0.46;
    filter: hue-rotate(222deg) saturate(1.22) brightness(1.02);
    transform: translate3d(-1%, 0, 0) scale(1);
  }
}

@keyframes travelSunsetWaterGlow {
  0% {
    opacity: 0.38;
    filter: blur(11px) hue-rotate(220deg) saturate(1.14) brightness(1.02);
    transform: translate3d(-3%, 1%, 0) scaleX(1);
  }

  25% {
    opacity: 0.7;
    filter: blur(8px) hue-rotate(300deg) saturate(1.32) brightness(1.06);
    transform: translate3d(2.5%, -1.4%, 0) scaleX(1.08);
  }

  50% {
    opacity: 0.84;
    filter: blur(7px) hue-rotate(350deg) saturate(1.42) brightness(1.09);
    transform: translate3d(4%, -2%, 0) scaleX(1.13);
  }

  75% {
    opacity: 0.62;
    filter: blur(9px) hue-rotate(38deg) saturate(1.22) brightness(1.05);
    transform: translate3d(-1%, 0.4%, 0) scaleX(1.05);
  }

  100% {
    opacity: 0.38;
    filter: blur(11px) hue-rotate(220deg) saturate(1.14) brightness(1.02);
    transform: translate3d(-3%, 1%, 0) scaleX(1);
  }
}

@keyframes travelSunsetClouds {
  0% {
    transform: translate3d(-4%, 1%, 0) scale(1.02);
  }

  28% {
    transform: translate3d(2.8%, -1.2%, 0) scale(1.08);
  }

  52% {
    transform: translate3d(7.4%, -2%, 0) scale(1.13);
  }

  76% {
    transform: translate3d(-0.8%, -0.4%, 0) scale(1.06);
  }

  100% {
    transform: translate3d(-4%, 1%, 0) scale(1.02);
  }
}

@keyframes travelSunsetCloudTone {
  0% {
    opacity: 0.46;
    filter: blur(12px) saturate(0.95) hue-rotate(-12deg);
  }

  32% {
    opacity: 0.72;
    filter: blur(7px) saturate(1.18) hue-rotate(-24deg);
  }

  58% {
    opacity: 0.62;
    filter: blur(9px) saturate(1.1) hue-rotate(10deg);
  }

  78% {
    opacity: 0.76;
    filter: blur(6px) saturate(1.22) hue-rotate(-34deg);
  }

  100% {
    opacity: 0.46;
    filter: blur(12px) saturate(0.95) hue-rotate(-12deg);
  }
}

@keyframes travelSunsetWaveDrift {
  0% {
    transform: translate3d(-2.8%, 1.1%, 0) scaleX(1.02) scaleY(0.98);
    opacity: 0.62;
  }

  35% {
    transform: translate3d(3.8%, -1.6%, 0) scaleX(1.08) scaleY(1.04);
    opacity: 0.82;
  }

  68% {
    transform: translate3d(1.4%, -2.4%, 0) scaleX(1.13) scaleY(1.08);
    opacity: 0.92;
  }

  100% {
    transform: translate3d(-2.8%, 1.1%, 0) scaleX(1.02) scaleY(0.98);
    opacity: 0.62;
  }
}

@keyframes travelSunsetWaveTone {
  0% {
    filter: hue-rotate(-22deg) saturate(1.05) brightness(1);
  }

  28% {
    filter: hue-rotate(-42deg) saturate(1.24) brightness(1.05);
  }

  52% {
    filter: hue-rotate(8deg) saturate(1.16) brightness(1.08);
  }

  74% {
    filter: hue-rotate(24deg) saturate(1.08) brightness(1.03);
  }

  100% {
    filter: hue-rotate(-22deg) saturate(1.05) brightness(1);
  }
}

@keyframes travelSunsetWaveRipple {
  0% {
    transform: translate3d(-4%, 1%, 0) scaleX(1);
  }

  50% {
    transform: translate3d(4%, -1.2%, 0) scaleX(1.08);
  }

  100% {
    transform: translate3d(-4%, 1%, 0) scaleX(1);
  }
}

@keyframes travelSunsetLightShift {
  0% {
    opacity: 0.28;
    filter: hue-rotate(-22deg) saturate(0.96);
    transform: translate3d(-2%, 1%, 0) scale(1);
  }

  22% {
    opacity: 0.58;
    filter: hue-rotate(-38deg) saturate(1.14);
    transform: translate3d(-0.4%, -0.6%, 0) scale(1.04);
  }

  44% {
    opacity: 0.74;
    filter: hue-rotate(-4deg) saturate(1.2);
    transform: translate3d(1.2%, -1.2%, 0) scale(1.08);
  }

  62% {
    opacity: 0.48;
    filter: hue-rotate(18deg) saturate(1.04);
    transform: translate3d(2.4%, 0.2%, 0) scale(1.03);
  }

  82% {
    opacity: 0.7;
    filter: hue-rotate(-32deg) saturate(1.2);
    transform: translate3d(0.8%, -1.4%, 0) scale(1.07);
  }

  100% {
    opacity: 0.28;
    filter: hue-rotate(-22deg) saturate(0.96);
    transform: translate3d(-2%, 1%, 0) scale(1);
  }
}

@keyframes clearSeaSunGlowScene {
  0%,
  10%,
  48%,
  100% {
    opacity: 0.16;
    transform: translate3d(-1%, 0, 0) scale(1);
  }

  22% {
    opacity: 0.44;
    transform: translate3d(0.6%, -0.5%, 0) scale(1.04);
  }

  34% {
    opacity: 0.34;
    transform: translate3d(1.3%, -0.2%, 0) scale(1.02);
  }

  68% {
    opacity: 0.5;
    transform: translate3d(1.8%, -0.8%, 0) scale(1.06);
  }

  78% {
    opacity: 0.36;
    transform: translate3d(2.5%, -0.3%, 0) scale(1.03);
  }
}

@keyframes clearSeaSparkleScene {
  0%,
  12%,
  46%,
  100% {
    opacity: 0.14;
    background-position:
      0 0,
      20px 10px,
      40px 20px,
      60px 30px,
      80px 40px,
      center;
    transform: translate3d(-2%, 1%, 0) scale(1);
  }

  24% {
    opacity: 0.42;
    background-position:
      26px 10px,
      48px 24px,
      66px 18px,
      84px 34px,
      104px 20px,
      center;
    transform: translate3d(1.2%, -0.6%, 0) scale(1.025);
  }

  38% {
    opacity: 0.26;
    background-position:
      44px 18px,
      70px 34px,
      84px 30px,
      108px 46px,
      126px 30px,
      center;
    transform: translate3d(2.2%, 0.2%, 0) scale(1.01);
  }

  70% {
    opacity: 0.52;
    background-position:
      78px 20px,
      104px 42px,
      126px 34px,
      142px 54px,
      166px 36px,
      center;
    transform: translate3d(0.8%, -1%, 0) scale(1.04);
  }

  84% {
    opacity: 0.28;
    background-position:
      104px 30px,
      130px 48px,
      148px 44px,
      166px 62px,
      188px 48px,
      center;
    transform: translate3d(-1%, -0.2%, 0) scale(1.015);
  }
}

@keyframes clearSeaWaveStrength {
  0%,
  16%,
  55%,
  100% {
    filter: blur(0.45px) saturate(1) brightness(1);
  }

  40% {
    filter: blur(0.2px) saturate(1.16) brightness(1.08);
  }

  72% {
    filter: blur(0.25px) saturate(1.12) brightness(1.06);
  }
}

@keyframes clearSeaFoamPulse {
  0%,
  20%,
  58%,
  100% {
    opacity: 0.5;
  }

  40% {
    opacity: 0.82;
  }

  72% {
    opacity: 0.74;
  }
}

@keyframes clearSeaTinyCrabScene {
  0%,
  22%,
  49%,
  100% {
    opacity: 0;
    transform: translate3d(-14px, 4px, 0) scale(0.58);
  }

  30% {
    opacity: 0.78;
    transform: translate3d(-5px, 0, 0) scale(0.72);
  }

  38% {
    opacity: 0.9;
    transform: translate3d(8px, -2px, 0) scale(0.76);
  }

  44% {
    opacity: 0.48;
    transform: translate3d(18px, 1px, 0) scale(0.66);
  }
}

@keyframes travelSeaPremiumPan {
  0% {
    background-position: 4% 68%;
    transform: scale(1.01) translate3d(0, 0, 0);
  }

  16.666% {
    background-position: 8% 68%;
    transform: scale(1.018) translate3d(0, -1px, 0);
  }

  38.888% {
    background-position: 44% 69%;
    transform: scale(1.032) translate3d(-0.25%, -2px, 0);
  }

  61.111% {
    background-position: 82% 70%;
    transform: scale(1.05) translate3d(-0.45%, -3px, 0);
  }

  77.777% {
    background-position: 94% 70%;
    transform: scale(1.065) translate3d(-0.55%, -4px, 0);
  }

  88.888% {
    background-position: 48% 69%;
    transform: scale(1.035) translate3d(-0.25%, -2px, 0);
  }

  100% {
    background-position: 4% 68%;
    transform: scale(1.01) translate3d(0, 0, 0);
  }
}

@keyframes travelPremiumCloudDrift {
  0% {
    transform: translate3d(-7%, 0.8%, 0) scale(1.02);
    opacity: 0.5;
  }

  45% {
    transform: translate3d(1.5%, -0.6%, 0) scale(1.055);
    opacity: 0.72;
  }

  100% {
    transform: translate3d(9%, -1.4%, 0) scale(1.08);
    opacity: 0.58;
  }
}

@keyframes travelPremiumWaveDrift {
  0% {
    transform: translate3d(-6.4%, 2.2%, 0) scaleX(1.06) scaleY(1);
    opacity: 0.66;
  }

  48% {
    transform: translate3d(1.2%, -1.2%, 0) scaleX(1.11) scaleY(1.035);
    opacity: 0.9;
  }

  100% {
    transform: translate3d(7.2%, 1.1%, 0) scaleX(1.05) scaleY(1.012);
    opacity: 0.78;
  }
}

@keyframes travelPremiumLightSweep {
  0% {
    opacity: 0.28;
    transform: translate3d(-2.2%, 0.8%, 0) scale(1);
  }

  52% {
    opacity: 0.58;
    transform: translate3d(1.4%, -0.8%, 0) scale(1.03);
  }

  100% {
    opacity: 0.34;
    transform: translate3d(2.6%, 0, 0) scale(1.01);
  }
}

@keyframes travelCloudPan {
  from {
    transform: translate3d(-3.4%, 0, 0) scale(1.02);
  }

  to {
    transform: translate3d(3.4%, -1.2%, 0) scale(1.06);
  }
}

@keyframes travelWaveDrift {
  from {
    transform: translate3d(-4.6%, 1.2%, 0) scaleX(1.04);
    opacity: 0.5;
  }

  to {
    transform: translate3d(4.6%, -2%, 0) scaleX(1.08);
    opacity: 0.78;
  }
}

@keyframes travelWaveRipple {
  from {
    transform: translate3d(-4%, 0, 0) skewY(-0.35deg);
  }

  to {
    transform: translate3d(4%, -3%, 0) skewY(0.35deg);
  }
}

@keyframes travelLightPulse {
  from {
    opacity: 0.22;
    transform: translate3d(-1%, 0, 0);
  }

  to {
    opacity: 0.48;
    transform: translate3d(1%, -1%, 0);
  }
}

@keyframes travelIntroFill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (max-width: 920px) {
  .deep-course-grid,
  .travel-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .travel-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .deep-garden-gateway {
    padding: 12px;
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  .deep-garden-hero,
  .deep-prescription-card,
  .deep-gateway-note {
    border-radius: 22px;
  }

  .deep-course-grid,
  .travel-category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .deep-course-card,
  .travel-category-card {
    min-height: 0;
  }

  .deep-gateway-note {
    display: grid;
  }

  .deep-gateway-note .primary-action {
    width: 100%;
    flex-basis: auto;
  }

  .travel-start-scene {
    align-content: start;
    padding: 14px;
    padding-top: 58px;
  }

  .travel-category-select-scene {
    padding: 14px;
    padding-top: 58px;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .travel-start-content {
    padding: 18px;
  }

  .travel-category-row {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .travel-select-page {
    padding: 12px;
  }

  .travel-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .travel-scene-card {
    min-height: 214px;
  }

  .travel-select-symbol-button {
    width: 32px;
    height: 32px;
  }

  .travel-select-symbol-button img {
    width: 23px;
    max-height: 23px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] {
    gap: 7px;
    padding: 9px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-select-symbol-footer {
    margin-top: 10px;
    padding: 20px 0 12px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-select-top p {
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-select-top h3 {
    font-size: clamp(1.22rem, 5vw, 1.36rem);
    line-height: 1.15;
    letter-spacing: -0.014em;
  }

  .travel-select-page[aria-label='숲 풍경 선택']
    .travel-select-top
    > div
    > p:first-of-type {
    margin-top: 5px;
    font-size: clamp(0.82rem, 3.3vw, 0.89rem);
    font-weight: 650;
    line-height: 1.26;
    letter-spacing: -0.01em;
  }

  .travel-select-page[aria-label='숲 풍경 선택']
    .travel-select-top
    > div
    > p:last-of-type {
    margin-top: 7px;
    font-size: clamp(0.78rem, 3.1vw, 0.85rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.006em;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-card {
    min-height: 212px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-thumb {
    min-height: 120px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta {
    gap: 4px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta strong {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta small {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: -0.008em;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta em {
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.006em;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-premium-badge {
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
  }

  .travel-premium-offer-page {
    align-items: start;
    padding: 12px;
    padding-top: 18px;
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
  }

  .travel-premium-offer-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: 24px;
  }

  .travel-premium-offer-art {
    min-height: 230px;
    border-radius: 20px;
  }

  .travel-premium-offer-copy {
    gap: 11px;
  }

  .travel-premium-offer-actions {
    display: grid;
  }

  .travel-premium-offer-actions .primary-action,
  .travel-premium-offer-actions .soft-action {
    width: 100%;
  }

  .travel-scene-thumb {
    min-height: 118px;
  }

  .travel-scene-header {
    grid-template-columns: minmax(0, 1fr);
    flex-wrap: wrap;
    right: max(10px, env(safe-area-inset-right));
    left: max(10px, env(safe-area-inset-left));
  }

  .travel-scene-header .tts-button {
    min-height: 44px;
    padding: 8px 12px;
  }

  .travel-scene-controls {
    justify-content: flex-start;
    max-width: calc(100vw - 20px);
  }

  body.travel-healing-mode .travel-scene-page {
    min-height: calc(100dvh - 64px);
  }

  body.travel-healing-mode .travel-scene-page .travel-actions {
    right: max(10px, env(safe-area-inset-right));
  }

  .travel-dialogue-layer {
    top: 96px;
    left: 10px;
    right: 10px;
  }

  .travel-bubble {
    max-width: 94%;
  }

  .travel-friends {
    left: 2%;
    right: 2%;
    bottom: clamp(248px, 38vh, 310px);
  }

  .travel-friends .comic-avatar {
    width: 102px;
    height: 122px;
  }

  .travel-friends .comic-friend-sun .comic-avatar {
    width: 116px;
    height: 148px;
  }

  .travel-interpretation-card {
    bottom: 10px;
    width: calc(100% - 22px);
    gap: 6px;
    padding: 12px;
  }

  .travel-interpretation-card p,
  .travel-interpretation-card small {
    font-size: 0.8rem;
    line-height: 1.32;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .top-icon-button {
    width: 58px;
    height: 58px;
  }

  .top-icon-symbol {
    width: 52px;
    max-height: 52px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] {
    gap: 8px;
    padding: 8px;
    overflow-x: hidden;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-select-top h3 {
    font-size: clamp(1.4rem, 3vw, 1.65rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.014em;
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-select-top p {
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택']
    .travel-select-top
    > div
    > p:first-of-type {
    margin-top: 5px;
    font-size: clamp(0.78rem, 1.7vw, 0.86rem);
    font-weight: 650;
    line-height: 1.26;
    letter-spacing: -0.01em;
  }

  .travel-select-page[aria-label='숲 풍경 선택']
    .travel-select-top
    > div
    > p:last-of-type {
    margin-top: 6px;
    font-size: clamp(0.72rem, 1.55vw, 0.79rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.006em;
  }

  .travel-select-scroll-shell {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 10px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-card-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0 0 3px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-card {
    min-height: 176px;
    padding: 10px;
    gap: 7px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-thumb {
    min-height: 88px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta {
    gap: 3px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta strong {
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.015em;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta small {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.008em;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta em {
    font-size: 0.77rem;
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -0.006em;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-play-icon {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-premium-badge {
    top: 10px;
    right: 10px;
    font-size: 0.65rem;
    padding: 4px 7px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-select-symbol-footer {
    margin-top: 8px;
    padding: 22px 0 10px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-select-symbol-button {
    width: 30px;
    height: 30px;
  }

  .travel-select-page[aria-label='숲 풍경 선택']
    .travel-select-symbol-button
    img {
    width: 22px;
    max-height: 22px;
  }
}

body.report-comic-mode .forest-comic-result {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}

body.report-comic-mode .forest-comic-top {
  min-height: 58px;
  padding: 8px 16px 0;
}

body.report-comic-mode .forest-comic-stage {
  min-height: 0 !important;
  height: 100%;
  border-radius: 0;
}

body.report-comic-mode .forest-comic-actions {
  min-height: 62px;
  padding: 8px 12px 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 242, 0.42),
    rgba(255, 244, 228, 0.88)
  );
}

body.report-comic-mode .forest-comic-actions .soft-action,
body.report-comic-mode .forest-comic-actions .primary-action {
  min-height: 44px;
}

body.report-comic-mode .forest-bubble-stack {
  top: clamp(12px, 2.2vh, 24px);
  display: grid;
  gap: 0;
}

body.report-comic-mode .forest-comic-friends {
  bottom: clamp(38px, 8vh, 76px);
}

body.report-comic-mode .forest-comic-result .forest-bubble {
  grid-area: 1 / 1;
  max-width: min(74%, 500px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 220ms ease,
    transform 260ms ease,
    visibility 0s linear 260ms,
    filter 180ms ease,
    box-shadow 180ms ease;
}

body.report-comic-mode .forest-comic-result .forest-bubble.is-narrating {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 220ms ease,
    transform 260ms ease,
    visibility 0s;
}

body.report-comic-mode .forest-comic-result .forest-bubble strong {
  display: none;
}

body.report-comic-mode .forest-comic-result .forest-bubble-sun {
  justify-self: start;
  background: linear-gradient(
    145deg,
    rgba(249, 255, 199, 0.94),
    rgba(185, 226, 113, 0.92)
  );
  box-shadow:
    0 16px 26px rgba(59, 91, 40, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.44),
    inset 0 3px 0 rgba(255, 255, 255, 0.54);
}

body.report-comic-mode .forest-comic-result .forest-bubble-moon {
  justify-self: end;
  background: linear-gradient(
    145deg,
    rgba(224, 214, 255, 0.94),
    rgba(170, 148, 211, 0.9)
  );
  color: #21192e;
  box-shadow:
    0 16px 26px rgba(62, 60, 107, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 3px 0 rgba(255, 255, 255, 0.52);
}

body.report-comic-mode
  .forest-comic-result
  .forest-comic-friends
  .comic-friend {
  position: relative;
  will-change: transform;
}

body.report-comic-mode
  .forest-comic-result
  .forest-comic-friends
  .comic-friend-sun {
  animation: instantSunFloat 3.4s ease-in-out infinite;
}

body.report-comic-mode
  .forest-comic-result
  .forest-comic-friends
  .comic-friend-moon {
  animation: instantMoonFloat 4.8s ease-in-out infinite;
}

body.report-comic-mode
  .forest-comic-result
  .forest-comic-friends
  .comic-friend.is-speaking
  .comic-avatar {
  animation: instantSpeakerPulse 920ms ease-in-out infinite;
}

body.report-comic-mode
  .forest-comic-result
  .forest-comic-friends
  .comic-friend
  > span {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 10px);
  z-index: 12;
  min-width: max-content;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.96);
  pointer-events: none;
  box-shadow:
    0 10px 18px rgba(54, 65, 42, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

body.report-comic-mode
  .forest-comic-result
  .forest-comic-friends
  .comic-friend-sun
  > span {
  color: #5f3a08;
  background: linear-gradient(
    145deg,
    rgba(255, 239, 151, 0.96),
    rgba(255, 184, 91, 0.94)
  );
}

body.report-comic-mode
  .forest-comic-result
  .forest-comic-friends
  .comic-friend-moon
  > span {
  color: #2a2861;
  background: linear-gradient(
    145deg,
    rgba(232, 236, 255, 0.96),
    rgba(184, 180, 246, 0.94)
  );
}

body.report-comic-mode
  .forest-comic-result
  .forest-comic-friends
  .comic-friend.show-name-tag
  > span {
  animation: instantNameTagPop 1.15s ease both;
}

body.report-comic-mode .forest-comic-stage .forest-leaf {
  opacity: 0.34;
  will-change: transform, opacity;
}

body.report-comic-mode .forest-comic-stage.is-reading::before {
  animation: reportReadingCloudDrift 22s ease-in-out infinite alternate;
}

body.report-comic-mode .forest-comic-stage.is-reading .leaf-one {
  opacity: 0.74;
  animation: reportReadingLeafOne 17s ease-in-out infinite;
}

body.report-comic-mode .forest-comic-stage.is-reading .leaf-two {
  opacity: 0.64;
  animation: reportReadingLeafTwo 20s ease-in-out infinite;
}

body.report-comic-mode .forest-comic-stage.is-reading .leaf-three {
  opacity: 0.56;
  animation: reportReadingLeafThree 24s ease-in-out infinite;
}

@media (max-height: 720px) {
  body.report-comic-mode .forest-comic-top {
    min-height: 46px;
  }

  body.report-comic-mode .forest-comic-top h3 {
    font-size: 1.08rem;
  }

  body.report-comic-mode .forest-bubble {
    padding: 10px 12px;
  }

  body.report-comic-mode .forest-bubble p {
    font-size: 0.86rem;
    line-height: 1.28;
  }

  body.report-comic-mode .forest-comic-friends .comic-avatar {
    width: 104px;
    height: 124px;
  }

  body.report-comic-mode .forest-comic-friends .comic-friend-sun .comic-avatar {
    width: 112px;
    height: 154px;
  }

  body.report-comic-mode .forest-comic-friends .fairy-character {
    scale: 0.78;
  }

  .comic-focus-goodbye .forest-comic-friends {
    bottom: 160px;
  }

  .first-prescription-card {
    gap: 6px;
    padding: 12px;
  }

  .prescription-seed {
    padding: 8px 10px;
  }

  .flower-story-bubbles {
    gap: 6px;
  }

  .first-garden-guide-character {
    right: 4px;
    bottom: 176px;
    width: 78px;
  }

  .flower-story-note,
  .flower-dialogue {
    padding: 8px 10px;
  }

  .flower-story-note p,
  .flower-dialogue p {
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .flower-bed-row {
    bottom: 54px;
  }

  .flower-pot-card {
    min-height: 118px;
    padding-bottom: 8px;
  }

  .flower-sprout {
    width: 54px;
    height: 76px;
    margin-bottom: 22px;
  }

  .flower-stem {
    height: 48px;
  }

  .flower-head {
    width: 38px;
    height: 38px;
  }

  .flower-pot-soil {
    bottom: 38px;
    height: 28px;
  }

  .flower-pot-card strong {
    font-size: 0.78rem;
  }

  .flower-pot-card small {
    font-size: 0.66rem;
  }
}

/* Sunny weather final guard: keep the warm sun visible in both editor preview and report garden canvas. */
.preview-sky.weather-sunny-warm .soft-sun {
  display: block !important;
  opacity: 1 !important;
  top: 28px !important;
  right: 28px !important;
  left: auto !important;
  width: 72px !important;
  height: 72px !important;
  z-index: 8 !important;
  border-radius: 50% !important;
  background: radial-gradient(
    circle at 42% 38%,
    rgba(255, 242, 194, 0.98) 0 18%,
    #ffc987 42%,
    #ffad66 100%
  ) !important;
  box-shadow:
    0 0 36px rgba(255, 188, 92, 0.72),
    0 0 86px rgba(255, 222, 149, 0.52) !important;
  transform: none !important;
}

.preview-sky:not(.weather-sunny-warm) .soft-sun {
  opacity: 0 !important;
}

.flow-garden-canvas.garden-weather-surface.weather-sunny-warm,
.read-only-garden-inner.garden-weather-surface.weather-sunny-warm {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 224, 154, 0.98) 0 38px,
      rgba(255, 185, 111, 0.72) 39px 72px,
      transparent 74px
    ),
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 221, 141, 0.34) 0 106px,
      transparent 110px
    ),
    linear-gradient(180deg, #bfefff 0%, #ddf6ff 60%, #aee7b5 61%, #6ccf91 100%) !important;
}

.flow-garden-canvas.garden-weather-surface.weather-sunny-warm::after,
.read-only-garden-inner.garden-weather-surface.weather-sunny-warm::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 32% 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: radial-gradient(
    circle at 18% 18%,
    rgba(255, 238, 181, 0.96) 0 34px,
    rgba(255, 184, 104, 0.74) 35px 58px,
    transparent 60px
  ) !important;
  filter: drop-shadow(0 0 30px rgba(255, 186, 92, 0.58)) !important;
  opacity: 1 !important;
}

/* User-provided watercolor landscape: shared base for all weather previews. */
:root {
  --weather-landscape-image: url('assets/weather-landscape.png');
}

.preview-sky,
.flow-garden-canvas.garden-weather-surface,
.read-only-garden-inner.garden-weather-surface {
  background-color: #dff4ec !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.1),
      rgba(255, 248, 232, 0.14)
    ),
    var(--weather-landscape-image) !important;
  background-position:
    center center,
    center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
}

.preview-sky > .main-background,
.flow-garden-canvas.garden-weather-surface > .main-background,
.read-only-garden-inner.garden-weather-surface > .main-background {
  opacity: 0 !important;
  background: transparent !important;
}

.preview-sky > .main-background::before,
.preview-sky > .main-background::after,
.flow-garden-canvas.garden-weather-surface > .main-background::before,
.flow-garden-canvas.garden-weather-surface > .main-background::after,
.read-only-garden-inner.garden-weather-surface > .main-background::before,
.read-only-garden-inner.garden-weather-surface > .main-background::after {
  opacity: 0 !important;
  background: transparent !important;
}

.preview-sky .preview-ground {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(109, 191, 126, 0.26)
  ) !important;
  box-shadow: none !important;
}

.preview-sky.weather-sunny-warm,
.flow-garden-canvas.garden-weather-surface.weather-sunny-warm,
.read-only-garden-inner.garden-weather-surface.weather-sunny-warm {
  background-image:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 232, 161, 0.96) 0 36px,
      rgba(255, 194, 115, 0.62) 37px 72px,
      transparent 74px
    ),
    linear-gradient(
      180deg,
      rgba(255, 248, 219, 0.26),
      rgba(255, 255, 255, 0.08) 48%,
      rgba(255, 226, 169, 0.18)
    ),
    var(--weather-landscape-image) !important;
  background-position:
    center center,
    center center,
    center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: auto, cover, cover !important;
}

.preview-sky.weather-clear-blue,
.flow-garden-canvas.garden-weather-surface.weather-clear-blue,
.read-only-garden-inner.garden-weather-surface.weather-clear-blue {
  background-image:
    linear-gradient(
      180deg,
      rgba(215, 243, 255, 0.2),
      rgba(255, 255, 255, 0.08) 54%,
      rgba(198, 239, 204, 0.1)
    ),
    var(--weather-landscape-image) !important;
  background-position:
    center center,
    center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
}

.preview-sky.weather-fluffy-cloud,
.flow-garden-canvas.garden-weather-surface.weather-fluffy-cloud,
.read-only-garden-inner.garden-weather-surface.weather-fluffy-cloud {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.06) 56%,
      rgba(226, 243, 224, 0.1)
    ),
    var(--weather-landscape-image) !important;
}

.preview-sky.weather-gray-cloud,
.flow-garden-canvas.garden-weather-surface.weather-gray-cloud,
.read-only-garden-inner.garden-weather-surface.weather-gray-cloud {
  background-image:
    linear-gradient(
      180deg,
      rgba(101, 112, 128, 0.22),
      rgba(240, 244, 243, 0.12) 50%,
      rgba(94, 125, 105, 0.16)
    ),
    var(--weather-landscape-image) !important;
}

.preview-sky.weather-rainy,
.flow-garden-canvas.garden-weather-surface.weather-rainy,
.read-only-garden-inner.garden-weather-surface.weather-rainy {
  background-image:
    linear-gradient(
      180deg,
      rgba(73, 97, 120, 0.36),
      rgba(223, 232, 226, 0.12) 54%,
      rgba(54, 91, 80, 0.22)
    ),
    var(--weather-landscape-image) !important;
}

.preview-sky.weather-storm,
.flow-garden-canvas.garden-weather-surface.weather-storm,
.read-only-garden-inner.garden-weather-surface.weather-storm {
  background-image:
    linear-gradient(
      180deg,
      rgba(32, 42, 66, 0.46),
      rgba(80, 91, 105, 0.24) 54%,
      rgba(34, 64, 58, 0.3)
    ),
    var(--weather-landscape-image) !important;
}

.preview-sky.weather-snowy-blue,
.flow-garden-canvas.garden-weather-surface.weather-snowy-blue,
.read-only-garden-inner.garden-weather-surface.weather-snowy-blue {
  background-image:
    linear-gradient(
      180deg,
      rgba(235, 250, 255, 0.46),
      rgba(255, 255, 255, 0.28) 56%,
      rgba(246, 255, 255, 0.34)
    ),
    var(--weather-landscape-image) !important;
}

.preview-sky.weather-sunny-warm::before,
.preview-sky.weather-clear-blue::before,
.preview-sky.weather-fluffy-cloud::before,
.preview-sky.weather-gray-cloud::before,
.preview-sky.weather-rainy::before,
.preview-sky.weather-storm::before,
.preview-sky.weather-snowy-blue::before {
  content: '' !important;
  opacity: 0 !important;
  background: transparent !important;
}

.preview-sky.weather-sunny-warm::after,
.flow-garden-canvas.garden-weather-surface.weather-sunny-warm::after,
.read-only-garden-inner.garden-weather-surface.weather-sunny-warm::after,
.preview-sky.weather-clear-blue::after,
.flow-garden-canvas.garden-weather-surface.weather-clear-blue::after,
.read-only-garden-inner.garden-weather-surface.weather-clear-blue::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: transparent !important;
  opacity: 1 !important;
}

.preview-sky.weather-fluffy-cloud::after,
.flow-garden-canvas.garden-weather-surface.weather-fluffy-cloud::after,
.read-only-garden-inner.garden-weather-surface.weather-fluffy-cloud::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(
      ellipse at 20% 18%,
      rgba(255, 255, 255, 0.58) 0 9%,
      transparent 18%
    ),
    radial-gradient(
      ellipse at 42% 12%,
      rgba(255, 255, 255, 0.42) 0 8%,
      transparent 17%
    ),
    radial-gradient(
      ellipse at 76% 20%,
      rgba(255, 255, 255, 0.46) 0 10%,
      transparent 20%
    ) !important;
  filter: blur(8px) !important;
  opacity: 0.78 !important;
}

.preview-sky.weather-gray-cloud::after,
.flow-garden-canvas.garden-weather-surface.weather-gray-cloud::after,
.read-only-garden-inner.garden-weather-surface.weather-gray-cloud::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(
      ellipse at 18% 15%,
      rgba(110, 122, 136, 0.34) 0 12%,
      transparent 24%
    ),
    radial-gradient(
      ellipse at 54% 10%,
      rgba(123, 132, 145, 0.28) 0 13%,
      transparent 26%
    ),
    radial-gradient(
      ellipse at 84% 18%,
      rgba(94, 110, 126, 0.32) 0 12%,
      transparent 25%
    ) !important;
  filter: blur(10px) !important;
  opacity: 0.82 !important;
}

.preview-sky.weather-rainy::after,
.flow-garden-canvas.garden-weather-surface.weather-rainy::after,
.read-only-garden-inner.garden-weather-surface.weather-rainy::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.42) 0 1px,
      transparent 1px 13px
    ),
    linear-gradient(180deg, rgba(63, 82, 103, 0.16), rgba(72, 104, 112, 0.12)) !important;
  background-size:
    62px 62px,
    cover !important;
  opacity: 0.82 !important;
}

.preview-sky.weather-storm::after,
.flow-garden-canvas.garden-weather-surface.weather-storm::after,
.read-only-garden-inner.garden-weather-surface.weather-storm::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      126deg,
      transparent 0 41%,
      rgba(255, 249, 173, 0.8) 42% 44%,
      transparent 45% 100%
    ),
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.38) 0 1px,
      transparent 1px 11px
    ),
    linear-gradient(180deg, rgba(20, 28, 52, 0.28), rgba(52, 71, 90, 0.18)) !important;
  background-size:
    180px 220px,
    54px 54px,
    cover !important;
  background-position:
    66% 4%,
    center,
    center !important;
  opacity: 0.88 !important;
}

.preview-sky.weather-snowy-blue::after,
.flow-garden-canvas.garden-weather-surface.weather-snowy-blue::after,
.read-only-garden-inner.garden-weather-surface.weather-snowy-blue::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 2px, transparent 2.8px),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.82) 0 1.5px,
      transparent 2.4px
    ),
    radial-gradient(circle, rgba(229, 247, 255, 0.92) 0 2.2px, transparent 3px) !important;
  background-position:
    24px 18px,
    82px 48px,
    144px 28px !important;
  background-size:
    96px 82px,
    128px 110px,
    164px 136px !important;
  opacity: 0.96 !important;
}

/* Weather landscape cleanup: one full image, one soft weather overlay. */
.preview-sky,
.flow-garden-canvas.garden-weather-surface,
.read-only-garden-inner.garden-weather-surface,
.preview-sky.weather-sunny-warm,
.preview-sky.weather-clear-blue,
.preview-sky.weather-fluffy-cloud,
.preview-sky.weather-gray-cloud,
.preview-sky.weather-rainy,
.preview-sky.weather-storm,
.preview-sky.weather-snowy-blue,
.flow-garden-canvas.garden-weather-surface.weather-sunny-warm,
.flow-garden-canvas.garden-weather-surface.weather-clear-blue,
.flow-garden-canvas.garden-weather-surface.weather-fluffy-cloud,
.flow-garden-canvas.garden-weather-surface.weather-gray-cloud,
.flow-garden-canvas.garden-weather-surface.weather-rainy,
.flow-garden-canvas.garden-weather-surface.weather-storm,
.flow-garden-canvas.garden-weather-surface.weather-snowy-blue,
.read-only-garden-inner.garden-weather-surface.weather-sunny-warm,
.read-only-garden-inner.garden-weather-surface.weather-clear-blue,
.read-only-garden-inner.garden-weather-surface.weather-fluffy-cloud,
.read-only-garden-inner.garden-weather-surface.weather-gray-cloud,
.read-only-garden-inner.garden-weather-surface.weather-rainy,
.read-only-garden-inner.garden-weather-surface.weather-storm,
.read-only-garden-inner.garden-weather-surface.weather-snowy-blue {
  background-color: #e8f5ee !important;
  background-image: var(--weather-landscape-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.preview-sky .soft-sun {
  display: none !important;
  opacity: 0 !important;
}

.preview-sky.weather-sunny-warm::before,
.preview-sky.weather-clear-blue::before,
.preview-sky.weather-fluffy-cloud::before,
.preview-sky.weather-gray-cloud::before,
.preview-sky.weather-rainy::before,
.preview-sky.weather-storm::before,
.preview-sky.weather-snowy-blue::before {
  content: '' !important;
  background: transparent !important;
  opacity: 0 !important;
}

.preview-sky.weather-sunny-warm::after,
.flow-garden-canvas.garden-weather-surface.weather-sunny-warm::after,
.read-only-garden-inner.garden-weather-surface.weather-sunny-warm::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      circle at 17% 17%,
      rgba(255, 241, 185, 0.96) 0 34px,
      rgba(255, 195, 105, 0.66) 35px 64px,
      transparent 66px
    ),
    radial-gradient(
      circle at 17% 17%,
      rgba(255, 225, 138, 0.28) 0 118px,
      transparent 122px
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 221, 0.18),
      rgba(255, 255, 255, 0.02) 54%,
      rgba(255, 235, 174, 0.12)
    ) !important;
  background-repeat: no-repeat !important;
  background-size: auto, auto, cover !important;
  background-position: center center !important;
  filter: none !important;
  opacity: 1 !important;
}

.preview-sky.weather-clear-blue::after,
.flow-garden-canvas.garden-weather-surface.weather-clear-blue::after,
.read-only-garden-inner.garden-weather-surface.weather-clear-blue::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(227, 249, 255, 0.34),
    rgba(255, 255, 255, 0.18) 48%,
    rgba(214, 244, 214, 0.12)
  ) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 1 !important;
}

.preview-sky.weather-fluffy-cloud::after,
.flow-garden-canvas.garden-weather-surface.weather-fluffy-cloud::after,
.read-only-garden-inner.garden-weather-surface.weather-fluffy-cloud::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      ellipse at 22% 16%,
      rgba(255, 255, 255, 0.5) 0 9%,
      transparent 18%
    ),
    radial-gradient(
      ellipse at 48% 12%,
      rgba(255, 255, 255, 0.38) 0 8%,
      transparent 17%
    ),
    radial-gradient(
      ellipse at 78% 18%,
      rgba(255, 255, 255, 0.42) 0 10%,
      transparent 20%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.02)
    ) !important;
  background-repeat: no-repeat !important;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    cover !important;
  filter: blur(7px) !important;
  opacity: 0.75 !important;
}

.preview-sky.weather-gray-cloud::after,
.flow-garden-canvas.garden-weather-surface.weather-gray-cloud::after,
.read-only-garden-inner.garden-weather-surface.weather-gray-cloud::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(
      ellipse at 20% 12%,
      rgba(100, 112, 126, 0.28) 0 13%,
      transparent 25%
    ),
    radial-gradient(
      ellipse at 58% 10%,
      rgba(119, 130, 142, 0.24) 0 14%,
      transparent 27%
    ),
    radial-gradient(
      ellipse at 86% 17%,
      rgba(91, 106, 121, 0.26) 0 13%,
      transparent 26%
    ),
    linear-gradient(
      180deg,
      rgba(83, 95, 110, 0.18),
      rgba(255, 255, 255, 0.02) 50%,
      rgba(86, 108, 96, 0.12)
    ) !important;
  background-repeat: no-repeat !important;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    cover !important;
  filter: blur(8px) !important;
  opacity: 0.8 !important;
}

.preview-sky.weather-rainy::after,
.flow-garden-canvas.garden-weather-surface.weather-rainy::after,
.read-only-garden-inner.garden-weather-surface.weather-rainy::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.38) 0 1px,
      transparent 1px 16px
    ),
    linear-gradient(
      180deg,
      rgba(57, 79, 101, 0.22),
      rgba(255, 255, 255, 0.02) 48%,
      rgba(47, 88, 79, 0.14)
    ) !important;
  background-repeat: repeat, no-repeat !important;
  background-size:
    74px 74px,
    cover !important;
  background-position: center center !important;
  opacity: 0.82 !important;
}

.preview-sky.weather-storm::after,
.flow-garden-canvas.garden-weather-surface.weather-storm::after,
.read-only-garden-inner.garden-weather-surface.weather-storm::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      126deg,
      transparent 0 44%,
      rgba(255, 247, 161, 0.76) 45% 47%,
      transparent 48% 100%
    ),
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.34) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(
      180deg,
      rgba(24, 32, 54, 0.32),
      rgba(85, 93, 107, 0.1) 48%,
      rgba(32, 62, 57, 0.18)
    ) !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-size:
    220px 260px,
    70px 70px,
    cover !important;
  background-position:
    66% 4%,
    center center,
    center center !important;
  opacity: 0.9 !important;
}

.preview-sky.weather-snowy-blue::after,
.flow-garden-canvas.garden-weather-surface.weather-snowy-blue::after,
.read-only-garden-inner.garden-weather-surface.weather-snowy-blue::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 2px, transparent 2.7px),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.76) 0 1.4px,
      transparent 2.2px
    ),
    linear-gradient(
      180deg,
      rgba(238, 251, 255, 0.36),
      rgba(255, 255, 255, 0.16) 58%,
      rgba(250, 255, 255, 0.2)
    ) !important;
  background-repeat: repeat, repeat, no-repeat !important;
  background-size:
    108px 92px,
    154px 128px,
    cover !important;
  background-position:
    24px 18px,
    86px 50px,
    center center !important;
  opacity: 0.95 !important;
}

/* Final sun dedupe: the sunny weather uses only the weather overlay sun. */
.preview-sky.weather-sunny-warm .soft-sun,
.preview-sky.report-arrange-sky.weather-sunny-warm .soft-sun {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Sun/Moon fairy comic pages use the illustrated forest waterfall background. */
:root {
  --fairy-forest-background: url('assets/fairy-forest-background.png');
}

.forest-comic-stage,
body[data-theme='dark'] .forest-comic-stage,
body.report-comic-mode .forest-comic-stage {
  background-color: #cfe8d5 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 252, 232, 0.16),
      rgba(255, 255, 255, 0.03) 42%,
      rgba(45, 87, 61, 0.12)
    ),
    var(--fairy-forest-background) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    0 20px 34px rgba(39, 76, 55, 0.16),
    inset 0 18px 34px rgba(255, 255, 255, 0.18),
    inset 0 -24px 34px rgba(38, 77, 48, 0.14) !important;
}

.forest-comic-stage::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    radial-gradient(
      ellipse at 22% 8%,
      rgba(255, 247, 197, 0.22),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 72% 30%,
      rgba(208, 245, 255, 0.16),
      transparent 36%
    ),
    linear-gradient(
      90deg,
      rgba(22, 52, 33, 0.1),
      transparent 24% 76%,
      rgba(21, 50, 40, 0.08)
    ) !important;
  filter: none !important;
}

.forest-comic-stage::after {
  content: '' !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 1 !important;
  height: 34% !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  opacity: 0.36 !important;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(53, 98, 56, 0.28)
  ) !important;
  box-shadow: none !important;
}

/* Report page 3: keep the analysis bubbles away from Hatsal-i's face. */
.comic-focus-flower .forest-bubble-stack,
body.report-comic-mode .comic-focus-flower .forest-bubble-stack {
  top: clamp(2px, 0.8vh, 8px) !important;
  gap: 8px !important;
}

.comic-focus-flower .forest-bubble {
  padding-block: 11px !important;
}

.comic-focus-flower .forest-bubble p {
  line-height: 1.28 !important;
}

/* Fluffy cloud weather: use the supplied watercolor cloud overlay. */
:root {
  --fluffy-clouds-overlay-image: url('assets/fluffy-clouds-overlay.png');
}

.preview-sky.weather-fluffy-cloud::after,
.flow-garden-canvas.garden-weather-surface.weather-fluffy-cloud::after,
.read-only-garden-inner.garden-weather-surface.weather-fluffy-cloud::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.03) 54%,
      rgba(210, 238, 221, 0.12)
    ),
    var(--fluffy-clouds-overlay-image) !important;
  background-position:
    center center,
    center top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size:
    cover,
    118% auto !important;
  filter: saturate(1.08) contrast(1.03) !important;
  mix-blend-mode: multiply !important;
  opacity: 0.96 !important;
}

.weather-sample.weather-fluffy-cloud {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.18),
      rgba(218, 246, 255, 0.18)
    ),
    var(--weather-landscape-image) !important;
  background-position:
    center center,
    center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
}

.weather-sample.weather-fluffy-cloud::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--fluffy-clouds-overlay-image) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 145% auto !important;
  mix-blend-mode: multiply !important;
  opacity: 0.94 !important;
}

/* Last report page: make the prescription card compact so it does not cover the fairies. */
body.report-comic-mode .comic-focus-goodbye .forest-comic-friends {
  bottom: clamp(120px, 18vh, 168px) !important;
  z-index: 16 !important;
}

body.report-comic-mode .comic-focus-goodbye .first-prescription-card {
  left: 50% !important;
  right: auto !important;
  bottom: clamp(4px, 1vh, 10px) !important;
  width: min(61%, 296px) !important;
  transform: translateX(-50%) !important;
  z-index: 9 !important;
  gap: 3px !important;
  padding: 8px 10px !important;
  border-radius: 17px !important;
}

body.report-comic-mode .comic-focus-goodbye .prescription-badge {
  padding: 3px 7px !important;
  font-size: 0.64rem !important;
}

body.report-comic-mode .comic-focus-goodbye .first-prescription-card h4 {
  font-size: clamp(0.82rem, 2.65vw, 0.96rem) !important;
  line-height: 1.12 !important;
}

body.report-comic-mode .comic-focus-goodbye .first-prescription-card p {
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 0 !important;
  font-size: clamp(0.64rem, 2vw, 0.75rem) !important;
  line-height: 1.24 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.report-comic-mode .comic-focus-goodbye .prescription-seed {
  gap: 2px !important;
  padding: 5px 7px !important;
  border-radius: 13px !important;
}

body.report-comic-mode .comic-focus-goodbye .prescription-seed span {
  font-size: 0.72rem !important;
}

body.report-comic-mode .comic-focus-goodbye .prescription-seed strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body.report-comic-mode .comic-focus-goodbye .open-first-garden-button {
  min-height: 29px !important;
  padding: 4px 9px !important;
  font-size: 0.72rem !important;
}

/* Travel mode sits inside the report shell, so keep its storybook layout from inheriting report page friend positioning. */
body.report-comic-mode .travel-scene-stage .travel-friends {
  bottom: clamp(176px, 26vh, 234px) !important;
  z-index: 11 !important;
}

body.report-comic-mode .travel-scene-stage .travel-friends .comic-avatar {
  width: 158px !important;
  height: 174px !important;
}

body.report-comic-mode
  .travel-scene-stage
  .travel-friends
  .comic-friend-sun
  .comic-avatar {
  width: clamp(134px, 29vw, 182px) !important;
  height: clamp(176px, 32vh, 232px) !important;
}

body.report-comic-mode .travel-scene-stage .travel-bubble p {
  font-size: clamp(0.9rem, 2.7vw, 1.08rem) !important;
  line-height: 1.34 !important;
}

@media (max-width: 719px) {
  body.report-comic-mode .travel-scene-stage .travel-friends {
    left: 2% !important;
    right: 2% !important;
    bottom: clamp(248px, 38vh, 310px) !important;
  }

  body.report-comic-mode .travel-scene-stage .travel-friends .comic-avatar {
    width: 102px !important;
    height: 122px !important;
  }

  body.report-comic-mode
    .travel-scene-stage
    .travel-friends
    .comic-friend-sun
    .comic-avatar {
    width: 116px !important;
    height: 148px !important;
  }
}

/* Last report page: read like a calm storybook ending, with the prescription as the main CTA. */
body.report-comic-mode .comic-focus-goodbye .forest-bubble-stack {
  top: clamp(10px, 2vh, 22px) !important;
  left: clamp(12px, 4vw, 34px) !important;
  right: clamp(12px, 4vw, 34px) !important;
  gap: 10px !important;
}

body.report-comic-mode .comic-focus-goodbye .forest-bubble {
  max-width: min(76%, 440px) !important;
  padding: 12px 15px !important;
}

body.report-comic-mode .comic-focus-goodbye .forest-bubble p {
  display: block !important;
  overflow: visible !important;
  font-size: clamp(0.86rem, 2.5vw, 1.02rem) !important;
  line-height: 1.34 !important;
  -webkit-line-clamp: unset !important;
}

body.report-comic-mode .comic-focus-goodbye .forest-comic-friends {
  bottom: clamp(208px, 31vh, 276px) !important;
  z-index: 12 !important;
}

body.report-comic-mode .comic-focus-goodbye .first-prescription-card {
  left: 50% !important;
  right: auto !important;
  bottom: clamp(12px, 2.4vh, 24px) !important;
  width: min(86%, 560px) !important;
  transform: translateX(-50%) !important;
  z-index: 16 !important;
  gap: 8px !important;
  padding: clamp(14px, 3vw, 18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 244, 189, 0.82),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255, 252, 239, 0.92),
      rgba(232, 247, 211, 0.88)
    ) !important;
  box-shadow:
    0 22px 42px rgba(58, 78, 44, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(10px);
}

body.report-comic-mode .comic-focus-goodbye .prescription-badge {
  padding: 5px 10px !important;
  font-size: 0.76rem !important;
}

body.report-comic-mode .comic-focus-goodbye .first-prescription-card h4 {
  font-size: clamp(1.04rem, 3.5vw, 1.38rem) !important;
  line-height: 1.12 !important;
}

body.report-comic-mode .comic-focus-goodbye .first-prescription-card p,
body.report-comic-mode .comic-focus-goodbye .prescription-note {
  display: block !important;
  overflow: visible !important;
  font-size: clamp(0.78rem, 2.35vw, 0.94rem) !important;
  line-height: 1.36 !important;
  -webkit-line-clamp: unset !important;
}

body.report-comic-mode .comic-focus-goodbye .prescription-note {
  padding: 8px 10px !important;
  border-radius: 16px !important;
}

body.report-comic-mode .comic-focus-goodbye .prescription-seed {
  gap: 3px !important;
  padding: 9px 11px !important;
  border-radius: 16px !important;
}

body.report-comic-mode .comic-focus-goodbye .prescription-seed span {
  font-size: 0.78rem !important;
}

body.report-comic-mode .comic-focus-goodbye .prescription-seed strong {
  display: block !important;
  overflow: visible !important;
  font-size: clamp(0.8rem, 2.45vw, 0.96rem) !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: unset !important;
}

body.report-comic-mode .comic-focus-goodbye .open-first-garden-button {
  min-height: 42px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  font-size: 0.9rem !important;
}

@media (max-width: 719px) {
  body.report-comic-mode .comic-focus-goodbye .forest-bubble-stack {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    gap: 8px !important;
  }

  body.report-comic-mode .comic-focus-goodbye .forest-bubble {
    max-width: 94% !important;
    padding: 10px 12px !important;
  }

  body.report-comic-mode .comic-focus-goodbye .forest-comic-friends {
    left: 2% !important;
    right: 2% !important;
    bottom: clamp(230px, 36vh, 294px) !important;
  }

  body.report-comic-mode
    .comic-focus-goodbye
    .forest-comic-friends
    .comic-avatar {
    width: 104px;
    height: 122px;
  }

  body.report-comic-mode
    .comic-focus-goodbye
    .forest-comic-friends
    .comic-friend-sun
    .comic-avatar {
    width: 116px;
    height: 150px;
  }

  body.report-comic-mode .comic-focus-goodbye .first-prescription-card {
    bottom: 10px !important;
    width: calc(100% - 22px) !important;
    gap: 6px !important;
    padding: 12px !important;
  }

  body.report-comic-mode .comic-focus-goodbye .first-prescription-card p,
  body.report-comic-mode .comic-focus-goodbye .prescription-note {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
  }
}

/* Weather selector thumbnail: show the supplied fluffy-cloud sky image directly. */
.weather-card .option-visual .weather-sample.weather-fluffy-cloud,
.weather-sample.weather-fluffy-cloud {
  background-color: #dff6ff !important;
  background-image: var(--fluffy-clouds-overlay-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.weather-card .option-visual .weather-sample.weather-fluffy-cloud::before,
.weather-card .option-visual .weather-sample.weather-fluffy-cloud::after,
.weather-sample.weather-fluffy-cloud::before,
.weather-sample.weather-fluffy-cloud::after {
  content: '' !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

.weather-sample.weather-fluffy-cloud .weather-sample-sun {
  display: none !important;
  opacity: 0 !important;
}

/* Fluffy cloud final strength pass: make clouds clearer in cards and large previews. */
.preview-sky.weather-fluffy-cloud::after,
.flow-garden-canvas.garden-weather-surface.weather-fluffy-cloud::after,
.read-only-garden-inner.garden-weather-surface.weather-fluffy-cloud::after {
  content: '' !important;
  position: absolute !important;
  inset: -4% -3% 0 -3% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0) 56%
    ),
    var(--fluffy-clouds-overlay-image) !important;
  background-position:
    center top,
    center top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size:
    cover,
    136% auto !important;
  filter: saturate(1.24) contrast(1.14) brightness(1.04) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

.weather-card .option-visual .weather-sample.weather-fluffy-cloud,
.weather-sample.weather-fluffy-cloud {
  background-image: var(--fluffy-clouds-overlay-image) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 138% auto !important;
  filter: saturate(1.16) contrast(1.08) brightness(1.02) !important;
}

/* Keep fluffy clouds in the sky area of large previews so they do not sit in front of mountains. */
.preview-sky.weather-fluffy-cloud::after,
.flow-garden-canvas.garden-weather-surface.weather-fluffy-cloud::after,
.read-only-garden-inner.garden-weather-surface.weather-fluffy-cloud::after {
  inset: -8% 0 auto 0 !important;
  height: 34% !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)),
    var(--fluffy-clouds-overlay-image) !important;
  background-position:
    center top,
    center -26px !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size:
    cover,
    126% auto !important;
  mask-image: linear-gradient(180deg, #000 0 66%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0 66%,
    transparent 100%
  ) !important;
}

/* Gray-cloud weather: use the supplied cloudy sky artwork directly. */
:root {
  --gray-clouds-background-image: url('assets/gray-clouds-background.png');
}

.preview-sky.weather-gray-cloud,
.flow-garden-canvas.garden-weather-surface.weather-gray-cloud,
.read-only-garden-inner.garden-weather-surface.weather-gray-cloud {
  background-color: #b9cad0 !important;
  background-image: var(--gray-clouds-background-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.preview-sky.weather-gray-cloud::before,
.preview-sky.weather-gray-cloud::after,
.flow-garden-canvas.garden-weather-surface.weather-gray-cloud::after,
.read-only-garden-inner.garden-weather-surface.weather-gray-cloud::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(52, 61, 72, 0.08),
    rgba(255, 255, 255, 0.02) 52%,
    rgba(44, 61, 54, 0.08)
  ) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: none !important;
  opacity: 1 !important;
}

.weather-card .option-visual .weather-sample.weather-gray-cloud,
.weather-sample.weather-gray-cloud {
  background-color: #b9cad0 !important;
  background-image: var(--gray-clouds-background-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: saturate(1.04) contrast(1.05) brightness(1.01) !important;
}

.weather-card .option-visual .weather-sample.weather-gray-cloud::before,
.weather-card .option-visual .weather-sample.weather-gray-cloud::after,
.weather-sample.weather-gray-cloud::before,
.weather-sample.weather-gray-cloud::after {
  content: '' !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

.weather-sample.weather-gray-cloud .weather-sample-sun {
  display: none !important;
  opacity: 0 !important;
}

/* Gray-cloud large preview: keep the garden landscape, then glaze darker clouds on top. */
:root {
  --gray-clouds-overlay-image: url('assets/gray-clouds-overlay.png');
}

.preview-sky.weather-gray-cloud,
.flow-garden-canvas.garden-weather-surface.weather-gray-cloud,
.read-only-garden-inner.garden-weather-surface.weather-gray-cloud {
  background-color: #dfece7 !important;
  background-image: var(--weather-landscape-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.preview-sky.weather-gray-cloud::before {
  content: '' !important;
  opacity: 0 !important;
  background: transparent !important;
}

.preview-sky.weather-gray-cloud::after,
.flow-garden-canvas.garden-weather-surface.weather-gray-cloud::after,
.read-only-garden-inner.garden-weather-surface.weather-gray-cloud::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 46% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(180deg, rgba(78, 83, 91, 0.18), rgba(255, 255, 255, 0) 68%),
    var(--gray-clouds-overlay-image) !important;
  background-position:
    center top,
    center -18px !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size:
    cover,
    132% auto !important;
  filter: contrast(1.12) brightness(0.92) !important;
  mix-blend-mode: multiply !important;
  opacity: 0.92 !important;
  mask-image: linear-gradient(180deg, #000 0 72%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0 72%,
    transparent 100%
  ) !important;
}

/* Rainy weather selector thumbnail only. Large preview keeps its existing rain scene. */
:root {
  --rainy-weather-thumbnail-image: url('assets/rainy-weather-thumbnail.png');
}

.weather-card .option-visual .weather-sample.weather-rainy,
.weather-sample.weather-rainy {
  background-color: #6f7b83 !important;
  background-image: var(--rainy-weather-thumbnail-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: saturate(1.02) contrast(1.08) brightness(0.98) !important;
}

.weather-card .option-visual .weather-sample.weather-rainy::before,
.weather-card .option-visual .weather-sample.weather-rainy::after,
.weather-sample.weather-rainy::before,
.weather-sample.weather-rainy::after {
  content: '' !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

.weather-sample.weather-rainy .weather-sample-sun {
  display: none !important;
  opacity: 0 !important;
}

/* Rainy large preview: keep the landscape and place dark rain clouds above the mountains. */
:root {
  --rainy-clouds-overlay-image: url('assets/rainy-clouds-overlay.png');
}

.preview-sky.weather-rainy,
.flow-garden-canvas.garden-weather-surface.weather-rainy,
.read-only-garden-inner.garden-weather-surface.weather-rainy {
  background-color: #d7e6e1 !important;
  background-image: var(--weather-landscape-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.preview-sky.weather-rainy::before {
  content: '' !important;
  opacity: 0 !important;
  background: transparent !important;
}

.preview-sky.weather-rainy::after,
.flow-garden-canvas.garden-weather-surface.weather-rainy::after,
.read-only-garden-inner.garden-weather-surface.weather-rainy::after {
  content: '' !important;
  position: absolute !important;
  inset: -3% 0 auto 0 !important;
  height: 55% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.36) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      106deg,
      rgba(83, 100, 118, 0.24) 0 1px,
      transparent 1px 18px
    ),
    radial-gradient(
      ellipse at 50% 74%,
      rgba(222, 228, 226, 0.42),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(49, 56, 66, 0.24),
      rgba(213, 220, 220, 0.26) 70%,
      rgba(255, 255, 255, 0)
    ),
    var(--rainy-clouds-overlay-image) !important;
  background-position:
    center center,
    28px 0,
    center bottom,
    center top,
    center -10px !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
  background-size:
    52px 72px,
    82px 94px,
    cover,
    cover,
    132% auto !important;
  filter: contrast(1.1) brightness(0.94) blur(0.15px) !important;
  opacity: 0.98 !important;
  mask-image: linear-gradient(
    180deg,
    #000 0 66%,
    rgba(0, 0, 0, 0.78) 78%,
    transparent 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0 66%,
    rgba(0, 0, 0, 0.78) 78%,
    transparent 100%
  ) !important;
}

/* Storm weather selector thumbnail only. */
:root {
  --storm-weather-thumbnail-image: url('assets/storm-weather-thumbnail.png');
}

.weather-card .option-visual .weather-sample.weather-storm,
.weather-sample.weather-storm {
  background-color: #3f4650 !important;
  background-image: var(--storm-weather-thumbnail-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: saturate(1.05) contrast(1.1) brightness(0.96) !important;
}

.weather-card .option-visual .weather-sample.weather-storm::before,
.weather-card .option-visual .weather-sample.weather-storm::after,
.weather-sample.weather-storm::before,
.weather-sample.weather-storm::after {
  content: '' !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

.weather-sample.weather-storm .weather-sample-sun {
  display: none !important;
  opacity: 0 !important;
}

/* Storm large preview: stronger lightning and heavier rain over the landscape. */
.preview-sky.weather-storm,
.flow-garden-canvas.garden-weather-surface.weather-storm,
.read-only-garden-inner.garden-weather-surface.weather-storm {
  background-color: #cfdde0 !important;
  background-image: var(--weather-landscape-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.preview-sky.weather-storm::before {
  content: '' !important;
  opacity: 0 !important;
  background: transparent !important;
}

.preview-sky.weather-storm::after,
.flow-garden-canvas.garden-weather-surface.weather-storm::after,
.read-only-garden-inner.garden-weather-surface.weather-storm::after {
  content: '' !important;
  position: absolute !important;
  inset: -7% 0 auto 0 !important;
  height: 74% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.46) 0 1px,
      transparent 1px 8px
    ),
    repeating-linear-gradient(
      106deg,
      rgba(58, 68, 84, 0.34) 0 1px,
      transparent 1px 14px
    ),
    radial-gradient(
      ellipse at 49% 18%,
      rgba(225, 221, 255, 0.58),
      transparent 26%
    ),
    radial-gradient(
      ellipse at 42% 39%,
      rgba(255, 255, 255, 0.32),
      transparent 18%
    ),
    linear-gradient(
      180deg,
      rgba(24, 30, 45, 0.32),
      rgba(57, 66, 80, 0.14) 58%,
      rgba(255, 255, 255, 0)
    ),
    var(--storm-weather-thumbnail-image) !important;
  background-position:
    center center,
    24px 0,
    center top,
    44% 36%,
    center top,
    center 0 !important;
  background-repeat:
    repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size:
    44px 72px,
    72px 96px,
    cover,
    cover,
    cover,
    104% auto !important;
  filter: contrast(1.18) brightness(0.92) saturate(1.05) !important;
  opacity: 0.98 !important;
  mask-image: linear-gradient(
    180deg,
    #000 0 74%,
    rgba(0, 0, 0, 0.72) 86%,
    transparent 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0 74%,
    rgba(0, 0, 0, 0.72) 86%,
    transparent 100%
  ) !important;
}

/* Snowy weather selector thumbnail only. */
:root {
  --snowy-weather-thumbnail-image: url('assets/snowy-weather-thumbnail.png');
}

.weather-card .option-visual .weather-sample.weather-snowy-blue,
.weather-sample.weather-snowy-blue {
  background-color: #d8e8ef !important;
  background-image: var(--snowy-weather-thumbnail-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 168% auto !important;
  filter: saturate(1.02) contrast(1.06) brightness(1.02) !important;
}

.weather-card .option-visual .weather-sample.weather-snowy-blue::before,
.weather-card .option-visual .weather-sample.weather-snowy-blue::after,
.weather-sample.weather-snowy-blue::before,
.weather-sample.weather-snowy-blue::after {
  content: '' !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

.weather-sample.weather-snowy-blue .weather-sample-sun {
  display: none !important;
  opacity: 0 !important;
}

.weather-card .option-visual .weather-sample.weather-snowy-blue {
  width: 92% !important;
  height: 92% !important;
  margin: auto !important;
  border-radius: 18px !important;
}

/* Snowy large preview: keep the landscape and add heavy watercolor snowfall. */
:root {
  --snowy-weather-overlay-image: url('assets/snowy-weather-overlay.png');
}

.preview-sky.weather-snowy-blue,
.flow-garden-canvas.garden-weather-surface.weather-snowy-blue,
.read-only-garden-inner.garden-weather-surface.weather-snowy-blue {
  background-color: #e7f2f4 !important;
  background-image: var(--weather-landscape-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.preview-sky.weather-snowy-blue::before {
  content: '' !important;
  opacity: 0 !important;
  background: transparent !important;
}

.preview-sky.weather-snowy-blue::after,
.flow-garden-canvas.garden-weather-surface.weather-snowy-blue::after,
.read-only-garden-inner.garden-weather-surface.weather-snowy-blue::after {
  content: '' !important;
  position: absolute !important;
  inset: -3.25% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.98) 0 2.4px,
      transparent 3.1px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.72) 0 1.5px,
      transparent 2.4px
    ),
    linear-gradient(
      180deg,
      rgba(244, 251, 255, 0.38),
      rgba(255, 255, 255, 0.18) 62%,
      rgba(232, 244, 246, 0.24)
    ),
    var(--snowy-weather-overlay-image) !important;
  background-position:
    20px 12px,
    88px 42px,
    center center,
    center center !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat !important;
  background-size:
    86px 76px,
    132px 108px,
    cover,
    cover !important;
  filter: saturate(0.96) contrast(1.08) brightness(1.04) !important;
  mix-blend-mode: screen !important;
  opacity: 0.96 !important;
}

/* Cherry blossom tree option: use the supplied blossom artwork as the canopy. */
:root {
  --cherry-blossom-tree-image: url('assets/cherry-blossom-tree.png');
}

.leaf-layer.leaf-shape-blossom.leaf-color-cherry,
.leaves-only-model.blossom.cherry .leaf-layer {
  left: 50% !important;
  top: 12px !important;
  width: 310px !important;
  height: 196px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  z-index: 7 !important;
}

.leaf-layer.leaf-shape-blossom.leaf-color-cherry .leaf,
.leaves-only-model.blossom.cherry .leaf-layer .leaf {
  display: none !important;
}

.leaf-layer.leaf-shape-blossom.leaf-color-cherry::before,
.leaves-only-model.blossom.cherry .leaf-layer::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
  border-radius: 48% 52% 45% 47% / 56% 58% 42% 44% !important;
  background-image: var(--cherry-blossom-tree-image) !important;
  background-position: center 18% !important;
  background-repeat: no-repeat !important;
  background-size: 132% auto !important;
  box-shadow:
    0 18px 26px rgba(178, 93, 123, 0.18),
    inset 0 8px 16px rgba(255, 255, 255, 0.16) !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.02) blur(0.25px) !important;
  mask-image:
    radial-gradient(ellipse at 50% 48%, #000 0 55%, transparent 73%),
    radial-gradient(circle at 18% 48%, #000 0 24%, transparent 38%),
    radial-gradient(circle at 83% 46%, #000 0 25%, transparent 40%),
    radial-gradient(circle at 36% 17%, #000 0 25%, transparent 39%),
    radial-gradient(circle at 65% 16%, #000 0 27%, transparent 41%) !important;
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 48%, #000 0 55%, transparent 73%),
    radial-gradient(circle at 18% 48%, #000 0 24%, transparent 38%),
    radial-gradient(circle at 83% 46%, #000 0 25%, transparent 40%),
    radial-gradient(circle at 36% 17%, #000 0 25%, transparent 39%),
    radial-gradient(circle at 65% 16%, #000 0 27%, transparent 41%) !important;
  mask-composite: add !important;
  -webkit-mask-composite: source-over !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
}

.tree-object .leaf-layer.leaf-shape-blossom.leaf-color-cherry {
  top: 18px !important;
  width: 326px !important;
  height: 206px !important;
}

.garden-arrange-visual .leaf-layer.leaf-shape-blossom.leaf-color-cherry {
  top: 18px !important;
  width: 326px !important;
  height: 206px !important;
}

.option-visual .leaves-only-model.blossom.cherry {
  width: 270px !important;
  height: 210px !important;
}

.option-visual .leaves-only-model.blossom.cherry .leaf-layer {
  width: 310px !important;
  height: 196px !important;
  top: 18px !important;
}

.option-visual .leaves-only-model.blossom.cherry .leaf-layer::before {
  background-size: 136% auto !important;
  mix-blend-mode: normal !important;
}

/* Cherry blossom final replacement: keep the new transparent canopy shape intact. */
.leaf-layer.leaf-shape-blossom.leaf-color-cherry,
.leaves-only-model.blossom.cherry .leaf-layer {
  top: 12px !important;
  width: 326px !important;
  height: 196px !important;
  overflow: visible !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.tree-object .leaf-layer.leaf-shape-blossom.leaf-color-cherry,
.garden-arrange-visual .leaf-layer.leaf-shape-blossom.leaf-color-cherry {
  top: 10px !important;
  width: 378px !important;
  height: 227px !important;
}

.option-visual .leaves-only-model.blossom.cherry {
  width: 270px !important;
  height: 210px !important;
}

.option-visual .leaves-only-model.blossom.cherry .leaf-layer {
  top: 18px !important;
  width: 318px !important;
  height: 191px !important;
}

.leaf-layer.leaf-shape-blossom.leaf-color-cherry::before,
.leaves-only-model.blossom.cherry .leaf-layer::before,
.option-visual .leaves-only-model.blossom.cherry .leaf-layer::before {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  border-radius: 0 !important;
  background: var(--cherry-blossom-tree-image) center center / contain no-repeat !important;
  box-shadow: none !important;
  filter: saturate(1.04) contrast(1.02) brightness(1.02) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mask-composite: initial !important;
  -webkit-mask-composite: initial !important;
  mix-blend-mode: normal !important;
}

/* Maple leaf final replacement: use the supplied autumn canopy artwork. */
:root {
  --maple-leaf-canopy-image: url('assets/maple-leaf-canopy.png');
}

.leaf-layer.leaf-shape-maple.leaf-color-autumn,
.leaves-only-model.maple.autumn .leaf-layer {
  left: 50% !important;
  top: 0 !important;
  width: 332px !important;
  height: 256px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 13px 14px rgba(96, 50, 22, 0.14)) !important;
  z-index: 7 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.tree-object .leaf-layer.leaf-shape-maple.leaf-color-autumn,
.garden-arrange-visual .leaf-layer.leaf-shape-maple.leaf-color-autumn {
  top: 0 !important;
  width: 344px !important;
  height: 266px !important;
}

.option-visual .leaves-only-model.maple.autumn {
  width: 270px !important;
  height: 210px !important;
}

.option-visual .leaves-only-model.maple.autumn .leaf-layer {
  top: 50% !important;
  width: 312px !important;
  height: 241px !important;
  transform: translate(-50%, -50%) !important;
}

.leaf-layer.leaf-shape-maple.leaf-color-autumn .leaf,
.leaves-only-model.maple.autumn .leaf-layer .leaf {
  display: none !important;
}

.leaf-layer.leaf-shape-maple.leaf-color-autumn::before,
.leaves-only-model.maple.autumn .leaf-layer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: var(--maple-leaf-canopy-image) center center / contain no-repeat !important;
  box-shadow: none !important;
  filter: saturate(1.04) contrast(1.02) brightness(1.01) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Needle leaf final replacement: use the supplied conifer canopy artwork. */
:root {
  --needle-leaf-canopy-image: url('assets/needle-leaf-canopy.png');
}

.leaf-layer.leaf-shape-needle.leaf-color-pine,
.leaves-only-model.needle.pine .leaf-layer {
  left: 50% !important;
  top: -10px !important;
  width: 318px !important;
  height: 300px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 13px 14px rgba(32, 70, 55, 0.16)) !important;
  z-index: 7 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.tree-object .leaf-layer.leaf-shape-needle.leaf-color-pine,
.garden-arrange-visual .leaf-layer.leaf-shape-needle.leaf-color-pine {
  top: -8px !important;
  width: 310px !important;
  height: 292px !important;
}

.option-visual .leaves-only-model.needle.pine {
  width: 270px !important;
  height: 210px !important;
}

.option-visual .leaves-only-model.needle.pine .leaf-layer {
  top: 50% !important;
  width: 256px !important;
  height: 241px !important;
  transform: translate(-50%, -50%) !important;
}

.leaf-layer.leaf-shape-needle.leaf-color-pine .leaf,
.leaves-only-model.needle.pine .leaf-layer .leaf {
  display: none !important;
}

.leaf-layer.leaf-shape-needle.leaf-color-pine::before,
.leaves-only-model.needle.pine .leaf-layer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: var(--needle-leaf-canopy-image) center center / contain no-repeat !important;
  box-shadow: none !important;
  filter: saturate(1.04) contrast(1.02) brightness(1.01) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Willow leaf final replacement: use the supplied weeping willow canopy artwork. */
:root {
  --willow-leaf-canopy-image: url('assets/willow-leaf-canopy.png');
}

.leaf-layer.leaf-shape-willow.leaf-color-willow,
.leaves-only-model.willow.willow .leaf-layer {
  left: 50% !important;
  top: -20px !important;
  width: 316px !important;
  height: 274px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 13px 14px rgba(39, 83, 42, 0.14)) !important;
  z-index: 7 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.tree-object .leaf-layer.leaf-shape-willow.leaf-color-willow,
.garden-arrange-visual .leaf-layer.leaf-shape-willow.leaf-color-willow {
  top: -24px !important;
  width: 326px !important;
  height: 282px !important;
}

.option-visual .leaves-only-model.willow.willow {
  width: 270px !important;
  height: 210px !important;
}

.option-visual .leaves-only-model.willow.willow .leaf-layer {
  top: 50% !important;
  width: 262px !important;
  height: 227px !important;
  transform: translate(-50%, -50%) !important;
}

.leaf-layer.leaf-shape-willow.leaf-color-willow .leaf,
.leaves-only-model.willow.willow .leaf-layer .leaf {
  display: none !important;
}

.leaf-layer.leaf-shape-willow.leaf-color-willow::before,
.leaves-only-model.willow.willow .leaf-layer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: var(--willow-leaf-canopy-image) center center / contain no-repeat !important;
  box-shadow: none !important;
  filter: saturate(1.02) contrast(1.02) brightness(1.01) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Detailed leaf tree option: use the supplied detailed foliage artwork as the canopy. */
:root {
  --detailed-leaf-tree-image: url('assets/detailed-leaf-tree.png');
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail,
.leaves-only-model.detailed.detail .leaf-layer {
  left: 50% !important;
  top: 6px !important;
  width: 310px !important;
  height: 198px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  z-index: 7 !important;
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail .leaf,
.leaves-only-model.detailed.detail .leaf-layer .leaf {
  display: none !important;
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail::before,
.leaves-only-model.detailed.detail .leaf-layer::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
  border-radius: 48% 52% 43% 45% / 58% 58% 42% 42% !important;
  background-image: var(--detailed-leaf-tree-image) !important;
  background-position: center 31% !important;
  background-repeat: no-repeat !important;
  background-size: 166% auto !important;
  box-shadow:
    0 18px 26px rgba(48, 91, 47, 0.2),
    inset 0 8px 16px rgba(255, 255, 255, 0.14) !important;
  filter: saturate(1.1) contrast(1.08) brightness(0.98) blur(0.18px) !important;
  mask-image:
    radial-gradient(ellipse at 50% 50%, #000 0 58%, transparent 78%),
    radial-gradient(circle at 18% 52%, #000 0 23%, transparent 40%),
    radial-gradient(circle at 82% 50%, #000 0 24%, transparent 41%),
    radial-gradient(circle at 36% 20%, #000 0 25%, transparent 40%),
    radial-gradient(circle at 64% 19%, #000 0 27%, transparent 42%),
    radial-gradient(circle at 31% 78%, #000 0 21%, transparent 37%),
    radial-gradient(circle at 52% 84%, #000 0 24%, transparent 40%),
    radial-gradient(circle at 72% 78%, #000 0 21%, transparent 37%) !important;
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 50%, #000 0 58%, transparent 78%),
    radial-gradient(circle at 18% 52%, #000 0 23%, transparent 40%),
    radial-gradient(circle at 82% 50%, #000 0 24%, transparent 41%),
    radial-gradient(circle at 36% 20%, #000 0 25%, transparent 40%),
    radial-gradient(circle at 64% 19%, #000 0 27%, transparent 42%),
    radial-gradient(circle at 31% 78%, #000 0 21%, transparent 37%),
    radial-gradient(circle at 52% 84%, #000 0 24%, transparent 40%),
    radial-gradient(circle at 72% 78%, #000 0 21%, transparent 37%) !important;
  mask-composite: add !important;
  -webkit-mask-composite: source-over !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
}

.tree-object .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  top: -12px !important;
  width: 346px !important;
  height: 220px !important;
}

.garden-arrange-visual .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  top: -10px !important;
  width: 346px !important;
  height: 220px !important;
}

.option-visual .leaves-only-model.detailed.detail {
  width: 270px !important;
  height: 210px !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer {
  width: 310px !important;
  height: 198px !important;
  top: 10px !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer::before {
  background-size: 176% auto !important;
  mix-blend-mode: normal !important;
}

/* Detailed leaf final edge cleanup: keep the size moderate and soften top/bottom cuts. */
.leaf-layer.leaf-shape-detailed.leaf-color-detail,
.leaves-only-model.detailed.detail .leaf-layer {
  width: 304px !important;
  height: 218px !important;
  top: 0 !important;
  overflow: visible !important;
}

.tree-object .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  top: -8px !important;
  width: 334px !important;
  height: 236px !important;
}

.garden-arrange-visual .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  top: -8px !important;
  width: 334px !important;
  height: 236px !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer {
  width: 304px !important;
  height: 218px !important;
  top: 4px !important;
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail::before,
.leaves-only-model.detailed.detail .leaf-layer::before {
  top: -4% !important;
  height: 112% !important;
  border-radius: 54% 46% 50% 48% / 50% 53% 47% 50% !important;
  background-position: center 33% !important;
  background-size: 176% auto !important;
  filter: saturate(1.1) contrast(1.08) brightness(0.98) blur(0.35px) !important;
  mask-image:
    radial-gradient(
      ellipse at 50% 52%,
      #000 0 62%,
      rgba(0, 0, 0, 0.9) 70%,
      transparent 90%
    ),
    radial-gradient(circle at 24% 26%, #000 0 24%, transparent 42%),
    radial-gradient(circle at 76% 25%, #000 0 25%, transparent 43%),
    radial-gradient(circle at 24% 78%, #000 0 25%, transparent 45%),
    radial-gradient(circle at 52% 86%, #000 0 28%, transparent 48%),
    radial-gradient(circle at 78% 78%, #000 0 25%, transparent 45%) !important;
  -webkit-mask-image:
    radial-gradient(
      ellipse at 50% 52%,
      #000 0 62%,
      rgba(0, 0, 0, 0.9) 70%,
      transparent 90%
    ),
    radial-gradient(circle at 24% 26%, #000 0 24%, transparent 42%),
    radial-gradient(circle at 76% 25%, #000 0 25%, transparent 43%),
    radial-gradient(circle at 24% 78%, #000 0 25%, transparent 45%),
    radial-gradient(circle at 52% 86%, #000 0 28%, transparent 48%),
    radial-gradient(circle at 78% 78%, #000 0 25%, transparent 45%) !important;
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail::after,
.leaves-only-model.detailed.detail .leaf-layer::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -7% !important;
  width: 82% !important;
  height: 34% !important;
  transform: translateX(-50%) !important;
  background-image: var(--detailed-leaf-tree-image) !important;
  background-position: center 72% !important;
  background-repeat: no-repeat !important;
  background-size: 176% auto !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.96) blur(0.5px) !important;
  opacity: 0.86 !important;
  pointer-events: none !important;
  mask-image:
    radial-gradient(circle at 20% 42%, #000 0 27%, transparent 48%),
    radial-gradient(circle at 50% 50%, #000 0 34%, transparent 56%),
    radial-gradient(circle at 80% 42%, #000 0 27%, transparent 48%) !important;
  -webkit-mask-image:
    radial-gradient(circle at 20% 42%, #000 0 27%, transparent 48%),
    radial-gradient(circle at 50% 50%, #000 0 34%, transparent 56%),
    radial-gradient(circle at 80% 42%, #000 0 27%, transparent 48%) !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer::before,
.option-visual .leaves-only-model.detailed.detail .leaf-layer::after {
  mix-blend-mode: normal !important;
}

/* Detailed leaf restored size: return to the original scale and soften the lower edge. */
.leaf-layer.leaf-shape-detailed.leaf-color-detail,
.leaves-only-model.detailed.detail .leaf-layer {
  width: 292px !important;
  height: 188px !important;
  top: 2px !important;
  overflow: visible !important;
}

.tree-object .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  top: -10px !important;
  width: 330px !important;
  height: 210px !important;
}

.garden-arrange-visual .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  top: -8px !important;
  width: 330px !important;
  height: 210px !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer {
  width: 292px !important;
  height: 188px !important;
  top: 12px !important;
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail::before,
.leaves-only-model.detailed.detail .leaf-layer::before {
  top: -3% !important;
  height: 110% !important;
  border-radius: 52% 48% 50% 50% / 52% 54% 48% 46% !important;
  background-position: center 32% !important;
  background-size: 166% auto !important;
  filter: saturate(1.08) contrast(1.06) brightness(0.98) blur(0.22px) !important;
  mask-image: radial-gradient(
    ellipse at 50% 52%,
    #000 0 66%,
    rgba(0, 0, 0, 0.88) 76%,
    rgba(0, 0, 0, 0.34) 88%,
    transparent 98%
  ) !important;
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 52%,
    #000 0 66%,
    rgba(0, 0, 0, 0.88) 76%,
    rgba(0, 0, 0, 0.34) 88%,
    transparent 98%
  ) !important;
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail::after,
.leaves-only-model.detailed.detail .leaf-layer::after {
  display: none !important;
}

/* Detailed leaf selector card: show the original illustration instead of the transparent cutout. */
.option-visual .leaves-only-model.detailed.detail {
  width: 238px !important;
  height: 184px !important;
  filter: drop-shadow(0 10px 12px rgba(54, 72, 41, 0.12)) !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer {
  left: 50% !important;
  top: 50% !important;
  width: 232px !important;
  height: 176px !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: none !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--detailed-leaf-tree-image) center 42% / 132% auto no-repeat !important;
  border-radius: 10px !important;
  filter: saturate(1.04) contrast(1.02) brightness(0.99) !important;
  opacity: 1 !important;
}

/* Detailed leaf selector fine tune: keep the full canopy visible inside the small card. */
.option-visual .leaves-only-model.detailed.detail {
  width: 246px !important;
  height: 192px !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer {
  width: 244px !important;
  height: 184px !important;
  top: 50% !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer::before {
  background-size: 126% auto !important;
  background-position: center 42% !important;
}

/* Straight sturdy trunk option: replace the first trunk with the supplied artwork. */
:root {
  --straight-trunk-tree-image: url('assets/straight-trunk-tree.png');
}

.trunk-thin-long .tree-trunk {
  width: 148px !important;
  height: 270px !important;
  bottom: -2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-image: var(--straight-trunk-tree-image) !important;
  background-repeat: no-repeat !important;
  background-size: 850px auto !important;
  background-position: center 74% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 13px 13px rgba(60, 43, 26, 0.22)) !important;
  overflow: hidden !important;
}

.trunk-thin-long.tree-trunk-only .tree-trunk {
  background-position: center 74% !important;
}

.trunk-thin-long .tree-trunk::before,
.trunk-thin-long .tree-trunk::after {
  display: none !important;
}

.option-visual .trunk-thin-long .tree-trunk {
  width: 148px !important;
  height: 270px !important;
  background-size: 850px auto !important;
  background-position: center 74% !important;
}

/* Soften the bottom of the straight trunk so the roots do not look hard-cut. */
.trunk-thin-long .tree-trunk {
  overflow: visible !important;
}

.trunk-thin-long .tree-trunk::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -7px !important;
  width: 106px !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  border-radius: 48% 52% 46% 54% / 58% 52% 48% 42% !important;
  background:
    radial-gradient(
      ellipse at 17% 58%,
      rgba(77, 50, 32, 0.58) 0 13%,
      rgba(77, 50, 32, 0.18) 28%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 36% 48%,
      rgba(103, 67, 39, 0.62) 0 18%,
      rgba(103, 67, 39, 0.2) 36%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 57% 58%,
      rgba(61, 43, 31, 0.64) 0 16%,
      rgba(61, 43, 31, 0.18) 35%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 82% 54%,
      rgba(88, 58, 36, 0.52) 0 13%,
      rgba(88, 58, 36, 0.16) 31%,
      transparent 52%
    );
  filter: blur(0.65px) saturate(0.92);
  opacity: 0.78 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.option-visual .trunk-thin-long .tree-trunk::after {
  bottom: -5px !important;
  width: 92px !important;
  height: 14px !important;
}

.tree-object
  .tree-model.trunk-thin-long.tree-leaves-cloud.tree-with-leaves
  .leaf-layer.leaf-shape-cloud.leaf-color-soft {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 19px) !important;
}

/* Thin branchy trunk option: replace the second trunk with the supplied artwork. */
:root {
  --thin-branchy-trunk-tree-image: url('assets/thin-branchy-trunk-tree.png');
}

.trunk-thin-short .tree-trunk {
  width: 132px !important;
  height: 282px !important;
  bottom: -2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-image: var(--thin-branchy-trunk-tree-image) !important;
  background-repeat: no-repeat !important;
  background-size: 900px auto !important;
  background-position: center 57% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 12px rgba(49, 36, 24, 0.2)) !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

.trunk-thin-short .tree-trunk::before {
  display: none !important;
}

.trunk-thin-short .tree-trunk::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -6px !important;
  width: 78px !important;
  height: 15px !important;
  transform: translateX(-50%) !important;
  border-radius: 46% 54% 48% 52% / 58% 52% 48% 42% !important;
  background:
    radial-gradient(
      ellipse at 20% 58%,
      rgba(69, 55, 32, 0.5) 0 12%,
      rgba(69, 55, 32, 0.16) 30%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at 50% 54%,
      rgba(46, 38, 27, 0.6) 0 16%,
      rgba(46, 38, 27, 0.18) 36%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 80% 58%,
      rgba(77, 61, 35, 0.42) 0 11%,
      rgba(77, 61, 35, 0.14) 29%,
      transparent 50%
    );
  filter: blur(0.6px) saturate(0.92);
  opacity: 0.72 !important;
  pointer-events: none !important;
}

.option-visual .trunk-thin-short .tree-trunk {
  width: 132px !important;
  height: 282px !important;
  background-size: 900px auto !important;
  background-position: center 57% !important;
}

.option-visual .trunk-thin-short .tree-trunk::after {
  bottom: -5px !important;
  width: 68px !important;
  height: 13px !important;
}

.tree-object
  .tree-model.trunk-thin-short.tree-leaves-maple.tree-with-leaves
  .leaf-layer.leaf-shape-maple.leaf-color-autumn {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 57px) !important;
}

.tree-object
  .tree-model.trunk-thin-short.tree-leaves-needle.tree-with-leaves
  .leaf-layer.leaf-shape-needle.leaf-color-pine {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 31px) !important;
}

.tree-object
  .tree-model.trunk-thin-short.tree-leaves-needle.tree-with-leaves
  .tree-trunk {
  bottom: -6px !important;
  transform: translateX(calc(-50% - 8px)) !important;
}

.tree-object
  .tree-model.trunk-thin-short.tree-leaves-blossom.tree-with-leaves
  .leaf-layer.leaf-shape-blossom.leaf-color-cherry {
  top: -13px !important;
}

/* Final lock for option 1: the sturdy straight trunk must use only the supplied image. */
.tree-model.trunk-thin-long .tree-trunk {
  width: 148px !important;
  height: 292px !important;
  bottom: -2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: var(--straight-trunk-tree-image) center 77% / 850px auto no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 13px 13px rgba(60, 43, 26, 0.22)) !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

.option-visual .tree-model.trunk-thin-long .tree-trunk {
  width: 148px !important;
  height: 292px !important;
  background: var(--straight-trunk-tree-image) center 77% / 850px auto no-repeat !important;
}

/* Detailed leaf final replacement: use the supplied original illustration in the selector and preview. */
:root {
  --detailed-leaf-original-image: url('assets/detailed-leaf-tree-cropped.png');
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail,
.leaves-only-model.detailed.detail .leaf-layer {
  left: 50% !important;
  top: 2px !important;
  width: 300px !important;
  height: 246px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 13px 14px rgba(45, 74, 34, 0.12)) !important;
  z-index: 7 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mask-composite: initial !important;
  -webkit-mask-composite: initial !important;
}

.tree-object .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  top: -8px !important;
  width: 326px !important;
  height: 268px !important;
}

.garden-arrange-visual .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  top: -8px !important;
  width: 326px !important;
  height: 268px !important;
}

.option-visual .leaves-only-model.detailed.detail .leaf-layer {
  width: 300px !important;
  height: 246px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail::before,
.leaves-only-model.detailed.detail .leaf-layer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  border-radius: 0 !important;
  background: var(--detailed-leaf-original-image) center center / contain
    no-repeat !important;
  box-shadow: none !important;
  filter: saturate(1.04) contrast(1.02) brightness(0.99) !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.leaf-layer.leaf-shape-detailed.leaf-color-detail::after,
.leaves-only-model.detailed.detail .leaf-layer::after {
  display: none !important;
}

.tree-object
  .tree-model.trunk-thin-short.tree-leaves-detailed.tree-with-leaves
  .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 32px) !important;
}

/* Cloud leaf final replacement: use the supplied watercolor cloud-tree artwork. */
:root {
  --cloud-leaf-tree-image: url('assets/cloud-leaf-tree.png');
}

.leaf-layer.leaf-shape-cloud.leaf-color-soft,
.leaves-only-model.cloud.soft .leaf-layer {
  left: 50% !important;
  top: 8px !important;
  width: 306px !important;
  height: 220px !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: transparent !important;
  filter: drop-shadow(0 13px 14px rgba(45, 74, 34, 0.12)) !important;
  z-index: 7 !important;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.leaf-layer.leaf-shape-cloud.leaf-color-soft .leaf,
.leaves-only-model.cloud.soft .leaf-layer .leaf {
  display: none !important;
}

.tree-object .leaf-layer.leaf-shape-cloud.leaf-color-soft {
  top: 8px !important;
  width: 315px !important;
  height: 220px !important;
  mask-image:
    radial-gradient(
      ellipse at 50% 47%,
      #000 0 47%,
      rgba(0, 0, 0, 0.8) 56%,
      transparent 70%
    ),
    radial-gradient(
      circle at 21% 52%,
      #000 0 22%,
      rgba(0, 0, 0, 0.78) 28%,
      transparent 39%
    ),
    radial-gradient(
      circle at 34% 26%,
      #000 0 23%,
      rgba(0, 0, 0, 0.78) 30%,
      transparent 42%
    ),
    radial-gradient(
      circle at 52% 20%,
      #000 0 24%,
      rgba(0, 0, 0, 0.78) 31%,
      transparent 43%
    ),
    radial-gradient(
      circle at 69% 29%,
      #000 0 23%,
      rgba(0, 0, 0, 0.78) 30%,
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 51%,
      #000 0 21%,
      rgba(0, 0, 0, 0.78) 28%,
      transparent 39%
    ),
    radial-gradient(
      circle at 26% 73%,
      #000 0 18%,
      rgba(0, 0, 0, 0.72) 25%,
      transparent 35%
    ),
    radial-gradient(
      circle at 50% 76%,
      #000 0 20%,
      rgba(0, 0, 0, 0.72) 27%,
      transparent 38%
    ),
    radial-gradient(
      circle at 72% 72%,
      #000 0 18%,
      rgba(0, 0, 0, 0.72) 25%,
      transparent 35%
    ) !important;
  -webkit-mask-image:
    radial-gradient(
      ellipse at 50% 47%,
      #000 0 47%,
      rgba(0, 0, 0, 0.8) 56%,
      transparent 70%
    ),
    radial-gradient(
      circle at 21% 52%,
      #000 0 22%,
      rgba(0, 0, 0, 0.78) 28%,
      transparent 39%
    ),
    radial-gradient(
      circle at 34% 26%,
      #000 0 23%,
      rgba(0, 0, 0, 0.78) 30%,
      transparent 42%
    ),
    radial-gradient(
      circle at 52% 20%,
      #000 0 24%,
      rgba(0, 0, 0, 0.78) 31%,
      transparent 43%
    ),
    radial-gradient(
      circle at 69% 29%,
      #000 0 23%,
      rgba(0, 0, 0, 0.78) 30%,
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 51%,
      #000 0 21%,
      rgba(0, 0, 0, 0.78) 28%,
      transparent 39%
    ),
    radial-gradient(
      circle at 26% 73%,
      #000 0 18%,
      rgba(0, 0, 0, 0.72) 25%,
      transparent 35%
    ),
    radial-gradient(
      circle at 50% 76%,
      #000 0 20%,
      rgba(0, 0, 0, 0.72) 27%,
      transparent 38%
    ),
    radial-gradient(
      circle at 72% 72%,
      #000 0 18%,
      rgba(0, 0, 0, 0.72) 25%,
      transparent 35%
    ) !important;
  mask-composite: add !important;
  -webkit-mask-composite: source-over !important;
  filter: drop-shadow(0 1px 0 rgba(19, 58, 31, 0.66))
    drop-shadow(-2px 2px 0 rgba(37, 86, 43, 0.44))
    drop-shadow(2px -1px 0 rgba(71, 111, 54, 0.34))
    drop-shadow(0 10px 12px rgba(31, 67, 38, 0.16)) !important;
}

.garden-arrange-visual .leaf-layer.leaf-shape-cloud.leaf-color-soft {
  top: 8px !important;
  width: 332px !important;
  height: 232px !important;
}

.option-visual .leaves-only-model.cloud.soft {
  width: 270px !important;
  height: 210px !important;
}

.option-visual .leaves-only-model.cloud.soft .leaf-layer {
  width: 306px !important;
  height: 220px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.leaf-layer.leaf-shape-cloud.leaf-color-soft::before,
.leaves-only-model.cloud.soft .leaf-layer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: var(--cloud-leaf-tree-image) center 37% / 142% auto no-repeat !important;
  filter: saturate(1.04) contrast(1.02) brightness(1.01) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.tree-object .leaf-layer.leaf-shape-cloud.leaf-color-soft::before {
  mix-blend-mode: multiply !important;
  opacity: 0.98 !important;
  filter: saturate(1.08) contrast(1.06) brightness(1.04) !important;
}

.leaf-layer.leaf-shape-cloud.leaf-color-soft::after,
.leaves-only-model.cloud.soft .leaf-layer::after {
  display: none !important;
}

/* Cloud leaf canopy-only lock: use the transparent leaf asset, not the full tree artwork. */
:root {
  --cloud-leaf-tree-image: url('assets/cloud-leaf-canopy.png');
}

.leaf-layer.leaf-shape-cloud.leaf-color-soft,
.leaves-only-model.cloud.soft .leaf-layer,
.tree-object .leaf-layer.leaf-shape-cloud.leaf-color-soft,
.garden-arrange-visual .leaf-layer.leaf-shape-cloud.leaf-color-soft,
.option-visual .leaves-only-model.cloud.soft .leaf-layer {
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mask-composite: initial !important;
  -webkit-mask-composite: initial !important;
}

.tree-object .leaf-layer.leaf-shape-cloud.leaf-color-soft {
  top: -32px !important;
  width: 321px !important;
  height: 321px !important;
  filter: drop-shadow(0 12px 14px rgba(31, 67, 38, 0.14)) !important;
}

.garden-arrange-visual .leaf-layer.leaf-shape-cloud.leaf-color-soft {
  top: -32px !important;
  width: 321px !important;
  height: 321px !important;
}

.option-visual .leaves-only-model.cloud.soft .leaf-layer {
  width: 242px !important;
  height: 242px !important;
}

.leaf-layer.leaf-shape-cloud.leaf-color-soft::before,
.leaves-only-model.cloud.soft .leaf-layer::before {
  background: var(--cloud-leaf-tree-image) center center / contain no-repeat !important;
  mix-blend-mode: normal !important;
  filter: saturate(1.04) contrast(1.02) brightness(1.01) !important;
  opacity: 1 !important;
}

.tree-object
  .tree-model.trunk-thin-short.tree-leaves-cloud.tree-with-leaves
  .leaf-layer.leaf-shape-cloud.leaf-color-soft {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 62px) !important;
}

.tree-object
  .tree-model.trunk-thin-short.tree-leaves-cloud.tree-with-leaves
  .tree-trunk {
  transform: translateX(calc(-50% - 11px)) !important;
}

/* Wide sturdy trunk option: use the supplied watercolor broad-base trunk artwork. */
:root {
  --wide-sturdy-trunk-image: url('assets/wide-sturdy-trunk.png');
}

.tree-model.trunk-thick-long .branch-layer {
  display: none !important;
}

.tree-model.trunk-thick-long .tree-trunk {
  left: 50% !important;
  bottom: -2px !important;
  width: 171px !important;
  height: 178px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: var(--wide-sturdy-trunk-image) center bottom / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 13px rgba(61, 43, 25, 0.18)) !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

.tree-model.trunk-thick-long .tree-trunk::before,
.tree-model.trunk-thick-long .tree-trunk::after {
  display: none !important;
}

.option-visual .tree-model.trunk-thick-long .tree-trunk {
  width: 214px !important;
  height: 222px !important;
}

.tree-object
  .tree-model.trunk-thick-long.tree-leaves-detailed.tree-with-leaves
  .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 30px) !important;
}

.tree-object
  .tree-model.trunk-thick-long.tree-leaves-maple.tree-with-leaves
  .leaf-layer.leaf-shape-maple.leaf-color-autumn {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 38px) !important;
}

.tree-object
  .tree-model.trunk-thick-long.tree-leaves-cloud.tree-with-leaves
  .leaf-layer.leaf-shape-cloud.leaf-color-soft {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 34px) !important;
}

/* Hollow trunk option: use the supplied watercolor trunk with the center hollow. */
:root {
  --hollow-trunk-image: url('assets/hollow-trunk.png');
}

.tree-model.trunk-thick-short .branch-layer {
  display: none !important;
}

.tree-model.trunk-thick-short .tree-trunk {
  left: 50% !important;
  bottom: -2px !important;
  width: 142px !important;
  height: 176px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: var(--hollow-trunk-image) center bottom / contain no-repeat !important;
  box-shadow: none !important;
  filter: brightness(0.8) drop-shadow(0 12px 13px rgba(61, 43, 25, 0.16)) !important;
  overflow: visible !important;
  transform: translateX(calc(-50% - 26px)) !important;
}

.tree-model.trunk-thick-short .tree-trunk::before,
.tree-model.trunk-thick-short .tree-trunk::after {
  display: none !important;
}

.option-visual .tree-model.trunk-thick-short .tree-trunk {
  width: 142px !important;
  height: 176px !important;
  transform: translateX(-50%) !important;
}

.tree-object
  .tree-model.trunk-thick-short.tree-leaves-detailed.tree-with-leaves
  .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 34px) !important;
}

.tree-object
  .tree-model.trunk-thick-short.tree-leaves-maple.tree-with-leaves
  .leaf-layer.leaf-shape-maple.leaf-color-autumn {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 38px) !important;
}

.tree-object
  .tree-model.trunk-thick-short.tree-leaves-cloud.tree-with-leaves
  .leaf-layer.leaf-shape-cloud.leaf-color-soft {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 27px) !important;
}

.tree-object
  .tree-model.trunk-thick-short.tree-leaves-needle.tree-with-leaves
  .leaf-layer.leaf-shape-needle.leaf-color-pine {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 15px) !important;
}

.tree-object
  .tree-model.trunk-thick-short.tree-leaves-needle.tree-with-leaves
  .tree-trunk {
  bottom: -10px !important;
}

/* Rough bark trunk option: use the supplied watercolor rugged-bark trunk artwork. */
:root {
  --rough-bark-trunk-image: url('assets/rough-bark-trunk.png');
}

.tree-model.trunk-normal-long .branch-layer {
  display: none !important;
}

.tree-model.trunk-normal-long .tree-trunk {
  left: 50% !important;
  bottom: -2px !important;
  width: 184px !important;
  height: 186px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: var(--rough-bark-trunk-image) center bottom / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 13px rgba(61, 43, 25, 0.18)) !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

.tree-model.trunk-normal-long .tree-trunk::before,
.tree-model.trunk-normal-long .tree-trunk::after {
  display: none !important;
}

.option-visual .tree-model.trunk-normal-long .tree-trunk {
  width: 214px !important;
  height: 216px !important;
}

.tree-object
  .tree-model.trunk-normal-long.tree-leaves-detailed.tree-with-leaves
  .leaf-layer.leaf-shape-detailed.leaf-color-detail {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 30px) !important;
}

.tree-object
  .tree-model.trunk-normal-long.tree-leaves-maple.tree-with-leaves
  .leaf-layer.leaf-shape-maple.leaf-color-autumn {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 49px) !important;
}

.tree-object
  .tree-model.trunk-normal-long.tree-leaves-maple.tree-with-leaves
  .tree-trunk {
  bottom: -13px !important;
}

.tree-object
  .tree-model.trunk-normal-long.tree-leaves-cloud.tree-with-leaves
  .leaf-layer.leaf-shape-cloud.leaf-color-soft {
  translate: 0 calc(var(--canopy-shift-y, 0px) - 31px) !important;
}

/* Many-branch trunk option: use the supplied bare branching tree artwork. */
:root {
  --many-branch-trunk-image: url('assets/many-branch-trunk.png');
}

.tree-model.trunk-normal-medium .branch-layer {
  display: none !important;
}

.tree-model.trunk-normal-medium .tree-trunk {
  left: 50% !important;
  bottom: -2px !important;
  width: 218px !important;
  height: 230px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: var(--many-branch-trunk-image) center bottom / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 13px rgba(61, 43, 25, 0.16)) !important;
  overflow: visible !important;
  transform: translateX(-50%) !important;
}

.tree-model.trunk-normal-medium .tree-trunk::before,
.tree-model.trunk-normal-medium .tree-trunk::after {
  display: none !important;
}

.option-visual .tree-model.trunk-normal-medium .tree-trunk {
  width: 234px !important;
  height: 247px !important;
}

.tree-object
  .tree-model.trunk-normal-medium.tree-leaves-blossom.tree-with-leaves
  .leaf-layer.leaf-shape-blossom.leaf-color-cherry {
  top: 29px !important;
  width: 397px !important;
  height: 238px !important;
}

.tree-object
  .tree-model.trunk-thin-short.tree-leaves-willow.tree-with-leaves
  .leaf-layer.leaf-shape-willow.leaf-color-willow {
  top: -25px !important;
}

.tree-object
  .tree-model.trunk-thin-long.tree-leaves-willow.tree-with-leaves
  .leaf-layer.leaf-shape-willow.leaf-color-willow {
  top: 2px !important;
}

.tree-object
  .tree-model.trunk-normal-medium.tree-leaves-willow.tree-with-leaves
  .leaf-layer.leaf-shape-willow.leaf-color-willow {
  top: 32px !important;
}

/* Small fenced house final replacement: use the supplied cozy fenced house artwork. */
:root {
  --small-fence-house-image: url('assets/small-fence-house.png');
  --small-fence-house-wall-mask: url('assets/small-fence-house-wall-mask.png');
}

.house-model.floor-small {
  width: 354px !important;
  height: 160px !important;
  background: var(--small-fence-house-image) center bottom / contain no-repeat !important;
  filter: drop-shadow(0 15px 15px rgba(66, 49, 31, 0.16)) !important;
  overflow: visible !important;
}

.house-model.floor-small::before,
.house-model.floor-small::after,
.house-model.floor-small .house-roof,
.house-model.floor-small .castle-side-walls,
.house-model.floor-small .house-body,
.house-model.floor-small .house-body::before,
.house-model.floor-small .house-body::after,
.house-model.floor-small .floor-list,
.house-model.floor-small .floor-list::before,
.house-model.floor-small .floor-list::after,
.house-model.floor-small .window-layer,
.house-model.floor-small .door-layer,
.house-model.floor-small .placed-window,
.house-model.floor-small .placed-door {
  display: none !important;
}

.option-visual .house-model.floor-small {
  width: 296px !important;
  height: 133px !important;
  bottom: 2px !important;
  transform: translateX(-50%) scale(0.405) !important;
}

.house-object .house-model.floor-small {
  width: 354px !important;
  height: 160px !important;
  transform: scale(1.1) !important;
  transform-origin: center bottom !important;
}

.house-object .house-model.floor-small .house-roof {
  display: block !important;
  bottom: 134px !important;
  z-index: 8 !important;
}

/* Tiny cabin final replacement: low wooden cabin artwork with shrubs, no separate roof/window/door layers. */
:root {
  --tiny-cabin-house-image: url('assets/tiny-cabin-house.png');
  --tiny-cabin-house-wall-mask: url('assets/tiny-cabin-house-wall-mask.png');
}

.house-model.floor-tiny {
  width: 18.6rem !important;
  height: 7.55rem !important;
  display: block !important;
  position: relative !important;
  background-image: var(--tiny-cabin-house-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 0.32rem 0.16rem rgba(66, 49, 31, 0.16)) !important;
  overflow: visible !important;
}

.house-model.floor-tiny::before,
.house-model.floor-tiny::after,
.house-model.floor-tiny .house-roof,
.house-model.floor-tiny .castle-side-walls,
.house-model.floor-tiny .house-body,
.house-model.floor-tiny .house-body::before,
.house-model.floor-tiny .house-body::after,
.house-model.floor-tiny .floor-list,
.house-model.floor-tiny .floor-list::before,
.house-model.floor-tiny .floor-list::after,
.house-model.floor-tiny .window-layer,
.house-model.floor-tiny .door-layer,
.house-model.floor-tiny .placed-window,
.house-model.floor-tiny .placed-door {
  display: none !important;
}

.floor-style-grid
  .option-card:first-child
  .option-visual
  .house-model.floor-tiny {
  width: 18.25rem !important;
  height: 7.4rem !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(0.244944) !important;
  transform-origin: center center !important;
}

.house-object .house-model.floor-tiny {
  width: 18.6rem !important;
  height: 7.55rem !important;
  background-image:
    var(--house-wall-tint-image), var(--tiny-cabin-house-image) !important;
  background-position:
    center bottom,
    center bottom !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: contain, contain !important;
}

.house-object .house-model.floor-tiny .house-roof {
  display: block !important;
  bottom: 6.55rem !important;
  transform: translateX(-50%) scale(1.12) !important;
  transform-origin: center bottom !important;
  z-index: 8 !important;
}

/* Balanced sturdy house final replacement: watercolor stone house without a fence. */
:root {
  --balanced-house-image: url('assets/balanced-house.png');
  --balanced-house-wall-mask: url('assets/balanced-house-wall-mask.png');
}

.house-model.floor-balanced {
  width: 22.6rem !important;
  height: 16.4rem !important;
  display: block !important;
  overflow: visible !important;
}

.house-model.floor-balanced::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 1rem !important;
  width: 22rem !important;
  height: 9.55rem !important;
  transform: translateX(-50%) !important;
  background-image: var(--balanced-house-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  z-index: 2 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0.35rem 0.18rem rgba(59, 45, 31, 0.16)) !important;
}

.option-visual .house-model.floor-balanced {
  transform: translateX(-50%) scale(0.35) !important;
}

.house-model.floor-balanced .house-body {
  bottom: 3.12rem !important;
  width: 15.8rem !important;
  height: 6.55rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

.house-model.floor-balanced .house-body::before,
.house-model.floor-balanced .house-body::after,
.house-model.floor-balanced .floor-list,
.house-model.floor-balanced .floor-list::before,
.house-model.floor-balanced .floor-list::after,
.house-model.floor-balanced .floor-row,
.house-model.floor-balanced .castle-side-walls {
  display: none !important;
}

.house-model.floor-balanced .house-roof {
  bottom: 10.35rem !important;
  z-index: 8 !important;
}

.floor-style-grid .option-visual .house-model.floor-balanced {
  height: 11.8rem !important;
}

.floor-style-grid .option-visual .house-model.floor-balanced .house-roof {
  display: none !important;
}

.house-object .house-model.floor-balanced {
  height: 16.9rem !important;
  transform: scale(1.05) !important;
  transform-origin: center bottom !important;
}

.house-object .house-model.floor-balanced::before {
  bottom: 0.95rem !important;
}

.house-object .house-model.floor-balanced .house-roof {
  bottom: 10.18rem !important;
}

/* Moss dome roof final replacement: use the supplied watercolor moss roof artwork. */
:root {
  --moss-dome-roof-image: url('assets/moss-dome-roof.png');
}

.roof-sample.roof-moss-dome .house-roof,
.house-model.roof-moss-dome .house-roof {
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-image: var(--moss-dome-roof-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0.22rem 0.08rem rgba(45, 34, 22, 0.24)) !important;
  overflow: visible !important;
}

.roof-sample.roof-moss-dome .house-roof::before,
.roof-sample.roof-moss-dome .house-roof::after,
.house-model.roof-moss-dome .house-roof::before,
.house-model.roof-moss-dome .house-roof::after {
  display: none !important;
}

.roof-sample.roof-moss-dome .house-roof {
  width: 12.8rem !important;
  height: 7.6rem !important;
  bottom: 0.65rem !important;
}

.house-model.roof-moss-dome .house-roof {
  width: 12.9rem !important;
  height: 7.65rem !important;
}

.house-object .house-model.roof-moss-dome .house-roof {
  width: 13.55rem !important;
  height: 8.05rem !important;
  transform: translateX(-50%) translateY(0.28rem) !important;
  transform-origin: center bottom !important;
  filter: drop-shadow(0 0.16rem 0.06rem rgba(45, 34, 22, 0.28))
    drop-shadow(0 0.46rem 0.18rem rgba(66, 49, 31, 0.18)) !important;
}

.house-object .house-model.floor-tiny.roof-moss-dome .house-roof {
  bottom: 6.1rem !important;
  width: 13.8rem !important;
  height: 8.15rem !important;
  transform: translateX(-50%) translateY(0.12rem) scale(1.16) !important;
}

/* Flat roof final replacement: watercolor orange tile roof artwork. */
:root {
  --flat-tile-roof-image: url('assets/flat-tile-roof.png');
}

.roof-sample.roof-flat .house-roof,
.house-model.roof-flat .house-roof {
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-image: var(--flat-tile-roof-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0.22rem 0.08rem rgba(72, 39, 16, 0.25)) !important;
  overflow: visible !important;
}

.roof-sample.roof-flat .house-roof::before,
.roof-sample.roof-flat .house-roof::after,
.house-model.roof-flat .house-roof::before,
.house-model.roof-flat .house-roof::after {
  display: none !important;
}

.roof-sample.roof-flat .house-roof {
  width: 13.2rem !important;
  height: 4.45rem !important;
}

.house-model.roof-flat .house-roof {
  width: 14.2rem !important;
  height: 4.75rem !important;
}

.house-object .house-model.floor-balanced.roof-flat .house-roof {
  bottom: 9.18rem !important;
  width: 20.75rem !important;
  height: 6.95rem !important;
  z-index: 8 !important;
}

.house-object .house-model.floor-balanced .window-layer,
.house-object .house-model.floor-balanced .door-layer,
.house-object .house-model.floor-balanced .placed-window,
.house-object .house-model.floor-balanced .placed-door {
  display: none !important;
}

/* Tall triangle roof final replacement: watercolor curved pointed terracotta tile roof artwork. */
:root {
  --tall-triangle-roof-image: url('assets/tall-triangle-roof.png');
}

.roof-sample.roof-tall-triangle .house-roof,
.house-model.roof-tall-triangle .house-roof {
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-image: var(--tall-triangle-roof-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0.24rem 0.1rem rgba(72, 39, 16, 0.26)) !important;
  overflow: visible !important;
}

.roof-sample.roof-tall-triangle .house-roof::before,
.roof-sample.roof-tall-triangle .house-roof::after,
.house-model.roof-tall-triangle .house-roof::before,
.house-model.roof-tall-triangle .house-roof::after {
  display: none !important;
}

.roof-sample.roof-tall-triangle .house-roof {
  width: 13.45rem !important;
  height: 6.45rem !important;
  bottom: 0.72rem !important;
}

.house-model.roof-tall-triangle .house-roof {
  width: 15.6rem !important;
  height: 7.45rem !important;
}

.house-object .house-model.floor-small.roof-tall-triangle .house-roof {
  bottom: 129px !important;
  width: 15.2rem !important;
  height: 7.25rem !important;
  z-index: 8 !important;
}

.house-object .house-model.floor-balanced.roof-tall-triangle .house-roof {
  bottom: 9.08rem !important;
  width: 21.15rem !important;
  height: 10.1rem !important;
  z-index: 8 !important;
}

.house-object .house-model.floor-balanced.roof-moss-dome .house-roof {
  bottom: 9.1rem !important;
  width: 20.35rem !important;
  height: 10.35rem !important;
  transform: translateX(-50%) translateY(0.2cm) scale(1.1) !important;
  transform-origin: center bottom !important;
  z-index: 8 !important;
}

/* Attic window roof final replacement: watercolor terracotta roof with centered dormer. */
:root {
  --attic-window-roof-image: url('assets/attic-window-roof.png');
}

.roof-sample.roof-attic-window .house-roof,
.house-model.roof-attic-window .house-roof {
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-image: var(--attic-window-roof-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0.22rem 0.08rem rgba(72, 39, 16, 0.24)) !important;
  overflow: visible !important;
}

.roof-sample.roof-attic-window .house-roof::before,
.roof-sample.roof-attic-window .house-roof::after,
.house-model.roof-attic-window .house-roof::before,
.house-model.roof-attic-window .house-roof::after {
  display: none !important;
}

.roof-sample.roof-attic-window .house-roof {
  width: 13.4rem !important;
  height: 5rem !important;
}

.house-model.roof-attic-window .house-roof {
  width: 15rem !important;
  height: 5.55rem !important;
}

.house-object .house-model.floor-balanced.roof-attic-window .house-roof {
  bottom: 9.14rem !important;
  width: 20.35rem !important;
  height: 7.55rem !important;
  z-index: 8 !important;
}

/* Asymmetric roof final replacement: watercolor slanted terracotta tile roof artwork. */
:root {
  --asymmetric-roof-image: url('assets/asymmetric-roof.png');
}

.roof-sample.roof-asymmetric .house-roof,
.house-model.roof-asymmetric .house-roof {
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-image: var(--asymmetric-roof-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0.22rem 0.08rem rgba(72, 39, 16, 0.24)) !important;
  overflow: visible !important;
}

.roof-sample.roof-asymmetric .house-roof::before,
.roof-sample.roof-asymmetric .house-roof::after,
.house-model.roof-asymmetric .house-roof::before,
.house-model.roof-asymmetric .house-roof::after {
  display: none !important;
}

.roof-sample.roof-asymmetric .house-roof {
  width: 12.8rem !important;
  height: 7rem !important;
  bottom: 0.75rem !important;
}

.house-model.roof-asymmetric .house-roof {
  width: 15.4rem !important;
  height: 8.45rem !important;
}

.house-object .house-model.floor-balanced.roof-asymmetric .house-roof {
  bottom: 9.1rem !important;
  width: 20.75rem !important;
  height: 9.25rem !important;
  transform: translateX(-50%) scale(1.1) !important;
  transform-origin: center bottom !important;
  z-index: 8 !important;
}

.house-object .house-model.roof-flat .house-roof,
.house-object .house-model.roof-tall-triangle .house-roof,
.house-object .house-model.roof-attic-window .house-roof,
.house-object .house-model.roof-asymmetric .house-roof {
  filter: drop-shadow(0 0.16rem 0.06rem rgba(72, 39, 16, 0.24))
    drop-shadow(0 0.44rem 0.18rem rgba(66, 49, 31, 0.16)) !important;
}

.house-object .house-model.floor-small .house-roof {
  transform: translateX(-50%) translateY(0) scale(1.05) !important;
  transform-origin: center bottom !important;
}

.house-object .house-model.floor-small.roof-tall-triangle .house-roof {
  transform: translateX(-50%) translateY(-0.2cm) scale(1.05) !important;
}

.house-object .house-model.floor-small.roof-moss-dome .house-roof {
  transform: translateX(-50%) translateY(calc(0.28rem + 0.1cm)) scale(1.155) !important;
}

.house-object .house-model.floor-small.roof-asymmetric .house-roof {
  transform: translateX(-50%) translateY(0) scale(1.1) !important;
}

/* Open two-floor house final replacement: watercolor wide stone body without windows or doors. */
:root {
  --open-two-floor-house-image: url('assets/open-two-floor-house.png');
  --open-two-floor-house-wall-mask: url('assets/open-two-floor-house-wall-mask.png');
}

.house-model.floor-open {
  width: 23rem !important;
  height: 16.35rem !important;
  display: block !important;
  overflow: visible !important;
}

.house-model.floor-open::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0.88rem !important;
  width: 22.25rem !important;
  height: 9.75rem !important;
  transform: translateX(-50%) !important;
  background-image: var(--open-two-floor-house-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  z-index: 2 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0.35rem 0.18rem rgba(59, 45, 31, 0.15)) !important;
}

.option-visual .house-model.floor-open {
  height: 12.15rem !important;
  transform: translateX(-50%) scale(0.34) !important;
}

.floor-style-grid .option-visual .house-model.floor-open .house-roof {
  display: none !important;
}

.house-model.floor-open .house-body {
  bottom: 3.1rem !important;
  width: 16.1rem !important;
  height: 6.8rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

.house-model.floor-open .house-body::before,
.house-model.floor-open .house-body::after,
.house-model.floor-open .floor-list,
.house-model.floor-open .floor-list::before,
.house-model.floor-open .floor-list::after,
.house-model.floor-open .floor-row,
.house-model.floor-open .castle-side-walls,
.house-model.floor-open .window-layer,
.house-model.floor-open .door-layer,
.house-model.floor-open .placed-window,
.house-model.floor-open .placed-door {
  display: none !important;
}

.house-object .house-model.floor-open .house-roof {
  bottom: 10.1rem !important;
  transform: translateX(-50%) translateY(0.5cm) scale(1.166) !important;
  transform-origin: center bottom !important;
  z-index: 8 !important;
}

.house-object .house-model.floor-open.roof-flat .house-roof {
  transform: translateX(-50%) translateY(0.5cm) scale(1.232) !important;
}

.house-object .house-model.floor-open.roof-moss-dome .house-roof {
  transform: translateX(-50%) translateY(calc(0.28rem + 0.5cm)) scale(1.272) !important;
}

.house-object .house-model.floor-open {
  transform: scale(1.15) !important;
  transform-origin: center bottom !important;
}

/* Grand castle final replacement: wide watercolor castle with a tall side tree, no fence. */
:root {
  --grand-castle-house-image: url('assets/grand-castle-house-roofless.png');
  --grand-castle-house-wall-mask: url('assets/grand-castle-house-wall-mask.png');
}

.house-model.floor-grand {
  width: 25.6rem !important;
  height: 18.45rem !important;
  display: block !important;
  position: relative !important;
  overflow: visible !important;
}

.house-model.floor-grand::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0.1rem !important;
  width: 25.45rem !important;
  height: 18.35rem !important;
  transform: translateX(-50%) !important;
  background-image: var(--grand-castle-house-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  z-index: 4 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0.34rem 0.16rem rgba(59, 45, 31, 0.15)) !important;
}

.option-visual .house-model.floor-grand {
  width: 8.39rem !important;
  height: 6.06rem !important;
  left: calc(50% - 4.52rem + 0.15cm) !important;
  bottom: -9px !important;
  transform: none !important;
  background-image: var(--grand-castle-house-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 0.18rem 0.12rem rgba(59, 45, 31, 0.14)) !important;
}

.floor-style-grid .option-visual .house-model.floor-grand::before {
  display: none !important;
}

.floor-style-grid .option-visual .house-model.floor-grand .house-roof {
  display: none !important;
}

.house-object .house-model.floor-grand {
  transform: scale(1.2) !important;
  transform-origin: center bottom !important;
}

.house-model.floor-grand .castle-side-walls,
.house-model.floor-grand .house-body,
.house-model.floor-grand .house-body::before,
.house-model.floor-grand .house-body::after,
.house-model.floor-grand .floor-list,
.house-model.floor-grand .floor-list::before,
.house-model.floor-grand .floor-list::after,
.house-model.floor-grand .floor-row,
.house-model.floor-grand .window-layer,
.house-model.floor-grand .door-layer,
.house-model.floor-grand .placed-window,
.house-model.floor-grand .placed-door {
  display: none !important;
}

.house-object .house-model.floor-grand .house-roof {
  display: block !important;
  left: calc(50% + 0.2cm) !important;
  bottom: 11.45rem !important;
  transform: translateX(-50%) translateY(0.1cm) scale(0.81) !important;
  transform-origin: center bottom !important;
  filter: drop-shadow(0 0.16rem 0.05rem rgba(72, 39, 16, 0.28))
    drop-shadow(0 0.46rem 0.16rem rgba(66, 49, 31, 0.18)) !important;
  z-index: 8 !important;
}

.house-object .house-model.floor-grand.roof-flat .house-roof {
  bottom: 11.58rem !important;
  width: 8.75rem !important;
  height: 2.9rem !important;
}

.house-object .house-model.floor-grand.roof-tall-triangle .house-roof {
  bottom: 11.42rem !important;
  width: 9.15rem !important;
  height: 7rem !important;
}

.house-object .house-model.floor-grand.roof-moss-dome .house-roof {
  bottom: 11.42rem !important;
  width: 9.05rem !important;
  height: 5.35rem !important;
  transform: translateX(-50%) translateY(0.1cm) scale(0.81) !important;
}

.house-object .house-model.floor-grand.roof-attic-window .house-roof {
  bottom: 11.48rem !important;
  width: 9.15rem !important;
  height: 3.45rem !important;
}

.house-object .house-model.floor-grand.roof-asymmetric .house-roof {
  bottom: 11.48rem !important;
  width: 9.45rem !important;
  height: 5.2rem !important;
}

/* Sunny warm weather final replacement: thumbnail uses the watercolor sky, preview keeps the garden landscape. */
:root {
  --sunny-warm-weather-image: url('assets/sunny-warm-weather.png');
  --sunny-warm-sun-overlay-image: url('assets/sunny-warm-sun-overlay.png');
}

.weather-card .option-visual .weather-sample.weather-sunny-warm,
.weather-sample.weather-sunny-warm {
  background-color: #cdefff !important;
  background-image: var(--sunny-warm-weather-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.weather-card .option-visual .weather-sample.weather-sunny-warm::before,
.weather-card .option-visual .weather-sample.weather-sunny-warm::after,
.weather-sample.weather-sunny-warm::before,
.weather-sample.weather-sunny-warm::after,
.weather-sample.weather-sunny-warm .weather-sample-sun {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.preview-sky.weather-sunny-warm,
.flow-garden-canvas.garden-weather-surface.weather-sunny-warm,
.read-only-garden-inner.garden-weather-surface.weather-sunny-warm {
  background-color: #eaf6ef !important;
  background-image: var(--weather-landscape-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.preview-sky.weather-sunny-warm::before {
  content: '' !important;
  background: transparent !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

.preview-sky.weather-sunny-warm::after,
.flow-garden-canvas.garden-weather-surface.weather-sunny-warm::after,
.read-only-garden-inner.garden-weather-surface.weather-sunny-warm::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-image: var(--sunny-warm-sun-overlay-image) !important;
  background-position: 14% 6% !important;
  background-repeat: no-repeat !important;
  background-size: clamp(130px, 18%, 210px) auto !important;
  opacity: 0.88 !important;
  filter: saturate(1.04) contrast(1.01) !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}

.preview-sky.weather-sunny-warm .soft-sun,
.preview-sky.report-arrange-sky.weather-sunny-warm .soft-sun {
  display: none !important;
  opacity: 0 !important;
}

/* Large preview color harmonization for watercolor PNG house and roof assets. */
.house-object .house-model {
  --house-preview-shadow: drop-shadow(0 0.35rem 0.18rem rgba(59, 45, 31, 0.16));
  --house-wall-color: #d2b48c;
  --house-wall-opacity: 1;
  --house-wall-blend: normal;
  --house-wall-tint-image: var(--house-wall-tint-earth);
  --roof-overlay-color: #b85c38;
  --roof-overlay-opacity: 0.34;
  --roof-preview-tint: brightness(1);
  --roof-preview-shadow: drop-shadow(0 0.16rem 0.06rem rgba(72, 39, 16, 0.24))
    drop-shadow(0 0.44rem 0.18rem rgba(66, 49, 31, 0.16));
}

.house-object .house-model.house-color-earth,
.house-object .house-model.house-color-cream,
.house-object .house-model.house-color-ivory {
  --house-wall-color: #d2b48c;
  --house-wall-tint-image: var(--house-wall-tint-earth);
}

.house-object .house-model.house-color-sun,
.house-object .house-model.house-color-yellow {
  --house-wall-color: #ffdd7a;
  --house-wall-tint-image: var(--house-wall-tint-sun);
}

.house-object .house-model.house-color-reflection,
.house-object .house-model.house-color-gray {
  --house-wall-color: #a9a9a9;
  --house-wall-tint-image: var(--house-wall-tint-reflection);
}

.house-object .house-model.house-color-sky,
.house-object .house-model.house-color-blue,
.house-object .house-model.house-color-mint {
  --house-wall-color: #87ceeb;
  --house-wall-tint-image: var(--house-wall-tint-sky);
}

.house-object .house-model.house-color-depth,
.house-object .house-model.house-color-lavender,
.house-object .house-model.house-color-pink {
  --house-wall-color: #9370db;
  --house-wall-tint-image: var(--house-wall-tint-depth);
}

.house-object .house-model.floor-small {
  --house-wall-tint-earth: url('assets/house-wall-tint-small-earth.png');
  --house-wall-tint-sun: url('assets/house-wall-tint-small-sun.png');
  --house-wall-tint-reflection: url('assets/house-wall-tint-small-reflection.png');
  --house-wall-tint-sky: url('assets/house-wall-tint-small-sky.png');
  --house-wall-tint-depth: url('assets/house-wall-tint-small-depth.png');
}

.house-object .house-model.floor-tiny {
  --house-wall-tint-earth: url('assets/house-wall-tint-tiny-earth.png');
  --house-wall-tint-sun: url('assets/house-wall-tint-tiny-sun.png');
  --house-wall-tint-reflection: url('assets/house-wall-tint-tiny-reflection.png');
  --house-wall-tint-sky: url('assets/house-wall-tint-tiny-sky.png');
  --house-wall-tint-depth: url('assets/house-wall-tint-tiny-depth.png');
}

.house-object .house-model.floor-balanced {
  --house-wall-tint-earth: url('assets/house-wall-tint-balanced-earth.png');
  --house-wall-tint-sun: url('assets/house-wall-tint-balanced-sun.png');
  --house-wall-tint-reflection: url('assets/house-wall-tint-balanced-reflection.png');
  --house-wall-tint-sky: url('assets/house-wall-tint-balanced-sky.png');
  --house-wall-tint-depth: url('assets/house-wall-tint-balanced-depth.png');
}

.house-object .house-model.floor-open {
  --house-wall-tint-earth: url('assets/house-wall-tint-open-earth.png');
  --house-wall-tint-sun: url('assets/house-wall-tint-open-sun.png');
  --house-wall-tint-reflection: url('assets/house-wall-tint-open-reflection.png');
  --house-wall-tint-sky: url('assets/house-wall-tint-open-sky.png');
  --house-wall-tint-depth: url('assets/house-wall-tint-open-depth.png');
}

.house-object .house-model.floor-grand {
  --house-wall-tint-earth: url('assets/house-wall-tint-grand-earth.png');
  --house-wall-tint-sun: url('assets/house-wall-tint-grand-sun.png');
  --house-wall-tint-reflection: url('assets/house-wall-tint-grand-reflection.png');
  --house-wall-tint-sky: url('assets/house-wall-tint-grand-sky.png');
  --house-wall-tint-depth: url('assets/house-wall-tint-grand-depth.png');
}

.house-object .house-model.floor-small,
.house-object .house-model.floor-tiny {
  background: none !important;
  filter: none !important;
}

.house-object .house-model.floor-tiny {
  background-image:
    var(--house-wall-tint-image), var(--tiny-cabin-house-image) !important;
  background-position:
    center bottom,
    center bottom !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: contain, contain !important;
  filter: var(--house-preview-shadow) !important;
}

.house-object .house-model.floor-small::before,
.house-object .house-model.floor-tiny::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 4 !important;
  filter: var(--house-preview-shadow) !important;
}

.house-object .house-model.floor-small::before {
  background-image: var(--small-fence-house-image) !important;
}

.house-object .house-model.floor-tiny::before {
  background-image: var(--tiny-cabin-house-image) !important;
}

.house-object .house-model.floor-tiny::before {
  display: none !important;
}

.house-object .house-model.floor-balanced::before,
.house-object .house-model.floor-open::before,
.house-object .house-model.floor-grand::before {
  filter: var(--house-preview-shadow) !important;
}

.house-object .house-model.floor-small::after,
.house-object .house-model.floor-tiny::after,
.house-object .house-model.floor-balanced::after,
.house-object .house-model.floor-open::after,
.house-object .house-model.floor-grand::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 6 !important;
  background-color: transparent !important;
  background-image: var(--house-wall-tint-image) !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: var(--house-wall-opacity) !important;
  mix-blend-mode: var(--house-wall-blend) !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.house-object .house-model.floor-small::after {
  --house-wall-mask-image: var(--small-fence-house-wall-mask);
  left: 50% !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

.house-object .house-model.floor-tiny::after {
  --house-wall-mask-image: var(--tiny-cabin-house-wall-mask);
  left: 50% !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

.house-object .house-model.floor-tiny::after {
  display: none !important;
}

.house-object .house-model.floor-balanced::after {
  --house-wall-mask-image: var(--balanced-house-wall-mask);
  left: 50% !important;
  bottom: 0.95rem !important;
  width: 22rem !important;
  height: 9.55rem !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

.house-object .house-model.floor-open::after {
  --house-wall-mask-image: var(--open-two-floor-house-wall-mask);
  left: 50% !important;
  bottom: 0.88rem !important;
  width: 22.25rem !important;
  height: 9.75rem !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

.house-object .house-model.floor-grand::after {
  --house-wall-mask-image: var(--grand-castle-house-wall-mask);
  left: 50% !important;
  bottom: 0.1rem !important;
  width: 25.45rem !important;
  height: 18.35rem !important;
  transform: translateX(-50%) !important;
  clip-path: none !important;
}

.house-object .house-model.floor-small.house-color-earth::after,
.house-object .house-model.floor-small.house-color-cream::after,
.house-object .house-model.floor-small.house-color-ivory::after {
  background-image: url('assets/house-wall-tint-small-earth.png') !important;
}

.house-object .house-model.floor-small.house-color-sun::after,
.house-object .house-model.floor-small.house-color-yellow::after {
  background-image: url('assets/house-wall-tint-small-sun.png') !important;
}

.house-object .house-model.floor-small.house-color-reflection::after,
.house-object .house-model.floor-small.house-color-gray::after {
  background-image: url('assets/house-wall-tint-small-reflection.png') !important;
}

.house-object .house-model.floor-small.house-color-sky::after,
.house-object .house-model.floor-small.house-color-blue::after,
.house-object .house-model.floor-small.house-color-mint::after {
  background-image: url('assets/house-wall-tint-small-sky.png') !important;
}

.house-object .house-model.floor-small.house-color-depth::after,
.house-object .house-model.floor-small.house-color-lavender::after,
.house-object .house-model.floor-small.house-color-pink::after {
  background-image: url('assets/house-wall-tint-small-depth.png') !important;
}

.house-object .house-model.floor-tiny.house-color-earth::after,
.house-object .house-model.floor-tiny.house-color-cream::after,
.house-object .house-model.floor-tiny.house-color-ivory::after {
  background-image: url('assets/house-wall-tint-tiny-earth.png') !important;
}

.house-object .house-model.floor-tiny.house-color-sun::after,
.house-object .house-model.floor-tiny.house-color-yellow::after {
  background-image: url('assets/house-wall-tint-tiny-sun.png') !important;
}

.house-object .house-model.floor-tiny.house-color-reflection::after,
.house-object .house-model.floor-tiny.house-color-gray::after {
  background-image: url('assets/house-wall-tint-tiny-reflection.png') !important;
}

.house-object .house-model.floor-tiny.house-color-sky::after,
.house-object .house-model.floor-tiny.house-color-blue::after,
.house-object .house-model.floor-tiny.house-color-mint::after {
  background-image: url('assets/house-wall-tint-tiny-sky.png') !important;
}

.house-object .house-model.floor-tiny.house-color-depth::after,
.house-object .house-model.floor-tiny.house-color-lavender::after,
.house-object .house-model.floor-tiny.house-color-pink::after {
  background-image: url('assets/house-wall-tint-tiny-depth.png') !important;
}

.house-object .house-model.floor-balanced.house-color-earth::after,
.house-object .house-model.floor-balanced.house-color-cream::after,
.house-object .house-model.floor-balanced.house-color-ivory::after {
  background-image: url('assets/house-wall-tint-balanced-earth.png') !important;
}

.house-object .house-model.floor-balanced.house-color-sun::after,
.house-object .house-model.floor-balanced.house-color-yellow::after {
  background-image: url('assets/house-wall-tint-balanced-sun.png') !important;
}

.house-object .house-model.floor-balanced.house-color-reflection::after,
.house-object .house-model.floor-balanced.house-color-gray::after {
  background-image: url('assets/house-wall-tint-balanced-reflection.png') !important;
}

.house-object .house-model.floor-balanced.house-color-sky::after,
.house-object .house-model.floor-balanced.house-color-blue::after,
.house-object .house-model.floor-balanced.house-color-mint::after {
  background-image: url('assets/house-wall-tint-balanced-sky.png') !important;
}

.house-object .house-model.floor-balanced.house-color-depth::after,
.house-object .house-model.floor-balanced.house-color-lavender::after,
.house-object .house-model.floor-balanced.house-color-pink::after {
  background-image: url('assets/house-wall-tint-balanced-depth.png') !important;
}

.house-object .house-model.floor-open.house-color-earth::after,
.house-object .house-model.floor-open.house-color-cream::after,
.house-object .house-model.floor-open.house-color-ivory::after {
  background-image: url('assets/house-wall-tint-open-earth.png') !important;
}

.house-object .house-model.floor-open.house-color-sun::after,
.house-object .house-model.floor-open.house-color-yellow::after {
  background-image: url('assets/house-wall-tint-open-sun.png') !important;
}

.house-object .house-model.floor-open.house-color-reflection::after,
.house-object .house-model.floor-open.house-color-gray::after {
  background-image: url('assets/house-wall-tint-open-reflection.png') !important;
}

.house-object .house-model.floor-open.house-color-sky::after,
.house-object .house-model.floor-open.house-color-blue::after,
.house-object .house-model.floor-open.house-color-mint::after {
  background-image: url('assets/house-wall-tint-open-sky.png') !important;
}

.house-object .house-model.floor-open.house-color-depth::after,
.house-object .house-model.floor-open.house-color-lavender::after,
.house-object .house-model.floor-open.house-color-pink::after {
  background-image: url('assets/house-wall-tint-open-depth.png') !important;
}

.house-object .house-model.floor-grand.house-color-earth::after,
.house-object .house-model.floor-grand.house-color-cream::after,
.house-object .house-model.floor-grand.house-color-ivory::after {
  background-image: url('assets/house-wall-tint-grand-earth.png') !important;
}

.house-object .house-model.floor-grand.house-color-sun::after,
.house-object .house-model.floor-grand.house-color-yellow::after {
  background-image: url('assets/house-wall-tint-grand-sun.png') !important;
}

.house-object .house-model.floor-grand.house-color-reflection::after,
.house-object .house-model.floor-grand.house-color-gray::after {
  background-image: url('assets/house-wall-tint-grand-reflection.png') !important;
}

.house-object .house-model.floor-grand.house-color-sky::after,
.house-object .house-model.floor-grand.house-color-blue::after,
.house-object .house-model.floor-grand.house-color-mint::after {
  background-image: url('assets/house-wall-tint-grand-sky.png') !important;
}

.house-object .house-model.floor-grand.house-color-depth::after,
.house-object .house-model.floor-grand.house-color-lavender::after,
.house-object .house-model.floor-grand.house-color-pink::after {
  background-image: url('assets/house-wall-tint-grand-depth.png') !important;
}

.house-object .house-model.roof-color-terracotta,
.house-object .house-model.roof-color-red {
  --roof-overlay-color: #b85c38;
  --roof-overlay-opacity: 0.3;
  --roof-preview-tint: sepia(0.08) saturate(1.05) brightness(1.02);
}

.house-object .house-model.roof-color-sun,
.house-object .house-model.roof-color-yellow {
  --roof-overlay-color: #f2c94c;
  --roof-overlay-opacity: 0.38;
  --roof-preview-tint: sepia(0.28) saturate(1.35) hue-rotate(18deg)
    brightness(1.12);
}

.house-object .house-model.roof-color-stone,
.house-object .house-model.roof-color-gray,
.house-object .house-model.roof-color-white {
  --roof-overlay-color: #7e8790;
  --roof-overlay-opacity: 0.44;
  --roof-preview-tint: grayscale(0.78) saturate(0.62) brightness(0.94);
}

.house-object .house-model.roof-color-clearblue,
.house-object .house-model.roof-color-blue,
.house-object .house-model.roof-color-green {
  --roof-overlay-color: #5fa8dc;
  --roof-overlay-opacity: 0.42;
  --roof-preview-tint: sepia(0.42) saturate(1.65) hue-rotate(165deg)
    brightness(1.06);
}

.house-object .house-model.roof-color-violet,
.house-object .house-model.roof-color-pink {
  --roof-overlay-color: #7e65c7;
  --roof-overlay-opacity: 0.42;
  --roof-preview-tint: sepia(0.45) saturate(1.55) hue-rotate(218deg)
    brightness(0.94);
}

.house-object .house-model .house-roof {
  filter: var(--roof-preview-tint) var(--roof-preview-shadow) !important;
}

.roof-color-terracotta,
.roof-color-red {
  --roof-overlay-color: #b85c38;
  --roof-overlay-opacity: 0.3;
}

.roof-color-sun,
.roof-color-yellow {
  --roof-overlay-color: #f2c94c;
  --roof-overlay-opacity: 0.38;
}

.roof-color-stone,
.roof-color-gray,
.roof-color-white {
  --roof-overlay-color: #7e8790;
  --roof-overlay-opacity: 0.44;
}

.roof-color-clearblue,
.roof-color-blue,
.roof-color-green {
  --roof-overlay-color: #5fa8dc;
  --roof-overlay-opacity: 0.42;
}

.roof-color-violet,
.roof-color-pink {
  --roof-overlay-color: #7e65c7;
  --roof-overlay-opacity: 0.42;
}

.roof-flat {
  --roof-mask-image: var(--flat-tile-roof-image);
}

.roof-tall-triangle {
  --roof-mask-image: var(--tall-triangle-roof-image);
}

.roof-moss-dome {
  --roof-mask-image: var(--moss-dome-roof-image);
}

.roof-attic-window {
  --roof-mask-image: var(--attic-window-roof-image);
}

.roof-asymmetric {
  --roof-mask-image: var(--asymmetric-roof-image);
}

.roof-sample.roof-flat .house-roof::after,
.roof-sample.roof-tall-triangle .house-roof::after,
.roof-sample.roof-moss-dome .house-roof::after,
.roof-sample.roof-attic-window .house-roof::after,
.roof-sample.roof-asymmetric .house-roof::after,
.house-object .house-model.roof-flat .house-roof::after,
.house-object .house-model.roof-tall-triangle .house-roof::after,
.house-object .house-model.roof-moss-dome .house-roof::after,
.house-object .house-model.roof-attic-window .house-roof::after,
.house-object .house-model.roof-asymmetric .house-roof::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 3 !important;
  background: var(--roof-overlay-color, var(--roof-color)) !important;
  opacity: var(--roof-overlay-opacity, 0.34) !important;
  mix-blend-mode: color !important;
  -webkit-mask-image: var(--roof-mask-image) !important;
  mask-image: var(--roof-mask-image) !important;
  -webkit-mask-position: center bottom !important;
  mask-position: center bottom !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* Roof color final pass: use pre-recolored watercolor PNGs instead of a thin overlay. */
.roof-color-terracotta,
.roof-color-red {
  --flat-tile-roof-image: url('assets/roof-flat-terracotta.png');
  --tall-triangle-roof-image: url('assets/roof-tall-terracotta.png');
  --moss-dome-roof-image: url('assets/roof-moss-terracotta.png');
  --attic-window-roof-image: url('assets/roof-attic-terracotta.png');
  --asymmetric-roof-image: url('assets/roof-asymmetric-terracotta.png');
}

.roof-color-sun,
.roof-color-yellow {
  --flat-tile-roof-image: url('assets/roof-flat-sun.png');
  --tall-triangle-roof-image: url('assets/roof-tall-sun.png');
  --moss-dome-roof-image: url('assets/roof-moss-sun.png');
  --attic-window-roof-image: url('assets/roof-attic-sun.png');
  --asymmetric-roof-image: url('assets/roof-asymmetric-sun.png');
}

.roof-color-stone,
.roof-color-gray,
.roof-color-white {
  --flat-tile-roof-image: url('assets/roof-flat-stone.png');
  --tall-triangle-roof-image: url('assets/roof-tall-stone.png');
  --moss-dome-roof-image: url('assets/roof-moss-stone.png');
  --attic-window-roof-image: url('assets/roof-attic-stone.png');
  --asymmetric-roof-image: url('assets/roof-asymmetric-stone.png');
}

.roof-color-clearblue,
.roof-color-blue,
.roof-color-green {
  --flat-tile-roof-image: url('assets/roof-flat-clearblue.png');
  --tall-triangle-roof-image: url('assets/roof-tall-clearblue.png');
  --moss-dome-roof-image: url('assets/roof-moss-clearblue.png');
  --attic-window-roof-image: url('assets/roof-attic-clearblue.png');
  --asymmetric-roof-image: url('assets/roof-asymmetric-clearblue.png');
}

.roof-color-violet,
.roof-color-pink {
  --flat-tile-roof-image: url('assets/roof-flat-violet.png');
  --tall-triangle-roof-image: url('assets/roof-tall-violet.png');
  --moss-dome-roof-image: url('assets/roof-moss-violet.png');
  --attic-window-roof-image: url('assets/roof-attic-violet.png');
  --asymmetric-roof-image: url('assets/roof-asymmetric-violet.png');
}

.house-object .house-model .house-roof {
  filter: var(--roof-preview-shadow) !important;
}

.roof-sample.roof-flat .house-roof::after,
.roof-sample.roof-tall-triangle .house-roof::after,
.roof-sample.roof-moss-dome .house-roof::after,
.roof-sample.roof-attic-window .house-roof::after,
.roof-sample.roof-asymmetric .house-roof::after,
.house-object .house-model.roof-flat .house-roof::after,
.house-object .house-model.roof-tall-triangle .house-roof::after,
.house-object .house-model.roof-moss-dome .house-roof::after,
.house-object .house-model.roof-attic-window .house-roof::after,
.house-object .house-model.roof-asymmetric .house-roof::after {
  display: none !important;
}

/* Fixed preview slots for house windows and doors. */
.window-editor-sections .window-panel-actions,
.door-editor-sections .window-panel-actions {
  display: none !important;
}

.window-card,
.door-card {
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.house-model.fixed-house-slots .window-layer,
.house-model.fixed-house-slots .door-layer,
.house-model.fixed-house-slots .placed-window,
.house-model.fixed-house-slots .placed-door {
  display: block !important;
  pointer-events: none !important;
}

.house-model.fixed-house-slots .window-layer {
  z-index: 9 !important;
}

.house-model.fixed-house-slots .door-layer {
  z-index: 10 !important;
}

.house-model.fixed-house-slots .placed-window {
  cursor: default !important;
  transform: translate(-50%, -50%) scale(var(--slot-scale, 1)) !important;
  transform-origin: center center !important;
}

.house-model.fixed-house-slots .placed-door {
  cursor: default !important;
  transform: translate(-50%, -100%) scale(var(--slot-scale, 1)) !important;
  transform-origin: center bottom !important;
}

/* Watercolor panoramic window asset. */
:root {
  --panoramic-window-image: url('assets/panoramic-window-watercolor.png');
}

.window-sample.window-panoramic .house-window,
.placed-window.window-panoramic .house-window {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--panoramic-window-image) center / contain
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.window-sample.window-panoramic .house-window {
  --window-width: 64px;
  --window-height: 86px;
}

.placed-window.window-panoramic .house-window {
  --window-width: 49px;
  --window-height: 66px;
}

.window-sample.window-panoramic .house-window::before,
.window-sample.window-panoramic .house-window::after,
.placed-window.window-panoramic .house-window::before,
.placed-window.window-panoramic .house-window::after {
  display: none !important;
}

/* Watercolor arched window asset. */
:root {
  --arch-window-image: url('assets/arch-window-watercolor.png');
}

.window-sample.window-arch-fairy .house-window,
.placed-window.window-arch-fairy .house-window {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--arch-window-image) center / contain no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.window-sample.window-arch-fairy .house-window {
  --window-width: 68px;
  --window-height: 88px;
}

.placed-window.window-arch-fairy .house-window {
  --window-width: 51px;
  --window-height: 68px;
}

.window-sample.window-arch-fairy .house-window::before,
.window-sample.window-arch-fairy .house-window::after,
.placed-window.window-arch-fairy .house-window::before,
.placed-window.window-arch-fairy .house-window::after {
  display: none !important;
}

/* Watercolor decorative window asset. */
:root {
  --decorative-window-image: url('assets/decorative-window-watercolor.png');
}

.window-sample.window-decorative .house-window,
.placed-window.window-decorative .house-window {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--decorative-window-image) center / contain
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.window-sample.window-decorative .house-window {
  --window-width: 108px;
  --window-height: 94px;
}

.placed-window.window-decorative .house-window {
  --window-width: 96px;
  --window-height: 86px;
}

.window-sample.window-decorative .house-window::before,
.window-sample.window-decorative .house-window::after,
.placed-window.window-decorative .house-window::before,
.placed-window.window-decorative .house-window::after {
  display: none !important;
}

/* Watercolor grid window asset. */
:root {
  --grid-window-image: url('assets/grid-window-watercolor.png');
}

.window-sample.window-grid-dense .house-window,
.placed-window.window-grid-dense .house-window {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--grid-window-image) center / contain no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.window-sample.window-grid-dense .house-window {
  --window-width: 84px;
  --window-height: 116px;
}

.placed-window.window-grid-dense .house-window {
  --window-width: 72px;
  --window-height: 100px;
}

.window-sample.window-grid-dense .house-window::before,
.window-sample.window-grid-dense .house-window::after,
.placed-window.window-grid-dense .house-window::before,
.placed-window.window-grid-dense .house-window::after {
  display: none !important;
}

/* Watercolor tiny side window asset. */
:root {
  --tiny-window-image: url('assets/tiny-window-watercolor.png');
}

.window-sample.window-tiny-high .house-window,
.placed-window.window-tiny-high .house-window {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--tiny-window-image) center / contain no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.window-sample.window-tiny-high .house-window {
  --window-width: 44px;
  --window-height: 94px;
}

.placed-window.window-tiny-high .house-window {
  --window-width: 34px;
  --window-height: 84px;
}

.window-sample.window-tiny-high .house-window::before,
.window-sample.window-tiny-high .house-window::after,
.placed-window.window-tiny-high .house-window::before,
.placed-window.window-tiny-high .house-window::after {
  display: none !important;
}

/* Watercolor window glass tint masks. */
:root {
  --panoramic-window-glass-mask: url('assets/panoramic-window-glass-mask.png');
  --arch-window-glass-mask: url('assets/arch-window-glass-mask.png');
  --decorative-window-glass-mask: url('assets/decorative-window-glass-mask.png');
  --grid-window-glass-mask: url('assets/grid-window-glass-mask.png');
  --tiny-window-glass-mask: url('assets/tiny-window-glass-mask.png');
}

.window-sample.window-panoramic .house-window,
.placed-window.window-panoramic .house-window {
  --window-glass-mask: var(--panoramic-window-glass-mask);
}

.window-sample.window-arch-fairy .house-window,
.placed-window.window-arch-fairy .house-window {
  --window-glass-mask: var(--arch-window-glass-mask);
}

.window-sample.window-decorative .house-window,
.placed-window.window-decorative .house-window {
  --window-glass-mask: var(--decorative-window-glass-mask);
}

.window-sample.window-grid-dense .house-window,
.placed-window.window-grid-dense .house-window {
  --window-glass-mask: var(--grid-window-glass-mask);
}

.window-sample.window-tiny-high .house-window,
.placed-window.window-tiny-high .house-window {
  --window-glass-mask: var(--tiny-window-glass-mask);
}

.window-sample.window-panoramic .house-window::after,
.window-sample.window-arch-fairy .house-window::after,
.window-sample.window-decorative .house-window::after,
.window-sample.window-grid-dense .house-window::after,
.window-sample.window-tiny-high .house-window::after,
.placed-window.window-panoramic .house-window::after,
.placed-window.window-arch-fairy .house-window::after,
.placed-window.window-decorative .house-window::after,
.placed-window.window-grid-dense .house-window::after,
.placed-window.window-tiny-high .house-window::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--window-glass-color, rgba(105, 196, 231, 0.62)) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  mix-blend-mode: multiply !important;
  -webkit-mask-image: var(--window-glass-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--window-glass-mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

/* Use pre-tinted watercolor window artwork so glass color applies reliably. */
.window-sample.window-color-blue,
.placed-window.window-color-blue {
  --panoramic-window-image: url('assets/panoramic-window-watercolor-blue.png');
  --arch-window-image: url('assets/arch-window-watercolor-blue.png');
  --decorative-window-image: url('assets/decorative-window-watercolor-blue.png');
  --grid-window-image: url('assets/grid-window-watercolor-blue.png');
  --tiny-window-image: url('assets/tiny-window-watercolor-blue.png');
}

.window-sample.window-color-pink,
.placed-window.window-color-pink {
  --panoramic-window-image: url('assets/panoramic-window-watercolor-pink.png');
  --arch-window-image: url('assets/arch-window-watercolor-pink.png');
  --decorative-window-image: url('assets/decorative-window-watercolor-pink.png');
  --grid-window-image: url('assets/grid-window-watercolor-pink.png');
  --tiny-window-image: url('assets/tiny-window-watercolor-pink.png');
}

.window-sample.window-color-mint,
.placed-window.window-color-mint {
  --panoramic-window-image: url('assets/panoramic-window-watercolor-mint.png');
  --arch-window-image: url('assets/arch-window-watercolor-mint.png');
  --decorative-window-image: url('assets/decorative-window-watercolor-mint.png');
  --grid-window-image: url('assets/grid-window-watercolor-mint.png');
  --tiny-window-image: url('assets/tiny-window-watercolor-mint.png');
}

.window-sample.window-color-yellow,
.placed-window.window-color-yellow {
  --panoramic-window-image: url('assets/panoramic-window-watercolor-yellow.png');
  --arch-window-image: url('assets/arch-window-watercolor-yellow.png');
  --decorative-window-image: url('assets/decorative-window-watercolor-yellow.png');
  --grid-window-image: url('assets/grid-window-watercolor-yellow.png');
  --tiny-window-image: url('assets/tiny-window-watercolor-yellow.png');
}

.window-sample.window-color-violet,
.placed-window.window-color-violet {
  --panoramic-window-image: url('assets/panoramic-window-watercolor-violet.png');
  --arch-window-image: url('assets/arch-window-watercolor-violet.png');
  --decorative-window-image: url('assets/decorative-window-watercolor-violet.png');
  --grid-window-image: url('assets/grid-window-watercolor-violet.png');
  --tiny-window-image: url('assets/tiny-window-watercolor-violet.png');
}

.window-sample.window-color-gray,
.placed-window.window-color-gray {
  --panoramic-window-image: url('assets/panoramic-window-watercolor-gray.png');
  --arch-window-image: url('assets/arch-window-watercolor-gray.png');
  --decorative-window-image: url('assets/decorative-window-watercolor-gray.png');
  --grid-window-image: url('assets/grid-window-watercolor-gray.png');
  --tiny-window-image: url('assets/tiny-window-watercolor-gray.png');
}

.window-sample.window-panoramic .house-window::after,
.window-sample.window-arch-fairy .house-window::after,
.window-sample.window-decorative .house-window::after,
.window-sample.window-grid-dense .house-window::after,
.window-sample.window-tiny-high .house-window::after,
.placed-window.window-panoramic .house-window::after,
.placed-window.window-arch-fairy .house-window::after,
.placed-window.window-decorative .house-window::after,
.placed-window.window-grid-dense .house-window::after,
.placed-window.window-tiny-high .house-window::after {
  display: none !important;
}

/* Direct color artwork mapping for watercolor windows. */
.window-sample.window-panoramic.window-color-blue .house-window,
.placed-window.window-panoramic.window-color-blue .house-window {
  background: transparent url('assets/panoramic-window-watercolor-blue.png')
    center / contain no-repeat !important;
}

.window-sample.window-panoramic.window-color-pink .house-window,
.placed-window.window-panoramic.window-color-pink .house-window {
  background: transparent url('assets/panoramic-window-watercolor-pink.png')
    center / contain no-repeat !important;
}

.window-sample.window-panoramic.window-color-mint .house-window,
.placed-window.window-panoramic.window-color-mint .house-window {
  background: transparent url('assets/panoramic-window-watercolor-mint.png')
    center / contain no-repeat !important;
}

.window-sample.window-panoramic.window-color-yellow .house-window,
.placed-window.window-panoramic.window-color-yellow .house-window {
  background: transparent url('assets/panoramic-window-watercolor-yellow.png')
    center / contain no-repeat !important;
}

.window-sample.window-panoramic.window-color-violet .house-window,
.placed-window.window-panoramic.window-color-violet .house-window {
  background: transparent url('assets/panoramic-window-watercolor-violet.png')
    center / contain no-repeat !important;
}

.window-sample.window-panoramic.window-color-gray .house-window,
.placed-window.window-panoramic.window-color-gray .house-window {
  background: transparent url('assets/panoramic-window-watercolor-gray.png')
    center / contain no-repeat !important;
}

.window-sample.window-arch-fairy.window-color-blue .house-window,
.placed-window.window-arch-fairy.window-color-blue .house-window {
  background: transparent url('assets/arch-window-watercolor-blue.png') center /
    contain no-repeat !important;
}

.window-sample.window-arch-fairy.window-color-pink .house-window,
.placed-window.window-arch-fairy.window-color-pink .house-window {
  background: transparent url('assets/arch-window-watercolor-pink.png') center /
    contain no-repeat !important;
}

.window-sample.window-arch-fairy.window-color-mint .house-window,
.placed-window.window-arch-fairy.window-color-mint .house-window {
  background: transparent url('assets/arch-window-watercolor-mint.png') center /
    contain no-repeat !important;
}

.window-sample.window-arch-fairy.window-color-yellow .house-window,
.placed-window.window-arch-fairy.window-color-yellow .house-window {
  background: transparent url('assets/arch-window-watercolor-yellow.png')
    center / contain no-repeat !important;
}

.window-sample.window-arch-fairy.window-color-violet .house-window,
.placed-window.window-arch-fairy.window-color-violet .house-window {
  background: transparent url('assets/arch-window-watercolor-violet.png')
    center / contain no-repeat !important;
}

.window-sample.window-arch-fairy.window-color-gray .house-window,
.placed-window.window-arch-fairy.window-color-gray .house-window {
  background: transparent url('assets/arch-window-watercolor-gray.png') center /
    contain no-repeat !important;
}

.window-sample.window-decorative.window-color-blue .house-window,
.placed-window.window-decorative.window-color-blue .house-window {
  background: transparent url('assets/decorative-window-watercolor-blue.png')
    center / contain no-repeat !important;
}

.window-sample.window-decorative.window-color-pink .house-window,
.placed-window.window-decorative.window-color-pink .house-window {
  background: transparent url('assets/decorative-window-watercolor-pink.png')
    center / contain no-repeat !important;
}

.window-sample.window-decorative.window-color-mint .house-window,
.placed-window.window-decorative.window-color-mint .house-window {
  background: transparent url('assets/decorative-window-watercolor-mint.png')
    center / contain no-repeat !important;
}

.window-sample.window-decorative.window-color-yellow .house-window,
.placed-window.window-decorative.window-color-yellow .house-window {
  background: transparent url('assets/decorative-window-watercolor-yellow.png')
    center / contain no-repeat !important;
}

.window-sample.window-decorative.window-color-violet .house-window,
.placed-window.window-decorative.window-color-violet .house-window {
  background: transparent url('assets/decorative-window-watercolor-violet.png')
    center / contain no-repeat !important;
}

.window-sample.window-decorative.window-color-gray .house-window,
.placed-window.window-decorative.window-color-gray .house-window {
  background: transparent url('assets/decorative-window-watercolor-gray.png')
    center / contain no-repeat !important;
}

.window-sample.window-grid-dense.window-color-blue .house-window,
.placed-window.window-grid-dense.window-color-blue .house-window {
  background: transparent url('assets/grid-window-watercolor-blue.png') center /
    contain no-repeat !important;
}

.window-sample.window-grid-dense.window-color-pink .house-window,
.placed-window.window-grid-dense.window-color-pink .house-window {
  background: transparent url('assets/grid-window-watercolor-pink.png') center /
    contain no-repeat !important;
}

.window-sample.window-grid-dense.window-color-mint .house-window,
.placed-window.window-grid-dense.window-color-mint .house-window {
  background: transparent url('assets/grid-window-watercolor-mint.png') center /
    contain no-repeat !important;
}

.window-sample.window-grid-dense.window-color-yellow .house-window,
.placed-window.window-grid-dense.window-color-yellow .house-window {
  background: transparent url('assets/grid-window-watercolor-yellow.png')
    center / contain no-repeat !important;
}

.window-sample.window-grid-dense.window-color-violet .house-window,
.placed-window.window-grid-dense.window-color-violet .house-window {
  background: transparent url('assets/grid-window-watercolor-violet.png')
    center / contain no-repeat !important;
}

.window-sample.window-grid-dense.window-color-gray .house-window,
.placed-window.window-grid-dense.window-color-gray .house-window {
  background: transparent url('assets/grid-window-watercolor-gray.png') center /
    contain no-repeat !important;
}

.window-sample.window-tiny-high.window-color-blue .house-window,
.placed-window.window-tiny-high.window-color-blue .house-window {
  background: transparent url('assets/tiny-window-watercolor-blue.png') center /
    contain no-repeat !important;
}

.window-sample.window-tiny-high.window-color-pink .house-window,
.placed-window.window-tiny-high.window-color-pink .house-window {
  background: transparent url('assets/tiny-window-watercolor-pink.png') center /
    contain no-repeat !important;
}

.window-sample.window-tiny-high.window-color-mint .house-window,
.placed-window.window-tiny-high.window-color-mint .house-window {
  background: transparent url('assets/tiny-window-watercolor-mint.png') center /
    contain no-repeat !important;
}

.window-sample.window-tiny-high.window-color-yellow .house-window,
.placed-window.window-tiny-high.window-color-yellow .house-window {
  background: transparent url('assets/tiny-window-watercolor-yellow.png')
    center / contain no-repeat !important;
}

.window-sample.window-tiny-high.window-color-violet .house-window,
.placed-window.window-tiny-high.window-color-violet .house-window {
  background: transparent url('assets/tiny-window-watercolor-violet.png')
    center / contain no-repeat !important;
}

.window-sample.window-tiny-high.window-color-gray .house-window,
.placed-window.window-tiny-high.window-color-gray .house-window {
  background: transparent url('assets/tiny-window-watercolor-gray.png') center /
    contain no-repeat !important;
}

/* Watercolor glass door asset. */
:root {
  --glass-door-image: url('assets/glass-door-watercolor.png');
}

.door-sample.door-glass .house-door,
.placed-door.door-glass .house-door {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--glass-door-image) center bottom / contain
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.door-sample.door-glass .house-door {
  --door-width: 68px;
  --door-height: 98px;
}

.placed-door.door-glass .house-door {
  --door-width: 60px;
  --door-height: 92px;
}

.door-sample.door-glass .house-door::before,
.door-sample.door-glass .house-door::after,
.placed-door.door-glass .house-door::before,
.placed-door.door-glass .house-door::after {
  display: none !important;
}

/* Watercolor closed door asset. */
:root {
  --locked-door-image: url('assets/padlock-door-watercolor.png');
}

.door-sample.door-locked .house-door,
.placed-door.door-locked .house-door {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--locked-door-image) center bottom / contain
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.door-sample.door-locked .house-door {
  --door-width: 58px;
  --door-height: 98px;
}

.placed-door.door-locked .house-door {
  --door-width: 50px;
  --door-height: 94px;
}

.door-sample.door-locked .house-door::before,
.door-sample.door-locked .house-door::after,
.placed-door.door-locked .house-door::before,
.placed-door.door-locked .house-door::after {
  display: none !important;
}

/* Watercolor small door asset. */
:root {
  --small-door-image: url('assets/small-door-watercolor.png');
}

.door-sample.door-small .house-door,
.placed-door.door-small .house-door {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--small-door-image) center bottom / contain
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.door-sample.door-small .house-door {
  --door-width: 54px;
  --door-height: 98px;
}

.placed-door.door-small .house-door {
  --door-width: 40px;
  --door-height: 82px;
}

.door-sample.door-small .house-door::before,
.door-sample.door-small .house-door::after,
.placed-door.door-small .house-door::before,
.placed-door.door-small .house-door::after {
  display: none !important;
}

/* Watercolor open door asset. */
:root {
  --open-door-image: url('assets/open-door-watercolor.png');
}

.door-sample.door-open .house-door,
.placed-door.door-open .house-door {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--open-door-image) center bottom / contain
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.door-sample.door-open .house-door {
  --door-width: 68px;
  --door-height: 98px;
}

.placed-door.door-open .house-door {
  --door-width: 56px;
  --door-height: 92px;
}

.door-sample.door-open .house-door::before,
.door-sample.door-open .house-door::after,
.placed-door.door-open .house-door::before,
.placed-door.door-open .house-door::after {
  display: none !important;
}

/* Watercolor ornate closed door asset. */
:root {
  --round-door-image: url('assets/closed-door-watercolor.png');
}

.door-sample.door-round .house-door,
.placed-door.door-round .house-door {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent var(--round-door-image) center bottom / contain
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.door-sample.door-round .house-door {
  --door-width: 58px;
  --door-height: 98px;
}

.placed-door.door-round .house-door {
  --door-width: 50px;
  --door-height: 94px;
}

.door-sample.door-round .house-door::before,
.door-sample.door-round .house-door::after,
.placed-door.door-round .house-door::before,
.placed-door.door-round .house-door::after {
  display: none !important;
}

/* Door color final pass: swap to pre-recolored watercolor PNGs like roofs. */
.door-color-brown {
  --glass-door-image: url('assets/glass-door-watercolor-brown.png');
  --locked-door-image: url('assets/padlock-door-watercolor-brown.png');
  --small-door-image: url('assets/small-door-watercolor-brown.png');
  --open-door-image: url('assets/open-door-watercolor-brown.png');
  --round-door-image: url('assets/closed-door-watercolor-brown.png');
}

.door-color-pink {
  --glass-door-image: url('assets/glass-door-watercolor-pink.png');
  --locked-door-image: url('assets/padlock-door-watercolor-pink.png');
  --small-door-image: url('assets/small-door-watercolor-pink.png');
  --open-door-image: url('assets/open-door-watercolor-pink.png');
  --round-door-image: url('assets/closed-door-watercolor-pink.png');
}

.door-color-blue {
  --glass-door-image: url('assets/glass-door-watercolor-blue.png');
  --locked-door-image: url('assets/padlock-door-watercolor-blue.png');
  --small-door-image: url('assets/small-door-watercolor-blue.png');
  --open-door-image: url('assets/open-door-watercolor-blue.png');
  --round-door-image: url('assets/closed-door-watercolor-blue.png');
}

.door-color-green {
  --glass-door-image: url('assets/glass-door-watercolor-green.png');
  --locked-door-image: url('assets/padlock-door-watercolor-green.png');
  --small-door-image: url('assets/small-door-watercolor-green.png');
  --open-door-image: url('assets/open-door-watercolor-green.png');
  --round-door-image: url('assets/closed-door-watercolor-green.png');
}

.door-color-yellow {
  --glass-door-image: url('assets/glass-door-watercolor-yellow.png');
  --locked-door-image: url('assets/padlock-door-watercolor-yellow.png');
  --small-door-image: url('assets/small-door-watercolor-yellow.png');
  --open-door-image: url('assets/open-door-watercolor-yellow.png');
  --round-door-image: url('assets/closed-door-watercolor-yellow.png');
}

.door-color-purple {
  --glass-door-image: url('assets/glass-door-watercolor-purple.png');
  --locked-door-image: url('assets/padlock-door-watercolor-purple.png');
  --small-door-image: url('assets/small-door-watercolor-purple.png');
  --open-door-image: url('assets/open-door-watercolor-purple.png');
  --round-door-image: url('assets/closed-door-watercolor-purple.png');
}

.door-color-white {
  --glass-door-image: url('assets/glass-door-watercolor-white.png');
  --locked-door-image: url('assets/padlock-door-watercolor-white.png');
  --small-door-image: url('assets/small-door-watercolor-white.png');
  --open-door-image: url('assets/open-door-watercolor-white.png');
  --round-door-image: url('assets/closed-door-watercolor-white.png');
}

.door-color-dark {
  --glass-door-image: url('assets/glass-door-watercolor-dark.png');
  --locked-door-image: url('assets/padlock-door-watercolor-dark.png');
  --small-door-image: url('assets/small-door-watercolor-dark.png');
  --open-door-image: url('assets/open-door-watercolor-dark.png');
  --round-door-image: url('assets/closed-door-watercolor-dark.png');
}

/* Keep fixed window/door slots visible in the large house preview. */
.house-object .house-model.fixed-house-slots .window-layer,
.house-object .house-model.fixed-house-slots .door-layer,
.house-object .house-model.fixed-house-slots .placed-window,
.house-object .house-model.fixed-house-slots .placed-door,
.house-object .house-model.fixed-house-slots .house-window,
.house-object .house-model.fixed-house-slots .house-door {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.house-object .house-model.fixed-house-slots .window-layer {
  z-index: 12 !important;
}

.house-object .house-model.fixed-house-slots .door-layer {
  z-index: 13 !important;
}

/* Grand castle preview: keep the glass door proportionate to the castle wall. */
.house-object
  .house-model.floor-grand.fixed-house-slots
  .placed-door.door-glass
  .house-door {
  --door-width: 50px;
  --door-height: 82px;
}

/* Wide two-floor house preview: keep the glass door tucked into the lower wall. */
.house-object
  .house-model.floor-open.fixed-house-slots
  .placed-door.door-glass
  .house-door {
  --door-width: 48px;
  --door-height: 78px;
}

/* Balanced sturdy house preview: enlarge the three non-glass, non-small doors. */
.house-object
  .house-model.floor-balanced.fixed-house-slots
  .placed-door.door-round
  .house-door,
.house-object
  .house-model.floor-balanced.fixed-house-slots
  .placed-door.door-locked
  .house-door {
  --door-width: 57px;
  --door-height: 106px;
}

.house-object
  .house-model.floor-balanced.fixed-house-slots
  .placed-door.door-open
  .house-door {
  --door-width: 64px;
  --door-height: 104px;
}

/* Tiny cabin and cozy fenced house preview: keep the glass door modest. */
.house-object
  .house-model.floor-tiny.fixed-house-slots
  .placed-door.door-glass
  .house-door {
  --door-width: 52px;
  --door-height: 84px;
}

.house-object
  .house-model.floor-small.fixed-house-slots
  .placed-door.door-glass
  .house-door {
  --door-width: 54px;
  --door-height: 88px;
}

/* Cozy fenced house preview: settle the open door onto the ground. */
.house-object
  .house-model.floor-small.fixed-house-slots
  .placed-door.door-open {
  transform: translate(-50%, calc(-100% + 4px)) scale(var(--slot-scale, 1)) !important;
  transform-origin: center bottom !important;
}

/* Cozy fenced house preview: make the locked door a touch smaller and lower. */
.house-object
  .house-model.floor-small.fixed-house-slots
  .placed-door.door-locked {
  transform: translate(-50%, calc(-100% + 2px)) scale(var(--slot-scale, 1)) !important;
  transform-origin: center bottom !important;
}

.house-object
  .house-model.floor-small.fixed-house-slots
  .placed-door.door-locked
  .house-door {
  --door-width: 46px;
  --door-height: 86px;
}

/* Watercolor round face asset. */
:root {
  --round-face-image: url('assets/avatar/source-png/face/32_avatar_front_face_base_round.png');
}

.face-shape-sample.face-round .face-shape-outline {
  width: 98px;
  height: 108px;
  border-radius: 0 !important;
  background: transparent var(--round-face-image) center center / 600% auto
    no-repeat !important;
  filter: drop-shadow(0 8px 8px rgba(93, 67, 38, 0.18));
}

.face-shape-sample.face-round .face-shape-outline::after {
  display: none !important;
}

.avatar-model.face-round .avatar-face {
  width: 166px;
  height: 205px;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
  background: transparent var(--round-face-image) center center / 600% auto
    no-repeat !important;
  box-shadow: none !important;
}

.avatar-model.face-round .avatar-face > .avatar-ear {
  display: none !important;
}

.full-body-avatar.face-round .avatar-face {
  top: calc(var(--face-top) - 11px);
}

.hair-style-sample.face-round .avatar-face {
  top: 40px;
}

/* Watercolor angular face asset. */
:root {
  --square-face-image: url('assets/avatar/source-png/face/square_face.png');
}

.face-shape-sample.face-square .face-shape-outline {
  width: 88px;
  height: 98px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--square-face-image) center center / 600% auto
    no-repeat !important;
  filter: drop-shadow(0 8px 8px rgba(93, 67, 38, 0.18));
}

.face-shape-sample.face-square .face-shape-outline::after {
  display: none !important;
}

.avatar-model.face-square .avatar-face {
  width: 150px;
  height: 187px;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
  background: transparent var(--square-face-image) center center / 600% auto
    no-repeat !important;
  box-shadow: none !important;
}

.avatar-model.face-square .avatar-face > .avatar-ear {
  display: none !important;
}

.full-body-avatar.face-square .avatar-face {
  top: calc(var(--face-top) - 9px);
}

.hair-style-sample.face-square .avatar-face {
  top: 43px;
}

/* Watercolor inverted-triangle face asset. */
:root {
  --triangle-face-image: url('assets/avatar/source-png/face/32_avatar_front_face_base_heart.png');
}

.face-shape-sample.face-triangle .face-shape-outline {
  width: 96px;
  height: 108px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--triangle-face-image) center center / 600% auto
    no-repeat !important;
  filter: drop-shadow(0 8px 8px rgba(93, 67, 38, 0.18));
}

.face-shape-sample.face-triangle .face-shape-outline::after {
  display: none !important;
}

.avatar-model.face-triangle .avatar-face {
  width: 160px;
  height: 205px;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
  background: transparent var(--triangle-face-image) center center / 600% auto
    no-repeat !important;
  box-shadow: none !important;
}

.avatar-model.face-triangle .avatar-face > .avatar-ear {
  display: none !important;
}

.full-body-avatar.face-triangle .avatar-face {
  top: calc(var(--face-top) - 10px);
}

.hair-style-sample.face-triangle .avatar-face {
  top: 41px;
}

/* Watercolor oval face asset. */
:root {
  --oval-face-image: url('assets/avatar/source-png/face/oval_face.png');
}

.face-shape-sample.face-oval .face-shape-outline {
  width: 88px;
  height: 112px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--oval-face-image) center center / 600% auto
    no-repeat !important;
  filter: drop-shadow(0 8px 8px rgba(93, 67, 38, 0.18));
}

.face-shape-sample.face-oval .face-shape-outline::after {
  display: none !important;
}

.avatar-model.face-oval .avatar-face {
  width: 148px;
  height: 210px;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
  background: transparent var(--oval-face-image) center center / 600% auto
    no-repeat !important;
  box-shadow: none !important;
}

.avatar-model.face-oval .avatar-face > .avatar-ear {
  display: none !important;
}

.full-body-avatar.face-oval .avatar-face {
  top: calc(var(--face-top) - 12px);
}

.hair-style-sample.face-oval .avatar-face {
  top: 39px;
}

/* Watercolor slim face asset. */
:root {
  --slim-face-image: url('assets/avatar/source-png/face/32_avatar_front_face_base_long.png');
}

.face-shape-sample.face-slim .face-shape-outline {
  width: 98px;
  height: 139px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--slim-face-image) center center / 600% auto
    no-repeat !important;
  filter: drop-shadow(0 8px 8px rgba(93, 67, 38, 0.18));
  transform: translateY(-12px);
}

.face-shape-sample.face-slim .face-shape-outline::after {
  display: none !important;
}

.avatar-model.face-slim .avatar-face {
  width: 138px;
  height: 216px;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
  background: transparent var(--slim-face-image) center center / 600% auto
    no-repeat !important;
  box-shadow: none !important;
}

.avatar-model.face-slim .avatar-face > .avatar-ear {
  display: none !important;
}

.full-body-avatar.face-slim .avatar-face {
  top: calc(var(--face-top) - 13px);
}

.hair-style-sample.face-slim .avatar-face {
  top: 38px;
}

/* Large preview face bases: make all watercolor face shapes 10% larger only in the main preview. */
.preview-scene .full-body-avatar.face-round .avatar-face {
  width: 183px;
  height: 226px;
  top: calc(var(--face-top) - 17px);
}

.preview-scene .full-body-avatar.face-square .avatar-face {
  width: 182px;
  height: 227px;
  top: calc(var(--face-top) - 20px);
}

.preview-scene .full-body-avatar.face-triangle .avatar-face {
  width: 194px;
  height: 249px;
  top: calc(var(--face-top) - 23px);
}

.preview-scene .full-body-avatar.face-oval .avatar-face {
  width: 196px;
  height: 277px;
  top: calc(var(--face-top) - 41px);
}

.preview-scene .full-body-avatar.face-slim .avatar-face {
  width: 233px;
  height: 324px;
  top: calc(var(--face-top) - 48px);
}

/* Watercolor neat hair 1 asset. */
:root {
  --hair-neat-male-short-image: url('assets/avatar/source-png/hair/hair_neat_1.png?v=20260627-hair1-layer-v2');
}

.hair-neat-male-short .avatar-hair {
  width: 246px;
  height: 236px;
  top: 10px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--hair-neat-male-short-image) center 42% / 520%
    auto no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 8;
}

.hair-neat-male-short .avatar-hair::before,
.hair-neat-male-short .avatar-hair::after,
.hair-neat-male-short .avatar-face::before,
.hair-neat-male-short .avatar-face::after {
  display: none !important;
}

.option-visual .hair-style-sample.hair-neat-male-short .avatar-hair,
.hair-style-sample.hair-neat-male-short .avatar-hair {
  width: 238px;
  height: 228px;
  top: -16px;
  background-size: 520% auto !important;
  background-position: center 42% !important;
}

.preview-scene .full-body-avatar.hair-neat-male-short .avatar-hair {
  width: 438px;
  height: 418px;
  top: calc(var(--hair-top) - 82px);
  background-size: 500% auto !important;
  background-position: center 42% !important;
  transform: translateX(-50%) scale(var(--head-scale));
  transform-origin: center top;
  z-index: 8;
}

/* Watercolor neat hair 2 asset. */
:root {
  --hair-neat-bob-image: url('assets/avatar/source-png/hair/hair_neat_2.png?v=20260627-hair2-layer');
}

.hair-neat-bob .avatar-hair {
  width: 246px;
  height: 236px;
  top: 8px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--hair-neat-bob-image) center center / 450% auto
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 8;
}

.hair-neat-bob .avatar-hair::before,
.hair-neat-bob .avatar-hair::after,
.hair-neat-bob .avatar-face::before,
.hair-neat-bob .avatar-face::after {
  display: none !important;
}

.option-visual .hair-style-sample.hair-neat-bob .avatar-hair,
.hair-style-sample.hair-neat-bob .avatar-hair {
  width: 238px;
  height: 228px;
  top: -16px;
  background-size: 450% auto !important;
  background-position: center center !important;
}

.preview-scene .full-body-avatar.hair-neat-bob .avatar-hair {
  width: 438px;
  height: 418px;
  top: calc(var(--hair-top) - 80px);
  background-size: 450% auto !important;
  background-position: center center !important;
  transform: translateX(-50%) scale(var(--head-scale));
  transform-origin: center top;
  z-index: 8;
}

/* Watercolor neat hair 3 asset. */
:root {
  --hair-neat-long-image: url('assets/avatar/source-png/hair/hair_neat_3.png?v=20260627-hair3-layer');
}

.hair-neat-long .avatar-hair {
  width: 246px;
  height: 236px;
  top: 8px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--hair-neat-long-image) center center / 450% auto
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 8;
}

.hair-neat-long .avatar-hair::before,
.hair-neat-long .avatar-hair::after,
.hair-neat-long .avatar-face::before,
.hair-neat-long .avatar-face::after {
  display: none !important;
}

.option-visual .hair-style-sample.hair-neat-long .avatar-hair,
.hair-style-sample.hair-neat-long .avatar-hair {
  width: 238px;
  height: 228px;
  top: -16px;
  background-size: 450% auto !important;
  background-position: center center !important;
}

.preview-scene .full-body-avatar.hair-neat-long .avatar-hair {
  width: 438px;
  height: 418px;
  top: calc(var(--hair-top) - 80px);
  background-size: 450% auto !important;
  background-position: center center !important;
  transform: translateX(-50%) scale(var(--head-scale));
  transform-origin: center top;
  z-index: 8;
}

/* Watercolor neat hair 4 asset. */
:root {
  --hair-neat-wave-long-image: url('assets/avatar/source-png/hair/hair_neat_4.png?v=20260627-hair4-layer-v2');
}

.hair-neat-wave-long .avatar-hair {
  width: 246px;
  height: 236px;
  top: 8px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--hair-neat-wave-long-image) center center / 450%
    auto no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 8;
}

.hair-neat-wave-long .avatar-hair::before,
.hair-neat-wave-long .avatar-hair::after,
.hair-neat-wave-long .avatar-face::before,
.hair-neat-wave-long .avatar-face::after {
  display: none !important;
}

.option-visual .hair-style-sample.hair-neat-wave-long .avatar-hair,
.hair-style-sample.hair-neat-wave-long .avatar-hair {
  width: 238px;
  height: 228px;
  top: -16px;
  background-size: 450% auto !important;
  background-position: center center !important;
}

.preview-scene .full-body-avatar.hair-neat-wave-long .avatar-hair {
  width: 438px;
  height: 418px;
  top: calc(var(--hair-top) - 80px);
  background-size: 450% auto !important;
  background-position: center center !important;
  transform: translateX(-50%) scale(var(--head-scale));
  transform-origin: center top;
  z-index: 8;
}

/* Watercolor wave hair 1 asset. */
:root {
  --hair-wave-short-image: url('assets/avatar/source-png/hair/hair_wave_1.png?v=20260627-wave1-layer');
}

.hair-wave-short .avatar-hair {
  width: 246px;
  height: 236px;
  top: 8px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--hair-wave-short-image) center center / 450% auto
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 8;
}

.hair-wave-short .avatar-hair::before,
.hair-wave-short .avatar-hair::after,
.hair-wave-short .avatar-face::before,
.hair-wave-short .avatar-face::after {
  display: none !important;
}

.option-visual .hair-style-sample.hair-wave-short .avatar-hair,
.hair-style-sample.hair-wave-short .avatar-hair {
  width: 238px;
  height: 228px;
  top: -16px;
  background-size: 450% auto !important;
  background-position: center center !important;
}

.preview-scene .full-body-avatar.hair-wave-short .avatar-hair {
  width: 438px;
  height: 418px;
  top: calc(var(--hair-top) - 80px);
  background-size: 450% auto !important;
  background-position: center center !important;
  transform: translateX(-50%) scale(var(--head-scale));
  transform-origin: center top;
  z-index: 8;
}

/* Watercolor wave hair 2 asset. */
:root {
  --hair-wave-bob-image: url('assets/avatar/source-png/hair/hair_wave_2.png?v=20260627-wave2-layer');
}

.hair-wave-bob .avatar-hair {
  width: 246px;
  height: 236px;
  top: 8px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--hair-wave-bob-image) center center / 450% auto
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 8;
}

.hair-wave-bob .avatar-hair::before,
.hair-wave-bob .avatar-hair::after,
.hair-wave-bob .avatar-face::before,
.hair-wave-bob .avatar-face::after {
  display: none !important;
}

.option-visual .hair-style-sample.hair-wave-bob .avatar-hair,
.hair-style-sample.hair-wave-bob .avatar-hair {
  width: 238px;
  height: 228px;
  top: -16px;
  background-size: 450% auto !important;
  background-position: center center !important;
}

.preview-scene .full-body-avatar.hair-wave-bob .avatar-hair {
  width: 438px;
  height: 418px;
  top: calc(var(--hair-top) - 80px);
  background-size: 450% auto !important;
  background-position: center center !important;
  transform: translateX(-50%) scale(var(--head-scale));
  transform-origin: center top;
  z-index: 8;
}

/* Watercolor wave hair 3 asset. */
:root {
  --hair-wave-long-image: url('assets/avatar/source-png/hair/hair_wave_3.png?v=20260627-wave3-layer');
}

.hair-wave-long .avatar-hair {
  width: 246px;
  height: 236px;
  top: 8px;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent var(--hair-wave-long-image) center center / 450% auto
    no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  z-index: 8;
}

.hair-wave-long .avatar-hair::before,
.hair-wave-long .avatar-hair::after,
.hair-wave-long .avatar-face::before,
.hair-wave-long .avatar-face::after {
  display: none !important;
}

.option-visual .hair-style-sample.hair-wave-long .avatar-hair,
.hair-style-sample.hair-wave-long .avatar-hair {
  width: 238px;
  height: 228px;
  top: -16px;
  background-size: 450% auto !important;
  background-position: center center !important;
}

.preview-scene .full-body-avatar.hair-wave-long .avatar-hair {
  width: 438px;
  height: 418px;
  top: calc(var(--hair-top) - 80px);
  background-size: 450% auto !important;
  background-position: center center !important;
  transform: translateX(-50%) scale(var(--head-scale));
  transform-origin: center top;
  z-index: 8;
}

.stage-controls {
  position: relative;
}

.stage-controls .tree-required-hint {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  z-index: 30;
  min-width: min(340px, calc(100vw - 36px));
  padding: 8px 14px;
  border: 1px solid rgba(177, 145, 79, 0.32);
  border-radius: 999px;
  color: #6f5527;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(255, 255, 255, 0.75),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(249, 232, 167, 0.96),
      rgba(211, 237, 169, 0.95)
    );
  box-shadow:
    0 12px 26px rgba(132, 108, 57, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.stage-controls .tree-required-hint.complete {
  color: #4d6b30;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(255, 255, 255, 0.76),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(221, 246, 182, 0.98),
      rgba(250, 232, 159, 0.95)
    );
}

.stage-button.tree-next-locked,
.done-button.tree-next-locked {
  opacity: 0.55;
  color: #9a7b45;
  cursor: not-allowed;
  filter: saturate(0.92);
  box-shadow:
    inset 4px 5px 12px rgba(128, 101, 60, 0.12),
    inset -5px -6px 16px rgba(255, 255, 255, 0.72);
}

.stage-button.tree-next-ready,
.done-button.tree-next-ready {
  border-color: rgba(142, 184, 75, 0.78);
  color: #4f6f2f;
  background:
    radial-gradient(
      circle at 25% 18%,
      rgba(255, 255, 255, 0.76),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(239, 252, 206, 0.98),
      rgba(255, 232, 154, 0.92)
    );
  animation: treeNextReadyPulse 1.7s ease-in-out infinite;
}

.tree-required-shake {
  animation: treeRequiredShake 0.34s ease;
}

.part-tab.tree-tab-focus {
  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(255, 255, 255, 0.78),
      transparent 42%
    ),
    linear-gradient(180deg, rgba(224, 247, 179, 0.9), rgba(252, 232, 161, 0.75));
  box-shadow:
    0 10px 24px rgba(122, 150, 68, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

.part-tab.tree-tab-complete::before {
  content: '✓';
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: #4e7334;
  background: rgba(232, 250, 195, 0.96);
  box-shadow:
    0 4px 10px rgba(72, 112, 44, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  font-weight: 950;
}

.part-tab.tree-tab-locked:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.tree-required-grid {
  position: relative;
}

.tree-selection-guide {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 15px;
  border: 1px solid rgba(151, 185, 94, 0.34);
  border-radius: 18px;
  color: #536b2d;
  background:
    radial-gradient(
      circle at 12% 14%,
      rgba(255, 255, 255, 0.74),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(231, 249, 194, 0.94),
      rgba(255, 238, 177, 0.88)
    );
  box-shadow:
    0 14px 30px rgba(118, 134, 73, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.tree-selection-guide.complete {
  border-color: rgba(225, 178, 81, 0.42);
  color: #6a5329;
  background:
    radial-gradient(
      circle at 12% 14%,
      rgba(255, 255, 255, 0.78),
      transparent 36%
    ),
    linear-gradient(135deg, rgba(255, 240, 178, 0.94), rgba(223, 249, 193, 0.9));
}

.tree-selection-guide-sprout {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  object-position: center;
}

.tree-selection-guide-copy {
  display: grid;
  gap: 2px;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.35;
}

.tree-selection-guide-copy strong {
  color: #7b9e34;
  font-size: 0.82rem;
}

.tree-required-grid.tree-required-focus .option-card:not(.active) {
  box-shadow:
    0 0 0 2px rgba(194, 220, 118, 0.32),
    0 14px 28px rgba(118, 140, 77, 0.12),
    var(--outer-3d-shadow),
    var(--inner-3d-shadow);
}

.option-card.tree-choice-complete {
  border-color: rgba(145, 186, 74, 0.7);
}

.tree-choice-check {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #4e7334;
  background:
    radial-gradient(
      circle at 35% 24%,
      rgba(255, 255, 255, 0.84),
      transparent 38%
    ),
    linear-gradient(145deg, #edf9c9, #cde985);
  box-shadow:
    0 7px 15px rgba(75, 112, 45, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  font-weight: 950;
}

.tree-selection-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 18px;
  border: 1px solid rgba(170, 142, 73, 0.34);
  border-radius: 999px;
  color: #684f25;
  background:
    radial-gradient(
      circle at 20% 22%,
      rgba(255, 255, 255, 0.76),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(255, 239, 177, 0.97),
      rgba(224, 246, 188, 0.95)
    );
  box-shadow:
    0 18px 36px rgba(90, 69, 35, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  font-size: 0.95rem;
  font-weight: 900;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px) scale(0.98);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.tree-selection-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@keyframes treeNextReadyPulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 0 0 rgba(180, 215, 92, 0),
      var(--outer-3d-shadow),
      var(--inner-3d-shadow);
  }
  50% {
    transform: translateY(-2px);
    box-shadow:
      0 0 18px rgba(180, 215, 92, 0.36),
      0 12px 24px rgba(95, 136, 42, 0.14),
      var(--inner-3d-shadow);
  }
}

@keyframes treeRequiredShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  55% {
    transform: translateX(4px);
  }
  78% {
    transform: translateX(-2px);
  }
}

@media (max-width: 720px) {
  .stage-controls .tree-required-hint {
    top: calc(100% + 5px);
    min-width: min(300px, calc(100vw - 26px));
    padding: 7px 12px;
    font-size: 0.8rem;
  }

  .tree-selection-guide {
    align-items: flex-start;
  }

  .tree-selection-guide-sprout {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 600px) {
  .top-bar {
    grid-template-columns: 42px minmax(0, 1fr) max-content max-content !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    gap: 4px !important;
    overflow: hidden !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
  }

  #doneButton.done-button,
  .top-bar > .done-button {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .top-icon-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  .top-icon-symbol {
    width: 33px !important;
    max-height: 33px !important;
  }

  .brand-lockup {
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  .brand-lockup h1 {
    max-width: 100%;
    font-size: clamp(0.95rem, 4vw, 1.18rem) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-subtitle {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .theme-switch {
    justify-self: end !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    transform: scale(0.86);
    transform-origin: right center;
  }

  .theme-choice {
    min-height: 28px !important;
    padding: 0 7px !important;
    font-size: 0.72rem !important;
  }

  .auth-toggle-button {
    min-height: 30px;
    max-width: 78px;
    padding: 0 8px;
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .auth-control-row {
    gap: 4px;
    max-width: 150px;
  }

  .auth-save-status {
    min-height: 22px;
    max-width: 62px;
    padding: 0 6px;
    font-size: 0.62rem;
  }

  .auth-popover {
    top: 72px;
    right: max(10px, env(safe-area-inset-right));
    width: min(300px, calc(100vw - 20px));
    padding: 14px;
  }
}

@media (max-width: 600px) {
  .deep-garden-gateway {
    padding: 10px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .deep-course-grid,
  .travel-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
  }

  .deep-course-card,
  .travel-category-card {
    min-width: 0;
    min-height: 0;
    gap: 6px;
    padding: 10px;
    border-radius: 20px;
  }

  .deep-course-visual,
  .travel-category-image {
    height: 112px;
    border-radius: 15px;
  }

  .deep-course-card-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
  }

  .deep-course-card-head span,
  .travel-category-symbol {
    padding: 4px 7px;
    font-size: 0.66rem;
  }

  .deep-course-card-head strong,
  .deep-lock-label {
    padding: 4px 7px;
    font-size: 0.64rem;
    white-space: normal;
    line-height: 1.22;
  }

  .deep-course-card h4,
  .travel-category-card strong {
    font-size: 1rem;
    line-height: 1.22;
  }

  .deep-course-card p,
  .travel-category-card small,
  .travel-category-card em {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .deep-course-card p,
  .travel-category-card small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .travel-category-card em {
    margin-top: 0;
  }

  .deep-course-button,
  .deep-lock-label {
    min-height: 34px;
    margin-top: auto;
    font-size: 0.76rem;
  }

  .deep-course-button {
    padding: 0 10px;
    white-space: normal;
  }

  .travel-category-select-scene {
    gap: 10px;
    padding: 10px;
    padding-top: 42px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .travel-start-content.travel-category-intro {
    padding: 14px;
    border-radius: 22px;
  }

  .travel-category-intro .flow-kicker {
    margin-bottom: 4px;
    font-size: 0.8rem;
  }

  .travel-category-intro h3 {
    margin-top: 2px;
    font-size: clamp(1.55rem, 7vw, 2.05rem);
    line-height: 1.06;
  }

  .travel-category-intro p:not(.flow-kicker) {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* Final sunset premium overrides must stay after legacy travel scene rules. */
.travel-scene-id-sea_02_sunset .travel-playback {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(255, 228, 159, 0.12),
      transparent 24%
    ),
    linear-gradient(180deg, #675eb0 0%, #cb5d98 34%, #efa062 66%, #695a94 100%);
}

.travel-scene-id-sea_02_sunset .travel-layer-base {
  inset: -4% -3% -6%;
  background-position: 50% 53%;
  background-repeat: no-repeat;
  background-size: auto 106%;
  filter: saturate(1.08) contrast(1.01) brightness(1.02);
  transform-origin: center center;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-panorama {
  animation:
    travelSunsetDistantPanorama 300s cubic-bezier(0.45, 0, 0.2, 1) infinite,
    travelSunsetDuskColorCycle 68s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-clouds {
  inset: -22% -76% 44% -76%;
  z-index: 2;
  opacity: 0;
  background-image:
    url('assets/effects/cloud_filter_01.png'),
    url('assets/effects/cloud_filter_01.png'),
    url('assets/effects/cloud_filter_01.png');
  background-position:
    8% 18%,
    56% 4%,
    92% 24%;
  background-repeat: no-repeat;
  background-size:
    36% auto,
    48% auto,
    32% auto;
  mix-blend-mode: soft-light;
  filter: saturate(0.86) hue-rotate(140deg) brightness(1.18) blur(0.2px);
}

.travel-scene-id-sea_02_sunset .sunset-sea-stage.is-playing .sunset-sea-clouds {
  animation: travelSunsetCloudIntermittent 20s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-layer-waves {
  inset: auto -12% -9% -12%;
  z-index: 3;
  height: 58%;
  opacity: 0.4;
  background:
    radial-gradient(
      ellipse at 48% 36%,
      rgba(255, 229, 156, 0.26),
      transparent 22%
    ),
    radial-gradient(
      ellipse at 22% 56%,
      rgba(203, 105, 179, 0.14),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 72% 70%,
      rgba(255, 174, 105, 0.18),
      transparent 34%
    ) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  mix-blend-mode: screen;
  filter: blur(8px) saturate(1.03);
}

.travel-scene-id-sea_02_sunset .travel-layer-waves::before,
.travel-scene-id-sea_02_sunset .travel-layer-waves::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  pointer-events: none;
}

.travel-scene-id-sea_02_sunset .travel-layer-waves::before {
  opacity: 0.5;
  background:
    radial-gradient(
      ellipse at 28% 48%,
      rgba(255, 244, 190, 0.24),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 50% 60%,
      rgba(255, 184, 133, 0.24),
      transparent 26%
    ),
    radial-gradient(
      ellipse at 74% 44%,
      rgba(187, 110, 204, 0.16),
      transparent 24%
    ) !important;
  filter: blur(8px);
}

.travel-scene-id-sea_02_sunset .travel-layer-waves::after {
  opacity: 0.42;
  background:
    radial-gradient(
      ellipse at 34% 62%,
      rgba(255, 230, 172, 0.2),
      transparent 22%
    ),
    radial-gradient(
      ellipse at 64% 48%,
      rgba(255, 136, 152, 0.18),
      transparent 26%
    ),
    radial-gradient(
      ellipse at 82% 72%,
      rgba(255, 201, 122, 0.18),
      transparent 28%
    ) !important;
  filter: blur(10px);
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-wave-front {
  animation:
    travelSunsetEarlyWaveDrift 11s ease-in-out infinite,
    travelSunsetWaveWarmth 54s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-wave-front::before {
  animation: travelSunsetPremiumWavePulse 22s ease-in-out infinite alternate;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-wave-front::after {
  animation: travelSunsetPremiumWavePulse 28s ease-in-out infinite
    alternate-reverse;
}

.travel-scene-id-sea_02_sunset .travel-layer-light {
  z-index: 4;
  opacity: 0.34;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 236, 161, 0.28),
      transparent 12%
    ),
    radial-gradient(
      ellipse at 50% 66%,
      rgba(255, 208, 112, 0.24),
      transparent 20%
    ),
    linear-gradient(
      90deg,
      rgba(87, 72, 164, 0.22),
      transparent 28%,
      rgba(251, 102, 133, 0.18) 55%,
      rgba(241, 159, 67, 0.24)
    );
  mix-blend-mode: soft-light;
  filter: saturate(1.08);
}

.travel-scene-id-sea_02_sunset .sunset-sea-stage.is-playing .sunset-sea-light {
  animation: travelSunsetTimeLightShift 46s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-playback::before {
  z-index: 5;
  opacity: 0.36;
  background:
    linear-gradient(
      90deg,
      rgba(58, 64, 158, 0.22),
      rgba(180, 58, 150, 0.18) 22%,
      rgba(232, 82, 126, 0.2) 45%,
      rgba(255, 158, 80, 0.22) 68%,
      rgba(153, 105, 72, 0.18)
    ),
    radial-gradient(
      circle at 50% 38%,
      rgba(255, 229, 165, 0.16),
      transparent 23%
    );
  mix-blend-mode: color;
  animation: travelSunsetTimeColorWash 64s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-playback::after {
  inset: 45% -8% -8%;
  z-index: 6;
  opacity: 0.28;
  background:
    radial-gradient(
      ellipse at 49% 28%,
      rgba(255, 236, 161, 0.28),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 34% 66%,
      rgba(189, 96, 195, 0.12),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 69% 72%,
      rgba(247, 119, 90, 0.14),
      transparent 32%
    );
  mix-blend-mode: screen;
  filter: blur(13px);
  animation: travelSunsetWaterGlowSoft 36s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer {
  inset: 42% 34% 4% 34%;
  z-index: 7;
  opacity: 0;
  background-image: url('assets/effects/sunset_reflection_02.png');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: screen;
  filter: saturate(0.72) sepia(0.24) hue-rotate(332deg) brightness(1.2)
    blur(0.15px);
  transform-origin: center top;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-reflection-layer {
  animation: travelSunsetReflectionBlink 9.5s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-boat-layer {
  inset: auto;
  left: 13%;
  top: 52%;
  z-index: 8;
  display: block;
  width: clamp(74px, 7vw, 138px);
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.78;
  filter: saturate(0.96) brightness(0.96)
    drop-shadow(0 8px 10px rgba(67, 45, 82, 0.12));
  transform-origin: 50% 78%;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-boat-layer {
  animation: travelSunsetBoatFloat 5.6s ease-in-out infinite;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-layer-base {
    background-size: auto 112%;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-boat-layer {
    left: 9%;
    top: 56%;
    width: clamp(58px, 16vw, 92px);
    opacity: 0.72;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer {
    inset: 45% 27% 8% 27%;
  }
}

/* Sunset sea tuning: lower water reflection and stronger intermittent clouds. */
.travel-scene-id-sea_02_sunset .travel-layer-clouds {
  inset: -18% -70% 46% -70%;
  background-position:
    6% 18%,
    54% 4%,
    92% 23%;
  background-size:
    44% auto,
    58% auto,
    40% auto;
  mix-blend-mode: screen;
  filter: saturate(1.02) hue-rotate(130deg) brightness(1.08) contrast(1.08)
    blur(0.05px);
}

.travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer {
  inset: 57% 38% -6% 38%;
  background-position: center top;
  filter: saturate(0.78) sepia(0.26) hue-rotate(334deg) brightness(1.26)
    blur(0.12px);
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-layer-clouds {
    inset: -14% -82% 48% -82%;
    background-size:
      58% auto,
      70% auto,
      52% auto;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer {
    inset: 60% 29% -3% 29%;
  }
}

@keyframes travelSunsetCloudIntermittent {
  0% {
    opacity: 0;
    background-position:
      4% 18%,
      53% 3%,
      90% 23%;
    transform: translate3d(-1.4%, 0, 0) scale(1);
    filter: saturate(0.98) hue-rotate(132deg) brightness(1.04) contrast(1.04)
      blur(0.45px);
  }

  7% {
    opacity: 0.38;
    transform: translate3d(-0.5%, -0.2%, 0) scale(1.006);
  }

  18% {
    opacity: 0.72;
    background-position:
      9% 15%,
      57% 5%,
      94% 20%;
    transform: translate3d(0.5%, -0.45%, 0) scale(1.014);
    filter: saturate(1.08) hue-rotate(126deg) brightness(1.14) contrast(1.12)
      blur(0);
  }

  30% {
    opacity: 0.58;
    transform: translate3d(1.2%, -0.2%, 0) scale(1.01);
  }

  43% {
    opacity: 0.2;
    transform: translate3d(1.8%, 0, 0) scale(1.006);
  }

  52%,
  100% {
    opacity: 0;
    background-position:
      14% 17%,
      62% 5%,
      98% 22%;
    transform: translate3d(2.4%, 0, 0) scale(1.004);
    filter: saturate(0.96) hue-rotate(134deg) brightness(1.02) contrast(1.02)
      blur(0.55px);
  }
}

@keyframes travelSunsetReflectionBlink {
  0% {
    opacity: 0;
    transform: translate3d(0, 11%, 0) scale(0.88);
  }

  10% {
    opacity: 0.2;
  }

  22% {
    opacity: 0.56;
    transform: translate3d(1.1%, 5%, 0) scale(0.98);
  }

  40% {
    opacity: 0.22;
    transform: translate3d(-0.6%, 8%, 0) scale(0.95);
  }

  54%,
  100% {
    opacity: 0;
    transform: translate3d(0, 13%, 0) scale(0.9);
  }
}

/* Sunset sea staging pass: rounded cloud fade plus right lighthouse / left boat views. */
.travel-scene-id-sea_02_sunset .travel-layer-clouds {
  inset: -30% -84% 10% -84%;
  background-position:
    5% 16%,
    53% 2%,
    94% 20%;
  background-size:
    46% auto,
    62% auto,
    48% auto;
  mix-blend-mode: screen;
  filter: saturate(1.02) hue-rotate(130deg) brightness(1.1) contrast(1.1)
    blur(0.08px);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 67%,
    96% 70%,
    91% 66%,
    86% 73%,
    79% 68%,
    72% 75%,
    64% 69%,
    57% 76%,
    49% 70%,
    42% 77%,
    34% 69%,
    27% 75%,
    20% 68%,
    13% 73%,
    6% 67%,
    0 71%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 104% 86% at 50% 22%,
    #000 0%,
    #000 56%,
    rgba(0, 0, 0, 0.74) 70%,
    rgba(0, 0, 0, 0.28) 83%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 104% 86% at 50% 22%,
    #000 0%,
    #000 56%,
    rgba(0, 0, 0, 0.74) 70%,
    rgba(0, 0, 0, 0.28) 83%,
    transparent 100%
  );
}

.travel-scene-id-sea_02_sunset .sunset-sea-boat-layer {
  opacity: 0;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-boat-layer {
  animation:
    travelSunsetBoatSceneOpacity 300s ease-in-out infinite,
    travelSunsetBoatFloat 5.6s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
  right: 6.5%;
  top: 31.5%;
  z-index: 9;
  width: clamp(78px, 7.2vw, 148px);
  opacity: 0;
  mix-blend-mode: normal;
  filter: saturate(0.94) sepia(0.18) hue-rotate(338deg) brightness(1.08)
    drop-shadow(0 10px 16px rgba(72, 43, 62, 0.14));
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-lighthouse-layer {
  animation: travelSunsetLighthousePass 300s ease-in-out infinite;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-layer-clouds {
    inset: -22% -96% 14% -96%;
    background-size:
      62% auto,
      78% auto,
      60% auto;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
    right: 2.5%;
    top: 32%;
    width: clamp(62px, 18vw, 92px);
  }
}

@keyframes travelSunsetDistantPanorama {
  0%,
  100% {
    background-position: 50% 53%;
    background-size: auto 106%;
    transform: translate3d(0, 0, 0) scale(1.002);
  }

  8% {
    background-position: 56% 53%;
    background-size: auto 107%;
    transform: translate3d(-0.2%, -0.1%, 0) scale(1.006);
  }

  15%,
  24% {
    background-position: 73% 53.5%;
    background-size: auto 109%;
    transform: translate3d(-0.8%, -0.24%, 0) scale(1.015);
  }

  32% {
    background-position: 50% 53%;
    background-size: auto 106.5%;
    transform: translate3d(0, -0.05%, 0) scale(1.004);
  }

  40%,
  50% {
    background-position: 27% 54%;
    background-size: auto 108.5%;
    transform: translate3d(0.7%, -0.1%, 0) scale(1.014);
  }

  61% {
    background-position: 50% 53%;
    background-size: auto 106.5%;
    transform: translate3d(0, 0, 0) scale(1.004);
  }

  70%,
  80% {
    background-position: 72% 53.5%;
    background-size: auto 108.6%;
    transform: translate3d(-0.65%, -0.26%, 0) scale(1.014);
  }

  88%,
  94% {
    background-position: 31% 54%;
    background-size: auto 108%;
    transform: translate3d(0.55%, -0.12%, 0) scale(1.01);
  }

  98% {
    background-position: 51% 53%;
    background-size: auto 106.2%;
    transform: translate3d(0, -0.05%, 0) scale(1.002);
  }
}

@keyframes travelSunsetCloudIntermittent {
  0% {
    opacity: 0;
    background-position:
      3% 16%,
      51% 2%,
      90% 20%;
    transform: translate3d(-1.4%, 0, 0) scale(1);
    filter: saturate(0.98) hue-rotate(132deg) brightness(1.04) contrast(1.04)
      blur(0.5px);
  }

  7% {
    opacity: 0.42;
    transform: translate3d(-0.5%, -0.2%, 0) scale(1.006);
  }

  18% {
    opacity: 0.78;
    background-position:
      9% 14%,
      58% 4%,
      96% 18%;
    transform: translate3d(0.5%, -0.45%, 0) scale(1.014);
    filter: saturate(1.08) hue-rotate(126deg) brightness(1.15) contrast(1.12)
      blur(0.05px);
  }

  30% {
    opacity: 0.6;
    transform: translate3d(1.2%, -0.2%, 0) scale(1.01);
  }

  43% {
    opacity: 0.18;
    transform: translate3d(1.8%, 0, 0) scale(1.006);
  }

  52%,
  100% {
    opacity: 0;
    background-position:
      16% 16%,
      64% 4%,
      100% 20%;
    transform: translate3d(2.5%, 0, 0) scale(1.004);
    filter: saturate(0.96) hue-rotate(134deg) brightness(1.02) contrast(1.02)
      blur(0.55px);
  }
}

@keyframes travelSunsetBoatSceneOpacity {
  12%,
  30%,
  62%,
  82%,
  100% {
    opacity: 0;
  }

  0% {
    opacity: 0.5;
  }

  6% {
    opacity: 0.28;
  }

  36% {
    opacity: 0.22;
  }

  42%,
  50% {
    opacity: 0.86;
  }

  56% {
    opacity: 0.2;
  }

  88% {
    opacity: 0.22;
  }

  92%,
  96% {
    opacity: 0.74;
  }

  99% {
    opacity: 0.42;
  }
}

@keyframes travelSunsetLighthousePass {
  0%,
  8%,
  31%,
  63%,
  84%,
  100% {
    opacity: 0;
    transform: translate3d(34px, 8px, 0) scale(0.88);
  }

  11% {
    opacity: 0.38;
    transform: translate3d(18px, 3px, 0) scale(0.92);
  }

  15%,
  24% {
    opacity: 0.86;
    transform: translate3d(0, -4px, 0) scale(1);
  }

  29% {
    opacity: 0.24;
    transform: translate3d(-16px, -2px, 0) scale(0.94);
  }

  67% {
    opacity: 0.26;
    transform: translate3d(18px, 3px, 0) scale(0.9);
  }

  71%,
  80% {
    opacity: 0.82;
    transform: translate3d(0, -4px, 0) scale(0.98);
  }

  83% {
    opacity: 0.2;
    transform: translate3d(-14px, -1px, 0) scale(0.94);
  }
}

/* Sunset sea asset refresh: wide cloud/reflection/lighthouse overlays and distant bird flight. */
.travel-scene-id-sea_02_sunset .travel-layer-clouds {
  inset: -24% -44% 39% -44%;
  z-index: 4;
  background-image:
    url('assets/effects/cloud_filter_01.png'),
    url('assets/effects/cloud_filter_01.png'),
    url('assets/effects/cloud_filter_01.png');
  background-repeat: no-repeat;
  background-size:
    86% auto,
    68% auto,
    58% auto;
  background-position:
    48% 0%,
    8% 12%,
    94% 15%;
  clip-path: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.92) 12%,
    #000 62%,
    rgba(0, 0, 0, 0.5) 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.92) 12%,
    #000 62%,
    rgba(0, 0, 0, 0.5) 78%,
    transparent 100%
  );
  mix-blend-mode: screen;
  filter: saturate(1.08) hue-rotate(126deg) brightness(1.16) contrast(1.08)
    blur(0.02px);
  opacity: 0;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-layer-clouds {
  animation: travelSunsetCloudIntermittentV2 28s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer {
  inset: 48% 18% -5% 18%;
  z-index: 6;
  background-image: url('assets/effects/sunset_reflection_02.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  -webkit-mask-image: radial-gradient(
    ellipse 28% 72% at 50% 42%,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.75) 42%,
    rgba(0, 0, 0, 0.32) 58%,
    transparent 76%
  );
  mask-image: radial-gradient(
    ellipse 28% 72% at 50% 42%,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.75) 42%,
    rgba(0, 0, 0, 0.32) 58%,
    transparent 76%
  );
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(0.78) sepia(0.18) hue-rotate(332deg) brightness(1.16)
    blur(0.06px);
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-reflection-layer {
  animation: travelSunsetWaterReflectionPulseV2 22s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
  inset: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(
    ellipse 19% 43% at 86% 45%,
    rgba(0, 0, 0, 0.98) 0%,
    rgba(0, 0, 0, 0.78) 44%,
    rgba(0, 0, 0, 0.28) 62%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 19% 43% at 86% 45%,
    rgba(0, 0, 0, 0.98) 0%,
    rgba(0, 0, 0, 0.78) 44%,
    rgba(0, 0, 0, 0.28) 62%,
    transparent 78%
  );
  filter: saturate(0.92) sepia(0.18) hue-rotate(338deg) brightness(1.05)
    drop-shadow(0 10px 18px rgba(77, 43, 60, 0.16));
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-lighthouse-layer {
  animation: travelSunsetLighthousePassV2 300s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-bird-layer {
  inset: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transform-origin: center center;
  will-change: opacity, transform;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-layer {
  animation: travelSunsetBirdPass 20s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-bird-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  filter: saturate(0.86) sepia(0.08) hue-rotate(342deg) brightness(1.03)
    drop-shadow(0 4px 8px rgba(72, 43, 62, 0.1));
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-1 {
  animation: travelSunsetBirdFrame1 1.26s linear infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-2 {
  animation: travelSunsetBirdFrame2 1.26s linear infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-3 {
  animation: travelSunsetBirdFrame3 1.26s linear infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-4 {
  animation: travelSunsetBirdFrame4 1.26s linear infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-5 {
  animation: travelSunsetBirdFrame5 1.26s linear infinite;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-layer-clouds {
    inset: -20% -70% 39% -70%;
    background-size:
      108% auto,
      86% auto,
      72% auto;
    background-position:
      50% 0%,
      4% 12%,
      96% 15%;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer {
    inset: 50% 7% -8% 7%;
    background-size: 110% auto;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
    width: 100%;
    height: 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 26% 43% at 86% 45%,
      rgba(0, 0, 0, 0.98) 0%,
      rgba(0, 0, 0, 0.72) 46%,
      rgba(0, 0, 0, 0.24) 64%,
      transparent 80%
    );
    mask-image: radial-gradient(
      ellipse 26% 43% at 86% 45%,
      rgba(0, 0, 0, 0.98) 0%,
      rgba(0, 0, 0, 0.72) 46%,
      rgba(0, 0, 0, 0.24) 64%,
      transparent 80%
    );
  }
}

@keyframes travelSunsetCloudIntermittentV2 {
  0%,
  100% {
    opacity: 0;
    background-position:
      42% 2%,
      3% 13%,
      91% 17%;
    transform: translate3d(-1.2%, 0, 0) scale(1);
  }

  8% {
    opacity: 0.4;
    transform: translate3d(-0.4%, -0.2%, 0) scale(1.004);
  }

  22% {
    opacity: 0.72;
    background-position:
      50% 0%,
      10% 11%,
      98% 14%;
    transform: translate3d(0.7%, -0.45%, 0) scale(1.012);
  }

  38% {
    opacity: 0.46;
    transform: translate3d(1.5%, -0.25%, 0) scale(1.008);
  }

  50%,
  58% {
    opacity: 0;
    background-position:
      56% 1%,
      16% 12%,
      104% 16%;
    transform: translate3d(2.2%, 0, 0) scale(1.004);
  }

  68% {
    opacity: 0.36;
    background-position:
      46% 1%,
      8% 12%,
      95% 15%;
    transform: translate3d(-0.8%, -0.2%, 0) scale(1.004);
  }

  79% {
    opacity: 0.64;
    transform: translate3d(0.2%, -0.4%, 0) scale(1.01);
  }

  91% {
    opacity: 0;
    background-position:
      53% 1%,
      14% 12%,
      101% 15%;
    transform: translate3d(1.5%, 0, 0) scale(1.004);
  }
}

@keyframes travelSunsetWaterReflectionPulseV2 {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.98);
  }

  12% {
    opacity: 0.14;
  }

  24% {
    opacity: 0.36;
    transform: translate3d(-0.4%, 6px, 0) scale(1.01);
  }

  39% {
    opacity: 0.2;
    transform: translate3d(0.5%, 3px, 0) scale(1.018);
  }

  52% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(1.006);
  }

  64% {
    opacity: 0.18;
  }

  78% {
    opacity: 0.42;
    transform: translate3d(0.25%, 4px, 0) scale(1.018);
  }

  92% {
    opacity: 0.04;
    transform: translate3d(-0.3%, 8px, 0) scale(1.006);
  }
}

@keyframes travelSunsetLighthousePassV2 {
  0%,
  9%,
  30%,
  62%,
  86%,
  100% {
    opacity: 0;
    transform: translate3d(30px, 8px, 0) scale(0.86);
  }

  12% {
    opacity: 0.32;
    transform: translate3d(16px, 4px, 0) scale(0.9);
  }

  16%,
  25% {
    opacity: 0.78;
    transform: translate3d(0, -3px, 0) scale(0.98);
  }

  29% {
    opacity: 0.18;
    transform: translate3d(-18px, -2px, 0) scale(0.92);
  }

  66% {
    opacity: 0.26;
    transform: translate3d(18px, 4px, 0) scale(0.88);
  }

  70%,
  82% {
    opacity: 0.72;
    transform: translate3d(0, -3px, 0) scale(0.96);
  }

  85% {
    opacity: 0.18;
    transform: translate3d(-15px, -1px, 0) scale(0.91);
  }
}

@keyframes travelSunsetBirdPass {
  0% {
    opacity: 0;
    transform: translate3d(2.8%, -0.8%, 0) scale(0.98);
  }

  8% {
    opacity: 0.68;
  }

  32% {
    opacity: 0.72;
    transform: translate3d(0.2%, -1.6%, 0) scale(1.006);
  }

  52% {
    opacity: 0.66;
    transform: translate3d(-2.4%, -0.2%, 0) scale(1.014);
  }

  62% {
    opacity: 0;
    transform: translate3d(-3.6%, 0.6%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(2.8%, -0.8%, 0) scale(0.98);
  }
}

@keyframes travelSunsetBirdFrame1 {
  0%,
  11.1%,
  88.9%,
  100% {
    opacity: 1;
  }

  11.2%,
  88.8% {
    opacity: 0;
  }
}

@keyframes travelSunsetBirdFrame2 {
  0%,
  11.1%,
  22.3%,
  77.7%,
  88.9%,
  100% {
    opacity: 0;
  }

  11.2%,
  22.2%,
  77.8%,
  88.8% {
    opacity: 1;
  }
}

@keyframes travelSunsetBirdFrame3 {
  0%,
  22.2%,
  33.4%,
  66.6%,
  77.8%,
  100% {
    opacity: 0;
  }

  22.3%,
  33.3%,
  66.7%,
  77.7% {
    opacity: 1;
  }
}

@keyframes travelSunsetBirdFrame4 {
  0%,
  33.3%,
  44.5%,
  55.5%,
  66.7%,
  100% {
    opacity: 0;
  }

  33.4%,
  44.4%,
  55.6%,
  66.6% {
    opacity: 1;
  }
}

@keyframes travelSunsetBirdFrame5 {
  0%,
  44.4%,
  55.6%,
  100% {
    opacity: 0;
  }

  44.5%,
  55.5% {
    opacity: 1;
  }
}

/* Sunset sea tuning: slower smaller gull and more visible lighthouse passes. */
.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-layer {
  animation: travelSunsetBirdPassSlow 24s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-bird-frame {
  transform-origin: 13% 19%;
  transform: translate3d(0, 0, 0) scale(0.82);
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-1,
.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-2,
.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-3,
.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-4,
.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-bird-frame-5 {
  animation-duration: 1.98s;
}

.travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
  z-index: 11;
  -webkit-mask-image: radial-gradient(
    ellipse 28% 58% at 80% 45%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.86) 45%,
    rgba(0, 0, 0, 0.32) 66%,
    transparent 84%
  );
  mask-image: radial-gradient(
    ellipse 28% 58% at 80% 45%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.86) 45%,
    rgba(0, 0, 0, 0.32) 66%,
    transparent 84%
  );
  filter: saturate(0.96) sepia(0.14) hue-rotate(336deg) brightness(1.13)
    drop-shadow(0 12px 20px rgba(77, 43, 60, 0.18));
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-lighthouse-layer {
  animation: travelSunsetLighthousePassV3 90s ease-in-out infinite;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .sunset-sea-bird-frame {
    transform-origin: 13% 19%;
    transform: translate3d(0, 0, 0) scale(0.72);
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
    -webkit-mask-image: radial-gradient(
      ellipse 34% 60% at 79% 45%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.82) 46%,
      rgba(0, 0, 0, 0.3) 68%,
      transparent 86%
    );
    mask-image: radial-gradient(
      ellipse 34% 60% at 79% 45%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.82) 46%,
      rgba(0, 0, 0, 0.3) 68%,
      transparent 86%
    );
  }
}

@keyframes travelSunsetBirdPassSlow {
  0% {
    opacity: 0;
    transform: translate3d(1.8%, -0.6%, 0) scale(0.98);
  }

  9% {
    opacity: 0.54;
  }

  34% {
    opacity: 0.6;
    transform: translate3d(0.1%, -1.35%, 0) scale(1.002);
  }

  51% {
    opacity: 0.56;
    transform: translate3d(-1.8%, -0.2%, 0) scale(1.008);
  }

  61% {
    opacity: 0;
    transform: translate3d(-2.6%, 0.4%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(1.8%, -0.6%, 0) scale(0.98);
  }
}

@keyframes travelSunsetLighthousePassV3 {
  0%,
  2%,
  22%,
  29%,
  49%,
  57%,
  78%,
  86%,
  100% {
    opacity: 0;
    transform: translate3d(28px, 8px, 0) scale(0.9);
  }

  5% {
    opacity: 0.52;
    transform: translate3d(14px, 3px, 0) scale(0.94);
  }

  8%,
  16% {
    opacity: 0.94;
    transform: translate3d(0, -3px, 0) scale(1);
  }

  20% {
    opacity: 0.26;
    transform: translate3d(-12px, -1px, 0) scale(0.96);
  }

  33% {
    opacity: 0.44;
    transform: translate3d(14px, 4px, 0) scale(0.92);
  }

  37%,
  45% {
    opacity: 0.88;
    transform: translate3d(0, -2px, 0) scale(0.98);
  }

  48% {
    opacity: 0.2;
    transform: translate3d(-14px, -1px, 0) scale(0.95);
  }

  61% {
    opacity: 0.42;
    transform: translate3d(16px, 4px, 0) scale(0.91);
  }

  66%,
  74% {
    opacity: 0.9;
    transform: translate3d(0, -3px, 0) scale(0.99);
  }

  77% {
    opacity: 0.22;
    transform: translate3d(-12px, -1px, 0) scale(0.96);
  }
}

/* Sunset lighthouse placement fix: new asset sits lower in its 2048x1024 canvas. */
.travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
  z-index: 14;
  opacity: 0;
  -webkit-mask-image: radial-gradient(
    ellipse 18% 45% at 80.5% 72%,
    #000 0%,
    rgba(0, 0, 0, 0.96) 54%,
    rgba(0, 0, 0, 0.52) 70%,
    transparent 86%
  );
  mask-image: radial-gradient(
    ellipse 18% 45% at 80.5% 72%,
    #000 0%,
    rgba(0, 0, 0, 0.96) 54%,
    rgba(0, 0, 0, 0.52) 70%,
    transparent 86%
  );
  filter: saturate(0.98) sepia(0.12) hue-rotate(335deg) brightness(1.16)
    drop-shadow(0 12px 20px rgba(77, 43, 60, 0.18));
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-lighthouse-layer {
  animation: travelSunsetLighthousePassV4 90s ease-in-out infinite;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
    -webkit-mask-image: radial-gradient(
      ellipse 27% 46% at 80% 72%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 56%,
      rgba(0, 0, 0, 0.48) 72%,
      transparent 88%
    );
    mask-image: radial-gradient(
      ellipse 27% 46% at 80% 72%,
      #000 0%,
      rgba(0, 0, 0, 0.92) 56%,
      rgba(0, 0, 0, 0.48) 72%,
      transparent 88%
    );
  }
}

@keyframes travelSunsetLighthousePassV4 {
  0% {
    opacity: 0;
    transform: translate3d(26px, 8px, 0) scale(0.94);
  }

  3% {
    opacity: 0.72;
    transform: translate3d(12px, 3px, 0) scale(0.97);
  }

  7%,
  17% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1);
  }

  22% {
    opacity: 0;
    transform: translate3d(-20px, 0, 0) scale(0.96);
  }

  30% {
    opacity: 0;
    transform: translate3d(28px, 7px, 0) scale(0.93);
  }

  34% {
    opacity: 0.7;
    transform: translate3d(12px, 3px, 0) scale(0.96);
  }

  39%,
  50% {
    opacity: 0.96;
    transform: translate3d(0, -2px, 0) scale(0.99);
  }

  55% {
    opacity: 0;
    transform: translate3d(-18px, 0, 0) scale(0.95);
  }

  63% {
    opacity: 0;
    transform: translate3d(28px, 7px, 0) scale(0.93);
  }

  67% {
    opacity: 0.68;
    transform: translate3d(12px, 3px, 0) scale(0.96);
  }

  72%,
  83% {
    opacity: 0.98;
    transform: translate3d(0, -2px, 0) scale(1);
  }

  89%,
  100% {
    opacity: 0;
    transform: translate3d(-22px, 0, 0) scale(0.95);
  }
}

/* Sunset premium pass: layered rose/purple clouds and repeated lighthouse reveals. */
.travel-scene-id-sea_02_sunset .sunset-sea-color-cloud {
  inset: -9% -8%;
  z-index: 9;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1.04);
  transform-origin: center center;
  will-change: opacity, transform, filter;
}

.travel-scene-id-sea_02_sunset .sunset-sea-color-cloud-02 {
  background-image: url('assets/effects/cloud_filter_02.png');
  filter: sepia(0.22) saturate(1.55) hue-rotate(302deg) brightness(1.12);
}

.travel-scene-id-sea_02_sunset .sunset-sea-color-cloud-03 {
  background-image: url('assets/effects/cloud_filter_03.png');
  filter: sepia(0.18) saturate(1.7) hue-rotate(274deg) brightness(1.08);
}

.travel-scene-id-sea_02_sunset .sunset-sea-color-cloud-04 {
  background-image: url('assets/effects/cloud_filter_04.png');
  filter: sepia(0.28) saturate(1.48) hue-rotate(318deg) brightness(1.14);
}

.travel-scene-id-sea_02_sunset .sunset-sea-color-cloud-05 {
  background-image: url('assets/effects/cloud_filter_05.png');
  filter: sepia(0.2) saturate(1.8) hue-rotate(288deg) brightness(1.1);
}

.travel-scene-id-sea_02_sunset .sunset-sea-color-cloud-06 {
  background-image: url('assets/effects/cloud_filter_06.png');
  filter: sepia(0.3) saturate(1.42) hue-rotate(330deg) brightness(1.16);
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-color-cloud-02 {
  animation: travelSunsetCloudRosePassA 44s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-color-cloud-03 {
  animation: travelSunsetCloudPurplePassB 56s ease-in-out -10s infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-color-cloud-04 {
  animation: travelSunsetCloudRosePassC 62s ease-in-out -22s infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-color-cloud-05 {
  animation: travelSunsetCloudPurplePassD 48s ease-in-out -30s infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-color-cloud-06 {
  animation: travelSunsetCloudAmberPassE 68s ease-in-out -42s infinite;
}

.travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
  z-index: 16;
  opacity: 0;
  object-fit: cover;
  object-position: 72% center;
  -webkit-mask-image: none;
  mask-image: none;
  filter: sepia(0.16) saturate(1.1) hue-rotate(322deg) brightness(1.14)
    drop-shadow(0 14px 22px rgba(77, 43, 60, 0.2));
  transform-origin: center center;
  will-change: opacity, transform, filter;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-sea-lighthouse-layer {
  animation: travelSunsetLighthouseRevealV5 90s ease-in-out infinite;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .sunset-sea-color-cloud {
    inset: -7% -18%;
    background-size: cover;
  }

  .travel-scene-id-sea_02_sunset .sunset-sea-lighthouse-layer {
    object-position: 78% center;
  }
}

@keyframes travelSunsetCloudRosePassA {
  0%,
  17%,
  100% {
    opacity: 0;
    transform: translate3d(-8vw, 1vh, 0) scale(1.03);
  }

  5% {
    opacity: 0.5;
    transform: translate3d(-3vw, 0, 0) scale(1.06);
  }

  10% {
    opacity: 0.72;
    transform: translate3d(1vw, -1vh, 0) scale(1.08);
  }

  14% {
    opacity: 0.22;
    transform: translate3d(5vw, -1vh, 0) scale(1.06);
  }
}

@keyframes travelSunsetCloudPurplePassB {
  0%,
  20%,
  100% {
    opacity: 0;
    transform: translate3d(7vw, -1vh, 0) scale(1.08);
  }

  6% {
    opacity: 0.42;
    transform: translate3d(3vw, -2vh, 0) scale(1.1);
  }

  12% {
    opacity: 0.64;
    transform: translate3d(-1vw, -1vh, 0) scale(1.12);
  }

  17% {
    opacity: 0.18;
    transform: translate3d(-6vw, 0, 0) scale(1.09);
  }
}

@keyframes travelSunsetCloudRosePassC {
  0%,
  16%,
  100% {
    opacity: 0;
    transform: translate3d(-5vw, -2vh, 0) scale(1.04);
  }

  4% {
    opacity: 0.38;
    transform: translate3d(-2vw, -1vh, 0) scale(1.07);
  }

  9% {
    opacity: 0.6;
    transform: translate3d(2vw, 0, 0) scale(1.1);
  }

  13% {
    opacity: 0.2;
    transform: translate3d(6vw, 1vh, 0) scale(1.08);
  }
}

@keyframes travelSunsetCloudPurplePassD {
  0%,
  19%,
  100% {
    opacity: 0;
    transform: translate3d(6vw, 1vh, 0) scale(1.06);
  }

  5% {
    opacity: 0.46;
    transform: translate3d(2vw, 0, 0) scale(1.08);
  }

  11% {
    opacity: 0.68;
    transform: translate3d(-2vw, -1vh, 0) scale(1.11);
  }

  16% {
    opacity: 0.2;
    transform: translate3d(-5vw, -1vh, 0) scale(1.08);
  }
}

@keyframes travelSunsetCloudAmberPassE {
  0%,
  18%,
  100% {
    opacity: 0;
    transform: translate3d(-6vw, 0, 0) scale(1.05);
  }

  5% {
    opacity: 0.4;
    transform: translate3d(-2vw, -1vh, 0) scale(1.08);
  }

  10% {
    opacity: 0.58;
    transform: translate3d(2vw, -2vh, 0) scale(1.1);
  }

  15% {
    opacity: 0.18;
    transform: translate3d(5vw, -1vh, 0) scale(1.07);
  }
}

/* Sunset sea v6: keep boat and lighthouse inside the panorama world, not pinned to the viewport. */
.travel-scene-id-sea_02_sunset .travel-playback {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(255, 221, 153, 0.18),
      transparent 26%
    ),
    linear-gradient(180deg, #7760a7 0%, #c76093 34%, #ef9f62 66%, #75578c 100%);
}

.travel-scene-id-sea_02_sunset .sunset-panorama-world {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 3000px;
  height: 1200px;
  transform: translate3d(-50%, -50%, 0) scale(1.01);
  transform-origin: center center;
  pointer-events: none;
  will-change: transform, filter;
}

.travel-scene-id-sea_02_sunset .sunset-panorama-world .sunset-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: var(--travel-scene-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  filter: saturate(1.08) contrast(1.01) brightness(1.03);
  transform: none;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-panorama-world {
  animation:
    travelSunsetWorldPanV6 300s cubic-bezier(0.45, 0, 0.2, 1) infinite,
    travelSunsetWorldColorBreathV6 74s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-panorama-world
  .sunset-sea-panorama {
  animation: none;
}

.travel-scene-id-sea_02_sunset .sunset-world-object {
  position: absolute;
  height: auto;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  will-change: opacity, transform, filter;
}

.travel-scene-id-sea_02_sunset .sunset-panorama-world .sunset-sea-boat-layer {
  left: -1%;
  top: 37%;
  z-index: 4;
  width: 38%;
  opacity: 0.54;
  filter: sepia(0.12) saturate(1.08) hue-rotate(328deg) brightness(1.08)
    drop-shadow(0 10px 18px rgba(74, 41, 49, 0.16));
  transform-origin: 18% 74%;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-panorama-world
  .sunset-sea-boat-layer {
  animation:
    travelSunsetBoatWorldPresenceV6 300s ease-in-out infinite,
    travelSunsetBoatWorldBobV6 6.8s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-panorama-world
  .sunset-sea-lighthouse-layer {
  left: 64%;
  top: 33%;
  z-index: 5;
  width: 30%;
  opacity: 0;
  object-fit: contain;
  object-position: center center;
  -webkit-mask-image: none;
  mask-image: none;
  filter: sepia(0.2) saturate(1.08) hue-rotate(326deg) brightness(1.08)
    drop-shadow(0 14px 22px rgba(77, 43, 60, 0.18));
  transform-origin: 76% 78%;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-panorama-world
  .sunset-sea-lighthouse-layer {
  animation: travelSunsetLighthouseWorldPresenceV6 300s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  > .travel-playback
  > .sunset-sea-lighthouse-layer,
.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  > .travel-playback
  > .sunset-sea-boat-layer {
  display: none;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .sunset-panorama-world {
    width: 2600px;
    height: 1040px;
  }

  .travel-scene-id-sea_02_sunset .sunset-panorama-world .sunset-sea-boat-layer {
    top: 40%;
    width: 42%;
  }

  .travel-scene-id-sea_02_sunset
    .sunset-panorama-world
    .sunset-sea-lighthouse-layer {
    left: 63%;
    top: 35%;
    width: 33%;
  }
}

@keyframes travelSunsetWorldPanV6 {
  0%,
  8%,
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1.01);
  }

  16% {
    transform: translate3d(
        calc(-50% + clamp(240px, 30vw, 520px)),
        calc(-50% + 6px),
        0
      )
      scale(1.025);
  }

  28% {
    transform: translate3d(
        calc(-50% + clamp(90px, 10vw, 180px)),
        calc(-50% - 4px),
        0
      )
      scale(1.035);
  }

  40%,
  55% {
    transform: translate3d(
        calc(-50% - clamp(430px, 46vw, 720px)),
        calc(-50% + 4px),
        0
      )
      scale(1.02);
  }

  66% {
    transform: translate3d(
        calc(-50% - clamp(80px, 8vw, 160px)),
        calc(-50% - 8px),
        0
      )
      scale(1.035);
  }

  76% {
    transform: translate3d(
        calc(-50% + clamp(220px, 24vw, 440px)),
        calc(-50% + 2px),
        0
      )
      scale(1.018);
  }

  86% {
    transform: translate3d(
        calc(-50% - clamp(380px, 40vw, 650px)),
        calc(-50% + 5px),
        0
      )
      scale(1.025);
  }

  94% {
    transform: translate3d(calc(-50% - clamp(90px, 10vw, 180px)), -50%, 0)
      scale(1.015);
  }
}

@keyframes travelSunsetWorldColorBreathV6 {
  0%,
  100% {
    filter: saturate(1.04) hue-rotate(0deg) brightness(1);
  }

  18% {
    filter: saturate(1.18) hue-rotate(8deg) brightness(1.04);
  }

  36% {
    filter: saturate(1.22) hue-rotate(338deg) brightness(1.02);
  }

  54% {
    filter: saturate(1.18) hue-rotate(350deg) brightness(1.06);
  }

  72% {
    filter: saturate(1.12) hue-rotate(14deg) brightness(1.03);
  }
}

@keyframes travelSunsetBoatWorldPresenceV6 {
  0%,
  8%,
  30%,
  66%,
  100% {
    opacity: 0.3;
  }

  13%,
  23%,
  74%,
  82% {
    opacity: 0.68;
  }

  42%,
  58%,
  88% {
    opacity: 0.18;
  }
}

@keyframes travelSunsetBoatWorldBobV6 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.6deg);
  }

  50% {
    transform: translate3d(0, -10px, 0) rotate(0.8deg);
  }
}

@keyframes travelSunsetLighthouseWorldPresenceV6 {
  0%,
  34%,
  62%,
  76%,
  100% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.96);
  }

  41%,
  54% {
    opacity: 0.68;
    transform: translate3d(0, 0, 0) scale(1);
  }

  84%,
  90% {
    opacity: 0.56;
    transform: translate3d(0, 2px, 0) scale(0.98);
  }
}

@keyframes travelSunsetLighthouseRevealV5 {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(8vw, 1vh, 0) scale(0.97);
    filter: sepia(0.18) saturate(1.1) hue-rotate(318deg) brightness(1.1);
  }

  4%,
  12% {
    opacity: 0.9;
    transform: translate3d(3vw, -1vh, 0) scale(1);
    filter: sepia(0.18) saturate(1.18) hue-rotate(312deg) brightness(1.16);
  }

  18% {
    opacity: 0;
    transform: translate3d(-2vw, -1vh, 0) scale(0.98);
  }

  24% {
    opacity: 0;
    transform: translate3d(9vw, 1vh, 0) scale(0.96);
    filter: sepia(0.22) saturate(1.18) hue-rotate(288deg) brightness(1.08);
  }

  30%,
  38% {
    opacity: 0.82;
    transform: translate3d(4vw, -1vh, 0) scale(0.99);
    filter: sepia(0.24) saturate(1.25) hue-rotate(292deg) brightness(1.13);
  }

  45% {
    opacity: 0;
    transform: translate3d(-1vw, 0, 0) scale(0.97);
  }

  52% {
    opacity: 0;
    transform: translate3d(10vw, 0, 0) scale(0.96);
    filter: sepia(0.2) saturate(1.2) hue-rotate(332deg) brightness(1.1);
  }

  58%,
  66% {
    opacity: 0.92;
    transform: translate3d(4vw, -1vh, 0) scale(1);
    filter: sepia(0.24) saturate(1.28) hue-rotate(326deg) brightness(1.15);
  }

  72% {
    opacity: 0;
    transform: translate3d(-2vw, 0, 0) scale(0.98);
  }

  78% {
    opacity: 0;
    transform: translate3d(9vw, 1vh, 0) scale(0.96);
    filter: sepia(0.18) saturate(1.16) hue-rotate(304deg) brightness(1.1);
  }

  83%,
  91% {
    opacity: 0.86;
    transform: translate3d(4vw, -1vh, 0) scale(0.99);
    filter: sepia(0.2) saturate(1.22) hue-rotate(306deg) brightness(1.14);
  }

  96% {
    opacity: 0;
    transform: translate3d(-1vw, 0, 0) scale(0.97);
  }
}

/* Sunset reset v7: use the full original sunset panorama image, then move the viewport over it. */
.travel-scene-id-sea_02_sunset .sunset-panorama-world {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 3000px;
  height: 1200px;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center center;
  pointer-events: none;
  overflow: visible;
  will-change: transform;
}

.travel-scene-id-sea_02_sunset .sunset-panorama-world .sunset-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: none;
  filter: none;
  transform: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-panorama-world {
  animation: travelSunsetOriginalPanV7 300s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .sunset-panorama-world
  .sunset-sea-panorama {
  animation: none !important;
}

.travel-scene-id-sea_02_sunset .sunset-panorama-world .sunset-world-object {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
}

.travel-scene-id-sea_02_sunset .sunset-panorama-world .sunset-sea-boat-layer {
  left: -1%;
  top: 37%;
  width: 38%;
}

.travel-scene-id-sea_02_sunset
  .sunset-panorama-world
  .sunset-sea-lighthouse-layer {
  left: 64%;
  top: 33%;
  width: 30%;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .sunset-panorama-world {
    width: 3000px;
    height: 1200px;
  }
}

@keyframes travelSunsetOriginalPanV7 {
  0%,
  12%,
  100% {
    transform: translate3d(-50%, -50%, 0);
  }

  28% {
    transform: translate3d(calc(-50% + clamp(180px, 18vw, 360px)), -50%, 0);
  }

  46% {
    transform: translate3d(-50%, -50%, 0);
  }

  66% {
    transform: translate3d(calc(-50% - clamp(260px, 28vw, 520px)), -50%, 0);
  }

  84% {
    transform: translate3d(calc(-50% - clamp(80px, 8vw, 160px)), -50%, 0);
  }
}

/* Sunset scene pan v1: rebuild from the verified original image only. */
.travel-scene-id-sea_02_sunset .travel-scene-stage {
  background: #f7efe6 !important;
}

.travel-scene-id-sea_02_sunset .travel-playback,
.travel-scene-id-sea_02_sunset .travel-sunset-original-only {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #f7efe6 !important;
  background-image: none !important;
  isolation: isolate !important;
}

.travel-scene-id-sea_02_sunset .travel-playback::before,
.travel-scene-id-sea_02_sunset .travel-playback::after,
.travel-scene-id-sea_02_sunset .travel-sunset-original-only::before,
.travel-scene-id-sea_02_sunset .travel-sunset-original-only::after,
.travel-scene-id-sea_02_sunset .travel-layer-clouds,
.travel-scene-id-sea_02_sunset .sunset-sea-color-cloud,
.travel-scene-id-sea_02_sunset .travel-layer-waves,
.travel-scene-id-sea_02_sunset .travel-layer-waves::before,
.travel-scene-id-sea_02_sunset .travel-layer-waves::after,
.travel-scene-id-sea_02_sunset .travel-layer-light,
.travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer,
.travel-scene-id-sea_02_sunset .sunset-sea-bird-layer,
.travel-scene-id-sea_02_sunset .sunset-world-object,
.travel-scene-id-sea_02_sunset .travel-full-background,
.travel-scene-id-sea_02_sunset .travel-full-vignette {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  filter: none !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-original-image {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1 !important;
  display: block !important;
  width: max(112vw, 250dvh) !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  transform: translate3d(-50%, -50%, 0) scale(1.02);
  transform-origin: center center !important;
  animation: sunsetSceneImagePanV1 300s ease-in-out infinite !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

@keyframes sunsetSceneImagePanV1 {
  0%,
  8% {
    transform: translate3d(-50%, -50%, 0) scale(1.02);
  }

  24% {
    transform: translate3d(-58%, -50%, 0) scale(1.035);
  }

  38% {
    transform: translate3d(-50%, -50%, 0) scale(1.02);
  }

  52% {
    transform: translate3d(-50%, -50%, 0) scale(1.045);
  }

  72% {
    transform: translate3d(-42%, -50%, 0) scale(1.035);
  }

  88%,
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1.02);
  }
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-sunset-original-image {
    width: max(132vw, 250dvh) !important;
  }
}

/* Sea travel fullscreen v1: keep the player under the header, never as a thin banner. */
:root {
  --header-height: 72px;
}

body.travel-scene-playing-mode {
  overflow: hidden !important;
}

body.travel-scene-playing-mode .editor-app {
  min-height: 100dvh;
  grid-template-rows: var(--header-height) 0 0 0 minmax(0, 1fr) !important;
  overflow: hidden;
}

body.travel-scene-playing-mode .preview-stage,
body.travel-scene-playing-mode .part-tabs,
body.travel-scene-playing-mode .stage-controls,
body.travel-scene-playing-mode .panel-heading,
body.travel-scene-playing-mode .delete-drop-zone {
  display: none !important;
}

body.travel-scene-playing-mode .picker-panel {
  position: fixed !important;
  inset: var(--header-height) 0 0 0 !important;
  width: 100vw !important;
  height: calc(100dvh - var(--header-height)) !important;
  min-height: calc(100dvh - var(--header-height)) !important;
  max-height: calc(100dvh - var(--header-height)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 8;
}

body.travel-scene-playing-mode .top-bar {
  position: relative;
  z-index: 700 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.travel-scene-playing-mode .auth-panel,
body.travel-scene-playing-mode .auth-toggle-button {
  pointer-events: auto !important;
}

body.travel-scene-playing-mode .auth-panel {
  z-index: 900 !important;
}

body.travel-scene-playing-mode .auth-popover {
  z-index: 1200 !important;
}

body.travel-scene-playing-mode #optionGrid.travel-scene-view,
body.travel-scene-playing-mode .option-grid.travel-scene-view,
body.travel-scene-playing-mode .travel-scene-page,
body.travel-scene-playing-mode .travel-scene-stage,
body.travel-scene-playing-mode .travel-playback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

body.travel-scene-playing-mode #optionGrid.travel-scene-view,
body.travel-scene-playing-mode .option-grid.travel-scene-view {
  display: block !important;
  background: transparent !important;
}

body.travel-scene-playing-mode .travel-scene-stage {
  isolation: isolate;
}

body.travel-scene-playing-mode .travel-layer,
body.travel-scene-playing-mode .travel-full-background {
  position: absolute !important;
  pointer-events: none;
}

body.travel-scene-playing-mode .travel-scene-header {
  position: absolute !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  left: max(14px, env(safe-area-inset-left)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start;
  gap: 12px;
  max-width: calc(100vw - 28px);
  pointer-events: none;
}

body.travel-scene-playing-mode .travel-scene-header > *,
body.travel-scene-playing-mode .travel-scene-controls {
  pointer-events: auto;
}

body.travel-scene-playing-mode .travel-scene-controls {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: min(430px, calc(100vw - 32px));
}

body.travel-scene-playing-mode .travel-sound-button {
  max-width: calc(100vw - 32px);
  white-space: nowrap;
}

body.travel-scene-playing-mode .travel-scene-page .travel-actions {
  position: absolute !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 42 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  min-height: 0 !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto;
}

body.travel-scene-playing-mode .travel-scene-page .travel-actions .soft-action {
  backdrop-filter: blur(12px);
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_01_clear
  .travel-layer-base {
  inset: -10% -14% -12% !important;
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_01_clear
  .travel-layer-waves {
  bottom: -8% !important;
  height: 74% !important;
}

@media (max-width: 600px) {
  body.travel-scene-playing-mode .travel-scene-header {
    top: 10px !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px;
    max-width: calc(100vw - 20px);
  }

  body.travel-scene-playing-mode .travel-scene-header h3 {
    font-size: clamp(1.35rem, 8vw, 2.1rem);
  }

  body.travel-scene-playing-mode .travel-scene-header .flow-kicker {
    font-size: 0.86rem;
  }

  body.travel-scene-playing-mode .travel-scene-controls {
    max-width: min(190px, calc(100vw - 20px));
  }

  body.travel-scene-playing-mode .travel-scene-header .tts-button {
    min-height: 42px;
    padding: 8px 11px;
  }

  body.travel-scene-playing-mode .travel-scene-page .travel-actions {
    gap: 8px;
  }

  body.travel-scene-playing-mode
    .travel-scene-page
    .travel-actions
    .soft-action {
    min-height: 40px;
    padding: 9px 13px;
    font-size: 0.88rem;
  }
}

/* Sunset basic pan v2 final override: original image only, clear-sea-style 5 minute panorama. */
.travel-scene-id-sea_02_sunset .travel-playback,
.travel-scene-id-sea_02_sunset .travel-sunset-original-only {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #f7efe6 !important;
  background-image: none !important;
  isolation: isolate !important;
}

.travel-scene-id-sea_02_sunset .travel-playback::before,
.travel-scene-id-sea_02_sunset .travel-playback::after,
.travel-scene-id-sea_02_sunset .travel-sunset-original-only::before,
.travel-scene-id-sea_02_sunset .travel-sunset-original-only::after,
.travel-scene-id-sea_02_sunset .travel-layer-clouds,
.travel-scene-id-sea_02_sunset .sunset-sea-color-cloud,
.travel-scene-id-sea_02_sunset .travel-layer-waves,
.travel-scene-id-sea_02_sunset .travel-layer-waves::before,
.travel-scene-id-sea_02_sunset .travel-layer-waves::after,
.travel-scene-id-sea_02_sunset .travel-layer-light,
.travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer,
.travel-scene-id-sea_02_sunset .sunset-sea-bird-layer,
.travel-scene-id-sea_02_sunset .sunset-world-object,
.travel-scene-id-sea_02_sunset .travel-full-background,
.travel-scene-id-sea_02_sunset .travel-full-vignette {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  filter: none !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-original-image {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1 !important;
  display: block !important;
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  transform: translate3d(-50%, -50%, 0) scale(1.02);
  transform-origin: center center !important;
  animation: sunsetBasicPanV2 260s ease-in-out infinite !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

@keyframes sunsetBasicPanV2 {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1.02);
  }

  16% {
    transform: translate3d(-70%, -50%, 0) scale(1.045);
  }

  32% {
    transform: translate3d(-50%, -50%, 0) scale(1.02);
  }

  50% {
    transform: translate3d(-30%, -50%, 0) scale(1.045);
  }

  68% {
    transform: translate3d(-50%, -51.5%, 0) scale(1.085);
  }

  84% {
    transform: translate3d(-62%, -49%, 0) scale(1.04);
  }
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-sunset-original-image {
    width: max(260vw, 280dvh) !important;
  }

  .travel-scene-id-sea_02_sunset .travel-sunset-static-object,
  .travel-scene-id-sea_02_sunset .travel-sunset-layer-effect {
    width: max(260vw, 280dvh) !important;
  }
}

/* Sea panorama clean v3: keep playback chrome stable while restoring visible motion. */
body.travel-scene-playing-mode
  .travel-scene-id-sea_01_clear
  .travel-scene-header
  h3 {
  font-size: 0 !important;
  line-height: 1 !important;
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_01_clear
  .travel-scene-header
  h3::after {
  content: '맑은 바다';
  display: block;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.05;
  color: inherit;
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_02_sunset
  .travel-intro-progress {
  position: absolute !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 44 !important;
  display: block !important;
  width: min(240px, 42vw) !important;
  height: 7px !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
  opacity: 0.95 !important;
  pointer-events: none;
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_02_sunset
  .travel-intro-progress
  span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  animation: travelIntroFill var(--travel-intro-duration, 300s) linear forwards !important;
  transform-origin: left center;
}

@media (max-width: 600px) {
  body.travel-scene-playing-mode
    .travel-scene-id-sea_01_clear
    .travel-scene-header
    h3::after {
    font-size: clamp(1.55rem, 8vw, 2.2rem);
  }

  body.travel-scene-playing-mode
    .travel-scene-id-sea_02_sunset
    .travel-intro-progress {
    top: 9px !important;
    width: min(190px, 46vw) !important;
    height: 6px !important;
  }
}

/* Sunset panorama anchored objects v2: transparent canvases follow the same camera as the art. */
.travel-scene-id-sea_02_sunset .travel-sunset-static-object {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 8 !important;
  display: block !important;
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  mix-blend-mode: normal;
  filter: saturate(0.92) contrast(0.96) sepia(0.04)
    drop-shadow(0 8px 12px rgba(68, 37, 34, 0.16));
  transform-origin: center center !important;
  animation: sunsetBasicPanV2 260s ease-in-out infinite !important;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.travel-scene-id-sea_02_sunset .travel-sunset-boat-static {
  z-index: 9 !important;
  animation:
    sunsetBasicPanV2 260s ease-in-out infinite,
    sunsetBoatVisibilityV2 260s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
  z-index: 9 !important;
  animation:
    sunsetBasicPanV2 260s ease-in-out infinite,
    sunsetLighthouseVisibilityV2 260s ease-in-out infinite !important;
}

/* Sunset layer effects v2: the reflection is anchored to the sun in the panorama. */
.travel-scene-id-sea_02_sunset .travel-sunset-layer-effect {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  transform-origin: center center !important;
  will-change: opacity, transform;
}

.travel-scene-id-sea_02_sunset .travel-sunset-light-reflection-static {
  z-index: 5 !important;
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(1.08) brightness(1.08);
  animation:
    sunsetBasicPanV2 260s ease-in-out infinite,
    sunsetReflectionVisibilityV2 260s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  transform-origin: center center;
  will-change: opacity, transform;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
  z-index: 6 !important;
  opacity: 0;
  mix-blend-mode: normal;
  filter: saturate(1.04) brightness(1.03);
  animation: sunsetCloudPassV1 92s ease-in-out infinite;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-01 {
  animation-delay: 0s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-02 {
  animation-delay: 7s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-03 {
  animation-delay: 15s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-04 {
  animation-delay: 24s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-05 {
  animation-delay: 33s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-06 {
  animation-delay: 43s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-07 {
  animation-delay: 52s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-08 {
  animation-delay: 61s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-09 {
  animation-delay: 70s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-10 {
  animation-delay: 78s;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-11 {
  animation-delay: 86s;
}

.travel-scene-id-sea_02_sunset .travel-sunset-bird-fullframe {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  animation:
    sunsetBirdPathV3 300s linear infinite,
    sunsetBirdFramesTwiceV3 300s steps(1, end) infinite;
  backface-visibility: hidden;
  will-change: opacity, transform, background-image;
}

.travel-scene-id-sea_02_sunset .travel-sunset-bird-preload {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-bird-preload img {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

@keyframes sunsetBoatVisibilityV2 {
  0%,
  38%,
  62%,
  100% {
    opacity: 0;
  }

  44%,
  54% {
    opacity: 0.98;
  }
}

@keyframes sunsetLighthouseVisibilityV2 {
  0%,
  5%,
  34%,
  68%,
  96%,
  100% {
    opacity: 0;
  }

  9%,
  29%,
  74%,
  92% {
    opacity: 0.96;
  }
}

@keyframes sunsetReflectionVisibilityV2 {
  0%,
  6%,
  30%,
  36%,
  66%,
  72%,
  100% {
    opacity: 0.68;
  }

  10%,
  24%,
  42%,
  60%,
  78%,
  94% {
    opacity: 0;
  }
}

@keyframes sunsetCloudPassV1 {
  0%,
  8% {
    opacity: 0;
    transform: translate3d(-1.4%, -0.5%, 0) scale(1);
  }

  14%,
  28% {
    opacity: 0.46;
    transform: translate3d(0.4%, -0.9%, 0) scale(1.015);
  }

  39% {
    opacity: 0.2;
    transform: translate3d(2.2%, -1.4%, 0) scale(1.025);
  }

  48%,
  100% {
    opacity: 0;
    transform: translate3d(4%, -1.2%, 0) scale(1.03);
  }
}

@keyframes sunsetBirdPathV3 {
  0%,
  1.45% {
    opacity: 0;
    transform: translate3d(1.4%, -14%, 0) scale(0.94);
  }

  1.65% {
    opacity: 0.64;
    transform: translate3d(1%, -14%, 0) scale(0.94);
  }

  3.05% {
    opacity: 0.78;
    transform: translate3d(0.1%, -16%, 0) scale(0.95);
  }

  4.45% {
    opacity: 0.7;
    transform: translate3d(-0.9%, -13.5%, 0) scale(0.94);
  }

  4.95%,
  49.4% {
    opacity: 0;
    transform: translate3d(-1.4%, -12.5%, 0) scale(0.93);
  }

  49.65% {
    opacity: 0.62;
    transform: translate3d(1.2%, -15%, 0) scale(0.94);
  }

  51.05% {
    opacity: 0.78;
    transform: translate3d(0.15%, -17%, 0) scale(0.95);
  }

  52.45% {
    opacity: 0.68;
    transform: translate3d(-0.95%, -14.2%, 0) scale(0.94);
  }

  52.95%,
  100% {
    opacity: 0;
    transform: translate3d(-1.5%, -13%, 0) scale(0.93);
  }
}

@keyframes sunsetBirdFramesTwiceV3 {
  0%,
  1.64%,
  4.96%,
  49.64%,
  52.96%,
  100% {
    background-image: none;
  }
  1.65%,
  1.74% {
    background-image: url('assets/effects/sunset_bird_01.png?v=sunset-bird-sequence-v3');
  }
  1.75%,
  1.84% {
    background-image: url('assets/effects/sunset_bird_02.png?v=sunset-bird-sequence-v3');
  }
  1.85%,
  1.94% {
    background-image: url('assets/effects/sunset_bird_03.png?v=sunset-bird-sequence-v3');
  }
  1.95%,
  2.04% {
    background-image: url('assets/effects/sunset_bird_04.png?v=sunset-bird-sequence-v3');
  }
  2.05%,
  2.14% {
    background-image: url('assets/effects/sunset_bird_05.png?v=sunset-bird-sequence-v3');
  }
  2.15%,
  2.24% {
    background-image: url('assets/effects/sunset_bird_06.png?v=sunset-bird-sequence-v3');
  }
  2.25%,
  2.34% {
    background-image: url('assets/effects/sunset_bird_07.png?v=sunset-bird-sequence-v3');
  }
  2.35%,
  2.44% {
    background-image: url('assets/effects/sunset_bird_08.png?v=sunset-bird-sequence-v3');
  }
  2.45%,
  2.54% {
    background-image: url('assets/effects/sunset_bird_09.png?v=sunset-bird-sequence-v3');
  }
  2.55%,
  2.64% {
    background-image: url('assets/effects/sunset_bird_10.png?v=sunset-bird-sequence-v3');
  }
  2.65%,
  2.74% {
    background-image: url('assets/effects/sunset_bird_11.png?v=sunset-bird-sequence-v3');
  }
  2.75%,
  2.84% {
    background-image: url('assets/effects/sunset_bird_12.png?v=sunset-bird-sequence-v3');
  }
  2.85%,
  2.94% {
    background-image: url('assets/effects/sunset_bird_13.png?v=sunset-bird-sequence-v3');
  }
  2.95%,
  3.04% {
    background-image: url('assets/effects/sunset_bird_14.png?v=sunset-bird-sequence-v3');
  }
  3.05%,
  3.14% {
    background-image: url('assets/effects/sunset_bird_15.png?v=sunset-bird-sequence-v3');
  }
  3.15%,
  3.24% {
    background-image: url('assets/effects/sunset_bird_16.png?v=sunset-bird-sequence-v3');
  }
  3.25%,
  3.34% {
    background-image: url('assets/effects/sunset_bird_17.png?v=sunset-bird-sequence-v3');
  }
  3.35%,
  3.44% {
    background-image: url('assets/effects/sunset_bird_18.png?v=sunset-bird-sequence-v3');
  }
  3.45%,
  3.54% {
    background-image: url('assets/effects/sunset_bird_19.png?v=sunset-bird-sequence-v3');
  }
  3.55%,
  3.64% {
    background-image: url('assets/effects/sunset_bird_20.png?v=sunset-bird-sequence-v3');
  }
  3.65%,
  3.74% {
    background-image: url('assets/effects/sunset_bird_21.png?v=sunset-bird-sequence-v3');
  }
  3.75%,
  3.84% {
    background-image: url('assets/effects/sunset_bird_22.png?v=sunset-bird-sequence-v3');
  }
  3.85%,
  3.94% {
    background-image: url('assets/effects/sunset_bird_23.png?v=sunset-bird-sequence-v3');
  }
  3.95%,
  4.04% {
    background-image: url('assets/effects/sunset_bird_24.png?v=sunset-bird-sequence-v3');
  }
  4.05%,
  4.14% {
    background-image: url('assets/effects/sunset_bird_25.png?v=sunset-bird-sequence-v3');
  }
  4.15%,
  4.24% {
    background-image: url('assets/effects/sunset_bird_26.png?v=sunset-bird-sequence-v3');
  }
  4.25%,
  4.34% {
    background-image: url('assets/effects/sunset_bird_27.png?v=sunset-bird-sequence-v3');
  }
  4.35%,
  4.95% {
    background-image: url('assets/effects/sunset_bird_28.png?v=sunset-bird-sequence-v3');
  }
  49.65%,
  49.74% {
    background-image: url('assets/effects/sunset_bird_01.png?v=sunset-bird-sequence-v3');
  }
  49.75%,
  49.84% {
    background-image: url('assets/effects/sunset_bird_02.png?v=sunset-bird-sequence-v3');
  }
  49.85%,
  49.94% {
    background-image: url('assets/effects/sunset_bird_03.png?v=sunset-bird-sequence-v3');
  }
  49.95%,
  50.04% {
    background-image: url('assets/effects/sunset_bird_04.png?v=sunset-bird-sequence-v3');
  }
  50.05%,
  50.14% {
    background-image: url('assets/effects/sunset_bird_05.png?v=sunset-bird-sequence-v3');
  }
  50.15%,
  50.24% {
    background-image: url('assets/effects/sunset_bird_06.png?v=sunset-bird-sequence-v3');
  }
  50.25%,
  50.34% {
    background-image: url('assets/effects/sunset_bird_07.png?v=sunset-bird-sequence-v3');
  }
  50.35%,
  50.44% {
    background-image: url('assets/effects/sunset_bird_08.png?v=sunset-bird-sequence-v3');
  }
  50.45%,
  50.54% {
    background-image: url('assets/effects/sunset_bird_09.png?v=sunset-bird-sequence-v3');
  }
  50.55%,
  50.64% {
    background-image: url('assets/effects/sunset_bird_10.png?v=sunset-bird-sequence-v3');
  }
  50.65%,
  50.74% {
    background-image: url('assets/effects/sunset_bird_11.png?v=sunset-bird-sequence-v3');
  }
  50.75%,
  50.84% {
    background-image: url('assets/effects/sunset_bird_12.png?v=sunset-bird-sequence-v3');
  }
  50.85%,
  50.94% {
    background-image: url('assets/effects/sunset_bird_13.png?v=sunset-bird-sequence-v3');
  }
  50.95%,
  51.04% {
    background-image: url('assets/effects/sunset_bird_14.png?v=sunset-bird-sequence-v3');
  }
  51.05%,
  51.14% {
    background-image: url('assets/effects/sunset_bird_15.png?v=sunset-bird-sequence-v3');
  }
  51.15%,
  51.24% {
    background-image: url('assets/effects/sunset_bird_16.png?v=sunset-bird-sequence-v3');
  }
  51.25%,
  51.34% {
    background-image: url('assets/effects/sunset_bird_17.png?v=sunset-bird-sequence-v3');
  }
  51.35%,
  51.44% {
    background-image: url('assets/effects/sunset_bird_18.png?v=sunset-bird-sequence-v3');
  }
  51.45%,
  51.54% {
    background-image: url('assets/effects/sunset_bird_19.png?v=sunset-bird-sequence-v3');
  }
  51.55%,
  51.64% {
    background-image: url('assets/effects/sunset_bird_20.png?v=sunset-bird-sequence-v3');
  }
  51.65%,
  51.74% {
    background-image: url('assets/effects/sunset_bird_21.png?v=sunset-bird-sequence-v3');
  }
  51.75%,
  51.84% {
    background-image: url('assets/effects/sunset_bird_22.png?v=sunset-bird-sequence-v3');
  }
  51.85%,
  51.94% {
    background-image: url('assets/effects/sunset_bird_23.png?v=sunset-bird-sequence-v3');
  }
  51.95%,
  52.04% {
    background-image: url('assets/effects/sunset_bird_24.png?v=sunset-bird-sequence-v3');
  }
  52.05%,
  52.14% {
    background-image: url('assets/effects/sunset_bird_25.png?v=sunset-bird-sequence-v3');
  }
  52.15%,
  52.24% {
    background-image: url('assets/effects/sunset_bird_26.png?v=sunset-bird-sequence-v3');
  }
  52.25%,
  52.34% {
    background-image: url('assets/effects/sunset_bird_27.png?v=sunset-bird-sequence-v3');
  }
  52.35%,
  52.95% {
    background-image: url('assets/effects/sunset_bird_28.png?v=sunset-bird-sequence-v3');
  }
}

/* Sunset object placement v3: use full transparent canvases from the latest asset pack. */
.travel-scene-id-sea_02_sunset .travel-sunset-boat-static,
.travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: max(88vw, 112dvh) !important;
  object-fit: fill !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  animation: sunsetBasicPanV2 260s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-boat-static {
  z-index: 9 !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
  z-index: 10 !important;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-sunset-boat-static,
  .travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
    height: max(104vw, 112dvh) !important;
  }
}

/* Sunset layer pack v1: synchronized panorama, boat, lighthouse, reflection and clouds. */
body.travel-scene-playing-mode
  .travel-scene-id-sea_01_clear
  .travel-scene-header
  h3::after {
  content: '맑은 바다' !important;
}

.travel-scene-id-sea_02_sunset .travel-playback,
.travel-scene-id-sea_02_sunset .travel-sunset-original-only {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: #f6d6b5 !important;
  background-image: none !important;
  isolation: isolate !important;
}

.travel-scene-id-sea_02_sunset .travel-playback::before,
.travel-scene-id-sea_02_sunset .travel-playback::after,
.travel-scene-id-sea_02_sunset .travel-sunset-original-only::before,
.travel-scene-id-sea_02_sunset .travel-sunset-original-only::after,
.travel-scene-id-sea_02_sunset .travel-layer-clouds,
.travel-scene-id-sea_02_sunset .sunset-sea-color-cloud,
.travel-scene-id-sea_02_sunset .travel-layer-waves,
.travel-scene-id-sea_02_sunset .travel-layer-waves::before,
.travel-scene-id-sea_02_sunset .travel-layer-waves::after,
.travel-scene-id-sea_02_sunset .travel-layer-light,
.travel-scene-id-sea_02_sunset .sunset-sea-reflection-layer,
.travel-scene-id-sea_02_sunset .sunset-sea-bird-layer,
.travel-scene-id-sea_02_sunset .sunset-world-object,
.travel-scene-id-sea_02_sunset .travel-full-background,
.travel-scene-id-sea_02_sunset .travel-full-vignette,
.travel-scene-id-sea_02_sunset .travel-sunset-bird-fullframe,
.travel-scene-id-sea_02_sunset .travel-sunset-bird-preload {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  filter: none !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-original-image,
.travel-scene-id-sea_02_sunset .travel-sunset-static-object,
.travel-scene-id-sea_02_sunset .travel-sunset-layer-effect,
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  backface-visibility: hidden !important;
  transform-origin: center center !important;
  will-change: opacity, transform !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-original-image {
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: saturate(1.02) contrast(1.01) brightness(1.01) !important;
  mix-blend-mode: normal !important;
  animation: sunsetLayerPackCameraV1 300s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-light-reflection-static {
  z-index: 5 !important;
  opacity: 0.82 !important;
  visibility: visible !important;
  mix-blend-mode: screen !important;
  filter: saturate(0.9) brightness(1.02) blur(0.1px) !important;
  animation: sunsetLayerPackCameraV1 300s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-boat-static,
.travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
  z-index: 8 !important;
  opacity: 0.98 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: saturate(0.96) contrast(0.98) brightness(0.99)
    drop-shadow(0 8px 12px rgba(83, 39, 32, 0.13)) !important;
  animation: sunsetLayerPackCameraV1 300s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
  z-index: 4 !important;
  opacity: 0;
  visibility: visible !important;
  mix-blend-mode: soft-light !important;
  filter: saturate(1.16) hue-rotate(318deg) brightness(1.12) blur(0.15px) !important;
  animation:
    sunsetLayerPackCameraV1 300s ease-in-out infinite,
    sunsetLayerPackCloudFadeV1 44s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-01 {
  animation-delay: 0s, 0s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-02 {
  animation-delay: 0s, 6s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-03 {
  animation-delay: 0s, 12s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-04 {
  animation-delay: 0s, 18s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-05 {
  animation-delay: 0s, 24s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-06 {
  animation-delay: 0s, 30s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-07 {
  animation-delay: 0s, 36s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-08 {
  animation-delay: 0s, 42s !important;
}

@keyframes sunsetLayerPackCameraV1 {
  0%,
  7% {
    transform: translate3d(-50%, -50%, 0) scale(1.02);
  }

  22% {
    transform: translate3d(-69%, -50%, 0) scale(1.045);
  }

  36% {
    transform: translate3d(-50%, -50%, 0) scale(1.02);
  }

  52% {
    transform: translate3d(-31%, -50%, 0) scale(1.045);
  }

  68% {
    transform: translate3d(-50%, -51.5%, 0) scale(1.075);
  }

  84% {
    transform: translate3d(-64%, -49.5%, 0) scale(1.04);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) scale(1.02);
  }
}

@keyframes sunsetLayerPackCloudFadeV1 {
  0%,
  12% {
    opacity: 0;
  }

  20%,
  42% {
    opacity: 0.5;
  }

  54% {
    opacity: 0.2;
  }

  68%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-sunset-original-image,
  .travel-scene-id-sea_02_sunset .travel-sunset-static-object,
  .travel-scene-id-sea_02_sunset .travel-sunset-layer-effect,
  .travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
    width: max(260vw, 280dvh) !important;
  }
}

/* Sunset sea v8: rhythmic camera motion, intermittent clouds, and 5-frame wave shimmer. */
.travel-scene-id-sea_02_sunset .travel-sunset-bird-fullframe,
.travel-scene-id-sea_02_sunset .travel-sunset-bird-preload,
.travel-scene-id-sea_02_sunset .sunset-sea-bird-layer,
.travel-scene-id-sea_02_sunset .sunset-sea-bird-frame {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-wave-frame {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  transform-origin: center center !important;
  will-change: opacity, transform !important;
  z-index: 6 !important;
  opacity: 0;
  mix-blend-mode: screen !important;
  filter: saturate(1.06) contrast(1.05) brightness(1.1) blur(0.04px) !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-original-image,
.travel-scene-id-sea_02_sunset .travel-sunset-light-reflection-static,
.travel-scene-id-sea_02_sunset .travel-sunset-boat-static,
.travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
  animation: sunsetRhythmicCameraV8 128s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-original-image {
  filter: saturate(1.04) contrast(1.02) brightness(1.02) !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
  z-index: 4 !important;
  opacity: 0;
  mix-blend-mode: screen !important;
  filter: saturate(1.28) hue-rotate(322deg) brightness(1.28) contrast(1.08)
    blur(0.04px) !important;
  animation:
    sunsetCloudCameraV8 132s ease-in-out infinite,
    sunsetCloudFadeV8 30s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-01 {
  animation-delay: 0s, 0s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-02 {
  animation-delay: -3s, 4s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-03 {
  animation-delay: -6s, 8s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-04 {
  animation-delay: -9s, 12s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-05 {
  animation-delay: -12s, 16s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-06 {
  animation-delay: -15s, 20s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-07 {
  animation-delay: -18s, 24s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-08 {
  animation-delay: -21s, 28s !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-01 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetWaveFrame01V8 2.8s steps(1, end) infinite !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-02 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetWaveFrame02V8 2.8s steps(1, end) infinite !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-03 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetWaveFrame03V8 2.8s steps(1, end) infinite !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-04 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetWaveFrame04V8 2.8s steps(1, end) infinite !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-05 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetWaveFrame05V8 2.8s steps(1, end) infinite !important;
}

@keyframes sunsetRhythmicCameraV8 {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1.04);
  }

  8% {
    transform: translate3d(-51%, -49.2%, 0) scale(1.11);
  }

  18% {
    transform: translate3d(-63%, -49.8%, 0) scale(1.06);
  }

  29% {
    transform: translate3d(-72%, -50.4%, 0) scale(1.075);
  }

  39% {
    transform: translate3d(-59%, -50%, 0) scale(1.04);
  }

  50% {
    transform: translate3d(-50%, -49%, 0) scale(1.12);
  }

  62% {
    transform: translate3d(-39%, -50.6%, 0) scale(1.055);
  }

  75% {
    transform: translate3d(-28%, -50.2%, 0) scale(1.08);
  }

  88% {
    transform: translate3d(-42%, -49.4%, 0) scale(1.05);
  }

  100% {
    transform: translate3d(-50%, -50%, 0) scale(1.04);
  }
}

@keyframes sunsetCloudCameraV8 {
  0% {
    transform: translate3d(-51%, -51%, 0) scale(1.08);
  }

  20% {
    transform: translate3d(-66%, -50.4%, 0) scale(1.1);
  }

  38% {
    transform: translate3d(-56%, -49.5%, 0) scale(1.12);
  }

  57% {
    transform: translate3d(-45%, -50.8%, 0) scale(1.13);
  }

  78% {
    transform: translate3d(-31%, -49.8%, 0) scale(1.1);
  }

  100% {
    transform: translate3d(-51%, -51%, 0) scale(1.08);
  }
}

@keyframes sunsetCloudFadeV8 {
  0%,
  9% {
    opacity: 0;
  }

  18%,
  38% {
    opacity: 0.78;
  }

  48% {
    opacity: 0.34;
  }

  58%,
  100% {
    opacity: 0;
  }
}

@keyframes sunsetWaveFrame01V8 {
  0%,
  17.99%,
  90%,
  100% {
    opacity: 0.62;
  }

  18%,
  89.99% {
    opacity: 0;
  }
}

@keyframes sunsetWaveFrame02V8 {
  0%,
  17.99%,
  36%,
  100% {
    opacity: 0;
  }

  18%,
  35.99% {
    opacity: 0.58;
  }
}

@keyframes sunsetWaveFrame03V8 {
  0%,
  35.99%,
  54%,
  100% {
    opacity: 0;
  }

  36%,
  53.99% {
    opacity: 0.66;
  }
}

@keyframes sunsetWaveFrame04V8 {
  0%,
  53.99%,
  72%,
  100% {
    opacity: 0;
  }

  54%,
  71.99% {
    opacity: 0.62;
  }
}

@keyframes sunsetWaveFrame05V8 {
  0%,
  71.99%,
  90%,
  100% {
    opacity: 0;
  }

  72%,
  89.99% {
    opacity: 0.58;
  }
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-sunset-wave-frame {
    width: max(260vw, 280dvh) !important;
  }
}

/* Sunset original layer pass: keep supplied cloud/wave colors and 3000x1200 alignment. */
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetOriginalCloudFadeV1 44s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-01 {
  animation-delay: 0s, 0s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-02 {
  animation-delay: 0s, 5.5s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-03 {
  animation-delay: 0s, 11s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-04 {
  animation-delay: 0s, 16.5s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-05 {
  animation-delay: 0s, 22s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-06 {
  animation-delay: 0s, 27.5s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-07 {
  animation-delay: 0s, 33s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-08 {
  animation-delay: 0s, 38.5s !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-wave-frame {
  top: 50.7% !important;
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  z-index: 3 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-light-reflection-static {
  z-index: 5 !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-01 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetOriginalWaveFrame01V1 6.2s steps(1, end) infinite !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-02 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetOriginalWaveFrame02V1 6.2s steps(1, end) infinite !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-03 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetOriginalWaveFrame03V1 6.2s steps(1, end) infinite !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-04 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetOriginalWaveFrame04V1 6.2s steps(1, end) infinite !important;
}

.travel-scene-id-sea_02_sunset
  .sunset-sea-stage.is-playing
  .travel-sunset-wave-frame-05 {
  animation:
    sunsetRhythmicCameraV8 128s ease-in-out infinite,
    sunsetOriginalWaveFrame05V1 6.2s steps(1, end) infinite !important;
}

@keyframes sunsetOriginalCloudFadeV1 {
  0%,
  10% {
    opacity: 0;
  }

  18%,
  46% {
    opacity: 1;
  }

  58% {
    opacity: 0.42;
  }

  70%,
  100% {
    opacity: 0;
  }
}

@keyframes sunsetOriginalWaveFrame01V1 {
  0%,
  19.99%,
  100% {
    opacity: 1;
  }

  20%,
  99.99% {
    opacity: 0;
  }
}

@keyframes sunsetOriginalWaveFrame02V1 {
  0%,
  19.99%,
  40%,
  100% {
    opacity: 0;
  }

  20%,
  39.99% {
    opacity: 1;
  }
}

@keyframes sunsetOriginalWaveFrame03V1 {
  0%,
  39.99%,
  60%,
  100% {
    opacity: 0;
  }

  40%,
  59.99% {
    opacity: 1;
  }
}

@keyframes sunsetOriginalWaveFrame04V1 {
  0%,
  59.99%,
  80%,
  100% {
    opacity: 0;
  }

  60%,
  79.99% {
    opacity: 1;
  }
}

@keyframes sunsetOriginalWaveFrame05V1 {
  0%,
  79.99%,
  100% {
    opacity: 0;
  }

  80%,
  99.99% {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass,
  .travel-scene-id-sea_02_sunset .travel-sunset-wave-frame {
    width: max(260vw, 280dvh) !important;
  }

  .travel-scene-id-sea_02_sunset .travel-sunset-wave-frame {
    top: 51.2% !important;
  }
}

body .auth-panel {
  position: relative;
  z-index: 30001 !important;
  pointer-events: auto !important;
}

body .auth-toggle-button {
  pointer-events: auto !important;
}

body .auth-popover {
  position: fixed !important;
  top: 82px;
  right: max(16px, env(safe-area-inset-right));
  z-index: 30002 !important;
  max-height: calc(100dvh - 92px);
  overflow: auto;
}

body.report-comic-mode .top-bar,
body.instant-reading-mode .top-bar,
body.travel-healing-mode .top-bar,
body.travel-scene-playing-mode .top-bar,
body.monetization-mode .top-bar {
  overflow: visible !important;
  z-index: 30000 !important;
  pointer-events: auto !important;
}

/* Sunset placement v9: lift lighthouse back onto the right mountain ridge and begin waves from mid-sea. */
.travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
  top: 43.5% !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-wave-frame {
  top: 56.5% !important;
  z-index: 3 !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-light-reflection-static {
  z-index: 5 !important;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
    top: 44.5% !important;
  }

  .travel-scene-id-sea_02_sunset .travel-sunset-wave-frame {
    top: 57.5% !important;
  }
}

@media (max-width: 600px) {
  body .auth-popover {
    top: 72px;
    right: max(10px, env(safe-area-inset-right));
    width: min(300px, calc(100vw - 20px));
  }
}

/* Sunset placement v11: land lighthouse, visibly pass clouds, and lower shore waves. */
.travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
  top: 55.6% !important;
  z-index: 9 !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
  top: 50% !important;
  left: 50% !important;
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  z-index: 4 !important;
  opacity: 0;
  mix-blend-mode: normal !important;
  filter: none !important;
  animation: sunsetCloudSequentialPassV11 42s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-01 {
  animation-delay: 0s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-02 {
  animation-delay: 5.25s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-03 {
  animation-delay: 10.5s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-04 {
  animation-delay: 15.75s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-05 {
  animation-delay: 21s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-06 {
  animation-delay: 26.25s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-07 {
  animation-delay: 31.5s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-08 {
  animation-delay: 36.75s !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-wave-frame {
  top: 70% !important;
  z-index: 3 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-light-reflection-static {
  z-index: 5 !important;
}

@keyframes sunsetCloudSequentialPassV11 {
  0% {
    opacity: 0;
    transform: translate3d(-57%, -52.8%, 0) scale(1.07);
  }

  12% {
    opacity: 0;
    transform: translate3d(-56%, -52.4%, 0) scale(1.075);
  }

  24% {
    opacity: 0.96;
    transform: translate3d(-53%, -51.8%, 0) scale(1.09);
  }

  42% {
    opacity: 0.9;
    transform: translate3d(-48%, -51.2%, 0) scale(1.105);
  }

  58% {
    opacity: 0.28;
    transform: translate3d(-44%, -50.8%, 0) scale(1.11);
  }

  70%,
  100% {
    opacity: 0;
    transform: translate3d(-41%, -50.4%, 0) scale(1.115);
  }
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
    top: 56.8% !important;
  }

  .travel-scene-id-sea_02_sunset .travel-sunset-wave-frame {
    top: 72% !important;
  }
}

/* Sunset cloud/lighthouse v12: use the refreshed 8 cloud layers and keep the
   full-canvas lighthouse locked to the panorama's mountain coordinates. */
.travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static {
  top: 50% !important;
  left: 50% !important;
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform-origin: center center !important;
  z-index: 9 !important;
  opacity: 0.98 !important;
  visibility: visible !important;
  animation: sunsetRhythmicCameraV8 128s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
  top: 50% !important;
  left: 50% !important;
  width: max(220vw, 280dvh) !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  z-index: 4 !important;
  opacity: 0;
  visibility: visible !important;
  animation: sunsetCloudSequentialPassV12 48s ease-in-out infinite !important;
}

.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-01 {
  animation-delay: 0s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-02 {
  animation-delay: 6s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-03 {
  animation-delay: 12s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-04 {
  animation-delay: 18s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-05 {
  animation-delay: 24s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-06 {
  animation-delay: 30s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-07 {
  animation-delay: 36s !important;
}
.travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass-08 {
  animation-delay: 42s !important;
}

@keyframes sunsetCloudSequentialPassV12 {
  0%,
  15% {
    opacity: 0;
    transform: translate3d(-58%, -52.5%, 0) scale(1.035);
  }

  28% {
    opacity: 0.9;
    transform: translate3d(-54%, -52%, 0) scale(1.055);
  }

  48% {
    opacity: 0.88;
    transform: translate3d(-49%, -51.3%, 0) scale(1.08);
  }

  66% {
    opacity: 0.22;
    transform: translate3d(-45%, -50.8%, 0) scale(1.095);
  }

  78%,
  100% {
    opacity: 0;
    transform: translate3d(-42%, -50.4%, 0) scale(1.105);
  }
}

@media (max-width: 600px) {
  .travel-scene-id-sea_02_sunset .travel-sunset-lighthouse-static,
  .travel-scene-id-sea_02_sunset .travel-sunset-cloud-pass {
    top: 50% !important;
    left: 50% !important;
    width: max(260vw, 280dvh) !important;
  }
}

/* Cliff sea: animate only the panorama layer while all UI remains fixed. */
.travel-scene-id-sea_04_cliff .travel-scene-page,
body.travel-scene-playing-mode
  .travel-scene-id-sea_04_cliff
  .travel-scene-page {
  position: relative;
  overflow: hidden;
  min-height: calc(100dvh - var(--header-height, 72px));
  background: #eef7fb;
}

.travel-scene-id-sea_04_cliff .travel-scene-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  min-height: 0;
  background: #eef7fb;
}

.travel-scene-id-sea_04_cliff .travel-playback {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #eef7fb;
}

.travel-scene-id-sea_04_cliff .travel-playback::before,
.travel-scene-id-sea_04_cliff .travel-playback::after {
  content: none !important;
  display: none !important;
}

.travel-scene-id-sea_04_cliff .travel-layer-clouds,
.travel-scene-id-sea_04_cliff .travel-layer-waves,
.travel-scene-id-sea_04_cliff .travel-layer-waves::before,
.travel-scene-id-sea_04_cliff .travel-layer-waves::after,
.travel-scene-id-sea_04_cliff .travel-layer-light {
  display: none !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
}

.travel-scene-id-sea_04_cliff .travel-scene-header,
body.travel-scene-playing-mode
  .travel-scene-id-sea_04_cliff
  .travel-scene-header {
  left: max(18px, env(safe-area-inset-left)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  transform: none !important;
  max-width: calc(100vw - 36px);
}

.travel-scene-id-sea_04_cliff .travel-scene-header h3 {
  max-width: min(560px, calc(100vw - 36px));
  overflow: visible;
  white-space: normal;
  word-break: keep-all;
}

.travel-scene-id-sea_04_cliff .travel-scene-controls {
  max-width: min(360px, calc(100vw - 36px));
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_04_cliff
  .travel-session-progress {
  position: fixed !important;
  top: var(--header-height, 72px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 650 !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 8px 18px rgba(25, 52, 61, 0.18) !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_04_cliff
  .travel-session-progress-fill {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(255, 246, 196, 0.95),
    rgba(150, 224, 255, 0.95)
  ) !important;
  box-shadow: none !important;
  transform-origin: left center !important;
  animation: travelIntroFill var(--travel-intro-duration, 300s) linear forwards !important;
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_04_cliff
  .travel-scene-page
  .travel-actions {
  left: max(14px, env(safe-area-inset-left)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: calc(100vw - 28px) !important;
  transform: none !important;
  overflow: visible;
}

@media (max-width: 600px) {
  .travel-scene-id-sea_04_cliff .travel-scene-header,
  body.travel-scene-playing-mode
    .travel-scene-id-sea_04_cliff
    .travel-scene-header {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    max-width: calc(100vw - 24px);
  }

  body.travel-scene-playing-mode
    .travel-scene-id-sea_04_cliff
    .travel-scene-page
    .travel-actions {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  body.travel-scene-playing-mode
    .travel-scene-id-sea_04_cliff
    .travel-session-progress {
    top: var(--header-height, 72px) !important;
    height: 6px !important;
  }
}

/* Cliff sea public route: shared 90s panorama loop. */
.travel-scene-id-sea_04_cliff {
  --cliff-route-duration: 90s;
}

.travel-scene-id-sea_04_cliff .travel-scene-page::after {
  content: none !important;
  display: none !important;
}

.travel-scene-id-sea_04_cliff .travel-full-vignette {
  display: none !important;
}

.travel-scene-id-sea_04_cliff .cliff-route-camera {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #eaf7fb;
}

.travel-scene-id-sea_04_cliff .cliff-route-shot {
  position: absolute;
  inset: -5% -13%;
  display: block;
  background-image: var(--cliff-route-image);
  background-repeat: no-repeat;
  background-position: 50% 52%;
  background-size: auto 108%;
  opacity: 0;
  transform: scale(1.02) translate3d(0, 0, 0);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: opacity, background-position, transform;
  animation-duration: var(--cliff-route-duration, 90s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.travel-scene-id-sea_04_cliff .cliff-route-shot-center {
  opacity: 1;
  animation-name: cliffRouteCenter90s;
}

.travel-scene-id-sea_04_cliff .cliff-route-shot-left {
  animation-name: cliffRouteLeft90s;
  background-size: auto 112%;
}

.travel-scene-id-sea_04_cliff .cliff-route-shot-left01 {
  animation-name: cliffRouteLeftOne90s;
  background-size: auto 112%;
}

.travel-scene-id-sea_04_cliff .cliff-route-shot-left02 {
  animation-name: cliffRouteLeftTwo90s;
  background-size: auto 112%;
}

.travel-scene-id-sea_04_cliff .cliff-route-preload {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@keyframes cliffRouteCenter90s {
  0%,
  4.84% {
    opacity: 1;
    background-position: 50% 52%;
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  12.9%,
  16.13% {
    opacity: 1;
    background-position: 98% 52%;
    transform: scale(1.042) translate3d(0, -1px, 0);
  }

  24.19% {
    opacity: 1;
    background-position: 50% 52%;
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  26.6%,
  75.8% {
    opacity: 0;
    background-position: 50% 52%;
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  83.87% {
    opacity: 1;
    background-position: 50% 52%;
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  91.94% {
    opacity: 1;
    background-position: 98% 52%;
    transform: scale(1.042) translate3d(0, -1px, 0);
  }

  100% {
    opacity: 1;
    background-position: 50% 52%;
    transform: scale(1.02) translate3d(0, 0, 0);
  }
}

@keyframes cliffRouteLeft90s {
  0%,
  24.19% {
    opacity: 0;
    background-position: 58% 53%;
    transform: scale(1.04) translate3d(0, 1px, 0);
  }

  26.6% {
    opacity: 1;
    background-position: 54% 53%;
    transform: scale(1.04) translate3d(0, 1px, 0);
  }

  32.26% {
    opacity: 1;
    background-position: 46% 53%;
    transform: scale(1.043) translate3d(0, 1px, 0);
  }

  34.7%,
  67.74% {
    opacity: 0;
    background-position: 43% 53%;
    transform: scale(1.043) translate3d(0, 1px, 0);
  }

  70.2% {
    opacity: 1;
    background-position: 48% 53%;
    transform: scale(1.04) translate3d(0, 1px, 0);
  }

  75.8% {
    opacity: 1;
    background-position: 56% 53%;
    transform: scale(1.04) translate3d(0, 1px, 0);
  }

  78.2%,
  100% {
    opacity: 0;
    background-position: 58% 53%;
    transform: scale(1.04) translate3d(0, 1px, 0);
  }
}

@keyframes cliffRouteLeftOne90s {
  0%,
  32.26% {
    opacity: 0;
    background-position: 58% 53%;
    transform: scale(1.04) translate3d(0, 1px, 0);
  }

  34.7% {
    opacity: 1;
    background-position: 54% 53%;
    transform: scale(1.04) translate3d(0, 1px, 0);
  }

  40.32% {
    opacity: 1;
    background-position: 45% 53%;
    transform: scale(1.044) translate3d(0, 1px, 0);
  }

  42.75%,
  67.74% {
    opacity: 0;
    background-position: 42% 53%;
    transform: scale(1.044) translate3d(0, 1px, 0);
  }

  70.2%,
  100% {
    opacity: 0;
    background-position: 58% 53%;
    transform: scale(1.04) translate3d(0, 1px, 0);
  }
}

@keyframes cliffRouteLeftTwo90s {
  0%,
  40.32% {
    opacity: 0;
    background-position: 96% 52%;
    transform: scale(1.035) translate3d(0, 0, 0);
  }

  42.75% {
    opacity: 1;
    background-position: 86% 52%;
    transform: scale(1.035) translate3d(0, 0, 0);
  }

  51.61%,
  56.45% {
    opacity: 1;
    background-position: 3% 52%;
    transform: scale(1.045) translate3d(0, -1px, 0);
  }

  67.74% {
    opacity: 1;
    background-position: 94% 52%;
    transform: scale(1.036) translate3d(0, 0, 0);
  }

  70.2%,
  100% {
    opacity: 0;
    background-position: 98% 52%;
    transform: scale(1.035) translate3d(0, 0, 0);
  }
}

@media (max-width: 600px) {
  .travel-scene-id-sea_04_cliff .cliff-route-shot {
    inset: -4% -24%;
    background-size: auto 112%;
  }

  .travel-scene-id-sea_04_cliff .cliff-route-shot-left,
  .travel-scene-id-sea_04_cliff .cliff-route-shot-left01,
  .travel-scene-id-sea_04_cliff .cliff-route-shot-left02 {
    background-size: auto 116%;
  }
}

/* Moonlight sea v1: reuse the timed travel session engine with a calm cinematic route. */
body.travel-scene-playing-mode .travel-scene-id-sea_03_moon .travel-scene-page {
  background: #10192d;
}

.travel-scene-id-sea_03_moon .travel-playback {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 52% 28%,
      rgba(216, 226, 255, 0.24),
      transparent 32%
    ),
    linear-gradient(180deg, #16213b 0%, #21355b 46%, #172940 100%);
}

.travel-scene-id-sea_03_moon .travel-playback::before,
.travel-scene-id-sea_03_moon .travel-playback::after {
  content: none !important;
  display: none !important;
}

.travel-scene-id-sea_03_moon .travel-layer-clouds,
.travel-scene-id-sea_03_moon .travel-layer-waves,
.travel-scene-id-sea_03_moon .travel-layer-waves::before,
.travel-scene-id-sea_03_moon .travel-layer-waves::after,
.travel-scene-id-sea_03_moon .travel-layer-light {
  display: none !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
}

.travel-scene-id-sea_03_moon .travel-full-vignette {
  z-index: 3;
  display: block;
  background:
    radial-gradient(
      circle at 50% 34%,
      transparent 0 46%,
      rgba(9, 16, 29, 0.2) 74%,
      rgba(5, 8, 16, 0.42) 100%
    ),
    linear-gradient(180deg, rgba(7, 10, 24, 0.06), rgba(6, 12, 22, 0.2));
}

.travel-scene-id-sea_03_moon .travel-scene-header,
body.travel-scene-playing-mode
  .travel-scene-id-sea_03_moon
  .travel-scene-header {
  left: max(18px, env(safe-area-inset-left)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  transform: none !important;
  max-width: calc(100vw - 36px);
}

.travel-scene-id-sea_03_moon .travel-scene-header h3 {
  max-width: min(560px, calc(100vw - 36px));
  overflow: visible;
  white-space: normal;
  word-break: keep-all;
}

.travel-scene-id-sea_03_moon .travel-scene-controls {
  max-width: min(360px, calc(100vw - 36px));
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_03_moon
  .travel-session-progress {
  position: fixed !important;
  top: var(--header-height, 72px) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 650 !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 7px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 8px 18px rgba(25, 52, 61, 0.18) !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_03_moon
  .travel-session-progress-fill {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(215, 226, 255, 0.96),
    rgba(142, 190, 255, 0.96)
  ) !important;
  box-shadow: none !important;
  transform-origin: left center !important;
  animation: travelIntroFill var(--travel-intro-duration, 300s) linear forwards !important;
}

body.travel-scene-playing-mode
  .travel-scene-id-sea_03_moon
  .travel-scene-page
  .travel-actions {
  left: max(14px, env(safe-area-inset-left)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: calc(100vw - 28px) !important;
  transform: none !important;
  overflow: visible;
}

.travel-scene-id-sea_03_moon {
  --moon-route-duration: 90s;
}

.travel-scene-id-sea_03_moon .travel-scene-page::after {
  content: none !important;
  display: none !important;
}

.travel-scene-id-sea_03_moon .moon-route-camera {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #111b31;
}

.travel-scene-id-sea_03_moon .moon-route-shot {
  position: absolute;
  inset: -7% -18%;
  display: block;
  background-image: var(--moon-route-image);
  background-repeat: no-repeat;
  background-position: 50% 52%;
  background-size: auto 112%;
  opacity: 0;
  transform: scale(1.025) translate3d(0, 0, 0);
  transform-origin: center center;
  filter: saturate(0.92) brightness(0.86) contrast(1.03);
  backface-visibility: hidden;
  will-change: opacity, background-position, transform, filter;
  animation-duration: var(--moon-route-duration, 90s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.travel-scene-id-sea_03_moon .moon-route-shot-wide {
  opacity: 1;
  animation-name: moonRouteWide90s;
}

.travel-scene-id-sea_03_moon .moon-route-shot-shore {
  animation-name: moonRouteShore90s;
  background-size: auto 118%;
}

.travel-scene-id-sea_03_moon .moon-route-shot-horizon {
  animation-name: moonRouteHorizon90s;
  background-size: auto 110%;
}

.travel-scene-id-sea_03_moon .moon-sea-glow,
.travel-scene-id-sea_03_moon .moon-sea-ripple,
.travel-scene-id-sea_03_moon .moon-sea-mist {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.32;
  will-change: opacity, transform, filter;
}

.travel-scene-id-sea_03_moon .moon-sea-glow {
  background:
    radial-gradient(
      ellipse at 50% 31%,
      rgba(220, 232, 255, 0.42),
      transparent 23%
    ),
    radial-gradient(
      ellipse at 52% 61%,
      rgba(132, 173, 255, 0.24),
      transparent 36%
    );
  animation: moonGlowBreath90s var(--moon-route-duration, 90s) ease-in-out
    infinite;
}

.travel-scene-id-sea_03_moon .moon-sea-ripple {
  inset: 43% -8% -6% -8%;
  background:
    radial-gradient(
      ellipse at 45% 18%,
      rgba(239, 246, 255, 0.24),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 64% 52%,
      rgba(172, 205, 255, 0.18),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      transparent 0 18%,
      rgba(214, 232, 255, 0.14) 48%,
      transparent 100%
    );
  filter: blur(0.4px);
  animation: moonRipple90s 18s ease-in-out infinite alternate;
}

.travel-scene-id-sea_03_moon .moon-sea-mist {
  background:
    radial-gradient(
      ellipse at 18% 35%,
      rgba(206, 219, 255, 0.14),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 82% 25%,
      rgba(234, 239, 255, 0.18),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 58% 74%,
      rgba(157, 187, 231, 0.16),
      transparent 38%
    );
  opacity: 0.22;
  filter: blur(3px);
  animation: moonMistDrift90s var(--moon-route-duration, 90s) ease-in-out
    infinite;
}

.travel-scene-id-sea_03_moon .moon-route-preload {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@keyframes moonRouteWide90s {
  0%,
  10% {
    opacity: 1;
    background-position: 50% 52%;
    transform: scale(1.02) translate3d(0, 0, 0);
    filter: saturate(0.9) brightness(0.84) contrast(1.04);
  }

  22% {
    opacity: 1;
    background-position: 34% 53%;
    transform: scale(1.038) translate3d(0, -4px, 0);
    filter: saturate(0.96) brightness(0.9) contrast(1.05);
  }

  31%,
  63% {
    opacity: 0;
    background-position: 34% 53%;
    transform: scale(1.038) translate3d(0, -4px, 0);
  }

  72% {
    opacity: 0.82;
    background-position: 66% 51%;
    transform: scale(1.034) translate3d(0, 2px, 0);
  }

  88%,
  100% {
    opacity: 1;
    background-position: 50% 52%;
    transform: scale(1.02) translate3d(0, 0, 0);
    filter: saturate(0.9) brightness(0.84) contrast(1.04);
  }
}

@keyframes moonRouteShore90s {
  0%,
  20% {
    opacity: 0;
    background-position: 20% 58%;
    transform: scale(1.06) translate3d(0, 6px, 0);
  }

  31%,
  43% {
    opacity: 0.92;
    background-position: 18% 60%;
    transform: scale(1.075) translate3d(0, 8px, 0);
    filter: saturate(1.02) brightness(0.9) contrast(1.05);
  }

  54%,
  100% {
    opacity: 0;
    background-position: 28% 57%;
    transform: scale(1.055) translate3d(0, 4px, 0);
  }
}

@keyframes moonRouteHorizon90s {
  0%,
  42% {
    opacity: 0;
    background-position: 72% 41%;
    transform: scale(1.015) translate3d(0, -8px, 0);
  }

  53%,
  66% {
    opacity: 0.9;
    background-position: 82% 39%;
    transform: scale(1.035) translate3d(0, -10px, 0);
    filter: saturate(0.92) brightness(0.94) contrast(1.04);
  }

  76%,
  100% {
    opacity: 0;
    background-position: 62% 43%;
    transform: scale(1.02) translate3d(0, -4px, 0);
  }
}

@keyframes moonGlowBreath90s {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1) translate3d(0, 0, 0);
  }

  28% {
    opacity: 0.36;
    transform: scale(1.035) translate3d(-8px, -4px, 0);
  }

  58% {
    opacity: 0.44;
    transform: scale(1.055) translate3d(10px, 6px, 0);
  }

  78% {
    opacity: 0.26;
    transform: scale(1.02) translate3d(0, -3px, 0);
  }
}

@keyframes moonRipple90s {
  0% {
    opacity: 0.18;
    transform: translate3d(-1.6%, 0, 0) scale(1.01);
  }

  50% {
    opacity: 0.34;
    transform: translate3d(1.5%, -0.9%, 0) scale(1.025);
  }

  100% {
    opacity: 0.24;
    transform: translate3d(-0.6%, 0.6%, 0) scale(1.015);
  }
}

@keyframes moonMistDrift90s {
  0%,
  100% {
    opacity: 0.16;
    transform: translate3d(-2%, 0, 0) scale(1.02);
  }

  45% {
    opacity: 0.28;
    transform: translate3d(2.5%, -1%, 0) scale(1.04);
  }

  70% {
    opacity: 0.2;
    transform: translate3d(0.5%, 1%, 0) scale(1.025);
  }
}

/* Moonlight sea route debug v1: seven source images connected with soft crossfades. */
.travel-scene-id-sea_03_moon .moon-route-shot-center,
.travel-scene-id-sea_03_moon .moon-route-shot-left-sea,
.travel-scene-id-sea_03_moon .moon-route-shot-left-harbor,
.travel-scene-id-sea_03_moon .moon-route-shot-left-harbor-deep,
.travel-scene-id-sea_03_moon .moon-route-shot-right-sea,
.travel-scene-id-sea_03_moon .moon-route-shot-right-reflection,
.travel-scene-id-sea_03_moon .moon-route-shot-right-cliff {
  background-size: auto 116%;
  animation-duration: var(--moon-route-duration, 90s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.travel-scene-id-sea_03_moon .moon-route-shot-center {
  opacity: 1;
  animation-name: moonRouteCenterDebug;
}

.travel-scene-id-sea_03_moon .moon-route-shot-left-sea {
  animation-name: moonRouteLeftSeaDebug;
  background-size: auto 114%;
}

.travel-scene-id-sea_03_moon .moon-route-shot-left-harbor {
  animation-name: moonRouteLeftHarborDebug;
  background-size: auto 118%;
}

.travel-scene-id-sea_03_moon .moon-route-shot-left-harbor-deep {
  animation-name: moonRouteLeftHarborDeepDebug;
  background-size: auto 116%;
}

.travel-scene-id-sea_03_moon .moon-route-shot-right-sea {
  animation-name: moonRouteRightSeaDebug;
  background-size: auto 114%;
}

.travel-scene-id-sea_03_moon .moon-route-shot-right-reflection {
  animation-name: moonRouteRightReflectionDebug;
  background-size: auto 116%;
}

.travel-scene-id-sea_03_moon .moon-route-shot-right-cliff {
  animation-name: moonRouteRightCliffDebug;
  background-size: auto 121%;
}

.travel-scene-id-sea_03_moon .moon-moviepy-preview-mode .moon-route-shot {
  inset: -8% -24%;
  background-size: auto 122%;
  animation-duration: var(--moon-route-duration, 300s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  filter: saturate(0.94) brightness(0.9) contrast(1.04);
}

.travel-scene-id-sea_03_moon .moon-moviepy-preview-mode .moon-sea-glow {
  animation: moonMoviepyGlowAlive 5.5s ease-in-out infinite alternate;
}

.travel-scene-id-sea_03_moon .moon-moviepy-preview-mode .moon-sea-ripple {
  opacity: 0.5;
  filter: blur(0.22px) saturate(1.16);
  animation: moonMoviepyRippleAlive 3.4s ease-in-out infinite alternate;
}

.travel-scene-id-sea_03_moon .moon-moviepy-preview-mode .moon-sea-mist {
  animation: moonMoviepyMistAlive 7.5s ease-in-out infinite alternate;
}

.travel-scene-id-sea_03_moon
  .moon-moviepy-preview-mode
  .moon-route-shot-moviepy-01 {
  opacity: 1;
  animation-name: moonMoviepyPreviewShot01;
}

.travel-scene-id-sea_03_moon
  .moon-moviepy-preview-mode
  .moon-route-shot-moviepy-02 {
  animation-name: moonMoviepyPreviewShot02;
  background-size: auto 120%;
}

.travel-scene-id-sea_03_moon
  .moon-moviepy-preview-mode
  .moon-route-shot-moviepy-03 {
  animation-name: moonMoviepyPreviewShot03;
  background-size: auto 124%;
}

.travel-scene-id-sea_03_moon
  .moon-moviepy-preview-mode
  .moon-route-shot-moviepy-04 {
  animation-name: moonMoviepyPreviewShot04;
  background-size: auto 126%;
}

.travel-scene-id-sea_03_moon
  .moon-moviepy-preview-mode
  .moon-route-shot-moviepy-05 {
  animation-name: moonMoviepyPreviewShot05;
  background-size: auto 120%;
}

.travel-scene-id-sea_03_moon
  .moon-moviepy-preview-mode
  .moon-route-shot-moviepy-06 {
  animation-name: moonMoviepyPreviewShot06;
  background-size: auto 123%;
}

@keyframes moonMoviepyPreviewShot01 {
  0% {
    opacity: 1;
    background-position: 36% 54%;
    transform: translate3d(-5.5%, 0, 0) scale(1);
    filter: saturate(0.92) brightness(0.86) contrast(1.04);
  }

  0.9% {
    opacity: 1;
    background-position: 50% 51%;
    transform: translate3d(4.5%, -4px, 0) scale(1.04);
    filter: saturate(0.95) brightness(0.9) contrast(1.05);
  }

  3.2% {
    opacity: 1;
    background-position: 43% 53%;
    transform: translate3d(-1.5%, 2px, 0) scale(1.062);
    filter: saturate(0.98) brightness(0.92) contrast(1.04);
  }

  7.4% {
    opacity: 1;
    background-position: 54% 50%;
    transform: translate3d(4.8%, -5px, 0) scale(1.085);
    filter: saturate(0.98) brightness(0.94) contrast(1.04);
  }

  16.5% {
    opacity: 1;
    background-position: 60% 50%;
    transform: translate3d(6.5%, -4px, 0) scale(1.12);
    filter: saturate(0.98) brightness(0.92) contrast(1.04);
  }

  17.5%,
  100% {
    opacity: 0;
    background-position: 56% 50%;
    transform: translate3d(6.5%, -4px, 0) scale(1.12);
    filter: saturate(0.98) brightness(0.92) contrast(1.04);
  }
}

@keyframes moonMoviepyPreviewShot02 {
  0%,
  16.5% {
    opacity: 0;
    background-position: 42% 52%;
    transform: scale(1.01) translate3d(0, 0, 0);
  }

  17.5%,
  33% {
    opacity: 1;
    background-position: 20% 53%;
    transform: scale(1.11) translate3d(0, -3px, 0);
    filter: saturate(0.94) brightness(0.9) contrast(1.05);
  }

  34%,
  100% {
    opacity: 0;
    background-position: 18% 53%;
    transform: scale(1.12) translate3d(0, -2px, 0);
  }
}

@keyframes moonMoviepyGlowAlive {
  0% {
    opacity: 0.18;
    transform: scale(1) translate3d(-8px, 0, 0);
    filter: brightness(0.92);
  }

  48% {
    opacity: 0.44;
    transform: scale(1.045) translate3d(12px, -5px, 0);
    filter: brightness(1.12);
  }

  100% {
    opacity: 0.25;
    transform: scale(1.025) translate3d(-3px, 4px, 0);
    filter: brightness(1);
  }
}

@keyframes moonMoviepyRippleAlive {
  0% {
    opacity: 0.22;
    transform: translate3d(-2.2%, 0.8%, 0) scale(1.01);
  }

  42% {
    opacity: 0.52;
    transform: translate3d(2.4%, -1.2%, 0) scale(1.035);
  }

  100% {
    opacity: 0.34;
    transform: translate3d(-0.8%, 0, 0) scale(1.02);
  }
}

@keyframes moonMoviepyMistAlive {
  0% {
    opacity: 0.12;
    transform: translate3d(-3%, 0, 0) scale(1.01);
  }

  55% {
    opacity: 0.3;
    transform: translate3d(3.2%, -1.5%, 0) scale(1.05);
  }

  100% {
    opacity: 0.18;
    transform: translate3d(0.8%, 1.2%, 0) scale(1.025);
  }
}

@keyframes moonMoviepyPreviewShot03 {
  0%,
  33% {
    opacity: 0;
    background-position: 26% 56%;
    transform: scale(1.02) translate3d(0, 5px, 0);
  }

  34%,
  49.5% {
    opacity: 1;
    background-position: 10% 57%;
    transform: scale(1.13) translate3d(0, 7px, 0);
    filter: saturate(1.02) brightness(0.92) contrast(1.05);
  }

  50.5%,
  100% {
    opacity: 0;
    background-position: 14% 56%;
    transform: scale(1.12) translate3d(0, 4px, 0);
  }
}

@keyframes moonMoviepyPreviewShot04 {
  0%,
  49.5% {
    opacity: 0;
    background-position: 14% 58%;
    transform: scale(1.06) translate3d(0, 8px, 0);
  }

  50.5%,
  66% {
    opacity: 1;
    background-position: 31% 57%;
    transform: scale(1.16) translate3d(0, 5px, 0);
    filter: saturate(1.04) brightness(0.94) contrast(1.05);
  }

  67%,
  100% {
    opacity: 0;
    background-position: 32% 57%;
    transform: scale(1.15) translate3d(0, 4px, 0);
  }
}

@keyframes moonMoviepyPreviewShot05 {
  0%,
  66% {
    opacity: 0;
    background-position: 60% 51%;
    transform: scale(1.01) translate3d(0, -2px, 0);
  }

  67%,
  82.5% {
    opacity: 1;
    background-position: 84% 50%;
    transform: scale(1.12) translate3d(0, -6px, 0);
    filter: saturate(0.98) brightness(0.94) contrast(1.04);
  }

  83.5%,
  100% {
    opacity: 0;
    background-position: 82% 50%;
    transform: scale(1.1) translate3d(0, -5px, 0);
  }
}

@keyframes moonMoviepyPreviewShot06 {
  0%,
  82.5% {
    opacity: 0;
    background-position: 74% 50%;
    transform: scale(1.03) translate3d(0, -2px, 0);
  }

  83.5%,
  100% {
    opacity: 1;
    background-position: 93% 49%;
    transform: scale(1.14) translate3d(0, -6px, 0);
    filter: saturate(1) brightness(0.96) contrast(1.05);
  }
}

.travel-scene-id-sea_03_moon .moon-route-debug-badge,
.travel-scene-id-sea_03_moon .moon-route-debug-segments {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  z-index: 20;
  pointer-events: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #eaf3ff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.44);
}

.travel-scene-id-sea_03_moon .moon-route-debug-badge {
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 52px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 27, 54, 0.58);
  box-shadow: inset 0 0 0 1px rgba(222, 235, 255, 0.22);
}

.travel-scene-id-sea_03_moon .moon-route-debug-segments {
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 18px);
  min-width: 142px;
  height: 28px;
}

.travel-scene-id-sea_03_moon .moon-debug-segment {
  position: absolute;
  inset: 0 auto auto 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6, 15, 38, 0.62);
  opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(222, 235, 255, 0.2);
  animation-duration: var(--moon-route-duration, 90s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.travel-scene-id-sea_03_moon .moon-debug-center {
  animation-name: moonDebugCenter;
}

.travel-scene-id-sea_03_moon .moon-debug-left-sea {
  animation-name: moonDebugLeftSea;
}

.travel-scene-id-sea_03_moon .moon-debug-left-harbor {
  animation-name: moonDebugLeftHarbor;
}

.travel-scene-id-sea_03_moon .moon-debug-right-sea {
  animation-name: moonDebugRightSea;
}

.travel-scene-id-sea_03_moon .moon-debug-right-cliff {
  animation-name: moonDebugRightCliff;
}

@keyframes moonRouteCenterDebug {
  0%,
  7% {
    opacity: 1;
    background-position: 50% 52%;
    transform: scale(1.02) translate3d(0, 0, 0);
    filter: saturate(0.98) brightness(0.9) contrast(1.02);
  }

  14% {
    opacity: 0.18;
    background-position: 42% 52%;
    transform: scale(1.032) translate3d(0, -2px, 0);
  }

  21%,
  34% {
    opacity: 0;
    background-position: 38% 53%;
    transform: scale(1.04) translate3d(0, 1px, 0);
  }

  42%,
  49% {
    opacity: 0.94;
    background-position: 50% 52%;
    transform: scale(1.022) translate3d(0, -1px, 0);
  }

  56%,
  80% {
    opacity: 0;
    background-position: 64% 51%;
    transform: scale(1.036) translate3d(0, -2px, 0);
  }

  88%,
  100% {
    opacity: 1;
    background-position: 50% 52%;
    transform: scale(1.02) translate3d(0, 0, 0);
    filter: saturate(0.98) brightness(0.9) contrast(1.02);
  }
}

@keyframes moonRouteLeftSeaDebug {
  0%,
  9% {
    opacity: 0;
    background-position: 54% 51%;
    transform: scale(1.025) translate3d(0, 0, 0);
  }

  15%,
  23% {
    opacity: 0.96;
    background-position: 26% 51%;
    transform: scale(1.035) translate3d(0, -2px, 0);
  }

  32% {
    opacity: 0.48;
    background-position: 18% 52%;
    transform: scale(1.042) translate3d(0, 2px, 0);
  }

  39%,
  100% {
    opacity: 0;
    background-position: 34% 51%;
    transform: scale(1.03) translate3d(0, 0, 0);
  }
}

@keyframes moonRouteLeftHarborDebug {
  0%,
  18% {
    opacity: 0;
    background-position: 16% 56%;
    transform: scale(1.055) translate3d(0, 5px, 0);
  }

  25%,
  31% {
    opacity: 0.92;
    background-position: 10% 58%;
    transform: scale(1.07) translate3d(0, 7px, 0);
  }

  38% {
    opacity: 0.12;
    background-position: 16% 57%;
    transform: scale(1.055) translate3d(0, 4px, 0);
  }

  45%,
  100% {
    opacity: 0;
    background-position: 23% 56%;
  }
}

@keyframes moonRouteLeftHarborDeepDebug {
  0%,
  23% {
    opacity: 0;
    background-position: 11% 57%;
    transform: scale(1.058) translate3d(0, 6px, 0);
  }

  30%,
  35% {
    opacity: 0.72;
    background-position: 8% 58%;
    transform: scale(1.072) translate3d(0, 7px, 0);
  }

  42%,
  100% {
    opacity: 0;
    background-position: 20% 57%;
    transform: scale(1.05) translate3d(0, 5px, 0);
  }
}

@keyframes moonRouteRightSeaDebug {
  0%,
  48% {
    opacity: 0;
    background-position: 58% 51%;
    transform: scale(1.025) translate3d(0, -1px, 0);
  }

  55%,
  64% {
    opacity: 0.92;
    background-position: 76% 51%;
    transform: scale(1.036) translate3d(0, -2px, 0);
  }

  72% {
    opacity: 0.34;
    background-position: 84% 50%;
    transform: scale(1.042) translate3d(0, -4px, 0);
  }

  80%,
  100% {
    opacity: 0;
    background-position: 64% 51%;
    transform: scale(1.03) translate3d(0, -1px, 0);
  }
}

@keyframes moonRouteRightReflectionDebug {
  0%,
  54% {
    opacity: 0;
    background-position: 72% 51%;
    transform: scale(1.035) translate3d(0, -2px, 0);
  }

  62%,
  70% {
    opacity: 0.8;
    background-position: 86% 51%;
    transform: scale(1.052) translate3d(0, -4px, 0);
    filter: saturate(1.04) brightness(0.96) contrast(1.04);
  }

  78%,
  100% {
    opacity: 0;
    background-position: 74% 51%;
    transform: scale(1.036) translate3d(0, -2px, 0);
  }
}

@keyframes moonRouteRightCliffDebug {
  0%,
  67% {
    opacity: 0;
    background-position: 79% 53%;
    transform: scale(1.055) translate3d(0, 0, 0);
  }

  74%,
  81% {
    opacity: 0.86;
    background-position: 96% 55%;
    transform: scale(1.09) translate3d(0, 4px, 0);
    filter: saturate(1) brightness(0.92) contrast(1.04);
  }

  89%,
  100% {
    opacity: 0;
    background-position: 72% 52%;
    transform: scale(1.045) translate3d(0, 0, 0);
  }
}

@keyframes moonDebugCenter {
  0%,
  10%,
  42%,
  50%,
  88%,
  100% {
    opacity: 1;
  }

  14%,
  38%,
  55%,
  84% {
    opacity: 0;
  }
}

@keyframes moonDebugLeftSea {
  0%,
  10%,
  38%,
  100% {
    opacity: 0;
  }

  15%,
  24% {
    opacity: 1;
  }
}

@keyframes moonDebugLeftHarbor {
  0%,
  22%,
  39%,
  100% {
    opacity: 0;
  }

  26%,
  34% {
    opacity: 1;
  }
}

@keyframes moonDebugRightSea {
  0%,
  50%,
  78%,
  100% {
    opacity: 0;
  }

  56%,
  70% {
    opacity: 1;
  }
}

@keyframes moonDebugRightCliff {
  0%,
  68%,
  88%,
  100% {
    opacity: 0;
  }

  74%,
  82% {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .travel-scene-id-sea_03_moon .travel-scene-header,
  body.travel-scene-playing-mode
    .travel-scene-id-sea_03_moon
    .travel-scene-header {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    max-width: calc(100vw - 24px);
  }

  body.travel-scene-playing-mode
    .travel-scene-id-sea_03_moon
    .travel-scene-page
    .travel-actions {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  body.travel-scene-playing-mode
    .travel-scene-id-sea_03_moon
    .travel-session-progress {
    top: var(--header-height, 72px) !important;
    height: 6px !important;
  }

  .travel-scene-id-sea_03_moon .moon-route-shot {
    inset: -6% -34%;
    background-size: auto 116%;
  }
}

/* Forest journey MVP: sunlit forest uses the shared 5-minute travel engine. */
.travel-scene-id-forest_01_sunlit .travel-scene-stage {
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 244, 177, 0.45),
      transparent 30%
    ),
    radial-gradient(
      circle at 72% 18%,
      rgba(204, 238, 170, 0.32),
      transparent 34%
    ),
    linear-gradient(180deg, #dff2c7 0%, #eef8d9 42%, #d6ebc4 100%);
}

.travel-scene-id-forest_01_sunlit .travel-playback {
  background: #e9f5d5;
  isolation: isolate;
}

.travel-scene-id-forest_01_sunlit .travel-playback::before,
.travel-scene-id-forest_01_sunlit .travel-playback::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-repeat: no-repeat;
  will-change: opacity, transform, filter;
}

.travel-scene-id-forest_01_sunlit .travel-playback::before {
  opacity: 0.62;
  background:
    radial-gradient(
      ellipse at 17% 15%,
      rgba(255, 246, 174, 0.72),
      transparent 22%
    ),
    linear-gradient(
      118deg,
      transparent 0 18%,
      rgba(255, 250, 186, 0.2) 28%,
      transparent 45% 100%
    ),
    linear-gradient(
      142deg,
      transparent 0 38%,
      rgba(255, 255, 216, 0.15) 48%,
      transparent 62% 100%
    );
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: sunlitForestRayPulse 15s ease-in-out infinite alternate;
}

.travel-scene-id-forest_01_sunlit .travel-playback::after {
  inset: 6% -8% 12%;
  opacity: 0.38;
  background:
    radial-gradient(
      circle at 18% 26%,
      rgba(255, 255, 219, 0.7) 0 1.4px,
      transparent 3px
    ),
    radial-gradient(
      circle at 36% 18%,
      rgba(255, 236, 143, 0.58) 0 1.8px,
      transparent 4px
    ),
    radial-gradient(
      circle at 52% 32%,
      rgba(255, 255, 225, 0.5) 0 1.2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 69% 22%,
      rgba(255, 236, 155, 0.46) 0 1.6px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 82% 38%,
      rgba(255, 255, 222, 0.46) 0 1px,
      transparent 2.8px
    ),
    radial-gradient(
      ellipse at 44% 56%,
      rgba(253, 241, 150, 0.12),
      transparent 46%
    );
  background-size:
    220px 220px,
    280px 280px,
    260px 260px,
    320px 320px,
    240px 240px,
    100% 100%;
  mix-blend-mode: screen;
  animation: sunlitForestSparkleFloat 18s ease-in-out infinite alternate;
}

.travel-scene-id-forest_01_sunlit .travel-layer-base {
  inset: -11% -18% -13%;
  background-position: 52% 54%;
  background-size: auto 118%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  filter: saturate(1.08) contrast(1.03) brightness(1.03);
  transform-origin: center center;
  animation: none;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-forest-stage.is-playing
  .sunlit-forest-panorama {
  animation: sunlitForestPanorama 90s cubic-bezier(0.45, 0, 0.22, 1) infinite;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-canopy {
  inset: -18% -20% 22%;
  z-index: 2;
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 6% 18%, rgba(42, 93, 45, 0.44), transparent 30%),
    radial-gradient(
      ellipse at 90% 12%,
      rgba(40, 107, 49, 0.38),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 48% 3%,
      rgba(211, 239, 132, 0.24),
      transparent 36%
    );
  mix-blend-mode: multiply;
  filter: blur(12px);
  animation: sunlitForestCanopyDrift 38s ease-in-out infinite alternate;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-path-haze {
  inset: 34% -16% -8%;
  z-index: 3;
  opacity: 0.44;
  background:
    radial-gradient(
      ellipse at 54% 64%,
      rgba(255, 255, 232, 0.32),
      transparent 44%
    ),
    radial-gradient(
      ellipse at 22% 76%,
      rgba(211, 239, 164, 0.22),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 255, 236, 0.12) 30%,
      rgba(199, 229, 151, 0.08) 100%
    );
  mix-blend-mode: screen;
  filter: blur(10px);
  animation: sunlitForestHazeBreath 12s ease-in-out infinite alternate;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-path-haze::before,
.travel-scene-id-forest_01_sunlit .sunlit-forest-path-haze::after {
  content: none !important;
  display: none !important;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-bokeh {
  inset: -4% -6%;
  z-index: 4;
  opacity: 0.5;
  background:
    radial-gradient(
      circle at 18% 22%,
      rgba(255, 248, 172, 0.68) 0 2px,
      transparent 5px
    ),
    radial-gradient(
      circle at 30% 48%,
      rgba(255, 255, 219, 0.52) 0 1.4px,
      transparent 4px
    ),
    radial-gradient(
      circle at 58% 30%,
      rgba(255, 242, 158, 0.55) 0 2.2px,
      transparent 5px
    ),
    radial-gradient(
      circle at 75% 54%,
      rgba(255, 255, 224, 0.48) 0 1.2px,
      transparent 3.8px
    ),
    radial-gradient(
      circle at 86% 24%,
      rgba(255, 235, 145, 0.42) 0 1.8px,
      transparent 4.8px
    );
  background-size:
    260px 260px,
    300px 300px,
    340px 340px,
    280px 280px,
    360px 360px;
  mix-blend-mode: screen;
  filter: blur(0.3px);
  animation: sunlitForestBokehPulse 10s ease-in-out infinite alternate;
}

body.travel-scene-playing-mode
  .travel-scene-id-forest_01_sunlit
  .travel-session-progress {
  position: fixed !important;
  top: var(--header-height, 72px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: 4px !important;
  z-index: 650 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: rgba(58, 91, 56, 0.22) !important;
  box-shadow: 0 1px 8px rgba(255, 245, 186, 0.34) !important;
  pointer-events: none;
}

body.travel-scene-playing-mode
  .travel-scene-id-forest_01_sunlit
  .travel-session-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 0 !important;
  background: linear-gradient(
    90deg,
    #ffe79d 0%,
    #a7d76c 44%,
    #6fbd82 100%
  ) !important;
  box-shadow: 0 0 12px rgba(255, 232, 133, 0.54);
  animation: travelIntroFill var(--travel-intro-duration, 300000ms) linear
    forwards;
}

body.travel-scene-playing-mode
  .travel-scene-id-forest_01_sunlit
  .travel-scene-header
  h3 {
  text-shadow: 0 3px 18px rgba(30, 56, 25, 0.32);
}

@keyframes sunlitForestPanorama {
  0% {
    background-position: 50% 54%;
    transform: scale(1.012) translate3d(0, 0, 0);
  }

  14% {
    background-position: 44% 55%;
    transform: scale(1.025) translate3d(0, -4px, 0);
  }

  28% {
    background-position: 58% 54%;
    transform: scale(1.045) translate3d(0, -8px, 0);
  }

  42% {
    background-position: 64% 56%;
    transform: scale(1.035) translate3d(0, 2px, 0);
  }

  58% {
    background-position: 52% 52%;
    transform: scale(1.055) translate3d(0, -12px, 0);
  }

  74% {
    background-position: 38% 55%;
    transform: scale(1.032) translate3d(0, -2px, 0);
  }

  88% {
    background-position: 47% 54%;
    transform: scale(1.02) translate3d(0, 0, 0);
  }

  100% {
    background-position: 50% 54%;
    transform: scale(1.012) translate3d(0, 0, 0);
  }
}

@keyframes sunlitForestCanopyDrift {
  0% {
    opacity: 0.34;
    transform: translate3d(-2%, -1%, 0) scale(1.02);
  }

  55% {
    opacity: 0.48;
    transform: translate3d(2%, 1%, 0) scale(1.04);
  }

  100% {
    opacity: 0.38;
    transform: translate3d(-1%, 0, 0) scale(1.03);
  }
}

@keyframes sunlitForestHazeBreath {
  0% {
    opacity: 0.26;
    transform: translate3d(-1%, 8px, 0) scale(1);
  }

  100% {
    opacity: 0.5;
    transform: translate3d(1%, -8px, 0) scale(1.025);
  }
}

@keyframes sunlitForestBokehPulse {
  0% {
    opacity: 0.24;
    transform: translate3d(-6px, 6px, 0) scale(0.98);
  }

  50% {
    opacity: 0.56;
    transform: translate3d(6px, -8px, 0) scale(1.02);
  }

  100% {
    opacity: 0.36;
    transform: translate3d(10px, -3px, 0) scale(1.01);
  }
}

@keyframes sunlitForestRayPulse {
  0% {
    opacity: 0.42;
    transform: translate3d(-1%, 0, 0) scale(1);
  }

  100% {
    opacity: 0.72;
    transform: translate3d(1%, -1%, 0) scale(1.02);
  }
}

@keyframes sunlitForestSparkleFloat {
  0% {
    opacity: 0.24;
    transform: translate3d(-8px, 8px, 0);
  }

  45% {
    opacity: 0.5;
    transform: translate3d(8px, -10px, 0);
  }

  100% {
    opacity: 0.34;
    transform: translate3d(14px, -4px, 0);
  }
}

@media (max-width: 600px) {
  .travel-scene-id-forest_01_sunlit .travel-layer-base {
    inset: -6% -32% -8%;
    background-size: auto 112%;
    background-position: 50% 56%;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-forest-canopy {
    inset: -12% -26% 28%;
    opacity: 0.34;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-forest-path-haze {
    inset: 36% -20% -8%;
  }

  body.travel-scene-playing-mode
    .travel-scene-id-forest_01_sunlit
    .travel-session-progress {
    top: var(--header-height, 72px) !important;
    height: 6px !important;
  }
}

/* Sunlit forest production assets from Sunshine Forest.zip. */
.travel-scene-id-forest_01_sunlit .travel-layer-base {
  inset: -10% -22% -10%;
  background-position: 50% 54%;
  background-size: auto 120%;
  filter: saturate(1.08) contrast(1.02) brightness(1.04);
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-canopy {
  inset: -8% -10% 20%;
  z-index: 6;
  opacity: 0.58;
  background-image: url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_stage1_fg_leaves.png?v=forest-sunlit-timeline-v7');
  background-size: auto 112%;
  background-position: top center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: saturate(1.08) brightness(1.04);
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-path-haze {
  inset: 8% -10% -10%;
  z-index: 3;
  opacity: 0.38;
  background-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 255, 235, 0.08) 45%,
      rgba(255, 245, 190, 0.15) 100%
    ),
    url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_stage1_mg_path.png?v=forest-sunlit-timeline-v7');
  background-size:
    100% 100%,
    auto 116%;
  background-position:
    center,
    center 58%;
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  filter: saturate(1.08) brightness(1.1);
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-bokeh {
  inset: -6% -8%;
  z-index: 7;
  opacity: 0.46;
  background-image:
    radial-gradient(
      circle at 18% 20%,
      rgba(255, 246, 160, 0.46) 0 2px,
      transparent 5px
    ),
    url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_stage4_fx_sunlight_bokeh.png?v=forest-sunlit-timeline-v7');
  background-size:
    280px 280px,
    cover;
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  mix-blend-mode: screen;
  filter: blur(0.2px) saturate(1.08) brightness(1.08);
}

@media (max-width: 600px) {
  .travel-scene-id-forest_01_sunlit .travel-layer-base {
    inset: -5% -34% -8%;
    background-size: auto 114%;
    background-position: 50% 56%;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-forest-canopy {
    inset: -4% -26% 26%;
    opacity: 0.5;
    background-size: auto 108%;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-forest-path-haze {
    inset: 18% -24% -8%;
    opacity: 0.34;
    background-size:
      100% 100%,
      auto 108%;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-forest-bokeh {
    opacity: 0.4;
  }
}

/* Sunlit forest parallax v4: wider Z-depth scale and cross-fade ready ambience. */
.travel-scene-id-forest_01_sunlit .sunlit-forest-stage {
  --sunlit-bg-scale: 1;
  --sunlit-mg-scale: 1.15;
  --sunlit-fg-scale: 1.25;
  --sunlit-bg-x: 0px;
  --sunlit-bg-y: 0px;
  --sunlit-mg-x: 0px;
  --sunlit-mg-y: 0px;
  --sunlit-fg-x: 0px;
  --sunlit-fg-y: 0px;
}

.travel-scene-id-forest_01_sunlit .travel-playback::after {
  content: none !important;
  display: none !important;
}

.travel-scene-id-forest_01_sunlit .travel-playback::before {
  z-index: 4;
  opacity: 0.48;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-forest-stage.is-playing
  .sunlit-forest-panorama {
  animation: sunlitForestBgDrift 90s cubic-bezier(0.45, 0, 0.22, 1) infinite;
}

.travel-scene-id-forest_01_sunlit .travel-layer-base {
  z-index: 1;
  inset: -8% -16% -8%;
  background-position: 50% 54%;
  background-size: auto 112%;
  transform: translate3d(var(--sunlit-bg-x), var(--sunlit-bg-y), 0)
    scale(var(--sunlit-bg-scale));
  transform-origin: center center;
  will-change: transform, background-position;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-path-haze {
  z-index: 2;
  inset: -10% -18% -10%;
  opacity: 0.76;
  background-image: url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_stage1_mg_path.png?v=forest-sunlit-timeline-v7');
  background-size: auto 118%;
  background-position: center 57%;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
  filter: saturate(1.04) brightness(1.04);
  transform: translate3d(var(--sunlit-mg-x), var(--sunlit-mg-y), 0)
    scale(var(--sunlit-mg-scale));
  transform-origin: center center;
  animation: sunlitForestMgLightBreath 16s ease-in-out infinite alternate;
  will-change: transform, opacity, filter;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-canopy {
  z-index: 3;
  inset: -22% -18% 44%;
  opacity: 0.85;
  background-image: url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_stage1_fg_leaves.png?v=forest-sunlit-timeline-v7');
  background-size: auto 96%;
  background-position: top center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: saturate(1.08) brightness(1.04);
  transform: translate3d(var(--sunlit-fg-x), var(--sunlit-fg-y), 0)
    scale(var(--sunlit-fg-scale));
  transform-origin: center top;
  animation: sunlitForestFgOpacity 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-bokeh {
  z-index: 5;
  inset: -4% -6%;
  opacity: 0;
  background-image: url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_stage4_fx_sunlight_bokeh.png?v=forest-sunlit-timeline-v7');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: saturate(1.08) brightness(1.08);
  animation: none;
  pointer-events: none;
  will-change: opacity, filter, transform;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-forest-stage.sunlit-highlight-active
  .sunlit-forest-bokeh {
  animation: sunlitForestOfficialBokehPulse 1.5s ease-in-out infinite alternate;
}

@keyframes sunlitForestBgDrift {
  0% {
    background-position: 50% 54%;
  }

  32% {
    background-position: 48% 53%;
  }

  64% {
    background-position: 53% 55%;
  }

  100% {
    background-position: 50% 54%;
  }
}

@keyframes sunlitForestMgLightBreath {
  0% {
    opacity: 0.68;
    filter: saturate(1.02) brightness(1.01);
  }

  100% {
    opacity: 0.78;
    filter: saturate(1.08) brightness(1.07);
  }
}

@keyframes sunlitForestFgOpacity {
  0% {
    opacity: 0.82;
  }

  100% {
    opacity: 0.88;
  }
}

@keyframes sunlitForestOfficialBokehPulse {
  0% {
    opacity: 0.5;
    filter: saturate(1.04) brightness(1.04);
    transform: scale(1);
  }

  100% {
    opacity: 1;
    filter: saturate(1.18) brightness(1.22);
    transform: scale(1.018);
  }
}

@media (max-width: 600px) {
  .travel-scene-id-forest_01_sunlit .travel-layer-base {
    inset: -4% -28% -7%;
    background-size: auto 108%;
    background-position: 50% 56%;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-forest-path-haze {
    inset: -8% -28% -10%;
    opacity: 0.7;
    background-size: auto 114%;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-forest-canopy {
    inset: -20% -36% 48%;
    opacity: 0.85;
    background-size: auto 92%;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-forest-bokeh {
    inset: -3% -12%;
  }
}

/* Sunlit forest timeline v5: fixed stacked layers and staged story controls. */
.travel-scene-id-forest_01_sunlit .sunlit-forest-stage {
  position: relative;
  min-height: calc(100dvh - var(--app-header-height, 76px));
  overflow: hidden;
  background: #f8f4e8;
  --sunlit-bg-scale: 1;
  --sunlit-mg-scale: 1.15;
  --sunlit-fg-scale: 1.25;
}

.travel-scene-id-forest_01_sunlit .travel-playback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.travel-scene-id-forest_01_sunlit .travel-layer,
.travel-scene-id-forest_01_sunlit .sunlit-timeline-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  backface-visibility: hidden;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.travel-scene-id-forest_01_sunlit .travel-layer-base {
  z-index: 1;
  opacity: 1;
  background-size: cover;
  background-position: center;
  transform: translate3d(var(--sunlit-bg-x), var(--sunlit-bg-y), 0)
    scale(var(--sunlit-bg-scale));
  transition: opacity 1.8s ease;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-path-haze {
  z-index: 2;
  opacity: 0.74;
  background-image: url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_stage1_mg_path.png?v=forest-sunlit-timeline-v7');
  background-size: cover;
  background-position: center;
  mix-blend-mode: normal;
  transform: translate3d(var(--sunlit-mg-x), var(--sunlit-mg-y), 0)
    scale(var(--sunlit-mg-scale));
  transition: opacity 1.8s ease;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-canopy {
  z-index: 3;
  opacity: 0.84;
  background-image: url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_stage1_fg_leaves.png?v=forest-sunlit-timeline-v7');
  background-size: cover;
  background-position: center top;
  mix-blend-mode: screen;
  transform: translate3d(var(--sunlit-fg-x), var(--sunlit-fg-y), 0)
    scale(var(--sunlit-fg-scale));
  transition: opacity 1.8s ease;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage2-layer,
.travel-scene-id-forest_01_sunlit .sunlit-stage3-layer,
.travel-scene-id-forest_01_sunlit .sunlit-stage4-layer,
.travel-scene-id-forest_01_sunlit .sunlit-stage5-layer {
  z-index: 6;
  opacity: 0;
  background-image: var(--sunlit-stage-image);
  transition:
    opacity 1.65s ease,
    transform 12s ease;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage2-active .sunlit-stage2-layer,
.travel-scene-id-forest_01_sunlit .sunlit-stage3-active .sunlit-stage3-layer,
.travel-scene-id-forest_01_sunlit .sunlit-stage4-active .sunlit-stage4-layer,
.travel-scene-id-forest_01_sunlit .sunlit-stage5-active .sunlit-stage5-layer {
  opacity: 1;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage2-active .travel-layer-base,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage2-active
  .sunlit-forest-path-haze,
.travel-scene-id-forest_01_sunlit .sunlit-stage2-active .sunlit-forest-canopy,
.travel-scene-id-forest_01_sunlit .sunlit-stage3-active .travel-layer-base,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage3-active
  .sunlit-forest-path-haze,
.travel-scene-id-forest_01_sunlit .sunlit-stage3-active .sunlit-forest-canopy,
.travel-scene-id-forest_01_sunlit .sunlit-stage4-active .travel-layer-base,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage4-active
  .sunlit-forest-path-haze,
.travel-scene-id-forest_01_sunlit .sunlit-stage4-active .sunlit-forest-canopy,
.travel-scene-id-forest_01_sunlit .sunlit-stage5-active .travel-layer-base,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage5-active
  .sunlit-forest-path-haze,
.travel-scene-id-forest_01_sunlit .sunlit-stage5-active .sunlit-forest-canopy {
  opacity: 0;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage2-active .sunlit-stage2-layer {
  animation: sunlitStage2Breath 42s ease-in-out infinite alternate;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage4-active .sunlit-stage4-layer {
  animation: sunlitStage4CreekDrift 80s ease-in-out infinite alternate;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage4-ripple,
.travel-scene-id-forest_01_sunlit .sunlit-stage4-splash {
  z-index: 8;
  opacity: 0;
  background-image: var(--sunlit-stage-image);
  mix-blend-mode: screen;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage4-active .sunlit-stage4-ripple {
  opacity: 0.3;
  animation: sunlitRippleFlow 9s ease-in-out infinite alternate;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage4-active .sunlit-stage4-splash {
  opacity: 0.26;
  animation: sunlitWaterSparkle 4.8s ease-in-out infinite alternate;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-bokeh {
  z-index: 9;
  opacity: 0;
  background-image: url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_stage4_fx_sunlight_bokeh.png?v=forest-sunlit-timeline-v7');
  mix-blend-mode: screen;
  pointer-events: none;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage4-active .sunlit-forest-bokeh {
  opacity: 0.65;
  animation: sunlitForestOfficialBokehPulse 1.5s ease-in-out infinite alternate;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-highlight-active:not(.sunlit-stage4-active)
  .sunlit-forest-bokeh {
  opacity: 0 !important;
  animation: none !important;
}

.travel-scene-id-forest_01_sunlit .sunlit-butterfly-object {
  position: absolute;
  z-index: 11;
  left: 52%;
  top: 48%;
  width: clamp(96px, 13vw, 190px);
  aspect-ratio: 1 / 1;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.92);
  transform-origin: center center;
  pointer-events: none;
  filter: drop-shadow(0 14px 24px rgba(84, 74, 42, 0.22));
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

.travel-scene-id-forest_01_sunlit .sunlit-butterfly-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform-origin: center center;
  will-change: opacity, transform;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage2-active .sunlit-butterfly-frame,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage3-active
  .sunlit-butterfly-frame {
  animation-duration: 0.72s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.travel-scene-id-forest_01_sunlit .sunlit-butterfly-frame-1 {
  opacity: 1;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-stage2-active
  .sunlit-butterfly-frame-1,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage3-active
  .sunlit-butterfly-frame-1 {
  animation-name: sunlitButterflyFrameOne;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-stage2-active
  .sunlit-butterfly-frame-2,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage3-active
  .sunlit-butterfly-frame-2 {
  animation-name: sunlitButterflyFrameTwo;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-stage2-active
  .sunlit-butterfly-frame-3,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage3-active
  .sunlit-butterfly-frame-3 {
  animation-name: sunlitButterflyFrameThree;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-stage2-active
  .sunlit-butterfly-frame-4,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage3-active
  .sunlit-butterfly-frame-4 {
  animation-name: sunlitButterflyFrameFour;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-stage2-active
  .sunlit-butterfly-object,
.travel-scene-id-forest_01_sunlit
  .sunlit-stage3-active
  .sunlit-butterfly-object {
  opacity: 1;
  animation: sunlitButterflyIdle 4s ease-in-out infinite;
}

.travel-scene-id-forest_01_sunlit
  .sunlit-butterfly-flying
  .sunlit-butterfly-object {
  opacity: 0.94;
  animation: sunlitButterflyFlyUp 5.6s ease-in-out forwards;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage3-panel {
  position: absolute;
  z-index: 16;
  left: 50%;
  bottom: clamp(90px, 13vh, 150px);
  width: min(860px, calc(100vw - 36px));
  padding: 20px;
  border-radius: 26px;
  background: rgba(255, 251, 238, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: 0 22px 46px rgba(87, 79, 45, 0.2);
  opacity: 0;
  transform: translate3d(-50%, 24px, 0);
  pointer-events: none;
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage3-active .sunlit-stage3-panel {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  pointer-events: auto;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage-label {
  margin: 0 0 6px;
  color: #4d8d4f;
  font-size: 14px;
  font-weight: 800;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage3-panel h4 {
  margin: 0 0 16px;
  color: #2f251d;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.16;
}

.travel-scene-id-forest_01_sunlit .sunlit-choice-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.travel-scene-id-forest_01_sunlit .sunlit-choice-button {
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid rgba(125, 152, 87, 0.24);
  border-radius: 18px;
  color: #3c2e24;
  background: rgba(255, 255, 247, 0.78);
  box-shadow: 0 10px 22px rgba(72, 60, 36, 0.13);
  text-align: left;
  cursor: pointer;
}

.travel-scene-id-forest_01_sunlit .sunlit-choice-button strong,
.travel-scene-id-forest_01_sunlit .sunlit-choice-button span {
  display: block;
}

.travel-scene-id-forest_01_sunlit .sunlit-choice-button span {
  margin-top: 5px;
  color: #6c8161;
  font-size: 13px;
}

.travel-scene-id-forest_01_sunlit .sunlit-choice-button:hover,
.travel-scene-id-forest_01_sunlit .sunlit-choice-button.is-selected {
  border-color: rgba(92, 148, 81, 0.68);
  background: rgba(231, 252, 203, 0.86);
  transform: translateY(-2px);
}

.travel-scene-id-forest_01_sunlit .sunlit-choice-bubble {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: clamp(26px, 4vh, 46px);
  width: min(760px, calc(100vw - 36px));
  min-height: 118px;
  padding: 18px 20px 16px;
  border-radius: 24px;
  color: #3c2e24;
  background: rgba(255, 252, 237, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 38px rgba(80, 67, 42, 0.2);
  opacity: 0;
  transform: translate3d(-50%, 18px, 0);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.travel-scene-id-forest_01_sunlit .sunlit-choice-bubble.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  pointer-events: auto;
}

.travel-scene-id-forest_01_sunlit .sunlit-choice-bubble span {
  display: block;
  margin-bottom: 8px;
  color: #4e8a55;
  font-size: 13px;
  font-weight: 800;
}

.travel-scene-id-forest_01_sunlit .sunlit-choice-bubble-text {
  min-height: 46px;
  margin: 0 0 14px;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.55;
  white-space: pre-wrap;
}

.travel-scene-id-forest_01_sunlit .sunlit-next-stage-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.travel-scene-id-forest_01_sunlit .sunlit-report-panel {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 50%;
  width: min(780px, calc(100vw - 40px));
  padding: clamp(24px, 3vw, 38px);
  border-radius: 30px;
  color: #3c2e24;
  background:
    linear-gradient(rgba(255, 251, 237, 0.9), rgba(255, 251, 237, 0.9)),
    url('https://media.sharalong.com/assets/travel/forest/sunlit/sunlit_forest_ui_report_panel.png?v=forest-sunlit-timeline-v7')
      center / cover no-repeat;
  box-shadow: 0 28px 70px rgba(45, 43, 25, 0.22);
  opacity: 0;
  transform: translate3d(-50%, -46%, 0) scale(0.98);
  pointer-events: none;
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.travel-scene-id-forest_01_sunlit .sunlit-stage5-active .sunlit-report-panel {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
  pointer-events: auto;
}

.travel-scene-id-forest_01_sunlit .sunlit-report-panel span {
  color: #4b8c5a;
  font-weight: 800;
}

.travel-scene-id-forest_01_sunlit .sunlit-report-panel h4 {
  margin: 8px 0 16px;
  font-size: clamp(25px, 3vw, 40px);
}

.travel-scene-id-forest_01_sunlit .sunlit-report-panel p {
  margin: 0 0 12px;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
}

@keyframes sunlitStage2Breath {
  from {
    transform: scale(1.015) translate3d(-1.2%, 0, 0);
    filter: brightness(1.02) saturate(1.03);
  }
  to {
    transform: scale(1.07) translate3d(1.4%, -0.8%, 0);
    filter: brightness(1.08) saturate(1.08);
  }
}

@keyframes sunlitStage4CreekDrift {
  from {
    transform: scale(1.02) translate3d(-1.6%, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(1.8%, -0.6%, 0);
  }
}

@keyframes sunlitRippleFlow {
  from {
    opacity: 0.18;
    transform: scale(1.02) translate3d(-1%, 1%, 0);
  }
  to {
    opacity: 0.38;
    transform: scale(1.06) translate3d(1.2%, -0.4%, 0);
  }
}

@keyframes sunlitWaterSparkle {
  from {
    opacity: 0.16;
    filter: brightness(1.02);
  }
  to {
    opacity: 0.32;
    filter: brightness(1.22);
  }
}

@keyframes sunlitButterflyIdle {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0) scale(0.92) rotate(-2deg);
  }
  50% {
    transform: translate3d(-50%, calc(-50% - 10px), 0) scale(0.98) rotate(2deg);
  }
}

@keyframes sunlitButterflyFrameOne {
  0%,
  24.9% {
    opacity: 1;
    transform: scale(1) rotate(-1deg);
  }
  25%,
  100% {
    opacity: 0;
  }
}

@keyframes sunlitButterflyFrameTwo {
  0%,
  24.9%,
  50%,
  100% {
    opacity: 0;
  }
  25%,
  49.9% {
    opacity: 1;
    transform: scale(1.015) rotate(1deg);
  }
}

@keyframes sunlitButterflyFrameThree {
  0%,
  49.9%,
  75%,
  100% {
    opacity: 0;
  }
  50%,
  74.9% {
    opacity: 1;
    transform: scale(1.02) rotate(-1deg);
  }
}

@keyframes sunlitButterflyFrameFour {
  0%,
  74.9% {
    opacity: 0;
  }
  75%,
  100% {
    opacity: 1;
    transform: scale(1.01) rotate(1deg);
  }
}

@keyframes sunlitButterflyFlyUp {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(0.96) rotate(-2deg);
    opacity: 1;
  }
  45% {
    transform: translate3d(-46%, -86%, 0) scale(1.04) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(-42%, -150%, 0) scale(0.78) rotate(9deg);
    opacity: 0.18;
  }
}

@media (max-width: 700px) {
  .travel-scene-id-forest_01_sunlit .sunlit-stage3-panel {
    bottom: 118px;
    padding: 14px;
    border-radius: 22px;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-choice-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-choice-button {
    padding: 11px 12px;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-choice-bubble {
    bottom: 16px;
    padding: 14px;
  }

  .travel-scene-id-forest_01_sunlit .sunlit-butterfly-object {
    width: clamp(84px, 26vw, 132px);
  }
}

/* Sunlit forest timeline v7: final full-viewport layer stacking guard. */
body.travel-scene-playing-mode
  .travel-scene-id-forest_01_sunlit
  .travel-scene-page {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - var(--app-header-height, 76px));
  overflow: hidden;
}

body.travel-scene-playing-mode
  .travel-scene-id-forest_01_sunlit
  .travel-scene-stage.sunlit-forest-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background-color: #f8f4e8;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-stage > .travel-playback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: block !important;
  contain: layout paint;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .travel-layer,
.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .travel-full-background,
.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .sunlit-timeline-layer {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  max-width: none !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  pointer-events: none;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .travel-layer-base {
  z-index: 1 !important;
  opacity: 1;
  transform: translate3d(var(--sunlit-bg-x), var(--sunlit-bg-y), 0)
    scale(var(--sunlit-bg-scale));
}

.travel-scene-id-forest_01_sunlit
  .sunlit-forest-stage
  .sunlit-forest-path-haze {
  z-index: 2 !important;
  opacity: 0.74;
  transform: translate3d(var(--sunlit-mg-x), var(--sunlit-mg-y), 0)
    scale(var(--sunlit-mg-scale));
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .sunlit-forest-canopy {
  z-index: 3 !important;
  opacity: 0.84;
  transform: translate3d(var(--sunlit-fg-x), var(--sunlit-fg-y), 0)
    scale(var(--sunlit-fg-scale));
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .sunlit-stage2-layer,
.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .sunlit-stage3-layer,
.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .sunlit-stage4-layer,
.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .sunlit-stage5-layer {
  z-index: 6 !important;
}

.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .sunlit-stage4-ripple,
.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .sunlit-stage4-splash,
.travel-scene-id-forest_01_sunlit .sunlit-forest-stage .sunlit-forest-bokeh {
  z-index: 9 !important;
}

@media (min-width: 950px) {
  .travel-select-page[aria-label='숲 풍경 선택'] .travel-select-top h3 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.018em;
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택']
    .travel-select-top
    > div
    > p:first-of-type {
    margin-top: 6px;
    font-size: 14.72px;
    font-weight: 680;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택']
    .travel-select-top
    > div
    > p:last-of-type {
    margin-top: 10px;
    font-size: 14.08px;
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.006em;
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta {
    gap: 4px;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta strong {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.016em;
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta small {
    color: rgba(78, 58, 43, 0.74);
    font-size: 13.44px;
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -0.008em;
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-scene-meta em {
    color: rgba(78, 58, 43, 0.78);
    font-size: 13.76px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.006em;
    text-shadow: none;
    filter: none;
  }

  .travel-select-page[aria-label='숲 풍경 선택'] .travel-premium-badge {
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    text-shadow: none;
    filter: none;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .top-icon-button {
    width: 50px !important;
    height: 50px !important;
  }

  .top-icon-symbol {
    width: 43px !important;
    max-height: 43px !important;
  }
}

@media (min-width: 761px) and (min-height: 601px) {
  .top-icon-button {
    width: 55.2px !important;
    min-width: 55.2px !important;
    height: 55.2px !important;
    min-height: 55.2px !important;
    transform: translateX(76px);
    transform-origin: center center;
  }

  .top-icon-symbol {
    width: 48px !important;
    max-height: 48px !important;
  }
}

/* Tree, house, and avatar customizers: shared sticky preview and media. */
body.customizer-sticky-preview-active {
  --customizer-header-height: 72px;
  --customizer-preview-expanded-height: clamp(320px, 46svh, 420px);
  --customizer-preview-compact-height: clamp(280px, 32svh, 360px);
  --customizer-preview-height: var(--customizer-preview-expanded-height);
  --customizer-tabs-height: 72px;
  --customizer-sticky-line: rgba(116, 101, 76, 0.18);
  --customizer-sticky-surface: rgba(255, 251, 241, 0.98);
  --customizer-sticky-shadow: rgba(78, 65, 43, 0.12);
  --customizer-selection: #7e9d72;
  --customizer-selection-soft: rgba(126, 157, 114, 0.18);
  --customizer-button-ready: #718f67;
  --customizer-scroll-track: rgba(213, 199, 177, 0.26);
  --customizer-scroll-thumb: rgba(145, 130, 108, 0.48);
  --customizer-scene-scale: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}

html.customizer-sticky-preview-active {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.customizer-sticky-preview-active.customizer-sticky-preview-compact {
  --customizer-preview-height: var(--customizer-preview-compact-height);
  --customizer-scene-scale: 0.86;
}

body.customizer-sticky-preview-active[data-step='tree'] {
  --customizer-scene-scale: 0.75;
}

body.customizer-sticky-preview-active.customizer-sticky-preview-compact[data-step='tree'] {
  --customizer-scene-scale: 0.65;
}

body.customizer-sticky-preview-active[data-step='house'] {
  --customizer-scene-scale: 0.78;
}

body.customizer-sticky-preview-active.customizer-sticky-preview-compact[data-step='house'] {
  --customizer-scene-scale: 0.68;
}

body.customizer-sticky-preview-active[data-step='tree']
  .preview-scene:has(
    .tree-model.tree-leaves-cloud.tree-with-leaves
  ) {
  --customizer-scene-scale: 0.72;
}

body.customizer-sticky-preview-active.customizer-sticky-preview-compact[data-step='tree']
  .preview-scene:has(
    .tree-model.tree-leaves-cloud.tree-with-leaves
  ) {
  --customizer-scene-scale: 0.62;
}

body.customizer-sticky-preview-active .editor-app {
  display: block;
  width: min(1024px, 100%);
  max-width: 100%;
  min-width: 0;
  height: calc(100svh - 48px);
  min-height: 0;
  max-height: calc(100svh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-top: calc(
    var(--customizer-header-height) + var(--customizer-preview-height) +
      var(--customizer-tabs-height) + 14px
  );
  scrollbar-color: var(--customizer-scroll-thumb) var(--customizer-scroll-track);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

body.customizer-sticky-preview-active .editor-app::-webkit-scrollbar {
  width: 8px;
}

body.customizer-sticky-preview-active .editor-app::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--customizer-scroll-track);
}

body.customizer-sticky-preview-active .editor-app::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--customizer-scroll-thumb);
  background-clip: padding-box;
}

body.customizer-sticky-preview-active .top-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 72px;
  background: var(--customizer-sticky-surface);
  box-shadow:
    inset 0 -1px 0 var(--customizer-sticky-line),
    0 5px 14px rgba(78, 65, 43, 0.05) !important;
}

body.customizer-sticky-preview-active .preview-stage {
  position: sticky;
  top: var(--customizer-header-height);
  z-index: 70;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: var(--customizer-preview-height);
  min-height: var(--customizer-preview-height);
  max-height: var(--customizer-preview-height);
  overflow: hidden;
  background: var(--customizer-sticky-surface);
  border-bottom: 1px solid var(--customizer-sticky-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 22px var(--customizer-sticky-shadow) !important;
  transition:
    height 240ms ease,
    min-height 240ms ease,
    max-height 240ms ease,
    border-radius 240ms ease,
    box-shadow 240ms ease;
  will-change: height;
}

body.customizer-sticky-preview-active .preview-sky {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0 !important;
  max-width: 100%;
  border-radius: inherit !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body.customizer-sticky-preview-active .preview-scene {
  transform: translateX(-50%) scale(var(--customizer-scene-scale));
  transform-origin: center bottom;
  transition: transform 240ms ease;
}

body.customizer-sticky-preview-active.customizer-sticky-preview-compact
  .preview-stage {
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 12px 24px rgba(70, 61, 44, 0.16) !important;
}

body.customizer-sticky-preview-active .part-tabs {
  position: sticky;
  top: calc(
    var(--customizer-header-height) + var(--customizer-preview-height)
  );
  z-index: 60;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--customizer-tabs-height);
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--customizer-sticky-surface);
  border-bottom: 1px solid var(--customizer-sticky-line) !important;
  box-shadow: 0 8px 17px rgba(74, 64, 47, 0.08) !important;
  transition: top 240ms ease;
  scrollbar-width: none;
}

body.customizer-sticky-preview-active .part-tabs::-webkit-scrollbar {
  display: none;
}

body.customizer-sticky-preview-active .stage-controls {
  position: relative;
  top: auto;
  z-index: 2;
}

body.customizer-sticky-preview-active .picker-panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 320px;
  overflow: visible;
  padding-bottom: max(44px, env(safe-area-inset-bottom));
  background: var(--panel-bg);
  overflow-anchor: none;
}

body.customizer-sticky-preview-active .option-grid,
body.customizer-sticky-preview-active .option-card,
body.customizer-sticky-preview-active .option-card > *,
body.customizer-sticky-preview-active .outfit-mix-layout,
body.customizer-sticky-preview-active .outfit-mix-style-button {
  min-width: 0;
  max-width: 100%;
}

body.customizer-sticky-preview-active .option-card,
body.customizer-sticky-preview-active .color-only-card,
body.customizer-sticky-preview-active .outfit-mix-style-button,
body.customizer-sticky-preview-active .outfit-mix-swatch {
  position: relative;
  box-sizing: border-box;
  min-height: 44px;
  scroll-margin-top: calc(
    var(--customizer-header-height) + var(--customizer-preview-height) +
      var(--customizer-tabs-height) + 14px
  );
}

body.customizer-sticky-preview-active .option-card .option-visual {
  margin-bottom: 10px;
}

body.customizer-sticky-preview-active .option-card .option-label,
body.customizer-sticky-preview-active .outfit-mix-style-label,
body.customizer-sticky-preview-active .outfit-mix-swatch-label {
  display: grid;
  min-height: 2.35em;
  align-items: center;
  line-height: 1.18;
  text-align: center;
  word-break: keep-all;
}

body.customizer-sticky-preview-active .option-card.active,
body.customizer-sticky-preview-active .color-only-card.active,
body.customizer-sticky-preview-active .outfit-mix-style-button.active,
body.customizer-sticky-preview-active .outfit-mix-swatch.active {
  border: 2px solid var(--customizer-selection) !important;
  box-shadow:
    0 0 0 3px var(--customizer-selection-soft),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    inset 0 -5px 12px rgba(91, 112, 80, 0.1),
    0 12px 24px rgba(74, 89, 65, 0.12) !important;
}

body.customizer-sticky-preview-active
  :is(
    .option-card.active,
    .color-only-card.active,
    .outfit-mix-style-button.active,
    .outfit-mix-swatch.active
  )::after {
  content: '\2713';
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 12;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: #ffffff;
  background: var(--customizer-selection);
  box-shadow: 0 4px 10px rgba(67, 83, 59, 0.2);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}

body.customizer-sticky-preview-active .part-tab {
  min-width: 64px;
  color: #847a6e;
}

body.customizer-sticky-preview-active .part-tab-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: currentColor;
  font-size: 1.6rem;
  filter: grayscale(0.9) saturate(0.45);
  opacity: 0.74;
}

body.customizer-sticky-preview-active .tab-icon-expression::before {
  left: 6px;
  top: 5px;
  width: 30px;
  height: 30px;
  border: 3px solid currentColor;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 39%, currentColor 0 2px, transparent 2.5px),
    radial-gradient(circle at 66% 39%, currentColor 0 2px, transparent 2.5px),
    rgba(255, 255, 255, 0.24);
}

body.customizer-sticky-preview-active .tab-icon-expression::after {
  left: 13px;
  top: 18px;
  width: 16px;
  height: 8px;
  border-bottom: 3px solid currentColor;
  border-radius: 0 0 999px 999px;
}

body.customizer-sticky-preview-active
  :is(.part-tab.is-current, .part-tab.is-complete)
  .part-tab-icon {
  filter: none;
  opacity: 1;
}

body.customizer-sticky-preview-active .part-tab.is-pending {
  opacity: 0.68;
}

body.customizer-sticky-preview-active .part-tab.is-complete {
  color: #617359;
  opacity: 0.92;
}

body.customizer-sticky-preview-active .part-tab.is-current {
  color: #445f4a;
  background: rgba(217, 232, 207, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(126, 157, 114, 0.28),
    0 5px 14px rgba(74, 91, 65, 0.1) !important;
}

body.customizer-sticky-preview-active .part-tab.is-current::after {
  height: 4px;
  background: var(--customizer-selection);
}

body.customizer-sticky-preview-active .part-tab.is-complete::before {
  content: '\2713';
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 2;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--customizer-selection);
  box-shadow: 0 3px 8px rgba(67, 83, 59, 0.17);
  font-size: 0.66rem;
  font-weight: 950;
}

body.customizer-sticky-preview-active .stage-button,
body.customizer-sticky-preview-active .done-button {
  min-height: 44px;
}

body.customizer-sticky-preview-active
  :is(.stage-button, .done-button):disabled,
body.customizer-sticky-preview-active
  :is(.stage-button, .done-button)[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.5;
  filter: saturate(0.68);
  box-shadow: inset 0 0 0 1px rgba(132, 119, 99, 0.12) !important;
}

body.customizer-sticky-preview-active
  :is(#nextStageButton, .done-button):not(:disabled):not(
    [aria-disabled='true']
  ) {
  border-color: rgba(113, 143, 103, 0.5) !important;
  color: #38513c;
  background: linear-gradient(145deg, #eff7e8, #cfe4c6);
}

body.customizer-sticky-preview-active
  #prevStageButton:not(:disabled):not([aria-disabled='true']) {
  border-color: rgba(153, 133, 105, 0.26) !important;
  color: #6c5f4f;
  background: linear-gradient(145deg, #fffaf0, #e9ddca);
}

body.customizer-sticky-preview-active
  :is(.window-delete-zone, .door-delete-zone, .drop-trash) {
  min-height: 44px;
  border: 1px solid rgba(143, 123, 98, 0.28) !important;
  border-radius: 999px !important;
  color: #756653;
  background: rgba(248, 241, 229, 0.84);
}

body.customizer-sticky-preview-active[data-step='tree'] .preview-sky {
  --weather-landscape-image: url('https://media.sharalong.com/assets/customizer-media/tree/landscape.png');
}

body.customizer-sticky-preview-active[data-step='house'] .preview-sky {
  --weather-landscape-image: url('https://media.sharalong.com/assets/customizer-media/house/landscape.png');
}

body.customizer-sticky-preview-active[data-step='face'] .preview-sky {
  --weather-landscape-image: url('https://media.sharalong.com/assets/customizer-media/avatar/landscape.png');
}

.customizer-instant-reading-media-host {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
}

.customizer-instant-reading-media-host {
  z-index: 0;
  overflow: hidden;
  background: #dcebd8;
}

.customizer-instant-reading-media-host.is-video-frame-pending {
  background-image: linear-gradient(
    100deg,
    rgba(208, 224, 214, 0.84) 20%,
    rgba(240, 244, 233, 0.92) 42%,
    rgba(208, 224, 214, 0.84) 64%
  );
  background-size: 220% 100%;
  animation: reading-video-shell-loading 1.25s ease-in-out infinite;
}

@keyframes reading-video-shell-loading {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

body[data-theme='dark'].customizer-sticky-preview-active {
  --customizer-sticky-line: rgba(195, 222, 208, 0.16);
  --customizer-sticky-surface: rgba(25, 45, 43, 0.98);
  --customizer-sticky-shadow: rgba(0, 0, 0, 0.28);
  --customizer-selection: #a8c99d;
  --customizer-selection-soft: rgba(168, 201, 157, 0.18);
  --customizer-button-ready: #a8c99d;
  --customizer-scroll-track: rgba(13, 30, 29, 0.42);
  --customizer-scroll-thumb: rgba(208, 225, 216, 0.42);
}

body[data-theme='dark'].customizer-sticky-preview-active .part-tab {
  color: rgba(224, 218, 205, 0.72);
}

body[data-theme='dark'].customizer-sticky-preview-active
  .part-tab.is-current {
  color: #f3ecd9;
  background: rgba(105, 143, 123, 0.28);
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(.option-card, .color-only-card, .outfit-mix-style-button, .outfit-mix-swatch) {
  color: #f0eadc;
  background-color: rgba(39, 65, 61, 0.86);
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(#nextStageButton, .done-button):not(:disabled):not(
    [aria-disabled='true']
  ) {
  color: #eff6e9;
  background: linear-gradient(145deg, #496b5b, #2d4d47);
}

@media (max-width: 719px) and (orientation: portrait) {
  body.customizer-sticky-preview-active {
    --customizer-preview-expanded-height: clamp(270px, 40svh, 360px);
    --customizer-preview-compact-height: clamp(210px, 31svh, 320px);
    --customizer-tabs-height: 68px;
    --customizer-scene-scale: 0.88;
  }

  body.customizer-sticky-preview-active .editor-app {
    width: 100%;
    height: 100svh;
    max-height: 100svh;
  }

  body.customizer-sticky-preview-active .top-bar {
    min-height: 84px;
  }

  body.customizer-sticky-preview-active .preview-stage {
    padding: 0;
  }

  body.customizer-sticky-preview-active .part-tabs {
    gap: 10px;
    padding-inline: 10px;
  }

  body.customizer-sticky-preview-active .part-tab {
    flex-basis: 58px;
    height: 66px;
  }

  body.customizer-sticky-preview-active .picker-panel {
    padding: 17px 12px max(40px, env(safe-area-inset-bottom));
  }

  body.customizer-sticky-preview-active.customizer-sticky-preview-compact
  {
    --customizer-scene-scale: 0.64;
  }

  body.customizer-sticky-preview-active[data-step='tree'] {
    --customizer-scene-scale: 0.63;
  }

  body.customizer-sticky-preview-active.customizer-sticky-preview-compact[data-step='tree'] {
    --customizer-scene-scale: 0.48;
  }

  body.customizer-sticky-preview-active[data-step='house'] {
    --customizer-scene-scale: 0.58;
  }

  body.customizer-sticky-preview-active.customizer-sticky-preview-compact[data-step='house'] {
    --customizer-scene-scale: 0.5;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    ) {
    --customizer-scene-scale: 0.6;
  }

  body.customizer-sticky-preview-active.customizer-sticky-preview-compact[data-step='tree']
    .preview-scene:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    ) {
    --customizer-scene-scale: 0.46;
  }

  body.customizer-sticky-preview-active[data-step='tree'] .preview-sky {
    --weather-landscape-image: url('https://media.sharalong.com/assets/customizer-media/tree/portrait.png');
  }

  body.customizer-sticky-preview-active[data-step='house'] .preview-sky {
    --weather-landscape-image: url('https://media.sharalong.com/assets/customizer-media/house/house_portrait_02.png');
  }

  body.customizer-sticky-preview-active[data-step='face'] .preview-sky {
    --weather-landscape-image: url('https://media.sharalong.com/assets/customizer-media/avatar/portrait.png');
  }

}

/* Continuous reading shell: one measured canvas across editing and reading. */
:root {
  --sharalong-page-max-width: 1080px;
  --sharalong-media-max-width: 1040px;
  --sharalong-reading-max-width: 960px;
  --sharalong-page-inline-padding: clamp(10px, 2vw, 20px);
  --sharalong-media-radius: clamp(18px, 2vw, 26px);
}

body.customizer-sticky-preview-active,
body.instant-reading-mode,
body.report-comic-mode {
  box-sizing: border-box;
  padding: 0 !important;
}

body.customizer-sticky-preview-active .editor-app,
body.instant-reading-mode .editor-app,
.report-arrange-page,
.mind-garden-combined-video-page,
.mind-garden-reading {
  width: min(100%, var(--sharalong-page-max-width)) !important;
  max-width: var(--sharalong-page-max-width) !important;
  margin-inline: auto;
}

body.customizer-sticky-preview-active .editor-app {
  height: 100svh;
  max-height: 100svh;
}

body.instant-reading-mode .picker-panel,
body.report-comic-mode .picker-panel {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.instant-reading-view,
.mind-garden-combined-video-view {
  overflow: visible !important;
}

.instant-reading-page,
.report-arrange-page,
.mind-garden-combined-video-page,
.mind-garden-reading {
  box-sizing: border-box;
  width: min(100%, var(--sharalong-page-max-width));
  max-width: var(--sharalong-page-max-width);
  margin-inline: auto;
  padding-inline: var(--sharalong-page-inline-padding);
}

.instant-reading-top,
.instant-reading-actions,
.report-arrange-top,
.report-arrange-controls,
.mind-garden-combined-video__header,
.mind-garden-combined-video__actions,
.mind-garden-reading__header,
.mind-garden-reading__actions {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--sharalong-page-max-width);
  margin-inline: auto;
}

.instant-reading-stage,
.report-arrange-stage-wrap,
.mind-garden-combined-video__viewport {
  box-sizing: border-box;
  width: min(100%, var(--sharalong-media-max-width));
  max-width: var(--sharalong-media-max-width);
  margin-inline: auto;
}

.customizer-instant-reading-media-host,
.mind-garden-combined-video__stage,
.report-arrange-canvas {
  border-radius: var(--sharalong-media-radius) !important;
}

.customizer-instant-reading-media-host,
.customizer-instant-reading-video {
  max-width: 100%;
}

.customizer-instant-reading-video[data-media-stage='tree'][data-media-variant='landscape'] {
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.report-arrange-canvas .garden-arrange-item.selected::after {
  content: none !important;
  display: none !important;
}

.report-arrange-canvas .garden-arrange-item.selected {
  filter: none !important;
}

.avatar-image-avatar::before {
  content: none;
}

.preview-scene.focus-face .avatar-object .avatar-image-avatar::before,
.report-arrange-canvas .garden-avatar .avatar-image-avatar::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  z-index: 1;
  display: block;
  width: 152px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(82, 68, 48, 0.25) 0 28%,
    rgba(110, 91, 64, 0.14) 46%,
    transparent 74%
  );
  filter: blur(1.2px);
  opacity: 0.76;
  pointer-events: none;
}

.report-arrange-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.report-arrange-top > :first-child {
  flex: 1 1 360px;
  min-width: 0;
}

.report-arrange-top-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.report-arrange-icon-button {
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #234947;
  background: linear-gradient(145deg, rgba(255, 253, 242, 0.98), rgba(224, 241, 237, 0.96));
  box-shadow:
    0 10px 22px rgba(72, 92, 82, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}

.report-arrange-icon-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 13px 26px rgba(72, 92, 82, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.report-arrange-icon-button:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
}

.report-arrange-icon-button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.report-arrange-icon-button .reading-nav-button__symbol-frame {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}

.report-arrange-icon-button .reading-nav-button__symbol-frame .reading-nav-button__symbol {
  width: 86px;
}

.report-arrange-controls .scale-control input[type='range'] {
  --garden-range-progress: 50%;
  appearance: none;
  -webkit-appearance: none;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #b9f3ce 0%,
    #bfe8ff var(--garden-range-progress),
    rgba(172, 157, 136, 0.24) var(--garden-range-progress),
    rgba(172, 157, 136, 0.24) 100%
  );
  accent-color: #72bfc1;
  cursor: pointer;
}

.report-arrange-controls .scale-control input[type='range']::-webkit-slider-runnable-track {
  height: 9px;
  border-radius: 999px;
  background: transparent;
}

.report-arrange-controls .scale-control input[type='range']::-moz-range-track {
  height: 9px;
  border-radius: 999px;
  background: rgba(172, 157, 136, 0.24);
}

.report-arrange-controls .scale-control input[type='range']::-moz-range-progress {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b9f3ce, #bfe8ff);
}

.report-arrange-controls .scale-control input[type='range']::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -6.5px;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: linear-gradient(145deg, #b9f3ce, #8acfea 72%, #bfe8ff);
  box-shadow: 0 4px 10px rgba(50, 103, 104, 0.3);
}

.report-arrange-controls .scale-control input[type='range']::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: linear-gradient(145deg, #b9f3ce, #8acfea 72%, #bfe8ff);
  box-shadow: 0 4px 10px rgba(50, 103, 104, 0.3);
}

.report-arrange-controls .scale-control input[type='range']:focus-visible {
  outline: 3px solid rgba(74, 166, 188, 0.42);
  outline-offset: 5px;
}

/* Garden composites use the same deterministic roof geometry as the editor. */
.garden-house-composite .house-model.floor-small .house-roof {
  display: block !important;
  bottom: 134px !important;
  transform: translateX(-50%) translateY(0) scale(1.05) !important;
  transform-origin: center bottom !important;
  z-index: 8 !important;
}

.garden-house-composite .house-model.floor-small.roof-tall-triangle .house-roof {
  bottom: 129px !important;
  width: 15.2rem !important;
  height: 7.25rem !important;
  transform: translateX(-50%) translateY(-0.2cm) scale(1.05) !important;
}

.garden-house-composite .house-model.floor-small.roof-moss-dome .house-roof {
  transform: translateX(-50%) translateY(calc(0.28rem + 0.1cm)) scale(1.155) !important;
}

.garden-house-composite .house-model.floor-small.roof-asymmetric .house-roof {
  transform: translateX(-50%) translateY(0) scale(1.1) !important;
}

.garden-house-composite .house-model.floor-tiny .house-roof {
  display: block !important;
  bottom: 6.55rem !important;
  transform: translateX(-50%) scale(1.12) !important;
  transform-origin: center bottom !important;
  z-index: 8 !important;
}

.garden-house-composite .house-model.floor-tiny.roof-moss-dome .house-roof {
  bottom: 6.1rem !important;
  width: 13.8rem !important;
  height: 8.15rem !important;
  transform: translateX(-50%) translateY(0.12rem) scale(1.16) !important;
}

.garden-house-composite .house-model.floor-open .house-roof {
  bottom: 10.1rem !important;
  transform: translateX(-50%) translateY(0.5cm) scale(1.166) !important;
  transform-origin: center bottom !important;
  z-index: 8 !important;
}

.garden-house-composite .house-model.floor-open.roof-flat .house-roof {
  transform: translateX(-50%) translateY(0.5cm) scale(1.232) !important;
}

.garden-house-composite .house-model.floor-open.roof-moss-dome .house-roof {
  transform: translateX(-50%) translateY(calc(0.28rem + 0.5cm)) scale(1.272) !important;
}

.garden-house-composite .house-model.floor-grand .house-roof {
  display: block !important;
  left: calc(50% + 0.2cm) !important;
  bottom: 11.45rem !important;
  transform: translateX(-50%) translateY(0.1cm) scale(0.81) !important;
  transform-origin: center bottom !important;
  z-index: 8 !important;
}

.garden-house-composite .house-model.floor-grand.roof-flat .house-roof {
  bottom: 11.58rem !important;
  width: 8.75rem !important;
  height: 2.9rem !important;
}

.garden-house-composite .house-model.floor-grand.roof-tall-triangle .house-roof {
  bottom: 11.42rem !important;
  width: 9.15rem !important;
  height: 7rem !important;
}

.garden-house-composite .house-model.floor-grand.roof-moss-dome .house-roof {
  bottom: 11.42rem !important;
  width: 9.05rem !important;
  height: 5.35rem !important;
}

.garden-house-composite .house-model.floor-grand.roof-attic-window .house-roof {
  bottom: 11.48rem !important;
  width: 9.15rem !important;
  height: 3.45rem !important;
}

.garden-house-composite .house-model.floor-grand.roof-asymmetric .house-roof {
  bottom: 11.48rem !important;
  width: 9.45rem !important;
  height: 5.2rem !important;
}

@media (max-width: 719px) {
  .instant-reading-page,
  .report-arrange-page,
  .mind-garden-combined-video-page,
  .mind-garden-reading {
    padding-inline: var(--sharalong-page-inline-padding);
  }

  .report-arrange-top {
    align-items: flex-start;
  }

  .report-arrange-top .tts-button {
    width: 44px;
    min-width: 44px;
    padding: 5px;
  }

  .report-arrange-top .tts-button strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  body.instant-reading-mode .editor-app,
  body.report-comic-mode .editor-app {
    grid-template-rows: 56px minmax(0, 1fr) !important;
  }

  body.instant-reading-mode .picker-panel,
  body.report-comic-mode .picker-panel {
    height: calc(100svh - 56px);
  }

  .instant-reading-top,
  .report-arrange-top,
  .mind-garden-combined-video__header {
    padding-block: 6px;
  }

  .instant-reading-actions,
  .mind-garden-combined-video__actions {
    padding-block: 6px max(7px, env(safe-area-inset-bottom));
  }
}

/* Final eleven-screen calibration: compact report, layering, sun, titles, and outfit grid. */
.report-arrange-canvas > .garden-house {
  z-index: 3;
}

.report-arrange-canvas > .garden-tree {
  z-index: 4;
}

.report-arrange-canvas > .garden-avatar {
  z-index: 5;
}

.report-arrange-footer-navigation {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) !important;
}

.preview-sky.weather-sunny-warm::after,
.flow-garden-canvas.garden-weather-surface.weather-sunny-warm::after,
.read-only-garden-inner.garden-weather-surface.weather-sunny-warm::after {
  background-position: 14% -4% !important;
  background-size: clamp(107px, 14.76%, 172px) auto !important;
}

body.customizer-sticky-preview-active[data-step='face'] #panelTitle {
  color: #72bce5;
  font-size: clamp(0.9rem, 1.7vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.012em;
}

body.customizer-sticky-preview-active[data-step='face']
  .face-editor-sections {
  gap: 14px;
}

.reading-selected-object-overlay--tree {
  --reading-object-x: 50%;
  --reading-object-y: 21%;
  --reading-object-scale: 0.868;
}

.reading-selected-object-overlay--house {
  --reading-object-x: 50%;
  --reading-object-y: 23%;
}

.narration-progress__range {
  touch-action: none;
}

body.customizer-sticky-preview-active[data-step='face'] .outfit-mix-card {
  --outfit-thumbnail-size: clamp(76px, 9vw, 132px);
  --outfit-color-swatch-size: clamp(24px, 3vw, 38px);
  min-height: 0;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-controls {
  gap: 10px;
  align-content: start;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-button {
  min-height: calc(var(--outfit-thumbnail-size) + 16px);
  padding: 6px;
  gap: 0;
}

body.customizer-sticky-preview-active[data-step='face']
  :is(.outfit-mix-style-label, .outfit-mix-style-description) {
  display: none !important;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-visual,
body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-visual
  .outfit-style-sample {
  width: min(var(--outfit-thumbnail-size), 100%);
  height: var(--outfit-thumbnail-size);
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-visual
  .outfit-asset-thumb-image {
  object-fit: contain;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-swatch-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-swatch {
  min-width: 0;
  min-height: 54px;
  padding: 6px 3px;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-swatch-dot {
  width: var(--outfit-color-swatch-size);
  height: var(--outfit-color-swatch-size);
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-swatch-label {
  display: none !important;
}

@media (min-width: 720px) and (max-height: 760px) {
  .report-arrange-page {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 4px;
  }

  .report-arrange-top {
    min-height: 44px;
    gap: 6px;
    padding-block: 2px;
  }

  .report-arrange-top .flow-kicker {
    display: none !important;
  }

  .report-arrange-top h3 {
    margin-block: 0 !important;
    font-size: clamp(1rem, 2vw, 1.38rem) !important;
    line-height: 1.12;
  }

  .report-arrange-stage-wrap {
    max-height: calc(100svh - 292px);
  }

  .report-arrange-canvas {
    max-height: calc(100svh - 292px);
  }

  .report-arrange-controls {
    max-height: none;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.82fr);
    gap: 4px 10px;
    padding: 5px 10px 6px;
    overflow: visible;
  }

  .report-arrange-controls .arrange-helper {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.2;
  }

  .report-arrange-controls .scale-control {
    order: 0;
    min-width: 0;
    font-size: 0.76rem;
  }

  .report-arrange-controls .garden-object-toolbar {
    min-width: 0;
  }

  .report-arrange-controls .garden-object-button {
    min-height: 40px;
    padding-block: 3px;
    font-size: 0.78rem;
  }

  .report-arrange-footer-action {
    min-height: 42px;
  }
}

@media (max-width: 719px) {
  .report-arrange-footer-navigation {
    display: grid !important;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) !important;
  }

  .report-arrange-footer-navigation #gardenBackButton,
  .report-arrange-footer-navigation #completeGardenButton {
    display: inline-flex !important;
  }

  .customizer-instant-reading-media-host[data-media-variant='portrait']
    .reading-selected-object-overlay--tree {
    --reading-object-x: 50%;
    --reading-object-y: 24%;
    --reading-object-scale: 0.7;
  }

  .customizer-instant-reading-media-host[data-media-variant='portrait']
    .reading-selected-object-overlay--house {
    --reading-object-x: 50%;
    --reading-object-y: 28%;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-controls,
  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-controls
    > div,
  body.customizer-sticky-preview-active[data-step='face']
    :is(.outfit-mix-style-grid, .outfit-mix-swatch-row) {
    display: grid;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-controls
    > div {
    grid-template-columns: minmax(0, 1fr);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-swatch-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body.customizer-sticky-preview-active[data-step='face']
    :is(.outfit-mix-style-button, .outfit-mix-swatch) {
    grid-area: auto !important;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual,
  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-style-sample {
    width: min(var(--outfit-thumbnail-size), 100%);
    height: min(var(--outfit-thumbnail-size), 26vw);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .reading-selected-object-overlay--tree {
    --reading-object-x: 50%;
    --reading-object-y: 19%;
    --reading-object-scale: 0.784;
  }

  .reading-selected-object-overlay--house {
    --reading-object-x: 50%;
    --reading-object-y: 21%;
  }
}

/* Final cascade guards for report layering, compact controls, and face headings. */
.report-arrange-canvas > .garden-house {
  z-index: 3 !important;
}

.report-arrange-canvas > .garden-tree {
  z-index: 4 !important;
}

.report-arrange-canvas > .garden-avatar {
  z-index: 5 !important;
}

body.customizer-sticky-preview-active[data-step='face'] #panelTitle,
body[data-theme='dark'].customizer-sticky-preview-active[data-step='face']
  #panelTitle {
  color: #72bce5 !important;
  font-weight: 600 !important;
}

.narration-progress__range,
.narration-progress__range::-webkit-slider-runnable-track,
.narration-progress__range::-webkit-slider-thumb {
  transition:
    background-color 150ms ease,
    filter 150ms ease;
}

.narration-progress__range:hover::-webkit-slider-runnable-track,
.narration-progress__range:hover::-webkit-slider-thumb {
  filter: brightness(1.055);
}

.narration-progress__range:hover::-moz-range-track,
.narration-progress__range:hover::-moz-range-progress,
.narration-progress__range:hover::-moz-range-thumb {
  filter: brightness(1.055);
}

@media (min-width: 720px) and (max-height: 760px) {
  body.report-comic-mode .picker-panel:has(.report-arrange-page) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .report-arrange-top .flow-kicker {
    display: none !important;
  }

  .report-arrange-controls {
    max-height: none !important;
    overflow: visible !important;
  }
}

.narration-progress__range {
  touch-action: none !important;
}

/* Keep the requested light mint-gray action family above the shared dark palette. */
body[data-theme='dark']
  .mind-garden-combined-video-page
  .mind-garden-combined-footer-actions
  .mind-garden-combined-footer-action,
body[data-theme='dark']
  .report-arrange-page
  .report-arrange-footer-action {
  color: var(--garden-footer-action-ink) !important;
  border-color: rgba(53, 72, 65, 0.52) !important;
  background: linear-gradient(
    135deg,
    var(--garden-footer-action-start),
    var(--garden-footer-action-end)
  ) !important;
  outline: 1px solid rgba(226, 240, 235, 0.26);
  outline-offset: -2px;
}

body[data-theme='dark']
  .mind-garden-combined-video-page
  .mind-garden-combined-footer-actions
  .mind-garden-combined-footer-action:disabled {
  color: var(--garden-footer-action-ink) !important;
  border-color: rgba(53, 72, 65, 0.38) !important;
  background: linear-gradient(
    135deg,
    var(--garden-footer-action-start),
    var(--garden-footer-action-end)
  ) !important;
  opacity: 0.54;
}

body[data-theme='dark']
  .report-arrange-page
  .report-arrange-controls
  .garden-object-button {
  color: #405048 !important;
  border-color: rgba(64, 80, 72, 0.46) !important;
  background: linear-gradient(145deg, #fbfcfc, #e8edeb) !important;
  outline: 1px solid rgba(226, 240, 235, 0.24);
  outline-offset: -2px;
}

body[data-theme='dark']
  .report-arrange-page
  .report-arrange-controls
  .garden-object-button.active {
  color: #30463d !important;
  border-color: rgba(48, 70, 61, 0.68) !important;
  background: linear-gradient(145deg, #e3f3ed, #cfe6df) !important;
  outline: 2px solid rgba(226, 240, 235, 0.32);
  outline-offset: -2px;
}

/* Six-screen polish: logo, canonical report navigation, footer CTA, and reading overlays. */
:root {
  --garden-footer-action-start: #edf6f2;
  --garden-footer-action-end: #d7e9e3;
  --garden-footer-action-border: #aebcb7;
  --garden-footer-action-ink: #354841;
  --garden-footer-action-shadow: 0 8px 18px rgba(93, 119, 110, 0.16);
}

.top-bar:has(.brand-logo-image) {
  overflow: visible;
}

.brand-lockup:has(.brand-logo-image) {
  position: relative;
  display: grid;
  height: 64px;
  min-height: 0;
  place-items: center;
  overflow: visible !important;
  pointer-events: none;
}

.brand-logo-image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: min(220px, 100%);
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: none !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%);
  user-select: none;
}

.mind-garden-combined-footer-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1.4vw, 12px);
}

.mind-garden-combined-footer-action,
.report-arrange-footer-action {
  min-width: 0;
  min-height: 48px;
  color: var(--garden-footer-action-ink) !important;
  border: 1px solid var(--garden-footer-action-border) !important;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--garden-footer-action-start),
    var(--garden-footer-action-end)
  ) !important;
  box-shadow: var(--garden-footer-action-shadow) !important;
}

.mind-garden-combined-footer-action:disabled {
  color: var(--garden-footer-action-ink) !important;
  opacity: 0.54;
  cursor: not-allowed;
}

.report-arrange-page {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.report-arrange-footer-navigation {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(8px, 1.4vw, 12px);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--sharalong-page-max-width);
  margin-inline: auto;
  padding: 0 14px max(10px, env(safe-area-inset-bottom));
}

.report-arrange-footer-action--next {
  background: linear-gradient(135deg, #e0f4ef, #c9e5e7) !important;
}

.report-arrange-controls .garden-object-button {
  color: #405048 !important;
  border: 1px solid rgba(137, 149, 144, 0.28) !important;
  background: linear-gradient(145deg, #fbfcfc, #e8edeb) !important;
}

.report-arrange-controls .garden-object-button.active {
  color: #30463d !important;
  border: 1px solid rgba(99, 135, 120, 0.52) !important;
  outline: 1px solid rgba(99, 135, 120, 0.3) !important;
  outline-offset: -2px;
  background: linear-gradient(145deg, #e3f3ed, #cfe6df) !important;
}

.report-arrange-controls .scale-control input[type='range'] {
  outline: 1px solid #abb6b2;
  outline-offset: -1px;
  background: linear-gradient(
    90deg,
    #dcebe5 0 var(--garden-range-progress),
    #edf1ef var(--garden-range-progress) 100%
  ) !important;
}

.report-arrange-controls
  .scale-control
  input[type='range']::-webkit-slider-runnable-track {
  background: transparent !important;
}

.report-arrange-controls .scale-control input[type='range']::-moz-range-track {
  background: #edf1ef !important;
}

.report-arrange-controls
  .scale-control
  input[type='range']::-moz-range-progress {
  background: #dcebe5 !important;
}

.report-arrange-controls
  .scale-control
  input[type='range']::-webkit-slider-thumb,
.report-arrange-controls .scale-control input[type='range']::-moz-range-thumb {
  border-color: rgba(255, 255, 255, 0.94);
  background: linear-gradient(145deg, #f6efe4, #d5e7e0 72%, #e4efec);
  box-shadow: 0 4px 10px rgba(75, 96, 89, 0.2);
}

.customizer-instant-reading-media-host {
  isolation: isolate;
}

.customizer-instant-reading-media-host > .customizer-instant-reading-video {
  position: relative;
  z-index: 1;
}

.reading-selected-object-overlay {
  --reading-object-x: 50%;
  --reading-object-y: 11%;
  --reading-object-scale: 0.7;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  .reading-selected-object-overlay:is(
      .reading-selected-object-overlay--house,
      .reading-selected-object-overlay--avatar
    )[data-reading-object-state='preparing'] {
    visibility: hidden;
    opacity: 0;
  }

  .reading-selected-object-overlay:is(
      .reading-selected-object-overlay--house,
      .reading-selected-object-overlay--avatar
    )[data-reading-object-state='ready'] {
    visibility: visible;
    animation: reading-object-atomic-reveal 150ms ease-out both;
  }
}

@keyframes reading-object-atomic-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-selected-object-overlay:is(
      .reading-selected-object-overlay--house,
      .reading-selected-object-overlay--avatar
    )[data-reading-object-state='ready'] {
    animation: none;
  }
}

.reading-selected-object-visual {
  position: absolute;
  left: var(--reading-object-x);
  bottom: var(--reading-object-y);
  display: grid;
  width: max-content;
  height: max-content;
  place-items: end center;
  transform: translateX(-50%) scale(var(--reading-object-scale));
  transform-origin: center bottom;
  pointer-events: none;
  user-select: none;
}

.reading-selected-object-overlay--tree {
  --reading-object-x: 54%;
  --reading-object-y: 12%;
  --reading-object-scale: 0.62;
}

.reading-selected-object-overlay--house {
  --reading-object-y: 11%;
  --reading-object-scale: 0.65;
}

.reading-selected-object-overlay--avatar {
  --reading-object-y: 10%;
  --reading-object-scale: 0.6;
}

.reading-selected-object-overlay--avatar .avatar-image-avatar::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  z-index: 1;
  display: block;
  width: 152px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(82, 68, 48, 0.25) 0 28%,
    rgba(110, 91, 64, 0.14) 46%,
    transparent 74%
  );
  filter: blur(1.2px);
  opacity: 0.76;
  pointer-events: none;
}

.reading-selected-object-overlay :is(img, .avatar-image-layer) {
  pointer-events: none !important;
  user-select: none !important;
}

.reading-selected-object-overlay--avatar *,
.reading-selected-object-overlay--avatar .avatar-motion-static {
  animation: none !important;
  transition: none !important;
}

/* Keep the static reading avatar inside one composed wrapper on Android.
   Promoting every image layer separately can drop outfit/video surfaces while scrolling. */
.reading-selected-object-overlay--avatar .avatar-image-layer {
  transform: none;
  backface-visibility: visible;
  will-change: auto;
}

.reading-selected-object-overlay .avatar-motion-version-badge {
  display: none !important;
}

.instant-reading-stage .reading-live-bubble-host {
  z-index: 3;
}

.instant-reading-stage .customizer-instant-video-error {
  position: relative;
  z-index: 4;
}

body[data-theme='dark']
  :is(.mind-garden-combined-footer-action, .report-arrange-footer-action) {
  color: #263b35 !important;
  border-color: rgba(23, 42, 40, 0.52) !important;
  outline: 1px solid rgba(226, 240, 235, 0.24);
  outline-offset: -2px;
}

body[data-theme='dark']
  .report-arrange-controls
  .garden-object-button {
  color: #293c36 !important;
  border-color: rgba(25, 48, 44, 0.48) !important;
  outline: 1px solid rgba(231, 241, 237, 0.2);
  outline-offset: -2px;
}

body[data-theme='dark']
  .report-arrange-controls
  .garden-object-button.active {
  color: #203b33 !important;
  border-color: rgba(26, 71, 59, 0.7) !important;
  outline-color: rgba(230, 244, 238, 0.34) !important;
}

@media (max-width: 719px) {
  .brand-lockup:has(.brand-logo-image) {
    height: 52px;
  }

  .brand-logo-image {
    width: min(170px, 100%);
  }

  .mind-garden-combined-footer-actions,
  .report-arrange-footer-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    padding-inline: 8px;
  }

  .report-arrange-footer-navigation {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) !important;
  }

  .mind-garden-combined-footer-action,
  .report-arrange-footer-action {
    min-height: 44px;
    padding-inline: 8px;
  }

  .customizer-instant-reading-media-host[data-media-variant='portrait']
    .reading-selected-object-overlay--tree {
    --reading-object-x: 50%;
    --reading-object-y: 8%;
    --reading-object-scale: 0.5;
  }

  .customizer-instant-reading-media-host[data-media-variant='portrait']
    .reading-selected-object-overlay--house {
    --reading-object-y: 8%;
    --reading-object-scale: 0.48;
  }

  .customizer-instant-reading-media-host[data-media-variant='portrait']
    .reading-selected-object-overlay--avatar {
    --reading-object-y: 8%;
    --reading-object-scale: 0.82;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .brand-logo-image {
    width: min(150px, 100%);
  }

  .reading-selected-object-overlay--tree {
    --reading-object-x: 54%;
    --reading-object-y: 11%;
    --reading-object-scale: 0.56;
  }

  .reading-selected-object-overlay--house {
    --reading-object-y: 10%;
    --reading-object-scale: 0.55;
  }

  .reading-selected-object-overlay--avatar {
    --reading-object-y: 9%;
    --reading-object-scale: 0.58;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  body.customizer-sticky-preview-active {
    --customizer-preview-expanded-height: clamp(200px, 42svh, 270px);
    --customizer-preview-compact-height: clamp(140px, 36svh, 190px);
    --customizer-tabs-height: 54px;
    --customizer-scene-scale: 0.62;
  }

  body.customizer-sticky-preview-active .editor-app {
    height: 100svh;
    max-height: 100svh;
  }

  body.customizer-sticky-preview-active .part-tab {
    height: 52px;
  }

  body.customizer-sticky-preview-active .top-bar {
    min-height: 56px;
  }

  body.customizer-sticky-preview-active .part-tab-icon {
    width: 30px;
    height: 30px;
    font-size: 1.3rem;
  }

  body.customizer-sticky-preview-active.customizer-sticky-preview-compact
  {
    --customizer-scene-scale: 0.46;
  }

  body.customizer-sticky-preview-active[data-step='tree'] {
    --customizer-scene-scale: 0.45;
  }

  body.customizer-sticky-preview-active.customizer-sticky-preview-compact[data-step='tree'] {
    --customizer-scene-scale: 0.3;
  }

  body.customizer-sticky-preview-active[data-step='house'] {
    --customizer-scene-scale: 0.47;
  }

  body.customizer-sticky-preview-active.customizer-sticky-preview-compact[data-step='house'] {
    --customizer-scene-scale: 0.32;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    ) {
    --customizer-scene-scale: 0.43;
  }

  body.customizer-sticky-preview-active.customizer-sticky-preview-compact[data-step='tree']
    .preview-scene:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    ) {
    --customizer-scene-scale: 0.29;
  }
}

/* Mind-garden combined reading: video-first with card reading as an alternate. */
.mind-garden-combined-video-view {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.mind-garden-combined-video-page {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  width: 100%;
  min-height: 100%;
  color: var(--text-color);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 229, 188, 0.46), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(209, 229, 214, 0.5), transparent 30%),
    linear-gradient(180deg, #fbf7ee 0%, #f3efe5 50%, #edf2e9 100%);
}

.mind-garden-combined-video__header,
.mind-garden-combined-video__viewport,
.mind-garden-combined-video__actions {
  width: min(100%, 1080px);
  margin-inline: auto;
}

.mind-garden-combined-video__header {
  min-height: 0;
  padding: 15px 20px 12px;
}

.mind-garden-combined-video__header h3 {
  margin: 3px 0 0;
  font-size: clamp(1.24rem, 2.7vw, 1.9rem);
  line-height: 1.2;
  word-break: keep-all;
}

.mind-garden-combined-video__header p:last-child {
  margin: 6px 0 0;
  color: var(--muted-color);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}

.mind-garden-combined-video__viewport {
  min-width: 0;
  padding: 10px 20px 18px;
}

.mind-garden-combined-video__stage {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(113, 91, 60, 0.16);
  border-radius: 26px;
  background: rgba(255, 253, 246, 0.96);
  box-shadow: 0 18px 44px rgba(79, 67, 45, 0.13);
}

.mind-garden-combined-video__stage
  .customizer-instant-reading-media-host {
  border-radius: 25px 25px 0 0;
}

.mind-garden-combined-video__hint {
  margin: 0;
  padding: 12px 16px 14px;
  color: var(--muted-color);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.48;
  text-align: center;
  word-break: keep-all;
}

.mind-garden-combined-video__actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 10px;
  padding: 10px 20px max(13px, env(safe-area-inset-bottom));
}

.mind-garden-combined-video__actions button {
  min-height: 46px;
}

.mind-garden-reading__header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mind-garden-reading__video-toggle {
  min-height: 44px;
  padding-inline: 13px;
  border-radius: 999px;
  white-space: nowrap;
}

body[data-theme='dark'] .mind-garden-combined-video-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(119, 91, 58, 0.22), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(78, 116, 94, 0.25), transparent 30%),
    linear-gradient(180deg, #223733, #1b2d2a);
}

body[data-theme='dark'] .mind-garden-combined-video__stage {
  border-color: rgba(181, 217, 196, 0.15);
  background: rgba(31, 47, 43, 0.96);
}

@media (max-width: 719px) {
  .mind-garden-combined-video__header {
    padding: 11px 12px 8px;
  }

  .mind-garden-combined-video__header h3 {
    font-size: clamp(1.08rem, 5vw, 1.32rem);
  }

  .mind-garden-combined-video__header p:last-child {
    font-size: 0.8rem;
  }

  .mind-garden-combined-video__viewport {
    padding: 8px 10px 12px;
  }

  .mind-garden-combined-video__stage {
    border-radius: 20px;
  }

  .mind-garden-combined-video__stage
    .customizer-instant-reading-media-host {
    border-radius: 19px 19px 0 0;
  }

  .mind-garden-combined-video__hint {
    padding: 10px 12px 12px;
    font-size: 0.76rem;
  }

  .mind-garden-combined-video__actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
  }

  .mind-garden-reading .mind-garden-reading__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .mind-garden-reading__header-actions {
    justify-self: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mind-garden-reading__video-toggle {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.customizer-sticky-preview-active .preview-stage,
  body.customizer-sticky-preview-active .part-tabs,
  body.customizer-sticky-preview-active .preview-scene {
    transition: none;
  }
}

/* Interpretation guides: derived presentation only, never assessment state. */
.interpretation-speaker-status {
  margin: 5px 0 0;
  color: #6f604e;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.35;
}

.instant-reading-stage .instant-reading-bubbles {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  max-height: min(46%, 220px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 10px;
  pointer-events: auto;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.instant-reading-stage .instant-bubble {
  flex: 0 0 auto;
  width: fit-content;
  max-width: min(76%, 520px);
  opacity: 0.78;
  visibility: visible;
  transform: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.instant-reading-stage .instant-bubble.forest-bubble-left {
  align-self: flex-start;
  color: #3d442d;
  background: linear-gradient(
    145deg,
    rgba(250, 255, 218, 0.94),
    rgba(199, 231, 154, 0.92)
  );
  box-shadow:
    0 12px 22px rgba(59, 91, 40, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.62);
}

.instant-reading-stage .instant-bubble.forest-bubble-right {
  align-self: flex-end;
  color: #3b3150;
  background: linear-gradient(
    145deg,
    rgba(244, 235, 255, 0.95),
    rgba(216, 194, 237, 0.92)
  );
  box-shadow:
    0 12px 22px rgba(72, 60, 107, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.62);
}

.instant-reading-stage .instant-bubble.is-narrating {
  opacity: 1;
  transform: translateY(-1px) scale(1.01);
  outline: 3px solid rgba(255, 239, 155, 0.58);
  outline-offset: 2px;
}

.instant-reading-stage .instant-bubble strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 950;
}

.instant-reading-friends.interpretation-guide-pair {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.instant-reading-friends .interpretation-guide {
  display: grid;
  justify-items: center;
  width: clamp(92px, 16vw, 156px);
  margin: 0;
  opacity: 0.54;
  filter: saturate(0.8) drop-shadow(0 8px 14px rgba(56, 58, 48, 0.14));
  transform: scale(0.94);
  transition:
    opacity 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.instant-reading-friends .interpretation-guide__avatar {
  display: grid;
  place-items: end center;
  width: 100%;
  height: clamp(104px, 20vh, 174px);
}

.instant-reading-friends .interpretation-guide__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.instant-reading-friends .interpretation-guide figcaption {
  position: static;
  min-width: max-content;
  margin-top: -4px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  color: #51493e;
  background: rgba(255, 251, 239, 0.9);
  box-shadow: 0 7px 16px rgba(68, 59, 45, 0.12);
  font-size: 0.73rem;
  font-weight: 900;
  line-height: 1;
}

.instant-reading-friends .interpretation-guide.is-current-turn {
  opacity: 0.86;
  filter: saturate(1) drop-shadow(0 10px 18px rgba(102, 95, 55, 0.2));
  transform: scale(0.98);
}

.instant-reading-friends .interpretation-guide.is-speaking {
  opacity: 1;
  filter:
    saturate(1.08)
    drop-shadow(0 0 13px rgba(255, 230, 128, 0.76))
    drop-shadow(0 12px 20px rgba(70, 64, 47, 0.18));
  transform: translateY(-3px) scale(1.035);
}

.mind-garden-reading .mind-garden-reading__hero {
  grid-template-columns: minmax(96px, 138px) auto minmax(0, 1fr);
}

.mind-garden-reading__narrator {
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  justify-items: center;
  width: 100%;
  margin: 0;
  opacity: 0.92;
  filter: drop-shadow(0 12px 18px rgba(77, 89, 64, 0.17));
  transition:
    filter 180ms ease,
    transform 180ms ease;
}

.mind-garden-reading__narrator img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
}

.mind-garden-reading__narrator figcaption {
  margin-top: -3px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--mind-reading-accent-deep);
  background: rgba(255, 252, 239, 0.92);
  font-size: 0.72rem;
  font-weight: 900;
}

.mind-garden-reading__narrator.is-speaking {
  filter:
    drop-shadow(0 0 13px rgba(255, 224, 124, 0.65))
    drop-shadow(0 14px 20px rgba(77, 89, 64, 0.2));
  transform: translateY(-2px) scale(1.025);
}

.mind-garden-reading .mind-garden-reading__keywords {
  grid-column: 2 / -1;
}

body[data-theme='dark'] .interpretation-speaker-status,
body[data-theme='dark'] .instant-reading-friends .interpretation-guide figcaption,
body[data-theme='dark'] .mind-garden-reading__narrator figcaption {
  color: #e7e1d5;
}

body[data-theme='dark'] .instant-reading-friends .interpretation-guide figcaption,
body[data-theme='dark'] .mind-garden-reading__narrator figcaption {
  background: rgba(39, 51, 47, 0.9);
}

@media (max-width: 719px) {
  .instant-reading-stage .instant-reading-bubbles {
    max-height: min(44%, 188px);
  }

  .instant-reading-stage .instant-bubble {
    max-width: 92%;
  }

  .instant-reading-friends .interpretation-guide {
    width: clamp(76px, 25vw, 118px);
  }

  .instant-reading-friends .interpretation-guide__avatar {
    height: clamp(88px, 17vh, 132px);
  }

  .mind-garden-reading .mind-garden-reading__hero {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 11px;
  }

  .mind-garden-reading__narrator {
    grid-row: 1 / span 2;
  }

  .mind-garden-reading__narrator img {
    height: 90px;
  }

  .mind-garden-reading .mind-garden-reading__hero-mark {
    display: none;
  }

  .mind-garden-reading .mind-garden-reading__hero-copy {
    grid-column: 2;
  }

  .mind-garden-reading .mind-garden-reading__keywords {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .instant-reading-friends .interpretation-guide,
  .mind-garden-reading__narrator {
    transition: none;
  }
}

/* Focused customizer UI corrections: expression, storm preview, navigation. */
body.customizer-sticky-preview-active[data-step='face']
  .avatar-expression-card
  .expression-image-sample[data-avatar-gender='male']
  .expression-thumbnail-image {
  transform: translateY(51px) scale(2.1);
  transform-origin: center center;
}

body.customizer-sticky-preview-active[data-step='tree']
  .preview-sky.weather-storm {
  background-color: #aebbc7 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(16, 25, 45, 0.5) 0%,
      rgba(48, 61, 81, 0.22) 48%,
      rgba(31, 62, 56, 0.12) 100%
    ),
    var(--weather-landscape-image) !important;
}

body.customizer-sticky-preview-active[data-step='tree']
  .preview-sky.weather-storm::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 44% !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(
      112deg,
      transparent 0 47%,
      rgba(255, 255, 242, 0.96) 48% 49.5%,
      rgba(183, 213, 251, 0.68) 50% 51.5%,
      transparent 52.5% 100%
    ),
    linear-gradient(
      68deg,
      transparent 0 47%,
      rgba(250, 252, 244, 0.94) 48% 49.5%,
      rgba(173, 207, 248, 0.64) 50% 51.5%,
      transparent 52.5% 100%
    ),
    linear-gradient(
      116deg,
      transparent 0 47%,
      rgba(255, 255, 239, 0.9) 48% 49.5%,
      rgba(168, 204, 247, 0.58) 50% 51.5%,
      transparent 52.5% 100%
    ),
    linear-gradient(
      62deg,
      transparent 0 47%,
      rgba(239, 247, 255, 0.76) 48% 50%,
      transparent 51% 100%
    ),
    linear-gradient(
      128deg,
      transparent 0 47%,
      rgba(226, 239, 255, 0.7) 48% 50%,
      transparent 51% 100%
    ),
    radial-gradient(
      ellipse at center,
      rgba(218, 229, 255, 0.2),
      rgba(133, 154, 190, 0.06) 42%,
      transparent 72%
    ),
    radial-gradient(
      ellipse at center,
      rgba(19, 26, 43, 0.96) 0 42%,
      rgba(47, 55, 73, 0.82) 58%,
      transparent 74%
    ),
    radial-gradient(
      ellipse at center,
      rgba(29, 36, 54, 0.96) 0 43%,
      rgba(64, 73, 91, 0.78) 59%,
      transparent 75%
    ),
    radial-gradient(
      ellipse at center,
      rgba(20, 28, 46, 0.92) 0 42%,
      rgba(55, 65, 83, 0.74) 58%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      rgba(15, 22, 38, 0.72),
      rgba(48, 58, 77, 0.38) 62%,
      transparent 100%
    ) !important;
  background-position:
    72% 1%,
    73.5% 25%,
    71.5% 52%,
    77% 34%,
    67.5% 43%,
    73% 13%,
    -10% -8%,
    47% -12%,
    108% -6%,
    center top !important;
  background-repeat: no-repeat !important;
  background-size:
    22px 62px,
    24px 56px,
    20px 50px,
    15px 34px,
    14px 30px,
    21% 80%,
    48% 98%,
    54% 104%,
    48% 96%,
    100% 100% !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  pointer-events: none !important;
  mask-image: linear-gradient(180deg, #000 0 70%, rgba(0, 0, 0, 0.78) 86%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0 70%, rgba(0, 0, 0, 0.78) 86%, transparent 100%) !important;
}

body.customizer-sticky-preview-active[data-step='tree']
  .preview-sky.weather-storm::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(
      104deg,
      transparent 0 48%,
      rgba(225, 241, 251, 0.13) 49% 50%,
      transparent 51% 100%
    ),
    linear-gradient(
      112deg,
      transparent 0 48%,
      rgba(188, 218, 238, 0.22) 49% 50.5%,
      transparent 51.5% 100%
    ),
    linear-gradient(
      120deg,
      transparent 0 48%,
      rgba(157, 199, 226, 0.27) 49% 51%,
      transparent 52% 100%
    ),
    linear-gradient(
      180deg,
      rgba(22, 34, 55, 0.08),
      rgba(48, 74, 83, 0.04) 58%,
      rgba(20, 52, 46, 0.1)
    ) !important;
  background-position:
    0 0,
    37px -18px,
    91px -34px,
    center !important;
  background-repeat: repeat, repeat, repeat, no-repeat !important;
  background-size:
    62px 58px,
    124px 148px,
    228px 268px,
    cover !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 0.62 !important;
  pointer-events: none !important;
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.44),
    rgba(0, 0, 0, 0.7) 48%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.44),
    rgba(0, 0, 0, 0.7) 48%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
}

body.customizer-sticky-preview-active[data-step='house']
  .preview-sky.weather-storm::before,
body.customizer-sticky-preview-active[data-step='house']
  .preview-sky.weather-storm::after,
body.customizer-sticky-preview-active[data-step='face']
  .preview-sky.weather-storm::before,
body.customizer-sticky-preview-active[data-step='face']
  .preview-sky.weather-storm::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  filter: none !important;
  pointer-events: none !important;
}

.reading-nav-button__symbol-frame {
  position: relative;
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  pointer-events: none;
}

.reading-nav-button__symbol-frame .reading-nav-button__symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 72px;
  max-width: none;
  height: auto;
  object-fit: contain;
  opacity: 0.88;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.reading-nav-button:disabled .reading-nav-button__symbol,
.reading-nav-button[aria-disabled='true'] .reading-nav-button__symbol {
  opacity: 0.72;
  filter: grayscale(0.55) saturate(0.45);
}

@media (max-width: 719px) {
  .reading-nav-button__symbol-frame {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
  }

  .reading-nav-button__symbol-frame .reading-nav-button__symbol {
    width: 65px;
  }
}

/* Tree customizer: dedicated fluffy-cloud thumbnail and preview assets. */
.weather-card
  .option-visual
  .weather-sample.weather-fluffy-cloud.has-weather-thumbnail {
  display: grid;
  place-items: center;
  background-color: transparent !important;
  background-image: none !important;
  filter: none !important;
}

.weather-card
  .option-visual
  .weather-sample.weather-fluffy-cloud.has-weather-thumbnail::before,
.weather-card
  .option-visual
  .weather-sample.weather-fluffy-cloud.has-weather-thumbnail::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

.weather-card .weather-sample-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  opacity: 1;
  transform: none;
  user-select: none;
  -webkit-user-drag: none;
}

body.customizer-sticky-preview-active[data-step='tree']
  .preview-sky.has-tree-weather-preview-image.weather-fluffy-cloud::before,
body.customizer-sticky-preview-active[data-step='tree']
  .preview-sky.has-tree-weather-preview-image.weather-fluffy-cloud::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 0 !important;
}

body.customizer-sticky-preview-active[data-step='tree']
  .tree-weather-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  transform: none;
}

@media (orientation: portrait) and (max-width: 719px) {
  body.customizer-sticky-preview-active[data-step='tree']
    .tree-weather-preview-image {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Mind-garden comprehensive reading: pages 1-5 only. */
.mind-garden-reading-view {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.mind-garden-reading {
  --mind-reading-accent: #8ca57d;
  --mind-reading-accent-deep: #556c4e;
  --mind-reading-accent-soft: rgba(213, 229, 200, 0.7);
  --mind-reading-paper: rgba(255, 253, 246, 0.96);
  --mind-reading-card: rgba(255, 255, 255, 0.84);
  --mind-reading-line: rgba(113, 91, 60, 0.14);
  --mind-reading-shadow: rgba(79, 67, 45, 0.1);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--text-color);
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 229, 188, 0.46),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 14%,
      rgba(209, 229, 214, 0.5),
      transparent 30%
    ),
    linear-gradient(180deg, #fbf7ee 0%, #f3efe5 50%, #edf2e9 100%);
}

.mind-garden-reading--tree {
  --mind-reading-accent: #85a46f;
  --mind-reading-accent-deep: #496644;
  --mind-reading-accent-soft: rgba(210, 232, 192, 0.74);
}

.mind-garden-reading--house {
  --mind-reading-accent: #c49b6e;
  --mind-reading-accent-deep: #795b3f;
  --mind-reading-accent-soft: rgba(241, 220, 191, 0.76);
}

.mind-garden-reading--avatar {
  --mind-reading-accent: #a58eb5;
  --mind-reading-accent-deep: #6a5578;
  --mind-reading-accent-soft: rgba(228, 214, 236, 0.76);
}

.mind-garden-reading--integration {
  --mind-reading-accent: #b79a52;
  --mind-reading-accent-deep: #735f2e;
  --mind-reading-accent-soft: rgba(241, 225, 174, 0.76);
}

.mind-garden-reading__header,
.mind-garden-reading__actions {
  width: min(100%, 1080px);
  margin-inline: auto;
}

.mind-garden-reading__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 13px 20px 10px;
  border-bottom: 1px solid rgba(119, 96, 64, 0.09);
  background: rgba(255, 251, 243, 0.76);
  box-shadow: 0 8px 22px rgba(92, 74, 48, 0.04);
  backdrop-filter: blur(12px);
}

.mind-garden-reading__heading {
  min-width: 0;
}

.mind-garden-reading__eyebrow,
.mind-garden-reading__label {
  margin: 0;
  color: var(--mind-reading-accent-deep);
  font-size: 0.79rem;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: 0.035em;
}

.mind-garden-reading__title {
  margin: 3px 0 0;
  color: var(--text-color);
  font-size: clamp(1.32rem, 2.7vw, 1.94rem);
  font-weight: 950;
  line-height: 1.17;
  word-break: keep-all;
}

.mind-garden-reading__subtitle {
  margin: 5px 0 0;
  color: var(--muted-color);
  font-size: clamp(0.84rem, 1.8vw, 0.98rem);
  font-weight: 720;
  line-height: 1.42;
  word-break: keep-all;
}

.mind-garden-reading__tts {
  position: relative;
  justify-self: end;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  background: linear-gradient(
    135deg,
    rgba(255, 244, 190, 0.96),
    rgba(236, 226, 246, 0.94) 52%,
    rgba(208, 235, 219, 0.96)
  );
  box-shadow:
    0 10px 22px rgba(116, 88, 62, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.78);
}

.mind-garden-reading__tts span {
  width: 30px;
  height: 30px;
}

.mind-garden-reading__viewport {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.mind-garden-reading__sheet {
  width: min(calc(100% - 32px), 960px);
  min-width: 0;
  margin: 0 auto;
  padding: 18px 0 26px;
}

.mind-garden-reading__hero,
.mind-garden-reading__card,
.mind-garden-reading__note,
.mind-garden-reading__continuation {
  border: 1px solid var(--mind-reading-line);
  background: var(--mind-reading-card);
  box-shadow:
    0 15px 36px var(--mind-reading-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.mind-garden-reading__hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 88% 10%,
      var(--mind-reading-accent-soft),
      transparent 34%
    ),
    linear-gradient(145deg, rgba(255, 254, 249, 0.98), var(--mind-reading-paper));
}

.mind-garden-reading__hero-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 17px;
  color: var(--mind-reading-accent-deep);
  background: var(--mind-reading-accent-soft);
  box-shadow:
    0 10px 22px rgba(87, 72, 51, 0.09),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
  font-size: 1.55rem;
  font-weight: 950;
}

.mind-garden-reading__hero-copy {
  min-width: 0;
}

.mind-garden-reading__lead {
  margin: 7px 0 0;
  color: var(--text-color);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 850;
  line-height: 1.62;
  word-break: keep-all;
}

.mind-garden-reading__keywords {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.mind-garden-reading__keyword {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  color: var(--mind-reading-accent-deep);
  background: var(--mind-reading-accent-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  font-size: 0.79rem;
  font-weight: 900;
  line-height: 1.2;
}

.mind-garden-reading__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.mind-garden-reading__card {
  min-width: 0;
  padding: 18px;
  border-radius: 21px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(250, 247, 239, 0.9));
}

.mind-garden-reading__card--wide {
  grid-column: 1 / -1;
}

.mind-garden-reading__card-title,
.mind-garden-reading__continuation h4 {
  margin: 5px 0 8px;
  color: var(--text-color);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 950;
  line-height: 1.3;
  word-break: keep-all;
}

.mind-garden-reading__body,
.mind-garden-reading__continuation p {
  margin: 0;
  color: var(--muted-color);
  font-size: clamp(0.9rem, 1.7vw, 1rem);
  font-weight: 700;
  line-height: 1.68;
  word-break: keep-all;
}

.mind-garden-reading__narration {
  border-radius: 12px;
  outline: 0 solid transparent;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    outline-color 180ms ease;
}

.mind-garden-reading__narration.is-narrating {
  outline: 3px solid rgba(220, 181, 72, 0.3);
  background: rgba(255, 247, 202, 0.68);
  box-shadow: 0 0 0 7px rgba(255, 241, 167, 0.16);
}

.mind-garden-reading__note {
  margin: 14px 0 0;
  padding: 13px 16px;
  border-radius: 17px;
  color: rgba(84, 72, 57, 0.76);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.52;
  text-align: center;
  word-break: keep-all;
}

.mind-garden-reading__continuation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: clamp(17px, 3vw, 23px);
  border-color: rgba(171, 139, 59, 0.2);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(255, 240, 180, 0.68),
      transparent 34%
    ),
    linear-gradient(145deg, rgba(255, 253, 241, 0.97), rgba(230, 241, 218, 0.94));
}

.mind-garden-reading__continuation h4 {
  font-size: clamp(1.05rem, 2.2vw, 1.24rem);
}

.mind-garden-reading__continue {
  min-width: 150px;
  min-height: 46px;
  border-radius: 999px;
}

.mind-garden-reading__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 62px;
  padding: 9px 20px max(11px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(119, 96, 64, 0.09);
  background: rgba(255, 250, 242, 0.94);
  box-shadow: 0 -10px 26px rgba(76, 62, 43, 0.07);
  backdrop-filter: blur(12px);
}

.mind-garden-reading__action {
  min-width: 0;
  min-height: 44px;
}

body[data-theme='dark'] .mind-garden-reading {
  --mind-reading-paper: rgba(31, 47, 43, 0.96);
  --mind-reading-card: rgba(37, 54, 49, 0.92);
  --mind-reading-line: rgba(181, 217, 196, 0.15);
  --mind-reading-shadow: rgba(3, 12, 10, 0.2);
  background:
    radial-gradient(circle at 12% 8%, rgba(119, 91, 58, 0.22), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(78, 116, 94, 0.25), transparent 30%),
    linear-gradient(180deg, #223733, #1b2d2a);
}

body[data-theme='dark'] .mind-garden-reading__header,
body[data-theme='dark'] .mind-garden-reading__actions {
  background: rgba(25, 41, 38, 0.9);
}

body[data-theme='dark'] .mind-garden-reading__hero,
body[data-theme='dark'] .mind-garden-reading__card,
body[data-theme='dark'] .mind-garden-reading__note,
body[data-theme='dark'] .mind-garden-reading__continuation {
  color: var(--text-color);
  background: var(--mind-reading-card);
}

body[data-theme='dark'] .mind-garden-reading__note {
  color: var(--muted-color);
}

@media (max-width: 719px) {
  .mind-garden-reading__header {
    gap: 8px;
    padding: 9px 11px 7px;
  }

  .mind-garden-reading__eyebrow {
    font-size: 0.7rem;
  }

  .mind-garden-reading__title {
    font-size: clamp(1.06rem, 5vw, 1.3rem);
  }

  .mind-garden-reading__subtitle {
    margin-top: 3px;
    font-size: 0.78rem;
    line-height: 1.3;
  }

  .mind-garden-reading__tts {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 5px;
  }

  .mind-garden-reading__tts span {
    width: 30px;
    height: 30px;
  }

  .mind-garden-reading__tts strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mind-garden-reading__sheet {
    width: 100%;
    padding: 9px 11px 17px;
  }

  .mind-garden-reading__hero {
    gap: 11px;
    padding: 15px;
    border-radius: 20px;
  }

  .mind-garden-reading__hero-mark {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 1.26rem;
  }

  .mind-garden-reading__lead {
    margin-top: 5px;
    font-size: 0.98rem;
    line-height: 1.54;
  }

  .mind-garden-reading__keywords {
    gap: 6px;
  }

  .mind-garden-reading__keyword {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 0.72rem;
  }

  .mind-garden-reading__grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .mind-garden-reading__card,
  .mind-garden-reading__note {
    padding: 14px;
    border-radius: 17px;
  }

  .mind-garden-reading__card--wide {
    grid-column: auto;
  }

  .mind-garden-reading__card-title {
    margin-top: 4px;
    font-size: 0.98rem;
  }

  .mind-garden-reading__body {
    font-size: 0.87rem;
    line-height: 1.6;
  }

  .mind-garden-reading__note {
    margin-top: 10px;
    font-size: 0.76rem;
    line-height: 1.42;
  }

  .mind-garden-reading__continuation {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
    padding: 15px;
    border-radius: 19px;
  }

  .mind-garden-reading__continuation h4 {
    font-size: 1rem;
  }

  .mind-garden-reading__continuation p {
    font-size: 0.84rem;
    line-height: 1.52;
  }

  .mind-garden-reading__continue {
    width: 100%;
    min-width: 0;
  }

  .mind-garden-reading__actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
  }

}

@media (min-width: 720px) {
  .mind-garden-reading__hero {
    grid-template-columns: auto minmax(0, 1fr) minmax(210px, 0.5fr);
    align-items: center;
  }

  .mind-garden-reading__keywords {
    grid-column: auto;
    justify-content: flex-end;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .mind-garden-reading__header {
    padding-block: 6px;
  }

  .mind-garden-reading__subtitle {
    display: none;
  }

  .mind-garden-reading__sheet {
    padding-block: 9px 14px;
  }

  .mind-garden-reading__hero {
    padding: 13px 16px;
    border-radius: 19px;
  }

  .mind-garden-reading__grid {
    gap: 10px;
    margin-top: 10px;
  }

  .mind-garden-reading__card {
    padding: 13px 15px;
  }

  .mind-garden-reading__actions {
    min-height: 54px;
    padding-block: 6px max(7px, env(safe-area-inset-bottom));
  }
}

/* Customizer interpretation media: one primary video with full-text dialogue. */
body.instant-reading-mode .picker-panel {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

body.instant-reading-mode .instant-reading-view,
body.instant-reading-mode .instant-reading-page {
  height: auto;
  min-height: 100%;
}

.instant-reading-page {
  grid-template-rows: auto auto auto;
  align-content: start;
}

.instant-reading-stage {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.customizer-instant-reading-media-host {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  height: auto;
  aspect-ratio: var(--customizer-instant-video-ratio, 16 / 9);
  overflow: hidden;
  background: #17201d;
}

.customizer-instant-reading-video {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--customizer-instant-video-ratio, 16 / 9);
  border: 0;
  background: #17201d;
  object-fit: contain;
  object-position: center;
}

.instant-reading-stage .instant-reading-bubbles {
  top: clamp(12px, 2.4vh, 24px);
  bottom: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(10px, 2vw, 22px);
  max-height: none;
  padding: 2px 4px;
  overflow: visible;
  overscroll-behavior: auto;
  pointer-events: none;
  scrollbar-width: auto;
  touch-action: auto;
}

.instant-reading-stage .instant-bubble-group {
  align-self: start;
  width: min(100%, 520px);
  max-width: 100%;
  opacity: 0.96;
  visibility: visible;
  transform: none;
}

.instant-reading-stage .instant-bubble-group.forest-bubble-left {
  grid-column: 1;
  justify-self: start;
}

.instant-reading-stage .instant-bubble-group.forest-bubble-right {
  grid-column: 2;
  justify-self: end;
}

.instant-bubble-lines {
  display: grid;
  gap: 6px;
}

.instant-reading-stage .instant-bubble-line {
  margin: 0;
  padding: 2px 3px;
  border-radius: 8px;
  overflow: visible;
  font-size: clamp(0.84rem, 1.45vw, 0.98rem);
  line-height: 1.42;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  transition:
    background 160ms ease,
    outline-color 160ms ease;
}

.instant-reading-stage .instant-bubble-line.is-narrating {
  outline: 3px solid rgba(255, 239, 155, 0.58);
  outline-offset: 1px;
  background: rgba(255, 248, 204, 0.55);
}

.instant-reading-stage
  .instant-bubble-group:has(.instant-bubble-line.is-narrating) {
  opacity: 1;
  transform: translateY(-1px) scale(1.005);
}

.mind-garden-total-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.mind-garden-total-background img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 719px) and (orientation: portrait) {
  body.instant-reading-mode .picker-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.instant-reading-mode .instant-reading-view,
  body.instant-reading-mode .instant-reading-page {
    height: auto;
    min-height: 100%;
  }

  .instant-reading-page {
    grid-template-rows: auto auto auto;
    align-content: start;
  }

  .instant-reading-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    min-height: 0;
    overflow: visible;
    background: #eef2ea;
  }

  .customizer-instant-reading-media-host {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--customizer-instant-video-ratio, 9 / 16);
  }

  .instant-reading-stage .instant-reading-bubbles {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    width: 100%;
    max-height: none;
    padding: 2px 12px 12px;
    overflow: visible;
  }

  .instant-reading-stage .instant-bubble-group,
  .instant-reading-stage .instant-bubble-group.forest-bubble-left,
  .instant-reading-stage .instant-bubble-group.forest-bubble-right {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  .instant-reading-stage .instant-bubble-line {
    font-size: 0.9rem;
    line-height: 1.48;
  }

}

/* Live narration: one transient sentence over the continuously looping video. */
.reading-live-bubble-host,
.instant-reading-stage .reading-live-bubble-host {
  position: absolute;
  inset: clamp(10px, 2.2vw, 24px);
  z-index: 10;
  display: block;
  width: auto;
  max-height: none;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

.reading-live-bubble,
.instant-reading-stage .reading-live-bubble {
  position: relative;
  display: block;
  width: min(48%, 520px);
  max-width: 520px;
  margin: 0;
  padding: clamp(12px, 1.8vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: clamp(18px, 2vw, 28px);
  opacity: 0;
  visibility: hidden;
  overflow: visible;
  color: #29352e;
  background: rgba(247, 255, 225, 0.92);
  box-shadow: 0 16px 34px rgba(24, 37, 31, 0.18);
  transform: translateY(8px);
  backdrop-filter: blur(8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 180ms;
}

.reading-live-bubble[hidden] {
  display: none !important;
}

.reading-live-bubble.is-narrating {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s;
}

.reading-live-bubble--left,
.reading-live-bubble--sun {
  margin-right: auto;
  background: linear-gradient(
    145deg,
    rgba(248, 255, 220, 0.94),
    rgba(205, 240, 159, 0.92)
  );
}

.reading-live-bubble--right,
.reading-live-bubble--moon {
  margin-left: auto;
  color: #302843;
  background: linear-gradient(
    145deg,
    rgba(239, 233, 255, 0.94),
    rgba(207, 192, 239, 0.92)
  );
}

.reading-live-bubble--narrator,
.reading-live-bubble--both,
.reading-live-bubble-host--combined .reading-live-bubble {
  width: min(48%, 560px);
  margin-right: 0;
  margin-left: auto;
  background: rgba(255, 252, 235, 0.94);
}

.reading-live-bubble strong {
  display: block;
  margin: 0 0 5px;
  font-size: clamp(0.72rem, 1.2vw, 0.86rem);
  line-height: 1.2;
}

.reading-live-bubble p {
  margin: 0;
  overflow: visible;
  font-size: clamp(0.9rem, 1.55vw, 1.08rem);
  font-weight: 760;
  line-height: 1.45;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.customizer-instant-video-error {
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  color: #72463c;
  background: rgba(255, 241, 232, 0.95);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.customizer-instant-video-error[hidden] {
  display: none;
}

body[data-theme='dark'] .reading-live-bubble {
  color: #f0eadf;
  background: rgba(34, 51, 47, 0.94);
  border-color: rgba(219, 234, 224, 0.22);
}

@media (max-width: 719px) and (orientation: portrait) {
  .reading-live-bubble-host,
  .instant-reading-stage .reading-live-bubble-host {
    position: absolute;
    inset: 10px;
    z-index: 10;
    display: block;
    width: auto;
    padding: 0;
  }

  .reading-live-bubble,
  .instant-reading-stage .reading-live-bubble,
  .reading-live-bubble-host--combined .reading-live-bubble {
    width: min(88%, 430px);
    max-width: 88%;
    padding: 11px 13px;
    border-radius: 18px;
  }

  .reading-live-bubble--left,
  .reading-live-bubble--sun {
    margin-right: auto;
    margin-left: 0;
  }

  .reading-live-bubble--right,
  .reading-live-bubble--moon,
  .reading-live-bubble-host--combined .reading-live-bubble {
    margin-right: 0;
    margin-left: auto;
  }

  .reading-live-bubble p {
    font-size: clamp(0.82rem, 3.8vw, 0.96rem);
    line-height: 1.42;
  }

}

/* Final shell sizing: keep the shared limits after all legacy report rules. */
.mind-garden-combined-video__viewport {
  width: min(100%, var(--sharalong-media-max-width));
  max-width: var(--sharalong-media-max-width);
}

.mind-garden-reading__sheet {
  width: min(
    calc(100% - (var(--sharalong-page-inline-padding) * 2)),
    var(--sharalong-reading-max-width)
  );
}

@media (min-width: 720px) and (min-height: 601px) and (max-height: 820px) {
  .instant-reading-stage,
  .mind-garden-combined-video__viewport {
    width: min(
      100%,
      var(--sharalong-media-max-width),
      calc((100svh - 260px) * 16 / 9)
    );
  }
}

/* Continuous narration controls and focused customizer visual refinements. */
:root {
  --sharalong-reading-font:
    "NanumSquareRound", "NanumSquare Round", "Arial Rounded MT Bold",
    "Nunito", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --sharalong-sky-action-start: #c8edff;
  --sharalong-sky-action-end: #a9def7;
  --sharalong-sky-action-text: #254b5f;
  --sharalong-title-glow:
    0 0 7px rgba(133, 205, 242, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.45);
  --fluffy-cloud-preview-offset-y: -10%;
}

body.customizer-sticky-preview-active .editor-app,
body.instant-reading-mode .editor-app,
.report-arrange-page,
.mind-garden-combined-video-page,
.mind-garden-reading {
  font-family: var(--sharalong-reading-font);
  color: #4c4541;
  letter-spacing: 0.008em;
}

body.customizer-sticky-preview-active :is(#panelTitle, .sub-panel-title),
body.instant-reading-mode .instant-reading-top h3,
.report-arrange-page .report-arrange-top h3,
.mind-garden-combined-video-page .mind-garden-combined-video__header h3,
.mind-garden-reading__title {
  color: #443b37;
  font-family: var(--sharalong-reading-font);
  font-weight: 600;
  letter-spacing: 0.016em;
}

body.instant-reading-mode .instant-reading-top h3,
.report-arrange-page .report-arrange-top h3,
.mind-garden-combined-video-page .mind-garden-combined-video__header h3,
.mind-garden-reading__title {
  text-shadow: var(--sharalong-title-glow);
}

body.customizer-sticky-preview-active #panelKicker,
body.instant-reading-mode .flow-kicker,
.report-arrange-page .flow-kicker,
.mind-garden-combined-video-page .flow-kicker,
.mind-garden-reading__eyebrow,
.mind-garden-reading__label {
  color: #69b8e6 !important;
  font-weight: 600 !important;
  letter-spacing: 0.012em;
}

body.customizer-sticky-preview-active
  :is(.option-label, button, .tree-selection-guide),
body.instant-reading-mode
  :is(.instant-reading-page p, .instant-reading-page button),
.report-arrange-page :is(p, button),
.mind-garden-combined-video-page :is(p, button),
.mind-garden-reading :is(p, button) {
  font-family: var(--sharalong-reading-font);
  font-weight: 500;
  letter-spacing: 0.008em;
}

.interpretation-speaker-status {
  display: none !important;
  margin: 0 !important;
}

.narration-progress {
  --narration-progress: 0%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: min(100%, var(--sharalong-media-max-width));
  margin: 0 auto 10px;
  padding: 7px 10px;
  border: 1px solid rgba(116, 184, 218, 0.28);
  border-radius: 999px;
  color: #49606c;
  background: rgba(246, 252, 252, 0.88);
}

.narration-progress__track {
  position: relative;
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(125, 159, 171, 0.18);
}

.narration-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--narration-progress);
  border-radius: inherit;
  background: linear-gradient(90deg, #a9def7, #8bcdec);
  transition: width 220ms ease;
}

.narration-progress__label {
  min-width: 104px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.instant-reading-page {
  grid-template-rows: auto auto auto auto;
}

body.customizer-sticky-preview-active .done-button[hidden] {
  display: none !important;
}

#doneButton[hidden] {
  display: none !important;
}

body.customizer-sticky-preview-active .top-bar {
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
}

body.instant-reading-mode .top-reading-next-button {
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border-color: rgba(116, 184, 218, 0.45);
  background: linear-gradient(
    135deg,
    var(--sharalong-sky-action-start),
    var(--sharalong-sky-action-end)
  );
}

body.instant-reading-mode
  .top-reading-next-button
  .reading-nav-button__symbol-frame {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}

body.instant-reading-mode
  .top-reading-next-button
  .reading-nav-button__symbol {
  width: 108px;
}

body.customizer-sticky-preview-active
  .picker-panel
  > .picker-stage-controls {
  position: static !important;
  z-index: auto;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 0;
  padding: 8px 0 0;
  background: transparent;
}

body.customizer-sticky-preview-active
  .picker-stage-controls
  .tree-required-hint {
  order: -1;
  flex: 1 0 100%;
  margin: 0 0 4px;
  text-align: right;
}

body.customizer-sticky-preview-active .picker-directional-button {
  display: inline-grid;
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 64px;
  min-height: 64px;
  place-items: center;
  padding: 0;
  border-radius: 22px;
}

body.customizer-sticky-preview-active
  .picker-directional-button
  .reading-nav-button__symbol-frame {
  flex-basis: 60px;
  width: 60px;
  height: 60px;
}

body.customizer-sticky-preview-active
  .picker-directional-button
  .reading-nav-button__symbol {
  width: 216px;
}

:is(
    .instant-reading-actions,
    .mind-garden-combined-video__actions,
    .mind-garden-reading__actions
  )
  .reading-nav-button__symbol-frame {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}

:is(
    .instant-reading-actions,
    .mind-garden-combined-video__actions,
    .mind-garden-reading__actions
  )
  .reading-nav-button__symbol {
  width: 108px;
}

:is(
    #instantNextButton,
    #dialogueNextButton,
    #nextStageButton,
    .top-reading-next-button
  ):not(:disabled):not([aria-disabled='true']) {
  border-color: rgba(116, 184, 218, 0.45) !important;
  color: var(--sharalong-sky-action-text) !important;
  background: linear-gradient(
    135deg,
    var(--sharalong-sky-action-start),
    var(--sharalong-sky-action-end)
  ) !important;
  box-shadow: 0 8px 20px rgba(116, 184, 218, 0.2) !important;
}

:is(
    #instantNextButton,
    #dialogueNextButton,
    #nextStageButton,
    .top-reading-next-button
  ):disabled,
:is(
    #instantNextButton,
    #dialogueNextButton,
    #nextStageButton,
    .top-reading-next-button
  )[aria-disabled='true'] {
  border-color: rgba(116, 184, 218, 0.3) !important;
  background: linear-gradient(135deg, #dff4fd, #c7e8f6) !important;
  opacity: 0.48;
}

body.customizer-sticky-preview-active:is(
    [data-step='tree'],
    [data-step='house'],
    [data-step='face']
  )
  .preview-sky.has-tree-weather-preview-image.weather-fluffy-cloud::before,
body.customizer-sticky-preview-active:is(
    [data-step='tree'],
    [data-step='house'],
    [data-step='face']
  )
  .preview-sky.has-tree-weather-preview-image.weather-fluffy-cloud::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

body.customizer-sticky-preview-active:is(
    [data-step='tree'],
    [data-step='house'],
    [data-step='face']
  )
  .tree-weather-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  transform: translateY(var(--fluffy-cloud-preview-offset-y));
}

/* Page 0 backgrounds already contain baked clouds; remove only the old overlay. */
body.report-comic-mode
  .report-arrange-canvas.garden-weather-surface.weather-fluffy-cloud::before,
body.report-comic-mode
  .report-arrange-canvas.garden-weather-surface.weather-fluffy-cloud::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  filter: none !important;
}

.mind-garden-combined-video__stage
  .customizer-instant-reading-media-host,
.mind-garden-combined-video__stage .customizer-instant-reading-video {
  border-color: transparent !important;
  background: transparent !important;
}

body[data-theme='dark'].customizer-sticky-preview-active .top-bar,
body[data-theme='dark'].instant-reading-mode .top-bar,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page) .top-bar,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  .top-bar,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-reading) .top-bar {
  background: #82909a !important;
}

body[data-theme='dark'].customizer-sticky-preview-active #brandTitle,
body[data-theme='dark'].instant-reading-mode #brandTitle,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page) #brandTitle,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  #brandTitle,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-reading) #brandTitle {
  color: #172a28 !important;
}

body[data-theme='dark'].customizer-sticky-preview-active .brand-subtitle,
body[data-theme='dark'].instant-reading-mode .brand-subtitle,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  .brand-subtitle,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  .brand-subtitle,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-reading)
  .brand-subtitle {
  color: #172a28 !important;
}

body[data-theme='dark']
  :is(
    .instant-reading-top h3,
    .report-arrange-top h3,
    .mind-garden-combined-video__header h3,
    .mind-garden-reading__title
  ) {
  color: #f2eadf;
  text-shadow:
    0 0 7px rgba(133, 205, 242, 0.2),
    0 1px 0 rgba(0, 0, 0, 0.24);
}

body[data-theme='dark'] .narration-progress {
  color: #dce8e7;
  border-color: rgba(157, 205, 224, 0.3);
  background: rgba(39, 61, 60, 0.9);
}

body[data-theme='dark']
  :is(
    #instantNextButton,
    #dialogueNextButton,
    #nextStageButton,
    .top-reading-next-button
  ):not(:disabled):not([aria-disabled='true']) {
  color: #203e4b !important;
  background: linear-gradient(135deg, #a8d7e9, #8bc3da) !important;
}

@media (orientation: portrait) and (max-width: 719px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .tree-weather-preview-image {
    left: 50%;
    transform: translate(-50%, var(--fluffy-cloud-preview-offset-y));
  }

  body.instant-reading-mode #doneButton.top-reading-next-button:not([hidden]) {
    display: inline-grid !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.instant-reading-mode
    .top-reading-next-button
    .reading-nav-button__symbol-frame,
  :is(
      .instant-reading-actions,
      .mind-garden-combined-video__actions,
      .mind-garden-reading__actions
    )
    .reading-nav-button__symbol-frame {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
  }

  body.instant-reading-mode
    .top-reading-next-button
    .reading-nav-button__symbol,
  :is(
      .instant-reading-actions,
      .mind-garden-combined-video__actions,
      .mind-garden-reading__actions
    )
    .reading-nav-button__symbol {
    width: 97px;
  }

  body.customizer-sticky-preview-active .picker-directional-button {
    flex-basis: 56px;
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    border-radius: 19px;
  }

  body.customizer-sticky-preview-active
    .picker-directional-button
    .reading-nav-button__symbol-frame {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }

  body.customizer-sticky-preview-active
    .picker-directional-button
    .reading-nav-button__symbol {
    width: 187px;
  }

  .narration-progress {
    gap: 7px;
    margin-bottom: 8px;
    padding: 6px 8px;
  }

  .narration-progress__label {
    min-width: 88px;
    font-size: 0.7rem;
  }
}

@media (max-width: 719px) {
  body.instant-reading-mode #doneButton.top-reading-next-button:not([hidden]) {
    display: inline-grid !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.instant-reading-mode
    .top-reading-next-button
    .reading-nav-button__symbol-frame {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
  }

  body.instant-reading-mode
    .top-reading-next-button
    .reading-nav-button__symbol {
    width: 97px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.instant-reading-mode
    .top-reading-next-button
    .reading-nav-button__symbol-frame {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
  }

  body.instant-reading-mode
    .top-reading-next-button
    .reading-nav-button__symbol {
    width: 97px;
  }
}

/* Interactive reading position, secondary customizer navigation, and responsive guidance. */
.narration-progress__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  accent-color: #8bcdec;
  touch-action: pan-x;
}

.narration-progress__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #8bcdec 0 var(--narration-progress),
    rgba(125, 159, 171, 0.2) var(--narration-progress) 100%
  );
}

.narration-progress__range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(125, 159, 171, 0.2);
}

.narration-progress__range::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: #8bcdec;
}

.narration-progress__range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 3px solid #f7fcfd;
  border-radius: 50%;
  background: #69b8e6;
  box-shadow: 0 4px 10px rgba(51, 103, 127, 0.24);
  -webkit-appearance: none;
}

.narration-progress__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid #f7fcfd;
  border-radius: 50%;
  background: #69b8e6;
  box-shadow: 0 4px 10px rgba(51, 103, 127, 0.24);
}

.narration-progress__range:hover::-webkit-slider-thumb {
  background: #4fa8d8;
}

.narration-progress__range:focus-visible {
  outline: 3px solid rgba(105, 184, 230, 0.52);
  outline-offset: 3px;
}

.preview-secondary-navigation[hidden] {
  display: none !important;
}

body.customizer-sticky-preview-active .preview-secondary-navigation {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--customizer-sticky-line);
  background: var(--customizer-sticky-surface);
}

body.customizer-sticky-preview-active
  .preview-secondary-navigation__button {
  display: inline-flex;
  min-width: 118px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 16px;
  border: 1px solid rgba(153, 133, 105, 0.28);
  border-radius: 999px;
  color: #5f5549;
  background: linear-gradient(145deg, #fffaf0, #eee1cf);
  box-shadow:
    0 7px 16px rgba(87, 70, 48, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
  font: inherit;
  font-weight: 700;
}

body.customizer-sticky-preview-active
  .preview-secondary-navigation__button.reading-nav-button--next:not(:disabled) {
  border-color: rgba(116, 184, 218, 0.45);
  color: var(--sharalong-sky-action-text);
  background: linear-gradient(
    135deg,
    var(--sharalong-sky-action-start),
    var(--sharalong-sky-action-end)
  );
}

body.customizer-sticky-preview-active
  .preview-secondary-navigation__button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

body.customizer-sticky-preview-active
  .preview-secondary-navigation__icon-button {
  min-width: 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 17px;
}

body.customizer-sticky-preview-active
  .preview-secondary-navigation
  .reading-nav-button__symbol-frame {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

body.customizer-sticky-preview-active
  .preview-secondary-navigation
  .reading-nav-button__symbol {
  width: 115px;
}

.tree-selection-guide-message,
.tree-selection-guide-hint {
  display: block;
  min-width: 0;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.tree-selection-guide-hint {
  margin-top: 3px;
  color: #81766b;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
}

.tree-selection-guide-hint[hidden] {
  display: none !important;
}

body.customizer-sticky-preview-active
  .tree-tab-required:not(.tree-tab-locked)
  .part-tab-icon {
  filter: none;
  opacity: 1;
}

body.customizer-sticky-preview-active
  .tree-tab-required.tree-tab-locked
  .part-tab-icon {
  filter: grayscale(0.9) saturate(0.35);
  opacity: 0.46;
}

.garden-weather-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: translateY(var(--fluffy-cloud-preview-offset-y));
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none !important;
  opacity: 1;
}

.report-arrange-canvas > .garden-arrange-item {
  z-index: 3;
}

.report-arrange-top-actions {
  gap: 10px;
}

.report-arrange-top .report-arrange-icon-button {
  width: 53px;
  min-width: 53px;
  height: 53px;
  min-height: 53px;
  padding: 0;
}

.report-arrange-top
  .report-arrange-icon-button
  .reading-nav-button__symbol-frame {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: visible;
}

.report-arrange-top
  .report-arrange-icon-button
  .reading-nav-button__symbol {
  width: 129px;
  max-width: none;
}

@media (min-width: 720px) and (max-height: 760px) {
  body.report-comic-mode .picker-panel:has(.report-arrange-page) {
    overflow: hidden !important;
  }

  .report-arrange-page {
    gap: 5px;
  }

  .report-arrange-top {
    min-height: 50px;
    padding-block: 4px;
  }

  .report-arrange-controls {
    max-height: clamp(150px, 23svh, 186px);
    gap: 5px;
    padding: 6px 10px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(132, 119, 99, 0.58) rgba(214, 204, 190, 0.3);
    scrollbar-width: thin;
  }

  .report-arrange-controls::-webkit-scrollbar {
    width: 6px;
  }

  .report-arrange-controls::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(214, 204, 190, 0.3);
  }

  .report-arrange-controls::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(132, 119, 99, 0.58);
  }

  .report-arrange-controls .arrange-helper {
    font-size: 0.82rem;
    line-height: 1.32;
  }

  .report-arrange-controls .scale-control {
    order: -1;
    font-size: 0.82rem;
  }

  .report-arrange-controls .garden-object-button {
    min-height: 44px;
    padding-block: 5px;
    font-size: 0.84rem;
  }
}

@media (orientation: portrait) and (max-width: 719px) {
  body.customizer-sticky-preview-active .preview-secondary-navigation {
    min-height: 56px;
    padding: 4px 10px;
  }

  body.customizer-sticky-preview-active
    .preview-secondary-navigation__button {
    min-width: 104px;
    min-height: 48px;
    padding-inline: 13px;
  }

  body.customizer-sticky-preview-active
    .preview-secondary-navigation__icon-button {
    min-width: 48px;
    width: 48px;
    height: 48px;
    padding: 0;
  }

  body.customizer-sticky-preview-active
    .preview-secondary-navigation__icon-button
    .reading-nav-button__symbol-frame {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    .house-object {
    bottom: 0;
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    .house-object::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    z-index: 0;
    display: block;
    width: 300px;
    height: 38px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
      ellipse at center,
      rgba(112, 96, 78, 0.24) 0 28%,
      rgba(112, 96, 78, 0.12) 48%,
      transparent 74%
    );
    filter: blur(1.6px);
    pointer-events: none;
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    .house-object
    .house-model {
    position: relative;
    z-index: 1;
  }

  body.customizer-sticky-preview-active[data-step='face'] .preview-sky {
    background-position: center 68% !important;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .preview-scene.focus-face
    .avatar-object {
    bottom: -4px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .preview-scene.focus-face
    .avatar-object
    .avatar-image-avatar::before {
    bottom: -2px;
    width: 160px;
    opacity: 0.7;
  }
}

/* Dark surfaces use the requested gray/viridian swap without filtering media. */
body[data-theme='dark'] {
  --sharalong-dark-swapped-page: #82909a;
  --sharalong-dark-swapped-ink: #172a28;
  --sharalong-dark-swapped-panel: color-mix(in srgb, #82909a 82%, white 18%);
  --sharalong-dark-swapped-panel-soft: color-mix(
    in srgb,
    #82909a 68%,
    white 32%
  );
  --sharalong-dark-swapped-border: color-mix(
    in srgb,
    #172a28 38%,
    transparent
  );
  --sharalong-dark-selected-ink: #1d574e;
}

body[data-theme='dark'].customizer-sticky-preview-active,
body[data-theme='dark'].instant-reading-mode,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page),
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page),
body[data-theme='dark'].report-comic-mode:has(.mind-garden-reading) {
  background: var(--sharalong-dark-swapped-page) !important;
}

body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  :is(.editor-app, .picker-panel),
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  :is(.editor-app, .picker-panel),
body[data-theme='dark'].report-comic-mode:has(.mind-garden-reading)
  :is(.editor-app, .picker-panel) {
  color: var(--sharalong-dark-swapped-ink) !important;
  background: var(--sharalong-dark-swapped-page) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(
    .editor-app,
    .top-bar,
    .part-tabs,
    .picker-panel,
    .picker-stage-controls,
    .preview-secondary-navigation
  ),
body[data-theme='dark'].instant-reading-mode
  :is(.editor-app, .top-bar, .picker-panel, .instant-reading-page, .instant-reading-top, .instant-reading-actions),
body[data-theme='dark']
  .report-arrange-page
  :is(.report-arrange-top, .report-arrange-controls),
body[data-theme='dark']
  .mind-garden-combined-video-page
  :is(.mind-garden-combined-video__header, .mind-garden-combined-video__actions),
body[data-theme='dark'] .mind-garden-reading {
  color: var(--sharalong-dark-swapped-ink) !important;
  background: var(--sharalong-dark-swapped-panel) !important;
  border-color: var(--sharalong-dark-swapped-border) !important;
}

body[data-theme='dark']
  :is(
    .instant-reading-page,
    .report-arrange-page,
    .mind-garden-combined-video-page,
    .mind-garden-reading
  ) {
  color: var(--sharalong-dark-swapped-ink) !important;
  background: var(--sharalong-dark-swapped-page) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(
    .option-card,
    .color-only-card,
    .outfit-mix-style-button,
    .outfit-mix-swatch,
    .tree-selection-guide,
    .preview-secondary-navigation__button,
    .stage-button,
    .part-tab
  ),
body[data-theme='dark'].instant-reading-mode
  :is(.tts-button, .reading-nav-button),
body[data-theme='dark']
  .report-arrange-page
  :is(.tts-button, .garden-object-button, .scale-control),
body[data-theme='dark']
  .mind-garden-combined-video-page
  :is(.tts-button, .reading-nav-button),
body[data-theme='dark'] .narration-progress {
  color: var(--sharalong-dark-swapped-ink) !important;
  border-color: var(--sharalong-dark-swapped-border) !important;
  background: var(--sharalong-dark-swapped-panel-soft) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(#panelTitle, .sub-panel-title, .tree-selection-guide-message, .tree-selection-guide-hint, .option-label),
body[data-theme='dark'].instant-reading-mode .instant-reading-top h3,
body[data-theme='dark'] .report-arrange-page .report-arrange-top h3,
body[data-theme='dark']
  .mind-garden-combined-video-page
  .mind-garden-combined-video__header
  h3,
body[data-theme='dark'] .mind-garden-reading .mind-garden-reading__title {
  color: var(--sharalong-dark-swapped-ink) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(
    .option-card.active,
    .color-only-card.active,
    .outfit-mix-style-button.active,
    .outfit-mix-swatch.active,
    .part-tab.is-current
  ),
body[data-theme='dark'] .report-arrange-page .garden-object-button.active {
  color: var(--sharalong-dark-selected-ink) !important;
  border-color: var(--sharalong-dark-selected-ink) !important;
  background: color-mix(in srgb, #82909a 72%, white 28%) !important;
  outline: 2px solid color-mix(in srgb, #1d574e 55%, transparent);
  outline-offset: -2px;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(button, .part-tab):disabled,
body[data-theme='dark'].customizer-sticky-preview-active
  :is(button, .part-tab)[aria-disabled='true'],
body[data-theme='dark'].instant-reading-mode button:disabled,
body[data-theme='dark'].instant-reading-mode button[aria-disabled='true'],
body[data-theme='dark'] .report-arrange-page button:disabled,
body[data-theme='dark'] .report-arrange-page button[aria-disabled='true'],
body[data-theme='dark'] .mind-garden-combined-video-page button:disabled,
body[data-theme='dark']
  .mind-garden-combined-video-page
  button[aria-disabled='true'] {
  color: color-mix(in srgb, #172a28 62%, #82909a 38%) !important;
  border-color: color-mix(in srgb, #172a28 20%, transparent) !important;
  background: color-mix(in srgb, #82909a 88%, #172a28 12%) !important;
  opacity: 0.54;
}

/* Tree preview toolbar and mobile reading compact bars. */
.customizer-preview-toolbar {
  display: contents;
}

.mobile-compact-only {
  display: none !important;
}

body.customizer-sticky-preview-active[data-step='tree']
  .customizer-preview-toolbar {
  position: sticky;
  top: calc(
    var(--customizer-header-height) + var(--customizer-preview-height)
  );
  z-index: 60;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: var(--customizer-tabs-height);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  padding-inline: 10px;
  border-bottom: 1px solid var(--customizer-sticky-line);
  background: var(--customizer-sticky-surface);
  box-shadow: 0 8px 17px rgba(74, 64, 47, 0.08);
  transition: top 240ms ease;
}

body.customizer-sticky-preview-active[data-step='tree']
  .customizer-preview-toolbar__stages {
  position: static !important;
  top: auto !important;
  order: 1;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: clamp(8px, 1.5vw, 18px);
  width: auto;
  min-width: 0;
  min-height: 100%;
  padding: 0;
  overflow-x: hidden;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.customizer-sticky-preview-active[data-step='tree']
  .customizer-preview-toolbar__navigation {
  position: static;
  order: 2;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 100%;
  padding: 6px 0;
  border: 0;
  background: transparent;
}

body[data-theme='dark'].customizer-sticky-preview-active[data-step='tree']
  .customizer-preview-toolbar {
  border-color: var(--sharalong-dark-swapped-border);
  background: var(--sharalong-dark-swapped-panel);
}

.instant-reading-page,
.mind-garden-combined-video-page {
  grid-template-rows: auto auto auto auto;
}

.instant-reading-page > .narration-progress,
.mind-garden-combined-video-page > .narration-progress {
  width: min(
    calc(100% - 16px),
    var(--sharalong-media-max-width)
  );
  margin: 8px auto 0;
}

@media (max-width: 719px),
  (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  body.customizer-sticky-preview-active[data-step='tree']
    .customizer-preview-toolbar {
    gap: 4px;
    padding-inline: 4px;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .customizer-preview-toolbar__stages {
    gap: 2px;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .customizer-preview-toolbar__stages
    .part-tab {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 15px;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .customizer-preview-toolbar__stages
    .part-tab-icon {
    width: 30px;
    height: 30px;
    font-size: 1.35rem;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .customizer-preview-toolbar__navigation {
    gap: 4px;
    padding: 4px 0;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .customizer-preview-toolbar__navigation
    .preview-secondary-navigation__button {
    min-width: 80px;
    min-height: 44px;
    height: 44px;
    gap: 3px;
    padding: 5px 8px;
    font-size: clamp(0.72rem, 2.8vw, 0.84rem);
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .customizer-preview-toolbar__navigation
    .reading-nav-button__symbol-frame {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .customizer-preview-toolbar__navigation
    .reading-nav-button__symbol {
    width: 101px;
  }

  body.instant-reading-mode .top-bar,
  body.report-comic-mode:has(.report-arrange-page) .top-bar,
  body.report-comic-mode:has(.mind-garden-combined-video-page) .top-bar {
    display: none !important;
  }

  body.instant-reading-mode .editor-app,
  body.report-comic-mode:has(.report-arrange-page) .editor-app,
  body.report-comic-mode:has(.mind-garden-combined-video-page) .editor-app {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body.instant-reading-mode .picker-panel,
  body.report-comic-mode:has(.report-arrange-page) .picker-panel,
  body.report-comic-mode:has(.mind-garden-combined-video-page) .picker-panel {
    height: 100dvh !important;
    min-height: 0 !important;
  }

  body.instant-reading-mode .mobile-compact-home-button,
  body.instant-reading-mode .mobile-compact-next-button,
  body.report-comic-mode:has(.report-arrange-page)
    .mobile-compact-home-button,
  body.report-comic-mode:has(.mind-garden-combined-video-page)
    .mobile-compact-home-button,
  body.report-comic-mode:has(.mind-garden-combined-video-page)
    .mobile-compact-next-button {
    display: inline-grid !important;
  }

  .mobile-compact-reading-bar {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto 44px;
    width: 100%;
    min-width: 0;
    min-height: 56px !important;
    align-items: center;
    gap: 6px !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 6px 8px !important;
    border-bottom: 1px solid rgba(153, 133, 105, 0.2);
    background: rgba(255, 251, 241, 0.97);
    box-shadow: 0 6px 14px rgba(78, 65, 43, 0.08);
  }

  .mobile-compact-reading-bar__title {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
  }

  .mobile-compact-reading-bar__title .flow-kicker,
  .mobile-compact-title--desktop {
    display: none !important;
  }

  .mobile-compact-title--mobile {
    display: inline !important;
  }

  .mobile-compact-reading-bar__title h3 {
    max-width: 100%;
    margin: 0 !important;
    overflow: hidden;
    font-size: clamp(0.78rem, 3.6vw, 1rem) !important;
    font-weight: 650;
    line-height: 1.18;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mobile-compact-home-button,
  .mobile-compact-next-button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    place-items: center;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(153, 133, 105, 0.25);
    border-radius: 999px;
    background: rgba(255, 253, 246, 0.94);
    box-shadow:
      0 6px 14px rgba(78, 65, 43, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .mobile-compact-home-button {
    grid-column: 1;
  }

  .mobile-compact-next-button,
  .mobile-compact-next-button {
    grid-column: 4;
  }

  .mobile-compact-home-button img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  .mobile-compact-next-button .reading-nav-button__symbol-frame {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }

  .mobile-compact-next-button .reading-nav-button__symbol {
    width: 108px;
    max-width: none;
  }

  .instant-reading-tts-actions,
  .mobile-compact-reading-bar--arrange .report-arrange-top-actions {
    display: contents !important;
  }

  .mobile-compact-reading-bar .tts-button {
    grid-column: 3;
    width: auto;
    min-width: 78px;
    max-width: 118px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    white-space: nowrap;
  }

  .mobile-compact-reading-bar .tts-button > span {
    display: none !important;
  }

  .mobile-compact-reading-bar .tts-button strong {
    overflow: hidden;
    font-size: clamp(0.7rem, 3vw, 0.86rem);
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .instant-reading-page,
  .mind-garden-combined-video-page {
    grid-template-rows: auto auto auto auto !important;
    gap: 0 !important;
  }

  .report-arrange-page {
    gap: 0 !important;
  }

  .instant-reading-top,
  .report-arrange-top,
  .mind-garden-combined-video__header {
    max-width: none;
  }

  .instant-reading-stage,
  .mind-garden-combined-video__viewport,
  .report-arrange-stage-wrap {
    margin-top: 0 !important;
  }

  .mind-garden-combined-video__viewport {
    width: 100%;
    max-width: none;
    padding: 0 !important;
  }

  .instant-reading-page > .narration-progress,
  .mind-garden-combined-video-page > .narration-progress {
    width: calc(100% - 16px);
    min-height: 40px;
    margin: 8px auto 0;
    padding: 5px 8px;
  }

  .instant-reading-actions,
  .mind-garden-combined-video__actions {
    margin-top: 8px;
    padding: 6px 8px max(8px, env(safe-area-inset-bottom));
  }

  body[data-theme='dark'] .mobile-compact-reading-bar {
    color: var(--sharalong-dark-swapped-ink);
    border-color: var(--sharalong-dark-swapped-border);
    background: var(--sharalong-dark-swapped-panel);
  }

  body[data-theme='dark']
    :is(
      .mobile-compact-home-button,
      .mobile-compact-next-button
    ) {
    border-color: var(--sharalong-dark-swapped-border) !important;
    background: var(--sharalong-dark-swapped-panel-soft) !important;
  }
}

@media (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  .mobile-compact-reading-bar {
    min-height: 52px !important;
    padding-block: 4px !important;
  }

  .instant-reading-page > .narration-progress,
  .mind-garden-combined-video-page > .narration-progress {
    min-height: 36px;
    margin-top: 6px;
    padding-block: 3px;
  }

  .instant-reading-actions,
  .mind-garden-combined-video__actions {
    margin-top: 6px;
    padding-block: 4px max(5px, env(safe-area-inset-bottom));
  }

  .mobile-compact-reading-bar .tts-button[data-tts-attention='pending'] {
    transform-origin: center;
    animation: mobile-reading-tts-attention 2.2s ease-in-out infinite;
    will-change: transform, filter;
  }
}

@keyframes mobile-reading-tts-attention {
  0%,
  68%,
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(116, 190, 220, 0));
  }

  32% {
    transform: scale(1.035);
    filter: brightness(1.055) saturate(1.04)
      drop-shadow(0 0 8px rgba(116, 190, 220, 0.28));
  }
}

@media (orientation: landscape) and (max-width: 960px) and (max-height: 600px) and (prefers-reduced-motion: reduce) {
  .mobile-compact-reading-bar .tts-button[data-tts-attention='pending'] {
    animation: none;
    filter: brightness(1.035) drop-shadow(0 0 6px rgba(116, 190, 220, 0.22));
  }
}

/* Exact large-weather assets and stable customizer scene coordinates. */
body.customizer-sticky-preview-active {
  --customizer-logical-scene-scale: 1;
  --customizer-light-surface-start: #ffffff;
  --customizer-light-surface-end: #eef1ef;
  --customizer-light-surface-border: rgba(138, 151, 146, 0.2);
  --customizer-light-selected-start: #fbfffd;
  --customizer-light-selected-end: #e7f1ec;
  --customizer-primary-sky-start: #d7f3ff;
  --customizer-primary-sky-end: #9ddcf6;
}

body.customizer-sticky-preview-active[data-step='tree'] {
  --customizer-logical-scene-scale: 0.75;
}

body.customizer-sticky-preview-active[data-step='house'] {
  --customizer-logical-scene-scale: 0.78;
}

body.customizer-sticky-preview-active[data-step='tree']
  .preview-scene:has(.tree-model.tree-leaves-cloud.tree-with-leaves) {
  --customizer-logical-scene-scale: 0.72;
}

body.customizer-sticky-preview-active .preview-scene {
  transform: translateX(-50%) scale(var(--customizer-logical-scene-scale));
  transform-origin: center bottom;
}

body.customizer-sticky-preview-active .tree-weather-preview-image,
.garden-weather-preview-image {
  left: 0 !important;
  transform: none !important;
}

body.customizer-sticky-preview-active
  .tree-weather-preview-image[data-weather-id='fluffy_cloud_weather'],
.garden-weather-preview-image[data-weather-id='fluffy_cloud_weather'] {
  transform: translateY(var(--fluffy-cloud-preview-offset-y)) !important;
}

body.customizer-sticky-preview-active
  .preview-sky.has-tree-weather-preview-image:is(
    .weather-fluffy-cloud,
    .weather-gray-cloud,
    .weather-storm
  )::before,
body.customizer-sticky-preview-active
  .preview-sky.has-tree-weather-preview-image:is(
    .weather-fluffy-cloud,
    .weather-gray-cloud,
    .weather-storm
  )::after,
.report-arrange-canvas.has-garden-weather-preview-image:is(
    .weather-fluffy-cloud,
    .weather-gray-cloud,
    .weather-storm
  )::before,
.report-arrange-canvas.has-garden-weather-preview-image:is(
    .weather-fluffy-cloud,
    .weather-gray-cloud,
    .weather-storm
  )::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 0 !important;
}

body.customizer-sticky-preview-active[data-step='tree']
  .preview-sky.has-tree-weather-preview-image.weather-storm {
  background-color: #cfdde0 !important;
  background-image: var(--weather-landscape-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body.customizer-sticky-preview-active
  .preview-sky.has-tree-weather-preview-image.weather-rainy::before,
.report-arrange-canvas.has-garden-weather-preview-image.weather-rainy::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.customizer-sticky-preview-active
  .preview-sky.has-tree-weather-preview-image.weather-rainy::after,
.report-arrange-canvas.has-garden-weather-preview-image.weather-rainy::after {
  content: '' !important;
  position: absolute !important;
  inset: -3% 0 auto !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: 55% !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-image:
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.36) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      106deg,
      rgba(83, 100, 118, 0.24) 0 1px,
      transparent 1px 18px
    ) !important;
  background-position: center center, 28px 0 !important;
  background-repeat: repeat, repeat !important;
  background-size: 52px 72px, 82px 94px !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 0.98 !important;
  mask-image: linear-gradient(
    180deg,
    #000 0 66%,
    rgba(0, 0, 0, 0.78) 78%,
    transparent 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0 66%,
    rgba(0, 0, 0, 0.78) 78%,
    transparent 100%
  ) !important;
}

/* Light customizer surfaces: neutral gray, with a brighter pastel-sky primary. */
body:not([data-theme='dark']).customizer-sticky-preview-active
  :is(
    .option-card,
    .color-only-card,
    .outfit-mix-card,
    .outfit-mix-style-button,
    .outfit-mix-swatch,
    .tree-selection-guide,
    .part-tab,
    .preview-secondary-navigation__button,
    #prevStageButton
  ) {
  border-color: var(--customizer-light-surface-border) !important;
  background: linear-gradient(
    145deg,
    var(--customizer-light-surface-start),
    var(--customizer-light-surface-end)
  ) !important;
}

body:not([data-theme='dark']).customizer-sticky-preview-active
  :is(
    .option-card.active,
    .color-only-card.active,
    .outfit-mix-style-button.active,
    .outfit-mix-swatch.active,
    .part-tab.is-current
  ) {
  background: linear-gradient(
    145deg,
    var(--customizer-light-selected-start),
    var(--customizer-light-selected-end)
  ) !important;
  box-shadow:
    0 0 0 3px var(--customizer-selection-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 24px rgba(74, 89, 65, 0.11) !important;
}

body:not([data-theme='dark']).customizer-sticky-preview-active
  :is(
    #nextStageButton,
    .done-button,
    .preview-secondary-navigation__button.reading-nav-button--next
  ):not(:disabled):not([aria-disabled='true']) {
  border-color: rgba(116, 184, 218, 0.42) !important;
  color: #234e63 !important;
  background: linear-gradient(
    135deg,
    var(--customizer-primary-sky-start),
    var(--customizer-primary-sky-end)
  ) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(
    .option-card,
    .color-only-card,
    .outfit-mix-card,
    .outfit-mix-style-button,
    .outfit-mix-swatch,
    .tree-selection-guide,
    .part-tab,
    .preview-secondary-navigation__button,
    #prevStageButton
  ) {
  border-color: rgba(23, 42, 40, 0.28) !important;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #82909a 76%, white 24%),
    color-mix(in srgb, #82909a 86%, #2d514b 14%)
  ) !important;
}

/* Page 0 and combined reading keep the live TTS state text visible. */
.report-arrange-top .tts-button,
.mind-garden-combined-video__header .tts-button {
  display: inline-flex;
  width: auto;
  min-width: 124px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  white-space: nowrap;
}

.report-arrange-top .tts-button > span,
.mind-garden-combined-video__header .tts-button > span {
  position: static;
  display: grid !important;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
}

.report-arrange-top .tts-button strong,
.mind-garden-combined-video__header .tts-button strong {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  font-size: 0.9rem;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

/* House and avatar toolbars share one row on desktop and landscape only. */
@media (min-width: 720px), (orientation: landscape) {
  body.customizer-sticky-preview-active:is(
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar {
    position: sticky;
    top: calc(
      var(--customizer-header-height) + var(--customizer-preview-height)
    );
    z-index: 60;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: var(--customizer-tabs-height);
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    padding-inline: 10px;
    border-bottom: 1px solid var(--customizer-sticky-line);
    background: var(--customizer-sticky-surface);
    box-shadow: 0 8px 17px rgba(74, 64, 47, 0.08);
    transition: top 240ms ease;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar__stages {
    position: static !important;
    top: auto !important;
    order: 1;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: clamp(5px, 1vw, 12px);
    width: auto;
    min-width: 0;
    min-height: 100%;
    padding: 0;
    overflow: hidden;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar__navigation {
    position: static;
    order: 2;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 100%;
    padding: 6px 0;
    border: 0;
    background: transparent;
  }

  body[data-theme='dark'].customizer-sticky-preview-active:is(
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar {
    border-color: var(--sharalong-dark-swapped-border);
    background: var(--sharalong-dark-swapped-panel);
  }
}

@media (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  body.customizer-sticky-preview-active:is(
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar {
    gap: 4px;
    padding-inline: 4px;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar__stages {
    gap: 2px;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar__stages
    .part-tab {
    flex: 0 1 44px;
    width: 44px;
    min-width: 40px;
    height: 44px;
    min-height: 44px;
    border-radius: 15px;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar__stages
    .part-tab-icon {
    width: 30px;
    height: 30px;
    font-size: 1.35rem;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar__navigation {
    gap: 4px;
    padding: 4px 0;
  }

  body.customizer-sticky-preview-active[data-step='house']
    .customizer-preview-toolbar__navigation
    .preview-secondary-navigation__button {
    min-width: 80px;
    min-height: 44px;
    height: 44px;
    gap: 3px;
    padding: 5px 8px;
    font-size: clamp(0.72rem, 2.8vw, 0.84rem);
  }
}

@media (max-width: 719px) and (orientation: portrait) {
  body.customizer-sticky-preview-active {
    --customizer-logical-scene-scale: 0.88;
  }

  body.customizer-sticky-preview-active[data-step='tree'] {
    --customizer-logical-scene-scale: 0.63;
  }

  body.customizer-sticky-preview-active[data-step='house'] {
    --customizer-logical-scene-scale: 0.58;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene:has(.tree-model.tree-leaves-cloud.tree-with-leaves) {
    --customizer-logical-scene-scale: 0.6;
  }

  body.customizer-sticky-preview-active .tree-weather-preview-image {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  body.customizer-sticky-preview-active
    .tree-weather-preview-image[data-weather-id='fluffy_cloud_weather'] {
    transform: translate(-50%, var(--fluffy-cloud-preview-offset-y)) !important;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .option-grid.avatar-gender-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .option-card.avatar-gender-card {
    min-height: 208px;
    padding: 7px;
    border-radius: 19px !important;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .avatar-gender-card
    .option-visual {
    height: 154px;
    margin-bottom: 4px;
    border-radius: 15px !important;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .avatar-gender-thumb-image {
    height: min(146px, 96%);
    max-width: 94%;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .avatar-gender-card
    .option-label {
    min-height: 34px;
    margin-top: 4px;
    font-size: 0.78rem;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-card {
    min-height: 0;
    padding: 8px;
    border-radius: 20px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-controls {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 8px;
    align-content: start;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-controls
    > div,
  body.customizer-sticky-preview-active[data-step='face']
    :is(.outfit-mix-style-grid, .outfit-mix-swatch-row) {
    display: contents;
  }

  body.customizer-sticky-preview-active[data-step='face']
    :is(
      .outfit-mix-subtitle,
      .outfit-mix-style-label,
      .outfit-mix-style-description,
      .outfit-mix-swatch-label
    ) {
    display: none !important;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-button {
    min-height: 84px;
    padding: 4px;
    border-radius: 16px;
    gap: 0;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual,
  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-style-sample {
    width: 70px;
    max-width: 100%;
    height: 70px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-swatch {
    min-width: 0;
    min-height: 84px;
    padding: 7px 4px;
    border-radius: 16px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-swatch-dot {
    width: 42px;
    height: 42px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-button:nth-child(1) {
    grid-area: 1 / 1 / auto / span 4;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-button:nth-child(2) {
    grid-area: 1 / 5 / auto / span 4;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-button:nth-child(3) {
    grid-area: 1 / 9 / auto / span 4;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-button:nth-child(4) {
    grid-area: 2 / 1 / auto / span 3;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-button:nth-child(5) {
    grid-area: 2 / 4 / auto / span 3;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-swatch:nth-child(1) {
    grid-area: 2 / 7 / auto / span 3;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-swatch:nth-child(2) {
    grid-area: 2 / 10 / auto / span 3;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-swatch:nth-child(3) {
    grid-area: 3 / 1 / auto / span 4;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-swatch:nth-child(4) {
    grid-area: 3 / 5 / auto / span 4;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-swatch:nth-child(5) {
    grid-area: 3 / 9 / auto / span 4;
  }

  .report-arrange-top .tts-button,
  .mind-garden-combined-video__header .tts-button {
    min-width: 108px;
    max-width: 132px;
    height: 44px;
    min-height: 44px;
    gap: 5px;
    padding: 0 7px;
  }

  .report-arrange-top .tts-button > span,
  .mind-garden-combined-video__header .tts-button > span {
    display: grid !important;
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    font-size: 0.78rem;
  }

  .report-arrange-top .tts-button strong,
  .mind-garden-combined-video__header .tts-button strong {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    font-size: clamp(0.66rem, 2.9vw, 0.8rem);
    white-space: nowrap !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  body.customizer-sticky-preview-active {
    --customizer-logical-scene-scale: 0.62;
  }

  body.customizer-sticky-preview-active[data-step='tree'] {
    --customizer-logical-scene-scale: 0.45;
  }

  body.customizer-sticky-preview-active[data-step='house'] {
    --customizer-logical-scene-scale: 0.47;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene:has(.tree-model.tree-leaves-cloud.tree-with-leaves) {
    --customizer-logical-scene-scale: 0.43;
  }
}

/* Final source-order lock: reading objects and the 3-row outfit chooser. */
.reading-selected-object-overlay--tree {
  --reading-object-x: 50%;
  --reading-object-y: 21%;
  --reading-object-scale: 0.868;
}

.reading-selected-object-overlay--house {
  --reading-object-x: 50%;
  --reading-object-y: 23%;
  --reading-object-scale: 0.65;
}

body.customizer-sticky-preview-active[data-step='face'] .outfit-mix-card {
  --outfit-thumbnail-size: clamp(76px, 14.7vw, 188px);
  --outfit-color-swatch-size: 18px;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-controls
  > div {
  display: block;
  min-width: 0;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-swatch-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

body.customizer-sticky-preview-active[data-step='face']
  :is(.outfit-mix-style-button, .outfit-mix-swatch) {
  grid-area: auto !important;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-button {
  min-width: 0;
  min-height: calc(var(--outfit-thumbnail-size) + 16px);
  padding: 6px;
  gap: 0;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-visual,
body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-visual
  .outfit-style-sample {
  width: min(var(--outfit-thumbnail-size), 100%);
  height: var(--outfit-thumbnail-size);
  max-width: 100%;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-style-visual
  .outfit-asset-thumb-image {
  top: -140.426%;
  width: 287.234%;
  height: 287.234%;
  max-width: none;
  object-fit: contain;
  transform: translateX(-50%);
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-swatch {
  min-width: 0;
  min-height: 44px;
  padding: 5px 3px;
}

body.customizer-sticky-preview-active[data-step='face']
  .outfit-mix-swatch-dot {
  width: var(--outfit-color-swatch-size);
  height: var(--outfit-color-swatch-size);
}

body.customizer-sticky-preview-active[data-step='face']
  :is(
    .outfit-mix-subtitle,
    .outfit-mix-style-label,
    .outfit-mix-style-description,
    .outfit-mix-swatch-label
  ) {
  display: none !important;
}

@media (max-width: 719px) {
  .customizer-instant-reading-media-host[data-media-variant='portrait']
    .reading-selected-object-overlay--tree {
    --reading-object-x: 50%;
    --reading-object-y: 24%;
    --reading-object-scale: 0.7;
  }

  .customizer-instant-reading-media-host[data-media-variant='portrait']
    .reading-selected-object-overlay--house {
    --reading-object-x: 50%;
    --reading-object-y: 28%;
    --reading-object-scale: 0.48;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual,
  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-style-sample {
    height: min(var(--outfit-thumbnail-size), 26vw);
  }

  body.customizer-sticky-preview-active[data-step='face'] .outfit-mix-card {
    --outfit-thumbnail-size: min(26vw, 94px);
    --outfit-color-swatch-size: 21px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .reading-selected-object-overlay--tree {
    --reading-object-x: 50%;
    --reading-object-y: 19%;
    --reading-object-scale: 0.784;
  }

  .reading-selected-object-overlay--house {
    --reading-object-x: 50%;
    --reading-object-y: 21%;
    --reading-object-scale: 0.55;
  }
}

@media (min-width: 720px) and (max-height: 760px) {
  body.report-comic-mode .picker-panel:has(.report-arrange-page) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .report-arrange-top .flow-kicker {
    display: none !important;
  }

  .report-arrange-controls {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Final lock: keep the mobile portrait scene geometry stable while sticky. */
@media (max-width: 719px) and (orientation: portrait) {
  body.customizer-sticky-preview-active {
    --customizer-preview-compact-height: var(
      --customizer-preview-expanded-height
    );
  }
}

/* Reading tree uses the same canonical trunk/canopy context as the preview. */
.reading-selected-object-visual.tree-object.reading-tree-composite {
  opacity: 1;
  transition: none;
}

/* Move the complete house and its shadow by 55% of its rendered height. */
.reading-selected-object-overlay--house {
  --reading-house-depth-offset: -55%;
}

.reading-selected-object-overlay--house .reading-selected-object-visual {
  transform: translateX(-50%) scale(var(--reading-object-scale))
    translateY(var(--reading-house-depth-offset));
}

/* Latest reading/header calibration: preserve scale and move complete wrappers only. */
.reading-selected-object-overlay--avatar .reading-selected-object-visual {
  transform: translateX(-50%) scale(var(--reading-object-scale)) translateY(-8%);
}

@media (min-width: 1024px) and (min-height: 521px) {
  .reading-selected-object-overlay--house {
    --reading-house-depth-offset: -30%;
  }
}

/* Page 0 supplies the canonical tree context inside the positioned garden item. */
.report-arrange-canvas
  .garden-tree
  > .garden-arrange-visual.tree-object.garden-tree-composite {
  inset: 0;
  z-index: auto;
  opacity: 1;
  transform: none;
  transform-origin: center bottom;
  transition: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reading and report headers share one universal, icon-only direction control. */
:is(.reading-header-prev-button, .reading-header-next-button) {
  display: inline-grid;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(126, 151, 140, 0.34);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #e5f2ed);
  box-shadow: 0 7px 16px rgba(80, 105, 96, 0.16);
}

:is(.reading-header-prev-button, .reading-header-next-button)
  .reading-nav-button__symbol-frame {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

:is(.reading-header-prev-button, .reading-header-next-button)
  .reading-nav-button__symbol {
  width: 108px;
  max-width: none;
}

.reading-header-next-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.report-arrange-top-actions,
.mind-garden-combined-video__header {
  align-items: center;
}

body[data-theme='dark']
  :is(.reading-header-prev-button, .reading-header-next-button) {
  color: var(--sharalong-dark-swapped-ink);
  border-color: var(--sharalong-dark-swapped-border);
  background: var(--sharalong-dark-swapped-panel-soft);
}

/* Hair and outfit colors use one component and one responsive size token. */
body.customizer-sticky-preview-active[data-step='face'] {
  --avatar-color-swatch-size: 18px;
}

body.customizer-sticky-preview-active[data-step='face'] .outfit-mix-card {
  --outfit-color-swatch-size: var(--avatar-color-swatch-size);
}

body.customizer-sticky-preview-active[data-step='face']
  .avatar-color-swatch-dot {
  width: var(--avatar-color-swatch-size);
  height: var(--avatar-color-swatch-size);
  border-radius: 999px;
}

body.customizer-sticky-preview-active[data-step='face']
  #hairColorGrid
  .avatar-color-swatch {
  min-width: 0;
  min-height: 44px;
  padding: 5px 3px;
}

body.customizer-sticky-preview-active[data-step='face']
  #hairColorGrid
  .outfit-mix-swatch-label {
  display: none !important;
}

@media (max-width: 719px) {
  body.customizer-sticky-preview-active[data-step='face'] {
    --avatar-color-swatch-size: 21px;
  }

  .mobile-compact-reading-bar--arrange .reading-header-next-button,
  .mind-garden-combined-video__header .reading-header-next-button {
    grid-column: 4;
  }
}

/* Dark customizer theme: viridian shell around the unchanged gray controls. */
body[data-theme='dark'].customizer-sticky-preview-active {
  --customizer-dark-page: #0d302d;
  --customizer-dark-surface: #123c37;
  --customizer-dark-surface-soft: #194740;
  --customizer-dark-ink: #f4f7f5;
  --customizer-dark-text: #f1f5f3;
  --customizer-dark-ink-strong: #f7f9f8;
  --customizer-dark-ink-muted: #dce6e2;
  --customizer-dark-border: rgba(222, 235, 230, 0.16);
  background: var(--customizer-dark-page) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active .editor-app {
  background: var(--customizer-dark-surface) !important;
  color: var(--customizer-dark-text) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(.top-bar, .picker-panel) {
  background: var(--customizer-dark-surface) !important;
  border-color: var(--customizer-dark-border) !important;
  color: var(--customizer-dark-text) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  .customizer-preview-toolbar,
body[data-theme='dark'].customizer-sticky-preview-active
  :is(.part-tabs, .preview-secondary-navigation) {
  background: var(--customizer-dark-surface-soft) !important;
  border-color: var(--customizer-dark-border) !important;
  color: var(--customizer-dark-text) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  .picker-stage-controls {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--customizer-dark-text) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(#panelTitle, .sub-panel-title) {
  color: var(--customizer-dark-ink-strong) !important;
  text-shadow: none !important;
}

body[data-theme='dark'].customizer-sticky-preview-active[data-step='face']
  #panelTitle {
  color: var(--customizer-dark-ink-strong) !important;
}

/* First cover media: keep the completed portrait untouched and use the
   user-supplied flattened cover only for landscape or desktop variants. */
.brand-intro-cover-media {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.brand-intro-cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

@media (orientation: landscape),
  (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .brand-intro-screen {
    padding: 0;
  }

  .brand-intro-panel {
    width: min(100%, calc(100dvh * 1672 / 941));
    min-height: 0;
    aspect-ratio: 1672 / 941;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff8eb;
    box-shadow: none;
  }

  .brand-intro-cover-media {
    display: block;
  }

  .brand-intro-cover-image {
    object-fit: contain;
    object-position: center center;
  }

  .brand-intro-panel::after,
  .brand-intro-panel > :is(
      .brand-intro-kicker,
      .brand-intro-emblem,
      .brand-intro-copy,
      .brand-intro-value
    ) {
    display: none;
  }

  .brand-intro-start {
    position: absolute;
    left: 48.86%;
    top: 60.26%;
    z-index: 2;
    width: 29.49%;
    height: 8.82%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 0;
  }

  .brand-intro-start:hover,
  .brand-intro-start:active {
    color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .brand-intro-start:focus-visible {
    outline: 3px solid rgba(68, 105, 59, 0.88);
    outline-offset: 3px;
  }
}

body[data-theme='dark'].customizer-sticky-preview-active .theme-switch {
  border-color: rgba(120, 135, 130, 0.3);
  background: linear-gradient(145deg, #f5f6f5, #d9dedc);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body[data-theme='dark'].customizer-sticky-preview-active .theme-choice {
  color: var(--customizer-dark-surface);
  background: linear-gradient(145deg, #eef1ef, #d9dedc);
}

body[data-theme='dark'].customizer-sticky-preview-active
  .theme-choice.active {
  color: var(--customizer-dark-surface);
  background: linear-gradient(145deg, #ffffff, #e6e9e7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(18, 60, 55, 0.34);
}

/* Midnight Navy: the final dark shell for the eight garden editing/reading screens. */
:is(
    body[data-theme='dark'].customizer-sticky-preview-active,
    body[data-theme='dark'].instant-reading-mode,
    body[data-theme='dark'].report-comic-mode:has(.report-arrange-page),
    body[data-theme='dark'].report-comic-mode:has(
        .mind-garden-combined-video-page
      )
  ) {
  --sharalong-midnight-page: #08142f;
  --sharalong-midnight-base: #0b1a3b;
  --sharalong-midnight-surface: #10264a;
  --sharalong-midnight-surface-soft: #162f55;
  --sharalong-midnight-ink: #f7f4eb;
  --sharalong-midnight-text: #f3f5f6;
  --sharalong-midnight-muted: #d9dde5;
  --sharalong-midnight-border: rgba(224, 201, 143, 0.3);
  --sharalong-champagne-light: #f3e2b3;
  --sharalong-champagne-mid: #d7b86f;
  --sharalong-champagne-dark: #a9803e;
  --sharalong-champagne-edge: linear-gradient(
    135deg,
    rgba(243, 226, 179, 0.9),
    rgba(215, 184, 111, 0.7),
    rgba(169, 128, 62, 0.58)
  );
  background: var(--sharalong-midnight-page) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active .editor-app,
body[data-theme='dark'].instant-reading-mode
  :is(.editor-app, .picker-panel, .instant-reading-page),
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  :is(.editor-app, .picker-panel, .report-arrange-page),
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  :is(.editor-app, .picker-panel, .mind-garden-combined-video-page) {
  color: var(--sharalong-midnight-text) !important;
  background: var(--sharalong-midnight-base) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(.top-bar, .picker-panel),
body[data-theme='dark'].instant-reading-mode
  :is(.top-bar, .instant-reading-top, .instant-reading-actions),
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  :is(.top-bar, .report-arrange-top, .report-arrange-controls),
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  :is(
    .top-bar,
    .mind-garden-combined-video__header,
    .mind-garden-combined-video__actions
  ),
body[data-theme='dark'].instant-reading-mode .mobile-compact-reading-bar,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  .mobile-compact-reading-bar,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  .mobile-compact-reading-bar {
  color: var(--sharalong-midnight-text) !important;
  border-color: var(--sharalong-midnight-border) !important;
  background: var(--sharalong-midnight-surface) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(.customizer-preview-toolbar, .part-tabs, .preview-secondary-navigation) {
  color: var(--sharalong-midnight-text) !important;
  border-color: var(--sharalong-midnight-border) !important;
  background: var(--sharalong-midnight-surface-soft) !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  .picker-stage-controls {
  color: var(--sharalong-midnight-text) !important;
  border-color: transparent !important;
  background: transparent !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(#panelTitle, .sub-panel-title),
body[data-theme='dark'].instant-reading-mode .instant-reading-top h3,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  .report-arrange-top
  h3,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  .mind-garden-combined-video__header
  h3 {
  color: var(--sharalong-midnight-ink) !important;
  text-shadow: none !important;
}

body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  .report-arrange-controls
  > .arrange-helper,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  .mind-garden-combined-video__hint {
  color: var(--sharalong-midnight-muted) !important;
}

/* A non-sizing champagne edge belongs only to the outer content sheets. */
body[data-theme='dark'].customizer-sticky-preview-active .picker-panel,
body[data-theme='dark'].instant-reading-mode .instant-reading-page,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  .report-arrange-controls,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  .mind-garden-combined-video-page {
  position: relative;
}

body[data-theme='dark'].customizer-sticky-preview-active .picker-panel::before,
body[data-theme='dark'].instant-reading-mode .instant-reading-page::before,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  .report-arrange-controls::before,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  .mind-garden-combined-video-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  padding: 1px;
  border-radius: inherit;
  background: var(--sharalong-champagne-edge);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

body[data-theme='dark'].customizer-sticky-preview-active .picker-panel::after,
body[data-theme='dark'].instant-reading-mode .instant-reading-page::after,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  .report-arrange-controls::after,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  .mind-garden-combined-video-page::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 19;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 12px rgba(215, 184, 111, 0.12),
    0 0 24px rgba(215, 184, 111, 0.07);
}

/* Keep the existing bright-gray theme toggle on every targeted dark screen. */
:is(
    body[data-theme='dark'].customizer-sticky-preview-active,
    body[data-theme='dark'].instant-reading-mode,
    body[data-theme='dark'].report-comic-mode:has(.report-arrange-page),
    body[data-theme='dark'].report-comic-mode:has(
        .mind-garden-combined-video-page
      )
  )
  .theme-switch {
  border-color: rgba(120, 135, 130, 0.3);
  background: linear-gradient(145deg, #f5f6f5, #d9dedc);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

:is(
    body[data-theme='dark'].customizer-sticky-preview-active,
    body[data-theme='dark'].instant-reading-mode,
    body[data-theme='dark'].report-comic-mode:has(.report-arrange-page),
    body[data-theme='dark'].report-comic-mode:has(
        .mind-garden-combined-video-page
      )
  )
  .theme-choice {
  color: var(--sharalong-midnight-base);
  background: linear-gradient(145deg, #eef1ef, #d9dedc);
}

:is(
    body[data-theme='dark'].customizer-sticky-preview-active,
    body[data-theme='dark'].instant-reading-mode,
    body[data-theme='dark'].report-comic-mode:has(.report-arrange-page),
    body[data-theme='dark'].report-comic-mode:has(
        .mind-garden-combined-video-page
      )
  )
  .theme-choice.active {
  color: var(--sharalong-midnight-base);
  background: linear-gradient(145deg, #ffffff, #e6e9e7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(11, 26, 59, 0.34);
}

/* General previous actions share one mint family without changing geometry. */
:root {
  --sharalong-previous-mint-start: #edf9f4;
  --sharalong-previous-mint-end: #cfeadf;
  --sharalong-previous-mint-border: #b5d5c8;
  --sharalong-previous-mint-ink: #355047;
}

body.customizer-sticky-preview-active
  :is(#prevStageButton, #previewSecondaryPrevButton),
body.instant-reading-mode #instantPrevButton,
body.report-comic-mode:has(.report-arrange-page) #gardenBackButton,
body.report-comic-mode:has(.mind-garden-combined-video-page)
  #combinedVideoBackButton {
  color: var(--sharalong-previous-mint-ink) !important;
  border-color: var(--sharalong-previous-mint-border) !important;
  background: linear-gradient(
    135deg,
    var(--sharalong-previous-mint-start),
    var(--sharalong-previous-mint-end)
  ) !important;
  box-shadow: 0 7px 18px rgba(91, 132, 116, 0.14) !important;
}

/* ID-level specificity in the shared gray rule requires these exact winners. */
body.customizer-sticky-preview-active #prevStageButton#prevStageButton,
body.customizer-sticky-preview-active
  #previewSecondaryPrevButton#previewSecondaryPrevButton,
body.instant-reading-mode #instantPrevButton,
body.report-comic-mode:has(.report-arrange-page) #gardenBackButton,
body.report-comic-mode:has(.mind-garden-combined-video-page)
  #combinedVideoBackButton {
  color: var(--sharalong-previous-mint-ink) !important;
  border-color: var(--sharalong-previous-mint-border) !important;
  background-image: linear-gradient(
    135deg,
    #edf9f4,
    #cfeadf
  ) !important;
  background-color: #cfeadf !important;
}

body[data-theme='dark'].customizer-sticky-preview-active
  :is(#prevStageButton, #previewSecondaryPrevButton),
body[data-theme='dark'].instant-reading-mode #instantPrevButton,
body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
  #gardenBackButton,
body[data-theme='dark'].report-comic-mode:has(.mind-garden-combined-video-page)
  #combinedVideoBackButton {
  outline: 1px solid rgba(226, 240, 235, 0.3);
  outline-offset: -2px;
}

/* Reuse the single tree guide beside the exact stage heading. */
.panel-heading.tree-panel-heading-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
  width: 100%;
  min-width: 0;
}

.panel-heading.tree-panel-heading-row > #panelTitle {
  min-width: 0;
  margin: 0;
}

.panel-heading.tree-panel-heading-row > .tree-selection-guide {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}

/* House cards keep only art/swatch/check; accessible names live on the button. */
:is(
    .floor-editor-sections,
    .roof-editor-sections,
    .window-editor-sections,
    .door-editor-sections
  )
  .option-card {
  min-height: 0;
}

:is(
    .floor-editor-sections,
    .roof-editor-sections,
    .window-editor-sections,
    .door-editor-sections
  )
  .option-card
  > .option-visual {
  margin-bottom: 0;
}

/* The desktop hair dot is exactly three times its 18px baseline. */
@media (min-width: 1024px) {
  body.customizer-sticky-preview-active[data-step='face'] #hairColorGrid {
    --avatar-color-swatch-size: 54px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-card {
    --avatar-color-swatch-size: 18px;
    --outfit-color-swatch-size: 18px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #hairColorGrid
    .avatar-color-swatch {
    min-height: 64px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #hairColorGrid
    .avatar-color-swatch-dot {
    width: 54px;
    height: 54px;
  }
}

/* Low desktop house reading: move the complete wrapper down by 0.20H. */
@media (min-width: 1024px) and (max-height: 800px) {
  body.instant-reading-mode
    .customizer-instant-reading-media-host
    .reading-selected-object-overlay--house {
    --reading-house-depth-offset: -10%;
  }
}

@media (max-width: 719px) {
  .panel-heading.tree-panel-heading-row {
    grid-template-columns: clamp(72px, 22vw, 92px) minmax(0, 1fr);
    gap: 8px;
  }

  .panel-heading.tree-panel-heading-row > #panelTitle {
    font-size: clamp(1rem, 4.8vw, 1.25rem);
  }

  .panel-heading.tree-panel-heading-row > .tree-selection-guide {
    gap: 7px;
    min-height: 0;
    padding: 8px;
  }

  .panel-heading.tree-panel-heading-row
    > .tree-selection-guide
    .tree-selection-guide-sprout {
    flex-basis: clamp(32px, 9vw, 40px);
    width: clamp(32px, 9vw, 40px);
    height: clamp(32px, 9vw, 40px);
  }

  .panel-heading.tree-panel-heading-row
    > .tree-selection-guide
    .tree-selection-guide-copy {
    min-width: 0;
    font-size: clamp(0.72rem, 3.1vw, 0.88rem);
    overflow-wrap: anywhere;
  }
}

/* Mobile landscape first cover: image and real CTA share one cover scene. */
@media (orientation: landscape) and (max-width: 1023px) {
  .brand-intro-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .brand-intro-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, calc(100svh * 1672 / 941));
    width: max(100%, calc(100dvh * 1672 / 941));
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1672 / 941;
    transform: translate(-50%, -50%);
  }

  .brand-intro-cover-media,
  .brand-intro-cover-image {
    width: 100%;
    height: 100%;
  }

  .brand-intro-cover-image {
    object-fit: cover;
    object-position: center center;
  }
}

/* Responsive follow-up: keep the established phone portrait header geometry,
   but let its existing center track give the selected logo a real width. */
@media (orientation: portrait) and (max-width: 719px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    #brandLockup {
    width: 100%;
    justify-self: stretch;
  }
}

/* Phone landscape only: use the compact shell as a true side-by-side page 0,
   and return the selected house wrapper to its ground anchor. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  body.instant-reading-mode
    .customizer-instant-reading-media-host[data-media-stage='house']
    .reading-selected-object-overlay--house {
    --reading-house-depth-offset: 0%;
  }

  body.report-comic-mode:has(.report-arrange-page) .report-arrange-page {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px;
  }

  body.report-comic-mode:has(.report-arrange-page) .report-arrange-top {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  body.report-comic-mode:has(.report-arrange-page)
    .report-arrange-stage-wrap {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    margin: 0 !important;
  }

  body.report-comic-mode:has(.report-arrange-page) .report-arrange-canvas {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
  }

  body.report-comic-mode:has(.report-arrange-page) .report-arrange-controls {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body.report-comic-mode:has(.report-arrange-page)
    .report-arrange-footer-navigation {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}

/* House thumbnail artwork alignment only. The card and visual-box geometry stay
   unchanged; each adjustment is limited to the requested device classes. */
@media (orientation: portrait) and (max-width: 719px) {
  body.customizer-sticky-preview-active[data-step='house']
    #floorStyleGrid
    .option-card:first-child
    .option-visual
    .house-model.floor-tiny {
    top: calc(50% + 42.87px) !important;
  }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  body.customizer-sticky-preview-active[data-step='house']
    #floorStyleGrid
    .option-card:first-child
    .option-visual
    .house-model.floor-tiny {
    top: calc(50% + 45.33px) !important;
  }
}

@media (orientation: portrait) and (max-width: 719px),
  (min-width: 1400px) and (min-height: 850px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active[data-step='house']
    #floorStyleGrid
    .option-visual
    .house-model.floor-grand {
    left: 0 !important;
    transform: none !important;
  }
}

/* Tablet portrait keeps the individual reading media inside a bounded 9:16
   stage. Combined reading uses its landscape media contract on tablets. */
@media (orientation: portrait) and (min-width: 720px) and (max-width: 1366px) {
  body.instant-reading-mode .instant-reading-stage {
    width: min(
      100%,
      var(--sharalong-media-max-width),
      calc((100svh - 260px) * 9 / 16)
    );
    max-width: min(
      var(--sharalong-media-max-width),
      calc((100svh - 260px) * 9 / 16)
    );
    margin-inline: auto;
  }
}

/* Large desktop reading uses its available canvas. Low-height PCs and tablets
   are deliberately excluded so their conservative single-column shell wins. */
@media (min-width: 1400px) and (min-height: 850px) and (hover: hover) and (pointer: fine) {
  body.instant-reading-mode,
  body.report-comic-mode:has(.report-arrange-page),
  body.report-comic-mode:has(.mind-garden-combined-video-page) {
    --sharalong-page-max-width: min(1720px, calc(100vw - 64px));
    --sharalong-media-max-width: min(
      1640px,
      calc(100vw - 96px),
      calc((100svh - 220px) * 16 / 9)
    );
    --sharalong-reading-max-width: min(1500px, calc(100vw - 120px));
  }

  body.instant-reading-mode
    .instant-reading-page
    > :is(.instant-reading-top, .instant-reading-actions),
  body.report-comic-mode:has(.mind-garden-combined-video-page)
    :is(
      .mind-garden-combined-video__header,
      .mind-garden-combined-video__actions
    ) {
    width: min(100%, var(--sharalong-page-max-width));
    max-width: var(--sharalong-page-max-width);
  }

  body.instant-reading-mode
    .instant-reading-page
    > :is(.instant-reading-stage, .narration-progress),
  body.report-comic-mode:has(.mind-garden-combined-video-page)
    :is(
      .mind-garden-combined-video__viewport,
      .mind-garden-combined-video-page > .narration-progress
    ) {
    width: min(100%, var(--sharalong-media-max-width));
    max-width: var(--sharalong-media-max-width);
  }
}

/* Reuse the canonical customizer DOM as a fixed preview plus one scroller. */
@media (orientation: landscape) and (max-width: 1023px),
  (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px),
  (min-width: 1400px) and (min-height: 850px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    ) {
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .editor-app {
    display: grid !important;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    grid-template-rows: auto var(--customizer-tabs-height) minmax(0, 1fr);
    width: min(100%, 1920px) !important;
    max-width: 1920px !important;
    height: 100svh;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    max-height: none;
    margin-inline: auto;
    overflow: hidden;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .top-bar {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    top: auto;
    width: 100%;
    min-width: 0;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .preview-stage {
    position: relative;
    grid-column: 1;
    grid-row: 2 / 4;
    top: auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    border-right: 1px solid var(--customizer-sticky-line) !important;
    border-bottom: 0 !important;
    box-shadow: 10px 0 22px var(--customizer-sticky-shadow) !important;
    transition: none;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar {
    position: relative !important;
    grid-column: 2;
    grid-row: 2;
    top: auto !important;
    z-index: 4;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar__stages,
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .customizer-preview-toolbar__navigation {
    position: static !important;
    top: auto !important;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .picker-panel {
    position: relative;
    grid-column: 2;
    grid-row: 3;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .picker-panel
    > .picker-stage-controls {
    display: none !important;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .option-grid:not(.swatch-card):not(.avatar-gender-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.customizer-sticky-preview-active[data-step='face']
    .option-grid.avatar-gender-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
}

@media (orientation: landscape) and (max-width: 1023px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .option-grid:not(.swatch-card):not(.avatar-gender-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  body.customizer-sticky-preview-active[data-step='face']
    .option-grid.avatar-gender-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final targeted responsive adjustments. Mobile house sizing is isolated from
   tablets and desktop, and phone landscape keeps separate customizer/page-0
   column contracts. */
.arrange-helper__compact {
  display: none;
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .editor-app {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  }

  body.report-comic-mode:has(.report-arrange-page) .arrange-helper__full {
    display: none;
  }

  body.report-comic-mode:has(.report-arrange-page) .arrange-helper__compact {
    display: inline;
  }

  body.report-comic-mode:has(.report-arrange-page) .report-arrange-top {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: 44px 44px;
    align-content: center;
  }

  body.report-comic-mode:has(.report-arrange-page)
    .report-arrange-top
    .mobile-compact-home-button {
    grid-column: 1;
    grid-row: 1;
  }

  body.report-comic-mode:has(.report-arrange-page)
    .report-arrange-top
    .mobile-compact-reading-bar__title {
    grid-column: 2;
    grid-row: 1;
  }

  body.report-comic-mode:has(.report-arrange-page)
    .report-arrange-top-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
}

/* Fine-pointer small-PC readings keep one stable 16:9 desktop canvas even
   when browser zoom reduces the CSS viewport below the desktop breakpoint. */
body.small-pc-reading-fit-active.instant-reading-mode
  .instant-reading-page
  > .instant-reading-stage {
  width: min(1040px, calc(100vw - 32px));
  max-width: min(1040px, calc(100vw - 32px));
  margin-inline: auto;
}

body.small-pc-reading-fit-active.instant-reading-mode
  .customizer-instant-reading-media-host[data-media-variant='landscape'] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

body.small-pc-reading-fit-active.instant-reading-mode
  .customizer-instant-reading-media-host[data-media-variant='landscape']
  > .customizer-instant-reading-video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center center;
}

@media (min-height: 560px) {
  body.small-pc-reading-fit-active.instant-reading-mode .editor-app {
    grid-template-rows: 64px minmax(0, 1fr) !important;
  }

  body.small-pc-reading-fit-active.instant-reading-mode .picker-panel {
    height: calc(100dvh - 64px);
    min-height: 0;
    overflow-y: hidden !important;
  }

  body.small-pc-reading-fit-active.instant-reading-mode
    :is(.instant-reading-view, .instant-reading-page) {
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
  }

  body.small-pc-reading-fit-active.instant-reading-mode
    .instant-reading-page {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch;
  }

  body.small-pc-reading-fit-active.instant-reading-mode
    .instant-reading-page
    > .instant-reading-stage {
    place-self: center;
    width: auto;
    height: min(100%, 585px);
    max-width: min(1040px, calc(100vw - 32px));
    max-height: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  body.small-pc-reading-fit-active.instant-reading-mode
    .customizer-instant-reading-media-host[data-media-variant='landscape'] {
    height: 100%;
  }
}

@media (min-height: 560px) and (max-height: 600px) {
  body.small-pc-reading-fit-active.instant-reading-mode
    .reading-selected-object-overlay--tree {
    --reading-object-y: 12%;
  }

  body.small-pc-reading-fit-active.instant-reading-mode
    .reading-selected-object-overlay--avatar {
    --reading-object-y: 9%;
  }
}

@media (orientation: portrait) and (max-width: 719px),
  (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  body.customizer-sticky-preview-active[data-step='house'] #panelTitle {
    max-width: 100%;
    font-size: clamp(1.02rem, 4.2vw, 1.47rem);
    white-space: nowrap;
  }

  body.customizer-sticky-preview-active[data-step='house']
    :is(#houseColorGrid, #roofColorGrid, #windowColorGrid, #doorColorGrid) {
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 4px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    :is(
      #houseColorGrid .house-swatch,
      #roofColorGrid .roof-swatch,
      #windowColorGrid .window-swatch
    ) {
    width: 29px;
    height: 29px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    #houseColorGrid
    .house-swatch {
    border-radius: 6px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    #roofColorGrid
    .roof-swatch {
    border-radius: 7px 7px 3px 3px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    #windowColorGrid
    .window-swatch {
    border-radius: 9px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    #doorColorGrid
    .door-swatch {
    width: 24px;
    height: 31px;
    border-radius: 12px 12px 3.5px 3.5px;
  }
}

/* The individual reading header now owns both canonical directions in every
   viewport; the old top-bar proxy remains hidden during instant reading. */
.instant-reading-tts-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
}

.mind-garden-combined-video__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
}

.mind-garden-combined-video__header .mobile-compact-reading-bar__title {
  min-width: 0;
}

@media (max-width: 719px),
  (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  .mobile-compact-reading-bar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .instant-reading-tts-actions,
  .mobile-compact-reading-bar--arrange .report-arrange-top-actions {
    grid-column: 3;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  .instant-reading-tts-actions .tts-button,
  .mobile-compact-reading-bar--arrange .report-arrange-top-actions .tts-button {
    grid-column: auto;
    min-width: 78px;
  }

  .instant-reading-tts-actions
    :is(.reading-header-prev-button, .reading-header-next-button),
  .mobile-compact-reading-bar--arrange
    .report-arrange-top-actions
    :is(.reading-header-prev-button, .reading-header-next-button) {
    grid-column: auto;
  }

  .mind-garden-combined-video__header {
    grid-template-columns: 44px minmax(0, 1fr) auto auto auto;
  }

  .mind-garden-combined-video__header .tts-button {
    grid-column: 3;
  }

  .mind-garden-combined-video__header .reading-header-prev-button {
    grid-column: 4;
  }

  .mind-garden-combined-video__header .reading-header-next-button {
    grid-column: 5;
  }
}

/* Local responsive corrections: preserve every existing renderer, handler,
   media node and state contract while changing only the requested geometry. */
@media (orientation: portrait) and (max-width: 719px) {
  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch {
    min-height: calc(
      var(--avatar-color-swatch-size) + var(--avatar-color-swatch-size) +
        var(--avatar-color-swatch-size) + 10px
    );
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch-dot {
    width: calc(
      var(--avatar-color-swatch-size) + var(--avatar-color-swatch-size) +
        var(--avatar-color-swatch-size)
    );
    height: calc(
      var(--avatar-color-swatch-size) + var(--avatar-color-swatch-size) +
        var(--avatar-color-swatch-size)
    );
  }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  .editor-app.avatar-person-landscape-v2
    .avatar-landscape-v2-canvas-host {
    overflow: visible;
  }

  .editor-app.avatar-person-landscape-v2 .avatar-landscape-v2-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: auto;
    pointer-events: none;
  }

  .editor-app.avatar-person-landscape-v2 .avatar-landscape-v2-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 8;
    display: none;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(132, 101, 74, 0.22);
    border-radius: 999px;
    background: rgba(255, 250, 241, 0.9);
    color: #6e5646;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }

  .editor-app.avatar-person-landscape-v2
    .avatar-landscape-v2-loading-active
    .avatar-landscape-v2-loading {
    display: inline-flex;
  }

  .editor-app.avatar-person-landscape-v2 .avatar-landscape-v2-badge {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 8;
    display: inline-flex;
    min-height: 14px;
    align-items: center;
    padding: 2px 4px;
    border-radius: 5px;
    background: rgba(23, 42, 40, 0.76);
    color: #fff;
    font-size: 0.42rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch {
    min-height: calc(
      var(--avatar-color-swatch-size) + var(--avatar-color-swatch-size) +
        var(--avatar-color-swatch-size) + 10px
    );
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch-dot {
    width: calc(
      var(--avatar-color-swatch-size) + var(--avatar-color-swatch-size) +
        var(--avatar-color-swatch-size)
    );
    height: calc(
      var(--avatar-color-swatch-size) + var(--avatar-color-swatch-size) +
        var(--avatar-color-swatch-size)
    );
  }

  /* Avatar customizer: the canonical navigation is reparented below the
     option grid, so the toolbar keeps only its five stage tabs. */
  body.customizer-sticky-preview-active[data-step='face'] .editor-app {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .customizer-preview-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(44px, auto);
    gap: 0;
    min-height: 0;
    padding: 4px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .customizer-preview-toolbar__stages {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(4px, 0.8vw, 8px);
    width: 100%;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: stretch;
    overflow: hidden;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .customizer-preview-toolbar__stages
    .part-tab {
    width: 100%;
    min-width: 44px;
    max-width: none;
    height: 44px;
    min-height: 44px;
    margin: 0;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .customizer-preview-toolbar__navigation {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .customizer-preview-toolbar__navigation
    .preview-secondary-navigation__button {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .picker-panel:has(> #optionGrid.tree-required-grid-trunk)
    .panel-heading.tree-panel-heading-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 8px;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .picker-panel:has(> #optionGrid.tree-required-grid-trunk)
    .panel-heading.tree-panel-heading-row
    > #panelTitle {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .picker-panel:has(> #optionGrid.tree-required-grid-trunk)
    .panel-heading.tree-panel-heading-row
    > .tree-selection-guide {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house']
    )
    .customizer-preview-toolbar__navigation
    .preview-secondary-navigation__button {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    padding: 0;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house']
    )
    .customizer-preview-toolbar__navigation
    .preview-secondary-navigation__button
    > span:not(.reading-nav-button__symbol-frame) {
    display: none;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .picker-panel:has(> #optionGrid.tree-required-grid-trunk)
    > .picker-stage-controls,
  body.customizer-sticky-preview-active[data-step='house']
    .picker-panel:has(> #optionGrid.floor-editor-sections)
    > .picker-stage-controls {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .picker-panel:has(> #optionGrid.tree-required-grid-trunk)
    > .picker-stage-controls
    .tree-required-hint {
    display: none !important;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house']
    )
    .picker-panel
    > .picker-stage-controls
    :is(#prevStageButton, #nextStageButton) {
    position: relative;
    display: inline-flex;
    flex: 0 0 72px;
    width: 72px;
    min-width: 72px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 7.2px;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12.096px;
    line-height: 1;
    isolation: isolate;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house']
    )
    .picker-panel
    > .picker-stage-controls
    #prevStageButton#prevStageButton {
    border-color: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house']
    )
    .picker-panel
    > .picker-stage-controls
    :is(#prevStageButton, #nextStageButton)::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    box-sizing: border-box;
    width: 72px;
    height: 39.6px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--sharalong-previous-mint-border);
    border-radius: 17px;
    background: linear-gradient(
      135deg,
      var(--sharalong-previous-mint-start),
      var(--sharalong-previous-mint-end)
    );
    box-shadow: 0 6.3px 16.2px rgba(91, 132, 116, 0.14);
    pointer-events: none;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house']
    )
    .picker-panel
    > .picker-stage-controls
    #nextStageButton::after {
    border-color: rgba(116, 184, 218, 0.42);
    background: linear-gradient(
      135deg,
      var(--customizer-primary-sky-start),
      var(--customizer-primary-sky-end)
    );
    box-shadow: 0 7.2px 18px rgba(116, 184, 218, 0.2);
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house']
    )
    .picker-panel
    > .picker-stage-controls
    #prevStageButton::before {
    content: '이전';
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house']
    )
    .picker-panel
    > .picker-stage-controls
    #nextStageButton::before {
    content: '다음';
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .picker-panel
    > .picker-stage-controls
    .reading-nav-button__symbol-frame {
    flex-basis: 25.2px;
    width: 25.2px;
    height: 25.2px;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .picker-panel
    > .picker-stage-controls
    .reading-nav-button__symbol {
    width: 90.9px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    .picker-panel
    > .picker-stage-controls
    .reading-nav-button__symbol-frame {
    flex-basis: 28.8px;
    width: 28.8px;
    height: 28.8px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    .picker-panel
    > .picker-stage-controls
    .reading-nav-button__symbol {
    width: 103.5px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .preview-scene.focus-face
    > .avatar-object {
    transform: translateX(-50%) scale(0.936);
    transform-origin: bottom center;
  }

  body.report-comic-mode:has(.report-arrange-page) .report-arrange-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  body.report-comic-mode:has(.report-arrange-page)
    .report-arrange-controls
    .scale-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.report-comic-mode:has(.report-arrange-page) #gardenScaleRange {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 28px;
    margin: 0;
    padding-block: 9.5px;
    writing-mode: horizontal-tb;
    direction: ltr;
    background-clip: content-box !important;
  }

  body.report-comic-mode:has(.report-arrange-page) .garden-object-toolbar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (orientation: landscape) and (max-width: 719px) and (max-height: 520px) {
  body.customizer-sticky-preview-active[data-step='tree']
    .picker-panel:has(> #optionGrid.tree-required-grid-trunk)
    .panel-heading.tree-panel-heading-row
    > #panelTitle {
    font-size: clamp(0.5rem, 2.4vw, 0.625rem);
  }
}

@media (orientation: landscape) and (min-width: 720px) and (max-width: 1023px) and (max-height: 520px) {
  body.customizer-sticky-preview-active[data-step='tree']
    .picker-panel:has(> #optionGrid.tree-required-grid-trunk)
    .panel-heading.tree-panel-heading-row
    > #panelTitle {
    font-size: clamp(0.85rem, 3.5vw, 1.225rem);
  }
}

@media (min-width: 1280px) {
  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch {
    min-height: 64px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch-dot {
    width: 54px;
    height: 54px;
  }
}

/* Tablet reading reuses the existing portrait/landscape media resolver; only
   the complete house wrapper's proportional depth offset is neutralized. */
@media (orientation: portrait) and (min-width: 720px) and (max-width: 1366px) {
  body.instant-reading-mode
    .customizer-instant-reading-media-host[data-media-stage='house'][data-media-variant='portrait']
    .reading-selected-object-overlay--house {
    --reading-house-depth-offset: 0%;
  }
}

@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.instant-reading-mode
    .customizer-instant-reading-media-host[data-media-stage='house'][data-media-variant='landscape']
    .reading-selected-object-overlay--house {
    --reading-house-depth-offset: 0%;
  }
}

/* Follow-up responsive calibration: keep the canonical DOM and isolate each
   change to the existing phone, tablet, or large-desktop resolver. */
@media (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .editor-app {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 520px),
  (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active[data-step='tree']
    .panel-heading.tree-panel-heading-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 8px;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .panel-heading.tree-panel-heading-row
    > #panelTitle {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    white-space: nowrap;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .panel-heading.tree-panel-heading-row
    > .tree-selection-guide {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (orientation: landscape) and (max-width: 719px) and (max-height: 520px) {
  body.customizer-sticky-preview-active[data-step='tree']
    .panel-heading.tree-panel-heading-row
    > #panelTitle {
    font-size: clamp(0.5rem, 2.4vw, 0.625rem);
  }
}

@media (orientation: landscape) and (min-width: 720px) and (max-width: 1023px) and (max-height: 520px),
  (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active[data-step='tree']
    .panel-heading.tree-panel-heading-row
    > #panelTitle {
    font-size: clamp(0.85rem, 3.5vw, 1.225rem);
  }
}

@media (orientation: portrait) and (max-width: 719px),
  (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .tree-weather-preview-image[data-weather-id='fluffy_cloud_weather'] {
    --mobile-fluffy-final-y: calc(var(--fluffy-cloud-preview-offset-y) + 20%);
  }
}

@media (orientation: portrait) and (max-width: 719px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .tree-weather-preview-image[data-weather-id='fluffy_cloud_weather'] {
    transform: translate(-50%, var(--mobile-fluffy-final-y)) !important;
  }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .tree-weather-preview-image[data-weather-id='fluffy_cloud_weather'] {
    transform: translateY(var(--mobile-fluffy-final-y)) !important;
  }
}

@media (min-width: 1400px) and (min-height: 850px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .editor-app {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .preview-scene {
    bottom: 0;
    height: 100%;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree
    > .tree-object {
    bottom: calc(44.444444% + 5.333333px);
    transform: translateX(-50%) scale(1.59);
    transform-origin: bottom center;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    )
    > .tree-object {
    bottom: calc(46.296296% + 5.555556px);
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    > .house-object {
    bottom: calc(51.282051% + 6.153846px);
    transform: translateX(-50%) scale(1.512);
    transform-origin: bottom center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .preview-scene.focus-face
    > .avatar-object {
    bottom: calc(30% + 3.6px);
    transform: translateX(-50%) scale(1.08);
    transform-origin: bottom center;
  }

  body.instant-reading-mode
    .customizer-instant-reading-media-host[data-media-stage='avatar'][data-media-variant='landscape']
    .reading-selected-object-overlay--avatar {
    --reading-object-scale: 0.96;
  }

}

/* Tablet-only customizer calibration: reuse one navigation DOM and adjust
   only inner option visuals and complete preview object wrappers. */
@media (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .picker-panel
    > .preview-secondary-navigation {
    position: static !important;
    inset: auto !important;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin-top: 24px;
    padding: 8px 0 max(14px, env(safe-area-inset-bottom));
    justify-content: space-between;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .picker-panel
    > .preview-secondary-navigation
    .preview-secondary-navigation__button {
    min-height: 44px;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house']
    )
    .picker-panel
    > .preview-secondary-navigation
    .preview-secondary-navigation__button
    > span:not(.reading-nav-button__symbol-frame) {
    display: inline !important;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .face-shape-grid
    .option-visual,
  body.customizer-sticky-preview-active[data-step='face']
    .avatar-hair-card
    .option-visual,
  body.customizer-sticky-preview-active[data-step='face']
    .avatar-expression-card
    .expression-image-sample {
    display: grid;
    place-items: center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .face-shape-grid
    .option-visual {
    grid-template-columns: minmax(0, 1fr);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .face-shape-grid
    .face-shape-sample {
    margin: 0;
    place-self: center;
    transform: scale(0.6);
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .avatar-hair-card
    .hair-image-sample {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: auto;
    transform: translate(-50%, -50%);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .avatar-expression-card
    .expression-image-sample {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .avatar-expression-card
    .expression-image-sample[data-avatar-gender='female']
    .expression-thumbnail-image {
    transform: translateY(-3.8px);
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .avatar-expression-card
    .expression-image-sample[data-avatar-gender='male']
    .expression-thumbnail-image {
    transform: translateY(46.5px) scale(2.1);
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .preview-scene {
    bottom: 0;
    height: 100%;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree
    > .tree-object {
    bottom: calc(44.444444% + 5.333333px);
    transform: translateX(-50%) scale(1.59);
    transform-origin: bottom center;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    )
    > .tree-object {
    bottom: calc(46.296296% + 5.555556px);
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    > .house-object {
    bottom: calc(51.282051% + 6.153846px);
    transform: translateX(-50%) scale(1.512);
    transform-origin: bottom center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .preview-scene.focus-face
    > .avatar-object {
    bottom: 60px;
    transform: translateX(-50%) scale(1.08);
    transform-origin: bottom center;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree
    > .tree-object {
    bottom: 80px;
    transform: translateX(-50%) scale(1.59);
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    )
    > .tree-object {
    bottom: 83.333333px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    > .house-object {
    bottom: 76.923077px;
    transform: translateX(-50%) scale(1.512);
  }
}

/* Desktop grounding keeps the established X/scale contracts and moves only
   the complete tree/house wrapper, including its composite shadow. */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree
    > .tree-object {
    bottom: 64px;
    transform: translateX(-50%) scale(1.06);
    transform-origin: bottom center;
  }


  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    )
    > .tree-object {
    bottom: 66.666667px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    > .house-object {
    bottom: 61.538462px;
    transform: translateX(-50%) scale(1.08);
    transform-origin: bottom center;
  }
}

@media (min-width: 1400px) and (min-height: 850px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree
    > .tree-object {
    bottom: 80px;
    transform: translateX(-50%) scale(1.59);
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    )
    > .tree-object {
    bottom: 83.333333px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    > .house-object {
    bottom: 76.923077px;
    transform: translateX(-50%) scale(1.512);
  }
}

/* Requested viewport calibration. Physical-distance requests use fixed px
   tokens; X, scale, dimensions, and internal composition remain untouched. */
@media (min-width: 1280px) and (max-width: 1399px) and (hover: hover) and (pointer: fine),
  (min-width: 1400px) and (max-height: 849px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active {
    --pc-tree-depth-shift: 151.181px;
    --pc-tree-wrapper-shift: 201.574667px;
    --pc-tree-cloud-wrapper-shift: 209.973611px;
    --pc-house-depth-shift: 75.591px;
    --pc-house-wrapper-shift: calc(96.911538px + 113.386px);
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree
    > .tree-object {
    transform: translateX(-50%)
      translateY(calc(0px - var(--pc-tree-wrapper-shift))) scale(1.06);
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    )
    > .tree-object {
    transform: translateX(-50%)
      translateY(calc(0px - var(--pc-tree-cloud-wrapper-shift))) scale(1.06);
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    > .house-object {
    transform: translateX(-50%)
      translateY(calc(0px - var(--pc-house-wrapper-shift))) scale(1.08);
  }
}

@media (min-width: 1400px) and (min-height: 850px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active {
    --large-pc-avatar-down-shift: 151.181px;
    --pc-tree-depth-shift: 151.181px;
    --pc-tree-wrapper-shift: 201.574667px;
    --pc-tree-cloud-wrapper-shift: 209.973611px;
    --pc-house-depth-shift: 75.591px;
    --pc-house-wrapper-shift: calc(96.911538px + 113.386px);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .preview-scene.focus-face
    > .avatar-object {
    transform: translateX(-50%) translateY(var(--large-pc-avatar-down-shift))
      scale(1.08);
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree
    > .tree-object {
    transform: translateX(-50%)
      translateY(calc(0px - var(--pc-tree-wrapper-shift))) scale(1.59);
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    )
    > .tree-object {
    transform: translateX(-50%)
      translateY(calc(0px - var(--pc-tree-cloud-wrapper-shift))) scale(1.59);
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    > .house-object {
    transform: translateX(-50%)
      translateY(calc(0px - var(--pc-house-wrapper-shift))) scale(1.512);
  }

}

@media (min-width: 1280px) and (max-width: 1399px) and (hover: hover) and (pointer: fine),
  (min-width: 1400px) and (max-height: 849px) and (hover: hover) and (pointer: fine),
  (min-width: 1400px) and (min-height: 850px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .tree-weather-preview-image[data-weather-id='fluffy_cloud_weather'] {
    --fluffy-cloud-preview-offset-y: calc(-10% + 56.693px);
  }
}

@media (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active {
    --tablet-tree-depth-shift: 37.795px;
    --tablet-tree-wrapper-shift: 50.393333px;
    --tablet-tree-cloud-wrapper-shift: 52.493056px;
    --tablet-house-wrapper-shift: 113.386px;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree
    > .tree-object {
    transform: translateX(-50%)
      translateY(calc(0px - var(--tablet-tree-wrapper-shift))) scale(1.59);
  }

  body.customizer-sticky-preview-active[data-step='tree']
    .preview-scene.focus-tree:has(
      .tree-model.tree-leaves-cloud.tree-with-leaves
    )
    > .tree-object {
    transform: translateX(-50%)
      translateY(calc(0px - var(--tablet-tree-cloud-wrapper-shift))) scale(1.59);
  }

  body.customizer-sticky-preview-active[data-step='house']
    .preview-scene.focus-house
    > .house-object {
    transform: translateX(-50%)
      translateY(calc(0px - var(--tablet-house-wrapper-shift))) scale(1.512);
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .tree-weather-preview-image[data-weather-id='fluffy_cloud_weather'] {
    --fluffy-cloud-preview-offset-y: calc(-10% + 56.693px);
  }

}

/* Follow-up geometry is isolated to desktop/tablet customizers. Existing PC
   house/weather offsets stay untouched; mobile keeps the checkpoint geometry. */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine),
  (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  .floor-style-grid
    .option-card:first-child
    .option-visual
    .house-model.floor-tiny {
    top: calc(50% + 37.795px) !important;
  }
}

@media (min-width: 1280px) and (max-width: 1399px) and (hover: hover) and (pointer: fine),
  (min-width: 1400px) and (max-height: 849px) and (hover: hover) and (pointer: fine),
  (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active[data-step='face']
    .picker-panel
    > .preview-secondary-navigation,
  body.customizer-sticky-preview-active[data-step='face']
    .customizer-preview-toolbar
    > .preview-secondary-navigation {
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .preview-secondary-navigation
    .preview-secondary-navigation__button {
    flex: 0 0 48px;
    width: 48px;
    min-width: 44px;
    height: 48px;
    min-height: 44px;
    padding: 0;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch-dot {
    scale: 2;
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual {
    container-type: inline-size;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample {
    container-type: normal;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-thumb-image {
    width: 373.4042cqw;
    height: 373.4042cqw;
    max-width: none;
    transform: none;
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='male'][data-avatar-outfit-number='01']
    .outfit-asset-thumb-image {
    left: calc(-0.182326cqw - 136.7021cqw);
    top: calc(50% - 253.615878cqw);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='male'][data-avatar-outfit-number='02']
    .outfit-asset-thumb-image {
    left: -136.7021cqw;
    top: calc(50% - 256.715424cqw);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='male'][data-avatar-outfit-number='03']
    .outfit-asset-thumb-image {
    left: calc(-1.823263cqw - 136.7021cqw);
    top: calc(50% - 251.974942cqw);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='male'][data-avatar-outfit-number='04']
    .outfit-asset-thumb-image {
    left: calc(-0.364653cqw - 136.7021cqw);
    top: calc(50% - 252.339557cqw);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='male'][data-avatar-outfit-number='05']
    .outfit-asset-thumb-image {
    left: calc(0.182326cqw - 136.7021cqw);
    top: calc(50% - 249.786989cqw);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='female'][data-avatar-outfit-number='01']
    .outfit-asset-thumb-image {
    left: -136.7021cqw;
    top: calc(50% - 247.781400cqw);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='female'][data-avatar-outfit-number='02']
    .outfit-asset-thumb-image {
    left: calc(-0.182326cqw - 136.7021cqw);
    top: calc(50% - 252.521884cqw);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='female'][data-avatar-outfit-number='03']
    .outfit-asset-thumb-image {
    left: calc(-3.646526cqw - 136.7021cqw);
    top: calc(50% - 244.134875cqw);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='female'][data-avatar-outfit-number='04']
    .outfit-asset-thumb-image {
    left: calc(0.182326cqw - 136.7021cqw);
    top: calc(50% - 246.140464cqw);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .outfit-mix-style-visual
    .outfit-asset-sample[data-avatar-gender='female'][data-avatar-outfit-number='05']
    .outfit-asset-thumb-image {
    left: calc(-0.182326cqw - 136.7021cqw);
    top: calc(50% - 249.969316cqw);
  }
}

@media (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1199px) and (min-height: 768px) {
  body.customizer-sticky-preview-active[data-step='tree']
    #optionGrid.tree-required-grid-weather
    > .preview-secondary-navigation {
    position: static !important;
    inset: auto !important;
    grid-column: 2 / -1;
    grid-row: 3;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: inherit;
  }

  body.customizer-sticky-preview-active[data-step='tree']
    #optionGrid.tree-required-grid-weather
    > .preview-secondary-navigation
    .preview-secondary-navigation__button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 2px;
  }
}

/* Header HOME alignment keeps the canonical button and reserves its original
   grid track so the centered logo and right-side controls do not move. */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine),
  (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .top-bar
    > #resetButton {
    position: fixed;
    z-index: 80;
    top: calc(var(--customizer-header-height) / 2 + 0.8px);
    left: 12px;
    margin: 0;
    transform: translateY(-50%);
  }

  body.customizer-sticky-preview-active:is(
      [data-step='tree'],
      [data-step='house'],
      [data-step='face']
    )
    .top-bar
    > #brandLockup {
    grid-column: 2;
  }

  body.instant-reading-mode .top-bar > #resetButton {
    position: fixed;
    z-index: 30001;
    top: 32px;
    left: 12px;
    margin: 0;
    transform: translateY(-50%);
  }

  body.instant-reading-mode .top-bar > #brandLockup {
    grid-column: 2;
  }

  body.report-comic-mode:has(.report-arrange-page) .top-bar > #resetButton,
  body.report-comic-mode:has(.mind-garden-combined-video-page)
    .top-bar
    > #resetButton {
    position: fixed;
    z-index: 30001;
    top: 32px;
    left: 12px;
    margin: 0;
    transform: translateY(-50%);
  }

  body.report-comic-mode:has(.report-arrange-page) .top-bar > #brandLockup,
  body.report-comic-mode:has(.mind-garden-combined-video-page)
    .top-bar
    > #brandLockup {
    grid-column: 2;
  }
}

/* Only low-PC and tablet house/roof style cards adopt the requested 2/2/1
   geometry. The art boxes retain their checkpoint dimensions and centering. */
@media (min-width: 1280px) and (max-width: 1399px) and (hover: hover) and (pointer: fine),
  (min-width: 1400px) and (max-height: 849px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active[data-step='house']
    #floorStyleGrid.floor-style-grid {
    --house-card-target-width: calc((100% - 64px) / 5 + 26.457px);
  }

  body.customizer-sticky-preview-active[data-step='house']
    #roofStyleGrid.roof-style-grid {
    --house-card-target-width: calc((100% - 32px) / 3 + 26.457px);
  }
}

@media (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active[data-step='house']
    :is(#floorStyleGrid.floor-style-grid, #roofStyleGrid.roof-style-grid) {
    --house-card-target-width: calc((100% - 32px) / 3 + 26.457px);
  }
}

@media (min-width: 1280px) and (max-width: 1399px) and (hover: hover) and (pointer: fine),
  (min-width: 1400px) and (max-height: 849px) and (hover: hover) and (pointer: fine),
  (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active[data-step='house']
    :is(#floorStyleGrid.floor-style-grid, #roofStyleGrid.roof-style-grid) {
    grid-template-columns: repeat(2, var(--house-card-target-width));
    justify-content: center;
    align-items: start;
  }

  body.customizer-sticky-preview-active[data-step='house']
    :is(#floorStyleGrid.floor-style-grid, #roofStyleGrid.roof-style-grid)
    > .option-card {
    box-sizing: border-box;
    width: 100%;
    padding-block: 1px;
    align-items: center;
    justify-content: center;
  }

  body.customizer-sticky-preview-active[data-step='house']
    #floorStyleGrid.floor-style-grid
    > .option-card:nth-child(-n + 3) {
    height: 140.302px;
    min-height: 140.302px;
    max-height: 140.302px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    #floorStyleGrid.floor-style-grid
    > .option-card:nth-child(n + 4) {
    height: 138.702px;
    min-height: 138.702px;
    max-height: 138.702px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    #roofStyleGrid.roof-style-grid
    > .option-card:nth-child(-n + 3) {
    height: 118.302px;
    min-height: 118.302px;
    max-height: 118.302px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    #roofStyleGrid.roof-style-grid
    > .option-card:nth-child(n + 4) {
    height: 116.702px;
    min-height: 116.702px;
    max-height: 116.702px;
  }

  body.customizer-sticky-preview-active[data-step='house']
    :is(#floorStyleGrid.floor-style-grid, #roofStyleGrid.roof-style-grid)
    > .option-card:nth-child(5) {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
    justify-self: center;
  }

  body.customizer-sticky-preview-active[data-step='house']
    #roofStyleGrid.roof-style-grid
    .option-visual
    .roof-sample {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) scale(0.58);
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch {
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 1280px) and (max-width: 1399px) and (hover: hover) and (pointer: fine),
  (min-width: 1400px) and (max-height: 849px) and (hover: hover) and (pointer: fine) {
  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch {
    min-height: 124px;
  }
}

@media (orientation: portrait) and (min-width: 720px) and (max-width: 1366px),
  (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) and (min-height: 768px) {
  body.customizer-sticky-preview-active[data-step='house']
    #roofStyleGrid.roof-style-grid
    .option-visual
    .roof-sample {
    transform: translate(-50%, -50%) scale(0.38);
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid {
    grid-template-columns: repeat(auto-fit, 52px);
    justify-content: center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch {
    width: 52px;
    min-width: 52px;
    min-height: 52px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #outfitColorMixGrid
    .outfit-mix-swatch:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* Mobile face/hair follow-up: retain the canonical cards and handlers while
   applying only the requested visual ratios. */
body[data-theme='dark'].customizer-sticky-preview-active
  .tree-selection-guide-copy
  > strong {
  color: #e5ffab !important;
  text-shadow:
    0 1px 1px rgba(23, 42, 40, 0.96),
    0 0 2px rgba(23, 42, 40, 0.92);
}

@media (orientation: portrait) and (max-width: 719px),
  (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  body.customizer-sticky-preview-active[data-step='face']
    .avatar-expression-card
    .expression-image-sample {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .avatar-expression-card
    .expression-image-sample[data-avatar-gender='female']
    .expression-thumbnail-image {
    transform: translateY(-3.8px);
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .avatar-expression-card
    .expression-image-sample[data-avatar-gender='male']
    .expression-thumbnail-image {
    transform: translateY(46.5px) scale(2.1);
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #faceSkinToneGrid
    .skin-swatch {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 34.8px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #faceSkinToneGrid
    > .color-only-card
    > .option-visual {
    position: absolute;
    inset: 0;
    display: grid;
    width: auto;
    height: auto;
    margin: 0;
    place-items: center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #faceShapeGrid
    > .option-card {
    box-sizing: border-box;
    padding-block: 3px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #faceShapeGrid
    > .option-card
    > .option-visual {
    position: absolute;
    inset: 0;
    display: grid;
    width: auto;
    height: auto;
    margin-bottom: 0;
    place-items: center;
    overflow: visible;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #faceShapeGrid
    .face-shape-sample {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%) scale(0.6);
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #faceShapeGrid
    > .option-card
    > .option-label {
    position: absolute;
    z-index: 1;
    right: 3px;
    bottom: 2px;
    left: 3px;
    margin: 0;
    pointer-events: none;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #hairStyleGrid
    > .avatar-hair-card {
    scale: 0.7;
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #hairStyleGrid
    .option-visual {
    position: relative;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #hairStyleGrid
    .hair-image-sample {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    transform-origin: center center;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #hairStyleGrid
    .option-label {
    color: transparent !important;
    text-shadow: none !important;
  }
}

@media (orientation: portrait) and (max-width: 719px) {
  body.customizer-sticky-preview-active[data-step='face']
    #faceSkinToneGrid
    > .color-only-card {
    height: 97.2px;
    min-height: 97.2px;
    max-height: 97.2px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #faceShapeGrid
    > .option-card {
    height: 108.1575px;
    min-height: 108.1575px;
    max-height: 108.1575px;
  }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 520px) {
  body.customizer-sticky-preview-active[data-step='face']
    #faceSkinToneGrid
    > .color-only-card {
    height: 101.2px;
    min-height: 101.2px;
    max-height: 101.2px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    #faceShapeGrid
    > .option-card {
    height: 111.915px;
    min-height: 111.915px;
    max-height: 111.915px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #faceSkinToneGrid
    .skin-swatch {
    width: 38.976px;
    height: 38.976px;
    border-radius: 50%;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #faceSkinToneGrid
    > .color-only-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #faceSkinToneGrid
    > .color-only-card::before {
    content: none;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #faceSkinToneGrid
    > .color-only-card.active::after {
    right: calc(25% - 8px);
    top: calc(25% - 11px);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #faceSkinToneGrid
    > .color-only-card
    > .option-visual {
    inset: auto;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 44px;
    height: 44px;
    max-width: none;
    box-sizing: border-box;
    border-radius: 50% !important;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #faceSkinToneGrid
    > .color-only-card.active
    > .option-visual {
    width: 43.137px;
    height: 43.137px;
    border: 2px solid var(--customizer-selection);
    border-radius: 50% !important;
    box-shadow:
      0 0 0 3px var(--customizer-selection-soft),
      inset 0 0 0 1px rgba(255, 255, 255, 0.42),
      inset 4px 5px 12px rgba(255, 255, 255, 0.42),
      inset -6px -8px 14px rgba(92, 69, 47, 0.08),
      0 12px 24px rgba(74, 89, 65, 0.12) !important;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #faceSkinToneGrid
    > .color-only-card.active::after {
    top: calc(50% - 18.4px);
    width: 14px;
    height: 14px;
    border-width: 1.5px;
    font-size: 0.62rem;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    .avatar-gender-card {
    height: 267.96px;
    min-height: 267.96px;
    max-height: 267.96px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    .avatar-gender-card
    .option-visual {
    min-height: 0;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    .avatar-gender-thumb-image {
    height: 321.6px;
    max-width: 105.6%;
    object-fit: contain;
    object-position: center center;
    transform-origin: center center;
  }

  .editor-app.avatar-person-landscape-v2 #hairColorGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .editor-app.avatar-person-landscape-v2
    #hairColorGrid
    .avatar-color-swatch-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 21.6px;
    height: 21.6px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image {
    --outfit-preview-center-y: 0%;
    scale: none;
    transform: translateX(-50%) translateY(var(--outfit-preview-center-y))
      scale(1.2);
    transform-origin: center center;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/male/01/'] {
    --outfit-preview-center-y: 9.1488px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/male/02/'] {
    --outfit-preview-center-y: 12.3709px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/male/03/'] {
    --outfit-preview-center-y: 10.0031px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/male/04/'] {
    --outfit-preview-center-y: 9.8136px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/male/05/'] {
    --outfit-preview-center-y: 11.1352px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/female/01/'] {
    --outfit-preview-center-y: 12.1873px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/female/02/'] {
    --outfit-preview-center-y: 11.6533px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/female/03/'] {
    --outfit-preview-center-y: 14.0878px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/female/04/'] {
    --outfit-preview-center-y: 13.0427px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    .outfit-asset-thumb-image[src*='/female/05/'] {
    --outfit-preview-center-y: 11.0402px;
  }

  .editor-app.avatar-person-landscape-v2
    #outfitStyleMixGrid
    > .outfit-mix-style-button.active::after {
    top: -2px;
  }

  .editor-app.avatar-person-landscape-v2 #hairStyleGrid {
    row-gap: 8px;
  }

  .editor-app.avatar-person-landscape-v2
    #hairStyleGrid
    > .avatar-hair-card {
    margin-bottom: -51.662px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .picker-panel:has(> #optionGrid.hair-editor-sections)
    > .preview-secondary-navigation {
    margin-top: 42px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #outfitColorMixGrid
    > .outfit-mix-swatch {
    height: 67.2px;
    min-height: 67.2px;
    max-height: 67.2px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #outfitColorMixGrid
    .outfit-mix-swatch-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32.4px;
    height: 32.4px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
  }

  body[data-theme='dark'].customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    .picker-panel::before,
  body[data-theme='dark'].customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    .picker-panel::after,
  body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
    .report-arrange-page
    .report-arrange-controls::before,
  body[data-theme='dark'].report-comic-mode:has(.report-arrange-page)
    .report-arrange-page
    .report-arrange-controls::after {
    content: none;
  }

  body.report-comic-mode:has(.report-arrange-page)
    .report-arrange-page
    .report-arrange-footer-navigation {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr) !important;
    gap: 8px;
  }

  body.report-comic-mode:has(.report-arrange-page)
    .report-arrange-page
    .report-arrange-footer-navigation
    :is(#gardenBackButton, #completeGardenButton) {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    writing-mode: horizontal-tb;
    white-space: nowrap;
    word-break: keep-all;
    flex-wrap: nowrap;
  }
}

@media (orientation: landscape) and (max-width: 719px) and (max-height: 520px) {
  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #faceSkinToneGrid
    > .color-only-card {
    min-width: 44px;
    justify-self: center;
  }

  .editor-app.avatar-person-landscape-v2
    #hairColorGrid
    .avatar-color-swatch-dot {
    width: 25.2px;
    height: 25.2px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #outfitColorMixGrid
    > .outfit-mix-swatch {
    height: 76.2px;
    min-height: 76.2px;
    max-height: 76.2px;
  }

  body.customizer-sticky-preview-active[data-step='face']
    .editor-app.avatar-person-landscape-v2
    #outfitColorMixGrid
    .outfit-mix-swatch-dot {
    width: 37.8px;
    height: 37.8px;
  }
}