.home-page,
.home-page * {
  box-sizing: border-box;
}

.home-page {
  --home-title-wood-shadow: rgb(77 42 31 / 38%);
  --home-title-soft-shadow: rgb(58 31 25 / 22%);
  position: absolute;
  z-index: 50;
  inset: 0;
  overflow: hidden;
  background: #d8a9b8;
  opacity: 1;
  visibility: visible;
}

.home-interface-stage {
  --home-title-module-scale: 0.85;
  --home-main-entry-module-scale: 0.82;
  --home-aux-entry-module-scale: 0.85;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 2560px;
  height: 1440px;
  overflow: visible;
  pointer-events: none;
  transform-origin: 0 0;
  user-select: none;
}

.home-title-module {
  position: absolute;
  top: 62px;
  left: 50%;
  width: 1305.6px;
  height: 435.2px;
  isolation: isolate;
  pointer-events: none;
  transform: translateX(-50%);
  transform-origin: center top;
}

.home-title-module__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1536px;
  height: 512px;
  transform: scale(var(--home-title-module-scale));
  transform-origin: left top;
}

.home-title-module__plate,
.home-title-module__content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-title-module__plate {
  z-index: 0;
  display: block;
  filter:
    drop-shadow(0 10px 0 var(--home-title-wood-shadow))
    drop-shadow(0 18px 12px var(--home-title-soft-shadow));
  image-rendering: pixelated;
  -webkit-user-drag: none;
}

.home-title-module__content {
  z-index: 1;
}

.home-title-module__heading {
  position: absolute;
  top: 122px;
  left: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 1096px;
  height: 236px;
  margin: 0;
  pointer-events: none;
}

.home-title-character {
  --hop-tilt: -1.5deg;
  --hop-counter-tilt: 1deg;
  --hop-settle-tilt: -0.5deg;
  --hop-accent: #ff91b3;
  position: relative;
  display: block;
  width: 138px;
  height: 220px;
  cursor: default;
  pointer-events: auto;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
  transform-origin: center 76%;
  transition: transform var(--dream-motion-title-leave) var(--dream-motion-hover-easing);
  will-change: transform;
}

.home-title-character:nth-child(even) {
  --hop-tilt: 1.5deg;
  --hop-counter-tilt: -1deg;
  --hop-settle-tilt: 0.5deg;
  --hop-accent: #7ad9d1;
}

.home-title-character__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 0 rgb(77 35 27 / 42%));
  image-rendering: pixelated;
  -webkit-user-drag: none;
}

.home-title-character::after {
  position: absolute;
  top: 18px;
  right: 17px;
  width: 8px;
  height: 8px;
  opacity: 0;
  background: var(--hop-accent);
  box-shadow:
    16px 10px 0 #fff3bc,
    -12px 18px 0 var(--hop-accent);
  content: "";
  image-rendering: pixelated;
  pointer-events: none;
  transform: translateY(8px) scale(0);
  transition:
    opacity var(--dream-motion-title-leave) var(--dream-motion-sparkle-easing),
    transform var(--dream-motion-title-leave) var(--dream-motion-sparkle-easing);
}

.home-title-character:hover {
  transform: translate3d(0, -10px, 0) rotate(var(--hop-settle-tilt)) scale(1.065);
  transition-duration: var(--dream-motion-title-enter);
}

.home-title-character:hover::after {
  opacity: 1;
  transform: translateY(-9px) scale(1.15);
  transition-duration: var(--dream-motion-title-enter);
}

.home-title-module__tagline {
  position: absolute;
  top: 348px;
  left: 268px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1020px;
  height: 108px;
  margin: 0;
  pointer-events: none;
  backface-visibility: hidden;
  contain: paint;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.home-title-module__tagline-art {
  display: block;
  width: 888px;
  height: 92px;
  flex: 0 0 888px;
  align-self: center;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  -webkit-user-drag: none;
}

.home-entry-field {
  position: absolute;
  top: 543px;
  left: 50%;
  display: grid;
  grid-template-rows: 348.5px 379.1px;
  grid-template-columns: repeat(3, 527px);
  column-gap: 53px;
  row-gap: 82.5px;
  width: 1687px;
  height: 810.1px;
  pointer-events: none;
  transform: translateX(-50%);
}

.home-main-entry {
  position: relative;
  top: -12px;
  grid-row: 1;
  grid-column: 1 / -1;
  place-self: start center;
  display: block;
  width: 918.4px;
  height: 348.5px;
  border-radius: 47.56px;
  outline-offset: 8.2px;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center 72%;
  transition: transform var(--dream-motion-hover-leave) var(--dream-motion-hover-easing);
  will-change: transform;
}

.home-main-entry__canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1120px;
  height: 425px;
  filter:
    drop-shadow(0 10px 0 rgb(91 47 34 / 34%))
    drop-shadow(0 22px 16px rgb(61 31 24 / 24%));
  pointer-events: none;
  transform: scale(var(--home-main-entry-module-scale));
  transform-origin: left top;
}

.home-main-entry__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  -webkit-user-drag: none;
}

.home-main-entry:is(:hover, :focus-visible) {
  transform: translate3d(0, 0, 0) scale(1.03);
  transition-duration: var(--dream-motion-hover-enter);
}

.home-main-entry:focus-visible {
  outline: 6px solid #fff0a8;
}

.home-main-entry:active {
  transform: translateY(3px) scale(0.992);
  transition-duration: var(--dream-motion-instant);
}

.home-aux-entry {
  position: relative;
  grid-row: 2;
  place-self: start center;
  display: block;
  width: 527px;
  height: 379.1px;
  isolation: isolate;
  cursor: default;
  pointer-events: auto;
}

.home-aux-entry[href] {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

.home-aux-entry[href]:focus-visible {
  outline: 5px solid #fff2c4;
  outline-offset: 8px;
}

.home-aux-entry__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 620px;
  height: 446px;
  filter:
    saturate(0.82)
    brightness(0.94)
    drop-shadow(0 8px 0 rgb(91 47 34 / 28%))
    drop-shadow(0 14px 10px rgb(61 31 24 / 18%));
  transform: scale(var(--home-aux-entry-module-scale));
  transform-origin: left top;
}

.home-aux-entry--journal {
  grid-column: 1;
}

.home-aux-entry--travel {
  grid-column: 2;
}

.home-aux-entry--wishes {
  grid-column: 3;
}

.home-aux-entry__preview,
.home-aux-entry__frame {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 620px;
  height: 377px;
  image-rendering: pixelated;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: center 82%;
  transition:
    filter var(--dream-motion-hover-leave) var(--dream-motion-hover-easing),
    transform var(--dream-motion-hover-leave) var(--dream-motion-hover-easing);
  will-change: filter, transform;
  -webkit-user-drag: none;
}

.home-aux-entry__preview {
  z-index: 0;
}

.home-aux-entry__frame {
  z-index: 1;
}

.home-aux-entry__label {
  position: absolute;
  z-index: 2;
  top: 319px;
  left: 50px;
  display: block;
  width: 520px;
  height: 124px;
  pointer-events: none;
}

.home-aux-entry__label-art {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition:
    filter var(--dream-motion-hover-leave) var(--dream-motion-hover-easing),
    transform var(--dream-motion-hover-leave) var(--dream-motion-hover-easing);
  will-change: filter, transform;
  -webkit-user-drag: none;
}

.home-aux-entry__status {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  padding: 10px 15px 11px;
  border: 4px solid #6f3c2c;
  color: #fff4d0;
  background: #a85c62;
  box-shadow:
    inset 0 0 0 3px #d98b8c,
    0 5px 0 rgb(82 43 31 / 72%);
  font: 900 20px/1 "Microsoft YaHei", sans-serif;
  letter-spacing: 0.08em;
  image-rendering: pixelated;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition: transform var(--dream-motion-hover-leave) var(--dream-motion-hover-easing);
  will-change: transform;
}

.home-aux-entry:is(:hover, :focus-visible) .home-aux-entry__preview,
.home-aux-entry:is(:hover, :focus-visible) .home-aux-entry__frame {
  filter: brightness(1.11) saturate(1.14);
  transform: translate3d(0, -7px, 0) scale(1.025);
  transition-duration: var(--dream-motion-hover-enter);
}

.home-aux-entry:is(:hover, :focus-visible) .home-aux-entry__label-art {
  filter: brightness(1.13) saturate(1.16);
  transform: translate3d(0, -9px, 0) scale(1.055);
  transition-duration: var(--dream-motion-hover-enter);
}

.home-aux-entry:is(:hover, :focus-visible) .home-aux-entry__status {
  transform: translate3d(0, -7px, 0) rotate(-1.5deg) scale(1.05);
  transition-duration: var(--dream-motion-hover-enter);
}

/* 默认暂停未开放模块；clear-motion 模式仅用于无模糊动效预览。 */
.home-interface-stage:not([data-home-disabled-preview-mode="clear-motion"])
  .home-aux-entry[data-disabled="true"]
  .home-aux-entry__frame,
.home-interface-stage:not([data-home-disabled-preview-mode="clear-motion"])
  .home-aux-entry[data-disabled="true"]
  .home-aux-entry__label-art,
.home-interface-stage:not([data-home-disabled-preview-mode="clear-motion"])
  .home-aux-entry[data-disabled="true"]
  .home-aux-entry__status {
  transition: none;
}

.home-interface-stage:not([data-home-disabled-preview-mode="clear-motion"])
  .home-aux-entry[data-disabled="true"]:is(:hover, :focus-visible)
  .home-aux-entry__frame {
  filter: none;
  transform: translate3d(0, 0, 0);
}

.home-interface-stage:not([data-home-disabled-preview-mode="clear-motion"])
  .home-aux-entry[data-disabled="true"]:is(:hover, :focus-visible)
  .home-aux-entry__label-art,
.home-interface-stage:not([data-home-disabled-preview-mode="clear-motion"])
  .home-aux-entry[data-disabled="true"]:is(:hover, :focus-visible)
  .home-aux-entry__status {
  filter: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.home-page.is-leaving,
.table-scene:not([data-route="home"]) .home-page {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.home-fallback {
  z-index: 0;
  display: block;
  overflow: hidden;
  opacity: 1;
  background: #d8a9b8;
}

.home-fallback__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.home-canvas {
  z-index: 1;
  display: block;
  opacity: 0;
  image-rendering: auto;
}

.home-viewport.is-gpu-ready .home-canvas {
  opacity: 1;
}

.home-viewport.is-gpu-ready .home-fallback {
  opacity: 0;
}

.home-viewport:is(.is-fallback-only, [data-renderer="fallback-only"]) .home-canvas {
  visibility: hidden;
  opacity: 0;
}

.home-viewport:is(.is-fallback-only, [data-renderer="fallback-only"]) .home-fallback {
  visibility: visible;
  opacity: 1;
}

.home-runtime-status {
  z-index: 100;
}