:root{
    --bg:#f6f7f9; --card:#fff; --line:#e5e8ec; --fg:#14161a; --sub:#8b919c;
  }
  *{box-sizing:border-box}
  body{
    margin:0; padding:44px 20px 60px; background:var(--bg); color:var(--fg);
    font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
    display:flex; justify-content:center; -webkit-font-smoothing:antialiased;
  }
  .wrap{width:100%; max-width:840px}
  h1{font-size:17px; font-weight:600; margin:0 0 5px; letter-spacing:.2px}
  .sub{color:var(--sub); font-size:12.5px; margin:0 0 22px}
  .card{background:var(--card); border:1px solid var(--line); border-radius:14px}

  .drop{
    padding:56px 20px; text-align:center; cursor:pointer;
    border:1.5px dashed #d7dbe1; border-radius:14px; background:var(--card);
    transition:border-color .18s ease, background .18s ease;
  }
  .drop:hover{border-color:#b9c0c9}
  .drop.over{border-color:var(--fg); background:#fbfcfd}
  .drop svg{display:block; margin:0 auto 14px; opacity:.5}
  .drop .t{font-size:14px; font-weight:500}
  .drop .h{font-size:12px; color:var(--sub); margin-top:6px}

  .stage{
    padding:26px; display:flex; align-items:center; justify-content:center;
    min-height:220px; background:var(--card); border-radius:14px;
    background-image:linear-gradient(45deg,#fafbfc 25%,transparent 25%,transparent 75%,#fafbfc 75%),
                     linear-gradient(45deg,#fafbfc 25%,transparent 25%,transparent 75%,#fafbfc 75%);
    background-size:16px 16px; background-position:0 0,8px 8px;
  }
  .stage svg{width:100%; height:auto; max-height:56vh; display:block}

  .bar{
    display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap;
    margin-top:12px; padding:12px 14px;
  }
  .btn{
    font:inherit; font-size:13px; padding:6px 14px; border-radius:8px; cursor:pointer;
    border:1px solid var(--line); background:#fff; color:var(--fg); transition:.15s ease;
  }
  .btn:hover{border-color:#c7ccd4}
  .btn.primary{background:var(--fg); border-color:var(--fg); color:#fff}
  .btn.primary:hover{opacity:.85}
  .ctl,.chk{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:#4a5058}
  select{
    font:inherit; font-size:12.5px; padding:4px 6px; border:1px solid var(--line);
    border-radius:7px; background:#fff; color:var(--fg); cursor:pointer;
  }
  input[type=range]{width:120px; accent-color:#14161a; cursor:pointer}
  input[type=checkbox]{accent-color:#14161a; cursor:pointer; margin:0}
  .val{font-variant-numeric:tabular-nums; color:var(--sub); min-width:34px}
  .meta{margin-left:auto; font-size:12px; color:var(--sub); font-variant-numeric:tabular-nums}
  .err{margin-top:12px; color:#c0392b; font-size:12.5px}
  .hidden{display:none !important}
  kbd{
    font:inherit; font-size:11px; padding:1px 5px; border:1px solid var(--line);
    border-bottom-width:2px; border-radius:5px; color:var(--sub); background:#fafbfc;
  }

  @keyframes draw{
    from{ stroke-dashoffset:var(--len) }
    to  { stroke-dashoffset:0 }
  }