/* Outfit matches the rounded reference lettering; the installed CJK face supplies Chinese glyphs. */
:root { --site-font: "Outfit", "Noto Sans SC", "Microsoft YaHei", sans-serif; }

/* Temporarily hide packages and their navigation/search links; keep the content for restoration. */
#packages, [data-framer-name="Packages"], a[href$="#packages"] {
  display: none !important;
}

/* Temporarily hide FAQ and its navigation; retain the original content. */
#faq, [data-framer-name="FAQ"], a[href$="#faq"] {
  display: none !important;
}

/* Native folders retain their animations; keyboard focus remains visible. */
#goodies [data-process-open]:focus-visible {
  outline: 2px solid #111;
  outline-offset: 8px;
  border-radius: 16px;
}

/* Reading sheets sit above the app, memo and neighbouring folders while open. */
#goodies [data-framer-name="Folder Grid"] { z-index: 10; }
#goodies [data-framer-name="Folder Cell"]:has([data-process-open="true"]) {
  z-index: 10;
}
#goodies [data-process-open="true"] { z-index: 10; }

/* Sticker arrows connect the four steps without taking pointer focus. */
#goodies [data-framer-name="Folder Cell"]:not(:last-child)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 52px;
  height: 36px;
  right: -46px;
  top: 128px;
  background: url("/assets/process/arrow-yellow.svg") center / contain no-repeat;
  rotate: -5deg;
  z-index: 1;
}
#goodies [data-framer-name="Folder Cell"]:nth-child(2)::after {
  background-image: url("/assets/process/arrow-pink.svg");
  rotate: 4deg;
}
#goodies [data-framer-name="Folder Cell"]:nth-child(3)::after {
  background-image: url("/assets/process/arrow-blue.svg");
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  #goodies [data-framer-name="Folder Grid"] { row-gap: 72px; }
  #goodies [data-framer-name="Folder Cell"]:nth-child(odd)::after { right: -38px; }
  #goodies [data-framer-name="Folder Cell"]:nth-child(2)::after {
    background-image: url("/assets/process/arrow-wrap.svg");
    background-size: 100% 100%;
    top: auto;
    bottom: -58px;
    right: calc(50% - 18px);
    width: calc(100% + 60px);
    height: 46px;
    rotate: 0deg;
  }
}
@media (max-width: 809.98px) {
  #goodies [data-framer-name="Folder Grid"] { row-gap: 64px; }
  #goodies [data-framer-name="Folder Cell"]:not(:last-child)::after {
    top: auto;
    bottom: -51px;
    right: calc(50% - 26px);
    rotate: 90deg;
  }
}
@media (min-width: 810px) {
  #goodies [data-framer-name="Folder Cell"] { --process-middle: 42.665px; --process-step: 128px; }
  /* Keep the fan near its own folder; the outer columns shift only to clear the viewport. */
  #goodies [data-framer-name="Folder Cell"]:first-child { --process-middle: 96px; }
  #goodies [data-framer-name="Folder Cell"]:last-child { --process-middle: -10.67px; }
  #goodies [data-process-open="true"] [data-framer-name="Photo 1"],
  #goodies [data-process-open="true"] [data-framer-name="Photo 2"],
  #goodies [data-process-open="true"] [data-framer-name="Photo 3"] {
    width: 154.67px; top: -40px; padding: 4px; gap: 3.33px;
    box-shadow: 0 12px 30px #0003;
    z-index: 3;
  }
  #goodies [data-process-open="true"] [data-framer-name="Photo 1"] { left: calc(var(--process-middle) - var(--process-step)); rotate: 6deg; }
  #goodies [data-process-open="true"] [data-framer-name="Photo 2"] { left: var(--process-middle); top: -52px; z-index: 4; }
  #goodies [data-process-open="true"] [data-framer-name="Photo 3"] { left: calc(var(--process-middle) + var(--process-step)); rotate: -6deg; z-index: 5; }
  #goodies [data-process-open="true"] [data-framer-name^="Photo "] [data-framer-name="Photo"] { height: 144px; }
  #goodies [data-process-open="true"] [data-framer-name="Caption"] { font-size: 12px; --framer-font-size: 12px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  #goodies [data-framer-name="Folder Cell"] { --process-middle: 48px; --process-step: 118px; }
  #goodies [data-process-open="true"] [data-framer-name="Photo 1"],
  #goodies [data-process-open="true"] [data-framer-name="Photo 2"],
  #goodies [data-process-open="true"] [data-framer-name="Photo 3"] { width: 144px; }
  #goodies [data-framer-name="Folder Cell"]:nth-child(odd) { --process-middle: 48px; }
  #goodies [data-framer-name="Folder Cell"]:nth-child(even) { --process-middle: 48px; }
  #goodies [data-process-open="true"] [data-framer-name^="Photo "] [data-framer-name="Photo"] { height: 133.33px; }
}
@media (max-width: 809.98px) {
  /* Keep the original app decoration beside the folder, clear of the new copy. */
  #goodies .framer-zfuh2p-container { top: 322px; left: auto; right: 8px; }
}
@media (max-width: 359.98px) {
  #goodies h2 { font-size: 44px; }
}

/* The original difference blend inverted the text underneath the cursor. */
[data-ate-cursor-host] { mix-blend-mode: normal !important; }
[data-ate-cursor-host] path {
  fill: #71e34f !important;
  stroke: #111;
  stroke-width: .65;
  stroke-linejoin: round;
}

body, body * {
  font-family: var(--site-font) !important;
  --framer-font-family: var(--site-font);
}

/* Compact video layout; native Framer feed retains its interactions. */
#hero [data-framer-name="Canvas"] > :not(.pengpeng-video-pane) { display:none !important; }
#hero .pengpeng-video-pane {
 width:100%; height:auto; min-width:0; box-sizing:border-box;
 padding:20px 20px 24px; display:flex; flex-direction:column;
 align-items:stretch; gap:14px;
}
#hero .pengpeng-video-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#hero .pengpeng-video-kicker { margin:0; color:#111; font-size:24px; font-weight:700; line-height:1.3; letter-spacing:0; }
#hero .pengpeng-video-tag { padding:6px 10px; border:1px solid #111; border-radius:8px; background:#8cbcff; color:#111; font-size:12px; font-weight:600; line-height:1.25; white-space:nowrap; transform:rotate(2deg); box-shadow:2px 2px 0 #111; }
#hero .pengpeng-video-frame {
 width:100%; aspect-ratio:16 / 9; flex:0 0 auto;
 border:1px solid #111; border-radius:18px; background:#f5efdd;
 overflow:hidden; position:relative; display:grid; place-items:center;
 box-shadow:5px 5px 0 #f054c5; box-sizing:border-box;
}
#hero .pengpeng-video-frame video { width:100%; height:100%; object-fit:cover; display:block; }
#hero .pengpeng-video-placeholder { padding:24px; color:#111; text-align:center; font-size:24px; font-weight:700; line-height:1.3; }
#hero .pengpeng-video-note { margin:0; color:#111; font-size:15px; font-weight:500; line-height:1.5; }
@media (min-width:1200px) {
 #hero [data-framer-name="Body"] { height:auto; align-items:stretch; }
 #hero [data-framer-name="Canvas"] { height:auto; min-height:0; }
 #hero [data-framer-name="Comments"] { height:auto; min-height:0; align-self:stretch; }
 #hero [data-framer-name="Hero Chat Card"] { flex:1 1 0; min-height:0; height:auto; }
}
@media (max-width:1199.98px) {
 #hero .pengpeng-video-kicker { font-size:21px; }
 #hero .pengpeng-video-tag { font-size:11px; padding:5px 8px; }
}
@media (max-width:809.98px) {
 #hero [data-framer-name="Canvas"] { padding:0; }
 #hero .pengpeng-video-pane { padding:20px 16px 24px; gap:14px; }
 #hero .pengpeng-video-heading { flex-wrap:wrap; gap:10px; }
 #hero .pengpeng-video-kicker { font-size:22px; }
 #hero .pengpeng-video-note { font-size:14px; }
}

/* Hide promotional outbound controls on this local personal homepage. */
#__framer-badge-container,[data-ate-framer-badge],[data-amara-buy],[data-framer-name="Buy pengpeng"],footer [data-framer-name="Credit"],footer [data-framer-name="Showcase Legal"] { display:none !important; }