:root {
  /* 窗口自适应缩放基数：由 JS 根据窗口大小动态设置 */
  --canvas-base-scale: 1;

  /* 三个页面各自的额外缩放系数：你可以在这里单独调整 */
  --captcha-scale-factor: 1;
  --desktop-scale-factor: 1;
  --ipod-scale-factor: 1.2;

  /* JS 计算后的最终缩放值：base × factor（只读，不要手动改） */
  --captcha-scale: 1;
  --desktop-scale: 1;
  --ipod-scale: 1;

  /* iPod 页面背景 ipod-bg 的额外缩放：1 = 贴合画布，>1 稍大一点避免白边 */
  --ipod-bg-scale: 1;

  /* Desktop 图标尺寸与 hover 放大倍数 */
  --desktop-icon-size: 250pt;
  --desktop-icon-hover-scale: 1.25;
  /* 视觉尺寸随 desktop 缩放（icon 已移出 canvas transform） */
  --desktop-icon-display-size: calc(var(--desktop-icon-size) * var(--desktop-scale));
  /* hover 时向两侧推开邻居，保持视觉 gap 20pt */
  --desktop-icon-hover-push: calc(var(--desktop-icon-display-size) * (var(--desktop-icon-hover-scale) - 1) / 2);

  /* iPod 打开时 Desktop 背景模糊强度 */
  --desktop-backdrop-blur: 8px;
  --view-transition-duration: 0.35s;
  --desktop-enter-duration: 1s;
  --page-crossfade-duration: 0.55s;
}

@font-face {
  font-family: 'HarmonyOS_Sans_SC';
  src: url('HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'HarmonyOS_Sans_SC';
  src: url('HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'HarmonyOS_Sans_SC';
  src: url('HarmonyOS_Sans_SC/HarmonyOS_Sans_Italic/HarmonyOS_Sans_Regular_Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'HarmonyOS_Sans_SC';
  src: url('HarmonyOS_Sans_SC/HarmonyOS_Sans_Italic/HarmonyOS_Sans_Bold_Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Ongulip ParkDahyun';
  src: url('folder_postcard_all/fonts/ongulip-parkdahyun.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Ichijo Laura';
  src: url('folder_postcard_all/fonts/ichijo-laura.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
  font-family: 'HarmonyOS_Sans_SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html.is-app-loading #captcha-box {
  opacity: 0;
}

#captcha-box {
  transition:
    opacity 0.4s ease,
    transform var(--page-crossfade-duration) ease;
}

/* Captcha 全屏层，默认显示：固定大小画布，类似 iPod，不随窗口缩放/移动 */
#captcha-screen {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000 var(--theme-bg) center/cover no-repeat;
  z-index: 100;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--page-crossfade-duration) ease,
    visibility var(--page-crossfade-duration) ease;
}

#captcha-screen.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#captcha-screen.is-leaving #captcha-box {
  opacity: 0;
  transform: scale(var(--captcha-scale)) scale(0.97);
}

/* iPod 背景层：独立于 #ipod 的全屏画布，只在进入 iPod 或 Desktop 时显示 */
#ipod-bg-layer {
  position: fixed;
  inset: 0;
  display: none; /* 由 JS 控制何时显示 */
  background: url('ipod-bg.png') center/cover no-repeat;
  z-index: 0; /* 放到最底层，在所有画布下面，仅作背景 */
}

/* Captcha 画布：固定像素尺寸，内部 % 都相对它计算 */
#captcha-box {
  position: relative;
  width: 480px;   /* 和 iPod 一样的宽度，可按需要改 */
  height: 840px;  /* 和 iPod 一样的高度，可按需要改 */
  /* 三个 captcha 主图的旋转角度，可以在这里改数值 */
  --captcha-rotate-1: 2deg;
  --captcha-rotate-2: 0deg;
  --captcha-rotate-3: 0deg;
  transform-origin: center center;
  transform: scale(var(--captcha-scale));
}

#captcha-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* 额外两个 captcha 主图：2 = 点击进入，3 = 输入 1025/551
   注意：2 和 3 分开写，方便单独调整大小与位置 */
#captcha-img2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  pointer-events: none;
}

#captcha-img3 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* 三个 captcha 容器：整体旋转（图片 + 热区 + 按钮），并允许单独控制 box 大小与位置 */
#captcha-1,
#captcha-2,
#captcha-3 {
  position: absolute;
  transform-origin: center center;
}

/* 图层顺序：3 > 2 > 1，下面的 top/left/width/height 就是三个 box 的基础大小，可自由修改 */
#captcha-1 {
  z-index: 1;
  top: 0%;        /* captcha1 的盒子位置/大小 */
  left: 0%;
  width: 100%;
  height: 100%;
  /* 只旋转，不再额外 scale，大小完全由上面的 width/height 决定 */
  transform: rotate(var(--captcha-rotate-1));
}

#captcha-2 {
  z-index: 2;
  top: 0.8%;        /* captcha2，默认比 1 稍小一点、居中一些，你可以改成自己想要的数值 */
  left: -33%;
  width: 168%;
  height: 96%;
  transform: rotate(var(--captcha-rotate-2));
  pointer-events: none; /* 只当装饰，不截获点击 */
}

#captcha-3 {
  z-index: 8;
  top: 0%;        /* captcha3，同理单独控制 box 大小 */
  left: -56.5%;
  width: 213%;
  height: 100%;
  transform: rotate(var(--captcha-rotate-3));
  /* 自身不拦截鼠标事件，只让内部输入框/按钮可以点 */
  pointer-events: none;
}

/* captcha2 的倾斜正方形热区：位置/大小/角度可在这里调 */
#captcha2-hotspot {
  position: absolute;
  /* 下面的 top/left/width/height 先给一个大概值，你可以在 F12 里微调 */
  top: 17%;
  left: 73%;
  width: 8%;
  height: 5%;

  background: transparent;
  transform-origin: center center;
  /* 单独控制 captcha2 热区的旋转角度：在这里改数值即可 */
  --captcha2-hotspot-rotate: 8deg;
  transform: rotate(var(--captcha2-hotspot-rotate));
  cursor: pointer;
  z-index: 6; /* 高于 captcha-1/2/3 和参考图，保证能点到 */
}

/* Desktop 层：全屏背景（与 Captcha 相同方式），避免缩放画布时露白边 */
#desktop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000 var(--theme-bg) center/cover no-repeat;
  filter: none;
  transform: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--page-crossfade-duration) ease,
    visibility var(--page-crossfade-duration) ease,
    filter var(--view-transition-duration) ease,
    transform var(--view-transition-duration) ease;
}

#desktop.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 略放大以裁掉 blur 边缘透明带，避免四周黑边 */
#desktop.is-backdrop-blurred {
  filter: blur(var(--desktop-backdrop-blur));
  transform: scale(1.05);
  pointer-events: none;
}

/* 子元素若设了 pointer-events: auto 仍可点穿，模糊态一并禁用 */
#desktop.is-backdrop-blurred #desktop-icon-strip {
  pointer-events: none;
}

#desktop-upside-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100%);
  transition:
    transform var(--desktop-enter-duration) ease,
    opacity var(--desktop-enter-duration) ease;
}

#desktop.is-upside-visible #desktop-upside-bar {
  opacity: 1;
  transform: translateY(0);
}

#desktop-upside {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  display: block;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.6;
  transform: none;
  transition: none;
}

#desktop.is-upside-visible #desktop-upside {
  opacity: 0.6;
  transform: none;
}

/* Left of upside, vertically centered on upside's horizontal midline */
#desktop-titleicons {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  line-height: 0;
  /* Match titleicon height (27.5% of upside); upside is 8001×768 full-bleed */
  --titleicon-size: calc(100vw * 768 / 8001 * 0.275);
  --titleicon-meta-size: calc(var(--titleicon-size) * 0.316 * 1.05);
  --titleicon-title-size: calc(var(--titleicon-meta-size) * 1.618);
  transform: none;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease,
    transform var(--view-transition-duration) ease;
}

/* Fade in place when desktop scales up for overlay pages — cancel parent scale(1.05) */
#desktop.is-backdrop-blurred #desktop-titleicons {
  opacity: 0;
  visibility: hidden;
  transform: scale(calc(1 / 1.05));
  transform-origin: 50% 50vh;
}

.desktop-titleicon-slot {
  position: absolute;
  left: 2.5%;
  top: 50%;
  transform: translateY(-50%);
  height: 27.5%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--titleicon-size) * 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.desktop-titleicon-slot.is-visible {
  opacity: 1;
  visibility: visible;
}

.desktop-titleicon-slot .desktop-titleicon {
  position: relative;
  left: 0;
  top: auto;
  transform: none;
  height: 100%;
  width: var(--titleicon-size);
  flex: 0 0 var(--titleicon-size);
  object-fit: contain;
  opacity: 1;
  visibility: visible;
}

.desktop-titleicon {
  position: absolute;
  left: 2.5%;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  height: 27.5%;
  width: auto;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.desktop-titleicon.is-visible {
  opacity: 1;
  visibility: visible;
}

.desktop-titleicon-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15em;
  margin-left: calc(var(--titleicon-size) * 0.08);
  line-height: 1.15;
  color: #4d4d4d;
  white-space: nowrap;
}

.desktop-titleicon-title {
  margin: 0;
  font-family: 'HarmonyOS_Sans_SC', sans-serif;
  font-weight: 700;
  font-size: var(--titleicon-title-size);
  letter-spacing: 0.01em;
}

.desktop-titleicon-meta {
  margin: 0;
  font-family: 'HarmonyOS_Sans_SC', sans-serif;
  font-weight: 400;
  font-size: var(--titleicon-meta-size);
  letter-spacing: 0.01em;
}

/* Desktop 内容画布：1920×1080，用于放置热区与 UI 元素 */
#desktop-canvas {
  position: absolute;
  width: 1920px;
  height: 1080px;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--desktop-scale));
  z-index: 2;
  pointer-events: none;
}

/* 与 canvas 同屏矩形，但不使用 transform，保证 soft-light 能混到 desktop-bg */
#desktop-icon-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1920px * var(--desktop-scale));
  height: calc(1080px * var(--desktop-scale));
  margin-left: calc(-960px * var(--desktop-scale));
  margin-top: calc(-540px * var(--desktop-scale));
  z-index: 2;
  pointer-events: none;
}

/* Desktop 图标链：横向排列，滚轮控制水平滚动；左右硬边淡出 */
#desktop-icon-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  pointer-events: auto;
  --desktop-icon-edge-fade: clamp(48px, 8vw, 120px);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--desktop-icon-edge-fade),
    #000 calc(100% - var(--desktop-icon-edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--desktop-icon-edge-fade),
    #000 calc(100% - var(--desktop-icon-edge-fade)),
    transparent 100%
  );
  transition: opacity var(--desktop-enter-duration) ease;
  transition-delay: 0.2s;
}

#desktop.is-upside-visible #desktop-icon-strip {
  opacity: 1;
}

#desktop-icon-strip::-webkit-scrollbar {
  display: none;
}

#desktop-icon-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(20pt * var(--desktop-scale));
  width: max-content;
  margin: 0;
  padding: 0 calc(40px * var(--desktop-scale));
}

/* 槽位居中，高度预留 hover 居中放大空间 */
.desktop-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: var(--desktop-icon-display-size);
  height: calc(var(--desktop-icon-display-size) * var(--desktop-icon-hover-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: margin 0.2s ease;
}

/* icon 后方背景：与 icon 同尺寸居中对齐；默认透明，hover + 边缘羽化（上边更强） */
.desktop-icon-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--desktop-icon-display-size);
  height: var(--desktop-icon-display-size);
  background: url('desktopiconbg.png') center / contain no-repeat;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  z-index: 0;
  --desktop-icon-bg-feather: 22px;
  --desktop-icon-bg-feather-top: 42%;
  filter: blur(var(--desktop-icon-bg-feather));
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--desktop-icon-bg-feather-top),
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--desktop-icon-bg-feather-top),
    #000 100%
  );
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.desktop-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--desktop-icon-display-size);
  height: var(--desktop-icon-display-size);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
  transform-origin: center center;
  transition: transform 0.2s ease;
}

.desktop-icon-wrap:hover {
  z-index: 1;
  margin-left: var(--desktop-icon-hover-push);
  margin-right: var(--desktop-icon-hover-push);
}

.desktop-icon-wrap:hover::before {
  opacity: 0.4;
  transform: translate(-50%, -50%) scale(var(--desktop-icon-hover-scale));
}

.desktop-icon-wrap:hover .desktop-icon {
  transform: scale(var(--desktop-icon-hover-scale));
}

/* Bottom-center mouse-wheel scroll hint (Lottie-style loop) */
#desktop-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.5vh, 42px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.14rem;
  color: #4d4d4d;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.9s ease,
    visibility 0.9s ease,
    transform var(--view-transition-duration) ease;
}

#desktop.is-active.is-upside-visible:not(.is-backdrop-blurred) #desktop-scroll-hint:not(.is-dismissed) {
  opacity: 0.75;
  visibility: visible;
}

#desktop-scroll-hint.is-dismissed {
  opacity: 0;
  visibility: hidden;
}

/* Fade in place when desktop scales for overlay pages */
#desktop.is-backdrop-blurred #desktop-scroll-hint {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scale(calc(1 / 1.05));
  transform-origin: 50% 50vh;
}

.desktop-scroll-hint-svg {
  width: clamp(22px, 2.4vw, 36px);
  height: auto;
  display: block;
  overflow: visible;
}

.desktop-scroll-hint-wheel {
  transform-box: view-box;
  transform-origin: 20px 16px;
  animation: desktop-scroll-hint-wheel 2.6s ease-in-out infinite;
}

.desktop-scroll-hint-label {
  font-family: 'HarmonyOS_Sans_SC', sans-serif;
  font-weight: 400;
  font-size: clamp(0.55rem, 0.85vw, 0.75rem);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  line-height: 1;
  user-select: none;
}

@keyframes desktop-scroll-hint-wheel {
  0%,
  12% {
    transform: translateY(0);
    opacity: 1;
  }
  55% {
    transform: translateY(12px);
    opacity: 0.15;
  }
  56%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

/* Folder 页面：叠在模糊 Desktop 之上 */
#folder {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
}

#folder.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#folder.is-poster-view-open .folder-inner {
  visibility: hidden;
  pointer-events: none;
}

#folder.is-postcard-view-open .folder-inner {
  visibility: hidden;
  pointer-events: none;
}

#folder.is-sticker-view-open .folder-inner {
  visibility: hidden;
  pointer-events: none;
}

#folder.is-pudding-view-open .folder-inner {
  visibility: hidden;
  pointer-events: none;
}

.folder-postcard-view {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  --folder-postcard-item-w: clamp(180px, 22vw, 320px);
  --folder-postcard-gap: clamp(20px, 3vw, 40px);
  --folder-postcard-hover-scale: 1.80;
  --folder-postcard-hover-push: 0px;
  --folder-postcard-hover-duration: 0.95s;
  --folder-postcard-flip-duration: 0.55s;
  --folder-postcard-slot-duration: 0.6s;
  --folder-postcard-center-hold: 1.00s;
  --folder-postcard-intro-hold: 0s;
  --folder-postcard-intro-duration: 1s;
  --folder-postcard-intro-slide: 24vh;
  --folder-postcard-intro-scale-from: 0.72;
  --folder-postcard-center-index: 5;
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
}

#folder.is-postcard-view-open .folder-postcard-view {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.folder-postcard-scroll {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
}

.folder-postcard-column.is-intro-stacked .folder-postcard-card,
.folder-postcard-column.is-intro-playing .folder-postcard-card,
.folder-postcard-column.is-intro-preparing .folder-postcard-card {
  z-index: var(--intro-z, calc(var(--card-index) + 1));
  pointer-events: none;
  transition: none;
}

/* Wait for images: keep all hidden so 1–5 can enter together. */
.folder-postcard-column.is-intro-preparing .folder-postcard-card {
  opacity: 0;
}

/* Stacked hold: only postcard1 visible. */
.folder-postcard-column.is-intro-stacked .folder-postcard-card:not([data-postcard-id='1']) {
  opacity: 0;
}

.folder-postcard-column.is-intro-stacked .folder-postcard-card {
  transform: translateX(
    calc(
      (var(--folder-postcard-center-index) - var(--card-index)) *
        var(--folder-postcard-step, calc(var(--folder-postcard-item-w) + var(--folder-postcard-gap)))
    )
  );
}

/* Intro: postcard1 fades + scales up in place; 2/5 from top; 3/4 from bottom — all start together. */
.folder-postcard-column.is-intro-playing .folder-postcard-card[data-postcard-id='1'] {
  animation: folder-postcard-intro-fade var(--folder-postcard-intro-duration) ease both;
}

.folder-postcard-column.is-intro-playing .folder-postcard-card[data-postcard-id='2'],
.folder-postcard-column.is-intro-playing .folder-postcard-card[data-postcard-id='5'] {
  animation: folder-postcard-intro-from-top var(--folder-postcard-intro-duration) ease both;
}

.folder-postcard-column.is-intro-playing .folder-postcard-card[data-postcard-id='3'],
.folder-postcard-column.is-intro-playing .folder-postcard-card[data-postcard-id='4'] {
  animation: folder-postcard-intro-from-bottom var(--folder-postcard-intro-duration) ease both;
}

/* Off-viewport cards: sit in final slots, stay hidden until intro ends. */
.folder-postcard-column.is-intro-playing .folder-postcard-card:not([data-postcard-id='1']):not(
    [data-postcard-id='2']
  ):not([data-postcard-id='3']):not([data-postcard-id='4']):not([data-postcard-id='5']) {
  opacity: 0;
  transform: none;
  animation: none;
}

@keyframes folder-postcard-intro-fade {
  0% {
    opacity: 0;
    transform: scale(var(--folder-postcard-intro-scale-from, 0.72));
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes folder-postcard-intro-from-top {
  0% {
    transform: translateY(calc(-1 * var(--folder-postcard-intro-slide, 24vh)));
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes folder-postcard-intro-from-bottom {
  0% {
    transform: translateY(var(--folder-postcard-intro-slide, 24vh));
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.folder-postcard-column.is-intro-playing .folder-postcard-card.is-center-hover,
.folder-postcard-column.is-intro-playing .folder-postcard-card:hover {
  z-index: calc(var(--card-index) + 1);
}

.folder-postcard-column.is-intro-playing .folder-postcard-card.is-center-hover .folder-postcard-card-inner,
.folder-postcard-column.is-intro-playing .folder-postcard-card:hover .folder-postcard-card-inner,
.folder-postcard-column.is-intro-playing .folder-postcard-card.is-flipped.is-center-hover .folder-postcard-card-inner,
.folder-postcard-column.is-intro-playing .folder-postcard-card.is-flipped:hover .folder-postcard-card-inner {
  transform: none;
}

.folder-postcard-column {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--folder-postcard-gap);
  width: max-content;
  height: max-content;
  margin: 0;
  padding: clamp(16px, 4vh, 40px) clamp(32px, 8vw, 72px);
  box-sizing: border-box;
  transform: translateX(var(--folder-postcard-track-offset, 0px));
  transition: transform var(--folder-postcard-slot-duration) ease;
}

.folder-postcard-column.is-intro-stacked,
.folder-postcard-column.is-intro-playing {
  transition: none;
}

.folder-postcard-column.is-slot-jumping {
  transition: none;
}

.folder-postcard-card {
  flex: 0 0 auto;
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  perspective: 1200px;
  transform: translateX(0);
  transition: transform var(--folder-postcard-hover-duration) ease;
}

.folder-postcard-card.is-center-hover,
.folder-postcard-card.is-center-spotlight,
.folder-postcard-card:hover {
  z-index: 1;
}

/* Only push neighbors while the centered card is scaled. */
.folder-postcard-card.is-center-spotlight ~ .folder-postcard-card,
.folder-postcard-card.is-center-hover ~ .folder-postcard-card {
  transform: translateX(var(--folder-postcard-hover-push));
}

.folder-postcard-column > .folder-postcard-card:has(~ .folder-postcard-card.is-center-spotlight),
.folder-postcard-column > .folder-postcard-card:has(~ .folder-postcard-card.is-center-hover) {
  transform: translateX(calc(-1 * var(--folder-postcard-hover-push)));
}

.folder-postcard-card-inner {
  position: relative;
  width: var(--folder-postcard-item-w);
  transform: scale(1);
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform var(--folder-postcard-hover-duration) ease;
}

/* postcard1 is a different aspect ratio; widen it so height matches postcard2–12 (display assets). */
.folder-postcard-card[data-postcard-id="1"] .folder-postcard-card-inner {
  width: calc(var(--folder-postcard-item-w) * 971 / 933);
}

/* Scale the focused center card; duration matches slot travel so zoom happens in motion. */
.folder-postcard-card.is-center-hover .folder-postcard-card-inner,
.folder-postcard-card.is-center-spotlight .folder-postcard-card-inner {
  transform: scale(var(--folder-postcard-hover-scale));
}

.folder-postcard-card.is-flipped .folder-postcard-card-inner {
  transform: rotateY(180deg);
  transition-duration: var(--folder-postcard-flip-duration);
}

.folder-postcard-card.is-flipped.is-center-spotlight .folder-postcard-card-inner,
.folder-postcard-card.is-flipped.is-center-hover .folder-postcard-card-inner {
  transform: rotateY(180deg) scale(var(--folder-postcard-hover-scale));
}

.folder-postcard-view.is-wheel-navigating {
  --folder-postcard-slot-duration: 0.6s;
  /* Hover duration is set live from wheel speed in JS. */
}

/* Disable card motion while measuring/settling so push/scale can't skew offsets. */
.folder-postcard-view.is-focus-jumping .folder-postcard-card,
.folder-postcard-view.is-focus-jumping .folder-postcard-card-inner {
  transition: none !important;
}

.folder-postcard-card-face {
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.folder-postcard-card-face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

.folder-postcard-card-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* postcard back: zh | ko as one group, horizontally centered;
   each language sits on its half midline and is vertically centered */
.folder-postcard-back-fields {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 10% 6%;
  box-sizing: border-box;
  pointer-events: none;
  color: #2c2c2c;
}

.folder-postcard-back-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
  flex: 1 1 50%;
  width: 50%;
  max-width: 50%;
}

.folder-postcard-back-field--zh {
  order: 1;
  transform: translateX(-6%);
}

.folder-postcard-back-field--ko {
  order: 2;
  gap: 1em;
  transform: translateX(6%);
}

.folder-postcard-card[data-postcard-id='2'] .folder-postcard-back-field--ko {
  gap: 1.2em;
}

.folder-postcard-back-text {
  margin: 0;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Prefer ink-edge trimming when supported (glyph box, not em-box). */
  text-box-trim: trim-both;
  text-box-edge: text;
}

.folder-postcard-back-text--ko-mark {
  font-family: 'Ongulip ParkDahyun', sans-serif;
  font-size: clamp(0.62rem, 1.84vw, 1.03rem);
  font-weight: 400;
  line-height: 1.2;
}

.folder-postcard-back-text--ko-body {
  font-family: 'Ongulip ParkDahyun', sans-serif;
  font-size: clamp(0.79rem, 2.31vw, 1.28rem);
  font-weight: 400;
  line-height: 1;
}

.folder-postcard-back-text--zh {
  font-family: 'Ichijo Laura', sans-serif;
  font-size: clamp(0.67rem, 2.01vw, 1.09rem);
  font-weight: 400;
  line-height: 1;
}

.folder-poster-view {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
}

#folder.is-poster-view-open .folder-poster-view {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.folder-poster-all {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  --folder-poster-gap: clamp(8px, 1vw, 16px);
  gap: var(--folder-poster-gap);
  --folder-poster-size-scale: 0.8;
  --folder-poster-all-hover-scale: 2.5;
  --folder-poster-all-hover-duration: 0.5s;
  --folder-poster-intro-duration: 2s;
  --folder-poster-item-width: calc(((96vw - 7 * var(--folder-poster-gap)) / 8) * var(--folder-poster-size-scale));
  --folder-poster-hover-push: calc(var(--folder-poster-item-width) * (var(--folder-poster-all-hover-scale) - 1) / 2);
}

.folder-poster-all-slot {
  flex: 0 0 var(--folder-poster-item-width);
  width: var(--folder-poster-item-width);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: pointer;
  transition: transform var(--folder-poster-all-hover-duration) ease;
}

.folder-poster-all-slot:hover {
  z-index: 1;
}

.folder-poster-all-slot:hover ~ .folder-poster-all-slot {
  transform: translateX(var(--folder-poster-hover-push));
}

.folder-poster-all > .folder-poster-all-slot:has(~ .folder-poster-all-slot:hover) {
  transform: translateX(calc(-1 * var(--folder-poster-hover-push)));
}

.folder-poster-all-item {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform var(--folder-poster-all-hover-duration) ease;
}

.folder-poster-all-slot:hover .folder-poster-all-item {
  transform: scale(var(--folder-poster-all-hover-scale));
}

.folder-poster-all.is-intro-playing .folder-poster-all-slot {
  z-index: calc(var(--slot-index) + 1);
  animation: folder-poster-spread var(--folder-poster-intro-duration) ease forwards;
}

@keyframes folder-poster-spread {
  from {
    transform: translateX(calc(-1 * var(--slot-index) * (var(--folder-poster-item-width) + var(--folder-poster-gap))));
  }
  to {
    transform: translateX(0);
  }
}

.folder-poster-all.is-intro-playing .folder-poster-all-slot:hover ~ .folder-poster-all-slot,
.folder-poster-all.is-intro-playing > .folder-poster-all-slot:has(~ .folder-poster-all-slot:hover),
.folder-poster-all.is-intro-playing .folder-poster-all-slot:hover .folder-poster-all-item {
  transform: none;
}

.folder-sticker-view {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  --folder-sticker-package-max-w: min(52vw, 400px);
  --folder-sticker-package-max-h: min(58vh, 460px);
  --folder-sticker-content-max-w: min(82vw, 700px);
  --folder-sticker-content-max-h: min(86vh, 760px);
  --folder-sticker-shake-duration: 1.15s;
  --folder-sticker-reveal-duration: 0.45s;
  --folder-sticker-hover-duration: 0.28s;
  --folder-sticker-hover-lift: -12px;
  --folder-sticker-under-offset: 18px;
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
}

#folder.is-sticker-view-open .folder-sticker-view {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.folder-sticker-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--folder-sticker-content-max-w);
  height: var(--folder-sticker-content-max-h);
}

.folder-sticker-content,
.folder-sticker-package {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
}

/* 叠层切换：当前层淡出，目标层从下层上浮进入 */
.folder-sticker-content,
.folder-sticker-package {
  position: absolute;
  left: 50%;
  top: 50%;
  cursor: pointer;
  transition:
    opacity var(--folder-sticker-reveal-duration) ease,
    transform var(--folder-sticker-reveal-duration) ease;
}

.folder-sticker-content {
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, calc(-50% + var(--folder-sticker-under-offset))) scale(0.97);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.folder-sticker-view.is-opened .folder-sticker-content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  z-index: 2;
  pointer-events: auto;
}

.folder-sticker-view.is-opened .folder-sticker-content:hover {
  transform: translate(-50%, -50%) scale(1.06);
  transition-duration: var(--folder-sticker-hover-duration);
}

.folder-sticker-package {
  max-width: var(--folder-sticker-package-max-w);
  max-height: var(--folder-sticker-package-max-h);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 2;
  will-change: transform, opacity;
}

.folder-sticker-view.is-shaking .folder-sticker-package {
  cursor: default;
  pointer-events: none;
  transition: none;
  animation: folder-sticker-package-shake var(--folder-sticker-shake-duration) ease-in-out both;
}

.folder-sticker-view.is-ready:not(.is-opened) .folder-sticker-package:hover {
  transform: translate(-50%, -50%) scale(1.06);
  transition-duration: var(--folder-sticker-hover-duration);
}

/* 打开 content 时：package 沉到下层，供切回时上浮进入 */
.folder-sticker-view.is-opened .folder-sticker-package {
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--folder-sticker-under-offset))) scale(0.97);
  z-index: 1;
  pointer-events: none;
  animation: none;
  cursor: default;
}

/* 晃动：模仿撕开包装袋时的左右抖动与回弹（相对舞台中心） */
@keyframes folder-sticker-package-shake {
  0% {
    transform: translate(-50%, calc(-50% + 8px)) rotate(0deg) scale(0.92);
    opacity: 0.85;
  }
  12% {
    transform: translate(-50%, calc(-50% - 2px)) translateX(-10px) rotate(-7deg) scale(0.98);
    opacity: 1;
  }
  24% {
    transform: translate(-50%, calc(-50% + 2px)) translateX(12px) rotate(7deg) scale(1.02);
  }
  36% {
    transform: translate(-50%, calc(-50% - 1px)) translateX(-9px) rotate(-5deg) scale(1.03);
  }
  48% {
    transform: translate(-50%, calc(-50% + 1px)) translateX(8px) rotate(4deg) scale(1.02);
  }
  60% {
    transform: translate(-50%, -50%) translateX(-5px) rotate(-2.5deg) scale(1.01);
  }
  72% {
    transform: translate(-50%, -50%) translateX(4px) rotate(1.5deg) scale(1);
  }
  84% {
    transform: translate(-50%, -50%) translateX(-2px) rotate(-0.8deg) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
}

.folder-pudding-view {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  --folder-pudding-item-w: min(44vw, 500px);
  --folder-pudding-gap: clamp(14px, 2.2vw, 28px);
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
}

#folder.is-pudding-view-open .folder-pudding-view {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.folder-pudding-stage {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--folder-pudding-gap);
}

.folder-pudding-item {
  display: block;
  width: var(--folder-pudding-item-w);
  height: auto;
  max-height: min(82vh, 760px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.folder-inner {
  position: relative;
  display: inline-block;
  --folder-item-hover-lift: -28px;
  --folder-item-hover-duration: 0.28s;
  --folder-pudding-hover-scale: 1.04;
}

.folder-bg-img {
  display: block;
  max-width: 80vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.folder-poster-img,
.folder-sticker-img,
.folder-postcard-img {
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--folder-item-hover-duration) ease;
}

.folder-poster-img {
  position: absolute;
  left: -1.3%;
  top: 2.5%;
  width: 52.5%;
  max-height: 91%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 0;
}

.folder-divider-img {
  position: absolute;
  left: 0;
  width: 53%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.folder-divider-poster-sticker {
  top: 32%;
  z-index: 1;
}

.folder-divider-sticker-postcard {
  top: 42.5%;
  z-index: 3;
}

.folder-divider-top {
  top: 53.5%;
  z-index: 5;
}

.folder-sticker-img {
  position: absolute;
  left: -3.3%;
  top: 20%;
  width: 52.5%;
  max-height: 73%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 2;
}

.folder-postcard-img {
  position: absolute;
  left: 4%;
  top: 52%;
  width: 43.5%;
  max-height: 78%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 4;
}

.folder-poster-img:hover,
.folder-sticker-img:hover,
.folder-postcard-img:hover {
  transform: translateY(var(--folder-item-hover-lift));
}

.folder-pudding-img {
  position: absolute;
  left: 49.2%;
  top: 3%;
  width: 51.5%;
  max-height: 92%;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform var(--folder-item-hover-duration) ease;
  z-index: 6;
}

.folder-pudding-img:hover {
  transform: scale(var(--folder-pudding-hover-scale));
}

/* Notebook 页面：暂时作为占位层 */
#notebook {
  position: fixed;
  inset: 0;
  display: none;
  background: #000000;
  z-index: 55;
}

/* Fold 页面：calendar 横向紧贴，无循环；奇偶交替侧视 */
#fold {
  position: fixed;
  inset: 0;
  z-index: 60;
  --fold-calendar-h: min(44vh, 460px);
  --fold-tilt: 85deg;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
  cursor: ew-resize;
}

#fold.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fold-scroll {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.fold-track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: var(--fold-calendar-h);
  margin: calc(var(--fold-calendar-h) * -0.5) 0 0;
  padding: 0;
  perspective: min(1400px, 120vw);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.fold-calendar-item {
  --fold-face-w: calc(var(--fold-calendar-h) * var(--nw) / var(--nh));
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--fold-face-w);
  margin-left: calc(var(--fold-face-w) * -0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}

.fold-calendar-face {
  position: relative;
  flex: 0 0 auto;
  width: var(--fold-face-w);
  height: 100%;
  transform-origin: center center;
  transform-style: preserve-3d;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
}

/* 奇：正面朝右；偶：正面朝左 */
.fold-calendar-item:nth-child(odd) .fold-calendar-face {
  transform: rotateY(calc(-1 * var(--fold-tilt)));
}

.fold-calendar-item:nth-child(even) .fold-calendar-face {
  transform: rotateY(var(--fold-tilt));
}

.fold-calendar-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 横版竖过来：先竖版再参与侧视 */
.fold-calendar-item--rotated {
  --fold-face-w: calc(var(--fold-calendar-h) * var(--nh) / var(--nw));
  margin-left: calc(var(--fold-face-w) * -0.5);
}

.fold-calendar-item--rotated .fold-calendar-face {
  overflow: hidden;
}

.fold-calendar-item--rotated .fold-calendar-face img {
  position: absolute;
  width: var(--fold-calendar-h);
  height: auto;
  max-width: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  object-fit: unset;
}

/* NDS 页面：叠在模糊 Desktop 之上 */
#nds {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
}

#nds.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nds-stage {
  position: relative;
  display: inline-block;
  line-height: 0;
  --nds-kol-trace-duration: 1.2s;
}

.nds-device-img {
  display: block;
  max-width: min(82vw, 820px);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Screen hit areas: center KOL inside each panel */
.nds-screen {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
  overflow: hidden;
}

/* Measured against NDS.png LCD pixels */
.nds-screen--top {
  left: 22.65%;
  width: 54.45%;
  top: 10.7%;
  height: 31.7%;
}

.nds-screen--bottom {
  left: 27.8%;
  width: 44.9%;
  top: 55.9%;
  height: 31.9%;
}

.nds-screen-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Match bottom screen pink wash sampled from NDS.png */
  background: linear-gradient(
    180deg,
    #fffafc 0%,
    #fff6f9 25%,
    #ffeff5 50%,
    #ffe6ef 75%,
    #ffdeeb 100%
  );
  border-radius: 0.6%;
  pointer-events: none;
}

.nds-screen-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: clamp(0.61rem, 1.76%, 0.94rem);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  /* Large source PNG is downscaled — pixelated makes it muddy; use smooth downscale. */
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

.nds-screen-arrow--left {
  left: 5%;
}

.nds-screen-arrow--right {
  right: 5%;
  /* Keep flip on its own layer to reduce subpixel blur from combined transforms */
  transform: translateY(-50%) scaleX(-1);
  transform-origin: center center;
}

.nds-kol {
  position: relative;
  left: auto;
  top: auto;
  width: 58%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  overflow: visible;
  transform: none;
  z-index: 2;
  pointer-events: auto;
  flex: 0 0 auto;
}

.nds-kol--top {
  width: 45%;
}

.nds-kol--bottom {
  width: 47%;
}

.nds-kol:focus,
.nds-kol:focus-visible {
  outline: none;
}

.nds-kol-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.nds-kol-outline {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  pointer-events: none;
}

.nds-kol-outline path {
  fill: none;
  stroke: #d76e14;
  stroke-width: 2.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.nds-kol:hover:not(.is-tracing) .nds-kol-outline path,
.nds-kol.is-hover-sync:not(.is-tracing) .nds-kol-outline path {
  stroke-dashoffset: 0;
}

.nds-kol.is-tracing .nds-kol-outline path {
  animation: nds-kol-trace var(--nds-kol-trace-duration) cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

@keyframes nds-kol-trace {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Info 页面：叠在模糊 Desktop 之上 */
#info {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
}

#info.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.info-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.info-card-img {
  display: block;
  max-width: min(70vw, 900px);
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* 叠在右侧粉卡 Link 字段上 */
.info-xhs-link {
  position: absolute;
  left: 88.5%;
  top: 73%;
  font-family: 'HarmonyOS_Sans_SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(0.65rem, 1.2vw, 0.95rem);
  font-weight: 700;
  font-style: italic;
  color: #582627;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.2;
}

.info-xhs-label {
  display: inline-block;
  transform: translateY(-0.22em);
}

.info-xhs-arrow {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
}

.info-xhs-arrow::before {
  content: '→';
  display: inline-block;
}

.info-xhs-link:hover .info-xhs-arrow::before {
  animation: info-xhs-arrow-slide 0.45s ease;
}

@keyframes info-xhs-arrow-slide {
  0% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(120%);
  }
  41% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Memo 页面：叠在模糊 Desktop 之上 */
#memo {
  position: fixed;
  inset: 0;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
}

#memo.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#memo-stage {
  width: 100%;
  height: 100%;
  position: relative;
}

.memo-toolbar {
  position: absolute;
  left: 36px;
  bottom: 36px;
  z-index: 4;
  display: flex;
  align-items: center;
}

#memo.is-type-picker-open .memo-toolbar {
  z-index: 6;
}

.memo-edit-btn {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.memo-edit-btn:hover,
.memo-edit-btn:active {
  background: rgba(255, 255, 255, 0.7);
}

.memo-toolbar.is-open .memo-edit-btn,
.memo-toolbar.is-open .memo-edit-btn:hover,
.memo-toolbar.is-open .memo-edit-btn:active {
  background: transparent;
}

.memo-edit-btn-icon {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  opacity: 0.5;
  transition:
    opacity 0.2s ease,
    transform var(--view-transition-duration) ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.memo-edit-btn:hover .memo-edit-btn-icon,
.memo-edit-btn:active .memo-edit-btn-icon {
  opacity: 0.8;
}

.memo-toolbar.is-open .memo-edit-btn-icon {
  opacity: 0.8;
  transform: rotate(45deg);
}

.memo-tool-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    max-width 0.4s ease,
    opacity 0.3s ease,
    margin-left 0.4s ease;
}

.memo-toolbar.is-open .memo-tool-strip {
  max-width: 360px;
  margin-left: 12px;
  opacity: 1;
  pointer-events: auto;
}

.memo-tool-btn {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  transform: translateX(-20px);
  transition:
    background 0.2s ease,
    opacity 0.28s ease,
    transform 0.32s ease;
}

.memo-toolbar.is-open .memo-tool-btn {
  opacity: 1;
  transform: translateX(0);
}

.memo-toolbar.is-open .memo-tool-btn:nth-child(1) { transition-delay: 0.04s; }
.memo-toolbar.is-open .memo-tool-btn:nth-child(2) { transition-delay: 0.08s; }
.memo-toolbar.is-open .memo-tool-btn:nth-child(3) { transition-delay: 0.12s; }
.memo-toolbar.is-open .memo-tool-btn:nth-child(4) { transition-delay: 0.16s; }
.memo-toolbar.is-open .memo-tool-btn:nth-child(5) { transition-delay: 0.2s; }

.memo-tool-btn:hover,
.memo-tool-btn:active,
.memo-tool-btn.is-active {
  background: rgba(255, 255, 255, 0.7);
}

.memo-tool-btn-icon {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.memo-tool-btn-icon-img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.memo-tool-btn:hover .memo-tool-btn-icon-img,
.memo-tool-btn:active .memo-tool-btn-icon-img,
.memo-tool-btn.is-active .memo-tool-btn-icon-img {
  opacity: 0.8;
}

.memo-type-picker {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.memo-type-picker.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#memo.is-type-picker-open #memo-stage {
  visibility: hidden;
}

.memo-type-option {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  outline: 2px solid transparent;
  outline-offset: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    outline-color 0.2s ease;
}

.memo-type-picker.is-open .memo-type-option {
  opacity: 1;
  transform: translateY(0);
}

.memo-type-picker.is-open .memo-type-option:nth-child(1) { transition-delay: 0.08s; }
.memo-type-picker.is-open .memo-type-option:nth-child(2) { transition-delay: 0.18s; }
.memo-type-picker.is-open .memo-type-option:nth-child(3) { transition-delay: 0.28s; }

.memo-type-option img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.memo-type-option-todo img,
.memo-type-option-daily img {
  max-width: 28vw;
  max-height: 55vh;
}

.memo-type-thumb-weekly {
  --memo-type-thumb-w: min(28vw, calc(55vh * 2008 / 3780));
  --memo-type-thumb-h: min(55vh, calc(28vw * 3780 / 2008));
  display: block;
  position: relative;
  width: var(--memo-type-thumb-w);
  height: var(--memo-type-thumb-h);
  flex-shrink: 0;
}

.memo-type-thumb-weekly img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--memo-type-thumb-h);
  height: var(--memo-type-thumb-w);
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.memo-type-option:hover,
.memo-type-option:focus-visible {
  outline-color: rgba(255, 255, 255, 0.55);
}

.memo-type-option.is-current {
  outline-color: rgba(255, 255, 255, 0.9);
}

#memo.memo-input-mode {
  cursor: crosshair;
}

#memo-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#memo-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  transition: transform var(--view-transition-duration) ease;
  will-change: transform;
}

.memo-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.memo-slide-inner {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.memo-slide-inner > img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.memo-slide-weekly .memo-slide-inner > img {
  max-width: 55vw;
  max-height: 55vh;
}

.memo-slide-todo .memo-slide-inner > img,
.memo-slide-daily .memo-slide-inner > img {
  max-width: 80vw;
  max-height: 80vh;
}

.memo-slide-clone {
  pointer-events: none;
}

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

.memo-slide.is-current .memo-annotations {
  pointer-events: auto;
}

#memo.memo-input-mode .memo-slide.is-current .memo-annotations,
#memo.memo-highlight-mode .memo-slide.is-current .memo-annotations {
  cursor: crosshair;
}

.memo-stamp {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--memo-stamp-w, 24px);
  pointer-events: auto;
  cursor: pointer;
}

.memo-stamp.is-selected {
  cursor: move;
  outline: 1px solid #fff;
  outline-offset: 2px;
}

.memo-stamp-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.memo-field {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}

.memo-field.is-selected:not(.is-editing) {
  cursor: move;
}

.memo-field.is-selected:not(.is-editing) .memo-field-input {
  border: 1px solid currentColor;
  padding: 2px 6px;
  border-radius: 0;
  box-sizing: border-box;
}

.memo-field-input {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #606060;
  font-family: 'HarmonyOS_Sans_SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;
  outline: none;
  pointer-events: none;
  cursor: inherit;
  box-sizing: border-box;
}

.memo-field.is-editing .memo-field-input {
  pointer-events: auto;
  cursor: text;
}

/* captcha3 的输入框和 VERIFY 按钮：长方形区域，可用颜色辅助对齐 */
#captcha3-input {
  position: absolute;
  /* 这里的 top/left/width/height 按 captcha3 图中的输入框位置微调 */
  top: 59%;
  left: 13%;
  width: 18%;
  height: 5%;

  background: transparent;
  border: none;
  color: #000000;
  font-size: 14px;
  font-family: 'HarmonyOS_Sans_SC', sans-serif;
  font-style: italic;
  text-align: left;
  padding-left: 8px;
  outline: none;
  --captcha3-input-rotate: -5deg;
  transform-origin: center center;
  transform: rotate(var(--captcha3-input-rotate));
  z-index: 10;
  pointer-events: auto;
  cursor: text;
  caret-color: #000;
  -webkit-user-select: text;
  user-select: text;
}

#captcha3-verify {
  position: absolute;
  /* 这里的 top/left/width/height 按 captcha3 图中的 verify 按钮位置微调 */
  top: 63%;
  left: 24%;
  width: 8%;
  height: 4%;

  background: transparent;
  border: none;
  color: transparent;
  cursor: pointer;
  --captcha3-verify-rotate: -5deg;
  transform-origin: center center;
  transform: rotate(var(--captcha3-verify-rotate));
  z-index: 10;
  pointer-events: auto;
}

/* 四个可选图片的正方形热区：位置/大小请按 captcha 图自行微调 */
.captcha-choice {
  position: absolute;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 3;
}

/* 验证码图片本身：允许单独调整位置/大小，不强制填满热区 */
.captcha-choice img {
  position: absolute;
  display: block;
  object-fit: contain;
  transition: none; /* 禁止平滑动画，避免「先偏移一下再跳回」的感觉 */
}

/* 下面四块是 captcha-img / select 的基础数值，你可以随时在这里微调 */
#captcha-img-1 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#captcha-img-2 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#captcha-img-3 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#captcha-img-4 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ========================
   Select 状态单独位置调整
   ========================
   下面这几块就是「选中后 select 图」的专用位置参数，
   和上面的 #captcha-img-x 是分开的：
   - 想单独移动 select 图，就改这里的 top / left / width / height
   - 不改的话，默认和普通图的位置一样
*/

.captcha-choice.captcha-selected #captcha-img-1 {
  top: -6.8px;
  left: 0px;
  width: 94%;
  height: 100%;
}

.captcha-choice.captcha-selected #captcha-img-2 {
  top: -8.8px;
  left: -5px;
  width: 96%;
  height: 101%;
}

.captcha-choice.captcha-selected #captcha-img-3 {
  top: -8px;
  left: 1px;
  width: 93%;
  height: 101%;
}

.captcha-choice.captcha-selected #captcha-img-4 {
  top: -9px;
  left: -4px;
  width: 96%;
  height: 100%;
}

/* 选中时的高亮效果 */
.captcha-choice.captcha-selected {
  background: transparent;
}

/* 默认给出大致位置（正方形），你可以在这里微调 top/left/width/height */
#captcha-choice-1 {
  top: 35.6%;
  left: 16%;
  width: 33%;
  height: 19%;
}

#captcha-choice-2 {
  top: 35.6%;
  left: 51%;
  width: 33%;
  height: 19%;
}

#captcha-choice-3 {
  top: 55.2%;
  left: 16%;
  width: 33%;
  height: 19%;
}

#captcha-choice-4 {
  top: 55.2%;
  left: 51%;
  width: 33%;
  height: 19%;
}

/* Captcha 参考图覆盖层：方便对齐，点击仍然落在下面的热区上 */
#captcha-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;           /* 透明度可按需要改 */
  pointer-events: none;   /* 不挡住点击 */
  z-index: 5;
}

/* Captcha 按钮：覆盖图片上的长方形点击区，视觉由 captcha 图提供 */
#captcha-ok {
  position: absolute;
  /* 这里的 bottom/left/width/height 请根据 captcha 图上的按钮位置微调 */
  bottom: 18.5%;
  left: 72%;
  transform: translateX(-50%);
  width: 24%;
  height: 5%;

  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
  z-index: 6; /* 高于图片/热区，保证点击和绿色区域可见 */
}

/* 固定尺寸画布：放大缩小窗口都不会改变界面大小，始终固定像素 */
#ipod {
  position: fixed;
  width: 480px;
  height: 840px;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(calc(var(--ipod-scale) * 0.94));
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--view-transition-duration) ease,
    transform var(--view-transition-duration) ease,
    visibility var(--view-transition-duration) ease;
}

#ipod.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(var(--ipod-scale));
}

#ipod-box {
  position: absolute;
  /* 下面这几个值就是 ipodbox 的位置和大小（相对整个 #ipod 画布），你可以自由调整 */
  top: 21%;
  left: 18%;
  width: 64%;
  height: 58%;

  background: transparent;
  pointer-events: none; /* 不挡住下面的轮盘热区和按钮点击 */
  z-index: 11; /* 在 iPod 图片上方，只作为可视参考框 */
}

#ipod img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Song1–Song9 专用 UI：切到对应歌曲时显示，改下面数值即可调整位置和大小 */
/* 用 img#songN-ui 覆盖 #ipod img 的 100% 宽高，否则大小无法更改 */
#ipod img#song1-ui,
#ipod img#song2-ui,
#ipod img#song3-ui,
#ipod img#song4-ui,
#ipod img#song5-ui,
#ipod img#song6-ui,
#ipod img#song7-ui,
#ipod img#song8-ui,
#ipod img#song9-ui {
  position: absolute;
  display: none; /* 默认隐藏，切到对应歌曲时由 JS 显示 */
  top: 15.5%;       /* 垂直位置：改这个值 */
  left: 50%;      /* 水平位置：改这个值 */
  transform: translateX(-50%) scale(var(--song-ui-scale, 1));
  transform-origin: center center;
  width: 95%;      /* 宽度：改这个值（相对 iPod 宽度） */
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
}

/* 每首歌可单独改缩放（不写则用上面默认 1） */
#ipod img#song1-ui { --song-ui-scale: 0.54; }
#ipod img#song2-ui { --song-ui-scale: 0.54; }
#ipod img#song3-ui { --song-ui-scale: 0.54; }
#ipod img#song4-ui { --song-ui-scale: 0.54; }
#ipod img#song5-ui { --song-ui-scale: 0.54; }
#ipod img#song6-ui { --song-ui-scale: 0.54; }
#ipod img#song7-ui { --song-ui-scale: 0.54; }
#ipod img#song8-ui { --song-ui-scale: 0.54; }
#ipod img#song9-ui { --song-ui-scale: 0.54; }

/* 参考图：铺满 iPod 大小，最上层，30% 透明度，不阻挡点击 */
#guide-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

/* 音乐进度条容器：铺满整个 iPod，里面的元素用绝对定位单独控制位置 */
#progress-container {
  position: absolute;
  inset: 0;
  color: #333;
  pointer-events: none;
  z-index: 6;
  font-family: 'HarmonyOS_Sans_SC', sans-serif;
}

#progress-bar {
  position: absolute;
  top: 40.8%;
  left: 50%;
  width: 44.3%;
  transform: translateX(-50%);
  transform-origin: center center;
  pointer-events: auto;
  cursor: pointer;
  line-height: 0;
}

/* 必须压过 #ipod img { width/height:100% }，否则进度条尺寸会塌掉 */
#ipod img#progress-bg-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
}

#progress-fill-clip {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  overflow: hidden;
  pointer-events: none;
  transition: none;
}

#ipod img#progress-fill-img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
}

#progress-current,
#progress-total {
  position: absolute;
  top: 43%;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #555;
  font-family: 'HarmonyOS_Sans_SC', sans-serif;
  white-space: nowrap;
  pointer-events: none;
}

#progress-current {
  left: 33.6%;
  transform: translateX(-100%);
  padding-right: 6px;
}

#progress-total {
  right: 34.6%;
  transform: translateX(100%);
  padding-left: 6px;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.wheel {
  position: absolute;

  /* 圆盘中心在整张图里的位置（百分比） */
  left: 50%;
  top: 62.15%;

  width: 41%;   /* 相对 iPod 画布宽度，与视口无关 */
  aspect-ratio: 1 / 1;

  transform: translate(-50%, -50%);
  border-radius: 50%;   /* 保持尺寸不变，整体改成圆形 */
  overflow: hidden;      /* 把内部矩形热区裁剪成圆形 */
  
  /* 挖空中心，让热区变成环形：改 --center-size 百分比即可调整挖空大小 */
  --center-size: 22%;   /* 中心挖空的大小（相对于圆盘直径的百分比） */
  mask: radial-gradient(circle, transparent var(--center-size), black calc(var(--center-size) + 0.5px));
  -webkit-mask: radial-gradient(circle, transparent var(--center-size), black calc(var(--center-size) + 0.5px));
}

/* 屏蔽圆盘中心：四个三角热区在中心交汇，mask 不拦截点击，需单独遮罩 */
.wheel-center-shield {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--center-size);
  height: var(--center-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: auto;
  z-index: 2;
  cursor: default;
}


.zone {
  position: absolute;
  cursor: pointer;
}

/* X 形四个区域：用三点三角形划分，对角线分割圆盘 */
/* 上：由左上角、中心点、右上角组成的三角形 */
.up {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 50% 50%, 100% 0);
}

/* 下：由左下角、中心点、右下角组成的三角形（用于播放 / 暂停） */
.down {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}

/* 左：由左上角、中心点、左下角组成的三角形（用于上一首） */
.left {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}

/* 右：由右上角、中心点、右下角组成的三角形（用于下一首） */
.right {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}


.zone {
  background: transparent;
}