/* 官网首页专用样式：像素 / 卡通 / 田园 / 清新。
   色板令牌在 styles.css，这里只放首页自己的东西；协议页不加载本文件。 */
* {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', sans-serif;
        color: var(--text);
        background: var(--cream);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      .wrap {
        max-width: 1040px;
        margin: 0 auto;
        padding: 0 24px;
      }

      /* 所有像素图形统一关闭平滑，边缘保持台阶感 */
      .px,
      .ico {
        shape-rendering: crispEdges;
      }

      /* 像素图标：统一尺寸与配色，由 currentColor 决定主色 */
      .ico {
        display: block;
        width: 100%;
        height: 100%;
      }

      .icon-tile {
        width: 44px;
        height: 44px;
        padding: 9px;
        display: grid;
        place-items: center;
        color: var(--ink);
        background: color-mix(in srgb, var(--duck) 42%, var(--card));
        border: 2px solid var(--ink);
        border-radius: 12px;
        box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 16%, transparent);
        transition:
          transform 160ms ease-out,
          box-shadow 160ms ease-out;
      }

      .card:hover .icon-tile {
        transform: translateY(-3px);
        box-shadow: 3px 5px 0 color-mix(in srgb, var(--ink) 18%, transparent);
      }

      /*
       * 顶栏整条去掉：站内已经没有需要跳转的锚点，留着只是占地方。
       * 产品名移到首屏的标签位上（见 .tag）。
       */

      /* ---------- 首屏 ---------- */
      .hero {
        position: relative;
        overflow: hidden;
        padding: 64px 0 0;
        background: linear-gradient(180deg, var(--sky) 0%, #eef8fd 44%, var(--cream) 100%);
        text-align: center;
      }

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

      /* 云层：自身在漂移，同时整层随滚动做很轻的视差 */
      .sky-layer {
        position: absolute;
        inset: 0;
        will-change: transform;
      }

      .cloud {
        position: absolute;
        animation: drift 78s linear infinite;
      }

      .cloud.c2 {
        animation-duration: 104s;
        animation-delay: -32s;
        opacity: 0.72;
      }

      .cloud.c3 {
        animation-duration: 132s;
        animation-delay: -70s;
        opacity: 0.55;
      }

      @keyframes drift {
        from {
          transform: translateX(-18%);
        }
        to {
          transform: translateX(118%);
        }
      }

      .sun {
        position: absolute;
        right: 8%;
        top: 44px;
        animation: bob 7s ease-in-out infinite;
      }

      .hero-inner {
        position: relative;
        z-index: 2;
      }

      /* 卡通：贴纸式底座托住 IP；落地时有一次轻微回弹，悬停时点头 */
      .mark-stage {
        width: 116px;
        height: 116px;
        margin: 0 auto 18px;
        display: grid;
        place-items: center;
        background: var(--card);
        border: 3px solid var(--ink);
        border-radius: 34px;
        box-shadow: 6px 7px 0 color-mix(in srgb, var(--ink) 14%, transparent);
        animation: bob 4.2s ease-in-out infinite;
        transform-origin: 50% 90%;
        transition: transform 220ms ease-out;
      }

      .mark-stage:hover {
        transform: rotate(-3deg);
      }

      .mark-stage img {
        width: 88px;
        height: 88px;
        display: block;
      }

      @keyframes bob {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-7px);
        }
      }

      .tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 5px 12px;
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: 1.2px;
        color: var(--ink);
        background: color-mix(in srgb, var(--duck) 55%, var(--card));
        border: 2px solid var(--ink);
        border-radius: 8px;
        box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 16%, transparent);
      }

      .tag .ico {
        width: 14px;
        height: 14px;
      }

      .hero h1 {
        font-size: 46px;
        line-height: 1.25;
        letter-spacing: -0.5px;
        margin: 6px 0 14px;
      }

      .lead {
        font-size: 19px;
        font-weight: 600;
        margin: 0 0 10px;
      }

      .sub {
        font-size: 16px;
        color: var(--muted);
        max-width: 620px;
        margin: 0 auto 26px;
      }

      /* 卡通按钮：实心墨蓝描边 + 硬阴影，按下真的会位移 */
      .button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 26px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        background: var(--accent);
        border: 3px solid var(--ink);
        border-radius: 14px;
        box-shadow: 5px 5px 0 color-mix(in srgb, var(--ink) 22%, transparent);
        text-decoration: none;
        transition:
          transform 120ms ease-out,
          box-shadow 120ms ease-out;
      }

      .button .ico {
        width: 14px;
        height: 14px;
        color: #fff;
        transition: transform 200ms ease-out;
      }

      .button:hover {
        transform: translate(2px, 2px);
        box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 22%, transparent);
      }

      .button:hover .ico {
        transform: translateY(3px);
      }

      .button:active {
        transform: translate(5px, 5px);
        box-shadow: 0 0 0 color-mix(in srgb, var(--ink) 22%, transparent);
      }

      .note {
        font-size: 13px;
        color: var(--muted);
        margin: 14px 0 0;
      }

      /*
        V1.7.0：首屏只放一个「软件下载」按钮，点开再展开三个平台的入口与说明。
        三个平台同时摆出来会变成一排同等权重的按钮，反而看不出该点哪个；
        展开后由脚本按访客系统给对应那一项加 .is-recommended。
      */
      .download-pick {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      /*
        展开区做成一块独立的毛玻璃卡片：半透明米色 + 背景模糊 + 硬投影，
        与首屏那片浅蓝渐变底拉开差别，让"这块能点"一眼可见。
        版本说明与芯片提示也放进这块卡片里，跟平台入口一起出现、一起收起。
      */
      .download-panel {
        width: 100%;
        max-width: 560px;
        display: grid;
        gap: 10px;
        padding: 16px;
        background: color-mix(in srgb, var(--cream) 72%, transparent);
        /*
         * 毛玻璃：模糊 + 提饱和，让背后的草坡与云透上来但不成形。
         * 只做半透明不模糊的话，背后的像素草坡会从卡片里"穿出来"，字会看不清。
         */
        backdrop-filter: blur(14px) saturate(150%);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        border: 2px solid var(--ink);
        border-radius: 18px;
        box-shadow:
          6px 6px 0 color-mix(in srgb, var(--ink) 14%, transparent),
          inset 0 1px 0 rgba(255, 255, 255, 0.55);
      }

      /* 不支持 backdrop-filter 的浏览器退回不透明底：宁可没有玻璃感，也不能糊字 */
      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .download-panel {
          background: var(--cream);
        }
      }

      /* display:grid 会盖掉 hidden 的默认样式，必须显式收回来 */
      .download-panel[hidden] {
        display: none;
      }

      .download-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 8px;
      }

      .download-option {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        padding: 12px 16px;
        text-align: left;
        text-decoration: none;
        color: var(--text);
        /* 入口卡片也留一点通透，整块看起来才是同一层玻璃 */
        background: color-mix(in srgb, var(--card) 78%, transparent);
        border: 2px solid var(--line);
        border-radius: 12px;
        transition:
          border-color 120ms ease-out,
          box-shadow 120ms ease-out,
          transform 120ms ease-out;
      }

      .download-option:hover {
        border-color: var(--ink);
        transform: translateY(-1px);
      }

      .download-option .dl-name {
        font-weight: 600;
      }

      /* 说明单独占一行，窄屏下不会把平台名挤成两截 */
      .download-option .dl-note {
        flex: 1 1 100%;
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--muted);
      }

      .facts {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        justify-content: center;
        padding: 0;
        margin: 22px 0 0;
        font-size: 13px;
        color: var(--muted);
      }

      /* 田园：像素草坡收尾，坡上站一只像素图鸭鸭 */
      .hills {
        display: block;
        width: 100%;
        height: 138px;
        margin-top: 30px;
        will-change: transform;
      }

      /* 池塘与在池子里随机游动的鸭子 */
      .birds {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .birds .bird {
        pointer-events: auto;
      }

      .pond {
        position: absolute;
        left: 56%;
        bottom: 22px;
        width: 210px;
        height: 66px;
      }

      .swimmer {
        position: absolute;
        left: 62%;
        bottom: 44px;
        width: 48px;
        height: 36px;
        cursor: pointer;
        /* 换位置是"游过去"，所以用较长的过渡，而不是瞬移 */
        transition:
          left 2.4s ease-in-out,
          bottom 2.4s ease-in-out,
          transform 400ms ease-out;
        transform-origin: 50% 100%;
      }

      .swimmer svg {
        width: 100%;
        height: 100%;
        animation: bob 3.2s ease-in-out infinite;
      }

      /* 游过留下的涟漪 */
      .ripple {
        position: absolute;
        width: 16px;
        height: 6px;
        border: 2px solid color-mix(in srgb, #ffffff 70%, transparent);
        border-radius: 50%;
        pointer-events: none;
        animation: ripple 1.6s ease-out forwards;
      }

      @keyframes ripple {
        from {
          transform: scale(0.5);
          opacity: 0.9;
        }
        to {
          transform: scale(2.1);
          opacity: 0;
        }
      }

      /* 梨树上的梨：点一下掉下来，过一会儿再长回去 */
      .pear {
        position: absolute;
        width: 24px;
        height: 24px;
        cursor: pointer;
        transition: transform 200ms ease-out;
      }

      .pear:hover {
        transform: scale(1.12);
      }

      .pear.falling {
        animation: fall 900ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
        pointer-events: none;
      }

      @keyframes fall {
        to {
          transform: translateY(46px) rotate(180deg);
          opacity: 0.2;
        }
      }

      /* 飞过天空的像素鸟 */
      .bird {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        will-change: transform;
        animation: flyacross linear forwards;
      }

      .bird svg {
        width: 100%;
        height: 100%;
        animation: flap 1.1s ease-in-out infinite;
      }

      @keyframes flyacross {
        from {
          transform: translateX(-8vw);
        }
        to {
          transform: translateX(108vw);
        }
      }

      @keyframes flap {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-4px);
        }
      }

      /* 太阳的光芒：两圈长短交替，靠透明度呼吸，不旋转（旋转会把像素糊掉） */
      .sun-rays {
        animation: shine 5.2s ease-in-out infinite;
        transform-origin: 50% 50%;
      }

      .sun-rays.far {
        animation-duration: 6.8s;
        animation-delay: -2.4s;
      }

      @keyframes shine {
        0%,
        100% {
          opacity: 0.55;
        }
        50% {
          opacity: 1;
        }
      }

      /* ---------- 滚动进场（渐进增强） ---------- */
      .js [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 520ms cubic-bezier(0.22, 0.68, 0.32, 1),
          transform 520ms cubic-bezier(0.22, 0.68, 0.32, 1);
        transition-delay: var(--delay, 0ms);
      }

      .js [data-reveal].in {
        opacity: 1;
        transform: none;
      }

      /* 标题下的像素虚线：进入视口时一格一格亮起来 */
      .dashes {
        display: flex;
        gap: 5px;
        margin: 4px 0 22px;
      }

      .dashes i {
        width: 9px;
        height: 9px;
        background: color-mix(in srgb, var(--ink) 12%, transparent);
        transition: background 220ms linear;
      }

      .in .dashes i,
      .dashes.in i {
        background: var(--duck);
        transition-delay: calc(var(--i) * 70ms);
      }

      .dashes i:nth-child(1) {
        --i: 0;
      }
      .dashes i:nth-child(2) {
        --i: 1;
      }
      .dashes i:nth-child(3) {
        --i: 2;
      }
      .dashes i:nth-child(4) {
        --i: 3;
      }
      .dashes i:nth-child(5) {
        --i: 4;
      }
      .dashes i:nth-child(6) {
        --i: 5;
      }
      .dashes i:nth-child(7) {
        --i: 6;
      }

      /* ---------- 区块 ---------- */
      .section {
        padding: 72px 0;
        background: var(--card);
      }

      .section.tint {
        background: var(--cream-deep);
        position: relative;
      }

      /* 浅色区块的上沿用一条像素点线收边，相邻区块的底色不会糊在一起 */
      .section.tint::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background-image: linear-gradient(
          90deg,
          color-mix(in srgb, var(--ink) 14%, transparent) 0 50%,
          transparent 50% 100%
        );
        background-size: 12px 4px;
        opacity: 0.45;
      }

      .section h2 {
        font-size: 30px;
        letter-spacing: -0.3px;
        margin: 0;
      }

      .section-lead {
        margin: 0 0 30px;
        color: var(--muted);
      }

      /*
       * 合并进来的三步：不再单起标题，靠间距把它和上面的"五条不变量"分成两组。
       *
       * 间距规则：组间距 = 区块内边距 = 72px（32 边距 + 4 点线 + 36 内边距）。
       * 比组内的 30px 明显，又和区块节奏对齐，读起来是"同一区块里的第二组"。
       *
       * 注意选择器要写成 .steps.steps-merged：单写 .steps-merged 会被后面的
       * .steps { margin: 0 } 同权重覆盖掉，间距就悄悄失效了（踩过）。
       */
      .steps.steps-merged {
        margin-top: 32px;
        padding-top: 40px;
        /* 顶上压一条很淡的像素点线：不用伪元素，避免它变成网格里的一行 */
        background-image: linear-gradient(
          90deg,
          color-mix(in srgb, var(--ink) 12%, transparent) 0 50%,
          transparent 50% 100%
        );
        background-size: 14px 4px;
        background-position: 0 0;
        background-repeat: repeat-x;
      }

      .grid {
        display: grid;
        gap: 18px;
      }

      .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .card {
        position: relative;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 24px;
        box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 6%, transparent);
        transition:
          transform 180ms ease-out,
          box-shadow 180ms ease-out,
          border-color 180ms ease-out;
      }

      .card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--duck) 70%, var(--line));
        box-shadow: 0 12px 26px color-mix(in srgb, var(--ink) 10%, transparent);
      }

      /* hover 时四角亮起像素点 */
      .card::before,
      .card::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        background: var(--duck);
        opacity: 0;
        transition: opacity 180ms ease-out;
      }

      .card::before {
        top: -5px;
        left: -5px;
      }

      .card::after {
        bottom: -5px;
        right: -5px;
      }

      .card:hover::before,
      .card:hover::after {
        opacity: 1;
      }

      .card h3 {
        margin: 14px 0 8px;
        font-size: 17px;
      }

      .card p {
        margin: 0;
        font-size: 14px;
        color: var(--muted);
      }

      .quote {
        margin: 26px 0 0;
        padding-left: 16px;
        border-left: 4px solid var(--duck);
        font-size: 17px;
        font-weight: 600;
      }

      /* 规格条：每格一个小像素图标 + 一条像素分隔线 */
      .spec {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
      }

      .spec li {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 20px;
        transition: border-color 180ms ease-out;
      }

      .spec li:hover {
        border-color: color-mix(in srgb, var(--grass) 60%, var(--line));
      }

      .spec .icon-tile {
        width: 38px;
        height: 38px;
        padding: 8px;
        background: color-mix(in srgb, var(--grass) 34%, var(--card));
        border-radius: 10px;
      }

      .spec-label {
        display: block;
        font-weight: 700;
        margin: 12px 0 8px;
      }

      .spec-text {
        font-size: 13.5px;
        color: var(--muted);
      }

      /* 步骤：像素连线串起来，序号方块落下 */
      .steps {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        /* 与卡片栅格的 18px 对齐，同一页里不出现两种"卡片间距" */
        gap: 18px;
      }

      .steps li {
        position: relative;
        display: flex;
        gap: 18px;
        align-items: flex-start;
        background: var(--card);
        border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
        border-radius: 18px;
        padding: 22px;
      }

      /* 步骤之间的像素连线 */
      .steps li + li::before {
        content: '';
        position: absolute;
        left: 58px;
        top: -17px;
        width: 4px;
        height: 16px;
        background-image: linear-gradient(
          180deg,
          color-mix(in srgb, var(--ink) 30%, transparent) 0 55%,
          transparent 55% 100%
        );
        background-size: 4px 8px;
      }

      .step-no {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        font-weight: 700;
        color: var(--ink);
        background: var(--duck);
        border: 2px solid var(--ink);
        border-radius: 10px;
        box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 18%, transparent);
        transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .js [data-reveal] .step-no {
        transform: translateY(-10px) scale(0.86);
      }

      .js [data-reveal].in .step-no {
        transform: none;
        transition-delay: 120ms;
      }

      .steps h3 {
        margin: 2px 0 6px;
        font-size: 17px;
      }

      .steps p {
        margin: 0;
        font-size: 14px;
        color: var(--muted);
      }

      /* 邀请制提示：这是价格区最重要的信息，必须放在卡片之前 */
      .invite {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 22px;
        margin-bottom: 24px;
        border-radius: 16px;
        border: 2px solid color-mix(in srgb, var(--duck) 55%, var(--line));
        background: color-mix(in srgb, var(--duck) 14%, var(--card));
      }

      /* 标签用鸭黄配墨蓝黑（实测 8.10:1），不用白字 */
      .invite-tag {
        flex: 0 0 auto;
        padding: 3px 10px;
        border-radius: 999px;
        background: var(--duck);
        border: 2px solid var(--ink);
        color: var(--ink);
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
      }

      .invite-body {
        font-size: 15px;
        color: var(--muted);
      }

      @media (max-width: 640px) {
        .invite {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
      }

      /* 价格 */
      .price-card {
        text-align: center;
      }

      .price-card .icon-tile {
        margin: 0 auto;
        background: color-mix(in srgb, var(--sky-deep) 40%, var(--card));
      }

      .price-card.featured {
        border: 2px solid var(--duck);
        box-shadow: 0 10px 26px color-mix(in srgb, var(--duck) 30%, transparent);
      }

      .price-card.featured .icon-tile {
        background: color-mix(in srgb, var(--wheat) 45%, var(--card));
      }

      /* 终生版左上角的像素星，很轻的呼吸，不抢注意力 */
      .price-card.featured::before {
        content: '';
        position: absolute;
        top: 14px;
        left: 14px;
        width: 8px;
        height: 8px;
        background: var(--wheat);
        box-shadow:
          8px 0 0 var(--wheat),
          0 8px 0 var(--wheat),
          8px 8px 0 var(--wheat);
        animation: twinkle 2.6s ease-in-out infinite;
        opacity: 1;
      }

      @keyframes twinkle {
        0%,
        100% {
          opacity: 0.55;
        }
        50% {
          opacity: 1;
        }
      }

      .price {
        font-size: 34px;
        font-weight: 700;
        letter-spacing: -1px;
        margin: 14px 0 6px;
      }

      .price span {
        font-size: 16px;
        font-weight: 500;
      }

      /* 常见问题：原生 details，展开时内容淡入 */
      .faq details {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 16px 20px;
        margin-bottom: 10px;
      }

      .faq summary {
        cursor: pointer;
        font-weight: 600;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
      }

      .faq summary::-webkit-details-marker {
        display: none;
      }

      .faq summary::after {
        content: '';
        width: 8px;
        height: 8px;
        flex: 0 0 auto;
        background: var(--ink);
        box-shadow:
          8px 0 0 color-mix(in srgb, var(--ink) 25%, transparent),
          0 8px 0 color-mix(in srgb, var(--ink) 25%, transparent),
          8px 8px 0 color-mix(in srgb, var(--ink) 25%, transparent);
        transition: transform 200ms ease-out;
      }

      .faq details[open] summary::after {
        transform: rotate(45deg) scale(0.86);
      }

      .faq details p {
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 14px;
        animation: fadein 240ms ease-out;
      }

      @keyframes fadein {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }
      }




      /* 点击时的像素火花 */
      .spark {
        position: fixed;
        width: 6px;
        height: 6px;
        border: 1px solid var(--ink);
        pointer-events: none;
        z-index: 99;
        animation: spark 520ms ease-out forwards;
      }

      @keyframes spark {
        to {
          transform: translate(var(--dx), var(--dy)) rotate(180deg);
          opacity: 0;
        }
      }

      /* ---------- 首屏小场景：可交互的草地 ---------- */
      .garden {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 152px;
        z-index: 3;
      }

      /* 每一格是一个看不见的落点：悬停才亮一个小方块，说明这里能种 */
      .plot {
        position: absolute;
        width: 36px;
        height: 36px;
        /* 用中心点定位：左右最多各露出 18px，落在 6%~94% 时不会被裁掉 */
        transform: translateX(-50%);
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        display: grid;
        place-items: center;
      }

      .plot::after {
        content: '';
        width: 6px;
        height: 6px;
        background: color-mix(in srgb, var(--ink) 20%, transparent);
        opacity: 0;
        transition: opacity 140ms ease-out;
      }

      .plot:hover::after {
        opacity: 1;
      }

      .plant {
        position: absolute;
        width: 28px;
        height: 28px;
        transform-origin: 50% 100%;
        transition: transform 160ms ease-out;
        pointer-events: none;
      }

      .plant.grown {
        animation: pop 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .plot:hover .plant {
        transform: scale(1.08) rotate(-2deg);
      }

      .plant svg {
        width: 100%;
        height: 100%;
      }

      @keyframes pop {
        from {
          transform: scale(0.45);
        }
        to {
          transform: scale(1);
        }
      }

      /* 蝴蝶与蜜蜂：按各自的时长漂移，点击后飞走、过一会儿再回来 */
      .flutter {
        position: absolute;
        width: 22px;
        height: 20px;
        cursor: pointer;
        animation: wander 11s ease-in-out infinite;
      }

      .flutter svg {
        width: 100%;
        height: 100%;
      }

      .flutter.gone {
        animation: flyaway 700ms ease-out forwards;
      }

      @keyframes wander {
        0% {
          transform: translate(0, 0);
        }
        25% {
          transform: translate(46px, -18px);
        }
        50% {
          transform: translate(96px, 8px);
        }
        75% {
          transform: translate(38px, -26px);
        }
        100% {
          transform: translate(0, 0);
        }
      }

      @keyframes flyaway {
        to {
          transform: translate(40px, -90px) scale(0.6);
          opacity: 0;
        }
      }

      /* 种满之后出现的像素彩虹 */
      .rainbow {
        position: absolute;
        /* 放在天空层里：在正文与山丘之后，不会压住文字 */
        left: 5%;
        bottom: 104px;
        width: 216px;
        height: 48px;
        opacity: 0;
        transform: translateY(10px);
        transition:
          opacity 600ms ease-out,
          transform 600ms ease-out;
        pointer-events: none;
      }

      .rainbow.show {
        opacity: 1;
        transform: none;
      }

      /* 首次进入的提示与种植计数 */
      .garden-hint,
      .garden-count {
        position: absolute;
        bottom: 118px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 5px 11px;
        font-size: 12px;
        color: var(--ink);
        background: color-mix(in srgb, var(--card) 88%, transparent);
        border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
        border-radius: 999px;
        z-index: 4;
      }

      .garden-hint {
        left: 50%;
        transform: translateX(-50%);
        transition: opacity 400ms ease-out;
      }

      .garden-hint.hide {
        opacity: 0;
      }

      .garden-count {
        right: 24px;
        opacity: 0;
        transform: translateY(6px);
        transition:
          opacity 300ms ease-out,
          transform 300ms ease-out;
      }

      .garden-count.show {
        opacity: 1;
        transform: none;
      }

      .garden-count .ico {
        width: 12px;
        height: 12px;
      }

      /* 被戳到的东西统一抖一下 */
      .poke {
        animation: poke 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      /* 点击梨子时飘出来的小气泡："毫无鸭梨" */
      .bubble {
        position: fixed;
        transform: translateX(-50%);
        padding: 4px 11px;
        font-size: 12px;
        color: var(--ink);
        background: color-mix(in srgb, var(--card) 92%, transparent);
        border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
        border-radius: 999px;
        white-space: nowrap;
        pointer-events: none;
        z-index: 99;
        animation: floatup 1600ms ease-out forwards;
      }

      @keyframes floatup {
        to {
          transform: translate(-50%, -46px);
          opacity: 0;
        }
      }

      @keyframes poke {
        0% {
          transform: scale(1);
        }
        40% {
          transform: scale(1.12) rotate(-4deg);
        }
        100% {
          transform: scale(1);
        }
      }

      /* 固定生长的植被与石头：也能戳，但不是落点 */
      .decor {
        position: absolute;
        cursor: pointer;
        transition: transform 160ms ease-out;
      }

      .decor:hover {
        transform: scale(1.06) rotate(-2deg);
      }

      @media (max-width: 900px) {
        .grid-4,
        .spec {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 640px) {
        /* 窄屏：池塘与鸭子整体收窄并左移，避免右边缘溢出被裁 */
        .pond {
          left: 42%;
          width: 168px;
          height: 54px;
          bottom: 18px;
        }

        .swimmer {
          width: 40px;
          height: 30px;
        }

        /* 窄屏文案占满整行，彩虹退到山丘后面，只露一条弧 */
        .rainbow {
          left: auto;
          right: 6%;
          bottom: 2px;
          width: 150px;
          height: 62px;
        }

        .hero h1 {
          font-size: 31px;
        }

        .grid-3,
        .grid-4,
        .spec {
          grid-template-columns: 1fr;
        }

        .mark-stage {
          width: 96px;
          height: 96px;
          border-radius: 28px;
        }

        .mark-stage img {
          width: 72px;
          height: 72px;
        }

        .steps li + li::before {
          left: 52px;
        }
      }

      /* 尊重系统"减弱动态效果" */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
        }

        .js [data-reveal],
        .js [data-reveal] .step-no {
          opacity: 1;
          transform: none;
        }
      }