:root{
    --bg:#f3f3f1;
    --card:#f6f5f2;
    --surface-hi:#fcfbf9;
    --surface-lo:#f0efeb;
    --well-top:#e6e5e1;
    --well-bot:#edece8;
    --line:#deddd8;
    --line-2:#c9c8c3;
    --text:#252527;
    --sub:#5c5c60;
    --faint:#89898d;
    --brand:#252527;
    --brand-d:#0f1011;
    --brand-soft:#e9e8e4;
    --brand-line:#c9c8c3;
    --ok:#3fb97a;
    --warn-bg:#f6ead0;
    --warn-line:#e4b25e;
    --warn-text:#6c4b16;
    --radius:24px;
    --radius-md:18px;
    --radius-sm:12px;
    --shadow:inset 0 0 4px 1px rgba(255,255,255,.88),inset 1px 2px 2px -1px rgba(255,255,255,.95),0 0 0 .5px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.06),0 18px 30px -24px rgba(0,0,0,.24);
    --shadow-sm:inset 0 0 4px 1px rgba(255,255,255,.9),inset 1px 2px 2px -1px rgba(255,255,255,.95),0 0 0 .5px rgba(0,0,0,.06),0 2px 3px rgba(0,0,0,.06),0 8px 14px -8px rgba(0,0,0,.16);
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }

  ::selection{color:#fff;background:#3d3e3b;}
  ::-moz-selection{color:#fff;background:#3d3e3b;}

  /* ---------- 顶栏 ---------- */
  .topbar{
    position:sticky;top:0;z-index:50;
    background:rgba(243,243,241,.86);backdrop-filter:saturate(1.5) blur(12px);
  }
  .topbar-inner{max-width:860px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .brand{display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none;border-radius:12px;}
  .brand:focus-visible{outline:2px solid var(--ok);outline-offset:5px;}
  .brand-logo{display:block;width:164px;max-width:42vw;height:auto;object-fit:contain;flex:0 1 auto;}
  .mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:0 0 auto;}
  .mark svg{width:21px;height:21px;display:block;}
  .mark img{width:42px;height:42px;display:block;object-fit:contain;}
  .brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
  .brand-name{font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap;}
  .badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--sub);background:#fff;padding:8px 16px;border-radius:999px;flex:0 0 auto;white-space:nowrap;box-shadow:var(--shadow-sm);}
  .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(63,185,122,.16);}

  /* ---------- 主体 ---------- */
  .wrap{max-width:860px;margin:0 auto;padding:10px 20px 72px;}

  /* Hero + 渐变球 */
  .hero{position:relative;text-align:center;margin:26px 0 30px;}
  .hero h1{margin:0 0 8px;font-size:29px;font-weight:800;letter-spacing:-.02em;line-height:1.3;}
  .hero h1 .accent{background:linear-gradient(100deg,var(--brand),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero p{margin:0 auto;color:var(--sub);font-size:14px;max-width:480px;}
  .hero p b{color:var(--text);font-weight:700;}

  /* ---------- 卡片 ---------- */
  .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin-bottom:20px;}
  .card-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
  .step{
    min-width:44px;height:44px;padding:0 12px;border-radius:999px;color:#fff;font-weight:800;font-size:14px;
    display:grid;place-items:center;flex:0 0 auto;
    background:linear-gradient(180deg,#38383c,#252527);
    box-shadow:0 10px 20px -8px rgba(0,0,0,.16);
  }
  .card-head h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em;}

  /* ---------- 上传 ---------- */
  .drop{
    border:2px dashed var(--brand-line);border-radius:var(--radius-md);
    padding:44px 20px;text-align:center;cursor:pointer;background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));
    transition:border-color .2s var(--ease),background .2s var(--ease),transform .18s var(--ease),box-shadow .2s var(--ease);
  }
  .drop:hover{border-color:var(--brand);background:var(--brand-soft);}
  .drop.over{border-color:var(--brand);background:var(--brand-soft);transform:scale(1.008);box-shadow:var(--shadow-sm);}
  .drop:focus-visible{outline:3px solid rgba(63,185,122,.2);outline-offset:4px;border-color:var(--brand);}
  .upload-state{display:none;margin-top:18px;padding:12px 14px;border-radius:var(--radius-sm);background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));}
  .upload-progress{height:7px;background:var(--brand-soft);border-radius:99px;overflow:hidden;}
  .upload-progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),#8bd8ad);border-radius:99px;transition:width .18s var(--ease);}
  .upload-status{font-size:12px;color:var(--sub);margin-top:8px;min-height:19px;}
  .drop-icon{
    width:64px;height:64px;margin:0 auto 16px;border-radius:50%;color:#fff;display:grid;place-items:center;
    background:linear-gradient(180deg,#38383c,#252527);
    box-shadow:0 14px 28px -12px rgba(0,0,0,.18);
    transition:transform .2s var(--ease);
  }
  .drop:hover .drop-icon{transform:translateY(-3px);}
  .drop-icon svg{width:30px;height:30px;display:block;}
  .drop-title{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em;}
  .drop-title b{background:linear-gradient(100deg,var(--brand),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent;}
  .btnrow{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap;}

  button{
    font:inherit;font-weight:700;border:none;background:#fff;color:var(--text);
    padding:11px 20px;border-radius:999px;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;
    box-shadow:var(--shadow-sm);
    transition:all .18s var(--ease);
  }
  button svg{width:16px;height:16px;display:block;flex:0 0 auto;}
  button:hover{color:var(--brand-d);transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 18px 36px -20px rgba(0,0,0,.18);}
  button:active{transform:translateY(0);}
  button:disabled{opacity:.5;cursor:not-allowed;transform:none;}
  button:focus-visible{outline:2px solid var(--ok);outline-offset:3px;}

  .summary{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--sub);margin:20px 0 12px;padding:14px 18px;background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));border-radius:var(--radius-sm);}
  .summary b{color:var(--text);font-weight:800;}
  #diagnostics[hidden]{display:none;}
  .diagnostics{display:flex;align-items:flex-start;gap:8px;margin:10px 0 9px;padding:9px 12px;border-radius:12px;font-size:12px;line-height:18px;}
  .field[hidden]{display:none!important;}
  .diagnostics.ok{color:#246b45;background:#edf9f1;box-shadow:inset 0 0 0 1px rgba(47,158,98,.14);}
  .diagnostics.warn{color:#815b1f;background:#fff8e8;box-shadow:inset 0 0 0 1px rgba(184,133,35,.18);}
  .diagnostics-mark{font-weight:800;flex:0 0 auto;}
  .diagnostics-main{min-width:0;flex:1;}
  .diagnostics-title{font-weight:700;}
  .diagnostics-meta{margin-left:8px;color:inherit;opacity:.78;}
  .diagnostics details{margin-top:4px;}
  .diagnostics details summary{cursor:pointer;font-weight:600;}
  .diagnostics ul{margin:4px 0 0 16px;padding:0;}
  .preview-trigger{margin-left:auto;flex:0 0 auto;min-height:32px;padding:0 15px;border:0;border-radius:12px;background:linear-gradient(180deg,#fffefa,#f2f1ed);color:var(--text);font:500 12.5px/16px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .16s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease);}
  .preview-trigger:hover:not(:disabled){border:0;color:var(--text);transform:translateY(-1px);background:linear-gradient(180deg,#fffefa,#f2f1ed);box-shadow:inset 0 0 4px 1px rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.08),0 8px 16px -8px rgba(0,0,0,.2);}
  .preview-trigger:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.12);}
  .preview-trigger:focus-visible{outline:2px solid var(--ok);outline-offset:2px;}
  .preview-trigger:disabled{opacity:.5;cursor:wait;}
  .preview-overlay{position:fixed;inset:0;z-index:30;pointer-events:none;}
  .preview-overlay[hidden]{display:none;}
  .preview-dialog{position:absolute;right:24px;bottom:24px;display:flex;flex-direction:column;width:min(360px,calc(100vw - 32px));min-width:260px;min-height:220px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);padding:16px;border:1px solid rgba(255,255,255,.8);border-radius:20px;background:linear-gradient(145deg,#fffefa,#f0efeb);box-shadow:0 24px 70px rgba(27,28,38,.24);pointer-events:auto;resize:both;overflow:auto;}
  .preview-dialog.dragging{cursor:grabbing;}
  .preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;cursor:grab;touch-action:none;user-select:none;}
  .preview-head.dragging{cursor:grabbing;}
  .preview-title-row{display:flex;align-items:baseline;gap:10px;min-width:0;}
  .preview-title{font-size:14px;font-weight:800;color:var(--text);}
  .preview-duration{color:var(--sub);font:500 11px/16px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;}
  .preview-close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--sub);font-size:18px;line-height:1;cursor:pointer;}
  .preview-stage{display:grid;place-items:center;flex:0 0 auto;width:100%;height:auto;min-height:0;max-width:100%;max-height:none;margin:0 auto;border-radius:14px;background:linear-gradient(145deg,var(--well-top),var(--well-bot));box-shadow:inset 2px 3px 7px rgba(0,0,0,.1),inset -2px -3px 6px rgba(255,255,255,.64);overflow:hidden;}
  .preview-stage canvas{width:100%;height:100%;object-fit:contain;display:block;}
  .preview-controls{display:flex;align-items:center;flex:0 0 auto;gap:8px;margin-top:auto;padding-top:12px;}
  .preview-play{flex:0 0 auto;padding:7px 11px;border:0;border-radius:999px;background:#2d2d32;color:#fff;font:600 11px/16px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;}
  .preview-seek{min-width:0;flex:1;accent-color:var(--brand);}
  .preview-frame{min-width:58px;text-align:right;color:var(--sub);font:500 11px/16px ui-monospace,SFMono-Regular,Menlo,monospace;}
  .preview-note{margin:8px 0 0;color:var(--faint);font-size:11px;text-align:center;}
  /* 固定缩略图轨道尺寸，避免 Safari 在 aspect-ratio + Grid 自动行高下塌行叠图 */
  .grid{--thumb-size:88px;display:grid;grid-template-columns:repeat(auto-fit,var(--thumb-size));grid-auto-rows:var(--thumb-size);grid-auto-flow:row;gap:10px;max-height:240px;overflow:auto;padding:10px;border-radius:var(--radius-sm);background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));justify-content:space-between;}
  .grid::-webkit-scrollbar{width:8px;}
  .grid::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;}
  .grid .cell{width:var(--thumb-size);height:var(--thumb-size);min-width:0;min-height:0;background:#fff;border-radius:12px;overflow:hidden;aspect-ratio:auto;display:grid;place-items:center;box-shadow:var(--shadow-sm);}
  .grid .cell img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;display:block;}

  /* ---------- 设置 ---------- */
  .form{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;margin-bottom:20px;}
  .field{display:flex;flex-direction:column;gap:6px;}
  .field label{font-size:12.5px;font-weight:700;color:var(--sub);display:flex;align-items:baseline;gap:6px;}
  .field input{
    font:inherit;font-weight:600;padding:12px 16px;border:2px solid transparent;border-radius:999px;width:140px;
    background:var(--well-bot);transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  }
  .field input:hover{background:var(--well-top);}
  .field input:focus{outline:none;background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(63,185,122,.16);}
  .field .hint{font-size:11.5px;color:var(--faint);}
  .field.wide input{width:200px;}
  .quality-control{display:flex;align-items:center;gap:10px;width:200px;padding:8px 12px;border-radius:999px;background:var(--well-bot);}
  .quality-control input{width:100%;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--brand);}
  .quality-control input:hover,.quality-control input:focus{background:transparent;border:0;box-shadow:none;}
  .quality-value{min-width:28px;color:var(--brand-d);font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right;}
  .quality-presets{display:flex;gap:6px;}
  .quality-presets button{padding:5px 9px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--sub);font-size:10.5px;box-shadow:none;}
  .quality-presets button:hover{color:var(--brand-d);border-color:var(--brand);transform:none;box-shadow:none;}
  .quality-presets button[aria-pressed="true"]{color:var(--brand-d);border-color:var(--brand);background:var(--brand-soft);font-weight:700;}

  .export-btns{display:flex;gap:14px;flex-wrap:wrap;}
  .export-btns button{flex:1;min-width:150px;justify-content:center;padding:14px 18px;font-size:15px;}
  .export-btns button[hidden]{display:none!important;}

  .progress{height:8px;background:var(--brand-soft);border-radius:99px;overflow:hidden;display:none;margin-top:20px;}
  .progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),#8bd8ad);border-radius:99px;transition:width .2s var(--ease);}
  .status{font-size:13px;color:var(--sub);min-height:20px;margin-top:12px;}

  .results{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
  .result{display:flex;align-items:center;gap:10px;border-radius:999px;padding:12px 18px;background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));font-size:13px;color:inherit;text-decoration:none;transition:background .18s var(--ease),transform .18s var(--ease);}
  .result:hover{background:var(--brand-soft);transform:translateY(-1px);}
  .result:focus-visible{outline:2px solid var(--ok);outline-offset:2px;}
  .result .name{font-weight:700;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .result .name::before{content:"";width:16px;height:16px;flex:0 0 auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fb97a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:contain;}
  .result .size{color:var(--sub);font-size:12px;margin-left:auto;flex:0 0 auto;}

  .note{font-size:12.5px;color:var(--sub);line-height:1.85;margin-top:18px;border-top:1px solid var(--line);padding-top:14px;}
  .note b{color:var(--text);font-weight:700;}
  .note code{background:var(--brand-soft);color:var(--brand-d);padding:1px 7px;border-radius:99px;font-size:11.5px;}
  .note .nl{display:block;}

  .site-footer{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:4px 0 0;color:var(--faint);font-size:12px;text-align:center;}
  .site-footer p{margin:0;}
  .site-footer .home-link{color:var(--brand-d);font-weight:700;text-decoration:none;padding:5px 10px;border-radius:999px;transition:background .18s var(--ease),color .18s var(--ease);}
  .site-footer .home-link:hover{background:var(--brand-soft);color:var(--brand);}
  .site-footer .home-link:focus-visible{outline:2px solid var(--ok);outline-offset:2px;}

  /* ---------- 守卫横幅 / Toast ---------- */
  .banner{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-text);border-radius:var(--radius-md);padding:16px 18px;margin:16px 0 18px;font-size:13px;line-height:1.8;}
  .banner b{color:var(--warn-text);}
  .banner a{color:var(--brand-d);font-weight:700;word-break:break-all;}
  .banner code{background:#fff;border:1px solid var(--warn-line);padding:1px 7px;border-radius:99px;font-size:12px;}

  .toast{position:fixed;left:50%;top:22px;transform:translateX(-50%) translateY(-8px);background:#1b1c26;color:#fff;padding:12px 22px;border-radius:999px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:99;box-shadow:0 16px 36px -14px rgba(0,0,0,.45);}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  /* ---------- 响应式 ---------- */
  @media (max-width:560px){
    .hero{margin-top:18px;}
    .hero h1{font-size:23px;}
    .card{padding:20px;border-radius:24px;}
    .topbar-inner{padding:14px 16px;}
    .badge span.tx{display:none;}
    .form{gap:14px;}
    .field input,.field.wide input{width:100%;}
    .field{width:100%;}
    .export-btns{flex-direction:column;}
    .export-btns button{min-width:0;width:100%;}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
  }

  /* ---------- MetalUI component refinements ---------- */
  body{
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
    font-variant-numeric:tabular-nums;
  }
  body::before{
    background:
      radial-gradient(540px 300px at 8% -8%, rgba(255,255,255,.9), transparent 72%),
      radial-gradient(560px 360px at 96% 14%, rgba(255,255,255,.55), transparent 72%),
      linear-gradient(135deg, rgba(255,255,255,.2), transparent 44%);
  }
  .topbar{
    background:rgba(243,243,241,.86);
    border-bottom:1px solid rgba(0,0,0,.04);
    box-shadow:0 8px 18px -18px rgba(0,0,0,.28);
  }
  .topbar-inner{max-width:960px;padding:18px 24px;}
  .mark{
    width:40px;height:40px;border-radius:12px;
    background:linear-gradient(145deg,#fcfbf9,#deddd8);
    box-shadow:var(--shadow-sm);
    padding:7px;
  }
  .mark img{width:26px;height:26px;filter:none;}
  .brand-text{gap:2px;}
  .brand-name{font-size:14px;letter-spacing:.01em;font-weight:600;}
  .badge{
    background:linear-gradient(180deg,#fcfbf9,#f0efeb);
    color:var(--sub);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;letter-spacing:.03em;padding:8px 12px;box-shadow:var(--shadow-sm);
  }
  .badge .dot{width:7px;height:7px;background:var(--ok);box-shadow:0 0 0 3px rgba(63,185,122,.16);}
  .badge.loading .dot{background:#e4b25e;box-shadow:0 0 0 3px rgba(228,178,94,.18);}
  .badge.pending .dot,.badge.deferred .dot,.badge.blocked .dot{background:#e4b25e;box-shadow:0 0 0 3px rgba(228,178,94,.18);}
  .badge.ready .dot{background:#aad47c;box-shadow:0 0 0 3px rgba(170,212,124,.18);}
  .badge.error .dot{background:#d8453b;box-shadow:0 0 0 3px rgba(216,69,59,.16);}
  .wrap{max-width:960px;padding:24px 24px 72px;}
  .hero{
    text-align:left;margin:18px 0 36px;padding:0 8px;
    animation:metal-settle .34s var(--ease) both;
  }
  .hero h1{font-size:clamp(31px,5vw,47px);font-weight:600;letter-spacing:-.045em;line-height:1.08;max-width:680px;}
  .hero h1 .accent{
    color:var(--text);background:none;-webkit-text-fill-color:initial;
    border-bottom:3px solid var(--ok);padding-bottom:2px;
  }
  .hero p{margin:16px 0 0;color:var(--sub);font-size:13.5px;line-height:20px;max-width:560px;}
  .hero p b{color:var(--text);font-weight:600;}
  .card{
    background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));
    border-radius:var(--radius);padding:28px;margin-bottom:24px;
    box-shadow:var(--shadow);
    animation:metal-settle .42s var(--ease) both;
  }
  .card:nth-of-type(2){animation-delay:60ms;}
  .card-head{gap:12px;margin-bottom:24px;}
  .step{
    min-width:36px;height:36px;padding:0;border-radius:12px;
    background:linear-gradient(145deg,#3a3a3d,#202022);
    color:#f6f5f2;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    box-shadow:inset 0 0 4px 1px rgba(255,255,255,.1),0 4px 10px -6px rgba(0,0,0,.45);
  }
  .card-head h2{font-size:15px;font-weight:600;letter-spacing:-.01em;}
  .drop{
    border:0;border-radius:var(--radius-md);padding:48px 22px;background:linear-gradient(145deg,var(--well-top),var(--well-bot));
    box-shadow:inset 2px 3px 7px rgba(0,0,0,.12),inset -2px -3px 6px rgba(255,255,255,.68),0 0 0 .5px rgba(0,0,0,.05);
    transition:box-shadow .22s var(--ease),transform .18s var(--ease),background .22s var(--ease);
  }
  .drop:hover,.drop.over{border:0;background:linear-gradient(145deg,#deddd8,#f1f0ec);box-shadow:inset 2px 3px 7px rgba(0,0,0,.14),inset -2px -3px 6px rgba(255,255,255,.74),0 0 0 2px rgba(63,185,122,.5);}
  .drop.over{transform:translateY(-2px);}
  .drop:focus-visible{outline:2px solid var(--ok);outline-offset:4px;}
  .drop-icon{
    width:58px;height:58px;margin-bottom:18px;border-radius:18px;
    background:linear-gradient(145deg,#3b3b3e,#202022);color:#f6f5f2;
    box-shadow:inset 0 0 5px 1px rgba(255,255,255,.12),inset 1px 2px 2px -1px rgba(255,255,255,.22),0 8px 14px -8px rgba(0,0,0,.46);
    position:relative;
  }
  .drop-icon::after{content:"";position:absolute;right:9px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(120,214,165,.18);}
  .drop:hover .drop-icon{transform:translateY(-4px);}
  .drop-title{font-size:15px;font-weight:600;letter-spacing:-.01em;}
  .drop-title b{color:var(--text);background:none;-webkit-text-fill-color:initial;font-weight:600;text-decoration:underline;text-decoration-color:var(--ok);text-decoration-thickness:1.5px;text-underline-offset:4px;}
  .btnrow{gap:10px;margin-top:24px;}
  button{
    color:var(--text);background:linear-gradient(180deg,#fffefa,#f2f1ed);border-radius:12px;padding:10px 16px;font-size:12.5px;font-weight:500;
    box-shadow:var(--shadow-sm);transition:transform .16s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
  }
  button:hover{color:var(--text);transform:translateY(-2px);box-shadow:inset 0 0 4px 1px rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.08),0 8px 16px -8px rgba(0,0,0,.2);}
  button:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.12);}
  button:focus-visible{outline:2px solid var(--ok);outline-offset:3px;}
  button.primary,#exGif,#exWebp,#exApng{
    color:#f6f5f2;background:linear-gradient(180deg,#38383c,#252527);
    box-shadow:inset 0 0 5px 1px rgba(255,255,255,.08),inset 1px 2px 2px -1px rgba(255,255,255,.18),0 0 0 .5px rgba(0,0,0,.5),0 5px 12px -4px rgba(0,0,0,.22);
  }
  button.primary:hover,#exGif:hover,#exWebp:hover,#exApng:hover,#exPngSequence:hover{
    color:#fff;background:linear-gradient(180deg,#414145,#29292c);
    box-shadow:inset 0 0 5px 1px rgba(255,255,255,.09),inset 1px 2px 2px -1px rgba(255,255,255,.2),0 0 0 .5px rgba(0,0,0,.52),0 8px 16px -9px rgba(0,0,0,.38);
  }
  .summary{
    gap:0;justify-content:flex-start;align-items:center;flex-wrap:wrap;margin:20px 0 8px;padding:8px 12px;border-radius:12px;
    background:linear-gradient(180deg,var(--surface-hi),var(--surface-lo));box-shadow:var(--shadow-sm);font:400 11px/14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sub);
  }
  .summary span{padding:0 6px;border-right:1px solid rgba(0,0,0,.08);}
  .summary span:first-child{padding-left:0;}
  .summary span:last-child{padding-right:0;border-right:0;}
  .summary b{color:var(--text);font-weight:500;}
  .summary .preview-trigger{margin-left:auto;}
  .diagnostics{
    align-items:center;min-height:28px;margin:16px 0 14px;padding:0 12px;border:0;border-radius:12px;
    background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));
    box-shadow:var(--shadow-sm);font:500 11px/14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sub);
  }
  .diagnostics.ok,.diagnostics.warn{background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));box-shadow:var(--shadow-sm);}
  .diagnostics-mark{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;flex:0 0 auto;color:#fff;font:600 11px/16px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
  .diagnostics.ok .diagnostics-mark{background:var(--ok);box-shadow:0 0 0 3px rgba(120,214,165,.16),0 2px 4px rgba(63,185,122,.22);}
  .diagnostics.warn .diagnostics-mark{background:#e4b25e;color:#6c4b16;box-shadow:0 0 0 3px rgba(228,178,94,.16),0 2px 4px rgba(160,112,35,.18);}
  .diagnostics-title{color:var(--text);font-weight:600;}
  .diagnostics-meta{margin-left:8px;color:var(--sub);opacity:1;}
  .diagnostics.warn{align-items:flex-start;min-height:56px;padding:10px 12px;gap:10px;}
  .diagnostics.warn .diagnostics-mark{width:28px;height:28px;margin-top:1px;font-size:15px;line-height:28px;}
  .diagnostics.warn .diagnostics-main{display:flex;align-items:baseline;flex-wrap:wrap;min-width:0;gap:2px 0;}
  .diagnostics.warn details{flex:0 0 100%;margin-top:6px;}
  .diagnostics.warn details summary{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border-radius:6px;color:#6c4b16;background:#f6ead0;box-shadow:inset 0 0 3px 1px rgba(255,255,255,.75),0 1px 2px rgba(160,112,35,.12);font:600 11px/14px ui-monospace,SFMono-Regular,Menlo,monospace;}
  .grid{gap:8px;padding:10px;border-radius:18px;background:linear-gradient(145deg,var(--well-top),var(--well-bot));box-shadow:inset 2px 3px 7px rgba(0,0,0,.1),inset -2px -3px 6px rgba(255,255,255,.64);}
  .grid{margin-top:16px;}
  .grid{scrollbar-width:thin;scrollbar-color:#c7c6c1 transparent;}
  .grid::-webkit-scrollbar{width:12px;height:12px;}
  .grid::-webkit-scrollbar-track{margin:8px 2px;border-radius:999px;background:linear-gradient(145deg,var(--well-top),var(--well-bot));box-shadow:inset 1px 1px 3px rgba(0,0,0,.1),inset -1px -1px 2px rgba(255,255,255,.64);}
  .grid::-webkit-scrollbar-thumb{min-height:48px;border:3px solid transparent;border-radius:999px;background:linear-gradient(145deg,#fffefa,#d8d7d2);background-clip:padding-box;box-shadow:0 1px 2px rgba(0,0,0,.12);}
  .grid::-webkit-scrollbar-thumb:hover{background:linear-gradient(145deg,#fffefa,#c9c8c3);background-clip:padding-box;}
  .grid::-webkit-scrollbar-button{display:none;width:0;height:0;}
  .grid .cell{border-radius:12px;background:linear-gradient(145deg,#fffefa,#f0efeb);box-shadow:var(--shadow-sm);}
  .form{gap:8px;margin-bottom:22px;}
  .field{gap:6px;}
  .field label{font-size:11px;font-weight:500;color:var(--sub);}
  .field input{
    width:132px;padding:11px 14px;border:0;border-radius:12px;background:linear-gradient(145deg,var(--well-top),var(--well-bot));
    box-shadow:inset 2px 2px 5px rgba(0,0,0,.1),inset -2px -2px 4px rgba(255,255,255,.64);font-size:13px;font-weight:500;color:var(--text);
  }
  .field.wide input{width:192px;}
  .field input:hover{background:linear-gradient(145deg,#e1e0db,#f3f2ee);}
  .field input:focus{background:linear-gradient(145deg,#deddd8,#f1f0ec);border:0;box-shadow:inset 2px 2px 5px rgba(0,0,0,.1),inset -2px -2px 4px rgba(255,255,255,.64),0 0 0 2px rgba(63,185,122,.42);}
  .field .hint{font:400 10px/14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);}
  .export-btns{gap:10px;}
  .export-btns button{min-width:140px;padding:13px 16px;font-size:12.5px;}
  .progress{height:8px;margin-top:22px;background:var(--well-top);box-shadow:inset 1px 2px 4px rgba(0,0,0,.12);}
  .progress > i,.upload-progress > i{background:linear-gradient(90deg,#3fb97a,#78d6a5);box-shadow:0 0 10px rgba(63,185,122,.4);}
  .status{color:var(--sub);font:400 11px/14px ui-monospace,SFMono-Regular,Menlo,monospace;}
  .results a{background:linear-gradient(180deg,#fffefa,#f2f1ed)!important;color:var(--text)!important;border-radius:12px!important;box-shadow:var(--shadow-sm)!important;font-size:12px!important;}
  .note{color:var(--sub);font-size:11px;line-height:1.8;border-top:1px solid rgba(0,0,0,.08);}
  .note b{color:var(--text);font-weight:600;}
  .note code{color:var(--text);background:var(--well-top);border-radius:6px;padding:1px 6px;font:500 10px/14px ui-monospace,SFMono-Regular,Menlo,monospace;}
  .site-footer{font:400 10px/14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);}
  .site-footer .home-link{color:var(--sub);border-radius:8px;}
  .site-footer .home-link:hover{background:var(--surface-hi);color:var(--text);}
  .banner{border:0;border-radius:18px;background:linear-gradient(145deg,#f8efd9,#f2e2bf);box-shadow:inset 1px 2px 4px rgba(255,255,255,.7),0 0 0 .5px rgba(160,112,35,.18),0 8px 16px -12px rgba(0,0,0,.18);}
  .banner a{color:var(--text);}
  .toast{background:linear-gradient(180deg,#38383c,#252527);border-radius:12px;box-shadow:var(--shadow-sm);font:500 12px/16px ui-monospace,SFMono-Regular,Menlo,monospace;}
  @keyframes metal-settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  @media (max-width:560px){
    .topbar-inner{padding:14px 16px;}
    .wrap{padding:18px 16px 56px;}
    .hero{margin:14px 0 28px;padding:0 4px;}
    .hero h1{font-size:31px;}
    .card{padding:20px;border-radius:20px;}
    .summary{gap:8px;justify-content:flex-start;}
    .summary span{padding:0 8px;}
    .summary span:first-child{padding-left:0;}
  }

  /* ---------- MetalUI 全套界面收束 ---------- */
  html{background:var(--bg);}
  body{min-height:100vh;}
  .wrap{position:relative;padding-bottom:104px;}
  .hero{min-height:0;}
  .card{position:relative;overflow:hidden;}
  #upload{scroll-margin-top:96px;}
  .card::before{
    content:"";position:absolute;left:28px;right:28px;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);pointer-events:none;
  }
  .card-head{padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.07);}
  .drop{min-height:260px;display:flex;flex-direction:column;justify-content:center;}
  .upload-state{background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));box-shadow:var(--shadow-sm);}
  .upload-progress{background:var(--well-top);box-shadow:inset 1px 2px 4px rgba(0,0,0,.11);}
  .form{padding:4px 0 2px;}
  /* WebP 质量：沿用 MetalUI 的 Well（可调输入）+ Key（读数）+ Cap（预设）材质。 */
  .field.wide .quality-control{
    width:320px;height:44px;padding:8px 8px 8px 12px;border-radius:12px;gap:6px;
    background:linear-gradient(145deg,var(--well-top),var(--well-bot));
    box-shadow:inset 2px 2px 5px rgba(0,0,0,.1),inset -2px -2px 4px rgba(255,255,255,.64);
  }
  .field .quality-control input,.field.wide .quality-control input{
    -webkit-appearance:none;appearance:none;flex:1;min-width:0;width:auto;height:16px;margin:0;padding:0;border:0;
    background:transparent!important;box-shadow:none!important;cursor:pointer;accent-color:initial;
  }
  .field .quality-control input::-webkit-slider-runnable-track{
    height:4px;border-radius:999px;background:#d7d6d1;box-shadow:inset 1px 1px 2px rgba(0,0,0,.16),inset -1px -1px 1px rgba(255,255,255,.72);
  }
  .field .quality-control input::-webkit-slider-thumb{
    -webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:999px;
    background:linear-gradient(180deg,#fffefa,#f2f1ed);
    box-shadow:inset 0 0 4px 1px rgba(255,255,255,.9),inset 1px 2px 2px -1px #fff,0 0 0 .5px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.16);
  }
  .field .quality-control input::-moz-range-track{
    height:4px;border-radius:999px;background:#d7d6d1;box-shadow:inset 1px 1px 2px rgba(0,0,0,.16),inset -1px -1px 1px rgba(255,255,255,.72);
  }
  .field .quality-control input::-moz-range-thumb{
    width:16px;height:16px;border:0;border-radius:999px;background:linear-gradient(180deg,#fffefa,#f2f1ed);
    box-shadow:inset 0 0 4px 1px rgba(255,255,255,.9),inset 1px 2px 2px -1px #fff,0 0 0 .5px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.16);
  }
  .quality-control:focus-within{outline:2px solid var(--ok);outline-offset:2px;}
  .quality-value{
    display:grid;place-items:center;min-width:30px;height:24px;padding:0 6px;border-radius:6px;color:var(--text);
    background:linear-gradient(180deg,#fffefa,#f2f1ed);
    box-shadow:inset 0 0 3px 1px rgba(255,255,255,.9),inset 1px 1px 1px -1px #fff,0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.08);
    font:500 10.5px/14px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  }
  .quality-presets{
    display:flex;flex:0 0 176px;width:176px;padding:3px;gap:6px;border-radius:6px;
    background:linear-gradient(145deg,var(--surface-lo),var(--surface-hi));
    box-shadow:inset 1px 1px 3px rgba(0,0,0,.1),inset -1px -1px 2px rgba(255,255,255,.64);
  }
  .quality-presets button,.field .quality-presets button{
    flex:1;min-width:0;min-height:24px;justify-content:center;padding:0 4px;border:0;border-radius:4px;background:transparent;color:var(--sub);
    box-shadow:none;font:500 9px/14px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;white-space:nowrap;transition:background .18s var(--ease),box-shadow .18s var(--ease),transform 50ms linear,color .18s var(--ease);
  }
  .quality-presets button:hover,.field .quality-presets button:hover{transform:none;color:var(--text);background:linear-gradient(180deg,#fffefa,#f2f1ed);box-shadow:inset 0 0 3px 1px rgba(255,255,255,.85),0 1px 2px rgba(0,0,0,.06);}
  .quality-presets button[aria-pressed="true"],.field .quality-presets button[aria-pressed="true"]{
    color:#f6f5f2;background:linear-gradient(180deg,#38383c,#252527);
    box-shadow:inset 0 0 4px 1px rgba(255,255,255,.08),inset 1px 2px 2px -1px rgba(255,255,255,.18),0 0 0 .5px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.16);
  }
  .quality-presets button:active,.field .quality-presets button:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.18);}
  .quality-presets button:focus-visible,.field .quality-presets button:focus-visible{outline:2px solid var(--ok);outline-offset:2px;}
  .export-btns button{position:relative;overflow:hidden;}
  .export-btns button::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(120,214,165,.12),0 0 10px rgba(120,214,165,.28);
  }
  .status{min-height:18px;margin-top:10px;}
  .results{margin-top:14px;}
  .site-footer{
    margin-top:0;padding:26px 24px 64px;border-top:1px solid rgba(0,0,0,.06);
    background:linear-gradient(180deg,rgba(252,251,249,.2),rgba(240,239,235,.45));
  }
  @media (min-width:800px){
    .topbar-inner{padding-top:20px;padding-bottom:20px;}
    .card{padding:32px;}
  }
  @media (max-width:560px){
    .wrap{padding-bottom:64px;}
    .hero{min-height:0;}
    .site-footer{padding:22px 16px 48px;}
    .form{gap:14px;}
    .field.wide .quality-control{width:100%;max-width:none;}
    .field.wide #baseName{width:100%;}
  }

  #fpsField .hint{max-width:140px;line-height:1.4;}
  #baseName{width:180px;}

  /* ---------- 顶栏工具组 / 爱心连击 ---------- */
  .topbar-inner{justify-content:flex-start;}
  .topbar-inner > .badge{margin-left:auto;}
  .topbar-inner > .love-widget{margin-left:-8px;}
  .love-widget{position:static;flex:0 0 auto;width:auto;color:#3c3534;font-family:ui-rounded,"SF Pro Rounded","PingFang SC",sans-serif;}
  .topbar-inner > .badge,.love-button{height:36px;}
  .love-button{
    display:inline-flex;align-items:center;gap:8px;min-height:0;padding:3px 12px 3px 3px;
    border:1px solid rgba(0,0,0,.06);border-radius:999px;color:inherit;cursor:pointer;
    background:linear-gradient(180deg,#fcfbf9,#f0efeb);
    box-shadow:inset 0 1px rgba(255,255,255,.9),0 6px 16px -10px rgba(0,0,0,.35);
    transition:transform .16s ease,box-shadow .16s ease;
  }
  .love-button:hover{transform:translateY(-1px);box-shadow:inset 0 1px rgba(255,255,255,.9),0 10px 18px -10px rgba(0,0,0,.4);}
  .love-button:active{transform:translateY(1px) scale(.97);}
  .love-glyph{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font-size:16px;line-height:1;background:linear-gradient(145deg,#ee7188,#ce3f5d);box-shadow:0 4px 9px rgba(191,53,79,.24);}
  .love-copy{display:grid;min-width:34px;text-align:left;line-height:1;}
  .love-label{color:#8b8582;font-size:10px;line-height:11px;letter-spacing:.04em;}
  .love-count{margin-top:1px;color:#443b3a;font-size:15px;line-height:16px;font-weight:700;font-variant-numeric:tabular-nums;}
  .love-hint{display:block;visibility:hidden;opacity:0;position:fixed;z-index:92;left:var(--love-hint-x,50vw);top:var(--love-hint-y,50vh);margin:0;padding:6px 10px;border:1px solid rgba(201,94,117,.16);border-radius:999px;color:#984b60;background:linear-gradient(180deg,#fffafa,#fae9ed);box-shadow:0 8px 18px rgba(164,72,93,.16);font-size:11px;line-height:16px;white-space:nowrap;transform:translate(-50%,-4px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;pointer-events:none;}
  .love-hint.show{visibility:visible;opacity:1;transform:translate(-50%,0);transition-delay:0s;}
  .love-atmosphere{position:fixed;inset:0;z-index:90;opacity:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 43%,rgba(232,64,119,.04) 61%,rgba(232,64,119,.72) 100%);box-shadow:inset 0 0 0 0 rgba(232,64,119,0);transition:opacity 1.1s ease,box-shadow 1.1s ease;}
  .love-atmosphere.active{opacity:var(--love-atmo-opacity,.5);}
  .love-atmosphere::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;}
  .love-atmosphere.heartbeat::after{animation:love-edge-heartbeat 1.15s ease-out both;}
  .love-atmosphere.milestone::after{animation:love-edge-milestone 1.45s cubic-bezier(.16,.78,.24,1) both;}
  .love-effects{pointer-events:none;position:fixed;inset:0;z-index:91;overflow:hidden;}
  .love-heart-float{position:absolute;left:var(--heart-x);bottom:-64px;width:var(--heart-size,34px);height:auto;object-fit:contain;opacity:0;filter:drop-shadow(0 8px 16px rgba(221,87,128,.18)) drop-shadow(0 0 9px rgba(255,192,211,.2));will-change:transform,opacity;animation:love-heart-rise var(--heart-duration,10s) linear var(--heart-delay,0s) both;}
  .love-combo-count{position:fixed;left:50%;top:clamp(100px,17vh,184px);z-index:93;min-width:max-content;color:#fff8fb;font-family:ui-rounded,"SF Pro Rounded","PingFang SC",sans-serif;font-size:clamp(64px,12vw,132px);font-weight:900;line-height:.92;letter-spacing:-.055em;font-variant-numeric:tabular-nums;text-shadow:0 5px 26px rgba(208,54,101,.34),0 0 58px rgba(255,145,180,.72),0 2px 4px rgba(151,43,78,.36);-webkit-text-stroke:1px rgba(255,255,255,.58);opacity:0;transform:translate(-50%,-8px) scale(.84);filter:blur(8px);transition:opacity .28s ease,transform .38s cubic-bezier(.16,.9,.24,1),filter .3s ease;}
  .love-combo-count.show{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0);}
  .love-combo-count.bump{animation:love-combo-bump .34s cubic-bezier(.18,.8,.24,1);}
  .love-combo-count.milestone{background:linear-gradient(180deg,#fff 8%,#ffe4ed 48%,#ff9fbd 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:love-combo-milestone 1.25s ease-out;}
  .love-combo-count.milestone::before,.love-combo-count.milestone::after{position:absolute;color:#fff0f5;-webkit-text-fill-color:#fff0f5;font-size:.25em;line-height:1;text-shadow:0 0 18px rgba(255,111,160,.9);animation:love-milestone-spark 1.1s ease-out both;}
  .love-combo-count.milestone::before{content:"✦";left:-.9em;top:.12em;}
  .love-combo-count.milestone::after{content:"✧";right:-.85em;top:.5em;animation-delay:.08s;}
  .love-burst{position:fixed;left:var(--love-x,50vw);top:var(--love-y,50vh);right:auto;font-weight:800;letter-spacing:.05em;text-shadow:0 2px 8px rgba(255,255,255,.9);}
  .love-burst.tap{
    display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;color:#df5470;font-size:28px;line-height:1;
    text-shadow:0 3px 10px rgba(206,63,93,.32);animation:love-heart-pop .92s cubic-bezier(.18,.78,.2,1) both;
  }
  .love-burst.tap::before{content:"";position:absolute;inset:-7px;border:1px solid rgba(223,84,112,.48);border-radius:50%;animation:love-ring .92s ease-out both;}
  .love-burst.tap::after{content:"✦";position:absolute;right:-10px;top:-13px;color:#efb1bd;font-size:13px;animation:love-spark .92s ease-out both;}
  .love-burst.ten,.love-burst.thirty,.love-burst.fifty,.love-burst.hundred{
    left:50%;top:50%;right:auto;display:grid;place-items:center;min-width:160px;padding:14px 24px;border-radius:999px;
    color:#9f4f67;background:linear-gradient(180deg,rgba(255,250,251,.98),rgba(252,231,236,.96));
    box-shadow:0 16px 34px rgba(197,80,108,.18),inset 0 1px rgba(255,255,255,.95);
    text-shadow:none;transform:translate(-50%,-50%);animation:love-message-center 1.18s cubic-bezier(.18,.8,.25,1) both;
  }
  .love-burst.ten::before,.love-burst.thirty::before,.love-burst.fifty::before,.love-burst.hundred::before{content:"♥";margin-right:8px;color:#e9687e;}
  .love-burst.ten::after,.love-burst.thirty::after,.love-burst.fifty::after,.love-burst.hundred::after{content:"✦";position:absolute;right:18px;top:-14px;color:#efb1bd;font-size:15px;animation:love-spark 1.18s ease-out both;}
  .love-burst.ten{font-size:18px;}
  .love-burst.thirty{font-size:22px;min-width:190px;}
  .love-burst.fifty{font-size:26px;min-width:210px;}
  .love-burst.hundred{top:50%;font-size:clamp(24px,4vw,48px);min-width:min(360px,calc(100vw - 48px));padding:18px 28px;animation:love-galaxy-center 1.8s cubic-bezier(.1,.75,.18,1) both;}
  .love-burst.hundred::before,.love-burst.hundred::after{content:"♥ ✦ ♥ ✦ ♥";position:absolute;left:50%;top:50%;width:max-content;margin:0;color:#e47e96;font-size:1.55em;transform:translate(-50%,-50%);animation:love-orbit-center 1.7s linear both;}
  .love-burst.hundred::after{color:#f4c2cb;animation-delay:.12s;}
  @keyframes love-heart-pop{0%{opacity:0;transform:translate(0,10px) scale(.25) rotate(-16deg)}28%{opacity:1;transform:translate(-4px,-12px) scale(1.22) rotate(8deg)}100%{opacity:0;transform:translate(-18px,-78px) scale(.7) rotate(20deg)}}
  @keyframes love-ring{0%{opacity:0;transform:scale(.3)}24%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
  @keyframes love-spark{0%{opacity:0;transform:translate(2px,8px) scale(.3) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-20px) scale(1) rotate(90deg)}}
  @keyframes love-message-center{0%{opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.72)}28%{opacity:1;transform:translate(-50%,calc(-50% - 8px)) scale(1.06)}100%{opacity:0;transform:translate(-50%,calc(-50% - 92px)) scale(.92)}}
  @keyframes love-galaxy-center{0%{opacity:0;transform:translate(-50%,calc(-50% + 24px)) scale(.4)}35%{opacity:1;transform:translate(-50%,calc(-50% - 8px)) scale(1.08)}100%{opacity:0;transform:translate(-50%,calc(-50% - 122px)) scale(.92)}}
  @keyframes love-orbit-center{from{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.6)}28%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) rotate(380deg) scale(1.8)}}
  @keyframes love-heart-rise{0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--heart-rotation,-12deg)) scale(.55)}8%{opacity:var(--heart-opacity,.82)}92%{opacity:var(--heart-opacity,.82);transform:translate3d(calc(var(--heart-drift,24px) * .9),-112vh,0) rotate(calc(var(--heart-rotation,-12deg) + 62deg)) scale(1.1)}97%{opacity:var(--heart-opacity,.82);transform:translate3d(var(--heart-drift,24px),-121vh,0) rotate(calc(var(--heart-rotation,-12deg) + 68deg)) scale(1.12)}100%{opacity:0;transform:translate3d(var(--heart-drift,24px),-128vh,0) rotate(calc(var(--heart-rotation,-12deg) + 70deg)) scale(1.12)}}
  @keyframes love-edge-heartbeat{0%{opacity:0;box-shadow:inset 0 0 0 0 rgba(232,64,119,0)}25%{opacity:.7;box-shadow:inset 0 0 64px 8px rgba(232,64,119,.2),inset 0 0 130px 20px rgba(246,127,159,.12)}48%{opacity:.18;box-shadow:inset 0 0 30px 4px rgba(232,64,119,.1)}72%{opacity:.55;box-shadow:inset 0 0 76px 12px rgba(232,64,119,.18),inset 0 0 150px 24px rgba(246,127,159,.1)}100%{opacity:0;box-shadow:inset 0 0 0 0 rgba(232,64,119,0)}}
  @keyframes love-edge-milestone{0%{opacity:0;box-shadow:inset 0 0 0 0 rgba(232,64,119,0)}22%{opacity:.92;box-shadow:inset 0 0 100px 18px rgba(232,64,119,.34),inset 0 0 210px 34px rgba(246,127,159,.2)}42%{opacity:.28;box-shadow:inset 0 0 50px 8px rgba(232,64,119,.16)}66%{opacity:.82;box-shadow:inset 0 0 128px 24px rgba(232,64,119,.3),inset 0 0 250px 42px rgba(246,127,159,.17)}100%{opacity:0;box-shadow:inset 0 0 0 0 rgba(232,64,119,0)}}
  @keyframes love-combo-bump{0%{transform:translate(-50%,0) scale(.88)}58%{transform:translate(-50%,0) scale(1.1)}100%{transform:translate(-50%,0) scale(1)}}
  @keyframes love-combo-milestone{0%{transform:translate(-50%,0) scale(.92);filter:drop-shadow(0 5px 26px rgba(208,54,101,.34)) brightness(1)}28%{transform:translate(-50%,0) scale(1.17);filter:drop-shadow(0 0 44px rgba(255,103,157,.95)) brightness(1.24)}58%{transform:translate(-50%,0) scale(1.04);filter:drop-shadow(0 0 26px rgba(255,144,179,.72)) brightness(1.08)}100%{transform:translate(-50%,0) scale(1);filter:drop-shadow(0 5px 26px rgba(208,54,101,.34)) brightness(1)}}
  @keyframes love-milestone-spark{0%{opacity:0;transform:scale(.2) rotate(-30deg)}28%{opacity:1;transform:scale(1.25) rotate(18deg)}100%{opacity:0;transform:translateY(-18px) scale(.7) rotate(65deg)}}
  @media (max-width:560px){
    .topbar-inner{gap:8px;}
    .topbar-inner > .love-widget{margin-left:-4px;}
    .love-button{height:36px;padding:3px 8px 3px 3px;border-radius:999px;gap:6px;}
    .love-glyph{width:26px;height:26px;border-radius:50%;font-size:16px;}
    .love-label{display:none;}
    .love-copy{min-width:26px;}
    .love-count{font-size:14px;line-height:16px;}
    .love-burst.hundred{min-width:calc(100vw - 32px);}
  }
  @media (prefers-reduced-motion:reduce){
    .love-button{transition:none;}
    .love-burst,.love-burst::before,.love-burst::after{animation-duration:.01ms!important;}
    .love-heart-float{animation-duration:10s!important;animation-delay:0ms!important;}
    .love-combo-count.bump{animation-duration:.34s!important;}
    .love-combo-count.milestone{animation-duration:1.25s!important;}
    .love-combo-count.milestone::before,.love-combo-count.milestone::after{animation-duration:1.1s!important;}
    .love-atmosphere.heartbeat::after{animation-duration:1.15s!important;}
    .love-atmosphere.milestone::after{animation-duration:1.45s!important;}
    .love-atmosphere{transition-duration:1.1s!important;}
  }

/* 初始隐藏状态：由导入流程在需要时切换。 */
#fileWarn,
#folderInput,
#filesInput,
#framesPanel,
#configCard {
  display: none;
}

/* ---------- 首页与帧编辑工作区 ---------- */
.page-view[hidden]{display:none!important;}
.home-hero{
  max-width:760px;margin:clamp(56px,10vh,112px) auto 42px;padding:0 12px;text-align:center;
}
.home-hero h1{max-width:none;font-size:clamp(38px,6vw,60px);line-height:1.12;}
.home-hero p{max-width:560px;margin:18px auto 0;font-size:15px;line-height:1.8;}
#homeUploadMount{max-width:760px;margin:0 auto;}
#homeUploadMount #upload{padding:32px;}
#homeUploadMount #upload .drop{min-height:290px;}
.editor-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:12px 0 22px;padding:0 6px;}
.editor-heading h1{margin:4px 0;font-size:clamp(27px,4vw,36px);line-height:1.2;letter-spacing:-.04em;font-weight:600;}
.editor-heading p{margin:6px 0 0;color:var(--sub);font-size:13px;}
.eyebrow{color:var(--sub);font:500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;}
.editor-local-note{padding:7px 11px;border-radius:999px;background:linear-gradient(180deg,var(--surface-hi),var(--surface-lo));box-shadow:var(--shadow-sm);color:var(--sub);font:400 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;}
#editorUploadMount #upload{margin-bottom:18px;padding:12px 18px;border-radius:18px;}
#editorUploadMount #upload .card-head{display:none;}
#editorUploadMount #upload .drop{min-height:0;padding:9px 12px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;text-align:left;border-radius:12px;}
#editorUploadMount #upload .drop-icon{display:none;}
#editorUploadMount #upload .drop-title{font-size:12px;white-space:nowrap;}
#editorUploadMount #upload .drop-title b{text-decoration:none;}
#editorUploadMount #upload .btnrow{margin:0 0 0 auto;gap:8px;flex-wrap:nowrap;}
#editorUploadMount #upload .btnrow button{padding:8px 11px;font-size:11px;white-space:nowrap;}
#editorUploadMount #upload .upload-state{margin-top:8px;padding:8px 10px;}
.editor-layout{display:flex;flex-direction:column;align-items:stretch;gap:24px;}
.editor-layout > .card{min-width:0;margin:0;}
.editor-layout .frame-card{min-height:0;}
.editor-layout .card-head{margin-bottom:16px;}
.editor-layout #configCard{display:block!important;}
.editor-layout .form{display:flex;gap:14px;}
.editor-layout .field input{width:132px;}
.editor-layout .field.wide input{width:192px;}
.editor-layout .field.wide .quality-control{width:320px;}
.editor-layout .export-btns{display:flex;flex-wrap:wrap;}
.editor-layout .export-btns button{width:auto;flex:1 1 160px;justify-content:center;}
.editor-layout .note{font-size:10px;}
@media(max-width:760px){
  .editor-layout .form{gap:14px;}
}
@media(max-width:560px){
  .home-hero{margin:46px auto 30px;padding:0 4px;}
  .home-hero h1{font-size:36px;}
  #homeUploadMount #upload{padding:20px;}
  #homeUploadMount #upload .drop{min-height:250px;}
  .editor-heading{align-items:flex-start;flex-direction:column;gap:10px;margin-top:4px;}
  #editorUploadMount #upload{padding:10px;}
  #editorUploadMount #upload .drop{align-items:flex-start;flex-direction:column;gap:8px;}
  #editorUploadMount #upload .drop-title{white-space:normal;}
  #editorUploadMount #upload .btnrow{width:100%;margin:0;}
  #editorUploadMount #upload .btnrow button{flex:1;justify-content:center;padding:8px 7px;}
  .editor-layout .form{align-items:stretch;flex-direction:column;}
  .editor-layout .field input,.editor-layout .field.wide input,.editor-layout .field.wide .quality-control{width:100%;max-width:none;}
  .editor-layout .export-btns{flex-direction:column;}
  .editor-layout .export-btns button{width:100%;flex:auto;}
}

/* 首页宽度随视口增长，避免桌面端内容被限制在窄列中。 */
.topbar-inner{max-width:1680px;padding-inline:clamp(24px,4vw,72px);}
.wrap{max-width:1680px;padding-inline:clamp(24px,4vw,72px);}
.home-hero{max-width:1040px;}

.mp4-import-panel{width:min(100%,620px);margin:18px auto 0;padding:14px 16px;border-radius:16px;text-align:left;background:linear-gradient(145deg,var(--well-top),var(--well-bot));box-shadow:inset 2px 3px 7px rgba(0,0,0,.09),inset -2px -3px 6px rgba(255,255,255,.62);cursor:default;}
.mp4-import-panel[hidden]{display:none!important;}
.mp4-import-copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mp4-import-copy strong{font-size:13px;font-weight:800;color:var(--text);}
.mp4-import-copy span{overflow:hidden;color:var(--sub);font-size:11px;text-overflow:ellipsis;white-space:nowrap;}
.mp4-alpha-select{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--sub);font-size:12px;font-weight:700;}
.mp4-alpha-select select{width:170px;padding:9px 34px 9px 12px;border:0;border-radius:10px;appearance:none;background-color:var(--surface-hi);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c5c60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px;color:var(--text);font:600 12px/18px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:inset 1px 2px 4px rgba(0,0,0,.08);}
.mp4-alpha-select select:focus-visible{outline:2px solid var(--ok);outline-offset:2px;}
.mp4-process-button{width:100%;justify-content:center;margin-top:12px;padding:9px 14px;background:linear-gradient(180deg,#38383c,#252527);color:#fff;font-size:12px;}
.mp4-process-button:hover{color:#fff;}
.mp4-import-hint{margin:10px 0 0;color:var(--faint);font:400 10px/15px ui-monospace,SFMono-Regular,Menlo,monospace;}
@media(max-width:560px){.mp4-alpha-select{align-items:flex-start;flex-direction:column;gap:6px}.mp4-alpha-select select{width:100%}}
.home-hero p{max-width:680px;}
#homeUploadMount{width:100%;max-width:1600px;}
@media(max-width:760px){
  .topbar-inner,.wrap{padding-inline:clamp(20px,4vw,32px);}
  #homeUploadMount #upload{padding:24px;}
  #homeUploadMount #upload .drop{min-height:250px;}
}
@media(max-width:560px){
  .topbar-inner,.wrap{padding-inline:16px;}
  #homeUploadMount #upload{padding:20px;}
  #homeUploadMount #upload .drop{min-height:230px;}
}

/* ---------- 首页累计数字墙 ---------- */
.stat-wall{
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,30px);
  width:100%;min-height:58px;margin:0 0 22px;padding:9px 18px;
  border:1px solid rgba(0,0,0,.055);border-radius:16px;
  background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));
  box-shadow:inset 1px 2px 4px rgba(0,0,0,.07),inset -1px -2px 4px rgba(255,255,255,.76),0 5px 12px -10px rgba(0,0,0,.24);
  cursor:pointer;
  animation:metal-settle .34s var(--ease) both;
}
.stat-wall:focus-visible{outline:2px solid var(--ok);outline-offset:3px;}
.stat-wall[hidden],.stat-div[hidden]{display:none!important;}
.stat-metric{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;}
.stat-num{display:inline-flex;align-items:center;padding:0;border:0;border-radius:0;background:none;color:#2f805a;font:700 clamp(20px,2.2vw,24px)/1 ui-rounded,"SF Pro Rounded","PingFang SC",sans-serif;letter-spacing:-.045em;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.88);}
.stat-label{font-size:11.5px;font-weight:500;color:var(--sub);letter-spacing:.01em;line-height:1.2;}
.stat-unit{font-size:10px;color:#72927f;line-height:1;}
.stat-div{width:1px;height:18px;background:linear-gradient(180deg,transparent,var(--brand-line),transparent);flex:0 0 auto;}
.stat-skel{display:block;width:36px;height:11px;border-radius:4px;background:var(--faint);opacity:.28;animation:stat-breathe 1.4s var(--ease) infinite;}
.privacy-note{font-size:10px;opacity:.8;}
@keyframes stat-breathe{0%,100%{opacity:.14}50%{opacity:.3}}
@media(max-width:560px){
  .stat-wall{min-height:52px;border-radius:14px;margin-bottom:18px;padding:8px 10px;gap:clamp(8px,2.8vw,16px);}
  .stat-metric{gap:4px;}
  .stat-num{font-size:19px;}
  .stat-label{font-size:10px;letter-spacing:0;}
  .stat-unit{font-size:9px;}
  .stat-skel{width:28px;height:10px;}
}
@media(prefers-reduced-motion:reduce){
  .stat-wall,.stat-skel{animation:none;}
}

.feedback-open{position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;border:0;border-radius:999px;color:#fff;background:linear-gradient(180deg,#38383c,#252528);font-family:inherit;font-size:12.5px;font-weight:500;line-height:16px;letter-spacing:-.005em;white-space:nowrap;box-shadow:inset 0 0 5px 1px rgba(255,255,255,.07),inset 1px 2px 2px -1px rgba(255,255,255,.18),0 0 0 .5px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.15),0 5px 12px -4px rgba(0,0,0,.22);transition:transform .12s linear,box-shadow .18s var(--ease),background .18s var(--ease)}
.feedback-open svg{width:15px;height:15px;flex:0 0 auto}
.feedback-open:hover{color:#fff;transform:translateY(-1px);box-shadow:inset 0 0 5px 1px rgba(255,255,255,.08),inset 1px 2px 2px -1px rgba(255,255,255,.2),0 0 0 .5px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.16),0 7px 15px -4px rgba(0,0,0,.24)}
.feedback-open:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.5)}
.feedback-open:focus-visible{outline:2px solid var(--ok);outline-offset:3px}
.feedback-dialog{position:fixed;top:16%;bottom:auto;width:min(420px,calc(100vw - 32px));max-height:calc(84dvh - 20px);margin:0 auto;padding:0;border:0;border-radius:24px;color:var(--text);background:linear-gradient(145deg,var(--surface-hi),var(--surface-lo));box-shadow:inset 0 0 4px 1px rgba(255,255,255,.88),inset 1px 2px 2px -1px rgba(255,255,255,.95),0 0 0 .5px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.08),0 18px 34px -18px rgba(0,0,0,.28);overflow:auto}
.feedback-dialog[open]{animation:feedback-surface-in .29s cubic-bezier(.22,.61,.36,1) both}
@keyframes feedback-surface-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.feedback-dialog::backdrop{background:rgba(27,28,32,.36);transition:background .22s var(--ease)}
.feedback-form{padding:20px}
.feedback-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.feedback-heading .eyebrow{color:var(--faint);font:500 10px/14px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.feedback-heading h2{margin:5px 0 0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.feedback-close{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:linear-gradient(180deg,#fff,#f4f3f0);color:var(--sub);box-shadow:var(--shadow-sm)}
.feedback-close svg{display:block;width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.feedback-intro{margin:9px 0 16px;color:var(--sub);font-size:12px;line-height:1.6}
.feedback-field{display:grid;gap:6px;margin-top:12px;color:var(--sub);font-size:12px;font-weight:600}
.feedback-field select,.feedback-field textarea,.feedback-field input{width:100%;border:0;border-radius:12px;background:linear-gradient(145deg,var(--well-top),var(--well-bot));box-shadow:inset 2px 3px 7px rgba(0,0,0,.1),inset -2px -3px 6px rgba(255,255,255,.64);color:var(--text);font-family:inherit;font-size:12.5px;font-weight:400;line-height:18px;padding:9px 11px;outline:none}
.feedback-field select{appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235c5c60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"),linear-gradient(145deg,var(--well-top),var(--well-bot));background-repeat:no-repeat,no-repeat;background-position:right 16px center,center;background-size:14px,auto}
.feedback-field select:focus,.feedback-field textarea:focus,.feedback-field input:focus{box-shadow:inset 2px 3px 7px rgba(0,0,0,.08),inset -2px -3px 6px rgba(255,255,255,.64),0 0 0 2px var(--ok)}
.feedback-field textarea{resize:vertical;min-height:100px;line-height:1.55}
.feedback-field input{height:36px}
.feedback-optional{color:var(--faint);font-size:10.5px;font-weight:400}
.feedback-trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.feedback-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;min-height:32px}
.feedback-status{color:var(--sub);font-size:11px}
.feedback-submit{min-height:32px;padding:0 15px;border:0;border-radius:999px;color:#fff;background:linear-gradient(180deg,#38383c,#252528);font-family:inherit;font-size:12px;font-weight:500;line-height:16px;white-space:nowrap;cursor:pointer;box-shadow:inset 0 0 5px 1px rgba(255,255,255,.07),inset 1px 2px 2px -1px rgba(255,255,255,.18),0 0 0 .5px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.15),0 5px 12px -4px rgba(0,0,0,.22)}
.feedback-submit:hover:not(:disabled){color:#fff;transform:translateY(-1px);box-shadow:inset 0 0 5px 1px rgba(255,255,255,.08),inset 1px 2px 2px -1px rgba(255,255,255,.2),0 0 0 .5px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.16),0 7px 15px -4px rgba(0,0,0,.24)}
.feedback-submit:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.5)}
.feedback-submit:disabled{opacity:.55;cursor:wait}
.feedback-privacy{display:block;margin-top:11px;color:var(--faint);font-size:10px;line-height:1.5}
@media(max-width:560px){.feedback-open{right:14px;bottom:14px;min-height:34px;padding:0 12px}.feedback-dialog{top:12%;max-height:calc(88dvh - 14px)}.feedback-form{padding:17px}.feedback-heading h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.feedback-dialog[open]{animation:none}.feedback-open,.feedback-dialog::backdrop{transition:none}}

/* ---------- FrameFlow 立体处理设备首页实验 ---------- */
.machine-stage{
  --machine-green:#8dd7a6;--machine-size:min(100%,680px);
  position:relative;isolation:isolate;display:flex;align-items:flex-start;justify-content:center;
  width:min(100%,1380px);height:clamp(690px,74vw,860px);margin:4px auto 54px;overflow:hidden;
  border-radius:34px;background:
    radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.92),rgba(255,255,255,.12) 52%,transparent 72%),
    linear-gradient(180deg,rgba(231,230,226,.26),rgba(243,243,241,0) 74%);
  perspective:1400px;transition:background .5s ease,box-shadow .5s ease;
}
.machine-stage::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.48;background-image:linear-gradient(rgba(76,77,75,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(76,77,75,.045) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(transparent 2%,#000 22%,#000 64%,transparent 95%);}
.machine-stage::after{content:"";position:absolute;z-index:-1;left:50%;top:45px;width:min(79vw,940px);height:min(79vw,940px);border:1px solid rgba(56,61,57,.055);border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 40px rgba(56,61,57,.018),0 0 0 100px rgba(56,61,57,.012);}
.machine-orbit{position:absolute;z-index:-1;left:50%;top:55px;width:min(72vw,790px);height:min(72vw,790px);border:1px solid rgba(72,80,74,.07);border-radius:50%;transform:translateX(-50%) rotateX(68deg);}
.orbit-two{width:min(60vw,650px);height:min(60vw,650px);top:112px;transform:translateX(-50%) rotateX(68deg) rotateZ(22deg);border-style:dashed;opacity:.7;}
.machine-halo{position:absolute;top:92px;left:50%;width:min(54vw,600px);height:430px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(135,202,153,.22),rgba(255,255,255,.34) 44%,transparent 72%);filter:blur(22px);transition:opacity .4s,transform .5s;}
.machine-unit{position:absolute;top:38px;left:50%;z-index:2;width:min(68vw,660px);transform:translateX(-50%) rotateX(4deg);transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s;filter:drop-shadow(0 38px 32px rgba(50,52,49,.16));}
.machine-top{position:relative;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 24px;color:#b6b8b2;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;border:1px solid #525351;border-bottom:0;border-radius:19px 19px 0 0;background:linear-gradient(180deg,#414240,#30312f);box-shadow:inset 0 1px rgba(255,255,255,.15);}
.machine-top::before{content:"";position:absolute;left:50%;bottom:0;width:60%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(141,215,166,.64),transparent);}
.machine-top i,.screen-live i{width:6px;height:6px;border-radius:50%;background:#8acb9c;box-shadow:0 0 11px #8acb9c;}
.machine-face{padding:20px 24px 18px;border:1px solid #4a4b49;border-top:1px solid #686965;border-radius:0 0 20px 20px;background:linear-gradient(120deg,#3d3e3c,#292a28 56%,#383936);box-shadow:inset 1px 1px rgba(255,255,255,.15),inset -2px -4px 8px rgba(0,0,0,.22),0 18px 25px -22px #000;transform:translateZ(12px);}
.machine-screen{position:relative;overflow:hidden;padding:18px 20px 15px;border:1px solid #1e211f;border-radius:12px;background:linear-gradient(145deg,#242b27,#171b19);box-shadow:inset 0 2px 14px rgba(0,0,0,.48),0 1px rgba(255,255,255,.13);color:#b8c6b9;}
.machine-screen::before{content:"";position:absolute;inset:0;opacity:.1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(190,240,200,.25) 4px);}
.screen-topline,.screen-caption{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#828e84;font:500 9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;}
.screen-live{display:flex;align-items:center;gap:7px;color:#a8d7ad;}
.screen-live i{width:5px;height:5px;}
.screen-art{position:relative;height:188px;margin:8px 0 3px;overflow:hidden;border-radius:8px;background:radial-gradient(ellipse at 50% 80%,rgba(117,196,135,.2),transparent 52%);}
.screen-scan{position:absolute;z-index:4;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#b7e8c3,transparent);opacity:.38;animation:screen-scan 5s linear infinite;}
.screen-frame{position:absolute;left:50%;top:50%;width:134px;height:134px;border:1px solid rgba(173,219,182,.46);border-radius:28px;transform:translate(-50%,-50%) rotate(45deg);background:linear-gradient(135deg,rgba(121,185,136,.22),rgba(81,123,94,.04));box-shadow:0 0 30px rgba(113,199,137,.13),inset 0 0 25px rgba(151,217,165,.08);}
.frame-back{width:110px;height:110px;left:43%;opacity:.38;animation:float-frame 6s ease-in-out infinite;}
.frame-mid{width:145px;height:145px;left:56%;opacity:.65;animation:float-frame 6s ease-in-out -2s infinite;}
.frame-front{width:96px;height:96px;left:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(159,226,170,.2),rgba(33,57,40,.25));animation:frame-breathe 3s ease-in-out infinite;}
.frame-front span{transform:rotate(-45deg);font:18px/1 ui-monospace,monospace;color:#b6e6bd;text-shadow:0 0 15px #a2e2ae;}
.screen-meter{position:absolute;left:50%;bottom:16px;display:flex;align-items:end;gap:4px;height:24px;transform:translateX(-50%);opacity:.72;}
.screen-meter i{display:block;width:3px;height:30%;border-radius:4px;background:#83c596;animation:meter 1s ease-in-out infinite alternate;}
.screen-meter i:nth-child(2){height:75%;animation-delay:-.3s}.screen-meter i:nth-child(3){height:45%;animation-delay:-.65s}.screen-meter i:nth-child(4){height:100%;animation-delay:-.15s}.screen-meter i:nth-child(5){height:58%;animation-delay:-.5s}.screen-meter i:nth-child(6){height:82%;animation-delay:-.8s}.screen-meter i:nth-child(7){height:34%;animation-delay:-.4s}
.screen-caption{padding-top:8px;border-top:1px solid rgba(164,204,171,.12);letter-spacing:.04em;color:#a8b5aa;}
.machine-controls{display:flex;align-items:center;gap:13px;height:58px;padding:14px 3px 0;}
.control-knob{position:relative;width:31px;height:31px;border:1px solid #181917;border-radius:50%;background:linear-gradient(145deg,#555653,#292a28);box-shadow:inset 1px 1px 2px rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.3);}
.control-knob::before{content:"";position:absolute;inset:4px;border:1px solid #777873;border-radius:50%;background:linear-gradient(145deg,#363735,#252624);}
.control-knob i{position:absolute;left:50%;top:6px;z-index:1;width:2px;height:7px;transform:translateX(-50%);border-radius:2px;background:#aeb0aa;}
.control-knob.small{width:23px;height:23px;}
.control-light{width:6px;height:6px;margin:0 7px;border-radius:50%;background:#84cb92;box-shadow:0 0 9px #79c989;}
.control-lines{display:flex;gap:4px;margin-left:auto;}
.control-lines i{width:28px;height:3px;border-radius:4px;background:#666762;box-shadow:inset 0 1px rgba(0,0,0,.5);}
.machine-base{display:flex;justify-content:center;gap:9px;height:12px;margin:0 18px;border:1px solid #282927;border-top:0;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#282927,#41423f);transform:translateZ(5px);}
.machine-base span{width:48px;height:2px;margin-top:4px;border-radius:5px;background:rgba(0,0,0,.32);}
.machine-floor{position:absolute;z-index:1;top:460px;left:50%;width:min(74vw,830px);height:126px;transform:translateX(-50%) rotateX(66deg);border-radius:50%;background:radial-gradient(ellipse,rgba(84,91,83,.16),rgba(126,177,136,.12) 28%,transparent 70%);filter:blur(8px);transition:all .4s;}
.machine-float-file{position:absolute;z-index:3;top:192px;left:calc(50% - 400px);width:58px;height:72px;padding:13px 10px 8px;border:1px solid rgba(255,255,255,.88);border-radius:9px;background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(233,235,230,.8));box-shadow:0 12px 25px rgba(52,59,53,.1);transform:rotate(-11deg);animation:file-hover 5.5s ease-in-out infinite;transition:transform .45s,opacity .3s;}
.machine-float-file i{display:block;height:2px;margin-bottom:5px;border-radius:4px;background:#c9ceca;}.machine-float-file i:first-child{width:78%;background:#8cc89b}.machine-float-file i:last-of-type{width:65%;}
.machine-float-file b{position:absolute;right:6px;bottom:5px;color:#89958b;font:600 7px/1 ui-monospace,monospace;letter-spacing:.04em;}
.file-b{top:282px;left:auto;right:calc(50% - 405px);transform:rotate(12deg);animation-delay:-1.8s}.file-b i:first-child{background:#efbf69;}.file-c{top:106px;left:auto;right:calc(50% - 355px);transform:rotate(8deg) scale(.82);opacity:.7;animation-delay:-3.1s}.file-c i:first-child{background:#92a9e0;}
.machine-intake-hint{position:absolute;z-index:4;top:480px;left:50%;display:flex;align-items:center;gap:10px;transform:translateX(-50%);color:#757770;font:500 9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;white-space:nowrap;transition:color .25s;}
.intake-arrow{display:grid;place-items:center;width:19px;height:19px;border:1px solid #babbb5;border-radius:50%;color:#4c7a58;font-size:13px;animation:arrow-drop 1.5s ease-in-out infinite;}
.intake-rule{width:34px;height:1px;background:linear-gradient(90deg,#c4c5bf,transparent);}
.machine-stage #homeUploadMount{position:absolute;z-index:6;top:532px;left:50%;width:min(calc(100% - 48px),760px);max-width:760px;transform:translateX(-50%);}
.machine-stage #homeUploadMount #upload{position:relative;margin:0;padding:0;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:linear-gradient(150deg,rgba(252,251,249,.88),rgba(237,236,232,.94));box-shadow:0 17px 38px -22px rgba(33,37,33,.36),inset 0 1px rgba(255,255,255,.95);backdrop-filter:blur(14px);}
.machine-stage #homeUploadMount #upload .card-head{display:none;}
.machine-stage #homeUploadMount #upload .drop{min-height:0;padding:21px 20px 18px;border:1px dashed #aeb5ae;border-radius:23px;background:transparent;box-shadow:inset 0 1px 5px rgba(255,255,255,.8);}
.machine-stage #homeUploadMount #upload .drop:hover{background:rgba(255,255,255,.52);border-color:#668d6c;}
.machine-stage #homeUploadMount #upload .drop-icon{display:none;}
.machine-stage #homeUploadMount #upload .drop-title{font-size:13px;font-weight:500;color:#626660;}
.machine-stage #homeUploadMount #upload .drop-title b{color:#303430;-webkit-text-fill-color:currentColor;text-decoration:underline;text-decoration-color:#78bd88;text-decoration-thickness:2px;text-underline-offset:4px;}
.machine-stage #homeUploadMount #upload .btnrow{margin-top:13px;gap:9px;}
.machine-stage #homeUploadMount #upload .btnrow button{padding:9px 15px;font-size:11px;background:linear-gradient(180deg,#fff,#f1f0ec);}
.machine-stage #homeUploadMount #upload .upload-state{margin:0;padding:0 20px 14px;background:transparent;}
.machine-stage #homeUploadMount #upload .upload-progress{height:5px;background:#dedfd9;}
.machine-stage #homeUploadMount #upload .upload-progress>i{background:linear-gradient(90deg,#5fb77a,#b3e0b9);box-shadow:0 0 12px rgba(98,189,122,.5);}
.machine-stage #homeUploadMount #upload .upload-status{padding-top:4px;font:500 10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;color:#5e7862;}
.machine-stage[data-mode="drag"] .machine-unit{transform:translateX(-50%) rotateX(0deg) translateY(-8px) scale(1.018);filter:drop-shadow(0 45px 40px rgba(70,137,83,.23));}
.machine-stage[data-mode="drag"] .machine-halo{transform:translateX(-50%) scale(1.12);opacity:1;}
.machine-stage[data-mode="drag"] .machine-intake-hint{color:#387c4d;}
.machine-stage[data-mode="drag"] .intake-arrow{background:#8dd7a6;border-color:#8dd7a6;color:#1c4529;}
.machine-stage[data-mode="loading"] .machine-unit,.machine-stage[data-mode="ready"] .machine-unit{filter:drop-shadow(0 38px 36px rgba(61,138,78,.23));}
.machine-stage[data-mode="loading"] .screen-live i{animation:live-pulse .8s ease infinite;}
.machine-stage[data-mode="loading"] .machine-screen{box-shadow:inset 0 2px 14px rgba(0,0,0,.48),0 0 24px rgba(120,208,140,.23);}
.machine-stage[data-mode="loading"] .file-a,.machine-stage[data-mode="loading"] .file-b,.machine-stage[data-mode="loading"] .file-c{opacity:0;transform:translateY(105px) scale(.6);}
.machine-stage[data-mode="ready"] .machine-screen{box-shadow:inset 0 2px 14px rgba(0,0,0,.48),0 0 28px rgba(120,208,140,.31);}
.machine-stage[data-mode="error"] .screen-live i{background:#dd887c;box-shadow:0 0 10px #dd887c;}
.machine-stage[data-mode="error"] .machine-screen{box-shadow:inset 0 2px 14px rgba(0,0,0,.48),0 0 20px rgba(221,136,124,.2);}
.machine-stage[data-mode="error"] .machine-message{color:#e4a298;}
@keyframes screen-scan{0%{top:0;opacity:0}12%{opacity:.5}88%{opacity:.42}100%{top:100%;opacity:0}}
@keyframes float-frame{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes frame-breathe{0%,100%{box-shadow:0 0 20px rgba(113,199,137,.13),inset 0 0 25px rgba(151,217,165,.08)}50%{box-shadow:0 0 38px rgba(113,199,137,.28),inset 0 0 34px rgba(151,217,165,.15)}}
@keyframes meter{to{height:90%;opacity:.55}}
@keyframes file-hover{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes arrow-drop{0%,100%{translate:0 -2px}50%{translate:0 3px}}
@keyframes live-pulse{50%{opacity:.35;box-shadow:0 0 3px #8acb9c}}
@media(max-width:800px){
  .machine-stage{height:700px;margin-top:0;border-radius:24px;}
  .machine-unit{top:68px;width:min(82vw,620px);}
  .machine-face{padding:16px 17px 14px;}
  .screen-art{height:160px;}
  .machine-floor{top:460px;}
  .machine-intake-hint{top:469px;}
  .machine-stage #homeUploadMount{top:516px;width:min(calc(100% - 32px),680px);}
  .machine-float-file{left:calc(50% - 340px);top:215px;}
  .file-b{left:auto;right:calc(50% - 340px);top:310px;}
  .file-c{right:calc(50% - 305px);top:131px;}
}
@media(max-width:560px){
  .machine-stage{height:650px;margin-bottom:30px;overflow:visible;border-radius:0;}
  .machine-stage::after{top:55px;width:118vw;height:118vw;}
  .machine-orbit{top:82px;width:102vw;height:102vw;}
  .orbit-two{top:118px;width:90vw;height:90vw;}
  .machine-halo{top:107px;width:100vw;height:310px;}
  .machine-unit{top:84px;width:calc(100vw - 38px);}
  .machine-top{height:27px;padding:0 15px;font-size:7px;}
  .machine-face{padding:11px 11px 10px;border-radius:0 0 15px 15px;}
  .machine-screen{padding:13px 12px 10px;border-radius:9px;}
  .screen-topline,.screen-caption{font-size:7px;}
  .screen-art{height:129px;margin:6px 0 2px;}
  .screen-frame{width:104px;height:104px;}
  .frame-back{width:86px;height:86px;}.frame-mid{width:112px;height:112px;}.frame-front{width:74px;height:74px;}
  .machine-controls{height:42px;padding-top:9px;gap:9px;}
  .control-knob{width:24px;height:24px;}.control-knob.small{width:18px;height:18px;}
  .control-knob::before{inset:3px;}.control-knob i{top:4px;height:6px;}
  .control-lines i{width:19px;height:2px;}
  .machine-base{height:9px;margin:0 10px;gap:5px;}
  .machine-floor{top:413px;width:98vw;height:104px;}
  .machine-intake-hint{top:425px;gap:7px;font-size:7px;letter-spacing:.08em;}
  .intake-arrow{width:17px;height:17px;}
  .intake-rule{width:18px;}
  .machine-stage #homeUploadMount{top:475px;width:calc(100% - 28px);}
  .machine-stage #homeUploadMount #upload{border-radius:19px;}
  .machine-stage #homeUploadMount #upload .drop{padding:17px 11px 14px;border-radius:18px;}
  .machine-stage #homeUploadMount #upload .drop-title{font-size:11px;line-height:1.6;}
  .machine-stage #homeUploadMount #upload .btnrow{gap:7px;margin-top:10px;}
  .machine-stage #homeUploadMount #upload .btnrow button{padding:8px 11px;font-size:10px;}
  .machine-stage #homeUploadMount #upload .upload-state{padding:0 13px 12px;}
  .machine-float-file{top:187px;left:calc(50% - 175px);width:42px;height:53px;padding:9px 7px 5px;}
  .machine-float-file i{margin-bottom:4px;height:1.5px;}.machine-float-file b{font-size:6px;right:4px;bottom:4px;}
  .file-b{top:297px;right:calc(50% - 174px);left:auto;}.file-c{top:124px;right:calc(50% - 165px);}
  .home-hero{margin:30px auto 22px;}
  .home-hero h1{font-size:clamp(30px,8.4vw,38px);}
  .home-hero p{font-size:12px;line-height:1.65;}
}
@media(prefers-reduced-motion:reduce){
  .machine-stage *, .machine-stage *::before,.machine-stage *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;}
}

/* 首页试验版修订：舞台按内容伸展，状态和可拖起机器反馈更清楚。 */
.machine-stage{height:auto;min-height:720px;padding-bottom:34px;overflow:visible;}
.machine-stage #homeUploadMount{position:relative;top:auto;left:auto;transform:none;margin:532px auto 0;}
.machine-stage .screen-progress{position:relative;z-index:2;height:2px;margin-top:8px;overflow:hidden;background:rgba(164,204,171,.1);}
.machine-stage .screen-progress i{display:block;width:100%;height:100%;transform:scaleX(var(--machine-progress,0));transform-origin:left center;background:linear-gradient(90deg,#75c789,#b9ebc0);box-shadow:0 0 10px rgba(135,227,157,.8);transition:transform .25s ease;}
.machine-stage[data-mode="idle"] .machine-top>i{animation:live-pulse 2.2s ease infinite;}
.machine-stage[data-mode="drag"] .machine-screen{box-shadow:inset 0 2px 14px rgba(0,0,0,.48),0 0 38px rgba(120,208,140,.42);}
.machine-stage[data-mode="drag"] .machine-top>i{animation:live-pulse .5s ease infinite;}
.machine-stage[data-mode="queued"] .machine-screen{box-shadow:inset 0 2px 14px rgba(0,0,0,.48),0 0 25px rgba(225,179,91,.25);}
.machine-stage[data-mode="queued"] .screen-live{color:#e8c985;}
.machine-stage[data-mode="queued"] .screen-live i{background:#e2b55f;box-shadow:0 0 10px #e2b55f;}
.machine-stage[data-mode="ready"] .screen-live{color:#a8e7b6;}
.machine-stage[data-mode="ready"] .machine-intake-hint{color:#3d8050;}
.machine-stage[data-mode="ready"] .screen-frame{border-color:rgba(168,231,182,.78);}
.machine-stage[data-mode="error"] .screen-live{color:#e4a298;}
.machine-stage.is-grabbed .machine-unit{z-index:9;cursor:grabbing;filter:drop-shadow(0 60px 48px rgba(48,58,49,.36));}
.machine-stage.is-grabbed .machine-halo{opacity:1;transform:translateX(-50%) scale(1.24);}
.machine-stage.is-grabbed .machine-floor{opacity:.28;transform:translateX(-50%) rotateX(66deg) scale(.76);}
.machine-unit{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;}
.machine-unit.is-held{transition:filter .2s ease;}
.machine-stage .machine-unit.is-returning{transition:transform .72s cubic-bezier(.16,1.45,.44,1),filter .5s ease;}
body.file-drag-active .machine-stage{background:radial-gradient(ellipse at 50% 40%,rgba(196,238,204,.38),rgba(255,255,255,.17) 55%,transparent 78%),linear-gradient(180deg,rgba(223,239,224,.36),rgba(243,243,241,0) 78%);}
body.file-drag-active .machine-stage::before{opacity:.82;background-image:linear-gradient(rgba(68,126,79,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(68,126,79,.09) 1px,transparent 1px);}
body.file-drag-active .machine-stage #homeUploadMount #upload .drop{border-color:#5da96f;background:rgba(230,248,233,.84);box-shadow:inset 0 0 0 1px rgba(92,170,111,.16),0 0 24px rgba(96,183,119,.2);}
body.file-drag-active .machine-stage #homeUploadMount #upload .drop-title{color:#276239;}
@media(max-width:800px){
  .machine-stage{min-height:690px;height:auto;}
  .machine-stage #homeUploadMount{top:auto;margin-top:516px;width:min(calc(100% - 32px),680px);}
}
@media(max-width:560px){
  .machine-stage{height:auto;min-height:650px;padding-bottom:30px;overflow:visible;}
  .machine-stage #homeUploadMount{top:auto;margin-top:475px;width:calc(100% - 28px);}
}

/* 首页待机态按视口排布，让标题、设备、上传区和页脚同时进入首屏。 */
body:not(.editor-mode){display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;}
body:not(.editor-mode) .topbar{position:sticky;top:0;z-index:50;flex:0 0 auto;}
body:not(.editor-mode) .topbar-inner{min-height:64px;padding-top:10px;padding-bottom:10px;}
body:not(.editor-mode) .wrap{display:flex;width:100%;flex:1 1 auto;flex-direction:column;min-height:0;padding-top:8px;padding-bottom:6px;}
body:not(.editor-mode) #homePage{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;}
body:not(.editor-mode) .home-hero{flex:0 0 auto;margin:5px auto 8px;padding:0 8px;}
body:not(.editor-mode) .home-hero h1{font-size:clamp(32px,4.2vw,48px);line-height:1.03;}
body:not(.editor-mode) .home-hero p{margin-top:8px;font-size:12px;line-height:1.55;}
body:not(.editor-mode) .stat-wall{flex:0 0 auto;min-height:40px;margin:0 auto 5px;padding:4px 14px;}
body:not(.editor-mode) .machine-stage{flex:1 1 auto;width:min(100%,1380px);height:auto;min-height:0;margin:0 auto;padding:0 0 6px;overflow:visible;}
body:not(.editor-mode) .machine-unit{top:0;transform:translateX(-50%) scale(var(--machine-scale,1)) rotateX(4deg);transform-origin:top center;}
body:not(.editor-mode) .machine-stage #homeUploadMount{position:absolute;top:auto;bottom:12px;left:50%;width:min(calc(100% - 40px),760px);margin:0;transform:translateX(-50%);}
body:not(.editor-mode) .machine-stage #homeUploadMount #upload .drop{padding:13px 18px 11px;}
body:not(.editor-mode) .machine-stage #homeUploadMount #upload .btnrow{margin-top:8px;}
body:not(.editor-mode) .machine-intake-hint{top:clamp(310px,calc(100dvh - 460px),440px);}
body:not(.editor-mode) .machine-floor{top:clamp(292px,calc(100dvh - 480px),420px);}
body:not(.editor-mode) .site-footer{flex:0 0 auto;margin:0;padding:8px 20px 10px;font-size:10px;line-height:1.4;}
body:not(.editor-mode) .site-footer .privacy-note{display:none;}
body:not(.editor-mode) .site-footer .home-link{padding:2px 6px;}
body:not(.editor-mode) .machine-stage .machine-screen{padding-top:13px;padding-bottom:10px;}
body:not(.editor-mode) .screen-art{height:clamp(128px,calc(100dvh - 710px + 128px),188px);}
body:not(.editor-mode) .machine-controls{height:47px;padding-top:9px;}
body:not(.editor-mode) .machine-base{height:9px;}
body:not(.editor-mode) .machine-stage[data-mode="drag"] .machine-unit{transform:translateX(-50%) scale(var(--machine-scale,1)) rotateX(0deg) translateY(-8px);}
body:not(.editor-mode) .machine-stage.is-grabbed .machine-unit{transform-origin:top center;}
body:not(.editor-mode) .machine-stage .machine-unit.is-returning{transition:transform .72s cubic-bezier(.16,1.45,.44,1),filter .5s ease;}
body:not(.editor-mode) .machine-unit.is-held{transition:filter .2s ease;}
@media(max-height:820px){
  body:not(.editor-mode){--machine-scale:.78;}
  body:not(.editor-mode) .machine-stage{min-height:380px;}
  body:not(.editor-mode) .machine-stage #homeUploadMount{bottom:5px;}
  body:not(.editor-mode) .machine-intake-hint{display:none;}
  body:not(.editor-mode) .machine-floor{top:265px;}
  body:not(.editor-mode) .home-hero{margin-top:1px;margin-bottom:5px;}
  body:not(.editor-mode) .home-hero h1{font-size:clamp(29px,3.8vw,38px);}
  body:not(.editor-mode) .home-hero p{font-size:11px;}
  body:not(.editor-mode) .stat-wall{min-height:34px;}
  body:not(.editor-mode) .site-footer{padding-top:5px;padding-bottom:6px;}
}
@media(max-height:700px){
  body:not(.editor-mode){--machine-scale:.68;}
  body:not(.editor-mode) .machine-stage{min-height:340px;}
  body:not(.editor-mode) .machine-stage #homeUploadMount #upload .drop{padding:9px 12px 7px;}
  body:not(.editor-mode) .machine-stage #homeUploadMount #upload .btnrow button{padding:6px 11px;}
  body:not(.editor-mode) .machine-stage #homeUploadMount #upload .btnrow{margin-top:5px;}
}
body.page-content-expanded:not(.editor-mode){height:auto;min-height:100dvh;overflow-y:auto;}
body.page-content-expanded:not(.editor-mode) .wrap{flex:0 0 auto;}
body.page-content-expanded:not(.editor-mode) #homePage{flex:none;}
body.page-content-expanded:not(.editor-mode) .machine-stage{flex:none;min-height:690px;height:auto;padding-bottom:34px;}
body.page-content-expanded:not(.editor-mode) .machine-unit{top:38px;transform:translateX(-50%) rotateX(4deg);}
body.page-content-expanded:not(.editor-mode) .machine-stage #homeUploadMount{position:relative;top:auto;bottom:auto;left:auto;width:min(calc(100% - 48px),760px);margin:532px auto 0;transform:none;}
body.page-content-expanded:not(.editor-mode) .site-footer{padding:26px 24px 30px;}
@media(max-width:800px){
  body.page-content-expanded:not(.editor-mode) .machine-stage{min-height:690px;}
  body.page-content-expanded:not(.editor-mode) .machine-stage #homeUploadMount{margin-top:516px;width:min(calc(100% - 32px),680px);}
}
@media(max-width:560px){
  body:not(.editor-mode) .topbar-inner{min-height:58px;padding:8px 16px;}
  body:not(.editor-mode) .wrap{padding:5px 12px 3px;}
  body:not(.editor-mode) .home-hero{margin:0 auto 4px;padding:0 2px;}
  body:not(.editor-mode) .home-hero h1{font-size:clamp(25px,7.5vw,34px);}
  body:not(.editor-mode) .home-hero p{margin-top:5px;font-size:10px;line-height:1.4;}
  body:not(.editor-mode) .stat-wall{min-height:31px;margin-bottom:2px;padding:3px 8px;}
  body:not(.editor-mode) .stat-label{font-size:9px;}
  body:not(.editor-mode) .stat-num{font-size:16px;}
  body:not(.editor-mode) .machine-stage{min-height:350px;padding-bottom:3px;}
  body:not(.editor-mode) .machine-unit{width:calc(100vw - 38px);}
  body:not(.editor-mode) .machine-stage #homeUploadMount{bottom:3px;width:calc(100% - 10px);}
  body:not(.editor-mode) .machine-stage #homeUploadMount #upload .drop{padding:8px 7px 6px;}
  body:not(.editor-mode) .machine-stage #homeUploadMount #upload .drop-title{font-size:9px;line-height:1.4;}
  body:not(.editor-mode) .machine-stage #homeUploadMount #upload .btnrow{margin-top:5px;}
  body:not(.editor-mode) .machine-stage #homeUploadMount #upload .btnrow button{padding:5px 8px;font-size:9px;}
  body:not(.editor-mode) .machine-stage #homeUploadMount #upload .upload-state{padding:0 10px 7px;}
  body:not(.editor-mode) .site-footer{gap:4px;padding:3px 10px 5px;font-size:8px;}
  body:not(.editor-mode) .site-footer .home-link{font-size:8px;}
  body.page-content-expanded:not(.editor-mode) .machine-unit{top:84px;width:calc(100vw - 38px);}
  body.page-content-expanded:not(.editor-mode) .machine-stage{min-height:650px;}
  body.page-content-expanded:not(.editor-mode) .machine-stage #homeUploadMount{margin-top:475px;width:calc(100% - 28px);}
  body.page-content-expanded:not(.editor-mode) .site-footer{padding:22px 16px 30px;}
}
@media(prefers-reduced-motion:reduce){
  body:not(.editor-mode) .machine-stage .machine-unit.is-returning{transition-duration:.01ms;}
}

/* 收紧机器与投放区的间距，并把可用高度留给完整首屏内容。 */
body:not(.editor-mode) #homePage{justify-content:center;}
body:not(.editor-mode) .machine-stage{flex:0 1 auto;height:clamp(340px,calc(100dvh - 330px),620px);min-height:340px;}
body:not(.editor-mode) .machine-intake-hint{top:clamp(300px,calc(100dvh - 460px),440px);}
body:not(.editor-mode) .machine-floor{top:clamp(285px,calc(100dvh - 480px),420px);}
@media(max-height:820px){
  body:not(.editor-mode) .machine-stage{height:clamp(340px,calc(100dvh - 330px),490px);min-height:340px;}
}
body.page-content-expanded:not(.editor-mode) #homePage{justify-content:flex-start;}
@media(prefers-reduced-motion:no-preference){
  .machine-stage:not([data-mode="drag"]):not(.is-grabbed) .machine-unit{animation:machine-hover 7s ease-in-out infinite;}
  @keyframes machine-hover{0%,100%{margin-top:0}50%{margin-top:-4px}}
}

/* 首页设备状态故障与运行反馈 */
.machine-stage::before,.machine-stage::after,.machine-orbit,.machine-halo,.machine-floor,.machine-float-file,.machine-intake-hint{pointer-events:none;}
.machine-stage[data-mode="loading"] .machine-unit{animation:machine-jolt .13s linear infinite!important;}
.machine-stage[data-mode="loading"] .machine-screen{border-color:#41644a;background:linear-gradient(145deg,#1f3023,#121a14);box-shadow:inset 0 2px 20px rgba(0,0,0,.58),0 0 32px rgba(73,202,107,.52),0 0 88px rgba(66,189,97,.2);}
.machine-stage[data-mode="loading"] .machine-screen::before{opacity:.22;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(155,255,174,.34) 3px);}
.machine-stage[data-mode="loading"] .machine-live,.machine-stage[data-mode="loading"] .screen-live{color:#b7f5c2;}
.machine-stage[data-mode="loading"] .machine-top>i,.machine-stage[data-mode="loading"] .control-light{background:#92f2a5;box-shadow:0 0 8px #8cff9d,0 0 22px rgba(103,255,130,.82);animation:live-pulse .35s ease infinite;}
.machine-stage[data-mode="loading"] .screen-progress{height:4px;background:rgba(152,243,167,.2);box-shadow:0 0 8px rgba(124,255,146,.3);}
.machine-stage[data-mode="loading"] .screen-progress i{background:linear-gradient(90deg,#5de17b,#c4ffc9);box-shadow:0 0 16px rgba(127,255,151,.95);}
.machine-stage[data-mode="loading"] .screen-frame{border-color:rgba(163,255,176,.78);box-shadow:0 0 38px rgba(93,240,120,.32),inset 0 0 28px rgba(151,255,165,.16);}
.machine-stage[data-mode="loading"] .machine-intake-hint{color:#2f8050;text-shadow:0 0 10px rgba(89,213,117,.4);}
.machine-stage[data-mode="error"] .machine-screen{border-color:#733a38;background:linear-gradient(145deg,#3d1e1d,#210f10);box-shadow:inset 0 2px 24px rgba(0,0,0,.7),0 0 34px rgba(224,71,63,.5),0 0 95px rgba(199,44,38,.18);}
.machine-stage[data-mode="error"] .machine-screen::before{opacity:.25;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,115,104,.38) 3px);}
.machine-stage[data-mode="error"] .screen-live,.machine-stage[data-mode="error"] .screen-caption{color:#ffaaa0;}
.machine-stage[data-mode="error"] .screen-live i,.machine-stage[data-mode="error"] .machine-top>i,.machine-stage[data-mode="error"] .control-light{background:#ff665e;box-shadow:0 0 10px #ff5148,0 0 24px rgba(255,54,45,.75);animation:fault-flash .55s steps(2,end) infinite;}
.machine-stage[data-mode="error"] .screen-frame{border-color:rgba(255,117,105,.76);background:linear-gradient(135deg,rgba(199,53,46,.26),rgba(60,21,19,.22));box-shadow:0 0 30px rgba(237,69,60,.28),inset 0 0 26px rgba(255,130,118,.14);}
.machine-stage[data-mode="error"] .frame-front span{color:#ffaaa0;text-shadow:0 0 16px #ff5d54;}
.machine-stage[data-mode="error"] .screen-progress{background:rgba(255,113,104,.2);}
.machine-stage[data-mode="error"] .screen-progress i{background:linear-gradient(90deg,#e64c45,#ffb2a8);box-shadow:0 0 14px rgba(255,82,72,.8);}
.machine-stage[data-mode="error"] .machine-top,.machine-stage[data-mode="error"] .machine-face{border-color:#663a37;}
.machine-stage #homeUploadMount #upload .upload-state{margin:12px 14px 14px;padding:12px 16px 9px;border:1px solid rgba(255,255,255,.74);border-radius:14px;background:linear-gradient(145deg,rgba(252,251,249,.94),rgba(235,234,229,.94));box-shadow:inset 0 1px rgba(255,255,255,.9),0 6px 16px -12px rgba(33,37,33,.28);}
.machine-stage[data-mode="error"] #homeUploadMount #upload .upload-state{border-color:rgba(224,91,80,.32);background:linear-gradient(145deg,#fff7f5,#f7e8e5);}
.machine-stage[data-mode="error"] #homeUploadMount #upload .upload-status{color:#ad4943;}
body:not(.editor-mode) .site-footer{position:relative;z-index:20;}
body:not(.editor-mode) .site-footer .home-link{position:relative;z-index:21;min-height:28px;padding:4px 9px;pointer-events:auto;}
@keyframes machine-jolt{0%,100%{translate:0 0}25%{translate:-1.5px .7px}50%{translate:1px -1px}75%{translate:-.7px -.5px}}
@keyframes fault-flash{0%{opacity:1}100%{opacity:.36}}

/* 首屏统计重新常显，并拉开标题说明与设备的间距。 */
body:not(.editor-mode) .home-hero{margin-bottom:24px;}
body:not(.editor-mode) .home-hero p{margin-top:12px;}
body:not(.editor-mode) .stat-wall{min-height:46px;margin-bottom:2px;padding:5px 17px;}
body:not(.editor-mode) .machine-stage{height:clamp(320px,calc(100dvh - 380px),600px);margin:24px auto 0;}
@media(max-height:950px){
  body:not(.editor-mode){--machine-scale:.84;}
  body:not(.editor-mode) .machine-stage{height:clamp(320px,calc(100dvh - 380px),520px);}
  body:not(.editor-mode) .screen-art{height:158px;}
  body:not(.editor-mode) .machine-intake-hint{top:clamp(300px,calc(100dvh - 550px),390px);}
  body:not(.editor-mode) .machine-floor{top:clamp(285px,calc(100dvh - 570px),375px);}
}
@media(max-height:820px){
  body:not(.editor-mode) .home-hero{margin-bottom:10px;}
  body:not(.editor-mode) .stat-wall{min-height:38px;margin-bottom:0;}
  body:not(.editor-mode) .home-hero p{margin-top:8px;}
  body:not(.editor-mode) .machine-stage{margin-top:12px;height:clamp(300px,calc(100dvh - 390px),430px);}
}
/* 页脚说明与两个导航链接使用相同的行高和垂直居中方式。 */
body:not(.editor-mode) .site-footer>p{display:flex;align-items:center;min-height:28px;line-height:1.4;}
body:not(.editor-mode) .site-footer>.home-link{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:28px;padding:0 9px;line-height:1.4;}

/* 上传状态已展开时，避免重复提示压在设备说明上，并缩短设备到上传面板的空隙。 */
body.page-content-expanded:not(.editor-mode) .machine-intake-hint{display:none;}
body.page-content-expanded:not(.editor-mode) .machine-stage #homeUploadMount{margin-top:425px;}
@media(max-width:800px){
  body.page-content-expanded:not(.editor-mode) .machine-stage #homeUploadMount{margin-top:410px;}
}
@media(max-width:560px){
  body.page-content-expanded:not(.editor-mode) .machine-stage #homeUploadMount{margin-top:390px;}
}