* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

html, body { width: 100%; height: 100%; margin: 0; }

body { overflow: hidden; background: #fff; }

:root {
  --label-font: Inter, Arial, "Noto Sans SC", sans-serif;
  --preview-image-filter: brightness(.6) saturate(.72);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --workspace-duration: 760ms;
  --fifth-subfolder-duration: 640ms;
  --homepage-enter-duration: 640ms;
  --homepage-enter-stagger: 80ms;
  --homepage-tool-enter-stagger: 50ms;
}

:root.is-preview-shade-off { --preview-image-filter: none; }

/* 加载层不引用任何外部资源，确保 CSS 到达后立即可见；旋转与退场只使用合成属性。 */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  color: #28333b;
  background: #fff;
  opacity: 1;
  transition: opacity 250ms var(--ease-out);
}
.site-loader.is-complete { opacity: 0; pointer-events: none; }
.site-loader[hidden] { display: none; }
.site-loader__content { display: grid; width: min(500px, calc(100vw - 40px)); justify-items: center; opacity: 1; }
.site-loader.is-complete .site-loader__content { opacity: 0; }

/* 两种移动端引导共用同一块 iOS 风格深色磨砂玻璃。白色画布上也保留清晰的透光、高光和亮边。 */
.mobile-coach-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .48);
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .07) 38%, rgba(255, 255, 255, .025) 68%),
    rgba(20, 20, 24, .6);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, .24),
    0 3px 14px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(30px) saturate(1.85) brightness(.94);
  backdrop-filter: blur(30px) saturate(1.85) brightness(.94);
}

.mobile-coach-surface::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .045) 34%, transparent 58%);
  opacity: .72;
  pointer-events: none;
}

.mobile-coach-surface > * {
  position: relative;
  z-index: 1;
}

/* 首次竖屏进入时给出非阻断式横屏建议；只移动提示窗本身，不扰动画布内容。 */
.orientation-coach {
  position: fixed;
  z-index: 190;
  top: max(18px, calc(10px + env(safe-area-inset-top)));
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  padding: 0 18px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -14px, 0) scale(.94);
  transition: opacity 170ms ease-out, transform 280ms var(--ease-drawer);
}
.orientation-coach[hidden] { display: none; }
.orientation-coach.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.orientation-coach__panel {
  width: min(340px, calc(100vw - 36px));
  padding: 19px 20px 16px;
  border-radius: 28px;
  pointer-events: auto;
  text-align: center;
}
.orientation-coach__eyebrow { margin: 0 0 8px; color: rgba(255, 255, 255, .58); font: 600 12px/1 var(--label-font); letter-spacing: .04em; }
.orientation-coach h2 { margin: 0; font: 650 22px/1.16 var(--label-font); letter-spacing: -.025em; }
.orientation-coach__panel > p:not(.orientation-coach__eyebrow) { margin: 9px auto 16px; max-width: 280px; color: rgba(255, 255, 255, .7); font: 450 14px/1.45 var(--label-font); }
.orientation-coach button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  font: 600 14px/1 var(--label-font);
  transition: background 160ms ease, transform 140ms var(--ease-out);
}
.orientation-coach button:active { background: rgba(255, 255, 255, .22); transform: scale(.97); }
.orientation-coach button:focus-visible { outline: 3px solid rgba(10, 132, 255, .72); outline-offset: 3px; }
.orientation-coach.is-visible .orientation-coach__eyebrow,
.orientation-coach.is-visible h2,
.orientation-coach.is-visible #orientationCoachDescription,
.orientation-coach.is-visible button {
  animation: mobile-coach-content-in 420ms var(--ease-drawer) both;
}
.orientation-coach.is-visible h2 { animation-delay: 35ms; }
.orientation-coach.is-visible #orientationCoachDescription { animation-delay: 70ms; }
.orientation-coach.is-visible button { animation-delay: 105ms; }

@media (orientation: landscape), (min-width: 761px) {
  .orientation-coach { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orientation-coach { transform: none; transition: opacity 160ms var(--ease-out); }
  .orientation-coach.is-visible { transform: none; }
}

.site-loader__folders {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.8vw, 12px);
  margin: 0;
  animation: site-loader-folder-breathe 1600ms var(--ease-in-out) 920ms infinite;
  transform-origin: center;
}
.site-loader__folders span {
  display: block;
  width: clamp(48px, 18vw, 84px);
  aspect-ratio: 843.32 / 1188;
  opacity: 0;
  transform: scale(.9);
  transform-origin: center bottom;
  animation: site-loader-folder-pop var(--homepage-enter-duration) var(--ease-out) both;
  animation-play-state: paused;
}
.site-loader.is-folder-media-ready .site-loader__folders > span { animation-play-state: running; }
.site-loader__folders img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(44, 52, 58, .16)); pointer-events: none; }
.site-loader__folder-video { position: relative; isolation: isolate; }
.site-loader__folder-video-fallback { position: relative; z-index: 0; }
.site-loader__folder-video.is-video-ready .site-loader__folder-video-fallback { opacity: 0; }
.site-loader__folder-video-shell { position: absolute; z-index: 1; inset: 0; display: block; overflow: visible; clip-path: url(#fifthFolderVideoClip); }
.site-loader__folder-cover-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.86); transform-origin: center; pointer-events: none; }
.site-loader__folder-video-fallback { transition: opacity 160ms ease; }
.site-loader__folders .site-loader__folder-video-border { position: absolute; z-index: 2; left: -4.7834%; top: -3.4091%; width: 109.5667%; height: 106.8182%; max-width: none; object-fit: fill; filter: none; pointer-events: none; }
.site-loader__folders span:nth-child(2) { animation-delay: 60ms; }
.site-loader__folders span:nth-child(3) { animation-delay: 120ms; }
.site-loader__folders span:nth-child(4) { animation-delay: 180ms; }
.site-loader__folders span:nth-child(5) { animation-delay: 240ms; }
.site-loader.is-dismantling .site-loader__folders { animation: none; }
.site-loader.is-dismantling .site-loader__folders span {
  animation: site-loader-folder-gravity 760ms linear both;
  will-change: transform, opacity;
}
.site-loader.is-dismantling .site-loader__folders span:nth-child(1) { --release-x: -4px; --drift-1-x: -10px; --drift-2-x: -28px; --drift-3-x: -60px; --fall-x: -108px; --release-rotate: -1deg; --rotate-1: -3deg; --rotate-2: -8deg; --rotate-3: -14deg; --fall-rotate: -20deg; animation-delay: 0ms; }
.site-loader.is-dismantling .site-loader__folders span:nth-child(2) { --release-x: -2px; --drift-1-x: -6px; --drift-2-x: -15px; --drift-3-x: -32px; --fall-x: -58px; --release-rotate: 1deg; --rotate-1: 2deg; --rotate-2: 5deg; --rotate-3: 9deg; --fall-rotate: 13deg; animation-delay: 28ms; }
.site-loader.is-dismantling .site-loader__folders span:nth-child(3) { --release-x: -1px; --drift-1-x: -2px; --drift-2-x: -5px; --drift-3-x: -10px; --fall-x: -18px; --release-rotate: -1deg; --rotate-1: -2deg; --rotate-2: -4deg; --rotate-3: -6deg; --fall-rotate: -9deg; animation-delay: 56ms; }
.site-loader.is-dismantling .site-loader__folders span:nth-child(4) { --release-x: 2px; --drift-1-x: 6px; --drift-2-x: 15px; --drift-3-x: 32px; --fall-x: 56px; --release-rotate: 1deg; --rotate-1: 3deg; --rotate-2: 6deg; --rotate-3: 10deg; --fall-rotate: 15deg; animation-delay: 84ms; }
.site-loader.is-dismantling .site-loader__folders span:nth-child(5) { --release-x: 5px; --drift-1-x: 12px; --drift-2-x: 30px; --drift-3-x: 64px; --fall-x: 114px; --release-rotate: 1deg; --rotate-1: 4deg; --rotate-2: 9deg; --rotate-3: 15deg; --fall-rotate: 22deg; animation-delay: 112ms; }
@keyframes site-loader-folder-pop {
  0% { opacity: 0; transform: scale(.9); }
  52% { opacity: 1; transform: scale(1.08); animation-timing-function: var(--ease-in-out); }
  74% { opacity: 1; transform: scale(.97); animation-timing-function: var(--ease-in-out); }
  90% { opacity: 1; transform: scale(1.02); animation-timing-function: var(--ease-out); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes site-loader-folder-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}
@keyframes site-loader-folder-gravity {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  12% { opacity: 1; transform: translate3d(var(--release-x), 0, 0) rotate(var(--release-rotate)) scale(1); }
  28% { opacity: 1; transform: translate3d(var(--drift-1-x), 12px, 0) rotate(var(--rotate-1)) scale(1); }
  45% { opacity: 1; transform: translate3d(var(--drift-2-x), 70px, 0) rotate(var(--rotate-2)) scale(1); }
  64% { opacity: 1; transform: translate3d(var(--drift-3-x), 210px, 0) rotate(var(--rotate-3)) scale(1); }
  82% { opacity: 1; transform: translate3d(var(--fall-x), 480px, 0) rotate(var(--fall-rotate)) scale(1); }
  96% { opacity: 1; transform: translate3d(var(--fall-x), 92vh, 0) rotate(var(--fall-rotate)) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--fall-x), 110vh, 0) rotate(var(--fall-rotate)) scale(1); }
}
@keyframes site-loader-folder-fade {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.97); }
}

.canvas {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #fff;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.canvas.is-dragging { cursor: grabbing; }
.canvas.is-about-motion-locked { cursor: default; }

.canvas.is-about-transition .canvas-toolbar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 540ms cubic-bezier(.22, 1, .36, 1);
}

.canvas.is-focus-active .world,
.canvas.is-focus-active .canvas-toolbar {
  opacity: 1;
  pointer-events: none;
}

/* 右下角控制区属于固定界面，不是画布内容：项目背景接管时先抬到
   world 的景深层上方；卡片放大时再抬过全屏白雾层并保持禁用。 */
.canvas:is(.is-project-context-active, .is-software-context-active, .is-notebook-software-context-active) :is(.canvas-toolbar, .layout-panel, .sticker-library) {
  z-index: 22;
}

.canvas.is-focus-active :is(.canvas-toolbar, .layout-panel, .sticker-library) {
  z-index: 52;
  pointer-events: none;
}

/* 未来作品卡片、图片或标注的世界坐标容器。 */
.world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
  transition: opacity 280ms ease;
}

/* 项目展开时，白雾层位于普通桌面对象之上、当前文件夹之下。
   使用一张大尺寸合成层完成整体景深，避免逐个对象实时模糊。 */
.world::after {
  position: absolute;
  z-index: 900;
  left: -6000px;
  top: -6000px;
  width: 12000px;
  height: 12000px;
  background: rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(2px) saturate(.82);
  backdrop-filter: blur(2px) saturate(.82);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease-out);
}

.canvas.is-project-context-active .world::after,
.canvas.is-software-context-active .world::after,
.canvas.is-notebook-software-context-active .world::after { opacity: 1; }
.canvas.is-article-context-active .world::after {
  opacity: .34;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* 元素先完成离场，白色背景只在末段接管，不能提前把它们盖掉。 */
  transition: opacity 120ms var(--ease-out) 420ms;
}
.folder-group.is-open:not(.is-closing) { z-index: 1001 !important; }
.software-toolbox.is-intro-active { z-index: 1001; }

@media (prefers-reduced-motion: reduce) {
  .world::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition-duration: 160ms;
  }
}

/* 平时联系卡位于桌面对象之上；打开项目后，整个世界内容层升至其上，
   让被点击文件夹与展开卡片自然遮住联系卡，而不是把联系卡隐藏。 */
body:has(.folder-group.is-open, .folder-group.is-folder-dragging) .world,
.canvas.is-project-open .world { z-index: 21; }

.folder-group {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: var(--folder-z, 1);
  transform: translate3d(var(--x), var(--y), 0);
  transform-origin: 120px 170px;
  will-change: transform;
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 420ms ease;
}

/* 画布中的个人说明卡：和文件夹一样属于世界坐标，可被单独拖动。 */
.about-card { position: absolute; left: 0; top: 0; z-index: var(--about-z, 8); width: 240px; height: 430px; transform: translate3d(var(--about-x), var(--about-y), 0); transform-origin: center; transition: transform 240ms var(--ease-out), opacity 180ms ease; }
.about-card.is-dragging { transition: none; }
.about-card.is-hidden { opacity: 0; pointer-events: none; }
.about-card__surface.about-zoom-ghost { position: fixed; z-index: 81; isolation: isolate; pointer-events: none; transform-origin: top left; will-change: transform, clip-path, border-radius, box-shadow; backface-visibility: hidden; background: #fff; }
.about-flight-shell { position: fixed; z-index: 81; pointer-events: none; transform-origin: top left; will-change: transform; backface-visibility: hidden; }
.about-flight-shell > .about-card__surface { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-flight-shadow { position: absolute; z-index: 2; inset: 0 auto auto 0; width: 100%; background: transparent; pointer-events: none; will-change: border-radius; }
.about-card__surface { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 25px; color: #17232c; background: #fff; box-shadow: 0 1px 10px rgba(0, 0, 0, .09), 0 12px 25px rgba(0, 0, 0, .16); cursor: grab; text-align: left; transition: box-shadow 240ms var(--ease-out); }
.about-card__surface:active { cursor: grabbing; }
.about-card.is-dragging .about-card__surface { box-shadow: 0 2px 13px rgba(0, 0, 0, .11), 0 17px 31px rgba(0, 0, 0, .22); }
.about-card__article-image { position: absolute; top: 65px; left: 32px; display: block; width: 800px; height: auto; pointer-events: none; transform: scale(.22); transform-origin: top left; user-select: none; }
.about-card__tag { position: absolute; z-index: 1; top: 11px; left: 11px; padding: 10px 17px; border-radius: 999px; color: rgba(42, 42, 42, .52); background: #f2f2f0; font: 600 15px/1 var(--label-font); }
.about-card__preview { display: none; }
.about-card__preview strong, .about-card__preview b, .about-card__preview p, .about-card__preview em { display: block; }
.about-card__preview strong { margin: 0 0 16px; color: #17232c; font-size: 40px; line-height: 1.1; letter-spacing: -.06em; }
.about-card__preview b { margin: 14px 0 6px; color: #17232c; font-size: 19px; line-height: 1.25; }
.about-card__preview p { margin: 0 0 8px; color: #42505a; font-size: 12px; line-height: 1.55; }
.about-card__preview p strong { display: inline; margin: 0; font-size: inherit; letter-spacing: 0; }
.about-card__preview em { margin: 7px 0 9px; padding: 8px 12px; border-left: 5px solid #e85b25; border-radius: 10px; color: #71554a; background: #fff0eb; font-size: 13px; font-style: normal; line-height: 1.4; }
.about-card:hover { transform: translate3d(var(--about-x), var(--about-y), 0); }
@media (hover: hover) and (pointer: fine) {
  .about-card:hover:not(.is-dragging) .about-card__surface { box-shadow: 0 2px 13px rgba(0, 0, 0, .11), 0 17px 31px rgba(0, 0, 0, .22); }
}

/* 笔记本沿用大文件夹的基础投影、按下缩放和拖动时的拿起状态。 */
.notebook-card { --notebook-layout-x: calc(var(--notebook-x) + var(--notebook-mobile-shift-x, 0px)); position: absolute; left: 0; top: 0; z-index: var(--notebook-z, 7); width: 380px; line-height: 0; cursor: grab; touch-action: none; transform: translate3d(var(--notebook-layout-x), var(--notebook-y), 0) translate3d(0, 0, 0) scale(1); transform-origin: center bottom; transition: transform 160ms var(--ease-out), filter 160ms ease; filter: drop-shadow(0 9px 17px rgba(0, 0, 0, .12)); }
.notebook-card img { display: block; width: 100%; height: auto; pointer-events: none; }
.notebook-card.is-dragging { cursor: grabbing; transition: none; transform: translate3d(var(--notebook-layout-x), var(--notebook-y), 0) translate3d(0, 0, 0) scale(1.015); filter: drop-shadow(0 17px 25px rgba(0, 0, 0, .2)); }
.notebook-card.is-releasing { transition: transform 180ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) { .notebook-card:hover { filter: drop-shadow(0 17px 25px rgba(0, 0, 0, .2)); } }
.notebook-card:active, .notebook-card.is-pressed:not(.is-dragging) { transform: translate3d(var(--notebook-layout-x), var(--notebook-y), 0) translate3d(0, 0, 0) scale(.97); }
/* 放大层回到原位后，笔记本先以完全相同的最终几何承接，避免两层切换闪帧。 */
.notebook-card.is-focus-measuring,
.notebook-card.is-focus-returning,
.notebook-card.is-focus-settling { transition: none; transform: translate3d(var(--notebook-layout-x), var(--notebook-y), 0) translate3d(0, 0, 0) scale(1); filter: drop-shadow(0 9px 17px rgba(0, 0, 0, .12)); }
/* 收回交接时原卡片重新出现在鼠标下方；在鼠标真正移出前，固定普通尺寸，
   避免按下或悬停状态在放大层移除的同一帧重新放大。 */
.notebook-card.is-hover-suppressed:not(.is-dragging),
.notebook-card.is-hover-suppressed:not(.is-dragging):hover,
.notebook-card.is-hover-suppressed:not(.is-dragging):active { transition: none; transform: translate3d(var(--notebook-layout-x), var(--notebook-y), 0) translate3d(0, 0, 0) scale(1); filter: drop-shadow(0 9px 17px rgba(0, 0, 0, .12)); }
.notebook-sticker { position: absolute; z-index: 2; display: block; width: var(--sticker-width); left: calc(var(--sticker-left) + var(--notebook-sticker-x, 0px)); top: calc(var(--sticker-top) + var(--notebook-sticker-y, 0px)); cursor: zoom-in; touch-action: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .16)); transform: rotate(var(--notebook-sticker-rotate, 0deg)) scale(var(--notebook-sticker-scale, 1)); transform-origin: center; transition: transform 160ms var(--ease-out), filter 160ms ease; }
.notebook-sticker__preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: inherit; }
.notebook-sticker img { display: block; width: 100%; height: auto; pointer-events: none; }
.notebook-sticker--movie { --sticker-width: 19%; --sticker-left: 5.1%; --sticker-top: 4.3%; }
.notebook-sticker--minecraft { --sticker-width: 18%; --sticker-left: 21.3%; --sticker-top: 3.2%; }
.notebook-sticker--skyline { --sticker-width: 30%; --sticker-left: 62.5%; --sticker-top: 1.5%; }
.notebook-sticker--badminton { --sticker-width: 18.5%; --sticker-left: 80%; --sticker-top: 22.6%; }
.notebook-sticker--cat { --sticker-width: 35%; --sticker-left: 4%; --sticker-top: 52%; }
.notebook-sticker--f1 { --sticker-width: 34.5%; --sticker-left: 62.3%; --sticker-top: 61.5%; }
.notebook-sticker.is-focus-measuring { transition: none; transform: rotate(var(--notebook-sticker-rotate, 0deg)) scale(var(--notebook-sticker-scale, 1)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .16)); }
.notebook-sticker:focus-visible { outline: 3px solid rgba(0, 122, 255, .58); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .notebook-sticker:hover:not(.is-editing) { filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .24)); transform: rotate(var(--notebook-sticker-rotate, 0deg)) scale(calc(var(--notebook-sticker-scale, 1) * 1.025)); } }
.notebook-sticker.is-dragging, .notebook-sticker.is-adjusting { transition: none; }
.notebook-sticker.is-dragging { cursor: grabbing; filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .24)); }
.notebook-sticker.is-editing { cursor: default; filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .24)); }
.notebook-sticker.is-editing .notebook-sticker__preview { animation: sticker-wiggle 520ms ease-in-out infinite alternate; transform-origin: center; }
.notebook-sticker .sticker-tools { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.notebook-sticker .sticker-tool { position: absolute; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; color: #39342f; background: rgba(255,255,255,.92); box-shadow: 0 5px 10px rgba(30,24,17,.18); cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.96); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), background 160ms ease; font: 700 15px/1 var(--label-font); }
.notebook-sticker .sticker-tool--rotate { right: -20px; top: -8px; }
.notebook-sticker .sticker-tool--shrink { left: -20px; bottom: -8px; }
.notebook-sticker .sticker-tool--move { left: calc(50% - 15px); bottom: -23px; }
.notebook-sticker.is-editing .sticker-tool { opacity: 1; pointer-events: auto; transform: scale(1); }
.notebook-sticker.is-adjusting .sticker-tool { color: #fff; background: #007aff; }
/* 缩略笔记本是一整块拖动热区；贴纸只在放大预览层接管交互。 */
.notebook-card > .notebook-sticker { pointer-events: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) and (max-width: 960px) { .notebook-card { width: 320px; } }
@media (prefers-reduced-motion: reduce) { .notebook-card { transition-property: filter; } .notebook-card:active, .notebook-card.is-pressed:not(.is-dragging), .notebook-card.is-dragging { transform: translate3d(var(--notebook-layout-x), var(--notebook-y), 0); } }

/* “我的周边收藏”：文件夹和贴纸始终属于 world。展开时只有 world 镜头移动，
   原始 SVG 不改父级、不改坐标，也不产生自身 transform。 */
.swag-collection {
  position: absolute;
  left: 0;
  top: 0;
  z-index: var(--swag-z, 7);
  width: 320px;
  height: 280px;
  cursor: grab;
  touch-action: none;
  transform: translate3d(var(--swag-x), var(--swag-y), 0);
  transform-origin: 92.5px 116.5px;
  transition: none;
}
.swag-collection.is-dragging { cursor: grabbing; transition: none; transform: translate3d(var(--swag-x), var(--swag-y), 0) scale(1.015); }
.swag-collection.is-expanded-source {
  z-index: 1001 !important;
  cursor: default;
  pointer-events: auto;
}
.swag-collection.is-expanded-source .swag-collection__sticker { visibility: hidden; }
.swag-collection.is-expanded-source .swag-collection__note {
  transition: none;
  transform: none;
  box-shadow: 0 9px 17px rgba(56, 68, 78, .14);
  filter: drop-shadow(0 12px 18px rgba(38, 49, 58, .11));
}
.swag-collection__stack { position: relative; width: 100%; height: 100%; }
.swag-collection__sticker {
  position: absolute;
  z-index: var(--peek-z, 1);
  left: var(--peek-x, 90px);
  top: var(--peek-y, 20px);
  display: block;
  width: var(--peek-w, 72px);
  height: var(--peek-h, 72px);
  object-fit: contain;
  pointer-events: none;
  transform: rotate(var(--peek-r, 0deg));
  transform-origin: center;
  filter: drop-shadow(0 3px 3px rgba(26, 36, 42, .18));
}
.swag-collection__sticker--light { filter: drop-shadow(0 0 1px rgba(39, 48, 53, .48)) drop-shadow(0 4px 5px rgba(39, 48, 53, .18)); }
.swag-collection__note {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 24px;
  display: block;
  width: 185px;
  height: 185px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: 0 9px 17px rgba(56, 68, 78, .14);
  filter: drop-shadow(0 12px 18px rgba(38, 49, 58, .11));
  cursor: inherit;
  overflow: hidden;
  transition: none;
}
.swag-collection__folder-art { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.swag-collection__title {
  position: absolute;
  z-index: 1;
  left: 13px;
  top: 16px;
  color: #243b59;
  pointer-events: none;
  font: 550 16px/1.2 var(--label-font);
  letter-spacing: -.04em;
  white-space: nowrap;
}
.swag-collection__note:active { transform: none; }
.swag-collection__note:focus-visible { outline: 3px solid rgba(0, 122, 255, .48); outline-offset: 4px; }
.swag-collection.is-restoring-focus .swag-collection__note:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .swag-collection:not(.is-dragging):hover .swag-collection__note { transform: none; box-shadow: 0 9px 17px rgba(56, 68, 78, .14); }
}
/* 收回贴纸层时暂时屏蔽落点 hover；原 SVG 本身始终不参与 FLIP。 */
.swag-collection.is-hover-suppressed .swag-collection__note,
.swag-collection.is-hover-suppressed:hover .swag-collection__note,
.swag-collection.is-hover-suppressed .swag-collection__note:active {
  transition: none;
  transform: none;
  box-shadow: 0 9px 17px rgba(56, 68, 78, .14);
  filter: drop-shadow(0 12px 18px rgba(38, 49, 58, .11));
}
.swag-collection.is-dragging .swag-collection__note { filter: drop-shadow(0 18px 24px rgba(38, 49, 58, .18)); }

.canvas.is-swag-open .world { z-index: 21; }
.swag-collection-stage { position: fixed; z-index: 20; inset: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.swag-collection-stage:focus { outline: none; }
.swag-collection-stage.is-open { visibility: visible; }
.swag-collection-stage.is-closing { visibility: visible; pointer-events: none; }
.swag-collection-stage__backdrop { position: fixed; z-index: 0; inset: 0; border: 0; background: transparent; cursor: default; pointer-events: auto; }
.swag-collection-stage__grid {
  position: relative;
  z-index: 1;
  width: 1000px;
  height: 590px;
  margin: max(46px, calc((100vh - 590px) / 2)) auto 120px;
  pointer-events: none;
  visibility: hidden;
}
.swag-collection__expanded-stickers {
  position: absolute;
  z-index: 50;
  left: 0;
  top: 24px;
  width: 1000px;
  height: 590px;
  pointer-events: none;
}
.swag-stage__item {
  position: absolute;
  left: var(--slot-x, 0px);
  top: var(--slot-y, 0px);
  display: grid;
  width: var(--slot-w, 92px);
  height: var(--slot-h, 92px);
  place-items: center;
  pointer-events: auto;
  transform-origin: center;
  will-change: transform, opacity;
}
/* 隐藏标尺只定义响应式目标位置；真实蓝色 SVG 始终留在原 stack 中。 */
.swag-stage__item--anchor {
  z-index: 2;
  pointer-events: none;
}
.swag-stage__sticker-button:focus-visible { outline: 3px solid rgba(0, 122, 255, .48); outline-offset: 4px; }
.swag-stage__sticker-button {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: help;
  touch-action: none;
  box-sizing: border-box;
}
.swag-stage__sticker-art {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  pointer-events: none;
  transform: rotate(var(--sticker-open-rotate, 0deg)) scale(1);
  transform-origin: center;
  transition: transform 160ms ease, filter 160ms ease;
  filter: drop-shadow(0 3px 3px rgba(26, 36, 42, .18));
}
.swag-collection:is(.is-opening, .is-closing) .swag-stage__sticker-art {
  transition: none;
}
.swag-stage__sticker-art.is-light-sticker { filter: drop-shadow(0 0 1px rgba(39, 48, 53, .48)) drop-shadow(0 4px 5px rgba(39, 48, 53, .18)); }
@media (hover: hover) and (pointer: fine) {
  .swag-collection.is-expanded-source:not(.is-opening):not(.is-closing) .swag-stage__item:not(.is-editing) .swag-stage__sticker-button:hover .swag-stage__sticker-art { transform: rotate(var(--sticker-open-rotate, 0deg)) scale(1.045); filter: drop-shadow(0 9px 11px rgba(28, 36, 42, .22)); }
  .swag-collection.is-expanded-source:not(.is-opening):not(.is-closing) .swag-stage__item:not(.is-editing) .swag-stage__sticker-button:hover .swag-stage__sticker-art.is-light-sticker { filter: drop-shadow(0 0 1px rgba(39, 48, 53, .62)) drop-shadow(0 10px 12px rgba(39, 48, 53, .24)); }
}
.swag-sticker-tooltip {
  position: fixed;
  z-index: 73;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 12px 17px;
  border: 1px solid rgba(76, 76, 72, .09);
  border-radius: 14px;
  color: #353535;
  background: #f7f7f4;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -5px, 0) scale(.97);
  transform-origin: center top;
  transition: transform 125ms var(--ease-out), opacity 125ms var(--ease-out);
  font: 500 15px/1.2 var(--label-font);
  text-align: center;
  white-space: nowrap;
}
.swag-sticker-tooltip.is-visible { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
.canvas.is-swag-open .canvas-toolbar { z-index: 72; pointer-events: none; }
body:has(.swag-collection-stage.is-open) { overflow: hidden; }

@media (max-width: 1060px) {
  .swag-collection-stage__grid { margin: max(46px, calc((100vh - 590px) / 2)) 36px 120px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) and (max-width: 960px) {
  .swag-collection { width: 270px; height: 250px; }
  .swag-collection-stage__grid { margin: max(28px, calc((100vh - 590px) / 2)) 36px 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .swag-collection,
  .swag-collection__note,
  .swag-stage__sticker-art { transition-property: filter, box-shadow; }
  .swag-sticker-tooltip { transform: translate3d(-50%, 0, 0); transition: opacity 120ms var(--ease-out); }
  .swag-sticker-tooltip.is-visible { transform: translate3d(-50%, 0, 0); }
}

/* 两行六列的工具图标；不干预 SVG 内部已有的高光或阴影，只投射整个按钮的外部阴影。 */
.software-toolbox { position: absolute; left: 0; top: 0; z-index: var(--toolbox-z, 8); display: grid; grid-template-columns: repeat(6, 72px); grid-auto-rows: 78px; width: 432px; transform: translate3d(var(--toolbox-x), var(--toolbox-y), 0); cursor: grab; touch-action: none; user-select: none; }
.software-toolbox.is-dragging { cursor: grabbing; }
.software-toolbox.is-intro-active { cursor: default; pointer-events: auto; }
.software-toolbox__button { display: grid; width: 70px; height: 70px; padding: 0; place-items: center; border: 0; border-radius: 19px; background: transparent; cursor: pointer; filter: drop-shadow(0 8px 10px rgba(83, 89, 96, .3)); transform: translate3d(0, 0, 0) scale(1); transition: transform 160ms var(--ease-out), filter 160ms ease; will-change: transform; }
.software-toolbox.is-dragging .software-toolbox__button { transition: none; }
.software-toolbox.is-intro-active .software-toolbox__button.is-selected { filter: drop-shadow(0 12px 16px rgba(60, 68, 76, .38)); }
.software-toolbox__button img { display: block; width: 70px; height: 70px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .software-toolbox__button { transition: filter 160ms ease; } }

/* 应用介绍不是单张模态框：图标组移动到左栏，十二张介绍卡在右栏组成同一条页面流。 */
.software-intro-stage { position: fixed; inset: 0; z-index: 60; overflow: auto; overscroll-behavior: contain; visibility: visible; pointer-events: none; scrollbar-gutter: stable; }
.software-intro-stage.is-open { pointer-events: none; }
.software-intro-stage.is-closing { pointer-events: none; }
.software-intro-stage__backdrop { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; opacity: 0; pointer-events: none; }
.software-intro-close,
.focus-close { display: none; }
.software-intro-stage.is-open .software-intro-stage__backdrop,
.software-intro-stage.is-closing .software-intro-stage__backdrop { opacity: 0; }
.software-intro-layout { position: relative; left: calc((100vw - 100%) / 2); z-index: 1; display: grid; grid-template-columns: 432px minmax(0, 900px); align-items: start; gap: 8px; width: min(1340px, calc(100vw - 64px)); margin: 70px auto 128px; will-change: transform; }
.software-intro-tools { position: sticky; top: 70px; width: 432px; min-height: 156px; }
.software-intro-tools > .software-toolbox.is-intro-active {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
.software-intro-list { display: grid; gap: 18px; min-width: 0; pointer-events: auto; }
.software-intro-item { position: relative; width: 100%; overflow: visible; opacity: 0; transform: none; transform-origin: top left; transition: none; will-change: transform, opacity; }
.software-intro-reveal { position: relative; width: 100%; transform-origin: top left; will-change: transform, opacity; }
.software-intro-stage.is-opening .software-intro-item { transition: none; }
.software-intro-stage.is-open .software-intro-item.is-asset-ready { opacity: 1; }
.software-intro-stage.is-closing .software-intro-item { opacity: 0; transition: none; }
.software-intro-item.is-selected { box-shadow: none; }
.software-intro-item__image { display: block; width: calc(100% * var(--intro-frame-scale, 1)); height: auto; min-height: 0; margin-left: var(--intro-frame-offset, 0%); color: transparent; }
.software-intro-copy { position: absolute; z-index: 1; inset: 0; padding: 4.3% 4.5%; color: #8c8c8c; pointer-events: none; font-family: var(--label-font); }
.software-intro-copy__header { display: flex; align-items: center; gap: clamp(10px, 1vw, 18px); padding-left: 5.5%; }
.software-intro-copy__title { flex: 0 0 auto; margin: 0; color: #111; font: 500 clamp(23px, 2vw, 38px)/1.05 var(--label-font); letter-spacing: -.045em; }
.software-intro-copy__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-left: clamp(6px, .65vw, 13px); }
.software-intro-copy__tags span { padding: .42em .72em; border: 1px solid rgba(61, 180, 124, .28); border-radius: 999px; color: #2b9c68; background: rgba(209, 241, 220, .72); font: 500 clamp(12px, .9vw, 16px)/1 var(--label-font); white-space: nowrap; }
.software-intro-copy__body { margin: 5.8% 0 0; color: #929292; font: 400 clamp(15px, 1.15vw, 20px)/1.8 var(--label-font); letter-spacing: .015em; }
.software-intro-copy__body em { color: #ff735e; font-style: normal; }
.software-toolbox.is-intro-active .software-toolbox__button:focus-visible { outline: 3px solid rgba(0, 122, 255, .5); outline-offset: 4px; }
.software-toolbox.is-intro-active { grid-template-columns: repeat(6, 72px); grid-auto-rows: 78px; width: 432px; }
.software-toolbox.is-intro-active .software-toolbox__button { width: 70px; height: 70px; border-radius: 19px; }
.software-toolbox.is-intro-active .software-toolbox__button { transition: filter 160ms ease; }
.software-toolbox.is-intro-active .software-toolbox__button img { width: 70px; height: 70px; }
@media (max-width: 1120px) {
  .software-intro-layout { grid-template-columns: 432px minmax(440px, 1fr); width: max-content; min-width: calc(100vw - 32px); margin: 48px 16px 112px; }
  .software-intro-tools { top: 48px; }
  .software-intro-list { width: min(620px, calc(100vw - 480px)); min-width: 440px; }
}
@media (max-width: 820px) {
  .software-intro-layout { display: block; width: min(432px, calc(100vw - 40px)); min-width: 0; margin: 28px auto 104px; }
  .software-intro-tools { position: relative; top: auto; margin-bottom: 22px; }
  .software-intro-list { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .software-intro-item { transition: opacity 120ms var(--ease-out) !important; transition-delay: 0ms !important; }
  .software-intro-reveal { transform: none !important; }
  .software-intro-item,
  .software-intro-stage.is-open .software-intro-item,
  .software-intro-stage.is-closing .software-intro-item { transform: none; }
}

.about-stage { position: fixed; z-index: 80; inset: 0; display: block; padding: 84px 24px 120px; overflow: auto; visibility: hidden; pointer-events: none; background: transparent; }
.about-stage.is-open { visibility: visible; pointer-events: auto; }
.about-stage.is-closing { visibility: visible; pointer-events: none; background: transparent; }
.about-stage.is-closing .about-document:not(.is-about-flight) { visibility: hidden; }
.about-stage__backdrop { position: fixed; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #fff; opacity: 0; pointer-events: none; transition: none; }
/* 展开只做状态切换：白幕必须在画布恢复前已经完全铺好，不能淡入。 */
.about-stage.is-open .about-stage__backdrop { opacity: 1; pointer-events: auto; transition: none; }
/* 只有收回阶段让白幕渐隐，露出原画布。 */
.about-stage.is-closing .about-stage__backdrop { opacity: 0; pointer-events: none; transition: opacity var(--about-flight-duration, 420ms) var(--ease-in-out); }
.about-document { position: relative; z-index: 1; width: min(100%, 800px); margin: 0 auto; color: #43515c; background: #fff; user-select: text; -webkit-user-select: text; }
.about-document.is-about-flight { position: fixed; z-index: 1; margin: 0; overflow: hidden; transform-origin: top left; will-change: transform, border-radius, filter; backface-visibility: hidden; }
.about-document--svg { width: min(100%, 780px); }
.about-document--svg > :not(.about-document__close, .about-document__image, .about-document__flight-tag) { display: none; }
.about-document__image { display: block; width: 100%; height: auto; }
/* 履历 SVG 的原始文字单位更密、更大；仅缩小内容画布，不改变卡片外框或飞行机制。 */
#resumeCard .about-card__article-image { width: 624px; }
#resumeStage .about-document--svg { width: min(100%, 608px); }
.about-document__close { position: fixed; z-index: 2; left: 50%; bottom: 26px; display: grid; width: 90px; height: 64px; padding: 0; place-items: center; border: 0; border-radius: 999px; background: #4a4a49; box-shadow: 0 8px 19px rgba(0, 0, 0, .19); cursor: pointer; opacity: 0; transform: translateX(-50%) translateY(calc(100% + 48px)); transition: transform 320ms cubic-bezier(.23, 1, .32, 1), opacity 180ms ease; }
.about-stage.is-open .about-document__close { opacity: 1; transform: translateX(-50%) translateY(0); }
.about-document__close img { display: block; width: 27px; height: 27px; pointer-events: none; }
.about-document__eyebrow { margin: 0 0 14px; color: #e85b25; font: 700 11px/1 var(--label-font); letter-spacing: .16em; }
.about-document h1, .about-document h2 { margin: 0; color: #17232c; font-family: "Noto Serif SC", "Songti SC", STSong, serif; font-weight: 700; letter-spacing: -.05em; }
.about-document h1 { font-size: 52px; line-height: 1.1; }
.about-document h2 { margin-top: 54px; margin-bottom: 19px; font-size: 29px; line-height: 1.25; }
.about-document p, .about-document dd { margin: 0 0 15px; font: 400 16px/1.92 "Noto Serif SC", "Songti SC", STSong, serif; letter-spacing: .01em; }
.about-document__lead { margin-top: 24px !important; color: #24323d; font-size: 19px !important; line-height: 1.7 !important; }
.about-document blockquote { position: relative; margin: 26px 0 22px; padding: 19px 25px; overflow: hidden; border-radius: 13px; color: #59483d; background: #fff1ec; font: 400 17px/1.7 "Noto Serif SC", "Songti SC", STSong, serif; }
.about-document blockquote::before { position: absolute; inset: 0 auto 0 0; width: 5px; background: #e85b25; content: ""; }
.about-document__principles { margin: 0; }
.about-document__principles div { display: grid; grid-template-columns: 9.5em 1fr; gap: 18px; padding: 17px 0; border-top: 1px solid #e8e7e4; }
.about-document__principles div:last-child { border-bottom: 1px solid #e8e7e4; }
.about-document dt { color: #17232c; font: 700 16px/1.92 "Noto Serif SC", "Songti SC", STSong, serif; }
.about-document dd { margin: 0; }
.about-document__closing { margin-top: 25px !important; padding-left: 18px; border-left: 2px solid #e85b25; color: #1f2e39; font-size: 19px !important; line-height: 1.82 !important; }
body:has(.about-stage.is-open) { overflow: hidden; }
@media (max-width: 640px) { .about-card { width: 235px; transform: translate3d(var(--about-x), var(--about-y), 0); } .about-card:hover { transform: translate3d(var(--about-x), var(--about-y), 0); } .about-stage { padding: 58px 24px 110px; } .about-document h1 { font-size: 41px; } .about-document h2 { margin-top: 43px; font-size: 25px; } .about-document p, .about-document dd { font-size: 15px; line-height: 1.84; } .about-document__principles div { grid-template-columns: 1fr; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .about-document__close { transition: opacity 120ms ease; transform: translateX(-50%); } .about-stage.is-open .about-document__close { transform: translateX(-50%); } }


/* 首屏对象按顺序在各自最终位置弹入。
   定位和缩放必须写在同一个 transform 中，并让 translate 位于 scale 前面；
   否则独立 scale 会连世界坐标一起缩小，让对象看起来从画面中心向外飞。 */
.folder-group { --homepage-position: translate3d(var(--x), var(--y), 0); }
.software-toolbox__button { --homepage-position: translate3d(0, 0, 0); }
.notebook-card { --homepage-position: translate3d(var(--notebook-layout-x), var(--notebook-y), 0); }
.swag-collection { --homepage-position: translate3d(var(--swag-x), var(--swag-y), 0); }
.about-card { --homepage-position: translate3d(var(--about-x), var(--about-y), 0); }
.contact-chip__avatar,
.contact-chip__email-group { --homepage-position: translate3d(var(--contact-x), var(--contact-y), 0); }
.canvas-toolbar { --homepage-position: translate3d(0, 0, 0); }

/* 入场只围绕对象自身的视觉中心缩放；动画结束后恢复各组件原有的交互原点。 */
:root:is(.is-loading, .is-entering) .folder-group { transform-origin: 120px 169px; }
:root:is(.is-loading, .is-entering) .notebook-card { transform-origin: center; }
:root:is(.is-loading, .is-entering) .swag-collection { transform-origin: 92.5px 116.5px; }

:root.is-loading :is(.folder-group, .software-toolbox__button, .notebook-card, .swag-collection, .about-card, .contact-chip__avatar, .contact-chip__email-group, .canvas-toolbar) {
  opacity: 0;
  pointer-events: none;
  transform: var(--homepage-position) scale(.22);
}

:root.is-entering :is(.folder-group, .software-toolbox__button, .notebook-card, .swag-collection, .about-card, .contact-chip__avatar, .contact-chip__email-group, .canvas-toolbar) {
  animation: homepage-pop-in var(--homepage-enter-duration) var(--ease-out) both;
  animation-delay: var(--enter-delay, 0ms);
}

:root:is(.is-loading, .is-entering) .software-toolbox { pointer-events: none; }

:root.is-idle :is(.folder-group, .software-toolbox__button, .notebook-card, .swag-collection, .about-card, .contact-chip__avatar, .contact-chip__email-group, .canvas-toolbar) {
  opacity: 1;
}

@keyframes homepage-pop-in {
  0% {
    opacity: 0;
    transform: var(--homepage-position) scale(.22);
    animation-timing-function: var(--ease-out);
  }
  14% {
    opacity: .32;
    transform: var(--homepage-position) scale(.24);
    animation-timing-function: var(--ease-out);
  }
  52% {
    opacity: 1;
    transform: var(--homepage-position) scale(1.07);
    animation-timing-function: var(--ease-in-out);
  }
  72% {
    opacity: 1;
    transform: var(--homepage-position) scale(.965);
    animation-timing-function: var(--ease-in-out);
  }
  88% {
    opacity: 1;
    transform: var(--homepage-position) scale(1.018);
    animation-timing-function: var(--ease-out);
  }
  100% { opacity: 1; transform: var(--homepage-position) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --homepage-enter-duration: 200ms;
    --homepage-enter-stagger: 30ms;
    --homepage-tool-enter-stagger: 30ms;
  }

  .site-loader__folders { animation: none; }
  .site-loader__folders span { transform: scale(1); animation-name: homepage-fade-in; }
  .site-loader__folders span:nth-child(2) { animation-delay: 30ms; }
  .site-loader__folders span:nth-child(3) { animation-delay: 60ms; }
  .site-loader__folders span:nth-child(4) { animation-delay: 90ms; }
  .site-loader__folders span:nth-child(5) { animation-delay: 120ms; }
  .site-loader.is-dismantling .site-loader__folders span { animation: site-loader-folder-fade 200ms var(--ease-out) both; }
  .site-loader.is-dismantling .site-loader__folders span:nth-child(1) { animation-delay: 0ms; }
  .site-loader.is-dismantling .site-loader__folders span:nth-child(2) { animation-delay: 30ms; }
  .site-loader.is-dismantling .site-loader__folders span:nth-child(3) { animation-delay: 60ms; }
  .site-loader.is-dismantling .site-loader__folders span:nth-child(4) { animation-delay: 90ms; }
  .site-loader.is-dismantling .site-loader__folders span:nth-child(5) { animation-delay: 120ms; }
  :root.is-loading :is(.folder-group, .software-toolbox__button, .notebook-card, .about-card, .contact-chip__avatar, .contact-chip__email-group, .canvas-toolbar) {
    transform: var(--homepage-position) scale(1);
  }

  :root.is-entering :is(.folder-group, .software-toolbox__button, .notebook-card, .about-card, .contact-chip__avatar, .contact-chip__email-group, .canvas-toolbar) {
    animation-name: homepage-fade-in;
  }
}

@keyframes homepage-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 每个文件夹组自身是一个独立桌面对象；内部 z-index 不会穿透到其他组。 */
.folder-group.is-folder-dragging {
  transform: translate3d(var(--x), var(--y), 0) scale(1.015);
  transition: none;
}

/* 拖拽结束后只恢复轻微的“拿起”缩放，位置与动态层级均保持不变。 */
.folder-group.is-folder-releasing {
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
}

/* 收回动画结束时，画布与文件夹坐标必须在同一帧复位；禁止父组再生成第二段位移动画。 */
.folder-group.is-position-resetting { transition: none !important; }

.folder-node {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 240px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 9px 17px rgba(0, 0, 0, 0.12));
  transform-origin: center bottom;
  transition: transform 160ms var(--ease-out), filter 160ms ease;
}

.folder-node:focus-visible,
.folder-node.is-moving {
  filter: drop-shadow(0 17px 25px rgba(0, 0, 0, 0.2));
  transform: none;
}

.folder-node:focus-visible { outline: 2px solid #111; outline-offset: 8px; }

@media (hover: hover) and (pointer: fine) {
  .folder-node:hover {
    filter: drop-shadow(0 17px 25px rgba(0, 0, 0, 0.2));
    transform: none;
  }
}

/* 所有文件夹使用脚本同步的按压状态，保证指针捕获与 preventDefault 场景下也有即时反馈。 */
.folder-node:active,
.folder-node.is-pressed:not(.is-moving) { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .folder-node { transition-property: filter; }
  .folder-node:active,
  .folder-node.is-pressed:not(.is-moving) { transform: none; }
}

.folder-node img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* 第五个文件夹使用内联 SVG clipPath 裁切，避免外部遮罩与视频层合成异常。 */
.folder-video-clip-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.folder-node--video {
  aspect-ratio: 843.32 / 1188;
  isolation: isolate;
}

.folder-video-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.folder-video-shell {
  position: absolute;
  z-index: 1;
  inset: 0;
  /* clipPath 已负责最终轮廓裁切；避免再由矩形 overflow 裁出合成层边缝。 */
  overflow: visible;
  clip-path: url(#fifthFolderVideoClip);
}

.folder-cover-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 视频有效画面只占中间约 24% 宽度；放大后左右黑边完全移出可视区域。 */
  /* 额外留出 3% 的安全裁切余量，确保视频源右侧的黑色边缘始终在可视区外。 */
  transform: scale(1.86);
  transform-origin: center;
  pointer-events: none;
}

.folder-video-fallback {
  opacity: 1;
  transition: opacity 220ms ease;
}

.folder-node--video.is-video-ready .folder-video-fallback { opacity: 0; }

/* 第五个文件夹展开后承载横向二级文件夹；后续新增项可沿用同一坐标与状态结构。 */
.fifth-subfolder {
  position: absolute;
  /* 与其他文件夹的内容卡保持相同的展开距离。 */
  left: 360px;
  top: 76px;
  z-index: 3;
  /* 缩至一级文件夹宽度以下，明确作为从属的二级文件夹。 */
  width: 245px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 9px 17px rgba(0, 0, 0, .12));
  transform: translate3d(-172px, 16px, 0) scale(.72);
  transform-origin: left center;
  transition: opacity 160ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1), filter 160ms ease;
}

/* 第二个横向二级文件夹先作为独立入口展示；其项目内容接入后再启用交互。 */
.fifth-subfolder--two { left: 650px; }

.fifth-subfolder img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

.folder-group--fifth.is-open .fifth-subfolder {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(var(--subfolder-drag-x, 0px), var(--subfolder-drag-y, 0px), 0) scale(1);
}

/* 二级文件夹点击后，内容卡从其右侧抽出；未打开时保持目录层级清晰。 */
.folder-group--fifth.is-open:not(.is-subfolder-open) .project-card {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
}

/* 二级预览先抽出，随后才允许内容卡进入。未准备好的卡继续停在文件夹归位点，
   不会在二级文件夹下方直接显现。 */
.folder-group--fifth.is-open.is-subfolder-open:not(.is-subfolder-cards-ready):not(.is-subfolder-closing) .project-card {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
}

.folder-group--fifth.is-open.is-subfolder-open:not(.is-subfolder-cards-ready):not(.is-subfolder-closing) .project-card.is-folder-motion-card,
.folder-group--fifth.is-open.is-subfolder-open.is-subfolder-cards-ready:not(.is-subfolder-closing) .project-card.is-folder-motion-card:not(.is-media-ready) {
  transform: translate3d(var(--closed-x), var(--closed-y), 0) scale(.72) rotate(var(--card-rotate, 0deg));
}

/* 后续卡片不再与预览同帧出现；在首段展开结束后依次淡入。 */
.folder-group--fifth.is-open.is-subfolder-open.is-subfolder-cards-ready:not(.is-subfolder-closing) .project-card.is-static-fade-card {
  transition-delay: var(--fifth-static-delay) !important;
}

@media (hover: hover) and (pointer: fine) {
.folder-group--fifth.is-open .fifth-subfolder:not(.is-dragging):hover {
    filter: drop-shadow(0 17px 25px rgba(0, 0, 0, .2));
  }
}

.folder-group--fifth.is-open .fifth-subfolder.is-pressed:not(.is-dragging) {
  transform: translate3d(var(--subfolder-drag-x, 0px), var(--subfolder-drag-y, 0px), 0) scale(.97);
}

.folder-group--fifth.is-open .fifth-subfolder.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 17px 25px rgba(0, 0, 0, .2));
  transition: none;
}


.folder-group--fifth.is-closing .fifth-subfolder {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-172px, 16px, 0) scale(.72);
}

/* 第五组的预览卡属于横向二级文件夹，而非外层文件夹。
   关闭态先作为两张叠放的目录预览出现；仅点击二级文件夹后才展开为内容卡。 */
.folder-group--fifth .fifth-subfolder-preview {
  position: absolute;
  left: var(--fifth-preview-close-x);
  top: var(--fifth-preview-close-y);
  z-index: 0;
  overflow: hidden;
  border: 5px solid #fff;
  border-left: 0;
  border-radius: 0 23px 23px 0;
  background: transparent;
  box-shadow: 5px 8px 16px rgba(0, 0, 0, .13);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: left center;
  transition: opacity 160ms ease, left var(--fifth-subfolder-duration) var(--ease-out), top var(--fifth-subfolder-duration) var(--ease-out), width var(--fifth-subfolder-duration) var(--ease-out), height var(--fifth-subfolder-duration) var(--ease-out), transform var(--fifth-subfolder-duration) var(--ease-out), border-width 200ms ease, border-radius 260ms ease, box-shadow 200ms ease, filter 200ms ease;
}

/* 第五组沿用完整项目 SVG 作预览；其内容重心偏左，不能使用一级预览的通用裁切。
   单独右移画面，让文件夹右侧露出的窄预览区域保留有效内容而非画布白边。 */
.folder-group--fifth .fifth-subfolder-preview--one { z-index: 2; --preview-crop-shift: 56px; }
.folder-group--fifth .fifth-subfolder-preview--two { z-index: 1; --preview-crop-shift: 48px; }
.folder-group--fifth .fifth-subfolder-preview { --fifth-preview-scale: 1.18; }

.fifth-subfolder-preview img {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 540px;
  height: auto;
  max-width: none;
  object-fit: cover;
  border-radius: 23px;
  filter: var(--preview-image-filter);
  transform: translate3d(var(--preview-crop-shift, 0px), 0, 0) scale(var(--fifth-preview-scale));
  transform-origin: right center;
  transition: transform var(--fifth-subfolder-duration) var(--ease-out), filter 190ms var(--ease-out), opacity 220ms ease;
}

.fifth-subfolder-preview p {
  position: absolute;
  /* 对齐圆角图片的视觉左边缘；不影响标题与图片底边的垂直间距。 */
  left: 7px;
  bottom: -52px;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
  color: #1b1b1b;
  font: 500 18px/1.2 var(--label-font);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 250ms cubic-bezier(.22, 1, .36, 1);
  white-space: nowrap;
}

/* 外层文件夹展开时，先让两个二级文件夹完成出场，再显示各自叠放在右侧的预览。
   不能在 is-open 首帧直接显示，否则预览会抢在二级文件夹前面出现。 */
.folder-group--fifth.is-open:not(.is-subfolder-open):not(.is-subfolder-opening):not(.is-subfolder-closing):not(.is-closing) .fifth-subfolder-preview {
  opacity: 1;
  visibility: visible;
  left: var(--fifth-preview-close-x);
  top: var(--fifth-preview-close-y);
  width: var(--fifth-preview-close-width);
  height: var(--fifth-preview-close-height);
  overflow: hidden;
  border: 5px solid #fff;
  border-left: 0;
  border-radius: 0 23px 23px 0;
  box-shadow: 5px 8px 16px rgba(0, 0, 0, .13);
  filter: none;
  transform: rotate(var(--fifth-preview-close-rotate));
  transition-delay: 360ms;
}

.folder-group--fifth.is-subfolder-opening[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"],
.folder-group--fifth.is-subfolder-opening[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] {
  opacity: 1;
  visibility: visible;
  left: var(--open-x);
  top: var(--open-y);
  width: 540px;
  height: var(--open-height);
  /* 保持裁切直到抽出位移结束，避免完整卡片在目录后方提前露出。 */
  overflow: hidden;
  border-width: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1));
  pointer-events: auto;
  transform: rotate(var(--open-rotate, 0deg));
}

.folder-group--fifth.is-subfolder-open:not(.is-subfolder-opening):not(.is-subfolder-closing)[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"],
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-opening):not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] {
  opacity: 1;
  visibility: visible;
  left: var(--open-x);
  top: var(--open-y);
  width: 540px;
  height: var(--open-height);
  overflow: visible;
  border-width: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1));
  pointer-events: auto;
  transform: rotate(var(--open-rotate, 0deg));
}

/* 前两张共享预览卡抽出时，白色目录边框必须在首帧移除；
   只保留空间位移与尺寸变化，避免边框被放大成白框。 */
.folder-group--fifth.is-subfolder-opening[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"],
.folder-group--fifth.is-subfolder-opening[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] {
  transition: left var(--fifth-subfolder-duration) var(--ease-out), top var(--fifth-subfolder-duration) var(--ease-out), width var(--fifth-subfolder-duration) var(--ease-out), height var(--fifth-subfolder-duration) var(--ease-out), transform var(--fifth-subfolder-duration) var(--ease-out), box-shadow 200ms ease, filter 200ms ease;
}

.folder-group--fifth.is-subfolder-opening[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"] img,
.folder-group--fifth.is-subfolder-opening[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] img,
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"] img,
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] img {
  filter: none;
  transform: translate3d(0, 0, 0);
}

/* 第二个二级文件夹的卡片 2 画面比卡片 1 矮；只下移图片使视觉底边对齐，
   预览容器与小标题仍留在原来的网格位置。 */
.folder-group--fifth.is-subfolder-opening[data-active-subfolder="two"] .fifth-subfolder-preview--two[data-subfolder="two"] img,
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder-preview--two[data-subfolder="two"] img {
  transform: translate3d(0, 31.5px, 0);
}

.folder-group--fifth.is-subfolder-opening[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"] p,
.folder-group--fifth.is-subfolder-opening[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] p,
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"] p,
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms;
}

/* 未激活组只隐藏内容卡；它的两张小预览继续留在对应二级文件夹右侧。 */
.folder-group--fifth[data-active-subfolder="one"] .project-card[data-subfolder="two"],
.folder-group--fifth[data-active-subfolder="two"] .project-card[data-subfolder="one"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.folder-group--fifth[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="two"],
.folder-group--fifth[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="one"] {
  opacity: 1;
  visibility: visible;
  left: var(--fifth-preview-close-x);
  top: var(--fifth-preview-close-y);
  width: var(--fifth-preview-close-width);
  height: var(--fifth-preview-close-height);
  overflow: hidden;
  border: 5px solid #fff;
  border-left: 0;
  border-radius: 0 23px 23px 0;
  box-shadow: 5px 8px 16px rgba(0, 0, 0, .13);
  filter: none;
  pointer-events: none;
  transform: rotate(var(--fifth-preview-close-rotate));
  transition-delay: 0ms;
}

/* 二级项目打开时，仅让另一个二级文件夹及其两张小预览成为背景。
   位移沿用一级项目的径向退让算法，白雾感则在局部元素上完成，避免影响画布其余对象。 */
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="one"] .fifth-subfolder[data-subfolder="two"],
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="two"],
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder[data-subfolder="one"],
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="one"] {
  translate: var(--fifth-subfolder-context-x, 0px) var(--fifth-subfolder-context-y, 0px);
  filter: blur(2px) saturate(.82);
  pointer-events: none;
  transition: translate var(--fifth-subfolder-duration) var(--ease-in-out), opacity var(--fifth-subfolder-duration) var(--ease-in-out), filter var(--fifth-subfolder-duration) var(--ease-in-out);
}

/* 背景文件夹必须保持实体不透明，避免其后的预览内容穿透封面；
   只有背景小预览继续降低透明度来维持景深。 */
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="one"] .fifth-subfolder[data-subfolder="two"],
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder[data-subfolder="one"] {
  opacity: 1;
}

.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="two"],
.folder-group--fifth.is-subfolder-open:not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="one"] {
  opacity: .68;
}

/* 当前二级项目的普通内容卡位于最前；两张共享预览在展开与收回全程
   保持在对应文件夹背后，避免进入目录范围时盖住封面并在结束帧闪层。 */
.folder-group--fifth[data-active-subfolder="one"] .project-card[data-subfolder="one"],
.folder-group--fifth[data-active-subfolder="two"] .project-card[data-subfolder="two"] { z-index: 7; }

.folder-group--fifth[data-active-subfolder="one"] .fifth-subfolder-preview--one[data-subfolder="one"],
.folder-group--fifth[data-active-subfolder="two"] .fifth-subfolder-preview--one[data-subfolder="two"] { z-index: 5; }

.folder-group--fifth[data-active-subfolder="one"] .fifth-subfolder-preview--two[data-subfolder="one"],
.folder-group--fifth[data-active-subfolder="two"] .fifth-subfolder-preview--two[data-subfolder="two"] { z-index: 4; }

.folder-group--fifth[data-active-subfolder="one"] .fifth-subfolder[data-subfolder="one"],
.folder-group--fifth[data-active-subfolder="two"] .fifth-subfolder[data-subfolder="two"] { z-index: 6; }

.folder-group--fifth[data-active-subfolder="one"] .fifth-subfolder[data-subfolder="two"],
.folder-group--fifth[data-active-subfolder="two"] .fifth-subfolder[data-subfolder="one"] { z-index: 3; }

.folder-group--fifth[data-active-subfolder="one"] .fifth-subfolder-preview--one[data-subfolder="two"],
.folder-group--fifth[data-active-subfolder="two"] .fifth-subfolder-preview--one[data-subfolder="one"] { z-index: 2; }

.folder-group--fifth[data-active-subfolder="one"] .fifth-subfolder-preview--two[data-subfolder="two"],
.folder-group--fifth[data-active-subfolder="two"] .fifth-subfolder-preview--two[data-subfolder="one"] { z-index: 1; }

/* 收回时背景元素与内容卡同一时刻返程，并在动画结束前恢复清晰。 */
.folder-group--fifth.is-subfolder-closing[data-active-subfolder="one"] .fifth-subfolder[data-subfolder="two"],
.folder-group--fifth.is-subfolder-closing[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="two"],
.folder-group--fifth.is-subfolder-closing[data-active-subfolder="two"] .fifth-subfolder[data-subfolder="one"],
.folder-group--fifth.is-subfolder-closing[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="one"] {
  translate: 0 0;
  opacity: 1;
  filter: none;
  transition: translate 640ms var(--ease-out), opacity 640ms var(--ease-out), filter 640ms var(--ease-out);
}

.folder-group--fifth.is-open.is-subfolder-opening .project-card,
.folder-group--fifth.is-open.is-subfolder-closing .project-card { pointer-events: none; }

.folder-group--fifth.is-open.is-subfolder-opening .project-card:not(.is-static-fade-card),
.folder-group--fifth.is-open.is-subfolder-closing .project-card:not(.is-static-fade-card) {
  filter: none;
  will-change: transform, opacity;
}

/* 二级收回沿用外层的倒序节奏，但终点由脚本同步到二级文件夹当前拖动位置。 */
.folder-group--fifth.is-open.is-subfolder-closing .project-card { transition-delay: var(--close-delay) !important; }

.folder-group--fifth.is-open.is-subfolder-closing .project-card.is-folder-motion-card {
  opacity: 0;
  transform: translate3d(var(--closed-x), var(--closed-y), 0) scale(.72) rotate(var(--card-rotate, 0deg));
}

.folder-group--fifth.is-open.is-subfolder-closing .project-card.is-static-fade-card {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--card-rotate, 0deg));
}

.folder-group--fifth.is-open.is-subfolder-closing[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"],
.folder-group--fifth.is-open.is-subfolder-closing[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] {
  opacity: 1;
  visibility: visible;
  left: var(--fifth-preview-close-x);
  top: var(--fifth-preview-close-y);
  width: var(--fifth-preview-close-width);
  height: var(--fifth-preview-close-height);
  overflow: hidden;
  border: 5px solid #fff;
  border-left: 0;
  border-radius: 0 23px 23px 0;
  box-shadow: 5px 8px 16px rgba(0, 0, 0, .13);
  filter: none;
  pointer-events: none;
  transform: rotate(var(--fifth-preview-close-rotate));
  transition-delay: var(--preview-close-delay) !important;
}

.folder-group--fifth.is-open.is-subfolder-closing[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"] img,
.folder-group--fifth.is-open.is-subfolder-closing[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] img {
  filter: var(--preview-image-filter);
  transform: translate3d(var(--preview-crop-shift, 0px), 0, 0) scale(var(--fifth-preview-scale));
  transition-delay: var(--preview-close-delay) !important;
}

/* 二级目录单独收回时，两张共享预览必须同帧归位；
   延迟会让卡片暂时脱离目录本体，造成穿帮。 */
.folder-group--fifth.is-open.is-subfolder-closing .fifth-subfolder-preview--two { --preview-close-delay: 0ms; }
.folder-group--fifth.is-open.is-subfolder-closing .fifth-subfolder-preview--one { --preview-close-delay: 0ms; }
.folder-group--fifth.is-open.is-subfolder-closing[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"] p,
.folder-group--fifth.is-open.is-subfolder-closing[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] p {
  opacity: 0;
  transform: translateY(-8px);
  transition-delay: var(--preview-close-delay) !important;
}

/* 拖动二级文件夹时，预览卡的归位坐标会实时变化；取消位置过渡后可与本体同步，
   既不滞后形成残影，也保留文件夹后的预览层级。 */
.folder-group--fifth.is-subfolder-dragging .fifth-subfolder-preview {
  transition: none;
}

/* 外层文件夹收回时，二级预览不能继续套用一级预览的收回规则；
   与二级文件夹本体同时退出，避免外层动画末帧突然闪断。 */
.folder-group--fifth.is-open.is-closing .fifth-subfolder-preview {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out) !important;
}

/* 二级目录沿用一级文件夹的预览反馈：悬停目录时，两张收起预览分别
   向外轻移；展开后的共享预览则沿用完整卡片的上浮与阴影。 */
@media (hover: hover) and (pointer: fine) {
  .folder-group--fifth.is-open:not(.is-opening):not(.is-subfolder-open):not(.is-subfolder-opening):not(.is-subfolder-closing):not(.is-closing) .fifth-subfolder-preview {
    transition: transform 160ms var(--ease-out);
    transition-delay: 0ms;
  }

  .folder-group--fifth.is-open:not(.is-subfolder-open):not(.is-subfolder-opening):not(.is-subfolder-closing):not(.is-closing):has(.fifth-subfolder[data-subfolder="one"]:hover) .fifth-subfolder-preview--one[data-subfolder="one"],
  .folder-group--fifth.is-open:not(.is-subfolder-open):not(.is-subfolder-opening):not(.is-subfolder-closing):not(.is-closing):has(.fifth-subfolder[data-subfolder="two"]:hover) .fifth-subfolder-preview--one[data-subfolder="two"] {
    transform: translate3d(7px, -2px, 0) rotate(var(--fifth-preview-close-rotate));
  }

  .folder-group--fifth.is-open:not(.is-subfolder-open):not(.is-subfolder-opening):not(.is-subfolder-closing):not(.is-closing):has(.fifth-subfolder[data-subfolder="one"]:hover) .fifth-subfolder-preview--two[data-subfolder="one"],
  .folder-group--fifth.is-open:not(.is-subfolder-open):not(.is-subfolder-opening):not(.is-subfolder-closing):not(.is-closing):has(.fifth-subfolder[data-subfolder="two"]:hover) .fifth-subfolder-preview--two[data-subfolder="two"] {
    transform: translate3d(13px, 2px, 0) rotate(var(--fifth-preview-close-rotate));
  }

  .folder-group--fifth.is-subfolder-open:not(.is-subfolder-opening):not(.is-subfolder-closing)[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"],
  .folder-group--fifth.is-subfolder-open:not(.is-subfolder-opening):not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"] {
    transition: transform 160ms var(--ease-out), filter 160ms ease;
  }

  .folder-group--fifth.is-subfolder-open:not(.is-subfolder-opening):not(.is-subfolder-closing)[data-active-subfolder="one"] .fifth-subfolder-preview[data-subfolder="one"]:hover,
  .folder-group--fifth.is-subfolder-open:not(.is-subfolder-opening):not(.is-subfolder-closing)[data-active-subfolder="two"] .fifth-subfolder-preview[data-subfolder="two"]:hover {
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .16));
    transform: translateY(-7px) scale(1.012) rotate(var(--open-rotate, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fifth-subfolder { transition-property: opacity, filter; }
  .folder-group--fifth.is-open .fifth-subfolder.is-pressed:not(.is-dragging) { transform: translate3d(var(--subfolder-drag-x, 0px), var(--subfolder-drag-y, 0px), 0); }
  .folder-group--fifth .fifth-subfolder-preview { transition-property: opacity, filter; }
}

/* “只有边框”源 SVG 的画板为 924 × 1269，轮廓本体向内偏移 40.34 × 40.5。
   以下换算让轮廓本体与第五个视频文件夹的 843.32 × 1188 外形严格重合。 */
.folder-node--video .fifth-folder-border {
  position: absolute;
  z-index: 3;
  left: -4.7834%;
  top: -3.4091%;
  width: 109.5667%;
  height: 106.8182%;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* 视频封面的唯一边缘光，采用“第五个文件夹 只有边框.svg”的原始轮廓数据，
   并与视频裁切共用 843.32 × 1188 坐标系，避免外部 SVG 的画板比例造成双层错位。 */
.folder-video-highlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .42));
}

.folder-video-highlight-soft {
  fill: none;
  stroke: rgba(255, 255, 255, .26);
  stroke-width: 12;
}

.folder-video-highlight-line {
  fill: none;
  stroke: rgba(255, 255, 255, .78);
  stroke-width: 3;
}

/* 未完成 decode 的图片保持透明；资源就绪后用短淡入替代白色闪烁。 */
.folder-node img,
.folder-preview img,
.project-card img {
  opacity: 1;
  transition: opacity 220ms ease;
}

img.is-image-pending { opacity: 0; }

.project-card {
  --project-card-radius: 23px;
  position: absolute;
  left: var(--card-x);
  top: var(--card-y);
  z-index: 1;
  width: 540px;
  margin: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1));
  transform: translate3d(var(--closed-x), var(--closed-y), 0) scale(.72) rotate(var(--card-rotate, 0deg));
  transform-origin: left center;
  transition: opacity 140ms ease var(--delay), transform 360ms cubic-bezier(.22, 1, .36, 1) var(--delay), filter 160ms ease;
}

.project-card img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  border-radius: var(--project-card-radius);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* 第四组图片按需加载前仍保留版式，避免图片到达时引起卡片跳动。 */
.folder-group--oasis .project-card img { aspect-ratio: 5417 / 3365; object-fit: cover; }

/* 自净系统保留完整纵向版式，不跟随效果图的统一横向裁切比例。 */
.folder-group--oasis .project-card--natural-height img { aspect-ratio: auto; object-fit: contain; }

.project-card p {
  display: inline-block;
  margin: 7px 0 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
  color: #1b1b1b;
  font: 500 18px/1.2 var(--label-font);
  white-space: nowrap;
}

/* 第五文件夹的后续二级内容卡与前两张共享预览使用同一视觉左边缘。 */
.folder-group--fifth .project-card p { margin-left: 7px; }

.project-card--flip p span {
  display: block;
  margin-top: 4px;
  font-size: .68em;
  font-weight: 500;
  opacity: .72;
}

/* 双面卡片始终给出静态可见提示；不依赖 hover，触屏设备同样可发现。 */
.project-card--flip::after {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  color: #fff;
  background: rgba(29, 29, 31, .68);
  box-shadow: 0 4px 13px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  content: "↻  双面";
  font: 600 13px/1 var(--label-font);
  letter-spacing: .02em;
  pointer-events: none;
  white-space: nowrap;
}

/* 关闭时只露出两条很窄的文件夹预览边，尺寸参考目标站的叠放比例。 */
.folder-preview {
  position: absolute;
  overflow: hidden;
  border: 5px solid #fff;
  border-left: 0;
  border-radius: 0 23px 23px 0;
  background: transparent;
  box-shadow: 5px 8px 16px rgba(0, 0, 0, .13);
  opacity: 1;
  pointer-events: none;
  transform-origin: left center;
  transition: left 360ms cubic-bezier(.22, 1, .36, 1), top 360ms cubic-bezier(.22, 1, .36, 1), width 360ms cubic-bezier(.22, 1, .36, 1), height 360ms cubic-bezier(.22, 1, .36, 1), transform 360ms cubic-bezier(.22, 1, .36, 1), border-width 200ms ease, border-radius 260ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.folder-preview img {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 540px;
  height: auto;
  max-width: none;
  object-fit: cover;
  background: transparent;
  filter: var(--preview-image-filter);
  transform: translate3d(var(--preview-crop-shift, 0px), 0, 0);
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1), filter 190ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease;
}

/* 展开后的前两张预览与普通项目卡使用同一圆角，聚焦 FLIP 才能无缝衔接。 */
.folder-group.is-open .folder-preview img {
  border-radius: 23px;
  clip-path: inset(0 round 23px);
}

:root.is-preview-shade-off .folder-preview img { filter: none; }

.folder-preview p {
  position: absolute;
  left: 0;
  bottom: -52px;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .08);
  color: #1b1b1b;
  font: 500 18px/1.2 var(--label-font);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 250ms cubic-bezier(.22, 1, .36, 1);
  white-space: nowrap;
}

.preview-one {
  /* 预留足够长的左侧底板藏在文件夹下方，滑出时不会先露出卡片边缘。 */
  left: 112px;
  top: 31px;
  z-index: 2;
  width: 136px;
  height: 261px;
  transform: translate3d(0, 0, 0) rotate(5deg);
  transform-origin: left 58%;
  --preview-crop-shift: 24px;
}

.preview-two {
  left: 121px;
  top: 61px;
  z-index: 1;
  width: 149px;
  height: 234px;
  transform: translate3d(0, 0, 0) rotate(-2.5deg);
  transform-origin: left 48%;
  --preview-crop-shift: 18px;
}

.folder-group:not(.is-open):hover .preview-one { transform: translate3d(7px, -2px, 0) rotate(5deg); }
.folder-group:not(.is-open):hover .preview-two { transform: translate3d(13px, 2px, 0) rotate(-2.5deg); }

.folder-group.is-open .folder-preview {
  left: var(--open-x);
  top: var(--open-y);
  width: 540px;
  height: var(--open-height);
  overflow: visible;
  background: transparent;
  border-width: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1));
  pointer-events: auto;
  transform: rotate(var(--open-rotate, 0deg));
}

.folder-group.is-open .folder-preview img {
  filter: none;
  transform: translate3d(0, 0, 0);
}

/* 第一个文件夹与“生活网络”的两张预览缩略图源文件圆角不足。
   展开时预览容器必须保持 overflow: visible 才能显示下方标题，
   因此直接裁切图片本身，统一四个边角且不影响标题。 */
.folder-group--bond.is-open .folder-preview img,
.folder-group--community.is-open .folder-preview img {
  border-radius: 23px;
  clip-path: inset(0 round 23px);
}

.folder-group.is-open .folder-preview p { opacity: 1; transform: translateY(0); transition-delay: 150ms; }

.project-card.is-shared { display: none; }

.folder-group.is-open .project-card {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0) scale(1) rotate(var(--card-rotate, 0deg));
}

/* 第 2 至 5 组的卡片仅在资源就绪后显示，避免空白卡片和集中解码。 */
.folder-group--bridge.is-open .project-card:not(.is-media-ready),
.folder-group--community.is-open .project-card:not(.is-media-ready),
.folder-group--oasis.is-open .project-card:not(.is-media-ready),
.folder-group--fifth.is-open .project-card:not(.is-media-ready) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 展开中的卡片尚未到位时，不能让静止鼠标提前触发 hover 并抢占 transform。
   同时保持预览图裁切：图片本身宽度已是展开后的 540px，若过早允许溢出，
   会在文件夹下方完整露出。 */
.folder-group.is-opening .folder-preview,
.folder-group.is-opening .project-card { pointer-events: none; }

.folder-group.is-opening .folder-preview { overflow: hidden; }

/* 抽出和收回时不再为大量卡片实时栅格化阴影；仅保留位移与透明度，
   降低首次打开及文件夹切换时的 GPU 合成压力。 */
.folder-group.is-opening .folder-preview,
.folder-group.is-closing .folder-preview,
.folder-group.is-opening .project-card:not(.is-static-fade-card),
.folder-group.is-closing .project-card:not(.is-static-fade-card) {
  filter: none;
  will-change: transform, opacity;
}

.folder-group.is-opening .folder-preview:hover {
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1));
  transform: rotate(var(--open-rotate, 0deg));
}

.folder-group.is-opening .project-card:not(.is-shared):hover {
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1));
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--card-rotate, 0deg));
}

/* 第七张及以后从一开始就在最终位置，只做淡入淡出；前六张才执行
   从文件夹下方抽出与收回的位移、投影动画。 */
.folder-group--bridge.is-opening .project-card.is-static-fade-card,
.folder-group--community.is-opening .project-card.is-static-fade-card,
.folder-group--oasis.is-opening .project-card.is-static-fade-card,
.folder-group--fifth.is-opening .project-card.is-static-fade-card,
.folder-group--bridge.is-open.is-closing .project-card.is-static-fade-card,
.folder-group--community.is-open.is-closing .project-card.is-static-fade-card,
.folder-group--oasis.is-open.is-closing .project-card.is-static-fade-card,
.folder-group--fifth.is-open.is-closing .project-card.is-static-fade-card {
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--card-rotate, 0deg));
  filter: none;
}

/* 收回采用倒序：最末张最先入夹，前两张共享预览卡片最后归位。 */
.folder-group.is-closing .project-card {
  transition-delay: var(--close-delay) !important;
}

/* 保持 is-open 的展开坐标系，只让每张卡片自行向关闭态收拢。 */
.folder-group.is-open.is-closing .project-card {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--closed-x), var(--closed-y), 0) scale(.72) rotate(var(--card-rotate, 0deg));
}

.folder-group.is-closing .project-card:nth-of-type(8) { --close-delay: 0ms; }
.folder-group.is-closing .project-card:nth-of-type(7) { --close-delay: 50ms; }
.folder-group.is-closing .project-card:nth-of-type(6) { --close-delay: 100ms; }
.folder-group.is-closing .project-card:nth-of-type(5) { --close-delay: 150ms; }

.folder-group.is-closing .folder-preview {
  /* 关闭态就是最终预览态：卡片归位时白边、圆角、阴影也已同步完成，
     清理 is-open / is-closing 时便不会再触发第二段视觉变化。 */
  overflow: hidden;
  background: transparent;
  border: 5px solid #fff;
  border-left: 0;
  border-radius: 0 23px 23px 0;
  box-shadow: 5px 8px 16px rgba(0, 0, 0, .13);
  transition-delay: var(--preview-close-delay) !important;
}

.folder-group.is-closing .folder-preview img {
  filter: var(--preview-image-filter);
  transform: translate3d(var(--preview-crop-shift, 0px), 0, 0);
  transition-delay: var(--preview-close-delay) !important;
}

/* 第 6 → 3 张先依次收回；第 2、1 张共享预览卡最后归位。 */
.folder-group.is-closing .preview-two { --preview-close-delay: 200ms; }
.folder-group.is-closing .preview-one { --preview-close-delay: 250ms; }
.folder-group.is-closing .folder-preview p {
  transition-delay: var(--preview-close-delay) !important;
}

/* 前两张共享预览卡片最后才收回。收缩前一直沿用展开态的透明 SVG 外观。 */
.folder-group.is-open.is-closing .preview-one {
  left: 112px;
  top: 31px;
  width: 136px;
  height: 261px;
  pointer-events: none;
  transform: translate3d(0, 0, 0) rotate(5deg);
}

.folder-group.is-open.is-closing .preview-two {
  left: 121px;
  top: 61px;
  width: 149px;
  height: 234px;
  pointer-events: none;
  transform: translate3d(0, 0, 0) rotate(-2.5deg);
}

.folder-group.is-open.is-closing .folder-preview p {
  opacity: 0;
  transform: translateY(-8px);
}

/* 文件夹封面在抽出与收回的全过程都压在预览卡之上，
   预览卡只能从它的右侧背后逐步露出。 */
.folder-group.is-open .folder-node,
.folder-group.is-opening .folder-node,
.folder-group.is-closing .folder-node { z-index: 5; }

.project-card:hover { z-index: 2; filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .18)); transform: translateY(-8px) scale(1.015) rotate(var(--card-rotate, 0deg)); }

/* 点击时先冻结到非悬停几何，再读取 FLIP 的原始矩形，避免回缩末端吸附。 */
.folder-group.is-open .folder-preview.is-focus-measuring {
  transition: none !important;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1)) !important;
  transform: rotate(var(--open-rotate, 0deg)) !important;
}

.folder-group.is-open .project-card.is-focus-measuring,
.project-card.is-focus-measuring {
  transition: none !important;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1)) !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--card-rotate, 0deg)) !important;
}

.focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms cubic-bezier(.22, 1, .36, 1), background 520ms cubic-bezier(.22, 1, .36, 1);
}

.focus-overlay.is-open {
  background: rgba(255, 255, 255, .34);
  opacity: 1;
  pointer-events: auto;
}
.focus-overlay.is-notebook-focus-overlay {
  background: rgba(255, 255, 255, 0);
  transition-duration: var(--workspace-duration);
}

/* 共享投影层：以最终清晰尺寸渲染，通过反向 transform 精确映射回原卡片。 */
.project-card.is-source-hidden,
.folder-preview.is-source-hidden,
.fifth-subfolder-preview.is-source-hidden,
.about-card.is-source-hidden,
.notebook-card.is-source-hidden,
.notebook-sticker.is-source-hidden { visibility: hidden !important; }
.focus-stage {
  position: fixed;
  z-index: 51;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1 !important;
  pointer-events: auto;
  cursor: zoom-out;
  /* 数值由脚本按反向 scale 补偿，回到预览大小时视觉阴影仍为 7px / 16px。 */
  filter: drop-shadow(0 var(--focus-base-shadow-y, 7px) var(--focus-base-shadow-blur, 16px) var(--focus-base-shadow-color, rgba(0, 0, 0, .1)));
  transform: translate3d(var(--focus-return-x), var(--focus-return-y), 0) scale(var(--focus-return-scale)) !important;
  transform-origin: center center;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: none;
}

.focus-stage.is-focus-ready {
  transition: transform 540ms cubic-bezier(.22, 1, .36, 1), filter 540ms cubic-bezier(.22, 1, .36, 1);
}

/* 笔记本采用较长的强 ease-out：中段推进，接近终点时柔和减速，不产生回弹。 */
.focus-stage.is-notebook-focus.is-focus-ready {
  transition: transform var(--workspace-duration) var(--ease-in-out), filter var(--workspace-duration) var(--ease-in-out);
}

.focus-stage.is-focus-expanded {
  transform: translate3d(0, 0, 0) scale(1) !important;
  filter: drop-shadow(0 28px 52px rgba(0, 0, 0, .20));
}

.focus-stage > img,
.focus-flip-face > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-top-left-radius: var(--focus-card-radius-tl, 0);
  border-top-right-radius: var(--focus-card-radius-tr, 0);
  border-bottom-right-radius: var(--focus-card-radius-br, 0);
  border-bottom-left-radius: var(--focus-card-radius-bl, 0);
  filter: none;
  background: transparent;
}
.focus-stage.is-notebook-focus .notebook-sticker { pointer-events: auto; cursor: zoom-in; }
.focus-stage.is-notebook-focus .notebook-sticker:not(.is-editing) .notebook-sticker__preview { animation: none; }
/* 笔记本展开时直接移动原元素本体。它在聚焦层内占满目标尺寸，
   外层 focus-stage 只负责从原位到目标位的 transform。 */
.focus-stage.is-notebook-focus > .notebook-card.is-notebook-portaled {
  position: absolute;
  inset: 0;
  z-index: auto;
  width: 100%;
  height: auto;
  cursor: zoom-out;
  filter: none;
  transform: none !important;
  transition: none;
}
.focus-stage.is-notebook-focus > .notebook-card.is-notebook-portaled .notebook-sticker {
  left: calc(var(--sticker-left) + var(--notebook-sticker-focus-x, 0px));
  top: calc(var(--sticker-top) + var(--notebook-sticker-focus-y, 0px));
}
.notebook-sticker-tooltip { position: absolute; left: 0; top: 0; z-index: 10; box-sizing: border-box; width: max-content; min-height: 56px; display: flex; align-items: center; justify-content: center; padding: 15px 24px; border: 1px solid rgba(60, 60, 67, .16); border-radius: 8px 28px 28px 28px; color: #4a4a4a; background: #fff; box-shadow: 0 15px 25px rgba(0, 0, 0, .20), 0 3px 6px rgba(0, 0, 0, .10); pointer-events: none; opacity: 0; text-align: center; transform: translate3d(var(--tooltip-x, 0px), var(--tooltip-y, 0px), 0) scale(.9); transform-origin: left top; transition: opacity 125ms var(--ease-out), transform 125ms var(--ease-out); font: 500 18px/1.25 var(--label-font); white-space: nowrap; }
.notebook-sticker-tooltip.is-visible { opacity: 1; transform: translate3d(var(--tooltip-x, 0px), var(--tooltip-y, 0px), 0) scale(1); }
.notebook-sticker-tooltip.is-pointer-following { transition: opacity 125ms var(--ease-out), transform 125ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .notebook-sticker-tooltip { transform: translate3d(var(--tooltip-x, 0px), var(--tooltip-y, 0px), 0); transition: opacity 120ms ease; } .notebook-sticker-tooltip.is-visible { transform: translate3d(var(--tooltip-x, 0px), var(--tooltip-y, 0px), 0); } }

/* 原始 SVG 完成后台解码后覆盖在缩略图之上，仅交叉透明度；
   两张图保持同一几何，切换不会触发布局或让放大层闪白。 */
.focus-image-upgrade {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 180ms var(--ease-out);
}

.focus-image-upgrade.is-visible { opacity: 1; }

.focus-stage p {
  position: absolute;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

.focus-stage.is-flippable { cursor: pointer; perspective: 1800px; }

.focus-flip-hint {
  position: absolute;
  z-index: 5;
  top: var(--focus-hint-top, 14px);
  right: var(--focus-hint-right, 14px);
  padding: var(--focus-hint-padding-y, 7px) var(--focus-hint-padding-x, 11px);
  border: var(--focus-hint-border-width, 1px) solid rgba(255, 255, 255, .46);
  border-radius: 999px;
  color: #fff;
  background: rgba(29, 29, 31, .68);
  box-shadow: 0 var(--focus-hint-shadow-y, 6px) var(--focus-hint-shadow-blur, 18px) rgba(0, 0, 0, .18);
  opacity: 1;
  pointer-events: none;
  transform: none;
  transition: none;
  -webkit-backdrop-filter: blur(var(--focus-hint-blur, 12px)) saturate(1.15);
  backdrop-filter: blur(var(--focus-hint-blur, 12px)) saturate(1.15);
  font: 600 var(--focus-hint-font-size, 13px)/1 var(--label-font);
  letter-spacing: .02em;
  white-space: nowrap;
}

.focus-stage.is-flippable:focus { outline: none; }

.focus-flip {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 720ms cubic-bezier(.22, 1, .36, 1);
}

.focus-stage.is-flipped .focus-flip { transform: rotateY(180deg); }

.focus-flip-face {
  position: relative;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.focus-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

.focus-flip-face p { position: absolute; margin: 0; pointer-events: none; }

.focus-stage.is-flippable.is-flipped { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .focus-flip,
  .focus-stage,
  .focus-overlay {
    transition-duration: 1ms;
  }

  .focus-image-upgrade { transition-duration: 120ms; }
}

.folder-group.is-open .folder-preview:hover {
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .16));
  transform: translateY(-7px) scale(1.012) rotate(var(--open-rotate, 0deg));
}

.folder-group.is-open .project-card:not(.is-shared):hover {
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .16));
  transform: translateY(-7px) scale(1.012) rotate(var(--card-rotate, 0deg));
}

/* 桥北街公园所有内容卡都沿用前六项的常驻轻阴影。 */

.folder-group--bridge.is-open .project-card:nth-of-type(-n + 6):hover {
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .16));
}

.folder-group--bridge.is-open .project-card:nth-of-type(n + 7):hover {
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .16)) !important;
}

/* 放大层返回时保持普通位置和轻阴影，直到 hover 抑制逻辑接管。 */
.folder-group.is-open .project-card.is-focus-returning:hover,
.folder-group--bridge.is-open .project-card:nth-of-type(n + 7).is-focus-returning:hover {
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1)) !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--card-rotate, 0deg)) !important;
}

/* 放大查看返回时，即使鼠标仍停在卡片上也必须先落回普通状态；
   用户移出后再次悬停，才恢复原有的上浮与阴影反馈。 */
.folder-group.is-open .folder-preview.is-hover-suppressed:hover {
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1));
  transform: rotate(var(--open-rotate, 0deg));
}

.folder-group.is-open .project-card.is-hover-suppressed:hover {
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1)) !important;
  transform: translate3d(0, 0, 0) scale(1) rotate(var(--card-rotate, 0deg));
}

.canvas-toolbar {
  position: fixed;
  right: var(--canvas-toolbar-edge, 28px);
  bottom: var(--canvas-toolbar-edge, 28px);
  z-index: 20;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 30px;
  background: rgba(246, 246, 248, .72);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10), 0 1px 1px rgba(0, 0, 0, .05);
  backdrop-filter: blur(22px) saturate(1.35);
  scale: var(--canvas-toolbar-scale, 1);
  transform-origin: right bottom;
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease;
}

/* 轻量联系组件：替换头像文字和 index.html 中的邮箱即可复用。 */
.contact-chip { --pill-width: 291px; position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* 阴影不能挂在共同父层：头像与邮箱会被合成为一个轮廓，重叠处会出现错误的灰色层。 */
.contact-chip__avatar { position: absolute; z-index: var(--contact-z, 1); left: 0; top: 0; width: 112px; height: 112px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; filter: drop-shadow(0 18px 17px rgba(28, 28, 28, .13)); perspective: 700px; transform: translate3d(var(--contact-x), var(--contact-y), 0); }
.contact-chip__avatar-card { position: relative; display: block; width: 100%; height: 100%; color: #2d2925; transform-style: preserve-3d; transition: transform 400ms cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.contact-chip__avatar-face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border: 6px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(0, 0, 0, .05); box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.contact-chip__avatar-face--front { transform: rotateY(0deg); }
.contact-chip__avatar-face--back { transform: rotateY(180deg); }
.contact-chip__avatar-face img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.contact-chip__avatar.is-flipped .contact-chip__avatar-card { transform: rotateY(180deg); }
.contact-chip__email-group { position: absolute; z-index: var(--contact-z, 1); left: 0; top: 0; display: flex; width: calc(var(--pill-width) - 5px); align-items: center; touch-action: none; user-select: none; cursor: grab; filter: drop-shadow(0 18px 17px rgba(28, 28, 28, .13)); transform: translate3d(var(--contact-x), var(--contact-y), 0); }
.contact-chip__avatar, .contact-chip__email-group { touch-action: none; }
.contact-chip__avatar.is-dragging, .contact-chip__email-group.is-dragging { cursor: grabbing; will-change: transform; }
.contact-chip__address { position: relative; display: flex; width: var(--pill-width); height: 72px; margin: 0 -5px 0 -1px; padding: 0 82px 0 29px; overflow: hidden; border: 0; border-radius: 999px; color: #363636; background: #fff; cursor: pointer; font: 500 16px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.35px; text-align: left; text-decoration: none; white-space: nowrap; transition: color 180ms ease; }
.contact-chip__address::before { position: absolute; inset: 8px 70px 8px 8px; border-radius: 999px; background: linear-gradient(180deg, rgba(238, 238, 238, .92) 0%, rgba(246, 246, 246, .96) 58%, rgba(250, 250, 250, .98) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36); content: ""; opacity: 0; transform: scale(.98); transition: opacity 180ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1); }
.contact-chip__label { position: absolute; z-index: 1; top: 50%; left: 29px; display: block; transition: opacity 120ms var(--ease-out), transform 160ms var(--ease-out); }
.contact-chip__label--email { opacity: 1; transform: translateY(-50%); }
.contact-chip__label--copied { opacity: 0; transform: translateY(calc(-50% + 6px)); }
.contact-chip[data-state="copied"] .contact-chip__label--email { opacity: 0; transform: translateY(calc(-50% - 6px)); }
.contact-chip[data-state="copied"] .contact-chip__label--copied { opacity: 1; transform: translateY(-50%); }
.contact-chip__mail { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; margin-left: -58px; place-items: center; flex: 0 0 auto; border: 1px solid rgba(130, 41, 7, .25); border-radius: 50%; color: #fff; background: linear-gradient(145deg, #ff6930, #c93206 82%); box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 3px 6px rgba(93, 31, 12, .4), 0 9px 15px rgba(93, 31, 12, .2); transition: transform 140ms cubic-bezier(.22, 1, .36, 1), filter 140ms ease, box-shadow 140ms ease; }
.contact-chip__mail img { display: block; width: 24px; height: 24px; object-fit: contain; }
.contact-chip__avatar:hover .contact-chip__avatar-face { box-shadow: 0 5px 11px rgba(0, 0, 0, .11), inset 0 0 0 1px rgba(0, 0, 0, .05); }
.contact-chip__avatar:hover .contact-chip__avatar-card { transform: translateY(-2px); }
.contact-chip__avatar:hover.is-flipped .contact-chip__avatar-card { transform: translateY(-2px) rotateY(180deg); }
.contact-chip__address:hover { color: #171717; }
@media (hover: hover) and (pointer: fine) {
  .contact-chip[data-state="idle"] .contact-chip__address:hover::before { opacity: 1; transform: scale(1); }
}
.contact-chip__address:focus-visible, .contact-chip__mail:focus-visible { outline: 3px solid rgba(0, 122, 255, .48); outline-offset: 4px; }
.contact-chip__mail:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255,255,255,.38), 0 6px 9px rgba(93,31,12,.3), 0 13px 22px rgba(93,31,12,.2); }
.contact-chip__mail:active { filter: brightness(.82) saturate(.96); transform: translateY(0) scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .contact-chip__avatar-card, .contact-chip__address, .contact-chip__mail { transition: none; }
}

.tool-button {
  display: grid;
  place-items: center;
  gap: 3px;
  width: 60px;
  min-height: 56px;
  border: 0;
  border-radius: 21px;
  background: transparent;
  color: rgba(29, 29, 31, .88);
  cursor: pointer;
  font: 500 11px/1 var(--label-font);
  letter-spacing: -.01em;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.tool-icon { height: 16px; font: 400 17px/16px "SF Pro Display", "SF Pro Icons", var(--label-font); }
.tool-button--import { color: #007aff; }
.tool-button:hover { background: rgba(255, 255, 255, .76); }
.tool-button:active { transform: scale(.96); background: rgba(255, 255, 255, .94); }
.tool-button:focus-visible { outline: 3px solid rgba(0, 122, 255, .38); outline-offset: 2px; }

:is(.sticker-library, .layout-panel) {
  position: fixed;
  right: var(--canvas-toolbar-panel-edge, 108px);
  bottom: var(--canvas-toolbar-edge, 28px);
  z-index: 19;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 30px;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .05);
  opacity: 0;
  pointer-events: none;
  scale: var(--canvas-toolbar-scale, 1);
  transform: translateX(18px) scale(.97);
  transform-origin: right bottom;
  backdrop-filter: blur(24px) saturate(1.35);
}
.sticker-library { width: 326px; max-height: min(560px, calc(100vh - 56px)); background: rgba(246, 246, 248, .8); transition: opacity 180ms ease, transform 260ms var(--ease-out); }
:is(.sticker-library, .layout-panel).is-open { opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); }
.sticker-library-header { display: flex; align-items: center; justify-content: space-between; margin: 18px 18px 12px; }
.sticker-library-header p { margin: 0 0 4px; color: #1d1d1f; font: 650 17px/1 var(--label-font); }
.sticker-library-header span { color: rgba(60,60,67,.55); font: 500 12px/1 var(--label-font); }
.sticker-library-add { padding: 9px 11px; border: 0; border-radius: 13px; color: #007aff; background: rgba(0,122,255,.1); cursor: pointer; font: 600 13px/1 var(--label-font); transition: background 160ms ease, transform 160ms ease; }
.sticker-library-add:hover { background: rgba(0,122,255,.16); }
.sticker-library-add:active { transform: scale(.96); }
.sticker-library-list { display: grid; gap: 7px; max-height: 410px; margin: 0 12px 14px; padding: 2px 6px 8px; overflow: auto; }
.sticker-library-empty { margin: 32px 0; color: rgba(60,60,67,.55); text-align: center; font: 500 13px/1.4 var(--label-font); }
.sticker-library-item { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 7px; border: 0; border-radius: 17px; color: #1d1d1f; background: transparent; cursor: pointer; text-align: left; transition: background 160ms ease, transform 160ms ease; }
.sticker-library-item:hover { background: rgba(255,255,255,.68); }
.sticker-library-item:active { transform: scale(.985); }
.sticker-library-item:focus-visible { outline: 3px solid rgba(0,122,255,.38); outline-offset: 1px; }
.sticker-library-thumb { display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(226,228,234,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.sticker-library-thumb img { max-width: 86%; max-height: 86%; object-fit: contain; }
.sticker-library-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 550 13px/1 var(--label-font); }
.sticker-library-delete { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 10px; color: rgba(60,60,67,.58); background: transparent; cursor: pointer; font: 500 19px/1 var(--label-font); transition: background 160ms ease, color 160ms ease; }
.sticker-library-delete:hover { color: #ff3b30; background: rgba(255,59,48,.1); }

/* 导入贴纸保留素材自身轮廓，不附加白边或卷边渲染。 */
.portfolio-sticker { position: absolute; left: 0; top: 0; z-index: 100; width: var(--sticker-width); height: var(--sticker-height); cursor: grab; touch-action: none; transform: translate3d(var(--sticker-x), var(--sticker-y), 0) rotate(var(--sticker-rotate, -4deg)) scale(var(--sticker-scale, 1)); transform-origin: center; transition: filter 180ms var(--ease-out), transform 180ms var(--ease-out); filter: drop-shadow(0 13px 11px rgba(0, 0, 0, .19)); }
.portfolio-sticker.is-on-folder { filter: none; }
.sticker-artwork { position: relative; z-index: 2; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.portfolio-sticker.is-dragging { cursor: grabbing; transition: none; filter: drop-shadow(0 21px 17px rgba(0, 0, 0, .24)); }
.portfolio-sticker.is-on-folder.is-dragging,
.portfolio-sticker.is-on-folder.is-editing { filter: none; }
.portfolio-sticker.is-adjusting { transition: none; }
.sticker-tools { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sticker-tool { position: absolute; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; color: #39342f; background: rgba(255,255,255,.92); box-shadow: 0 6px 14px rgba(30,24,17,.18); cursor: pointer; opacity: 0; pointer-events: none; transform: scale(.96); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), background 160ms ease; font: 700 17px/1 var(--label-font); }
.sticker-tool--rotate { right: -26px; top: 4px; --tool-transform: translateX(12px) translateY(-6px) scale(.96); transform: var(--tool-transform); }
.sticker-tool--shrink { left: -26px; bottom: 4px; --tool-transform: translateX(-12px) translateY(6px) scale(.96); transform: var(--tool-transform); }
.sticker-tool--move { left: calc(50% - 19px); bottom: -29px; --tool-transform: translateY(12px) scale(.96); transform: var(--tool-transform); }
.portfolio-sticker.is-editing { cursor: default; filter: drop-shadow(0 18px 18px rgba(0,0,0,.25)); }
.portfolio-sticker.is-editing .sticker-artwork { animation: sticker-wiggle 520ms ease-in-out infinite alternate; transform-origin: center; }
.portfolio-sticker.is-editing .sticker-tool { opacity: 1; pointer-events: auto; transform: translate(0,0) scale(1); }
.sticker-tool:hover { background: #fff; }
.sticker-tool:active { transform: translate(0,0) scale(.95) !important; }
.sticker-tool:focus-visible { outline: 3px solid rgba(0,122,255,.45); outline-offset: 2px; }
.sticker-tool.is-active { color: #fff; background: #007aff; }
.portfolio-sticker.is-adjusting .sticker-tool { background: #007aff; color: #fff; }
.swag-stage__item.is-editing { cursor: default; }
.swag-stage__item.is-editing .swag-stage__sticker-button { animation: sticker-wiggle 520ms ease-in-out infinite alternate; transform-origin: center; }
.swag-stage__item.is-editing .sticker-tool { opacity: 1; pointer-events: auto; transform: translate(0,0) scale(1); }
.swag-stage__item.is-adjusting .sticker-tool { color: #fff; background: #007aff; }
@keyframes sticker-wiggle { from { transform: rotate(-1.15deg); } to { transform: rotate(1.15deg); } }
@media (hover: hover) and (pointer: fine) { .portfolio-sticker:hover:not(.is-dragging):not(.is-on-folder) { filter: drop-shadow(0 18px 15px rgba(0, 0, 0, .22)); } }
@media (prefers-reduced-motion: reduce) { .portfolio-sticker, .notebook-sticker, .tool-button, .sticker-tool, .sticker-library { transition-duration: 120ms; } .sticker-library { transform: none; } .portfolio-sticker.is-editing .sticker-artwork, .notebook-sticker.is-editing .notebook-sticker__preview, .swag-stage__item.is-editing .swag-stage__sticker-button { animation: none; } }

.layout-panel {
  width: 348px;
  background: rgba(246, 246, 248, .78);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.panel-tabs { display: flex; gap: 3px; margin: 16px 18px 14px; padding: 4px; border-radius: 16px; background: rgba(118, 118, 128, .10); }
.panel-tab { flex: 1; padding: 10px 8px; border: 0; border-radius: 12px; background: transparent; color: rgba(60, 60, 67, .56); cursor: pointer; font: 600 14px/1 var(--label-font); transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.panel-tab.is-active { background: rgba(255, 255, 255, .92); color: #1d1d1f; box-shadow: 0 1px 3px rgba(0, 0, 0, .09); }
.panel-content { padding: 0 20px 2px; }
.panel-heading { margin: 20px 0 16px; color: rgba(60, 60, 67, .72); font: 600 13px/1 var(--label-font); letter-spacing: .01em; }
.panel-demo { position: relative; height: 164px; margin: 0 0 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .82); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(231,233,238,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.fan-demo { display: grid; grid-template-columns: repeat(3, 48px); grid-auto-rows: 48px; column-gap: var(--fan-horizontal-gap, 12px); row-gap: var(--fan-vertical-gap, 10px); align-content: center; justify-content: center; }
.fan-demo i { display: block; border: 1px solid rgba(0, 122, 255, .48); border-radius: 13px; background: rgba(0, 122, 255, .09); box-shadow: 0 5px 10px rgba(0, 90, 190, .09); transition: transform 180ms var(--ease-out); }
.fan-demo i:nth-child(1), .fan-demo i:nth-child(4) { transform: translateY(var(--fan-edge-shift, 0px)) rotate(var(--fan-left-rotation, -4deg)); }
.fan-demo i:nth-child(3), .fan-demo i:nth-child(6) { transform: translateY(var(--fan-edge-shift, 0px)) rotate(var(--fan-right-rotation, 4deg)); }
.repulsion-demo i { position: absolute; left: 50%; top: 50%; width: var(--repulsion-ring-size, 54px); height: var(--repulsion-ring-size, 54px); border: 1.5px solid rgba(0, 122, 255, .78); border-radius: 50%; transform: translate(-50%, -50%); transition: width 180ms var(--ease-out), height 180ms var(--ease-out); }
.repulsion-demo i::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(0, 122, 255, .45); border-radius: 50%; }
.repulsion-demo b { position: absolute; left: 50%; top: 50%; width: var(--repulsion-core-size, 35px); height: var(--repulsion-core-size, 35px); border-radius: 50%; background: rgba(0, 122, 255, .42); box-shadow: 0 0 0 7px rgba(0, 122, 255, .08); transform: translate(-50%, -50%); transition: width 180ms var(--ease-out), height 180ms var(--ease-out); }
.control-row { margin-bottom: 20px; }
.control-row label { display: flex; justify-content: space-between; margin-bottom: 10px; color: #1d1d1f; font: 500 15px/1 var(--label-font); }
.control-row output { color: rgba(60, 60, 67, .55); font-size: 14px; }
.control-row input { width: 100%; height: 22px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.control-row input::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: rgba(60, 60, 67, .18); }
.control-row input::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6.5px; appearance: none; -webkit-appearance: none; border: 1px solid rgba(0, 0, 0, .08); border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .22); }
.preview-shade-toggle { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 22px; color: #1d1d1f; font: 500 15px/1 var(--label-font); cursor: pointer; }
.preview-shade-toggle input { width: 42px; height: 22px; margin: 0; accent-color: #393936; cursor: pointer; }
.panel-reset { width: calc(100% - 40px); margin: 6px 20px 20px; padding: 14px; border: 0; border-radius: 16px; background: rgba(0, 122, 255, .12); color: #007aff; cursor: pointer; font: 600 15px/1 var(--label-font); transition: background 160ms ease, transform 160ms ease; }
.panel-reset:hover { background: rgba(0, 122, 255, .18); }
.panel-reset:active { transform: scale(.98); }

/* 触摸反馈由组件自身的缩放和阴影承担，不显示浏览器默认蓝色点击遮罩。 */
html { -webkit-tap-highlight-color: transparent; }

.project-card,
.folder-preview,
.fifth-subfolder-preview,
.folder-node,
.fifth-subfolder,
.focus-stage,
.focus-close,
.canvas-toolbar button {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* 双指提示沿用横置提示的同一套表面，从紧凑黑色胶囊柔和展开。 */
.canvas-gesture-hint {
  position: fixed;
  z-index: 80;
  top: max(14px, calc(10px + env(safe-area-inset-top)));
  left: 50%;
  display: none;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -10px, 0) scale(.94);
  transition: opacity 170ms ease-out, transform 280ms var(--ease-drawer);
}

.canvas-gesture-hint.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.canvas-gesture-hint__panel {
  display: grid;
  width: min(292px, calc(100vw - 32px));
  min-height: 86px;
  padding: 14px 18px 15px;
  border-radius: 28px;
  text-align: left;
}
.canvas-gesture-hint__eyebrow {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .54);
  font: 600 11px/1 var(--label-font);
  letter-spacing: .06em;
}
.canvas-gesture-hint__title {
  font: 650 16px/1.15 var(--label-font);
  letter-spacing: -.015em;
}
.canvas-gesture-hint__body {
  margin-top: 5px;
  color: rgba(255, 255, 255, .7);
  font: 450 12px/1.35 var(--label-font);
}
.canvas-gesture-hint.is-visible .canvas-gesture-hint__eyebrow,
.canvas-gesture-hint.is-visible .canvas-gesture-hint__title,
.canvas-gesture-hint.is-visible .canvas-gesture-hint__body {
  animation: mobile-coach-content-in 420ms var(--ease-drawer) both;
}
.canvas-gesture-hint.is-visible .canvas-gesture-hint__title { animation-delay: 45ms; }
.canvas-gesture-hint.is-visible .canvas-gesture-hint__body { animation-delay: 90ms; }

@keyframes mobile-coach-content-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) and (max-width: 960px) {
  .canvas-gesture-hint { display: flex; }
  .contact-chip { --pill-width: min(202px, calc(100vw - 164px)); }
  .contact-chip__avatar { width: 76px; height: 76px; margin-right: 8px; }
  .contact-chip__avatar-face { border-width: 5px; }
  .contact-chip__address { height: 56px; padding: 0 27px 0 21px; font-size: 13px; }
  .contact-chip__address::before { inset: 6px 52px 6px 6px; }
  .contact-chip__label { left: 21px; }
  .contact-chip__mail { width: 48px; height: 48px; }
  .contact-chip__mail img { width: 21px; height: 21px; }
  .folder-node { width: 235px; }
  .project-card { width: 360px; }
  .canvas-toolbar { right: 16px; bottom: 16px; border-radius: 26px; }
  .tool-button { width: 58px; min-height: 52px; border-radius: 20px; }
  .layout-panel { right: 16px; bottom: 190px; width: min(330px, calc(100vw - 32px)); }
  .sticker-library { right: 16px; bottom: 190px; width: min(326px, calc(100vw - 32px)); }
}

/* 手机端继续使用桌面端的同一套世界坐标与动效，只改变镜头比例。
   这里恢复桌面对象的原始几何，避免旧的逐组件缩放与相机缩放叠加。 */
@media (max-width: 760px), (orientation: landscape) and (max-height: 560px) and (max-width: 960px) {
  .site-loader__folders {
    gap: clamp(5px, 1.5vw, 8px);
  }

  .site-loader__folders span {
    width: clamp(44px, 15.6vw, 64px);
  }

  .folder-node { width: 240px; }
  .project-card { width: 540px; }
  .notebook-card { --notebook-mobile-shift-x: 165px; width: 380px; }
  .swag-collection { width: 320px; height: 280px; }
  .about-card { width: 240px; }

  .contact-chip { --pill-width: 291px; }
  .contact-chip__avatar { width: 112px; height: 112px; margin-right: 0; }
  .contact-chip__avatar-face { border-width: 6px; }
  .contact-chip__address { height: 72px; padding: 0 82px 0 29px; font-size: 16px; }
  .contact-chip__address::before { inset: 8px 70px 8px 8px; }
  .contact-chip__label { left: 29px; }
  .contact-chip__mail { width: 58px; height: 58px; }
  .contact-chip__mail img { width: 24px; height: 24px; }

  /* 相机缩放后仍保留约 44px 的触摸热区，排列方式与桌面端一致。 */
  .software-toolbox:not(.is-intro-active) {
    grid-template-columns: repeat(6, 108px);
    grid-auto-rows: 112px;
    width: 648px;
  }

  .software-toolbox:not(.is-intro-active) .software-toolbox__button,
  .software-toolbox:not(.is-intro-active) .software-toolbox__button img {
    width: 106px;
    height: 106px;
  }

  .canvas-toolbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding: 4px;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    border-radius: 22px;
    box-sizing: border-box;
  }

  .tool-button {
    width: auto;
    min-width: 0;
    min-height: 48px;
    border-radius: 16px;
  }

  .layout-panel,
  .sticker-library {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(88px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 116px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .software-intro-layout {
    width: calc(100vw - 32px);
    min-width: 0;
    margin: max(20px, env(safe-area-inset-top)) 16px calc(88px + env(safe-area-inset-bottom));
  }

  .software-intro-stage { overflow-x: hidden; overflow-anchor: none; }
  .software-intro-close,
  .focus-close {
    position: fixed;
    z-index: 6;
    left: 50%;
    bottom: max(18px, calc(12px + env(safe-area-inset-bottom)));
    display: grid;
    width: 74px;
    height: 54px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 999px;
    color: #fff;
    background: rgba(39, 39, 37, .86);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    pointer-events: auto;
    transform: translateX(-50%);
    font: 500 25px/1 var(--label-font);
  }

  .software-intro-close:active,
  .focus-close:active { transform: translateX(-50%) scale(.95); }
  .software-intro-tools {
    position: sticky;
    top: 0;
    z-index: 3;
    isolation: isolate;
    width: 100%;
    margin-bottom: 14px;
    padding: max(8px, env(safe-area-inset-top)) 0 10px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
  /* 卡片滑到固定应用栏下方时先经过白色渐隐区，避免顶边被硬切掉。 */
  .software-intro-tools::after {
    position: absolute;
    z-index: -1;
    right: -16px;
    bottom: -34px;
    left: -16px;
    height: 35px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .94), rgba(255, 255, 255, 0));
    pointer-events: none;
    content: "";
  }
  .software-intro-list { width: 100%; }
  .software-intro-item,
  .software-intro-reveal {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .software-toolbox.is-intro-active {
    position: relative;
    left: auto;
    top: auto;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    width: 100%;
    transform: none;
  }

  .software-toolbox.is-intro-active .software-toolbox__button,
  .software-toolbox.is-intro-active .software-toolbox__button img {
    width: min(54px, calc((100vw - 52px) / 6));
    height: min(54px, calc((100vw - 52px) / 6));
  }

  .swag-collection-stage { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .swag-collection-stage__grid { margin: max(28px, env(safe-area-inset-top)) -84px calc(90px + env(safe-area-inset-bottom)); }

  .canvas.is-swag-open .canvas-toolbar,
  .canvas.is-software-context-active .canvas-toolbar,
  .canvas.is-focus-active .canvas-toolbar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }

  .focus-overlay.is-open:not(.is-notebook-focus-overlay) {
    background: rgba(255, 255, 255, .72);
  }
}

@media (orientation: portrait) and (max-width: 760px) {
  /* 展开项目后底部控制条会盖住第二排卡片；先把浏览空间完整交给画布。 */
  .canvas.is-project-open .canvas-toolbar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }
}

/* 横屏手机把控制区恢复成接近 PC 的右下竖排，保留触摸热区并释放画布高度。 */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 960px) {
  .canvas-toolbar {
    grid-template-columns: 1fr;
    width: auto;
    padding: 4px;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    border-radius: 24px;
  }

  .tool-button { width: 52px; min-height: 46px; border-radius: 18px; }

  .layout-panel,
  .sticker-library {
    right: calc(80px + env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(326px, calc(100vw - 112px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* 触屏没有悬停结束事件，避免轻点后卡片长期停在桌面端的 hover 位移。 */
@media (hover: none) {
  .folder-group.is-open .folder-preview:hover {
    filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1));
    transform: rotate(var(--open-rotate, 0deg));
  }

  .folder-group.is-open .project-card:not(.is-shared):hover {
    filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .1));
    transform: translate3d(0, 0, 0) scale(1) rotate(var(--card-rotate, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-gesture-hint { transition-duration: 1ms; }
  .orientation-coach.is-visible .orientation-coach__eyebrow,
  .orientation-coach.is-visible h2,
  .orientation-coach.is-visible #orientationCoachDescription,
  .orientation-coach.is-visible button,
  .canvas-gesture-hint.is-visible .canvas-gesture-hint__eyebrow,
  .canvas-gesture-hint.is-visible .canvas-gesture-hint__title,
  .canvas-gesture-hint.is-visible .canvas-gesture-hint__body { animation: none; }
}