* { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #367AFF;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* ===== 全局禁止长按选中/拖选高亮与图片拖拽残影 =====
     （#shareImg 用 ID 选择器保留 -webkit-touch-callout: default，长按保存不受影响；
       昵称输入框 #nameInput 保留文本选择） */
  .stage, .stage * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
  }
  #nameInput {
    -webkit-user-select: text;
    user-select: text;
  }

  /* ===== 设计稿舞台：390 × 844（1x 逻辑尺寸），等比缩放适配 ===== */
  .stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 390px;
    height: 844px;
    transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
    transform-origin: center center;
    overflow: hidden; /* 与 Figma 画板一致：出血内容在画板边缘裁剪 */
  }

  /* ===== 屏幕切换 ===== */
  .screen {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
  }
  .screen.active {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease;
  }
  /* 隐藏的屏幕暂停所有 CSS 动画（visibility:hidden 不会停动画，
     主页/加载页的无限装饰动画在后台空转会抢占 GPU/CPU，导致答题页动画掉帧） */
  .screen:not(.active) * { animation-play-state: paused !important; }

  .font-hc { font-family: "寒蝉活黑体 復", "PingFang SC", "Microsoft YaHei", sans-serif; }

  /* ============================================================
     屏幕一：Loading（node 36:917，背景 #EBF1FF）
     ============================================================ */
  #screen-loading { background: #EBF1FF; }

  /* 三个加载图标：.icon（定位）> .rot（旋转轨道）> .scl（缩放轨道）> img */
  .icon { position: absolute; }
  .icon .rot, .icon .scl { width: 100%; height: 100%; }
  .icon img { display: block; width: 100%; height: 100%; }

  /* 粉色花朵（node 36:928），静止态 rotate 45° */
  .icon-flower {
    left: 106px; top: 346.86px;
    width: 68.477px; height: 68.477px;
    display: flex; align-items: center; justify-content: center;
  }
  .icon-flower .rot, .icon-flower .scl { width: 48.421px; height: 48.421px; flex: none; }
  .icon-flower .rot { transform: rotate(45deg); animation: flower-rot 2s infinite; }
  .icon-flower .scl { animation: pop-a 2s infinite; }
  @keyframes flower-rot {
    0%     { transform: rotate(15deg); animation-timing-function: cubic-bezier(0.17, 0.38, 0.5, 1); }
    53.75% { transform: rotate(45deg); animation-timing-function: linear; }
    100%   { transform: rotate(45deg); }
  }

  /* 绿色圆角方块（node 36:937） */
  .icon-square { left: 171.94px; top: 361.8px; width: 38.91px; height: 38.91px; }
  .icon-square .rot { animation: square-rot 2s infinite; }
  .icon-square .scl { animation: pop-b 2s infinite; }
  @keyframes square-rot {
    0%     { transform: rotate(-30deg); animation-timing-function: linear; }
    5%     { transform: rotate(-30deg); animation-timing-function: cubic-bezier(0.17, 0.38, 0.5, 1); }
    57.16% { transform: rotate(0deg);   animation-timing-function: linear; }
    100%   { transform: rotate(0deg); }
  }

  /* 蓝色爱心（node 36:946），静止态 rotate 0.41° */
  .icon-heart {
    left: 221px; top: 361px;
    width: 43.918px; height: 39.638px;
    display: flex; align-items: center; justify-content: center;
  }
  .icon-heart .rot, .icon-heart .scl { width: 43.64px; height: 39.329px; flex: none; }
  .icon-heart .rot { transform: rotate(0.41deg); animation: heart-rot 2s infinite; }
  .icon-heart .scl { animation: pop-c 2s infinite; }
  @keyframes heart-rot {
    0%     { transform: rotate(-29.593deg); animation-timing-function: linear; }
    9.85%  { transform: rotate(-29.593deg); animation-timing-function: cubic-bezier(0.171, 0.382, 0.5, 1); }
    66.46% { transform: rotate(0.407deg);   animation-timing-function: linear; }
    100%   { transform: rotate(0.407deg); }
  }

  /* 缩放轨道：错峰弹出 0 → 1.1 → 0.95 → 1 → 保持 */
  @keyframes pop-a {
    0%     { transform: scale(0);    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
    24.95% { transform: scale(1.1);  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
    42.63% { transform: scale(0.95); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
    59.7%  { transform: scale(1);    animation-timing-function: linear; }
    100%   { transform: scale(1); }
  }
  @keyframes pop-b {
    0%     { transform: scale(0);    animation-timing-function: linear; }
    5%     { transform: scale(0);    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
    35.05% { transform: scale(1.1);  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
    47.63% { transform: scale(0.95); animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
    64.7%  { transform: scale(1);    animation-timing-function: linear; }
    100%   { transform: scale(1); }
  }
  @keyframes pop-c {
    0%     { transform: scale(0);    animation-timing-function: linear; }
    9.85%  { transform: scale(0);    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    35.24% { transform: scale(1.1);  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    52.48% { transform: scale(0.95); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
    74.72% { transform: scale(1);    animation-timing-function: linear; }
    100%   { transform: scale(1); }
  }

  .percent {
    position: absolute;
    left: calc(50% - 27.86px);
    top: 408px;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: #000;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .sound-hint {
    position: absolute;
    left: calc(50% - 77px);
    top: 465px;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: #000;
    white-space: nowrap;
  }

  /* ===== 返回箭头（两个屏幕共用样式）===== */
  .back-btn {
    position: absolute;
    left: 30px;
    top: calc(50% - 350.06px);
    width: 11.421px;
    height: 19.878px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .back-btn::before { content: ""; position: absolute; inset: -14px -18px; }
  .back-btn img { display: block; width: 11.421px; height: 19.878px; }

  /* ============================================================
     屏幕二：主页（node 36:770，背景 #367AFF）
     ============================================================ */
  #screen-home { background: #367AFF; }

  /* 左上角装饰色块（node 36:787，无描边） */
  .deco-corner {
    position: absolute;
    left: -13px; top: -54px;
    width: 88px; height: 126px;
    background: rgba(57, 201, 255, 0.64);
  }

  /* 顶部大云朵（node 36:776）：4s 漂浮 ±3.5px */
  .cloud-top {
    position: absolute;
    left: 4px; top: 49px;
    width: 437px; height: 213px;
    animation: float-cloud 4s linear infinite;
  }
  .cloud-top img {
    position: absolute;
    inset: -1.16% -0.57% -1.12% -0.53%;
    width: 101.1%; height: 102.28%;
    display: block;
  }
  @keyframes float-cloud {
    0%   { translate: 0 0; }
    25%  { translate: 0 -3.5px; }
    50%  { translate: 0 0; }
    75%  { translate: 0 -3.5px; }
    100% { translate: 0 0; }
  }

  /* 雨滴 ×4：4s 漂浮，振幅各不相同（nodes 36:792 / 36:797 / 36:802 / 36:807） */
  .h-drop { position: absolute; }
  .h-drop img { display: block; width: 100%; height: 100%; }
  .drop-1 { left: 47px;  top: 283px; width: 48px; height: 68px; animation: float-d1 4s linear infinite; }
  .drop-2 { left: 165px; top: 239px; width: 48px; height: 68px; animation: float-d2 4s linear infinite; }
  .drop-3 { left: 236px; top: 373px; width: 34px; height: 48px; animation: float-d3 4s linear infinite; }
  .drop-4 { left: 344px; top: 269px; width: 34px; height: 48px; animation: float-d4 4s linear infinite; }
  @keyframes float-d1 {
    0%    { translate: 0 0; }
    4.9%  { translate: 0 0; }
    29.8% { translate: 0 -3px; }
    55%   { translate: 0 0; }
    79.9% { translate: 0 -3px; }
    100%  { translate: 0 -0.607px; }
  }
  @keyframes float-d2 {
    0%     { translate: 0 0; }
    24.95% { translate: 0 -5px; }
    50.1%  { translate: 0 0; }
    75.05% { translate: 0 -5px; }
    100%   { translate: 0 -0.04px; }
  }
  @keyframes float-d3 {
    0%    { translate: 0 0; }
    4.9%  { translate: 0 0; }
    30.1% { translate: 0 -8px; }
    55%   { translate: 0 0; }
    80.2% { translate: 0 -8px; }
    100%  { translate: 0 -1.639px; }
  }
  @keyframes float-d4 {
    0%     { translate: 0 0; }
    25%    { translate: 0 -7px; }
    50%    { translate: 0 0; }
    75.05% { translate: 0 -7px; }
    100%   { translate: 0 -0.014px; }
  }

  /* 闪电（node 36:854）：每 4s 从顶部弹出一次，transform-origin 50% 0% */
  .lightning {
    position: absolute;
    left: 251px; top: 224px;
    width: 64.425px; height: 82.666px;
    display: flex; align-items: center; justify-content: center;
    transform-origin: 50% 0%;
    animation: lightning-pop 4s linear infinite;
  }
  .lightning .tilt {
    transform: rotate(14.88deg);
    width: 47.267px; height: 72.974px;
    flex: none;
  }
  .lightning img { display: block; width: 100%; height: 100%; }
  @keyframes lightning-pop {
    0%      { scale: 0 0;       animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
    9.975%  { scale: 1.1 1.1;   animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
    14.875% { scale: 0.95 0.95; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
    19.95%  { scale: 1 1;       animation-timing-function: linear; }
    100%    { scale: 1 1; }
  }

  /* 标题（整体转曲矢量，含"？"，node 36:808） */
  .title-main { position: absolute; left: 24.49px; top: 92.73px; width: 359.56px; height: 114.264px; }
  .title-main img { display: block; width: 100%; height: 100%; }
  /* 副标题（转曲矢量） */
  .sub-1 { position: absolute; left: 40.6px;  top: 181.13px; width: 77.077px; height: 13.244px; }
  .sub-2 { position: absolute; left: 69.48px; top: 201.09px; width: 82.872px; height: 13.227px; }
  .sub-1 img, .sub-2 img { display: block; width: 100%; height: 100%; }

  /* Russell 胶囊标签 */
  .russell-pill {
    position: absolute; left: 236px; top: 98px;
    width: 102.039px; height: 48.295px;
    display: flex; align-items: center; justify-content: center;
  }
  .russell-pill .tilt { transform: rotate(-7.45deg); width: 98.218px; height: 35.863px; flex: none; }
  .russell-pill img { display: block; width: 100%; height: 100%; }
  .russell-text-img { position: absolute; left: 251.62px; top: 112.08px; width: 70.106px; height: 22.046px; }
  .russell-text-img img { display: block; width: 100%; height: 100%; }

  /* 云朵上的涂鸦表情 */
  .doodle-face  { position: absolute; left: 288.5px; top: 50.5px; width: 18px; height: 59px; }
  .doodle-mouth { position: absolute; left: 297px;   top: 61px;  width: 45px; height: 33.015px; }
  .doodle-mouth img { position: absolute; inset: -6.06% -4.44% -6.06% -5.1%; width: 109.54%; height: 112.12%; display: block; }
  .doodle-face img { display: block; width: 100%; height: 100%; }

  /* 太阳卡片（蓝色底 36:813 + 太阳图 36:815） */
  .sun-card-bg {
    position: absolute; left: 22px; top: 399px;
    width: 115px; height: 115px;
    background: #37ADFF;
    border: 2px solid #000;
  }
  .sun-img { position: absolute; left: 13px; top: 394px; width: 133px; height: 115.979px; }
  .sun-img img { display: block; width: 100%; height: 100%; }

  /* 中央火焰卡片（node 36:819） */
  .fire-card { position: absolute; left: 91px; top: 449px; width: 173.591px; height: 177px; }
  .fire-card img { position: absolute; inset: 0 0 -1.21% -1.24%; width: 101.24%; height: 101.21%; display: block; }

  /* 右侧风卡片（node 36:863） */
  .wind-card { position: absolute; left: 297px; top: 384px; width: 68px; height: 68px; }
  .wind-card img { position: absolute; inset: -2.62% -2.66% -2.7% -2.69%; width: 105.35%; height: 105.32%; display: block; }

  /* 绿色云卡片（36:831，手绘波浪描边矢量，右侧出血由舞台裁剪）+ 风云图 36:879 */
  .cloud-card-bg {
    position: absolute; left: 286.5px; top: 549.5px;
    width: 126px; height: 126px;
  }
  .cloud-card-bg img { display: block; width: 100%; height: 100%; }
  .cloud-wind-img { position: absolute; left: 278px; top: 574px; width: 123.272px; height: 78.633px; }
  .cloud-wind-img img { display: block; width: 100%; height: 100%; }

  /* 冰块卡片（36:847，手绘波浪描边矢量 + 两块冰 36:869 / 36:872） */
  .ice-card-bg {
    position: absolute; left: 38.5px; top: 613.5px;
    width: 72.5px; height: 72.5px;
  }
  .ice-card-bg img { display: block; width: 100%; height: 100%; }
  .ice-big   { position: absolute; left: 48px;   top: 623px;   width: 40.617px; height: 41.913px; }
  .ice-small { position: absolute; left: 73.06px; top: 643.74px; width: 30.567px; height: 31.543px; }
  .ice-big img, .ice-small img { display: block; width: 100%; height: 100%; }

  /* 底部理论标注 */
  .footer-note {
    position: absolute;
    left: calc(50% - 119px);
    top: 705px;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
  }

  /* 开始答题按钮（黑条 36:832 + 黄块 36:833 + 箭头 36:875 + 文案 36:834） */
  .start-btn {
    position: absolute;
    left: 50%;
    top: 727px;
    transform: translateX(-50%);
    width: 260px;
    height: 60px;
    padding: 0;
    border: none;
    background: #000;
    cursor: pointer;
    transition: scale .15s ease;
  }
  .start-btn:active { scale: 0.96; }
  .start-btn .label {
    position: absolute;
    left: 26px; /* 91 - 65(按钮左边距) */
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2.88px;
    color: #FFF;
    white-space: nowrap;
  }
  .start-btn .yellow-block {
    position: absolute;
    left: 190px; /* 255 - 65 */
    top: 9px;    /* 736 - 727 */
    width: 44px;
    height: 44px;
    background: #FFE626;
  }
  .start-btn .arrow {
    position: absolute;
    left: 197px;     /* 262 - 65 */
    top: 18.43px;    /* 745.43 - 727 */
    width: 31px;
    height: 25.091px;
  }
  .start-btn .arrow img { display: block; width: 100%; height: 100%; }

  /* ===== 屏幕三：答题页（Q1-Q6 晾衣杆场景；Q4-Q6 蓝色雨天） ===== */
  /* 白窗帘盖住全场 → 蓝模式下窗帘淡出透出此蓝底 */
  #screen-quiz { background: #43ABFF; }

  /* ============================================================
     固定场景：白色窗帘 + 褶皱微风 + 天空缝隙 + 双杆
     ============================================================ */
  .curtain {
    position: absolute; left: 0; top: -12px;
    width: 390px; height: 856px;
    background: #fff;
  }

  /* 褶皱：transform-origin 在顶部，底部摆幅大于顶部（真实窗帘悬挂动力学） */
  .fold { position: absolute; transform-origin: center top; will-change: transform; }
  .fold-l {
    left: 16.19px; top: 257.44px; width: 71.203px; height: 349.174px;
    animation: flutter-a 3.4s ease-in-out -0.6s infinite alternate;
  }
  .fold-c {
    left: 125.72px; top: 193.59px; width: 41.946px; height: 308.45px;
    animation: flutter-b 2.7s ease-in-out -1.8s infinite alternate;
  }
  .fold-r {
    left: 317.57px; top: 353.96px; width: 62.862px; height: 309.074px;
    display: flex; align-items: center; justify-content: center;
    animation: flutter-c 3.9s ease-in-out -2.5s infinite alternate;
  }
  .fold-r .fold-rot { flex: none; width: 38px; height: 307px; transform: rotate(175.33deg) scaleY(-1); position: relative; }
  .fold-r .fold-rot img { position: absolute; left: -1.227px; top: -1.566px; width: 40.756px; height: 308.883px; }
  .fold-br {
    left: 281.29px; top: 565px; width: 65.599px; height: 307.368px;
    display: flex; align-items: center; justify-content: center;
    animation: flutter-a 3.1s ease-in-out -1.2s infinite alternate;
  }
  .fold-br .fold-rot { flex: none; width: 26.508px; height: 306.5px; transform: rotate(172.63deg) scaleY(-1); position: relative; }
  .fold-br .fold-rot img { position: absolute; left: -1.103px; top: -1.41px; width: 28.692px; height: 308.637px; }

  @keyframes flutter-a {
    from { transform: translateX(-3px)   skewX(-0.5deg); }
    to   { transform: translateX(3px)    skewX(0.5deg); }
  }
  @keyframes flutter-b {
    from { transform: translateX(-2.2px) skewX(-0.35deg); }
    to   { transform: translateX(2.2px)  skewX(0.35deg); }
  }
  @keyframes flutter-c {
    from { transform: translateX(-2.6px) skewX(0.4deg); }
    to   { transform: translateX(2.6px)  skewX(-0.4deg); }
  }

  .sky-gap {
    position: absolute; left: 160px; top: 214px; width: 65px; height: 630px;
    transform-origin: center top;
    animation: gap-breathe 3.6s ease-in-out -0.9s infinite alternate;
  }
  @keyframes gap-breathe {
    from { transform: translateX(-1.5px) scaleX(0.99); }
    to   { transform: translateX(1.5px)  scaleX(1.03); }
  }

  /* 晾衣杆（两题共用同一对杆，静止） */
  .rod { position: absolute; }
  .rod-a { left: -1.48px; top: 252.76px; width: 394.121px; height: 45.126px; }
  .rod-b { left: -0.22px; top: 432.52px; width: 425.221px; height: 64.97px; }

  /* ============================================================
     头部 + 页脚（跨题复用）
     ============================================================ */
  .sky-top {
    position: absolute; left: 0; top: -12px;
    width: 390px; height: 179px;
    background: #43abff;
  }
  .cloud { position: absolute; left: -4px; top: 62px; width: 388px; height: 178px; }
  .badge { position: absolute; left: 108.89px; top: 69.94px; width: 46.231px; height: 15.76px; }
  .back {
    position: absolute; left: 14px; top: 50px; z-index: 20; /* 压过挂饰图区（Q3 风筝绳等会伸到左上角） */
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .back img { width: 11.421px; height: 19.878px; }
  .q-footer {
    position: absolute; left: calc(50% - 58px); top: 811px;
    font-size: 12px; font-weight: 700; color: #000; white-space: nowrap;
  }

  /* ============================================================
     题目容器：题干 + 题号 + 两个选项（逐题切换）
     ============================================================ */
  .q-opts { position: absolute; inset: 0; display: none; }
  .q-opts.cur { display: block; }

  .q-title { position: absolute; opacity: 0; transition: opacity .3s ease .1s; }
  .q-opts.cur .q-title { opacity: 1; }
  .q-title-1 { left: 37px;    top: 127px; width: 315.019px; height: 60.619px; }
  .q-title-2 { left: 38.98px; top: 128px; width: 313.677px; height: 61.771px; }
  .q-title-3 { left: 38px;    top: 129.65px; width: 318.998px; height: 59.872px; }
  .q-title-4 { left: 38.28px; top: 134.6px; width: 316.737px; height: 55.727px; }

  .page-num {
    position: absolute; left: 26px; top: 787px;
    width: 30px; height: 30px;
  }
  .page-num > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
  .page-num .num { position: absolute; }
  .num-1 { left: 11.5px;  top: 5.5px;   width: 7px;     height: 19px; }
  .num-2 { left: 9.77px;  top: 5.89px;  width: 12.018px; height: 18.443px; }
  .num-3 { left: 8.52px;  top: 5.98px;  width: 12.922px; height: 18.618px; }
  .num-4 { left: 7.38px;  top: 5.93px;  width: 13.632px; height: 18.336px; }

  /* ============================================================
     选项通用：.opt 全舞台透明挂点层；.hang 承载摆动/滑入/滑出/掉落
     ============================================================ */
  .opt {
    position: absolute; inset: 0;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  /* 只给当前题的挂饰提升合成层：12 个全屏 390×844 图层在低显存手机上
     会触发位图重建，表现为动画瞬间"跳变/放大" */
  .hang { position: absolute; inset: 0; }
  .q-opts.cur .hang { will-change: transform; }
  .hang img, .hang .hook-a { position: absolute; pointer-events: auto; }

  /* ---------- Q1 A：衣架 + 粉色毛巾 ---------- */
  .hang-a {
    transform-origin: 75px 273px; /* 挂钩与杆接触点 */
    animation: swing-a 3.1s ease-in-out -0.4s infinite alternate;
  }
  .hanger-unit { position: absolute; inset: 0; transform-origin: 75px 273px; }
  .hanger-a { left: 22.33px; top: 274.01px; width: 189.343px; height: 243.979px; }
  .hook-a {
    left: 59.69px; top: 281.6px; width: 21.869px; height: 12.768px;
    background: #ffa920; border-radius: 6.384px;
  }
  .towel-a { left: 22.33px; top: 274.01px; width: 189.343px; height: 243.979px; }

  /* ---------- Q1 B：黄色 T 恤 + 衣夹 ---------- */
  .hang-b {
    transform-origin: 304px 468px; /* 两衣夹之间的杆上点 */
    animation: swing-b 2.6s ease-in-out -1.5s infinite alternate;
  }
  .shirt-unit { position: absolute; inset: 0; transform-origin: 297px 570px; }
  .shirt-b      { left: 186.33px; top: 490.19px; width: 221.138px; height: 159.721px; }
  .text-b       { left: 224px;    top: 563px;    width: 99.753px;  height: 69.165px; }
  .letter-b     { left: 281.28px; top: 517.86px; width: 31px;      height: 34px;     transform: rotate(-12deg); }
  .star-b       { left: 311px;    top: 515px;    width: 20px;      height: 19px; }
  .clips-b { position: absolute; inset: 0; }
  .clipl-stroke { left: 259.98px; top: 462.91px; width: 11.042px;  height: 34.181px; }
  .clipl-fill   { left: 262.52px; top: 465.46px; width: 11.967px;  height: 31.084px; }
  /* 右衣夹在 Figma 里带旋转：定位到包围盒中心后绕中心转 22.2° */
  .clipr-stroke { left: 349.83px; top: 473.07px; width: 11.042px;  height: 34.181px; transform: rotate(22.2deg); }
  .clipr-fill   { left: 350.63px; top: 476.68px; width: 11.967px;  height: 31.084px; transform: rotate(22.2deg); }

  /* ---------- Q2 A：红色爱心挂饰（内容自带静态倾斜 -14.79°） ---------- */
  .hang2-a {
    transform-origin: 150px 268px; /* 挂环与杆接触点 */
    animation: swing-a 3.3s ease-in-out -1s infinite alternate;
  }
  .rot-a2 {
    position: absolute; left: 17.69px; top: 235.35px;
    width: 393.803px; height: 247.184px;
    transform: rotate(-14.79deg);
  }
  .q2-heart-a { position: absolute; left: -1.18px; top: 0; width: 394.969px; height: 248.245px; }

  /* ---------- Q2 B：紫色爱心挂饰（静态倾斜 22.32°，B 字母单独 12.02°） ---------- */
  .hang2-b {
    transform-origin: 255px 472px; /* 挂环与杆接触点 */
    animation: swing-b 2.8s ease-in-out -0.2s infinite alternate;
  }
  .rot-b2 {
    position: absolute; left: 168.84px; top: 474.93px;
    width: 223.684px; height: 222.356px;
    transform: rotate(22.32deg);
  }
  .q2-heart-b { position: absolute; inset: 0; width: 100%; height: 100%; }
  .strap-b2  { left: 245.76px; top: 468.52px; width: 14.103px; height: 5.073px; }

  /* ---------- Q2 杆上黄色遮挡小段：静态挂在杆上，不随待机摆动（摆幅 <0.5px 无感知），
       划入/滑出时与所属爱心共用 transform-origin → 运动轨迹完全一致；
       所属爱心掉落时它不跟掉，原地淡出 ---------- */
  .strap, .strap img { pointer-events: none; }
  .strap-a2 { transform-origin: 150px 268px; } /* 同 .hang2-a */
  .strap-b2w { transform-origin: 255px 472px; } /* 同 .hang2-b */

  /* ---------- Q3 A：橙色云朵挂饰（静态倾斜 -7.83° 在 .rot 层） ---------- */
  .hang3-a {
    transform-origin: 179px 274px; /* 挂带与杆 A 接触点 */
    animation: swing-a 3.5s ease-in-out -2.1s infinite alternate;
  }
  .rot-a3 {
    position: absolute; left: -1.81px; top: 259.26px;
    width: 253.331px; height: 236.396px;
    transform: rotate(-7.83deg);
  }
  .q3-cloud-a { position: absolute; left: 10.838px; top: 14.506px; width: 231.452px; height: 209.376px; }

  /* ---------- Q3 B：蓝色云朵挂饰（静态倾斜 3.41° 在 .rot 层，B 字母单独 12.02°） ---------- */
  .hang3-b {
    transform-origin: 250px 470px; /* 挂带与杆 B 接触点 */
    animation: swing-b 2.9s ease-in-out -0.7s infinite alternate;
  }
  .rot-b3 {
    position: absolute; left: 147px; top: 456px;
    width: 245.435px; height: 248.124px;
    transform: rotate(3.41deg);
  }
  .q3-cloud-b { position: absolute; left: 4.224px; top: 6.687px; width: 237.05px; height: 237.246px; }

  /* Q3 杆上黄色遮挡小段（A 侧为 Figma 纯色矩形 → CSS 绘制） */
  .strap-a3 { transform-origin: 179px 274px; } /* 同 .hang3-a */
  .strap-rect-a3 {
    position: absolute; left: 166.37px; top: 272.04px;
    width: 24.68px; height: 9.731px;
    background: #ffa920; transform: rotate(-4.94deg);
  }
  .strap-b3w { transform-origin: 250px 470px; } /* 同 .hang3-b */
  .strap-b3 { left: 243px; top: 468px; width: 14.103px; height: 5.073px; }
  .hang.strap-fade { animation: strap-fade .3s ease .12s both; }
  @keyframes strap-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  .letter-b2 { left: 246.92px; top: 635.08px; width: 28.281px; height: 31.018px; transform: rotate(12.02deg); }
  .star-b2   { left: 278px;    top: 638px;    width: 18px;     height: 17px; }

  /* 待机单摆：幅度 ±1° 以内，保证文字清晰可读 */
  @keyframes swing-a {
    from { transform: rotate(-1.1deg); }
    to   { transform: rotate(1.1deg); }
  }
  @keyframes swing-b {
    from { transform: rotate(0.9deg); }
    to   { transform: rotate(-0.9deg); }
  }

  /* ============================================================
     进场：沿杆划入（A 从右上往左下，B 从左上往右下；A 先 B 后）
     快速减速 + 小幅过冲单摆稳态，单个 .68s，B 延迟 .32s，整体约 1s
     ============================================================ */
  .hang.enter-a { animation: in-a .68s both; }
  @keyframes in-a {
    0%   { transform: translate(480px, -41px) rotate(5deg); animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
    78%  { transform: translate(-7px, 1px) rotate(-.9deg);  animation-timing-function: ease-in-out; }
    100% { transform: translate(0, 0) rotate(0deg); }
  }
  .hang.enter-b { animation: in-b .68s .32s both; }
  @keyframes in-b {
    0%   { transform: translate(-480px, -59px) rotate(-5deg); animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
    78%  { transform: translate(7px, 1px) rotate(.9deg);      animation-timing-function: ease-in-out; }
    100% { transform: translate(0, 0) rotate(0deg); }
  }

  /* ============================================================
     离场 - 选中的一侧：沿杆滑出（先反向轻顿 → 加速 → 惯性前摆）
     ============================================================ */
  .hang.fly-a, .hanger-unit.fly { animation: fly-a .78s both; }
  @keyframes fly-a {
    0%   { transform: translate(0, 0) rotate(0deg);        animation-timing-function: cubic-bezier(.5, .1, .6, .4); }
    14%  { transform: translate(9px, -2px) rotate(1.8deg); animation-timing-function: cubic-bezier(.6, .04, .84, .38); }
    100% { transform: translate(-470px, 41px) rotate(-7deg); }
  }
  .hang.fly-b { animation: fly-b .78s both; }
  @keyframes fly-b {
    0%   { transform: translate(0, 0) rotate(0deg);         animation-timing-function: cubic-bezier(.5, .1, .6, .4); }
    14%  { transform: translate(-8px, -1px) rotate(-1.5deg); animation-timing-function: cubic-bezier(.6, .04, .84, .38); }
    100% { transform: translate(470px, 58px) rotate(6deg); }
  }

  /* ============================================================
     离场 - 未选中的一侧：从衣架/夹子上脱落，流畅直落出画面
     单段缓入 = 初速 0 → 重力持续加速（无分段、无顿挫）
     ============================================================ */
  /* Q1 B 的 T 恤（稍重，微微左飘） */
  .shirt-unit.drop { animation: drop-shirt 1.05s both; }
  @keyframes drop-shirt {
    0%   { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.55, .05, .8, .45); }
    100% { transform: translate(-18px, 480px) rotate(-14deg); }
  }
  /* Q1 A 的毛巾（较轻，落得稍慢、飘一点） */
  .towel-a.drop { animation: drop-towel 1.15s both; }
  @keyframes drop-towel {
    0%   { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.5, .04, .78, .42); }
    100% { transform: translate(-26px, 640px) rotate(11deg); }
  }
  /* Q2 B 的紫色爱心 / Q3 B 的蓝色云朵 / Q4 B 的黄色吊牌 / Q5 B 的沙发 / Q6 B 的黄帽小人 */
  .hang2-b.drop, .hang3-b.drop, .hang4-b.drop, .hang5-b.drop, .hang6-b.drop { animation: drop-heart-b 1.05s both; }
  @keyframes drop-heart-b {
    0%   { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.55, .05, .8, .45); }
    100% { transform: translate(-20px, 500px) rotate(-13deg); }
  }
  /* Q2 A 的红色爱心 / Q3 A 的橙色云朵 / Q4 A 的橙色云朵 / Q5 A 的跑步机 / Q6 A 的绿帽小人 */
  .hang2-a.drop, .hang3-a.drop, .hang4-a.drop, .hang5-a.drop, .hang6-a.drop { animation: drop-heart-a 1.1s both; }
  @keyframes drop-heart-a {
    0%   { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.5, .04, .78, .42); }
    100% { transform: translate(-24px, 660px) rotate(10deg); }
  }

  /* Q1 选 A 后：留在杆上的两枚衣夹沿杆向右滑出画面 */
  .clips-b.slide-out { animation: clips-out .5s both; }
  @keyframes clips-out {
    0%   { transform: translate(0, 0); animation-timing-function: cubic-bezier(.5, .05, .8, .4); }
    100% { transform: translate(480px, 59px); }
  }

  /* 尊重系统减弱动态偏好 */
  @media (prefers-reduced-motion: reduce) {
    .fold, .sky-gap, .hang { animation: none !important; }
  }

  /* ============================================================
     Q4/Q5 蓝色雨天场景：窗帘/褶皱/天空缝隙快速淡出透出蓝底，
     但双杆保留（选项仍挂在杆上）、文字页脚保留；雨随蓝模式淡入
     ============================================================ */
  .curtain, .fold, .sky-gap { transition: opacity .45s ease; }
  #screen-quiz.blue-mode .curtain,
  #screen-quiz.blue-mode .fold,
  #screen-quiz.blue-mode .sky-gap { opacity: 0; }

  /* 雨（canvas 程序化，舞台层常驻，蓝模式下淡入；Q4→Q5 无缝连续） */
  .rain {
    position: absolute; left: 0; top: 0;
    width: 390px; height: 844px;
    pointer-events: none;
    opacity: 0; transition: opacity .45s ease;
  }
  #screen-quiz.rain-mode .rain,
  #screen-quiz.snow-mode .rain { opacity: 1; }

  /* ============================================================
     Q2 背景：飞鸟（node 98:7073）—— 4 只白鸟统一向左飞，
     各自速度/高度/相位不同，穿屏循环；img 层叠轻微起伏+摆翼
     ============================================================ */
  .bg-birds, .bg-kites, .bg-clouds {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0; transition: opacity .45s ease;
  }
  #screen-quiz[data-q="2"] .bg-birds,
  #screen-quiz[data-q="3"] .bg-kites { opacity: 1; }
  .bird, .kite { position: absolute; left: 0; }
  .bird img, .kite img { display: block; width: 100%; height: 100%; }

  /* 飞行主体：从屏右外匀速穿到屏左外，略微下滑（滑翔感） */
  @keyframes fly-b1 { from { transform: translate(430px, 0); } to { transform: translate(-130px, 26px); } }
  @keyframes fly-b2 { from { transform: translate(450px, 0); } to { transform: translate(-140px, 18px); } }
  @keyframes fly-b3 { from { transform: translate(430px, 0); } to { transform: translate(-110px, 30px); } }
  @keyframes fly-b4 { from { transform: translate(440px, 0); } to { transform: translate(-115px, 22px); } }
  /* 起伏摆翼（套在 img 上，与位移叠加，周期各不相同） */
  @keyframes bird-bob-a { from { transform: translateY(-5px) rotate(-2.5deg); } to { transform: translateY(6px) rotate(2deg); } }
  @keyframes bird-bob-b { from { transform: translateY(-7px) rotate(2deg); } to { transform: translateY(5px) rotate(-2deg); } }

  .bird-1 { top: 527px; width: 56px; height: 68px; }
  .bird-2 { top: 293px; width: 71px; height: 88px; }
  .bird-3 { top: 726px; width: 44px; height: 54px; }
  .bird-4 { top: 674px; width: 44px; height: 54px; }
  /* 动画只在本题显示时运行（隐藏层零开销）；负延迟让首帧鸟群正好落在设计稿位置附近 */
  #screen-quiz[data-q="2"] .bird-1 { animation: fly-b1 26s linear -18.6s infinite; }
  #screen-quiz[data-q="2"] .bird-2 { animation: fly-b2 30s linear -10.2s infinite; }
  #screen-quiz[data-q="2"] .bird-3 { animation: fly-b3 34s linear -18.9s infinite; }
  #screen-quiz[data-q="2"] .bird-4 { animation: fly-b4 38s linear -7.2s infinite; }
  #screen-quiz[data-q="2"] .bird-1 img { animation: bird-bob-a 2.4s ease-in-out -0.7s infinite alternate; }
  #screen-quiz[data-q="2"] .bird-2 img { animation: bird-bob-b 3.1s ease-in-out -1.9s infinite alternate; }
  #screen-quiz[data-q="2"] .bird-3 img { animation: bird-bob-a 2.1s ease-in-out -1.2s infinite alternate; }
  #screen-quiz[data-q="2"] .bird-4 img { animation: bird-bob-b 2.8s ease-in-out -0.3s infinite alternate; }

  /* ============================================================
     Q3 背景：风筝（node 98:7227）—— 4 只风筝以线末端为支点
     钟摆式飘动，周期/相位/摆幅各不相同，流畅循环
     ============================================================ */
  @keyframes kite-sway-1 { from { transform: rotate(-1.8deg) translate(-4px, 2px); } to { transform: rotate(2.2deg) translate(6px, -3px); } }
  @keyframes kite-sway-2 { from { transform: rotate(2.4deg) translate(5px, -2px); } to { transform: rotate(-2deg) translate(-7px, 3px); } }
  @keyframes kite-sway-3 { from { transform: rotate(-1.4deg) translate(-3px, 1px); } to { transform: rotate(1.8deg) translate(5px, -2px); } }
  @keyframes kite-sway-4 { from { transform: rotate(2deg) translate(4px, -3px); } to { transform: rotate(-2.3deg) translate(-5px, 2px); } }

  .kite { transform-origin: 0% 100%; } /* 支点在线的末端：长半径摆动更真实 */
  .kite-top    { left: -1px;  top: 217px; width: 312px; height: 307px; }
  .kite-mid    { left: -1px;  top: 442px; width: 267px; height: 252px; }
  .kite-bl     { left: 0;     top: 665px; width: 380px; height: 209px; }
  .kite-corner { left: 0;     top: 678px; width: 182px; height: 166px; }
  #screen-quiz[data-q="3"] .kite-top    { animation: kite-sway-1 8.2s ease-in-out -1.3s infinite alternate; }
  #screen-quiz[data-q="3"] .kite-mid    { animation: kite-sway-2 6.7s ease-in-out -3.9s infinite alternate; }
  #screen-quiz[data-q="3"] .kite-bl     { animation: kite-sway-3 9.4s ease-in-out -5.2s infinite alternate; }
  #screen-quiz[data-q="3"] .kite-corner { animation: kite-sway-4 7.3s ease-in-out -2.6s infinite alternate; }

  /* ============================================================
     Q5 背景：云朵（参考 node 99:7535 的云形）—— 3 朵云随风缓慢右漂，
     穿屏循环，速度/相位/起伏各不相同
     ============================================================ */
  #screen-quiz[data-q="5"] .bg-clouds { opacity: 1; }
  .bg-cloud { position: absolute; left: 0; }
  .bg-cloud img { display: block; width: 100%; height: 100%; }
  @keyframes cloud-drift-1 { from { transform: translate(-192px, 0); } to { transform: translate(430px, 0); } }
  @keyframes cloud-drift-2 { from { transform: translate(-181px, 0); } to { transform: translate(430px, 0); } }
  @keyframes cloud-drift-3 { from { transform: translate(-293px, 0); } to { transform: translate(430px, 0); } }
  @keyframes cloud-bob-a { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
  @keyframes cloud-bob-b { from { transform: translateY(5px); } to { transform: translateY(-4px); } }
  .cl-1 { top: 594px; width: 152px; height: 63px; }
  .cl-2 { top: 359px; width: 141px; height: 65px; }
  .cl-3 { top: 700px; width: 253px; height: 80px; }
  /* 动画只在本题显示时运行；负延迟让首帧云朵落在设计稿位置附近 */
  #screen-quiz[data-q="5"] .cl-1 { animation: cloud-drift-1 52s linear -14.2s infinite; }
  #screen-quiz[data-q="5"] .cl-2 { animation: cloud-drift-2 68s linear -51.1s infinite; }
  #screen-quiz[data-q="5"] .cl-3 { animation: cloud-drift-3 60s linear -40.2s infinite; }
  #screen-quiz[data-q="5"] .cl-1 img { animation: cloud-bob-a 5.6s ease-in-out -2.1s infinite alternate; }
  #screen-quiz[data-q="5"] .cl-2 img { animation: cloud-bob-b 6.8s ease-in-out -1.4s infinite alternate; }
  #screen-quiz[data-q="5"] .cl-3 img { animation: cloud-bob-a 7.9s ease-in-out -4.7s infinite alternate; }

  /* ---------- Q4 A：橙色云朵挂饰（静态倾斜 -14.79° 在 .rot 层，杆已剥离用共享杆） ---------- */
  .hang4-a {
    transform-origin: 97px 277px; /* 挂带与杆 A 接触点 */
    animation: swing-a 3.4s ease-in-out -1.7s infinite alternate;
  }
  .rot-a4 {
    position: absolute; left: -34.91px; top: 183.1px;
    width: 468.68px; height: 342.022px;
    transform: rotate(-14.79deg);
  }
  .q4-cloud-a { position: absolute; left: 24.005px; top: 49.66px; width: 421.836px; height: 242.693px; }

  /* ---------- Q4 B：黄色吊牌挂饰（无旋转） ---------- */
  .hang4-b {
    transform-origin: 272px 470px; /* 挂钩与杆 B 接触点 */
    animation: swing-b 2.7s ease-in-out -0.9s infinite alternate;
  }
  .q4-tag-b { position: absolute; left: 186.96px; top: 471.33px; width: 186.362px; height: 205.038px; }

  /* Q4 A 杆上黄色遮挡小段：与 .hang4-a 同原点，跟滑不跟掉 */
  .strap-a4 { transform-origin: 97px 277px; }

  /* Q4 B 杆上黄色遮挡小段：与 .hang4-b 同原点，跟滑不跟掉；
     SVG 与吊牌同 viewBox → 定位/尺寸与 .q4-tag-b 完全一致 */
  .strap-b4w { transform-origin: 272px 470px; }
  .strap-b4 { position: absolute; left: 186.96px; top: 471.33px; width: 186.362px; height: 205.038px; }

  /* ---------- Q5（node 99:7535）：蓝色底 + 晾衣杆框架 · 厨师小人 / 睡帽小人 ---------- */
  .q-title-5 { left: 40px; top: 132.95px; width: 307.999px; height: 58.479px; }
  .num-5 { left: 8.5px; top: 5.5px; width: 13px; height: 19px; }

  /* Q5 A：厨师小人挂饰（挂钩烘焙在 SVG 内，静止倾斜已烘焙） */
  .hang5-a {
    transform-origin: 120.7px 282.3px; /* 挂钩与杆 A 接触点（遮挡段中心） */
    animation: swing-a 3.2s ease-in-out -1.3s infinite alternate;
  }
  .q5-opt-a { position: absolute; left: -1px; top: 243.56px; width: 328px; height: 292px; }

  /* Q5 B：睡帽小人挂饰（挂钩烘焙在 SVG 内） */
  .hang5-b {
    transform-origin: 343.8px 484.3px; /* 挂钩与杆 B 接触点（遮挡段中心） */
    animation: swing-b 2.8s ease-in-out -0.5s infinite alternate;
  }
  .q5-opt-b { position: absolute; left: 160px; top: 470.72px; width: 230px; height: 235px; }

  /* Q5 杆上遮挡小段：与所属挂饰同原点，跟滑不跟掉 */
  .strap-a5w { transform-origin: 120.7px 282.3px; } /* 同 .hang5-a */
  .strap-a5 { position: absolute; left: -1px; top: 243.56px; width: 328px; height: 292px; } /* 同 .q5-opt-a 坐标系 */
  .strap-b5w { transform-origin: 343.8px 484.3px; } /* 同 .hang5-b */
  .strap-b5 { left: 336.12px; top: 481.67px; width: 15.354px; height: 5.244px; transform: rotate(-0.24deg); }

  /* ---------- Q6（node 96:6390）：蓝色雨天 + 晾衣杆框架 · 绿帽喊喇叭 / 黄帽抱臂 ---------- */
  .q-title-6 { left: 40.34px; top: 135.78px; width: 287.059px; height: 57.236px; }
  .num-6 { left: 8.03px; top: 5.93px; width: 13.114px; height: 18.516px; }

  /* Q6 A：绿帽小人挂饰（挂钩烘焙在 SVG 内） */
  .hang6-a {
    transform-origin: 161px 278px; /* 挂钩与杆 A 接触点（遮挡段中心） */
    animation: swing-a 3.3s ease-in-out -2.4s infinite alternate;
  }
  .q6-opt-a { position: absolute; left: 31.93px; top: 265.02px; width: 235px; height: 265px; }

  /* Q6 B：黄帽小人挂饰（挂钩烘焙在 SVG 内） */
  .hang6-b {
    transform-origin: 267.5px 473.1px; /* 挂钩与杆 B 接触点（遮挡段中心） */
    animation: swing-b 2.9s ease-in-out -1.1s infinite alternate;
  }
  .q6-opt-b { position: absolute; left: 171px; top: 467.75px; width: 194px; height: 253px; }

  /* Q6 杆上黄色遮挡小段：与所属挂饰同原点，跟滑不跟掉 */
  .strap-a6 { transform-origin: 161px 278px; } /* 同 .hang6-a */
  .strap-rect-a6 {
    position: absolute; left: 148.36px; top: 273.01px;
    width: 24.68px; height: 9.731px;
    background: #ffa920; transform: rotate(-4.78deg);
  }
  .strap-b6w { transform-origin: 267.5px 473.1px; } /* 同 .hang6-b */
  .strap-b6 { left: 260px; top: 470.61px; width: 15.012px; height: 5.034px; transform: rotate(-0.69deg); }

  /* ===== 屏幕四：输入名称（node 36:1580） ===== */
  #screen-name { background: #43ABFF; }
  .name-hero { position: absolute; left: 26px; top: 153px; width: 359px; height: 288px; }
  .name-hero img { position: absolute; inset: -0.88% -0.71% -0.52% -0.72%; display: block; width: 100%; height: 100%; }
  /* 弧形文字（已转曲矢量，node 66:499 / 66:511） */
  .name-arc { position: absolute; left: 34.45px; top: 122.4px; width: 207px; height: 100.246px; }
  .name-russell { position: absolute; left: 222.83px; top: 288.1px; width: 78.83px; height: 34.948px; }
  .name-arc img, .name-russell img { display: block; width: 100%; height: 100%; }
  /* 占位提示（转曲矢量，node 66:520），输入框有内容时隐藏 */
  .name-ph { position: absolute; left: 146px; top: 476.78px; width: 97.66px; height: 18.8px; pointer-events: none; transition: opacity .15s ease; }
  .name-ph img { display: block; width: 100%; height: 100%; }
  .name-ph.hidden { opacity: 0; }
  .name-input {
    position: absolute; left: 70px; top: 463px; width: 250px; height: 48px;
    background: #fff; border: 3px solid #000; border-radius: 45px;
    padding: 0 20px; box-sizing: border-box;
    font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 20px; font-weight: 600; text-align: center; color: #000;
    outline: none;
  }
  .name-submit {
    position: absolute; left: calc(50% + 0.5px); top: 541px; translate: -50% 0;
    width: 87px; height: 87px; border-radius: 43.5px;
    background: #1262ff; border: 3px solid #000;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: scale .15s ease;
  }
  .name-submit:active { scale: 0.94; }
  .name-submit .arrow { width: 47px; height: 44.183px; flex: none; }
  .name-submit .arrow img { display: block; width: 100%; height: 100%; }
  .name-submit-label {
    position: absolute; left: calc(50% - 32px); top: 635px;
    font-size: 16px; font-weight: 700; color: #2f2f2f;
  }

  /* ===== 屏幕六：测试结果（node 36:1115 等 8 个变体，固定版式 + 按类型换插画/文字） ===== */
  #screen-result { background: #ebf7ff; }
  /* 头部/粉条文字（已转曲矢量，8 页共用） */
  .res-head-img { position: absolute; top: 106.48px; }
  .res-head-img img, .res-pink-img img, .res-img img { display: block; width: 100%; height: 100%; }
  .res-card { position: absolute; left: 44px; top: 127px; width: 310px; height: 540px; background: #cae1ff; }
  .res-band { position: absolute; left: 44px; top: 127px; width: 310px; height: 52px; background: #2d69ff; }
  .res-name {
    position: absolute; left: 58px; top: 137px; white-space: nowrap;
    font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 24px; font-weight: 700; color: #fff;
  }
  /* 插画与转曲文字均由 JS 按类型注入（绝对定位于 screen 内） */
  .res-illus .il, .res-img { position: absolute; }
  .res-illus img { display: block; width: 100%; height: 100%; }
  .res-quote-band { position: absolute; left: 44px; top: 352px; width: 310px; height: 86px; background: #fff476; }
  .res-quote {
    position: absolute; left: 47px; top: 364px; width: 306px; height: 42px; margin: 0;
    font-size: 14px; font-weight: 700; color: #000; line-height: 1.5;
  }
  .res-tags-band { position: absolute; left: 44px; top: 418px; width: 135px; height: 210px; background: #c5fd44; }
  .res-tag-cn { position: absolute; left: 111.5px; translate: -50% -50%; font-size: 20px; font-weight: 800; color: #000; white-space: nowrap; }
  .res-tag-en { position: absolute; left: 112px; translate: -50% -50%; font-size: 10px; font-weight: 800; color: #000; white-space: nowrap; }
  .res-slogan-band { position: absolute; left: 187px; top: 446px; width: 167px; height: 221px; background: #d9ffce; }
  .res-slogan-en-line { position: absolute; left: 350px; translate: -100% 0; font-size: 12px; font-weight: 800; color: #000; white-space: nowrap; line-height: 1; }
  .res-pink { position: absolute; left: 44px; top: 636px; width: 135px; height: 31px; background: #ff97ec; }
  .res-pink-img { position: absolute; left: 67.31px; top: 647.49px; width: 86.37px; height: 9.448px; }
  /* 二维码占位（纯色方块，替换方式见 README/交付说明：85×85 @1x，建议 255×255 @3x 图） */
  .res-qr { position: absolute; left: 269px; top: 582px; width: 85px; height: 85px; background: #cae1ff; overflow: hidden; }
  .res-qr img { display: block; width: 100%; height: 100%; }
  .res-arrow-long { position: absolute; left: 195px; top: 648.32px; width: 59.5px; height: 7.364px; display: block; pointer-events: none; }
  .res-save {
    position: absolute; left: 87px; top: 732px; width: 210px; height: 48px;
    background: #1262ff; border: 3px solid #000; border-radius: 46px;
    font-size: 16px; font-weight: 800; color: #fff;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: scale .15s ease;
  }
  .res-save:active { scale: 0.94; }

  /* ===== 保存结果浮层（node 36:1529）：暗化模糊背景 + 白框结果卡片 + 长按保存 ===== */
  #share-overlay {
    position: absolute; inset: 0; z-index: 50; display: none;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    user-select: none; -webkit-user-select: none;
  }
  #share-overlay.show { display: block; }
  .share-white { position: absolute; left: 34px; top: 94px; width: 330px; height: 583px; background: #fff; }
  /* 内容与结果页同坐标，整体偏移 (-1.26, -1) 对齐画板 */
  #shareInner { position: absolute; left: -1.26px; top: -1px; }
  #shareImg { position: absolute; left: 34px; top: 94px; width: 330px; height: 583px; display: block; -webkit-touch-callout: default; }
  .share-hint {
    position: absolute; left: 0; top: 695px; width: 100%; margin: 0; text-align: center;
    font-size: 16px; font-weight: 800; color: #fff; pointer-events: none;
  }
  .res-retest {
    position: absolute; left: 24px; top: 726px; width: 74px; height: 58px;
    padding: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .rt-icon { position: absolute; left: 5px; top: 6px; width: 31px; height: 35.518px; }
  .rt-icon img { display: block; width: 100%; height: 100%; }
  .rt-text { position: absolute; left: 8px; top: 41px; font-size: 12px; font-weight: 800; color: #565656; }
  .res-invite {
    position: absolute; left: 315px; top: 726px; width: 52px; height: 56px;
    padding: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .ri-icon { position: absolute; left: 10.21px; top: 7px; width: 32.763px; height: 32.593px; display: block; }
  .ri-text { position: absolute; left: 3px; top: 41px; font-size: 12px; font-weight: 800; color: #565656; white-space: nowrap; }

  /* ===== 退出确认弹窗（node 103:8312）：黑遮罩淡出淡入 + 内容 缩放50→100% / 透明0→100%，1s ===== */
  .quit-mask {
    position: absolute; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
  }
  .quit-mask.show { opacity: 1; pointer-events: auto; }
  .quit-pop { position: absolute; inset: 0; opacity: 0; transform: scale(0.5); }
  .quit-mask.show .quit-pop { animation: quit-pop-in 1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* 强 ease-out：起步快、后段收敛，无过冲 */
  @keyframes quit-pop-in {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
  }
  .quit-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

  /* 心上进度 n/6：三个文本各自定位（稿 103:8585/8586/8587），旋转 12.77° */
  .quit-prog span {
    position: absolute; transform: translate(-50%, -50%) rotate(12.77deg);
    font-family: 'PingFang SC', sans-serif; font-weight: 900; color: #fff;
    line-height: 1; white-space: nowrap; pointer-events: none;
  }
  .qp-n { left: 158.97px; top: 463.94px; font-size: 64px; }
  .qp-slash { left: 179.11px; top: 486.07px; font-size: 48px; }
  .qp-total { left: 201.55px; top: 492.62px; font-size: 48px; }

  .quit-btn {
    position: absolute; left: 84px; width: 220px;
    border: 3px solid #000; border-radius: 29px;
    font-family: 'PingFang SC', sans-serif; font-size: 16px; font-weight: 900;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    padding: 0; box-sizing: border-box;
  }
  .quit-continue { top: 557.74px; height: 48px; background: #2da1ff; color: #fff; }
  .quit-home { top: 615.74px; height: 44px; background: #b4e6ff; color: #3a3a3a; }
  .quit-btn:active { scale: 0.96; }

  /* ===== 无障碍：减少动态效果 ===== */
  @media (prefers-reduced-motion: reduce) {
    .icon .rot, .icon .scl,
    .cloud-top, .h-drop, .lightning {
      animation: none;
    }
    .lightning { scale: 1 1; }
    #screen-quiz .fold, #screen-quiz .sky-gap, #screen-quiz .hang { animation: none !important; }
  }