/* ======================================================================
   cubic-bezier 缓动生成器 · 独立设计（霓虹控制台 / 示波器主题）
   浅色 = 淡紫示波器面板；深色 = 霓虹夜场
   ====================================================================== */
.bz{
  --ink:#241d3d; --sub:#5f5580; --faint:#9d93bd;
  --bg:#f1eefb; --card:#ffffff; --card2:#ece7f8; --line:#d9d1ef; --line2:#e5dff5;
  --pri:#4f46e5; --pri-2:#818cf8; --pri-soft:#e4e0fb; --pri-ink:#3730a3;
  --neon:#0ea5e9; --mag:#c026d3; --grid:rgba(79,70,229,.14);
  --ok:#16a34a; --err:#dc2626;
  --r:14px;
  --shadow:0 2px 4px rgba(36,29,61,.06),0 14px 34px rgba(79,70,229,.12);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;line-height:1.75;
  background:
    radial-gradient(720px 320px at 85% -120px, rgba(192,38,211,.08), transparent 60%),
    radial-gradient(720px 320px at 5% -100px, rgba(14,165,233,.08), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .bz{
  --ink:#e7e3f7; --sub:#a49ac8; --faint:#6c628f;
  --bg:#0d0a1e; --card:#161229; --card2:#1c1735; --line:#2e2750; --line2:#251e44;
  --pri:#818cf8; --pri-2:#a5b4fc; --pri-soft:rgba(129,140,248,.14); --pri-ink:#c7d2fe;
  --neon:#22d3ee; --mag:#e879f9; --grid:rgba(129,140,248,.18);
  --ok:#4ade80; --err:#f87171;
  --shadow:0 2px 4px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5);
}
.bz *{box-sizing:border-box;}
.bz-wrap{max-width:1120px;margin:0 auto;}
.bz input,.bz textarea,.bz code{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}

.bz-hero{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;box-shadow:var(--shadow);}
.bz-hero h1{margin:0 0 4px;font-size:clamp(21px,3vw,27px);font-weight:900;}
.bz-hero h1 span{background:linear-gradient(90deg,var(--neon),var(--mag));-webkit-background-clip:text;background-clip:text;color:transparent;}
.bz-hero p{margin:0;color:var(--sub);font-size:14px;max-width:820px;}
.bz-hero p b{color:var(--pri-ink);}

.bz-desk{display:grid;grid-template-columns:380px 1fr;gap:16px;margin-top:16px;}
@media (max-width:960px){.bz-desk{grid-template-columns:1fr;}}
.bz-scope{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);}
.bz-scope canvas{width:100%;aspect-ratio:1/1;display:block;border-radius:10px;background:var(--card2);border:1px solid var(--line2);cursor:crosshair;touch-action:none;}
.bz-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.bz-nums label{font-size:11px;font-weight:800;color:var(--sub);display:block;}
.bz-nums input{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card2);color:var(--ink);font-size:13px;outline:none;text-align:center;}
.bz-nums input:focus{border-color:var(--pri-2);}
.bz-nums input.bad{border-color:var(--err);}

.bz-side{display:flex;flex-direction:column;gap:14px;}
.bz-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);}
.bz-card h2{margin:0 0 10px;font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--pri);}
.bz-track{height:64px;border-radius:10px;background:var(--card2);border:1px solid var(--line2);position:relative;overflow:hidden;}
.bz-ball{position:absolute;top:50%;left:14px;width:34px;height:34px;margin-top:-17px;border-radius:10px;background:linear-gradient(135deg,var(--neon),var(--mag));box-shadow:0 0 16px rgba(14,165,233,.5);transition:transform .9s linear;}
.bz-val{font-size:15px;font-weight:800;color:var(--pri-ink);background:var(--pri-soft);border:1px dashed var(--pri-2);border-radius:10px;padding:10px 14px;word-break:break-all;}
.bz-code{width:100%;min-height:110px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card2);color:var(--ink);font-size:12.5px;line-height:1.7;resize:vertical;outline:none;}
.bz-chips{display:flex;flex-wrap:wrap;gap:8px;}
.bz-chip{border:1px solid var(--line);background:var(--card2);color:var(--sub);border-radius:999px;padding:4px 13px;font-size:12.5px;font-weight:700;cursor:pointer;}
.bz-chip:hover{border-color:var(--mag);color:var(--pri-ink);}
.bz-msg{font-size:13px;font-weight:700;min-height:20px;}
.bz-msg.err{color:var(--err);}
.bz-msg.ok{color:var(--ok);}
.bz-row{display:flex;flex-wrap:wrap;gap:8px;}
.bz-btn{border:none;background:linear-gradient(135deg,var(--pri),var(--mag));color:#fff;border-radius:10px;padding:9px 18px;font-size:13.5px;font-weight:800;cursor:pointer;}
.bz-btn:hover{filter:brightness(1.1);}
.bz-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.bz-btn-ghost:hover{filter:none;border-color:var(--pri-2);}

/* ---------- 时长 / 时间轴 / 速度曲线 / 导出 ---------- */
.bz-extra{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
@media (max-width:900px){.bz-extra{grid-template-columns:1fr;}}
.bz-extra-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);min-width:0;}
.bz-extra-col h2{margin:0 0 8px;font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--pri);}
.bz-h2-gap{margin-top:18px;}
.bz-hint{margin:0 0 12px;font-size:12.5px;color:var(--sub);line-height:1.7;}
.bz-field{margin-bottom:10px;}
.bz-field label{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--sub);margin-bottom:4px;}
.bz-field label b{color:var(--pri-ink);}
.bz-range{width:100%;accent-color:var(--pri);}
.bz-tl{position:relative;height:14px;border-radius:999px;background:var(--card2);border:1px solid var(--line);margin:6px 0 8px;}
.bz-tl-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--neon),var(--mag));transition:width .12s;}
.bz-tl-dot{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--mag);box-shadow:0 0 8px var(--mag);transition:left .12s;}
.bz-samples{margin-top:10px;overflow-x:auto;}
.bz-table{width:100%;border-collapse:collapse;font-size:12px;min-width:360px;}
.bz-table th,.bz-table td{border-bottom:1px solid var(--line2);padding:6px 8px;text-align:right;}
.bz-table th:first-child,.bz-table td:first-child{text-align:left;}
.bz-table th{color:var(--sub);font-weight:800;background:var(--card2);}
.bz-table td.up{color:var(--ok);}
.bz-table td.down{color:var(--err);}
.bz-speed{background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;overflow-x:auto;}
.bz-speed svg{display:block;width:100%;height:auto;min-width:500px;}
.bz-speed .bz-sv{fill:var(--sub);font-size:11px;font-weight:700;font-family:inherit;}
.bz-fmt-out{margin:8px 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card2);color:var(--ink);font-size:12.5px;line-height:1.7;white-space:pre-wrap;overflow-x:auto;min-height:60px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;}
.bz-empty{color:var(--faint);font-size:12.5px;padding:18px 4px;text-align:center;}
.bz-chip.on{background:var(--pri);border-color:var(--pri);color:#fff;}
:root[data-theme="dark"] .bz-chip.on{color:#0d0a1e;}

.bz-faq{margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;box-shadow:var(--shadow);}
.bz-faq h2{margin:0 0 10px;font-size:19px;font-weight:900;color:var(--pri-ink);}
.bz-faq h3{margin:16px 0 4px;font-size:15px;font-weight:800;}
.bz-faq p{margin:0;color:var(--sub);font-size:14px;}
.bz-faq p b{color:var(--ink);}